第12部分网页制作和网站建设

《第12部分网页制作和网站建设》由会员分享，可在线阅读，更多相关《第12部分网页制作和网站建设（103页珍藏版）》请在装配图网上搜索。

1、12022-11-22第第12章章 网页制作和网站建设网页制作和网站建设22022-11-22本章内容本章内容12.1 网页基础网页基础12.2 HTML语言语言12.3 Dreamweaver CS4的使用的使用12.4 网站的发布和维护网站的发布和维护32022-11-22u网页是互联网上的基本文档，是用网页是互联网上的基本文档，是用HTML或其他语或其他语言言(JavaScript、VBScript、ASP、JSP、PHP、XML等等)编写的。编写的。u网页本质上就是一个存放在互联网中某个网页本质上就是一个存放在互联网中某个Web服务服务器上的文件。器上的文件。u当用户访问该网页时，存放

2、网页的服务器把网页传当用户访问该网页时，存放网页的服务器把网页传送到用户计算机，通过网页浏览器解读并展示出来。送到用户计算机，通过网页浏览器解读并展示出来。u访问一个网站时，打开的第一个网页称为主页访问一个网站时，打开的第一个网页称为主页(Homepage)，也叫首页。，也叫首页。12.1 网页基础网页基础42022-11-2212.1.1 网页的分类网页的分类12.1.2 网页的基本构成网页的基本构成12.1.3 网页常用制作工具网页常用制作工具12.1.4 网站制作流程网站制作流程12.1 网页基础网页基础52022-11-221.静态网页静态网页u静 态 网 页 是 指 纯静 态 网 页

3、 是 指 纯 H T M L 格 式 的 网 页，一 般格 式 的 网 页，一 般以以.htm、.html、.shtml或或.xml为后缀名。访问者请为后缀名。访问者请求浏览时，网页在求浏览时，网页在Web服务器中不会发生动态改变。服务器中不会发生动态改变。12.1.1 网页的分类网页的分类62022-11-22u静态网页的特点：静态网页的特点：(1)有固定的有固定的URL，而且，而且URL以以.htm、.html、.shtml等等常见形式为后缀，不包含常见形式为后缀，不包含“?”。(2)静态网页的内容保存在网站服务器上，每个静态网页静态网页的内容保存在网站服务器上，每个静态网页都是一个独立的

4、文件。都是一个独立的文件。(3)相对稳定，因此容易被搜索引擎检索。相对稳定，因此容易被搜索引擎检索。(4)无数据库支持，在网站制作和维护方面工作量较大。无数据库支持，在网站制作和维护方面工作量较大。(5)交互性差，在网页功能实现方面相对较弱。交互性差，在网页功能实现方面相对较弱。u静态网页的浏览：浏览器向静态网页的浏览：浏览器向Web服务器发出访问服务器发出访问静态网页的请求，静态网页的请求，Web服务器接受请求后直接将服务器接受请求后直接将网页传到浏览器，浏览器解读网页传到浏览器，浏览器解读HTML文件后显示。文件后显示。12.1.1 网页的分类网页的分类72022-11-222.动态网页动

5、态网页u动态网页一般指用动态网页一般指用ASP、PHP、JSP或或.NET等网络等网络编程语言编写的运行于服务器端的代码。编程语言编写的运行于服务器端的代码。u动态网页除了静态网页的元素外，还包含一些浏览动态网页除了静态网页的元素外，还包含一些浏览器和器和Web服务器交互的应用程序。服务器交互的应用程序。u动态网页里很多信息存放在数据库中，当访问者单动态网页里很多信息存放在数据库中，当访问者单击相应的链接时才动态生成网页。击相应的链接时才动态生成网页。u常见的动态网页后缀名有常见的动态网页后缀名有.asp、.jsp、.aspx、.cgi、.php等，访问动态网页网址中有一个标志性的等，访问动态

6、网页网址中有一个标志性的“?”。u浏览器发出动态网页请求后，服务器对代码进行编浏览器发出动态网页请求后，服务器对代码进行编译后生成译后生成HTML代码。代码。12.1.1 网页的分类网页的分类82022-11-22u动态网页的特点：动态网页的特点：(1)有数据库支持，可以降低网站维护的工作量。有数据库支持，可以降低网站维护的工作量。(2)交互性好，可以实现更多的功能，如：用户注册、在交互性好，可以实现更多的功能，如：用户注册、在线调查、订单管理等。线调查、订单管理等。(3)动态网页并不是独立存在于服务器上的网页文件，只动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个

7、完整的网页。有当用户请求时服务器才返回一个完整的网页。(4)在搜索引擎检索方面不如静态网页效果好，因此网站在搜索引擎检索方面不如静态网页效果好，因此网站在进行搜索引擎推广时要做一定的技术处理才能较在进行搜索引擎推广时要做一定的技术处理才能较好地被检索到。好地被检索到。12.1.1 网页的分类网页的分类92022-11-22(1)文字：需考虑文字的内容和整体效果。文字：需考虑文字的内容和整体效果。(2)图像：为了不影响网页传输速率，网页的图片不图像：为了不影响网页传输速率，网页的图片不能太大，常用的图片格式有能太大，常用的图片格式有GIF和和JPEG，二者，二者容量较小且具有跨平台的特性，可在不

8、同操作系容量较小且具有跨平台的特性，可在不同操作系统支持的浏览器上显示。统支持的浏览器上显示。(3)超链接：从一个网页指向另一个目的地的链接。超链接：从一个网页指向另一个目的地的链接。(4)表格：主要作用是控制网页其他元素的布局方式。表格：主要作用是控制网页其他元素的布局方式。(5)动画：常用的动画格式有动画：常用的动画格式有GIF和和SWF。GIF动画动画的原理就是高速连续显示多幅静态图片，的原理就是高速连续显示多幅静态图片，SWF动动画是用画是用Flash软件制作的矢量动画。软件制作的矢量动画。(6)其他元素：音频、视频、表单、脚本语言编写的其他元素：音频、视频、表单、脚本语言编写的特效特

9、效(如：图片滚动如：图片滚动)等。等。12.1.2 网页的基本构成网页的基本构成102022-11-22网页设计软件有网页设计软件有3类：网页编辑工具类：网页编辑工具 动画制作工具动画制作工具 图形图像处理工具图形图像处理工具(1)网页编辑工具：网页编辑工具：FrontPage、Dreamveaver FrontPage：Microsoft产品。使用简单、容易上手、产品。使用简单、容易上手、功能也比较强大，缺点是兼容性不好、对动态网页功能也比较强大，缺点是兼容性不好、对动态网页支持不好。支持不好。Dreamveaver：Adobe产品。目前应用最为广泛，产品。目前应用最为广泛，它是一款集网页制

10、作和管理网站于一身的所见即所它是一款集网页制作和管理网站于一身的所见即所得网页编辑器，可以对得网页编辑器，可以对HTML网页文件进行可视化编网页文件进行可视化编辑，还集成了程序开发语言。辑，还集成了程序开发语言。12.1.3 网页常用制作工具网页常用制作工具112022-11-22(2)动画制作工具：动画制作工具：Flash Flash：交互式动画设计工具，可以将音乐、声效和：交互式动画设计工具，可以将音乐、声效和动画方便地融合在一起。采用矢量绘图技术，因此动画方便地融合在一起。采用矢量绘图技术，因此放大后也不会失真，且容量小。放大后也不会失真，且容量小。(3)图形图像处理工具：图形图像处理工

11、具：Photoshop、Fireworks、CorelDRAW、Illustrator 一般网页设计中使用一般网页设计中使用Photoshop和和Fireworks处理处理图形图像。图形图像。Photoshop：Adobe产品。总体功能可分为图像编产品。总体功能可分为图像编辑、图像合成、校色调色及特效制作等部分。辑、图像合成、校色调色及特效制作等部分。12.1.3 网页常用制作工具网页常用制作工具122022-11-22(1)网站定位网站定位 明确客户要求制作一个什么样的网站。明确客户要求制作一个什么样的网站。(2)收集网站素材和策划栏目内容收集网站素材和策划栏目内容 可以让客户提交一份网站的

12、栏目计划书，收集可以让客户提交一份网站的栏目计划书，收集整理网站素材、确定栏目内容后一般要起草栏整理网站素材、确定栏目内容后一般要起草栏目规划书备案。目规划书备案。(3)提出页面设计方案提出页面设计方案 主要是美工根据前面的网站定位和栏目策划来主要是美工根据前面的网站定位和栏目策划来设计页面，包括主页和二级页面。设计页面，包括主页和二级页面。12.1.4 网页制作流程网页制作流程132022-11-22(4)制作页面制作页面 把美工设计的页面变成网页格式，通常是利用把美工设计的页面变成网页格式，通常是利用切片工具分割图片，保存成网页格式文件。注切片工具分割图片，保存成网页格式文件。注意区分网站

13、中的静态页面和动态页面。意区分网站中的静态页面和动态页面。(5)程序设计程序设计 把网页串联起来，结合数据库，实现后台功能。把网页串联起来，结合数据库，实现后台功能。(6)测试发布测试发布 网页和程序整合好后，进行本地测试，主要测网页和程序整合好后，进行本地测试，主要测试链接的有效性、浏览器中的显示效果等。之试链接的有效性、浏览器中的显示效果等。之后上传到客户的服务器中，由客户检测试用，后上传到客户的服务器中，由客户检测试用，并根据客户反馈意见修改。并根据客户反馈意见修改。12.1.4 网页制作流程网页制作流程142022-11-22uHTML是构成网页文档的标记语言。是构成网页文档的标记语言

14、。uHTML文件是纯文本文件，无需编译即可运行。文件是纯文本文件，无需编译即可运行。uHTML通过标记把文字、图片、多媒体等各种网通过标记把文字、图片、多媒体等各种网页元素组织形成网页。页元素组织形成网页。uHTML的格式非常简单，只是由文字及标记组合的格式非常简单，只是由文字及标记组合而成，基本上只要明白了各种标记的用法便掌握而成，基本上只要明白了各种标记的用法便掌握了了HTML。12.2 HTML语言语言152022-11-2212.2.1 HTML文档结构文档结构12.2.2 文本控制文本控制12.2.3 表格表格12.2.4 超级链接超级链接12.2.5 图像图像12.2.6 表单表单

15、12.2.7 层叠样式表单层叠样式表单12.2 HTML语言语言162022-11-22uHTML文件包含两部分：头信息部分和正文部分。文件包含两部分：头信息部分和正文部分。u包围的是包围的是HTML语言的标记，用来控制网页中语言的标记，用来控制网页中各元素的显示状态。各元素的显示状态。uHTML文件的一般结构：文件的一般结构：头信息部分头信息部分 正文部分正文部分 12.2.1 HTML文档结构文档结构172022-11-221.标签对位于标签对位于HTML文档的开头和结束位文档的开头和结束位置，左标签为开始的标志，右标签为结束标志。置，左标签为开始的标志，右标签为结束标志。2.标签对之间的

16、内容定义了标签对之间的内容定义了HTML文档的文档的头信息部分，包含了网页的一些基本信息。标签头信息部分，包含了网页的一些基本信息。标签对间的内容不会在浏览器的文档窗口中显示。对间的内容不会在浏览器的文档窗口中显示。12.2.1 HTML文档结构文档结构182022-11-22例：例：这是一个头信息的例子，这是网页标题这是一个头信息的例子，这是网页标题 Document.write(Hello net.)正文部分正文部分 12.2.1 HTML文档结构文档结构192022-11-22(1)：网页标题，显示在浏览器窗口的标题：网页标题，显示在浏览器窗口的标题栏。若无栏。若无命令，则在浏览器的窗口

17、标题命令，则在浏览器的窗口标题栏显示网页的栏显示网页的URL。(2)：单标签。指定网页的背景音乐。：单标签。指定网页的背景音乐。src属性：背景音乐文件的路径和文件名。属性：背景音乐文件的路径和文件名。loop属性：播放次数，属性：播放次数，-1表示循环播放。表示循环播放。(3)：单标签。设置文档浏览时所用的默认：单标签。设置文档浏览时所用的默认语言。语言。gb2312或或gb2312-80是一个简体中文字是一个简体中文字符集的中国国家标准。符集的中国国家标准。12.2.1 HTML文档结构文档结构202022-11-22(4)：标签对里面的代码是浏览器执行一：标签对里面的代码是浏览器执行一些

18、动作的脚本代码，通常是用脚本语言编写的，些动作的脚本代码，通常是用脚本语言编写的，如：如：JavaScript、VBScript等。等。脚本脚本script是使用一种特定的描述性语言，依据一定是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。的格式编写的可执行文件，又称作宏或批处理文件。脚本程序可以使用户和网页进行交互，但有些脚本脚本程序可以使用户和网页进行交互，但有些脚本程 序 会 被 植 入 病 毒，通 过 浏 览 器 菜 单程 序 会 被 植 入 病 毒，通 过 浏 览 器 菜 单“工工具具”“Internet选项选项”“安全安全”，可设置脚本的禁，可设置

19、脚本的禁用和启用。用和启用。12.2.1 HTML文档结构文档结构212022-11-223.定义了定义了HTML文档的主体部分，标签对之间文档的主体部分，标签对之间是实际要在浏览器窗口中显示的内容和其他用于控是实际要在浏览器窗口中显示的内容和其他用于控制网页元素显示方式的标签。制网页元素显示方式的标签。text属性：整个网页中的文字颜色。颜色取值采用十六进属性：整个网页中的文字颜色。颜色取值采用十六进制的红绿蓝制的红绿蓝(red-green-blue,RGB)值表示，即值表示，即#rrggbb。link属性：未阅读过的超链接文本的颜色。属性：未阅读过的超链接文本的颜色。alink属性：活动的

20、超链接文本属性：活动的超链接文本(鼠标移动到超链接上未按鼠标移动到超链接上未按下时下时)的颜色。的颜色。vlink属性：访问过的超链接文本的颜色。属性：访问过的超链接文本的颜色。12.2.1 HTML文档结构文档结构222022-11-22 background属性：背景图像文件。属性：背景图像文件。bgcolor属性：背景颜色。同时设定背景图像和背景颜属性：背景颜色。同时设定背景图像和背景颜色时，背景图像优先。色时，背景图像优先。leftmargin属性、属性、topmargin属性：分别为网页显示画属性：分别为网页显示画面与浏览器窗口左边沿、上边沿的距离，单位为像素。面与浏览器窗口左边沿、

21、上边沿的距离，单位为像素。bgproperties属性：页面背景图像的特性，值为属性：页面背景图像的特性，值为“fixed”表示页面背景图像为固定，不随页面的滚动而表示页面背景图像为固定，不随页面的滚动而滚动。滚动。12.2.1 HTML文档结构文档结构232022-11-221.字体属性字体属性(1)分别表示分别表示6种大小不同的标题字体，种大小不同的标题字体，表示表示的字体最大，的字体最大，表示的字体最小，标题标签表示的字体最小，标题标签间的内容显示为黑体字。间的内容显示为黑体字。(2)color属性：字体颜色，用属性：字体颜色，用6位十六进制的数字或颜位十六进制的数字或颜色名表示。色名表

22、示。如：要把文字设为红色如：要把文字设为红色 红色字体红色字体 红色字体红色字体 size属性：字体大小，分为属性：字体大小，分为7个等级，个等级，1号字体最小，号字体最小，7号字体最大。号字体最大。如：如：设为设为7号字体号字体12.2.2 文本控制文本控制242022-11-22 face属性：字体。属性：字体。如：如：仿宋体文字仿宋体文字 注：若浏览者的计算机上没有安装设置的字体，文字注：若浏览者的计算机上没有安装设置的字体，文字将以标准字体显示。将以标准字体显示。face属性允许列出多个字体，用属性允许列出多个字体，用逗号分隔，浏览器会根据顺序使用合适的字体显示。逗号分隔，浏览器会根据

23、顺序使用合适的字体显示。特殊的字体显示样式：特殊的字体显示样式：粗体粗体斜体斜体 上标上标下标下标 大字体大字体小字体小字体 下划线下划线、删除线删除线 打字机等间距字体打字机等间距字体 12.2.2 文本控制文本控制252022-11-222.文本布局文本布局(1)：创建一个段落。：创建一个段落。align属性：说明对齐方式，取值为属性：说明对齐方式，取值为left(左对齐左对齐)、center(居中居中)、right(右对齐右对齐)。(2)：单标签，在网页中显示一个换行。：单标签，在网页中显示一个换行。(3)：防止浏览器将标签对中过长的内容自：防止浏览器将标签对中过长的内容自动换行显示。对

24、住址、数学算式、一行数字、动换行显示。对住址、数学算式、一行数字、程序代码等尤为有用。程序代码等尤为有用。(4)：按缩进效果显示，与普通文本：按缩进效果显示，与普通文本文件中使用文件中使用Tab键缩进效果一样。键缩进效果一样。12.2.2 文本控制文本控制262022-11-22(5)：在页面的水平方向居中显示。：在页面的水平方向居中显示。(6)：移动显示图形和文本元素。：移动显示图形和文本元素。direction属性：指定移动方向，取值为属性：指定移动方向，取值为left、right、down、up。behavior属性：指定移动行为，取值为属性：指定移动行为，取值为scroll、alter

25、nate、slide。(7)、：创建定义式列表。：创建定义式列表。：可单标签。列表中的上层项目，即列表项目标题。：可单标签。列表中的上层项目，即列表项目标题。：可单标签。列表中最下层项目，即列表项。：可单标签。列表中最下层项目，即列表项。12.2.2 文本控制文本控制272022-11-22例：例：一个定义式列表一个定义式列表 中国城市中国城市 北京北京 上海上海 广州广州 美国城市美国城市 华盛顿华盛顿 芝加哥芝加哥 纽约纽约 12.2.2 文本控制文本控制282022-11-22(8)、：创建有编号列表，每个列表项前的前导记号为按：创建有编号列表，每个列表项前的前导记号为按顺序自动累加的数

26、字编号。顺序自动累加的数字编号。：创建无编号列表，每个列表项前有一个前导记号：创建无编号列表，每个列表项前有一个前导记号(Bullet，通常为一个黑圆点、空心圆点、方形黑点，通常为一个黑圆点、空心圆点、方形黑点)。：可单标签。创建有编号列表和无编号列表的列表项。：可单标签。创建有编号列表和无编号列表的列表项。12.2.2 文本控制文本控制292022-11-22例：例：一个有编号列表一个有编号列表+一个无编号列表一个无编号列表 中国城市中国城市 北京北京 上海上海 广州广州 美国城市美国城市 华盛顿华盛顿 芝加哥芝加哥 纽约纽约 12.2.2 文本控制文本控制302022-11-22表格组成：

27、行表格组成：行Rows、列、列Columns、单元、单元Cell。1.：定义表格区段，其他表格命令必须置于：定义表格区段，其他表格命令必须置于这个标签间。这个标签间。border属性：表格的边框线粗细。缺省为属性：表格的边框线粗细。缺省为1，表示表格边，表示表格边框线粗细为框线粗细为1像素；取值为像素；取值为0或无或无border属性表示表格没属性表示表格没有边框线。有边框线。cellspacing属性：单元格间距，指表格内单元格之间的属性：单元格间距，指表格内单元格之间的距离，及单元格和表格上下左右边框的距离，缺省值为距离，及单元格和表格上下左右边框的距离，缺省值为3。cellpadding

28、属性：单元格边距，指单元格内容与单元格属性：单元格边距，指单元格内容与单元格边框上下左右四个方向的距离，缺省值为边框上下左右四个方向的距离，缺省值为3。12.2.3 表格表格312022-11-22 width属性：表格宽度。取值是像素或百分比。属性：表格宽度。取值是像素或百分比。若若width的像素值大于显示器分辨率宽度，将出现滚动条。的像素值大于显示器分辨率宽度，将出现滚动条。实际应用中常使用百分比，则表格宽度将会随窗口显示宽实际应用中常使用百分比，则表格宽度将会随窗口显示宽度而自动调整。度而自动调整。bgcolor属性：表格背景色。取值是属性：表格背景色。取值是RGB或颜色名。或颜色名。

29、background属性：表格背景图片。取值为图片地址。属性：表格背景图片。取值为图片地址。注：注：bgcolor与与background同时设置时，同时设置时，background优先。优先。bordercolor属性：表格边框线颜色。只有当边框线属性：表格边框线颜色。只有当边框线border不为不为0时，此属性才起作用。时，此属性才起作用。align属性：表格对齐方式，取值属性：表格对齐方式，取值left(默认默认)、center、right。12.2.3 表格表格322022-11-222.：可单标签。表格行。：可单标签。表格行。align属性：同一行文字水平方向的排列方式，取值属性：同

30、一行文字水平方向的排列方式，取值left(默认默认)、middle、right。valign属性：同一行垂直方向的排列方式，取值属性：同一行垂直方向的排列方式，取值top、middle(默认默认)、bottom、baseline。3.：可单标签。表格单元格。：可单标签。表格单元格。rowspan属性：单元格行高。属性：单元格行高。colspan属性：单元格列宽。属性：单元格列宽。align属性：水平方向的排列方式，优先于属性：水平方向的排列方式，优先于。valign属性：垂直方向的排列方式，优先于属性：垂直方向的排列方式，优先于。bgcolor属性：单元格背景色，优先于属性：单元格背景色，优先

31、于。background属性：单元格背景图片，优先于属性：单元格背景图片，优先于。12.2.3 表格表格332022-11-224.：可单标签。定义表格列名，缺省的表头：可单标签。定义表格列名，缺省的表头字体为粗体且居中。字体为粗体且居中。有三个属性：有三个属性：rowspan、colspan、valign。5.：定义表格标题。：定义表格标题。align属性：取值为属性：取值为top或或bottom，表示标题位于表格，表示标题位于表格正上方或正下方居中显示，缺省为正上方或正下方居中显示，缺省为top。12.2.3 表格表格342022-11-22例：例：1行，行，1单元单元 1行，行，2单元单

32、元 2行，行，1单元单元 2行，行，2单元单元 12.2.3 表格表格352022-11-22u建立超链接的基本样式：建立超链接的基本样式：click here href属性：指定超链接的目标，属性：指定超链接的目标，value的引号可省略。的引号可省略。click here：可以是文字、图片等，以特殊方式显示。：可以是文字、图片等，以特殊方式显示。u超链接的目标可以是站外地址、同一网站内部、超链接的目标可以是站外地址、同一网站内部、同一网页不同位置。同一网页不同位置。1.站外链接站外链接 站外链接是指单击超链接打开站外页面，通常链站外链接是指单击超链接打开站外页面，通常链接目标位置写的是一个

33、网址或是一个绝对地址。接目标位置写的是一个网址或是一个绝对地址。12.2.4 超级链接超级链接362022-11-222.站内链接站内链接 站内链接是从站内的一个页面链接到另一个页站内链接是从站内的一个页面链接到另一个页面，链接目标只要写相对地址。面，链接目标只要写相对地址。站内链接目标的写法一般有以下站内链接目标的写法一般有以下4种：种：例例1：站内链接站内链接1 链接起始文件和链接起始文件和bbs文件夹在同一目录下。文件夹在同一目录下。“./bbs”代表当前目录下的代表当前目录下的bbs文件夹，文件夹，“./”可省略。可省略。例例2：站内链接站内链接2 链接起始文件的上一层目录下有链接起始

34、文件的上一层目录下有bbs文件夹，文件夹，“.”表表示上一层目录。示上一层目录。例例3：站内链接站内链接3 根目录下有根目录下有admin文件夹，第一个文件夹，第一个“/”表示根目录。表示根目录。例例4：站内链接站内链接4 链接起始文件与目标文件位于同一目录下。链接起始文件与目标文件位于同一目录下。12.2.4 超级链接超级链接372022-11-223.锚点锚点 若一个页面内容很多，可在页面不同位置设置锚若一个页面内容很多，可在页面不同位置设置锚点标记，单击超链接跳转到同一页面的相应位置。点标记，单击超链接跳转到同一页面的相应位置。u首先设置跳转目标点，即锚点：首先设置跳转目标点，即锚点：“

35、锚点名称锚点名称”由用户命名，右标签可缺省。由用户命名，右标签可缺省。u然后设置链接起始点，即鼠标单击的位置：然后设置链接起始点，即鼠标单击的位置：click here12.2.4 超级链接超级链接382022-11-22例：例：第一章第一章 第二章第二章 第三章第三章 第四章第四章 第五章第五章 第六章第六章 第一章第一章这是第一章内容这是第一章内容第二章第二章这是第二章内容这是第二章内容第三章第三章这是第三章内容这是第三章内容第四章第四章这是第四章内容这是第四章内容第五章第五章这是第五章内容这是第五章内容第六章第六章这是第六章内容这是第六章内容12.2.4 超级链接超级链接392022-1

36、1-22 src属性：必选属性，指明图片的位置和名称。属性：必选属性，指明图片的位置和名称。width和和height属性：设定图片在网页中的显示尺寸，值可属性：设定图片在网页中的显示尺寸，值可以是像素和百分比以是像素和百分比。如：如：border属性：在图片周围加上边框，设定边框线的粗细。属性：在图片周围加上边框，设定边框线的粗细。如：如：alt属性：图片不能正常显示时，则显示属性：图片不能正常显示时，则显示alt属性中设置的替属性中设置的替代文字。代文字。如：如：12.2.5 图像图像402022-11-22u表单的功能：表单用在动态网页中，提供给用户表单的功能：表单用在动态网页中，提供给

37、用户输入数据的界面。输入数据的界面。u表单中的数据传送到服务器后，由服务器端的表单中的数据传送到服务器后，由服务器端的CGI(Common Gateway Interface,通用网关界通用网关界面面)程序处理。程序处理。CGI：一套定义：一套定义WWW服务器和脚本程序沟通的标准。服务器和脚本程序沟通的标准。脚本程序：位于服务器端的一些可执行程序，用来接脚本程序：位于服务器端的一些可执行程序，用来接收、处理客户端送来的信息，并可把处理结果再送回收、处理客户端送来的信息，并可把处理结果再送回客户端。客户端。CGI程序：位于服务器端符合程序：位于服务器端符合CGI标准的脚本程序。标准的脚本程序。1

38、2.2.6 表单表单412022-11-22 CGI程序的典型应用程序的典型应用 在服务器端建立一个具有各种表单格式的在服务器端建立一个具有各种表单格式的HTML文件，文件，用户在客户端使用浏览器调用这个用户在客户端使用浏览器调用这个HTML文件，并在文件，并在表单中输入相应的资料或信息，然后将表单中的内容表单中输入相应的资料或信息，然后将表单中的内容发送到服务器端，服务器则启动一个相应的发送到服务器端，服务器则启动一个相应的CGI程序程序对这些内容进行处理，也可将处理结果送回客户端浏对这些内容进行处理，也可将处理结果送回客户端浏览器中。览器中。CGI最著名的应用为最著名的应用为BBS。12.

39、2.6 表单表单422022-11-221.：产生表单，标明：产生表单，标明“表单区段表单区段”。method属性：用户输入数据传送到服务器端的方式，属性：用户输入数据传送到服务器端的方式，取值取值post、get。action属性：指定服务器处理表单的属性：指定服务器处理表单的CGI程序。程序。12.2.6 表单表单432022-11-222.：产生输入控件。：产生输入控件。12.2.6 表单表单单行文字框单行文字框选择按钮选择按钮复选框复选框发送按钮发送按钮重置按钮重置按钮442022-11-22 type属性：产生不同的输入控件。属性：产生不同的输入控件。text：单行文字框：单行文字框

40、(Text Box)，用户输入一般信息使用。，用户输入一般信息使用。radio：选择按钮：选择按钮(Radio Button)，产生具有单一选择，产生具有单一选择结果的圆点。结果的圆点。checkbox：复选框：复选框(Check Box)，产生具有多重选择，产生具有多重选择的方框，的方框，表示选中。表示选中。password：密码文字框：密码文字框(Password)，类似，类似text单行文单行文字框，用于输入密码，不显示在屏幕上。字框，用于输入密码，不显示在屏幕上。submit：发送按钮：发送按钮(Submit Button)，产生一个按钮，产生一个按钮，用户按下时即将表单中用户输入的数

41、据送到服务器端，用户按下时即将表单中用户输入的数据送到服务器端，供供CGI程序处理。程序处理。reset：重置按钮：重置按钮(Reset Button)，恢复默认值，供用，恢复默认值，供用户重新输入。户重新输入。12.2.6 表单表单452022-11-22 name属性：指定输入控件的名称，可任意取变量名。属性：指定输入控件的名称，可任意取变量名。value属性：设定输入控件的默认值或用户输入的内属性：设定输入控件的默认值或用户输入的内容，对于按钮则指定按钮上标示文字。容，对于按钮则指定按钮上标示文字。maxlength属性：输入文字框的最大可输入字符数。属性：输入文字框的最大可输入字符数。

42、size属性：输入文字框的显示宽度属性：输入文字框的显示宽度(以字符数计算以字符数计算)。checked属性：将选择按钮或复选框置为已选状态。属性：将选择按钮或复选框置为已选状态。12.2.6 表单表单注：当按下注：当按下“发送发送”按钮时，实际上是将按钮时，实际上是将name和和value的内容发送。的内容发送。462022-11-22例：浏览器中的显示结果见上图。例：浏览器中的显示结果见上图。姓名：姓名：性别：性别：男男 女女 系别：系别：计算机工程系计算机工程系 电气工程系电气工程系 机械工程系机械工程系 机电工程系机电工程系 管理工程系管理工程系 个人爱好（可复选）：个人爱好（可复选）

43、：文学文学 书法书法 体育体育 音乐音乐 绘画绘画 收藏收藏 12.2.6 表单表单472022-11-223.：多行文字框，产生附加滚动条的多：多行文字框，产生附加滚动条的多行文字框，供用户输入。行文字框，供用户输入。name属性：指定控件名。属性：指定控件名。rows属性：可见总行数。属性：可见总行数。cols属性：可见总列数。属性：可见总列数。12.2.6 表单表单482022-11-22例：浏览器中的显示结果见上图。例：浏览器中的显示结果见上图。2010年度网络安全十大新闻事件：年度网络安全十大新闻事件：1.内鬼作乱内鬼作乱 2.美国政府加强网络安全建设美国政府加强网络安全建设 3.云

44、计算服务安全问题云计算服务安全问题 4.维基解密掀起轩然大波维基解密掀起轩然大波 5.僵尸网络头目被逮捕僵尸网络头目被逮捕 6.黑客多贪财黑客多贪财 7.Stuxnet恶意软件攻击核设施恶意软件攻击核设施 8.苹果再掀风浪苹果再掀风浪 9.安全行业掀起并购狂潮安全行业掀起并购狂潮 10.发现安全隐患发现安全隐患 通知责任人还是公开发布通知责任人还是公开发布?12.2.6 表单表单492022-11-224.：定义选项区段，与：定义选项区段，与配合使配合使用以产生一个下拉列表框。用以产生一个下拉列表框。multiple属性：列表框中的项目可复选。属性：列表框中的项目可复选。name属性：控件名称

45、。属性：控件名称。size属性：列表框中可见的项目数。属性：列表框中可见的项目数。5.：产生选择项目，必须置于：产生选择项目，必须置于区段内，产生列表框中的一个选项。区段内，产生列表框中的一个选项。selected属性：将选项设为选中状态。属性：将选项设为选中状态。value属性：用户选中该项目时，该项目显示文字可属性：用户选中该项目时，该项目显示文字可作为默认的回传值，供作为默认的回传值，供CGI程序处理。程序处理。12.2.6 表单表单502022-11-22例：浏览器中的显示结果见上图。例：浏览器中的显示结果见上图。北京市北京市 天津市天津市 上海市上海市 重庆市重庆市 12.2.6 表

46、单表单512022-11-22u层叠样式表单层叠样式表单(Cascading Style Sheets,CSS)是是用于定义各种样式的一套规范，它的原则是用于定义各种样式的一套规范，它的原则是“先先定义后使用定义后使用”，即先定义好一些样式，再把这些，即先定义好一些样式，再把这些样式指定给网页的某些元素。样式指定给网页的某些元素。u一个网站中的所有页面风格和样式应该是统一的，一个网站中的所有页面风格和样式应该是统一的，这样显得整齐和美观，所以通常设计中使用这样显得整齐和美观，所以通常设计中使用CSS控制网站样式，达到一致性的效果。控制网站样式，达到一致性的效果。uHTML定义的是网页结构，定义

47、的是网页结构，CSS定义的是网页外定义的是网页外观。使用观。使用CSS会使网页格式控制变得很灵活。会使网页格式控制变得很灵活。uCSS样式可以定义在样式可以定义在HTML文档里，也可以单独文档里，也可以单独作为一个文件。作为一个文件。uCSS样式可以作用于多个页面或整个站点；修改样式可以作用于多个页面或整个站点；修改CSS样式，涉及到的网页都会被修改，维护方便。样式，涉及到的网页都会被修改，维护方便。12.2.7 层叠样式表单层叠样式表单522022-11-221.CSS的工作过程的工作过程例：例：CSS例例1 第一个红色黑体二级标题第一个红色黑体二级标题 第二个红色黑体二级标题第二个红色黑体

48、二级标题 12.2.7 层叠样式表单层叠样式表单u：定义：定义CSS样式。样式。u：命令间的内容为：命令间的内容为注解，不会显示。注解，不会显示。u之间定义的是之间定义的是标题的标题的样式。页面中所有的样式。页面中所有的标标题都会使用这种样式。题都会使用这种样式。532022-11-222.定义定义CSS CSS样式的定义具有统一格式样式的定义具有统一格式 如：如：h2font-family:黑体黑体 h2称为选择器。称为选择器。大括号间定义的是各种属性和属性值，属性和属性值大括号间定义的是各种属性和属性值，属性和属性值间用冒号隔开。间用冒号隔开。多个属性间用分号分开。多个属性间用分号分开。1

49、2.2.7 层叠样式表单层叠样式表单542022-11-22(1)标签作为选择器标签作为选择器u例例1：h2标签就是一个选择器。标签就是一个选择器。u例例2：CSS样式：样式：h2 font-family:黑体黑体,Arial,Helvetica;color:red;font-family属性定义了属性定义了3个属性值，用逗号隔开，个属性值，用逗号隔开，表示表示3种字体可供浏览器按顺序选择，如果都没种字体可供浏览器按顺序选择，如果都没有，则用默认字体显示。有，则用默认字体显示。12.2.7 层叠样式表单层叠样式表单552022-11-22(2)类作为选择器类作为选择器 类选择器例子类选择器例子

50、 这里使用了这里使用了c1定义的样式定义的样式 这里也使用了这里也使用了c1定义的样式定义的样式 12.2.7 层叠样式表单层叠样式表单u作为选择器的类的名称必须作为选择器的类的名称必须以以“.”开头，后面跟开头，后面跟，里，里面写属性值。面写属性值。562022-11-223.在在HTML中使用中使用CSS HTML中有中有3种方式使用种方式使用CSS：(1)在在标签中定义标签中定义CSS。(2)在元素标签中定义在元素标签中定义CSS。(3)采用链接形式调用采用链接形式调用CSS文件。文件。前两种方式适合用在定义单一前两种方式适合用在定义单一HTML文档时，如文档时，如果有多个页面用到同样的

51、果有多个页面用到同样的CSS样式，则采用第样式，则采用第3种方式比较好。种方式比较好。12.2.7 层叠样式表单层叠样式表单572022-11-22(1)在在标签中定义标签中定义CSSu把样式定义写在注释标签中，然后放进把样式定义写在注释标签中，然后放进标签，最后写在标签，最后写在HTML文档的文档的标签中。标签中。u对于类选择器定义的对于类选择器定义的CSS，在文档的，在文档的标标签中要调用它，必须采用签中要调用它，必须采用Class属性：属性：Class=类选择器名称类选择器名称12.2.7 层叠样式表单层叠样式表单582022-11-22(2)在元素标签中定义在元素标签中定义CSS CS

52、S定义放在定义放在部分的各个标签中。部分的各个标签中。12.2.7 层叠样式表单层叠样式表单例：例：元素标签中使用元素标签中使用CSS例子例子 这是个使用了这是个使用了CSS样式的标题样式的标题 这是个普通标题这是个普通标题 u在元素标签中定义在元素标签中定义CSS样式和单独设置标签属样式和单独设置标签属性效果是一样的，因此性效果是一样的，因此在实际中使用不多。在实际中使用不多。592022-11-22(3)采用链接形式调用采用链接形式调用CSS文件文件u把把CSS样式单独保存成一个文件，其扩展名样式单独保存成一个文件，其扩展名为为.css，在需要设置样式的页面中以链接的方式，在需要设置样式的

53、页面中以链接的方式调用这个文件。调用这个文件。u采用链接形式调用外部采用链接形式调用外部CSS文件在文件在标签标签中使用中使用link语句：语句：12.2.7 层叠样式表单层叠样式表单602022-11-22例：定义样式文件，保存为例：定义样式文件，保存为“css_test.css”。HTML文件调用文件调用css_test。样式文件：样式文件：.c1 font-family:黑体黑体;font-style:italic;color:red h2 font-family:楷体楷体_GB2312;color:green 12.2.7 层叠样式表单层叠样式表单页面文件：页面文件：使用链接调用使用链

54、接调用CSS文件的例子文件的例子 这个标题使用了外部这个标题使用了外部CSS文件文件中定义的中定义的c1类样式类样式 这个标题使用了外部这个标题使用了外部CSS文件中定义的文件中定义的h2样式样式 612022-11-2212.2.7 层叠样式表单层叠样式表单622022-11-2212.3.1 Dreamweaver CS4的工作环境的工作环境12.3.2 创建和管理本地站点创建和管理本地站点12.3.3 添加页面内容添加页面内容12.3.4 在在Dreamveaver中使用中使用CSS12.3 Dreamweaver CS4的使用的使用632022-11-22Dreamweaver CS4

55、的工作界面如图所示：的工作界面如图所示：12.3.1 Dreamweaver CS4的工作环境的工作环境 642022-11-22(1)“文档文档”窗口窗口 设计网页的主要区域，在这个窗口内编辑网页设计网页的主要区域，在这个窗口内编辑网页元素，编辑的效果和浏览器中显示的效果近似。元素，编辑的效果和浏览器中显示的效果近似。(2)“文档文档”工具栏工具栏 对文档进行控制。网页制作时有对文档进行控制。网页制作时有3种文档视图方种文档视图方式：代码、拆分和设计。式：代码、拆分和设计。代码：代码：“文档文档”窗口只显示窗口只显示HTML代码。代码。拆分：拆分：“文档文档”窗口分为上下两部分，上面显示窗口

56、分为上下两部分，上面显示HTML代码，下面显示页面效果。代码，下面显示页面效果。设计：设计：“文档文档”窗口只显示页面效果，用户可进行窗口只显示页面效果，用户可进行可视化编辑。可视化编辑。12.3 Dreamweaver CS4的使用的使用 652022-11-22(3)“插入插入”面板面板 向页面中插入元素，通常在向页面中插入元素，通常在“设计设计”视图下使视图下使用。用。“插入插入”面板可以插入很多对象，对象分面板可以插入很多对象，对象分为为8个类别：常用、布局、表单、数据、个类别：常用、布局、表单、数据、Spry、InContext Editing、文本和收藏夹。、文本和收藏夹。(4)“

57、属性属性”面板面板 显示页面中被选中对象的属性。显示页面中被选中对象的属性。(5)“文件文件”面板面板 显示网站的所有文件和文件夹，可对文件或文显示网站的所有文件和文件夹，可对文件或文件夹进行新建、删除、重命名等操作。件夹进行新建、删除、重命名等操作。12.3 Dreamweaver CS4的使用的使用 662022-11-22u首先要创建一个站点，然后才能在站点下创建和首先要创建一个站点，然后才能在站点下创建和设计各个网页。设计各个网页。u通常情况，网站制作者都是在本机上先制作好网通常情况，网站制作者都是在本机上先制作好网站，然后上传到网络服务器上。站，然后上传到网络服务器上。本地站点：在本

58、机上创建的站点。本地站点：在本机上创建的站点。远程站点：上传到服务器上的站点。远程站点：上传到服务器上的站点。12.3.2 创建和管理本地站点创建和管理本地站点 672022-11-221.创建本地站点创建本地站点u单击菜单单击菜单“站点站点”“新建站点新建站点”，或单击菜单，或单击菜单“站点站点”“管理站点管理站点”，在，在“管理站点管理站点”对话对话框中单击框中单击“新建新建”按钮。按钮。u创建站点对话框有两个标签：基本和高级。创建站点对话框有两个标签：基本和高级。“基本基本”方式以向导形式进行创建。方式以向导形式进行创建。“高级高级”方式以目录形式进行创建。方式以目录形式进行创建。12.

59、3.2 创建和管理本地站点创建和管理本地站点 682022-11-22“基本基本”方式创建站点：方式创建站点：(1)给站点起个名字，站点的给站点起个名字，站点的HTTP地址一栏可不填。地址一栏可不填。(2)询问是否使用服务器技术。服务器技术指网站服询问是否使用服务器技术。服务器技术指网站服务器端组件的编程技术，一般有脚本语言务器端组件的编程技术，一般有脚本语言(如：如：JavaScript、VBScript)或动态服务器编程语言或动态服务器编程语言(如：如：ASP、JSP等等)。(3)选择文件的操作方式，一般选择选择文件的操作方式，一般选择“在本地编辑完在本地编辑完成后再上传到服务器成后再上传

60、到服务器”；之后，指明本地文件的；之后，指明本地文件的存放位置。存放位置。(4)选择连接到远程服务器的方式，可以先选择选择连接到远程服务器的方式，可以先选择“无无”，等制作完成后再上传到远程服务器。，等制作完成后再上传到远程服务器。(5)列出前面所填的站点信息列出前面所填的站点信息(可单击可单击“上一步上一步”返回返回修改修改)，单击，单击“完成完成”按钮，站点建立完毕。按钮，站点建立完毕。12.3.2 创建和管理本地站点创建和管理本地站点 692022-11-222.创建新文档创建新文档 站点创建完成后，在本机上会有一个存放网站文件站点创建完成后，在本机上会有一个存放网站文件的文件夹。同时在

61、的文件夹。同时在“文件文件”面板中可看到站点的文面板中可看到站点的文件。件。视图选择：视图选择：“本地视图本地视图”显示显示本地站点的网站文本地站点的网站文件目录结构。件目录结构。“远程视图远程视图”显示显示服务器上的目录结服务器上的目录结构。构。站点列表站点列表12.3.2 创建和管理本地站点创建和管理本地站点 702022-11-22u创建主页文件：主页文件一般放置在站点的根目创建主页文件：主页文件一般放置在站点的根目录，选择目录树最上面一行录，选择目录树最上面一行(即根目录即根目录)右键快捷右键快捷菜单中的菜单中的“新建文件新建文件”，主页一般都以，主页一般都以“index”或或“def

62、ault”命名，静态主页扩展名为命名，静态主页扩展名为.htm或或.html；动态主页扩展名一般为；动态主页扩展名一般为.asp或或.jsp。12.3.2 创建和管理本地站点创建和管理本地站点 712022-11-22制作网页的过程就是向创建的文档内添加网页元素制作网页的过程就是向创建的文档内添加网页元素的过程，并对它们进行编辑排版。的过程，并对它们进行编辑排版。12.3.3 添加页面内容添加页面内容 1.文字文字u在在“设计设计”模式和模式和“代码代码”模式下添加文字，在模式下添加文字，在相应位置输入即可。相应位置输入即可。u对文字格式化：选中文字，在对文字格式化：选中文字，在“属性属性”窗

63、口中修窗口中修改。改。导入文件内容：单击菜单导入文件内容：单击菜单“文件文件”“导入导入”，选择，选择要导入的文件即可将文件内容导入网页中。要导入的文件即可将文件内容导入网页中。722022-11-222.图像图像网站的图片一般存放在站点下专门的文件夹中。网站的图片一般存放在站点下专门的文件夹中。u单击菜单单击菜单“插入插入”“图像图像”，打开，打开“选择图像源选择图像源文件文件”对话框，找到图片，单击对话框，找到图片，单击“确定确定”即可。即可。u图片插入后可在图片插入后可在“属性属性”窗口设定图片属性。窗口设定图片属性。u单击菜单单击菜单“修改修改”“图像图像”，可对图片进行基本，可对图片

64、进行基本的编辑。在实际网页制作中，通常使用专业图像编的编辑。在实际网页制作中，通常使用专业图像编辑软件处理图片，如：辑软件处理图片，如：Photoshop、Fireworks等。等。u图像占位符：插入相同尺寸的临时代替图像符号。图像占位符：插入相同尺寸的临时代替图像符号。单击菜单单击菜单“插入插入”“图像对象图像对象”“图像占位符图像占位符”。12.3.3 添加页面内容添加页面内容 732022-11-223.表格表格 单击菜单单击菜单“插入插入”“表格表格”，在弹出的表格设，在弹出的表格设置对话框中，设置行列数、表格宽度、边框粗细、置对话框中，设置行列数、表格宽度、边框粗细、单元格边距、单元

65、格间距，选择表格样式，输入单元格边距、单元格间距，选择表格样式，输入整个表格的标题等。整个表格的标题等。12.3.3 添加页面内容添加页面内容 742022-11-224.超链接超链接(1)文字超链接文字超链接 选中文字，在选中文字，在“属性属性”窗口中写入链接的目的地址。窗口中写入链接的目的地址。方法一：单击文件夹图标打开对话框选择链接目的文件。方法一：单击文件夹图标打开对话框选择链接目的文件。方法二：鼠标直接按住方法二：鼠标直接按住“指向文件指向文件”图标，拖曳到图标，拖曳到“文文件件”面板中目的文件上放开。面板中目的文件上放开。12.3.3 添加页面内容添加页面内容 指向文件指向文件75

66、2022-11-22(2)图像超链接图像超链接u整幅图片超链接：和文字链接操作相同。整幅图片超链接：和文字链接操作相同。u图片热点超链接：选择图片中的一部分建立超链图片热点超链接：选择图片中的一部分建立超链接，使用图像接，使用图像“属性属性”窗口中下面部分的热点工窗口中下面部分的热点工具划定热点区域。具划定热点区域。12.3.3 添加页面内容添加页面内容 762022-11-22(3)锚记链接锚记链接u第 一 步：在 链 接 目 的 处，打 开 菜 单第 一 步：在 链 接 目 的 处，打 开 菜 单“插插入入”“命名锚记命名锚记”插入锚记并命名，如：插入锚记并命名，如：“m2”。u第二步：选中需要设置链接的文本，在第二步：选中需要设置链接的文本，在“属性属性”面板中面板中“链接链接”一栏输入一栏输入“#”和锚记名称，如：和锚记名称，如：“#m2”。12.3.3 添加页面内容添加页面内容 772022-11-22锚记链接举例：锚记链接举例：12.3.3 添加页面内容添加页面内容 782022-11-221.创建样式表创建样式表u启动启动Dreamweaver，打开某站点的，打开某站点的