网页设计与制作教学课件
合集下载
《网页设计与制作》电子教案课程课件PPT 第一章
1.2.1站点的内容规划(2)
制作网页时还要注意一些问题： 第一，合理安排主页内容，主页应该简洁清晰、 一目了然，重点突出，图文有序。 第二，网页上要善用图片，色彩协调，格调一致， 但又要注意图片不可过大，以免影响浏览时的下 载速度。 第三，要易于导航，尽量减少链接级数，尽快通 过链接接触到实际内容，否则会使浏览者失去兴 趣。 第四，即要美观实用，又要有新颖的创意，网页 上要有一些与众不同的闪光点。Leabharlann 1.2.2站点的定义 (1)
如果有了站点文件夹，必须先经过定义，将这 个站点纳入到Dreamweaver的管理范围内。在 Dreamweaver中可以定义多个站点，但只有一 个站点是当前站点。
1.2.2站点的定义 (2)
1．定义站点 定义站点的具体操作步骤如下： （1）打开“站点”菜单，选择“定义站点”命令， 出现“定义网站”对话框。如图1-4所示。 （2）在“定义网站”对话框中，单击“新建”按 钮，出现“站点定义”对话框。如图1-5所示。 图1-5“站点定义”对话框 （3）在“站点定义”对话框中输入站点名称和站 点所在的路径，单击“确定”后返回“定义网站” 对话框。
1.1.2网页制作软件
本书介绍的软件是Macromedia公司的 Dreamweaver MX网页设计制作软件。在 Dreamweaver MX启动时会弹出如下窗口为 了方便读者与老版本衔接学习本书采用 Dreamweaver 4.0的经典样式。
1.2.3 Dreamweaver MX窗口介绍
Dreamweaver MX经过安装并输入正确的序列 号之后，用户就可以在Windows的启动菜单中 找到Dreamweaver MX的启动命令，点击该命 令即可启动Dreamweaver MX。启动后的窗口 界面如图1-1所示。
网页设计与制作-PPT课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
全套课件 《网页设计与制作》-邬锦霞
第1章 基 础 知 识
• 【本章导读】 本章主要介绍了网页制作的基本知识：第一节介绍网页
的基本概念和要素，在此基础上简述网页制作的一般过程； 第二节介绍了关于HTML的基本知识，并以实例的形式演 示了多种常用标签的使用方法；第三节主要为读者介绍在 网页制作过程中涉及到包括网页编辑、图像处理、动画制 作等方面的一些软件；最后一节简单讲解了Dreamweaver 软件的安装过程。
• （2）网页
网页是由HTML或者其他语言编写的，通过IE浏览 器编译后供用户获取信息的页面，它又称为Web页， 其中可包含文字、图像、表格、动画和超级链接等各 种网页元素。网页一般可分为“静态页面”和“动态 页面”。静态页面是指网页文件中没有程序，而只有 HTML代码，一般以.html或者.htm为后缀名。动态网 页就是指网页文件中不仅具有HTML标记，而且还含 有程序代码，并通过数据库建立连接，通常 以.asp、.aspx、.jsp、.php等为后缀名。
按照链接路径的不同，网页中超链接一般分为以下3 种类型：内部链接、锚点链接和外部链接。如果按照 使用对象的不同，网页中的链接又可以分为：文本超 链接、图像超链接、E-mail链接、锚点链接、多媒体 文件链接、空链接等。
• （5）交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收 的互动功能。这也是互联网的一大优势所在，它给人们提供了一 个快捷交流的平台，为人们的生活带来了许多便利。
• （2）收集相关内容和信息 确定好网页内容以后，就要开始收集相关的网页ห้องสมุดไป่ตู้材。素材既可 以从互联网上搜集，也可以从图书、报纸、光盘、多媒体上得来， 然后对搜集的材料去粗取精，去伪存真，作为自己制作网页的素 材。
• （3）设计网页版面 收集好所需的相关素材以后，就要开始设计网页的结构。在进入 实际的操作之前，有必要先勾画出要制作的网页版式和结构草图， 把构成网页的主页面、子页面等制成顺序表，并记录颜色、菜单 样式、使用方法等。
• 【本章导读】 本章主要介绍了网页制作的基本知识：第一节介绍网页
的基本概念和要素，在此基础上简述网页制作的一般过程； 第二节介绍了关于HTML的基本知识，并以实例的形式演 示了多种常用标签的使用方法；第三节主要为读者介绍在 网页制作过程中涉及到包括网页编辑、图像处理、动画制 作等方面的一些软件；最后一节简单讲解了Dreamweaver 软件的安装过程。
• （2）网页
网页是由HTML或者其他语言编写的，通过IE浏览 器编译后供用户获取信息的页面，它又称为Web页， 其中可包含文字、图像、表格、动画和超级链接等各 种网页元素。网页一般可分为“静态页面”和“动态 页面”。静态页面是指网页文件中没有程序，而只有 HTML代码，一般以.html或者.htm为后缀名。动态网 页就是指网页文件中不仅具有HTML标记，而且还含 有程序代码，并通过数据库建立连接，通常 以.asp、.aspx、.jsp、.php等为后缀名。
按照链接路径的不同，网页中超链接一般分为以下3 种类型：内部链接、锚点链接和外部链接。如果按照 使用对象的不同，网页中的链接又可以分为：文本超 链接、图像超链接、E-mail链接、锚点链接、多媒体 文件链接、空链接等。
• （5）交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收 的互动功能。这也是互联网的一大优势所在，它给人们提供了一 个快捷交流的平台，为人们的生活带来了许多便利。
• （2）收集相关内容和信息 确定好网页内容以后，就要开始收集相关的网页ห้องสมุดไป่ตู้材。素材既可 以从互联网上搜集，也可以从图书、报纸、光盘、多媒体上得来， 然后对搜集的材料去粗取精，去伪存真，作为自己制作网页的素 材。
• （3）设计网页版面 收集好所需的相关素材以后，就要开始设计网页的结构。在进入 实际的操作之前，有必要先勾画出要制作的网页版式和结构草图， 把构成网页的主页面、子页面等制成顺序表，并记录颜色、菜单 样式、使用方法等。
网页设计与制作课件
建设网站前的市场分析 建设网站的目的及功能定位 网站技术解决方案 网站内容及实现技术 网站维护、测试、发布与推广
➢网站前台布局
• 常见布局 • 布局原则 • 布局步骤
➢网站前台设计工具
• 网页制作工具 • 网页图像处理工具 • 网页动画制作工具
Web
网网选主
服 务 器
络 操 作 系
络 数 据
库
择 开 发 语
流 网 站
开
统
言发
技
ቤተ መጻሕፍቲ ባይዱ
术
网 站 性能测试 测 安全性测试 试 基本测试
网站优化测试
发
布 在线推广
与 推
离线推广
广
清华大学出版社
网网网网网
站站站站页
测后前规设
试台台划计
、设设 与
发计计 制
布
作
与
概
推
述
广
基本概念 网站的基本元素 网站的设计制作流程
1.网站设计需求分析 2.网站整体规划 3.设计网页图像 4.编辑制作网页 5.开发动态网站模板 6.测试、发布与上传 7.网站维护与推广
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作教学
注意
• 在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到 网页的代码结构。用户可以使用记事本对网页中的文字、图片、 表格、多媒体等页面内容进行编辑，并通过标记语言HTML对这 些元素进行描述和控制，最后由浏览器对这些标记进行解释并生 成最终呈现在用户眼前丰富多彩的网页。
• 提示：在网页中应用了某种字体样式后，如果浏览者的计 算机中没有安装该种样式的字体，字体就以计算机系统默认 的字体显示出来，此时就无法显示出网页的效果了。
网页设计与制作教学
• 图像在网页中可以起到提供信息、展示作品、美化网 页以及体现风格等功效。图像可以用作网页的标题、 网站Logo、网页背景、链接按钮、导航栏、网页主 图等。图像给人的视觉效果要比文字强烈得多，在网 页中灵活应用图像可以起到点缀的效果。虽然图像在 网页中不可或缺，但也不能太多，因为图像的下载速 度较慢，而且网页上如果放置了过多的图片，会显得 很乱，有喧宾夺主之势。
网页设计与制作教学
注意
• 网站由若干网页组合而成。实质上就是一个文件夹，用来存放站 点相关信息资源的文件夹。
网页设计与制作教学
5.网页基本元素有哪些？都有什么作用？设计的时候要注意什么？
• 网页包括的主要元素有：文本、图像、动画、导航 栏、超链接、表格、表单等。
网页设计与制作教学
• 文本是人类最重要的信息载体和交流工具，网页的 主体一般以文本为主。制作网页时，可以根据需要 设置文本的字体、字号、颜色、样式等属性，风格 独特的网页文本设置会给浏览者赏心悦目的感觉。
• 表单是一种特殊的网页元素，通常用于收集信息或 实现一些交互式的效果。表单的主要功能是接收浏 览者在浏览器的输入信息，然后将这些信息发送到 服务器端。
网页设计与制作教学
6.动态网页和静态网页的区别
• 在网站设计中，纯粹HTML格式的网页通常称为“静态网页”，它运 行于客户端，以.htm、.html、.shtml和.xml等为扩展名。静态网页 的内容仅仅是标准的HTML代码，静态网页上也可以出现各种动 态效果，如GIF格式的动画、Flash动画等，这些“动态效果”只是视 觉上的，与下面将要介绍的动态网页是不同的概念。
网页设计与制作教学
• 采用了动态网页技术，在服务器端运行的网页和程 序属于动态网页，它们会根据编写的程序访问数据 库动态地生成页面。动态网页文件的后缀一般都 是.asp、.aspx、.php、.jsp。动态网页的优点是效率 高、更新快、移植性强，可以根据先前所制定好的 程序页面，根据用户的不同请求返回其相应的数据， 从而达到资源的最大利用和节省服务器上的物理资 源。
• 1.1.1网页和网站概述 • 1.1.2 网页的主要元素 • 1.1.3 网页类型 • 1.1.4静态网页编辑软件 • 1.1.5网页图像与网页动画制作软件
网页设计与制作教学
1.什么是网页？
• 浏览Web时所看到的文件称为Web页，又称为网页。 网页可以将不同类型的多媒体信息（包括文字、图 像、动画、声音、视频等）组合在一个文档中。由 于这些文档是用超文本标记语言表示的，其文件名 一般是以.html或.htm结尾，因此又称为HTML文档或 超文本。
网页设计与制作教学
4.什么是网站？
• 根据提供服务的不同，通常把提供网页服务的服务器称为Web服 务器，相关网站称为Web站点。一个Web站点由一个或多个Web 页组成，这些Web页相互连接在一起，存放在Web服务器上，以 供浏览者访问。
• 网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、 雅虎等。网站是由很多网页链接在一起组成的。用户浏览到一个 网站时看到的第一个页面叫做主页。从主页出发，可以访问到本 网站的每一个页面，也可以链接到其他网站，方便地共享网站资 源。
• 1.1 学习任务：网页和网站基本知识 • 1.2 学习任务：网站开发的基本流程 • 1.5 学习任务：HTML标识语言基础 • 1.3 学习任务：全面认识Dreamweaver CS4 • 1.4 学习任务：创建和管理本地站点
• 1.7 实训
网页设计与制作教学
1.1学习任务：网页和网站基本知识
• 站外链接：在个人网站上放置一些与网站主题有关的对外链 接，不但可网站。(友情链接)
网页设计与制作教学
• 表格是网页中的一种用于控制网页页面布局的有效 方法。为了达到理想的视觉效果，通常不显示表格 的边框。使用表格辅助布局，可以实现网页横竖分 明的风格。
• 无论是文本还是图像都可以加上超链接标记，当鼠标指上超 链接对象时会变成小手形状，单击鼠标左键即可链接到相应 地址（URL）的网页。超链接包括站内链接和站外链接。
• 站内链接：若网站规划了多个主题版块，需要给网站的首页 加入超链接，让浏览者可以快速地转到感兴趣的页面。在各 个子页面也要有超级链接，并设有能够回到主页的链接。
网页设计与制作教学
• 导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站 点的每个网页上均应设置导航栏，并且应将其放置在网页中比较 明显的位置。设置导航栏的目的是使浏览者能够顺利地浏览网页， 方便地返回主页或继续下一页的访问。导航栏可以是文本、按钮 或图像的样式。
网页设计与制作教学
• 超链接是网页中最为有用的功能之一。超链接是从一个网页 指向另一个网页的链接，该链接既可以指向本地网站的另一 个网页，也可以指向世界各地的其他网页。
• 网页上的图像文件大部分都是使用JPG和GIF格式，因 为，它们除了具有压缩比例高外，还具有跨平台特性。
网页设计与制作教学
• 动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是 吸引浏览者的最有效的方法。如果网页中存有太多的动画，会使 浏览者眼花缭乱，无心细看。所以，对动画制作的要求越来越高。 在网页中加入的动画一般是GIF格式的动画和Flash（.swf）动画等。
网页设计与制作教学
2.什么是主页？
• 当我们浏览网站时看到的第一个页面。它是整个站 点的入口和门面，通常这样命名：index.html。
网页设计与制作教学
3.什么是超文本？
• 包含文字、图像、视频、声音等媒体的文本，网页 就是一个超文本文件，并且可以实现链接操作。
• 超文本可以给浏览者带来视觉和听觉的享受，所以 Web技术又称为超媒体技术。
注意
• 在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到 网页的代码结构。用户可以使用记事本对网页中的文字、图片、 表格、多媒体等页面内容进行编辑，并通过标记语言HTML对这 些元素进行描述和控制，最后由浏览器对这些标记进行解释并生 成最终呈现在用户眼前丰富多彩的网页。
• 提示：在网页中应用了某种字体样式后，如果浏览者的计 算机中没有安装该种样式的字体，字体就以计算机系统默认 的字体显示出来，此时就无法显示出网页的效果了。
网页设计与制作教学
• 图像在网页中可以起到提供信息、展示作品、美化网 页以及体现风格等功效。图像可以用作网页的标题、 网站Logo、网页背景、链接按钮、导航栏、网页主 图等。图像给人的视觉效果要比文字强烈得多，在网 页中灵活应用图像可以起到点缀的效果。虽然图像在 网页中不可或缺，但也不能太多，因为图像的下载速 度较慢，而且网页上如果放置了过多的图片，会显得 很乱，有喧宾夺主之势。
网页设计与制作教学
注意
• 网站由若干网页组合而成。实质上就是一个文件夹，用来存放站 点相关信息资源的文件夹。
网页设计与制作教学
5.网页基本元素有哪些？都有什么作用？设计的时候要注意什么？
• 网页包括的主要元素有：文本、图像、动画、导航 栏、超链接、表格、表单等。
网页设计与制作教学
• 文本是人类最重要的信息载体和交流工具，网页的 主体一般以文本为主。制作网页时，可以根据需要 设置文本的字体、字号、颜色、样式等属性，风格 独特的网页文本设置会给浏览者赏心悦目的感觉。
• 表单是一种特殊的网页元素，通常用于收集信息或 实现一些交互式的效果。表单的主要功能是接收浏 览者在浏览器的输入信息，然后将这些信息发送到 服务器端。
网页设计与制作教学
6.动态网页和静态网页的区别
• 在网站设计中，纯粹HTML格式的网页通常称为“静态网页”，它运 行于客户端，以.htm、.html、.shtml和.xml等为扩展名。静态网页 的内容仅仅是标准的HTML代码，静态网页上也可以出现各种动 态效果，如GIF格式的动画、Flash动画等，这些“动态效果”只是视 觉上的，与下面将要介绍的动态网页是不同的概念。
网页设计与制作教学
• 采用了动态网页技术，在服务器端运行的网页和程 序属于动态网页，它们会根据编写的程序访问数据 库动态地生成页面。动态网页文件的后缀一般都 是.asp、.aspx、.php、.jsp。动态网页的优点是效率 高、更新快、移植性强，可以根据先前所制定好的 程序页面，根据用户的不同请求返回其相应的数据， 从而达到资源的最大利用和节省服务器上的物理资 源。
• 1.1.1网页和网站概述 • 1.1.2 网页的主要元素 • 1.1.3 网页类型 • 1.1.4静态网页编辑软件 • 1.1.5网页图像与网页动画制作软件
网页设计与制作教学
1.什么是网页？
• 浏览Web时所看到的文件称为Web页，又称为网页。 网页可以将不同类型的多媒体信息（包括文字、图 像、动画、声音、视频等）组合在一个文档中。由 于这些文档是用超文本标记语言表示的，其文件名 一般是以.html或.htm结尾，因此又称为HTML文档或 超文本。
网页设计与制作教学
4.什么是网站？
• 根据提供服务的不同，通常把提供网页服务的服务器称为Web服 务器，相关网站称为Web站点。一个Web站点由一个或多个Web 页组成，这些Web页相互连接在一起，存放在Web服务器上，以 供浏览者访问。
• 网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、 雅虎等。网站是由很多网页链接在一起组成的。用户浏览到一个 网站时看到的第一个页面叫做主页。从主页出发，可以访问到本 网站的每一个页面，也可以链接到其他网站，方便地共享网站资 源。
• 1.1 学习任务：网页和网站基本知识 • 1.2 学习任务：网站开发的基本流程 • 1.5 学习任务：HTML标识语言基础 • 1.3 学习任务：全面认识Dreamweaver CS4 • 1.4 学习任务：创建和管理本地站点
• 1.7 实训
网页设计与制作教学
1.1学习任务：网页和网站基本知识
• 站外链接：在个人网站上放置一些与网站主题有关的对外链 接，不但可网站。(友情链接)
网页设计与制作教学
• 表格是网页中的一种用于控制网页页面布局的有效 方法。为了达到理想的视觉效果，通常不显示表格 的边框。使用表格辅助布局，可以实现网页横竖分 明的风格。
• 无论是文本还是图像都可以加上超链接标记，当鼠标指上超 链接对象时会变成小手形状，单击鼠标左键即可链接到相应 地址（URL）的网页。超链接包括站内链接和站外链接。
• 站内链接：若网站规划了多个主题版块，需要给网站的首页 加入超链接，让浏览者可以快速地转到感兴趣的页面。在各 个子页面也要有超级链接，并设有能够回到主页的链接。
网页设计与制作教学
• 导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站 点的每个网页上均应设置导航栏，并且应将其放置在网页中比较 明显的位置。设置导航栏的目的是使浏览者能够顺利地浏览网页， 方便地返回主页或继续下一页的访问。导航栏可以是文本、按钮 或图像的样式。
网页设计与制作教学
• 超链接是网页中最为有用的功能之一。超链接是从一个网页 指向另一个网页的链接，该链接既可以指向本地网站的另一 个网页，也可以指向世界各地的其他网页。
• 网页上的图像文件大部分都是使用JPG和GIF格式，因 为，它们除了具有压缩比例高外，还具有跨平台特性。
网页设计与制作教学
• 动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是 吸引浏览者的最有效的方法。如果网页中存有太多的动画，会使 浏览者眼花缭乱，无心细看。所以，对动画制作的要求越来越高。 在网页中加入的动画一般是GIF格式的动画和Flash（.swf）动画等。
网页设计与制作教学
2.什么是主页？
• 当我们浏览网站时看到的第一个页面。它是整个站 点的入口和门面，通常这样命名：index.html。
网页设计与制作教学
3.什么是超文本？
• 包含文字、图像、视频、声音等媒体的文本，网页 就是一个超文本文件，并且可以实现链接操作。
• 超文本可以给浏览者带来视觉和听觉的享受，所以 Web技术又称为超媒体技术。