第七章网页设计基础

1、 7.1 HTML超文本超文本标记语言标记语言简述简述 7.1.1超文本超文本标记语言标记语言（HTML） HTML（Hyper Text Markup Language）使）使 用一些约定的标记对网页上的各种信息进行标记。用一些约定的标记对网页上的各种信息进行标记。 当用户浏览网页上的信息时，浏览器会自动解释当用户浏览网页上的信息时，浏览器会自动解释 这些标记的含义，并按照一定的格式在屏幕上显这些标记的含义，并按照一定的格式在屏幕上显 示这些被标记的文件。示这些被标记的文件。HTML语言主要是用来制语言主要是用来制 作静态网页。作静态网页。 HTML文档可由任何文本编辑器或网页专用编文档可由

2、任何文本编辑器或网页专用编 辑器编辑，例如辑器编辑，例如Windows自带的记事本、写字板自带的记事本、写字板 等，保存时文件的扩展名用等，保存时文件的扩展名用“htm”。 7.1.1 超文本超文本标记语言标记语言（HTML） HTML文件是用文件是用ASCII写成的，它包括两个部分：写成的，它包括两个部分： (1)文件的内容；文件的内容； (2)对文件的格式、特性进行描述的对文件的格式、特性进行描述的HTML标记。标记。 大大多数的多数的HTML标记的书写格式如下：标记的书写格式如下： 文件内容文件内容 举例说明举例说明 昆明学院欢迎您昆明学院欢迎您 昆明学院欢迎您昆明学院欢迎您 table

3、 width=300 border=1 昆明学院欢迎您昆明学院欢迎您 昆明学院欢迎您昆明学院欢迎您 7.1.1 超文本超文本标记语言标记语言（HTML） HTML标记是用尖括号括起来的，有的标记后还有属标记是用尖括号括起来的，有的标记后还有属 性，属性对标记符作用的内容进行更详细的控制。带属性性，属性对标记符作用的内容进行更详细的控制。带属性 的标记的格式如下：的标记的格式如下： 各属性间没前后顺序，属性也可省略。若省略属性，各属性间没前后顺序，属性也可省略。若省略属性， 则取标记的默认值。标记的属性只能放在起始标记中。则取标记的默认值。标记的属性只能放在起始标记中。 例例: width和和b

4、order都是表格标记的属性，它对表格的的宽度都是表格标记的属性，它对表格的的宽度 和表格的边框进行说明。和表格的边框进行说明。 face 、color、size等就是文本标记等就是文本标记font的字体、字体颜色、的字体、字体颜色、 大小进行说明。大小进行说明。 7.1.2 HTML文档结构文档结构 HTML文件基本结构文件基本结构 . 文件主体内容文件主体内容 HTMLHTML的标记码是由成对的标记组成，书写格式为：的标记码是由成对的标记组成，书写格式为： 内容内容/ 标记标记与与等是每个等是每个HTMLHTML文档必须包含的文档必须包含的 1标题等级标题等级 标题语法格式为：标题语法格式

5、为： n：表示不同级别的标题，：表示不同级别的标题，n值可以是值可以是1-6中的任意数字，中的任意数字， 其中其中1表示的标题字体最大。可以用表示的标题字体最大。可以用align属性设置对属性设置对 齐方式。齐方式。 7.1.2 HTML文档常用的标记文档常用的标记 例例7.2 标题示例标题示例 标题显示等级标记标题显示等级标记 一级标题一级标题 二级标题二级标题 三级标题三级标题 7.1.2 HTML文档常用的标记文档常用的标记 2插入图像插入图像 在在HTML文档中可以插入图像，以体现网站的风格和特文档中可以插入图像，以体现网站的风格和特 点。能被点。能被Web浏览器直接解释的图像文件主要

6、有浏览器直接解释的图像文件主要有GIF 格式、格式、JPEG格式和格式和PNG格式。格式。 插入图像的标记语法格式为：插入图像的标记语法格式为： url：指明要添加的图像所在的路径和文件名。路径可：指明要添加的图像所在的路径和文件名。路径可 以是相对路径，也可以是绝对路径。以是相对路径，也可以是绝对路径。 7.1.2 HTML文档常用的标记文档常用的标记 例例7.3 在网页插入图像在网页插入图像 上海世博会吉祥物上海世博会吉祥物 7.1.2 HTML文档常用的标记文档常用的标记 3.建立超链接建立超链接 超链接提供用户链接到其他网页的功能超链接提供用户链接到其他网页的功能：从当前网页跳从当前网

7、页跳 转到另外的网页上去。转到另外的网页上去。 超链接的语法格式为：超链接的语法格式为： 超链接标识超链接标识 url：指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的对象，可以是文字或图像超链接标识：是网页中链接的对象，可以是文字或图像 等页面元素，用户点击它就会跳到超链接的目标位置。等页面元素，用户点击它就会跳到超链接的目标位置。 7.1.2 HTML文档常用的标记文档常用的标记 例例7.4 超链接示例超链接示例 昆明学院主页昆明学院主页 7.1.2 HTML文档常用的标记文档常用的标记 4. 表格表格 在在HTML中创建一个普通的表格包括以下

8、标记符：中创建一个普通的表格包括以下标记符： ：定义整个表格，表格内的所有内容：定义整个表格，表格内的所有内容 都应该位于都应该位于和和之间。之间。 :定义表格标题。定义表格标题。Align属性控属性控 制表格标题显示的位置。制表格标题显示的位置。 ：定义表格中的行。：定义表格中的行。 ：定义单元格，：定义单元格，标记要放在标记要放在标记内标记内 部。部。 7.1.2 HTML文档常用的标记文档常用的标记 例例7.5 网页中插入表格示例网页中插入表格示例 职员情况表职员情况表 姓名姓名性别性别年龄年龄 陈小东陈小东男男25 王文王文女女20 7.1.2 HTML文档常用的标记文档常用的标记 7

9、.2 Dreamweaver CS5 基本功能和工作界面基本功能和工作界面 7.2.1 Dreamweaver CS5的基本功能的基本功能 Dreamweaver CS5可用于对可用于对Web站点的建立、管理，站点的建立、管理， 对对Web页和页和Web应用程序进行设计、编码和开发，同应用程序进行设计、编码和开发，同 时还具有图形的编辑、时还具有图形的编辑、CSS样式表、表格的嵌入、样式表、表格的嵌入、 FTP上传等功能。它将可视化布局工具、应用程序开上传等功能。它将可视化布局工具、应用程序开 发功能和代码编辑支持组合，成为一款功能强大的工发功能和代码编辑支持组合，成为一款功能强大的工 具系统

10、，使每个级别的开发人员和设计人员都可利用具系统，使每个级别的开发人员和设计人员都可利用 它快速地创建网页界面。它快速地创建网页界面。 7.2.2 DreamweaverCS5的工作界面的工作界面 插入工具栏插入工具栏 文档工具栏文档工具栏 文档窗口文档窗口 标签选择标签选择 属性面板属性面板 面板群组面板群组 面板群组面板群组 1插入插入工具栏工具栏 插入工具栏包含多种常用的工具，用于在网页中建插入工具栏包含多种常用的工具，用于在网页中建 立相应的对象（如表格、表单等）。当选择某一工立相应的对象（如表格、表单等）。当选择某一工 具在网页中创建一个对象后，在网页文档中将会插具在网页中创建一个对象

11、后，在网页文档中将会插 入一段入一段HTML代码，并允许用户对该对象设置相应代码，并允许用户对该对象设置相应 的属性。的属性。 7.2.1 Dreamweaver CS5的基本功能的基本功能 2文档文档窗口窗口 文档窗口是文档窗口是Dreamweaver创建、编辑、显示网页的区域。创建、编辑、显示网页的区域。 主要的视图有以下几种：主要的视图有以下几种： “设计设计”视图视图：显示网页编辑界面，查看网页的设计效果。：显示网页编辑界面，查看网页的设计效果。 “代码代码”视图视图：显示网页文档的源代码。：显示网页文档的源代码。 “拆分拆分”视图视图：同时显示当前网页文档的设计效果和源代码。：同时显

12、示当前网页文档的设计效果和源代码。 “实时视图实时视图”：可在不离开：可在不离开Dreamweaver工作区的情况下，工作区的情况下， 实时查看页面的外观，预览网页效果。在该视图下不可以编辑实时查看页面的外观，预览网页效果。在该视图下不可以编辑 设计效果。设计效果。 “实时代码实时代码” 视图视图：显示浏览器用于执行该页面的实际代码，：显示浏览器用于执行该页面的实际代码， 仅在实时视图中查看文档时可用。当用户在实时视图中与该页仅在实时视图中查看文档时可用。当用户在实时视图中与该页 面进行交互时，它可以动态变化。实时代码视图不可编辑。面进行交互时，它可以动态变化。实时代码视图不可编辑。 7.2.

13、1 Dreamweaver CS5的基本功的基本功 能能 3.文档文档工具栏工具栏 文档工具栏包含了在多种视图之间快速切换的按文档工具栏包含了在多种视图之间快速切换的按 钮以及一些查看文档、在本地和远程站点间传输文档钮以及一些查看文档、在本地和远程站点间传输文档 有关的常用命令和选项。有关的常用命令和选项。 7.2.1 Dreamweaver CS5的基本功能的基本功能 4状态栏和标签选择状态栏和标签选择器器 位位于文档窗口下方的状态栏中，标签选择器显于文档窗口下方的状态栏中，标签选择器显 示示“设计设计”视图中标注的目前选取范围的标签层级。视图中标注的目前选取范围的标签层级。 单击层级中的任

14、何标签就可以选择该标签及其所有内单击层级中的任何标签就可以选择该标签及其所有内 容。状态栏显示工作区大小、下载时间、选取工具、容。状态栏显示工作区大小、下载时间、选取工具、 手形工具等。手形工具等。 7.2.1 Dreamweaver CS5的基本功能的基本功能 5属性面板属性面板 属属性面板用于查看和更改在文档窗口选取的对象性面板用于查看和更改在文档窗口选取的对象 或文字的各种属性或文字的各种属性。网。网页设计中的对象都有各自的属页设计中的对象都有各自的属 性，因此在属性面板中会依所选取的对象不同显示不性，因此在属性面板中会依所选取的对象不同显示不 同的设置内容。同的设置内容。 7.2.1

15、Dreamweaver CS5的基本功能的基本功能 6面板群组面板群组 面板群组面板群组是是Dreamweaver整理面板的方法，它整理面板的方法，它 将功能相关的面板设置为群组，放在某个面板群组下。将功能相关的面板设置为群组，放在某个面板群组下。 单击群组名左边的箭头可以展开或收起面板。按单击群组名左边的箭头可以展开或收起面板。按F4可可 以隐藏和显示面板群组。以隐藏和显示面板群组。 7.2.1 Dreamweaver CS5的基本功能的基本功能 7 7工作区选择菜单工作区选择菜单 Dreamweaver CS5提供提供8种预建的工作区以满足不同种预建的工作区以满足不同 使用人员的需求。使用

16、工作区选择菜单进行选择。使用人员的需求。使用工作区选择菜单进行选择。 7.2.1 Dreamweaver CS5的基本功能的基本功能 7.3 Dreamweaver CS5基本基本操作操作 7.3.1 站站点点管理管理 为为一个主题设计的网站将会包含多个页面文件、图片等信一个主题设计的网站将会包含多个页面文件、图片等信 息，这就需要将它们关联起来，这样的集合叫做息，这就需要将它们关联起来，这样的集合叫做站点站点。 本地本地站点站点：放置放置在本地磁盘上的在本地磁盘上的站点站点。 远程远程站点站点：处于处于Internet上的上的Web服务器里的服务器里的网站。网站。 Dreamweaver提供

17、了对本地站点和远程站点的管理功能提供了对本地站点和远程站点的管理功能。 实例演示：实例演示： 1. 创建本地站点创建本地站点 2. 构构建站点结构建站点结构 3. 管管理本地理本地站点站点 7.3.1 站站点点管理管理 1. 创建本地站创建本地站点点 选择菜单选择菜单“站点站点”“新建站点新建站点”命令，打开命令，打开“设置站设置站 点对象点对象”对话框，在对话框中输入站点名称，并设置对话框，在对话框中输入站点名称，并设置 好本地站点文件夹。好本地站点文件夹。 演示演示 7.3.1 站站点点管理管理 2. 构建站点结构构建站点结构 在站点添加主页，主页的默认文件名是在站点添加主页，主页的默认文

18、件名是index.htm或或 default.htm。 操作步骤：操作步骤： 单击单击“面板群组面板群组”中的中的“文件文件”面板标签展开文件面面板标签展开文件面 板，在站点根目录中右击鼠标，选择板，在站点根目录中右击鼠标，选择“新建文件新建文件”，文，文 件名为件名为index.htm。 右击鼠标，选右击鼠标，选“新建文件夹新建文件夹”建立网站结构的子目录。建立网站结构的子目录。 演示演示 7.3.1 站站点点管理管理 3. 管管理本地理本地站点站点 打开打开“文件文件”面板，在文件标签页下方的下拉菜单面板，在文件标签页下方的下拉菜单 中选择中选择“管理站点管理站点”命令，打开命令，打开“管

19、理站点管理站点”对话框，对话框， 在其中选择不同站点进行编辑。在其中选择不同站点进行编辑。 演示演示 1. 网页的建立、保存、关闭及预览网页的建立、保存、关闭及预览 (1) 新新建网页文档建网页文档 启动启动Dreamweaver CS5后在欢迎页面中选择后在欢迎页面中选择“创建新创建新 项目项目”“HTML”，会新建一个名为，会新建一个名为Untitled-1空空 白文档。还可以通过以下的操作实现：白文档。还可以通过以下的操作实现： 选择菜单栏选择菜单栏“文件文件”“新建新建”命令或单击标准工具栏命令或单击标准工具栏 上的新建按钮上的新建按钮 ，打开，打开“新建文档新建文档”对话框；对话框；

20、 选择选择“空白页空白页” “HTML” “无无”，单击，单击“创建创建”按按 钮，即可新建一个空白的文档。钮，即可新建一个空白的文档。 7.3.2 网页文件网页文件的基本操作的基本操作 (2) 网网页保存和关页保存和关闭闭 单击菜单栏单击菜单栏“文件文件”“保存保存”命令或单击标准工具栏上命令或单击标准工具栏上 的保存按钮的保存按钮 即可保存网页。即可保存网页。 选择菜单栏选择菜单栏“文件文件”“关闭关闭”或单击文档的窗口右上或单击文档的窗口右上 角的关闭按钮关闭网页。角的关闭按钮关闭网页。 1. 网页的建立、保存、关闭及预览网页的建立、保存、关闭及预览 7.3.2 网页文件网页文件的基本操

21、作的基本操作 (3) 打打开网开网页页 在在“文件文件”面板中双击要打开的文件或者单击菜单栏面板中双击要打开的文件或者单击菜单栏“文文 件件”“打开打开”命令或者单击标准工具栏上的打开按钮命令或者单击标准工具栏上的打开按钮 ， 在在“打开打开”对话框中选择网页所在的文件夹和要打开对话框中选择网页所在的文件夹和要打开 的文件。的文件。 1. 网页的建立、保存、关闭及预览网页的建立、保存、关闭及预览 7.3.2 网页文件网页文件的基本操作的基本操作 (4) 预预览网览网页页 编辑好的网页可以用多种方法进行预览，查看网页的编辑好的网页可以用多种方法进行预览，查看网页的 版式及链接的完好性，从而对网页

22、进行修改。版式及链接的完好性，从而对网页进行修改。 方法一：单击文档工具栏上的方法一：单击文档工具栏上的“在浏览器中预览在浏览器中预览”图图 标，选择一种浏览器进行预览。标，选择一种浏览器进行预览。 方法二：单击菜单栏方法二：单击菜单栏“文件文件”“在浏览器中预览在浏览器中预览”或者或者 用快捷键用快捷键F12进行预览进行预览 方法三：在设计视图下，单击文档工具栏上的方法三：在设计视图下，单击文档工具栏上的“实时实时 视图视图” 进行预览。进行预览。 1. 网页的建立、保存、关闭及预览网页的建立、保存、关闭及预览 7.3.2 网页文件网页文件的基本操作的基本操作 （1）插入普通文本）插入普通文

23、本 向网页中添加文本有以下三种方法：向网页中添加文本有以下三种方法： 在设计视图中，将光标定位在要插入文本的位置处，在设计视图中，将光标定位在要插入文本的位置处， 选择合适的输入法，输入文本即可。若要输入多个空选择合适的输入法，输入文本即可。若要输入多个空 格，可切换到中文全角状态下输入。格，可切换到中文全角状态下输入。 使用菜单栏使用菜单栏“编辑编辑”“选择性粘贴选择性粘贴”命令将其他的应用命令将其他的应用 程序文本复制到要插入文本的位置。程序文本复制到要插入文本的位置。 使用菜单栏中使用菜单栏中“文件文件”“导入导入”命令，将其他文档文本命令，将其他文档文本 导入到网页光标定位的位置。导入

24、到网页光标定位的位置。 2. 在网页中插入文本在网页中插入文本 7.3.2 网页文件网页文件的基本操作的基本操作 （2）插入特殊字符）插入特殊字符 将光标定位在要插入字符的位置；将光标定位在要插入字符的位置； 在在“插入插入”工具栏的工具栏的“文本文本”类别中，选择要插入的符号。类别中，选择要插入的符号。 如果没有找到要插入的字符，还可以单击最后的如果没有找到要插入的字符，还可以单击最后的“其其 他字符他字符”选项，打开选项，打开“插入其他字符插入其他字符”对话框，选择字符，对话框，选择字符， 并单击并单击“确定确定”将选定的字符插入到网页中。将选定的字符插入到网页中。 2. 在网页中插入文本

25、在网页中插入文本 7.3.2 网页文件网页文件的基本操作的基本操作 （1）格式化文本）格式化文本 选择需格式化的文本，然后使用菜单栏选择需格式化的文本，然后使用菜单栏“格式格式”中相中相 应命令对文本进行格式化，应命令对文本进行格式化，或者或者通过属性面板进行设通过属性面板进行设 置。置。 3.格式化文本和段落格式化文本和段落 7.3.2 网页文件网页文件的基本操作的基本操作 （2）格式化段落）格式化段落 Dreamweaver中预先定义了各种标准的标题和段落格式，中预先定义了各种标准的标题和段落格式， 可以在属性检查器中单击可以在属性检查器中单击“格式格式”下拉列表框命令。下拉列表框命令。

26、段落的对齐可在段落的对齐可在“属性属性”面板面板 中单击相关按钮进行设置。中单击相关按钮进行设置。 段落缩进在段落缩进在“属性属性”面板面板 中单击相关按钮进行设置。中单击相关按钮进行设置。 3.格式化文本和段落格式化文本和段落 7.3.2 网页文件网页文件的基本操作的基本操作 （1）创建文字、图片、电子邮件超链接）创建文字、图片、电子邮件超链接 选择要超链接的对象，在选择要超链接的对象，在“属性属性”面板的面板的“链接链接”栏中直栏中直 接输入或浏览选择链接的目标。接输入或浏览选择链接的目标。 4.创建超链接创建超链接 电子邮件的超链接电子邮件的超链接：mailto:+电子邮件地址电子邮件地

27、址 7.3.2 网页文件网页文件的基本操作的基本操作 7.4 页面设计页面设计 7.4.1利用表格设计网页版面利用表格设计网页版面 1插入表格插入表格 选择文档窗口的设计视图，将光标定位到要插入表选择文档窗口的设计视图，将光标定位到要插入表 格的位置；格的位置； 单击菜单栏中的单击菜单栏中的“插入插入”“表格表格”命令或者在命令或者在“插入插入”工工 具栏的具栏的“常用常用”类别中，单击类别中，单击“表格表格”按钮按钮 ，将打开表格，将打开表格 对话框；对话框； 在对话框中设置相应的参数，完成后单击确定按钮在对话框中设置相应的参数，完成后单击确定按钮 完成表格的创建。完成表格的创建。 7.4.

28、1利用表格设计网页版面利用表格设计网页版面 将插入点定位在表格单元格内，即可输入文本、图将插入点定位在表格单元格内，即可输入文本、图 像、动画等网页元素。像、动画等网页元素。 2在表格单元格中添加内容在表格单元格中添加内容 7.4.1利用表格设计网页版面利用表格设计网页版面 （1）选择整个表格）选择整个表格 （2）选择行或列）选择行或列 （3）选择单元格）选择单元格 （4）合并单元格）合并单元格 （5）拆分单元格）拆分单元格 （6）插入行或列）插入行或列 （7）删除行或列）删除行或列 （8）设置表格和单元格属性）设置表格和单元格属性 （9）调整表格的大小）调整表格的大小 3表格的基本操作表格的

29、基本操作 7.4.2 利用利用AP Div布局页面布局页面 AP Div 在在DreamweaverCS5中称为中称为AP元素或元素或CSS P元素，简称为元素，简称为AP层。层。AP层可以作为网页布局的容层可以作为网页布局的容 器。器。 AP层内可以包含文本、图形、图像、动画、音频、层内可以包含文本、图形、图像、动画、音频、 视频、表格等一切可以放置到视频、表格等一切可以放置到HTML中的元素，还可以中的元素，还可以 在在AP层内放置层内放置AP层。层。 7.4.2 利用利用AP Div布局页面布局页面 AP Div的创建可以通过菜单栏中的的创建可以通过菜单栏中的“插入插入”命命 令实现，也

30、可以通过令实现，也可以通过“插入插入”工具栏的工具栏的“布局布局”类别类别 工具来实现。工具来实现。 1. 创建创建AP Div 7.4.2 利用利用AP Div布局页面布局页面 （1）插入默认大小的）插入默认大小的AP Div 方法：方法：选择菜单栏中的选择菜单栏中的“插入插入” “布局对象布局对象” “AP Div”命令。命令。 方法：方法：将将“插入插入”工具栏的工具栏的“布局布局”类别工具的类别工具的 按钮拖动到文档窗口。按钮拖动到文档窗口。 1. 创建创建AP Div 通过通过AP Div属性面板进行编辑。属性面板进行编辑。 7.4.2 利用利用AP Div布局页面布局页面 通过通过

31、AP Div属性面板编辑属性面板编辑AP层。层。 CSS-P元素：设置元素：设置AP Div的的ID名称。名称。 左、上：设置左、上：设置AP Div的左边框和上边框距文档窗口左边界和上边界的距的左边框和上边框距文档窗口左边界和上边界的距 离。离。 宽、高：设置宽、高：设置AP Div的宽度和高度。的宽度和高度。 Z轴：设置在垂直平面的方向上轴：设置在垂直平面的方向上AP Div的顺序号。的顺序号。 可见性：设置可见性：设置AP Div的可见性。的可见性。 背景图像：设置背景图像：设置AP Div的背景图像。的背景图像。 背景颜色：设置背景颜色：设置AP Div的背景颜色。的背景颜色。 类：添

32、加对所选类：添加对所选CSS样式的引用。样式的引用。 溢出：设置溢出：设置AP Div内容超过内容超过AP Div大小时的显示方式。大小时的显示方式。 剪辑：设置剪辑：设置AP Div的哪一部分是可见的。的哪一部分是可见的。 7.4.2 利用利用AP Div布局页面布局页面 （2）绘制自定义大小的）绘制自定义大小的AP Div 单击单击“插入插入”工具栏的工具栏的“布局布局”类别工具的类别工具的 按钮，然后将鼠标移到文档窗口，当指针为为按钮，然后将鼠标移到文档窗口，当指针为为“+” 形状时，按住鼠标左键并拖动到适合位置释放鼠标形状时，按住鼠标左键并拖动到适合位置释放鼠标 左键，将绘制一个自定义

33、大小的左键，将绘制一个自定义大小的AP Div。 单击单击 按钮后，按住按钮后，按住不放，连续进行绘制，不放，连续进行绘制， 可绘制多个可绘制多个AP Div。 1. 创建创建AP Div 7.4.2 利用利用AP Div布局页面布局页面 （1）选择）选择AP Div （2）缩放）缩放AP Div （3）移动）移动AP Div （4）对齐）对齐AP Div 2. 编辑编辑AP Div 7.4.3 利用框架设计网页版面利用框架设计网页版面 框框架结构就是把浏览器窗口划分为多个区域，每架结构就是把浏览器窗口划分为多个区域，每 个区域都可以分别显示不同的网页。框架主要用于导个区域都可以分别显示不同的

34、网页。框架主要用于导 航，这样，浏览器不需要为每个页面重新加载与导航航，这样，浏览器不需要为每个页面重新加载与导航 相关的对象，可以实现一个浏览器窗口显示多个网页相关的对象，可以实现一个浏览器窗口显示多个网页 的目的。的目的。 框框架网页上定义的每一个区域称为一个框架，每架网页上定义的每一个区域称为一个框架，每 一个框架是一个独立的一个框架是一个独立的HTML页面，用于显示一个网页面，用于显示一个网 页文件。多个框架就构成了一个框架集。在使用框架页文件。多个框架就构成了一个框架集。在使用框架 设计网页时，含有设计网页时，含有n个框架的结构将产生个框架的结构将产生n+1个网页文个网页文 件。件。

35、 7.4.3 利用框架设计网页版面利用框架设计网页版面 1框架的建立框架的建立 将将光标定位在要插入框架集的窗口中，单击菜单光标定位在要插入框架集的窗口中，单击菜单 栏栏“插入插入”/“HTML”/“框架框架”命令，在子菜单中单击相应命令，在子菜单中单击相应 的框样式。或者的框样式。或者“插入插入”栏的栏的“布局布局”类别中，单击框架类别中，单击框架 按钮按钮 右侧的下拉按钮，在下拉菜单中选择相应的框架右侧的下拉按钮，在下拉菜单中选择相应的框架 集图标。集图标。 7.4.3 利用框架设计网页版面利用框架设计网页版面 2框架面板框架面板 建立完框架后，在框架面板可以直接选中框架或框架建立完框架后

36、，在框架面板可以直接选中框架或框架 集并对其进行编辑。集并对其进行编辑。 单击菜单栏中单击菜单栏中“窗口窗口”/“框架框架”命令，打开框架面板。命令，打开框架面板。 在在“框架框架”面板中单击最外层的边框，使其出现粗黑边面板中单击最外层的边框，使其出现粗黑边 显示，则选中了框架集。显示，则选中了框架集。 在在“框架框架”面板中单击要选择的框架页，使其出现细黑面板中单击要选择的框架页，使其出现细黑 边显示，则选中了框架。边显示，则选中了框架。 7.4.3 利用框架设计网页版面利用框架设计网页版面 3设置框架集及框架的属性设置框架集及框架的属性 选中框架集，打开框集属性面板，在其中进行设置。选中框

37、架集，打开框集属性面板，在其中进行设置。 选择框架，打开框架属性，在其中进行设置。选择框架，打开框架属性，在其中进行设置。 7.4.3 利用框架设计网页版面利用框架设计网页版面 4.保存框架和框架集保存框架和框架集 框架也是网页，建立框架后，可以像在普通网页一样，在框架也是网页，建立框架后，可以像在普通网页一样，在 框架中添加文本、图像、背景图像和动画等各种网页元素框架中添加文本、图像、背景图像和动画等各种网页元素 以及各种编辑操作。框架网页制作完毕，在预览和关闭前以及各种编辑操作。框架网页制作完毕，在预览和关闭前 要对框架集和所有的框架文件进行保存。要对框架集和所有的框架文件进行保存。 （1

38、）保存框架集）保存框架集 在框架面板中，选择中要保存的框架集，单击菜单栏在框架面板中，选择中要保存的框架集，单击菜单栏 中中“文件文件”/“保存框架页保存框架页”命令。命令。 （2）保存框架）保存框架 定位光标在要保存的框架内，或在框架面板中选择要定位光标在要保存的框架内，或在框架面板中选择要 保存的框架，单击菜单栏中保存的框架，单击菜单栏中“文件文件”/“保存框架保存框架”命令。命令。 7.4.3 利用框架设计网页版面利用框架设计网页版面 5.设置嵌套框架属性设置嵌套框架属性 在框架中设置超链接打开另一个框架中的文档，必须在框架中设置超链接打开另一个框架中的文档，必须 设置链接的目标窗口。设

39、置链接的目标窗口。 在在框架中设置超链接的操作为：框架中设置超链接的操作为： 选择超链接的文字，如选择超链接的文字，如“首页首页”； 在在“属性属性”面板面板“链接链接”项中设置超链接文件。如：项中设置超链接文件。如： index.htm； 在在“属性属性”面板面板“目标目标”下拉菜单中选择目标框架或窗下拉菜单中选择目标框架或窗 口。如选择口。如选择“mFrame” (mFrame是下方右面的框架名是下方右面的框架名 称，该名称可在框架的属性面板中设置称，该名称可在框架的属性面板中设置) 7.5 CSS样式样式表表 层叠样式表层叠样式表CSS（Cascading Style Sheet）是一）

40、是一 种格式化网页的标准方式，利用种格式化网页的标准方式，利用CSS技术，可以对页技术，可以对页 面中的文本、段落、图像、页面背景、表单元素外观面中的文本、段落、图像、页面背景、表单元素外观 等实现更加精确的控制。等实现更加精确的控制。 1. 创建创建样式样式表表 在在“CSS样式样式”面板中创建样式。面板中创建样式。 操作步骤：操作步骤： (1) 选中菜单选中菜单“窗口窗口”“CSS样式样式”，打开，打开CSS样式面板样式面板。 1. 创建创建样式样式表表 (2) 单击单击“CSS样式样式”面板右下角的面板右下角的“新建新建CSS规规 则则”按钮按钮 ，打开，打开“新建新建CSS规则规则”对

41、话框对话框。 1. 创建创建样式样式表表 (3) 在在“选择器类型选择器类型” 下拉列表框中选择一种类下拉列表框中选择一种类 型。型。 选择器类型选择器类型 类类(可应用于任何可应用于任何HTML元素元素)：创建自定义名称：创建自定义名称 的的CSS标记，能够应用在网页中的任何标记，能够应用在网页中的任何HTML标签上。标签上。 例例：在样式表中加入名为在样式表中加入名为“.mystyle”的类样式的类样式代码代码： .mystylee font-family:”宋体宋体”; font-size: 14px; color: #F00; 在网页文档中使用在网页文档中使用class属性引用属性引用

42、“.mystyle”类：类： 选择器类型选择器类型 ID(仅应用于一个仅应用于一个HTML元素元素)：为网页中特定的：为网页中特定的 HTML标签定义样式，通过标签的标签定义样式，通过标签的ID编号来实现。编号来实现。 例例：定义：定义CSS样式样式： #mystyle font-family:”宋体宋体”; font-size: 14px; color: #F00; 在网页文档中在网页文档中通过通过ID属性应用到属性应用到HTML中：中： 选择器类型选择器类型 标签标签(重新定义重新定义HTML元素元素)：对：对HTML标签进行标签进行 重新定义、规范或者扩展其属性。重新定义、规范或者扩展其

43、属性。 例例：对默认对默认的的标题标题2的样式标签的样式标签h2标签进行修改标签进行修改的代码：的代码： h2 font-family:”宋体宋体”; font-size: 14px; color: #F00; 在网页在网页中中所有用所有用“h2”标签进行格式化的文本都将标签进行格式化的文本都将 被立即更新。被立即更新。 选择器类型选择器类型 复合内容复合内容(基于选择的内容基于选择的内容)：为特定的组合标记：为特定的组合标记 或包含特定或包含特定ID属性的所有标记定义格式属性的所有标记定义格式。 例：一次性定义相同属性的多个CSS样式： #mytable tr td hr color: #F

44、00; 一般用得最多的是链接的定义，主要包括一般用得最多的是链接的定义，主要包括a:link（设（设 定正常状态下链接文字的样式）、定正常状态下链接文字的样式）、a:active（设定鼠标单（设定鼠标单 击时链接的外观）、击时链接的外观）、a:visited（设定访问过的链接的外（设定访问过的链接的外 观）和观）和a:hover（设定鼠标放置在链接文字之上时，文字（设定鼠标放置在链接文字之上时，文字 的外观）四种。的外观）四种。 1. 创建创建样式样式表表 (4) 为新建的为新建的CSS样式输入或选择名称。样式输入或选择名称。 “类类”样式的名称以点（样式的名称以点（.）开头）开头;“ID”样

45、式名称以样式名称以 “#”开头开头;“标签样式标签样式”名称直接在文本框中选名称直接在文本框中选 择择;“复合内容复合内容”样式名称在选择内容后将自动出现在样式名称在选择内容后将自动出现在 文本框中，也可以手动输入。文本框中，也可以手动输入。 1. 创建创建样式样式表表 (5) 在在“规则定义规则定义”下拉列表中选择所定义规则下拉列表中选择所定义规则 的位置。的位置。 定义规则的位置可以是定义规则的位置可以是“仅限该文档仅限该文档”或或“新建新建 样式表文件样式表文件”。如果选择。如果选择“仅对该文档仅对该文档”选项，表示选项，表示 样式将直接定义在当前文档中；如果选择样式将直接定义在当前文档

46、中；如果选择“新建样式新建样式 表文件表文件”选项，则可以从列表中选择一个文件或输入选项，则可以从列表中选择一个文件或输入 文件名。文件名。 1. 创建创建样式样式表表 (6) 单击单击“确定确定”按钮。按钮。 如果选择了如果选择了“仅限该文档仅限该文档”，则单击，则单击“确定确定”后，后， 直接弹出直接弹出“CSS规则定义规则定义”对话框。对话框。 如果选择了如果选择了“新建样式表文件新建样式表文件”选项，则会弹出选项，则会弹出 “保存样式表文件为保存样式表文件为”对话框，在该对话框中保存文对话框，在该对话框中保存文 件（件（*.css）后，才会弹出）后，才会弹出“CSS规则定义规则定义”对

47、话框。对话框。 1. 创建创建样式样式表表 （7）在）在“CSS规则定义规则定义”对话框中设置对话框中设置CSS 样式的属样式的属 性（规则），定义完毕后，单击性（规则），定义完毕后，单击“确定确定”按钮。按钮。 2、编辑样式表、编辑样式表 (1)修改修改样式样式 选中需要选中需要修改修改的样式类型，在的样式类型，在CSS样式面板中单样式面板中单 击击“编辑样式编辑样式”按钮按钮 ，在弹出的，在弹出的“CSS规则定义规则定义”对对 话框中修改相应的设置。话框中修改相应的设置。 (2)删除删除样式样式 在在CSS面板选择欲删除的样式，单击面板选择欲删除的样式，单击“删除样式删除样式” 按钮按钮

48、。 样式删除后，所有网页中应用了该样式的对象会样式删除后，所有网页中应用了该样式的对象会 自动取消对该样式的应用，恢复网页的缺省设置。自动取消对该样式的应用，恢复网页的缺省设置。 3. 应应用用CSS样式样式 建建立立CSS规则样式后，就可以利用该样式快速设规则样式后，就可以利用该样式快速设 置页面上的网页元素样式，使网站具有统一的风格置页面上的网页元素样式，使网站具有统一的风格。 类样式的应用需要进行手动设置。类样式的应用需要进行手动设置。 方法：方法：在网页文档中选择要应用样式的对象，在网页文档中选择要应用样式的对象， 在在CSS样式面板中右击要应用的样式面板中右击要应用的CSS选项，在弹

49、出的选项，在弹出的 快捷菜单中选择快捷菜单中选择“套用套用”命令或在其属性检查器面板命令或在其属性检查器面板 中的中的“样式样式”下拉列表框中选择要应用的样式。下拉列表框中选择要应用的样式。 方法：方法：用鼠标右键单击已选定的对象，在弹出用鼠标右键单击已选定的对象，在弹出 的快捷菜单中选择的快捷菜单中选择“CSS样式样式”，在其子菜单中选择，在其子菜单中选择 需要应用的自定义样式。需要应用的自定义样式。 3. 应应用用CSS样式样式 如果要取消样式的应用，选中对象后，用鼠标右如果要取消样式的应用，选中对象后，用鼠标右 键单击已选定的对象，在弹出的快捷菜单中选择键单击已选定的对象，在弹出的快捷菜

50、单中选择 “CSS样式样式”，在其子菜单中选择，在其子菜单中选择“无无”；也可以选；也可以选 中对象后，使用属性检查器面板，单击中对象后，使用属性检查器面板，单击 按钮，在按钮，在“类类” 下拉列表框中选择下拉列表框中选择“无无”。 4.附加附加CSS样式样式表表 可以将外部可以将外部CSS文件链接到页面中，以实现将文件链接到页面中，以实现将 一个样式表应用于整个站点中的多个页面，当对外一个样式表应用于整个站点中的多个页面，当对外 部部CSS文件修改后，所有应用这个样式文件的网页文件修改后，所有应用这个样式文件的网页 也相应自动更新，从而减少了网站维护的工作量。也相应自动更新，从而减少了网站维

51、护的工作量。 在网站中如果要使用外部样式表文件，必须通在网站中如果要使用外部样式表文件，必须通 过过“附加样式表附加样式表”命令将样式表文件链接或者导入命令将样式表文件链接或者导入 到文档中。到文档中。 附加样式表有两种方式：链接和导入。附加样式表有两种方式：链接和导入。 4.附加附加CSS样式样式表表 附加附加CSS样式表文样式表文件件操作：操作： 在在CSS样式面板中单击样式面板中单击“附加样式表附加样式表”按按钮钮 ， 打开打开“链接外部样式表链接外部样式表”对话对话框。框。 4.附加附加CSS样式样式表表 单击单击“浏览浏览”按钮，在打开的按钮，在打开的“选择样式表文件选择样式表文件”

52、对对 话框中，定位到站点中的样式表文件（话框中，定位到站点中的样式表文件（.css），然后单击），然后单击“确确 认认”按钮后，样式表文件的路径就会加入到按钮后，样式表文件的路径就会加入到“链接外部样式表链接外部样式表” 对话框的路径文本框中。对话框的路径文本框中。 在在“添加为添加为”选项组中，选择选项组中，选择“链接链接” 单选按钮，然单选按钮，然 后单击后单击“确定确定”按钮。按钮。 在在网页文档的网页文档的“”标签之间有如下代码：标签之间有如下代码： 如果在步选择如果在步选择“导入导入”单选按钮，确定之后，在网页中单选按钮，确定之后，在网页中 的代码为：的代码为： import url

53、(main.css); 5.样式使用原则样式使用原则 当网页中的同一个对象被多个样式同时修饰时，样式当网页中的同一个对象被多个样式同时修饰时，样式 如果不冲突，则采用叠加的样式效果；样式如果冲突，则如果不冲突，则采用叠加的样式效果；样式如果冲突，则 遵循遵循“就近优先就近优先”的原则，即优先应用距离所修饰对象越的原则，即优先应用距离所修饰对象越 近的样式。因此，在三种使用样式的方法中，在标记符中近的样式。因此，在三种使用样式的方法中，在标记符中 直接用直接用style属性定义的样式优先级最高；而对于用属性定义的样式优先级最高；而对于用style 标记符定义的样式和用标记符定义的样式和用link

54、标记符链接的样式，则谁距离标记符链接的样式，则谁距离 所修饰的对象越近，就应用谁。所修饰的对象越近，就应用谁。 7.6 插入动态元素插入动态元素 7.6.1 插入插入图像图像 网网页中常用的图像格式通常有三种，即页中常用的图像格式通常有三种，即GIF、 JPEG和和PNG。 1.插入图像插入图像 2.设置图像属性设置图像属性 7.6.2 在网页插入动画在网页插入动画 Flash技术是实现和传递矢量图像和动画的首要技术是实现和传递矢量图像和动画的首要 解决方案，其播放器是解决方案，其播放器是Flash Player。Flash有有3种文种文 件格式：件格式：FLA源文件、源文件、SWF动画文件和

55、动画文件和FLV视频文件。视频文件。 后两种文件均可在后两种文件均可在Dreamweaver和浏览器中使用。和浏览器中使用。 7.6.2 在在网页插网页插入动画入动画 插入插入SWF动画的步骤如下：动画的步骤如下： (1)将光标定位到要插入动画的网页位置，在将光标定位到要插入动画的网页位置，在“插插 入入”工具栏的工具栏的“常用常用”类型工具中单击类型工具中单击“媒体媒体”按钮旁按钮旁 的下拉列表框中的的下拉列表框中的 按钮，打开按钮，打开“选择选择SWF文件文件”对话框，对话框， 在其中找到要插入的素材文件（在其中找到要插入的素材文件（*.swf），然后单击），然后单击“确确 定定”按钮。按

56、钮。 (2)选中插入的选中插入的SWF对象，设置它的属性。可以单击对象，设置它的属性。可以单击 “播放播放”按钮查看动画的播放效果。按钮查看动画的播放效果。 操作演示操作演示 7.6.3 在在网页中使用声音与网页中使用声音与视频视频 Web浏览器自身不能解释声音和影像文件，但它能通浏览器自身不能解释声音和影像文件，但它能通 过其它辅助工具的帮助来播放声音和视频文件。在网页中过其它辅助工具的帮助来播放声音和视频文件。在网页中 可以插入可以插入.Mid、.AIFF、.AU、.MP3等等音频音频类型类型的文件。的文件。 而视频文件带有而视频文件带有.WMV、.AVI、.MPG、RM和和MOV等文件等

57、文件 扩展名扩展名。 在在网页中使用声音的方法通常有网页中使用声音的方法通常有3种，一是将声音文件种，一是将声音文件 将为网页的将为网页的背景音乐背景音乐；二是将声音文件；二是将声音文件作为超链接的目标作为超链接的目标 文件文件，供访问者下载或者打开播放器播放；三是直接，供访问者下载或者打开播放器播放；三是直接将声将声 音文件嵌入到网页音文件嵌入到网页中。中。 在在网页中使用网页中使用视频视频的方法通常也有两种：一是将视频的方法通常也有两种：一是将视频 作为超链接的目标文件作为超链接的目标文件；二是；二是直接将视频文件嵌入到网页直接将视频文件嵌入到网页 中中。 操作演示操作演示 7.6.4 创

58、建滚动创建滚动字幕字幕 在网页中，制作滚动字幕使用在网页中，制作滚动字幕使用HTML的的标标 签来实现签来实现。 7.6.4 创建滚动创建滚动字幕字幕 操作步骤：操作步骤： （1）在网页文件选中需要设置滚动的文字，在）在网页文件选中需要设置滚动的文字，在“插入插入” 工具栏的工具栏的“常用常用”类型工具中，单击类型工具中，单击“标签选择器标签选择器”按钮按钮 ， 打开打开对话框对话框，按图进行选择按图进行选择。 7.6.4 创建滚动创建滚动字幕字幕 操作步骤：操作步骤： （2）单击）单击“插入插入”按钮后，切换到代码视图窗口，会按钮后，切换到代码视图窗口，会 发现选择的文字前后分别加入了发现选

59、择的文字前后分别加入了 “”和和 “”标记。标记。 （3）选择菜单）选择菜单“窗口窗口”“标签检查器标签检查器”命令，打开命令，打开 标签面板，在其中可以设置标签的各种属性。设置完成标签面板，在其中可以设置标签的各种属性。设置完成 后，保存网页，按后，保存网页，按F12键在浏览器中查看字幕滚动效果。键在浏览器中查看字幕滚动效果。 7.7 网页发布网页发布 7.7.1 站站点点的测试的测试 网站发布之前必需对站点进行严格测试，网站测网站发布之前必需对站点进行严格测试，网站测 试包含两方面：单独网页测试和网站整体测试。试包含两方面：单独网页测试和网站整体测试。 7.7.1 站站点点的测试的测试 1单独网页的测试单独网页的测试 测试网页的主要任务包括是检查站点各个页面中测试网页的主要任务包括是检查站点各个页面中 的的HTML代码是否符合规范和完整；检查网页中的超代码是否符合规范和完整；检查网页中的超 链接是否能够正常工作；检查浏