第3章网站的实现工具

1、第第3章章 网站的实现工具网站的实现工具本章知识结构框图本章知识结构框图学习激励与案例导航学习激励与案例导航邵亦波与易趣网邵亦波与易趣网 邵亦波，邵亦波，19731973年年9 9月出生于上海。月出生于上海。19991999年创建年创建易趣网，出任首席执行官。邵亦波先生易趣网，出任首席执行官。邵亦波先生1111岁在有岁在有1 15050人参赛的首届全国人参赛的首届全国“华罗庚金杯华罗庚金杯”少年数学竞赛少年数学竞赛中获全国第三名；在初高中全国数学竞赛中连获特中获全国第三名；在初高中全国数学竞赛中连获特等奖与一等奖，成为中国中学数学竞赛中明星选手等奖与一等奖，成为中国中学数学竞赛中明星选手。高二

2、跳级直接进入全世界最著名的美国哈佛大学。高二跳级直接进入全世界最著名的美国哈佛大学，是中国以全额奖学金赴哈佛读本科的第一人；成，是中国以全额奖学金赴哈佛读本科的第一人；成为应届毕业生中的最高荣誉生为应届毕业生中的最高荣誉生.1995.1995年年19971997年被年被世界最著名的两家策略咨询公司世界最著名的两家策略咨询公司麦肯锡麦肯锡(McKin(McKinsey & Co.)sey & Co.)与波士顿咨询集团与波士顿咨询集团(The Boston Consul(The Boston Consulting Group)ting Group)争相聘请。争相聘请。1999199

3、9年谢绝美国年薪达年谢绝美国年薪达2020万万美元的聘请，回上海创办易趣网，美元的聘请，回上海创办易趣网，19991999年年8 8月月1818日易日易趣网正式开通。趣网正式开通。20002000年公司继首期融资年公司继首期融资650650万美元后万美元后，再次完成二期融资，再次完成二期融资20502050万美元。入选万美元。入选“20002000年度年度ITIT十大魅力男士十大魅力男士”。3.1 DreamWeave3.1 DreamWeave基础知识基础知识目前网站制作工具中以目前网站制作工具中以DreamweaverDreamweaver应用最为应用最为广泛。广泛。Dreamweaver

4、Dreamweaver是是MacromediaMacromedia公司推出的公司推出的主页编辑工具。它是一个所见即所得的网页主页编辑工具。它是一个所见即所得的网页编辑器，支持最新的编辑器，支持最新的XHTMLXHTML标准和标准和CSSCSS标准标准。它采用了多种先进技术，能够快速、高效地它采用了多种先进技术，能够快速、高效地创建极具表现力和动感效果的网页，使网页创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。创作过程变得简单无比。3.1.1 Dreamweaver3.1.1 Dreamweaver概述概述 (1 (1）强大的网站管理功能）强大的网站管理功能 （2 2）使用）使用C

5、SSCSS样式减少重复劳动样式减少重复劳动 （3 3）通过表格实现强大的排版功能）通过表格实现强大的排版功能 （4 4）多种视窗模式）多种视窗模式 （5 5）简便易行的对象插入功能）简便易行的对象插入功能 （6 6）用模板与库创建具有统一风格的网站）用模板与库创建具有统一风格的网站 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境标题栏标题栏菜单栏菜单栏插入面板插入面板文档工具栏文档工具栏文档窗口文档窗口属性面板属性面板状态栏状态栏标签选择器标签选择器浮动面板浮动面板文件面板文件面板1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2

6、 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板图图3-2 3-2 标题栏标题栏1 1标题显示栏标题显示栏 3.1.2 Drea

7、mweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板图图3-3 3-3 菜单栏菜单栏1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板图图3-43-4插入面板

8、插入面板1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板图图3-5 3-5 文档工具栏文档工具栏1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8

9、8属性面板属性面板9 9浮动面板浮动面板图图3-6 3-6 标准工具栏标准工具栏1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板标签选择器分辨率传送速度图图3-7 3-7 状态栏状态栏1 1标题显示栏标题显示栏 3.1.2 Dreamweaver3.1.2 Dreamweaver的工作环境的工作环境2 2菜单栏菜单栏3 3插入面板组插入面板组4 4文

10、档工具栏文档工具栏5 5标准工具栏标准工具栏6 6文档窗口文档窗口7 7状态栏状态栏8 8属性面板属性面板9 9浮动面板浮动面板图图3-8 3-8 属性面板属性面板3.1.3 Dreamweaver3.1.3 Dreamweaver的基本操作的基本操作1 1新建文件新建文件三种三种方法方法 (1) (1) 直接创建直接创建 (2)(2)使用菜单创建使用菜单创建 (3)(3)基于模板创建基于模板创建 图图3-9 “3-9 “新建文档新建文档”对话框对话框3.1.3 Dreamweaver3.1.3 Dreamweaver的基本操作的基本操作2 2保存文件保存文件保存单个文件保存单个文件 换名存盘

11、换名存盘 保存框架文件保存框架文件 保存为模板保存为模板 3.1.3 Dreamweaver3.1.3 Dreamweaver的基本操作的基本操作面板的隐藏与显示面板的隐藏与显示 1位置调整位置调整 2重新组合重新组合 33 3面板操作面板操作4 4环境参数设置环境参数设置3.1.3 Dreamweaver3.1.3 Dreamweaver的基本操作的基本操作 单击单击“编辑编辑”“首选参数首选参数”启启动动“首选参数首选参数”对话框，其中包括对话框，其中包括常规、常规、CSSCSS样式、标记色彩、代样式、标记色彩、代码格式、字体等项目，可以根据码格式、字体等项目，可以根据需要进行灵活设置。需

12、要进行灵活设置。3.2 Dreamweaver3.2 Dreamweaver站点设置以及页面操作站点设置以及页面操作3.2.1 Dreamweaver3.2.1 Dreamweaver的站点设置的站点设置编辑文件编辑文件 测试文件测试文件 共享文件共享文件 站点设置站点设置三大部分三大部分五个五个步骤步骤 第一步新建站点第一步新建站点 第二步输入站点的名字及站点的地址第二步输入站点的名字及站点的地址 第三步设定是否使用服务器技术第三步设定是否使用服务器技术 第四步开发过程中文件的使用方法第四步开发过程中文件的使用方法 第五步设定浏览站点根目录的第五步设定浏览站点根目录的URL URL 3.2

13、Dreamweaver3.2 Dreamweaver站点设置以及页面操作站点设置以及页面操作3.2.1 Dreamweaver3.2.1 Dreamweaver的站点设置的站点设置1.1.创建站点创建站点站点创建流程图站点创建流程图第第2步：输入站点名步：输入站点名字及站点地址字及站点地址第第3步：设定是否使步：设定是否使用服务器技术用服务器技术第第4步：开发过程中步：开发过程中文件的使用方法文件的使用方法第第5步：同时站定步：同时站定站点目录。站点目录。第第6步：设定浏览站步：设定浏览站点根目录的点根目录的URL第第1步：新建站点步：新建站点图图3-10 站点建设流程图站点建设流程图2 2站

14、点目录创建站点目录创建【操作实例操作实例3-23-2】创建齐齐哈尔信息工程学校网站目录创建齐齐哈尔信息工程学校网站目录 图图3-113-11是创建齐齐哈尔信息工程学校网站目录操作示意图，图是创建齐齐哈尔信息工程学校网站目录操作示意图，图3-123-12是已是已经创建完毕的网站目录示例。经创建完毕的网站目录示例。图图3-11 3-11 创建网站目录操作创建网站目录操作 图图3-12 3-12 网站目录示例网站目录示例3.3.文件与文件夹的管理文件与文件夹的管理对建立的文对建立的文件和文件夹件和文件夹可以进行可以进行 移动移动复制复制重命名重命名删除删除等基本的管理操作等基本的管理操作3.2.2

15、Dreamweaver3.2.2 Dreamweaver页面属性设置页面属性设置页面页面属性属性设置设置方法方法属性栏属性栏 页面属性按钮页面属性按钮 菜单栏菜单栏 页面属性对话框页面属性对话框 快捷键快捷键 Ctrl+J Ctrl+J 图图3-13 3-13 页面属性设置对话框页面属性设置对话框1 1设置外观设置外观图图3-14 3-14 设置外观设置外观2 2设置链接设置链接图图3-15 3-15 链接属性设置链接属性设置3 3设置标题设置标题图图3-16 3-16 标题设置标题设置4 4标题标题/ /编码设置编码设置“标题标题/ /编码页面属性编码页面属性”用于指定制作用于指定制作Web

16、Web页面时所用语言的文档编码类型。页面时所用语言的文档编码类型。5 5跟踪图像跟踪图像 网页制作时也可以在设计页面插入用做参考的跟踪图像，跟踪图像是网页制作时也可以在设计页面插入用做参考的跟踪图像，跟踪图像是放在制作页面窗口背景中的放在制作页面窗口背景中的JPEGJPEG、GIFGIF或或PNGPNG图像。可以隐藏图像、设置图图像。可以隐藏图像、设置图像的不透明度和更改图像的位置。像的不透明度和更改图像的位置。1.1.输入文本和插入对象输入文本和插入对象2 2文本属性设置文本属性设置3 3插入日期插入日期4 4插入水平线插入水平线5 5插入邮件链接插入邮件链接可在可在“插入插入”菜单下也可在

17、菜单下也可在“插入插入”面板中执行插入操作。面板中执行插入操作。字体设置字体设置 、文字大小设置、文字、文字大小设置、文字颜色设置颜色设置 “插入插入” “日期日期” “插入插入” “ HTML HTML ” “水平线水平线” “插入插入” “电子邮件链接电子邮件链接” 6 6插入特殊字符插入特殊字符“插入插入” “ HTML HTML ” “特殊字符特殊字符” 3.2.3 Dreamweaver3.2.3 Dreamweaver文本操作文本操作3.2.4 Dreamweaver3.2.4 Dreamweaver的图像操作的图像操作图像的主图像的主要格式要格式JPEGJPEG GIFGIF P

18、NGPNG 目前使用最多目前使用最多的是的是JPEGJPEG格式格式 (1)(1)在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“图图像像”图标。图标。(2) (2) 在在“插入插入”栏的栏的“常用常用”类别中，将类别中，将“图像图像”图标拖入网页窗口中图标拖入网页窗口中( (如果正处理代码，则拖入如果正处理代码，则拖入“代码代码”视图窗口中视图窗口中) )。(3) (3) 选择选择“插入插入”“图像图像”。(4) (4) 单击单击“窗口窗口”菜单的菜单的“资源资源”显示资源面板，显示资源面板，将图像从将图像从“资源资源”面板拖到网页窗口中的所需位置。面板拖到网页窗口中的所需位置

19、。(5) (5) 将图像从将图像从“站点站点”面板拖到面板拖到“文档文档”窗口中的窗口中的所需位置。所需位置。 (6) (6) 将图像从桌面或文件夹中拖到网页中的所需位将图像从桌面或文件夹中拖到网页中的所需位置。置。仔细分析图像的日常操作主要有仔细分析图像的日常操作主要有: : 1 1插入图像插入图像将插入点放置在要显示图像的地方，然后执行以下操作之一。将插入点放置在要显示图像的地方，然后执行以下操作之一。2 2设置图像属性设置图像属性图图3-17 3-17 图像属性设置图像属性设置3 3使用鼠标经过图像使用鼠标经过图像图图3-18 3-18 使用鼠标经过图像使用鼠标经过图像4 4使用图像地图

20、使用图像地图 图像地图指已被分为多个区域图像地图指已被分为多个区域( (或称或称“热点热点”) )的图像；当用户单击某个热点的图像；当用户单击某个热点时，会发生某种操作。时，会发生某种操作。 每个地图都每个地图都有唯一名称有唯一名称 创建圆形热点创建圆形热点创建矩形热点创建矩形热点创建不规则形状的热点创建不规则形状的热点圆形工具圆形工具 矩形工具矩形工具 多边形工具多边形工具 4 4使用图像地图使用图像地图 _ _blank blank 链接的文件在一个未命名的新浏览器窗口中打开。链接的文件在一个未命名的新浏览器窗口中打开。_ _ parentparent 链接的文件在含有该链接的框架的父框架

21、集或父窗口中打开。链接的文件在含有该链接的框架的父框架集或父窗口中打开。 _self_self 链接的文件在该链接所在的同一框架或窗口中。链接的文件在该链接所在的同一框架或窗口中。 _top_top 将链接的文件载入整个浏览器窗口中，会删除所有框架。将链接的文件载入整个浏览器窗口中，会删除所有框架。 3.2.5 Dreamweaver3.2.5 Dreamweaver的链接操作的链接操作 图像图像操作操作1 1基础知识基础知识2 2链接的基本操作链接的基本操作绝对路径和相对路径绝对路径和相对路径 链接目标链接目标 虚拟链接虚拟链接 脚本链接脚本链接 （1 1）选中需要建立链接的）选中需要建立链

22、接的 文本或图像；文本或图像；（2 2）在属性面板中设置要）在属性面板中设置要 链接文件的路径及文件名。链接文件的路径及文件名。（3 3）如果链接到邮件，）如果链接到邮件，则需则需 要在邮箱地址前加上要在邮箱地址前加上MailtoMailto， 3.3 3.3 表格操作表格操作1 1插入表格插入表格图图3-19 3-19 插入表格插入表格 “ “常用常用”快捷栏中的表格按钮弹出的快捷栏中的表格按钮弹出的“表格表格”对话框，指定表格的属性后，在对话框，指定表格的属性后，在文档窗口中插入设置的表格。文档窗口中插入设置的表格。 1 1插入表格插入表格图图3-20 3-20 插入表格对话框插入表格对话

23、框2 2选定表格选定表格一一选择整个表格选择整个表格 二二选中某一单元格选中某一单元格 三三选中连续的单元格选中连续的单元格 四四选择某一行或某一列选择某一行或某一列 【操作实例操作实例3-33-3】选定表格选定表格图图3-21 3-21 表格属性表格属性2 2选定表格选定表格【操作实例操作实例3-33-3】选定表格选定表格【操作实例操作实例3-43-4】插入表格。插入表格。2 2选定表格选定表格步骤步骤1 1：启动：启动Dreamweaver 8Dreamweaver 8，进入起始页，单击，进入起始页，单击“新建项目新建项目”“”“HTML”HTML” 进入进入Dreamweaver 8Dr

24、eamweaver 8工作界面。工作界面。步骤步骤2 2：在文档的设计视图窗口下，将光标定位在要插入表格的位置，然：在文档的设计视图窗口下，将光标定位在要插入表格的位置，然 后选择主菜单后选择主菜单“插入插入”下的表格选项插入表格。下的表格选项插入表格。 步骤步骤3 3：进入：进入“表格表格”对话框设置表格，表格的宽度为对话框设置表格，表格的宽度为300300像素像素, ,单元格为单元格为 5 5行行2 2列，边框粗细为列，边框粗细为1px1px，单元格边距为，单元格边距为0 0，单元格间距为，单元格间距为3px3px。步骤步骤4 4：在：在“页眉页眉”选框下设置标题的形式为顶部。选框下设置标

25、题的形式为顶部。步骤步骤5 5：在辅助功能框中输入表格的标题内容为：在辅助功能框中输入表格的标题内容为“信息工程学校专业设置信息工程学校专业设置”。步骤步骤6 6：输入相关文字内容，运行效果如图：输入相关文字内容，运行效果如图3-223-22所示。所示。 图图3-22 “3-22 “表格表格”效果效果【操作实例操作实例3-43-4】插入表格。插入表格。2 2选定表格选定表格3.3.2 3.3.2 表格的编辑表格的编辑 1 1设置表格属性设置表格属性2 2单元格属性单元格属性3 3表格的行和列表格的行和列4 4拆分与合并单拆分与合并单 元格元格1 1设置表格属性设置表格属性2 2单元格属性单元格

26、属性3 3表格的行和列表格的行和列4 4拆分与合并单拆分与合并单 元格元格3.3.2 3.3.2 表格的编辑表格的编辑 图图3-23 3-23 表格属性设置表格属性设置图图3-24 3-24 表格背景图片表格背景图片1 1设置表格属性设置表格属性2 2单元格属性单元格属性3 3表格的行和列表格的行和列4 4拆分与合并单拆分与合并单 元格元格3.3.2 3.3.2 表格的编辑表格的编辑 图图3-25 3-25 单元格属性设置单元格属性设置1 1设置表格属性设置表格属性2 2单元格属性单元格属性3 3表格的行和列表格的行和列4 4拆分与合并单拆分与合并单 元格元格3.3.2 3.3.2 表格的编辑

27、表格的编辑 图图3-26 3-26 行操作行操作图图3-27 3-27 插入行插入行1 1设置表格属性设置表格属性2 2单元格属性单元格属性3 3表格的行和列表格的行和列4 4拆分与合并单拆分与合并单 元格元格3.3.2 3.3.2 表格的编辑表格的编辑 合并单元格合并单元格拆分单元格拆分单元格图图3-28 3-28 单元格拆分单元格拆分3.3.3 3.3.3 用表格进行页面布局用表格进行页面布局1.1.表格在页面布局中的应用表格在页面布局中的应用表格方式表格方式布局的页布局的页面一般都面一般都是四表制是四表制 头部一张表头部一张表 导航栏一张表导航栏一张表 体部一张表体部一张表 尾部一张表尾

28、部一张表 四张表的宽度相同，风四张表的宽度相同，风格一致格一致 表格宽度应该根据分辨率设定，如果是表格宽度应该根据分辨率设定，如果是1280128010241024或或10241024768768的分辨率应该将的分辨率应该将宽度设为宽度设为10001000像素，如图像素，如图3-293-29所示。而所示。而800800600600的分辨率则应该设为的分辨率则应该设为750750800800像素，像素，习惯上设置为习惯上设置为776776像素。边框粗细、单元格边距、单元格间距均设为像素。边框粗细、单元格边距、单元格间距均设为0 0像素。像素。3.3.3 3.3.3 用表格进行页面布局用表格进行页

29、面布局1.1.表格在页面布局中的应用表格在页面布局中的应用图图3-29 3-29 页面布局表格属性的设置页面布局表格属性的设置 体部表格则较为复杂，一般的做法是将体部表格竖向拆分之后，再嵌体部表格则较为复杂，一般的做法是将体部表格竖向拆分之后，再嵌套表格，实现体部的布局，如图套表格，实现体部的布局，如图3-303-30所示。所示。 3.3.3 3.3.3 用表格进行页面布局用表格进行页面布局1.1.表格在页面布局中的应用表格在页面布局中的应用图图3-30 “3-30 “表格表格”对话框对话框表格边框设置表格边框设置 嵌套表格时尺寸的设定要注意嵌套表格时尺寸的设定要注意 表格不可行、列同时拆分表

30、格不可行、列同时拆分 严禁一表到底严禁一表到底 2 2表格布局的注意事项表格布局的注意事项3.4 3.4 样式和层操作样式和层操作3.4.1 CSS3.4.1 CSS样式表和样式表和DIVDIV层的概念层的概念1 1CSSCSS的含义的含义 CSS CSS是是Cascading style SheetCascading style Sheet的简称，翻译成中文的含义就是的简称，翻译成中文的含义就是“层层叠样式表单叠样式表单”，一般称做，一般称做“层叠样式表层叠样式表”，或，或“样式表样式表”。它实质上是。它实质上是一系列格式设置规则，它们控制一系列格式设置规则，它们控制WebWeb页面内容的外

31、观。使用页面内容的外观。使用CSSCSS设置页面设置页面格式时，内容与表现形式是相互分开的。页面内容格式时，内容与表现形式是相互分开的。页面内容(HTML(HTML代码代码) )位于自身位于自身的的HTMLHTML文件中，而定义代码表现形式的文件中，而定义代码表现形式的CSSCSS规则位于另一个文件规则位于另一个文件( (外部样外部样式表式表) )或或HTMLHTML文档的另一部分文档的另一部分( (通常为通常为部分部分) )中。使用中。使用CSSCSS可以非常可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等

32、。之所以称做等。之所以称做“层叠层叠”是因为同一段文字可以用多个样式表从不同角是因为同一段文字可以用多个样式表从不同角度进行修饰，可以使用一个样式表设置颜色，使用另外一个样式表设置度进行修饰，可以使用一个样式表设置颜色，使用另外一个样式表设置字体。字体。2 2CSSCSS样式的分类样式的分类内联样式内联样式 内部样式表内部样式表 外部样式表外部样式表 按其位置的按其位置的不同可以分不同可以分 写在写在HTMLHTML标记之中标记之中 美丽的鹤城，我的家美丽的鹤城，我的家写在写在里面的里面的 一个外部样式表文件可以通过一个外部样式表文件可以通过标签连接到标签连接到HTMLHTML文档中。文档中。

33、 3 3层的含义层的含义层的含义？层的含义？ 层是一种层是一种HTMLHTML页面元素，可以将它定位在页面上的任意位置。图层页面元素，可以将它定位在页面上的任意位置。图层除了像表格一样可以设定背景、位置、自由移动、响应事件、控制显示除了像表格一样可以设定背景、位置、自由移动、响应事件、控制显示外，还可以轻松建立三维效果，可以使网页中的对象在垂直方向互相重外，还可以轻松建立三维效果，可以使网页中的对象在垂直方向互相重叠，再配合叠，再配合TimelineTimeline的应用可以做出意想不到的效果，使网页更加生动，的应用可以做出意想不到的效果，使网页更加生动，动感十足。因此，局部处理图层能给网页增

34、色不少。使用动感十足。因此，局部处理图层能给网页增色不少。使用CSS-PCSS-P的时候，的时候，我们主要把它用在我们主要把它用在DIVDIV上。当把文字。图像等放在上。当把文字。图像等放在DIVDIV中进时，它可称做中进时，它可称做“DIV block”DIV block”，或，或“DIV element”DIV element”或或“CSS-layer”CSS-layer”，或干脆称做，或干脆称做“layer”layer”。而中文把它称做。而中文把它称做“层次层次”。所以当以后看到这些名词的时。所以当以后看到这些名词的时候，就知道它们是指一段在候，就知道它们是指一段在DIVDIV中的中的H

35、TMLHTML。 表现和内容相分离表现和内容相分离 1 提高页面浏览速度提高页面浏览速度 2 易于维护和改版易于维护和改版 34 4CSS+DIVCSS+DIV的页面排版优越之处的页面排版优越之处3.4.2 3.4.2 样式表的创建样式表的创建创建样式表文件的方法很多，常用的有以下几种：创建样式表文件的方法很多，常用的有以下几种：1 1用用“文件文件”菜单的新建子菜单创建菜单的新建子菜单创建 第一种方法：单击第一种方法：单击“文件文件”“”“新建新建”“”“基本页基本页”“”“CSS”CSS”，建立外部样式，建立外部样式表文件。表文件。 第二种方法：单击第二种方法：单击“文件文件”“”“新建新

36、建”“”“CSSCSS样式表样式表”，调出各类预存的，调出各类预存的CSSCSS样样式表，从中选择样式，然后单击式表，从中选择样式，然后单击“创建创建”，将自动创建样式表文件，样式表文件创建，将自动创建样式表文件，样式表文件创建后可以进行修改。后可以进行修改。2 2用样式浮动面板创建用样式浮动面板创建 选择选择“窗口窗口”“”“CSSCSS样式样式”，也可按，也可按Shift+F11Shift+F11快捷键打开样式浮动面板，单击快捷键打开样式浮动面板，单击鼠标右键，在弹出的子菜单中选择鼠标右键，在弹出的子菜单中选择“新建新建”命令。命令。2 2用用“文本文本”菜单的菜单的CSSCSS样式创建样

37、式创建3.4.2 3.4.2 样式表的创建样式表的创建弹出弹出“新建新建CSSCSS规则规则”子菜单，子菜单中共有以下三项，如图子菜单，子菜单中共有以下三项，如图3-313-31所示。所示。图图3-31 3-31 新建新建CSSCSS规则规则3.4.3 3.4.3 外部层叠样式表的链接外部层叠样式表的链接执行下列操作之一打开执行下列操作之一打开“CSSCSS样式样式”面板。面板。 1 1选择选择“窗口窗口”“”“CSSCSS样式样式”，也可按，也可按Shift+F11Shift+F11快捷键。快捷键。2 2在在“CSSCSS样式样式”面板中，单击面板中，单击“附加样式表附加样式表”按钮，或单击

38、该面板顶部右边的三按钮，或单击该面板顶部右边的三 角按钮从弹出的菜单中选择角按钮从弹出的菜单中选择“附加样式表附加样式表”。3 3完成对话框设置，然后单击完成对话框设置，然后单击“确定确定”按钮，如图按钮，如图3-323-32所示。所示。 图图3-32 3-32 链接外部样式表链接外部样式表【操作实例操作实例3-53-5】样式表的创建样式表的创建3.4.3 3.4.3 外部层叠样式表的链接外部层叠样式表的链接步骤步骤1 1：启动：启动Dreamweaver 8Dreamweaver 8，进入起始页，单击，进入起始页，单击“新建项目新建项目”HTMLHTML进入进入 Dreamweaver 8D

39、reamweaver 8工作界面。工作界面。步骤步骤2 2：输入文字，选择：输入文字，选择“文本文本”“”“CSSCSS样式样式”“”“新建新建”调出样式对话调出样式对话 框，选择器的类型为框，选择器的类型为“类类”，在名称框里输入样式名如，在名称框里输入样式名如“.cs1”.cs1”， 在在“定义定义”在一栏中选择在一栏中选择“新建样式表文件新建样式表文件”，设置如图，设置如图3-333-33所示所示 ，单击，单击“确定确定”按钮。按钮。图图3-33 3-33 链接外部样式表链接外部样式表步骤步骤3 3：进入：进入CSSCSS样式定义对话框，设置该样式，如图样式定义对话框，设置该样式，如图3

40、-343-34所示。所示。【操作实例操作实例3-53-5】样式表的创建样式表的创建3.4.3 3.4.3 外部层叠样式表的链接外部层叠样式表的链接图图3-34 CSS3-34 CSS样式定义对话样式定义对话步骤步骤4 4：在文档选中文字，在属性栏的样式一栏中选择：在文档选中文字，在属性栏的样式一栏中选择.CS1.CS1的样式。的样式。3.4.4 3.4.4 设置设置CSSCSS样式样式CSSCSS规则规则定义中具定义中具体包括体包括区块区块方框方框边框边框列表列表定位定位扩展扩展类型类型背景背景类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CS

41、SCSS样式样式类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-35 CSS3-35 CSS规则定义中的规则定义中的“类型类型”设置设置类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-36 CSS3-36 CSS规则定义中的规则定义中的“背景背景”设置设置类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-37 CSS3-37 CSS规则定义中的规则定义中的“区块区块”设置

42、设置类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-38 CSS3-38 CSS规则定义中的规则定义中的“方框方框”设置设置类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-39 CSS3-39 CSS规则定义中的规则定义中的“列表列表”设置设置类型类型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-40 CSS3-40 CSS规则定义中的规则定义中的“定位定位”设置设置 类型类

43、型背景背景区块区块方框方框边框边框列表列表定位定位扩展扩展3.4.4 3.4.4 设置设置CSSCSS样式样式图图3-41 CSS3-41 CSS规则定义中的规则定义中的“扩展扩展”设置设置 3.4.5 CSS3.4.5 CSS样式的应用样式的应用 在网页制作过程中，一般要先根据需要进行在网页制作过程中，一般要先根据需要进行CSSCSS样式设置，然后再用样式设置，然后再用CSSCSS样式对文样式对文本进行设置。本进行设置。3.4.6 3.4.6 层的创建层的创建1 1层的创建层的创建 1 2层的创建可以通过以下两种方法。层的创建可以通过以下两种方法。嵌套层概念及方法？嵌套层概念及方法？（1 1

44、）所谓嵌套层是指包含在其他层中的层。）所谓嵌套层是指包含在其他层中的层。 嵌套层能够确嵌套层能够确 保该层永远位于其父层的上方。保该层永远位于其父层的上方。（2 2）创建方法。创建嵌套层，首先将插入点放置在已创建的）创建方法。创建嵌套层，首先将插入点放置在已创建的 层中，然后选择主菜单层中，然后选择主菜单“插入插入”下的下的“布局布局”选项，在选项，在 下拉菜单中单击下拉菜单中单击“层层”按钮即可插入嵌套层。按钮即可插入嵌套层。2.2.嵌套层嵌套层3.4.7 3.4.7 层的编辑层的编辑1 1层的层的“属性属性”面板面板在层的在层的“属性属性”面板中可以设置层的各项属性，主要属性设置方法如下。

45、面板中可以设置层的各项属性，主要属性设置方法如下。（1 1） （2） （3） （4） 在在“层编号层编号”编辑框中设置当前层的名称。编辑框中设置当前层的名称。 在在“左左”和和“上上”编辑框中设置层相对于页面编辑框中设置层相对于页面或其父层左上角的位置。或其父层左上角的位置。 在在“可见性可见性”下拉列表框中设置层的可见性。下拉列表框中设置层的可见性。 在在“背景层图像背景层图像”编辑框中输入层背景图像的编辑框中输入层背景图像的名称和路径，名称和路径，“背景颜色背景颜色”设置层的背景颜色。设置层的背景颜色。 在在“类类”下拉列表框中选择已经设置好的下拉列表框中选择已经设置好的CSSCSS样式或

46、新建样式或新建CSSCSS样式。样式。（5）2 2显示层面板显示层面板显示层面板显示层面板“窗口窗口” “层层” 即可显示或隐藏层面板即可显示或隐藏层面板，在层控制面板中，在层控制面板中，文档中的层都显示在文档中的层都显示在层列表中，如果存在层列表中，如果存在嵌套层，则以树状结嵌套层，则以树状结构显示层的嵌套。构显示层的嵌套。3 3调整层的大小调整层的大小调整层的大小，其操作方法如下：调整层的大小，其操作方法如下：（1 1） （2） （3） （4）选中层，拖动其周围控制点来调整层大小。选中层，拖动其周围控制点来调整层大小。选中层，按选中层，按CtrlCtrl键和方向键，每次增大或缩小键和方向键

47、，每次增大或缩小1 1像素。像素。选中层，同时按选中层，同时按Ctrl+ShiftCtrl+Shift快捷键，然后按方向键，快捷键，然后按方向键，可以使层的大小每次改变一个网格单位的距离。可以使层的大小每次改变一个网格单位的距离。在在“属性属性”面板的面板的“宽宽”和和“高高”编辑框中输入层的编辑框中输入层的精确尺寸进行调整。精确尺寸进行调整。调整多个层的大小，可在网页编辑窗口中选中这些层调整多个层的大小，可在网页编辑窗口中选中这些层，选择主菜单，选择主菜单“修改修改”下的下的“对齐对齐”选项，在下拉菜选项，在下拉菜单中单击单中单击“设成宽度相同设成宽度相同”或或“设成高度相同设成高度相同”菜

48、单，菜单，则以最后一个选则以最后一个选 的层的大小为标准，调整其他层，使的层的大小为标准，调整其他层，使它们具有相同的宽度或高度。也可在它们具有相同的宽度或高度。也可在“属性属性”面板的面板的“宽宽”和和“高高”编辑框中输入宽度和高度值，该值将编辑框中输入宽度和高度值，该值将应用于所有被选中的层。应用于所有被选中的层。（5）4 4移动层移动层层的位置可以任意移动，其操作方法有以下层的位置可以任意移动，其操作方法有以下3 3种。种。（1 1） （2） （3） 选中层，拖动层的边框。选中层，拖动层的边框。 选中层，用小键盘上的方向键调整，每次移动选中层，用小键盘上的方向键调整，每次移动像素。像素。

49、 选中层，按选中层，按ShiftShift键和方向键，可以快速移动键和方向键，可以快速移动层，每次移动一个网格单位的距离。层，每次移动一个网格单位的距离。 对齐层对齐层“修改修改” ” “对齐对齐” ” 对齐方式主要有左对对齐方式主要有左对齐、右对齐、对齐上齐、右对齐、对齐上缘、对齐下缘。缘、对齐下缘。 5 5对齐层对齐层6 6改变层的重叠顺序改变层的重叠顺序要在层面板中改变层的重叠顺序，操作方法如下。要在层面板中改变层的重叠顺序，操作方法如下。(1) (1) 单击菜单单击菜单“窗口窗口”下的下的“层层”命令，打开层面板。命令，打开层面板。(2) (2) 选择层并向上或向下拖动层。在选择层并向

50、上或向下拖动层。在“Z Z轴轴”输入框中，输入框中，单击层的单击层的Z Z值，并输入新值。值，并输入新值。 3.5 3.5 模模 板板 操操 作作3.5.1 3.5.1 模板概述模板概述1 1网页模板的定义网页模板的定义 网页模板网页模板就是为了快速生成网站的各页面，而制作的网页框架，使用网页就是为了快速生成网站的各页面，而制作的网页框架，使用网页编辑软件输入各个页面需要的内容，生成各个子页面，其扩展名为编辑软件输入各个页面需要的内容，生成各个子页面，其扩展名为dwtdwt。制作完。制作完成后，系统自动在站点中生成成后，系统自动在站点中生成TemplatesTemplates文件夹。使用时要注

51、意，不要将模板文文件夹。使用时要注意，不要将模板文件移出模板文件夹，也不要将其他非模板文件存入模板文件夹中。件移出模板文件夹，也不要将其他非模板文件存入模板文件夹中。2 2网页模板的本质网页模板的本质 模板的本质模板的本质就是在一个普通的网页上定义了哪里可以编辑，哪里不可以编辑，就是在一个普通的网页上定义了哪里可以编辑，哪里不可以编辑，可以编辑的地方在用模板生成的子页面上可以随意添加内容、更改内容，不可以可以编辑的地方在用模板生成的子页面上可以随意添加内容、更改内容，不可以编辑的地方则作为各自页面的公共特征存在。编辑的地方则作为各自页面的公共特征存在。3 3使用网页模板创建网页的原因使用网页模

52、板创建网页的原因用网页模板有哪些优点呢？用网页模板有哪些优点呢？ (1) (1) 可以快速制作网站可以快速制作网站 (4) (4) 可以借鉴成熟经验可以借鉴成熟经验 (3) (3) 降低制作成本降低制作成本 (2) (2) 可以快速修改网站可以快速修改网站 3.5.2 3.5.2 创建模板创建模板1 1模板中的几个区域的概念模板中的几个区域的概念可编辑区域可编辑区域 基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。基于模板的文档中的未锁定区域，它是模板用户可以编辑的部分。 重复区域重复区域 文档中设置为重复的布局部分。文档中设置为重复的布局部分。 可选区域可选区域 是在模板中指定为可

53、选的部分，用于保存有可能在基于模板的文是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容档中出现的内容( (如可选文本或图像如可选文本或图像) )。 可编辑标签可编辑标签 属性可以在模板中解锁标签属性，以便该属性可以在基于模板的属性可以在模板中解锁标签属性，以便该属性可以在基于模板的页面中编辑。页面中编辑。 2 2模板创建的三种方式模板创建的三种方式1 1直接创建模板直接创建模板 选择选择【窗口窗口】【资源资源】命令，打开命令，打开“资源资源”面板，切换到模板子面板，如图面板，切换到模板子面板，如图3-42 3-42 所示。所示。 扩展按钮扩展按钮模板预览区模板预览区模板列

54、表区模板列表区模板库应应用用模模板板按按钮钮刷刷新新站站点点列列表表添添加加模模板板按按钮钮辑辑模模板板按按钮钮删删除除模模板板按按 钮钮图图3-423-42模板面板模板面板2 2将普通网页另存为模板将普通网页另存为模板图图3-44 3-44 模板另存为模板另存为“文件文件/ /另存为模板另存为模板”命令将网页另存为模板。命令将网页另存为模板。 3 3从文件菜单新建模板从文件菜单新建模板 选择选择【文件文件】【新建新建】命令，打开命令，打开“新建文档新建文档”对话框，然后再类别中选择对话框，然后再类别中选择“模板页模板页”，并选取相关的模板类型，直接单击，并选取相关的模板类型，直接单击“创建创

55、建”按钮即可。按钮即可。” ” 如图如图3-453-45所所示。示。图图3-45 3-45 新建模板新建模板3.5.3 3.5.3 编辑模板编辑模板打开模板打开模板 修改模板修改模板 删除模板删除模板 1 1模板的模板的基本操作基本操作图图3-46 “3-46 “更新模板文件更新模板文件”对话框对话框【操作实例操作实例3-63-6】删除模板删除模板1 1在在“资源资源”面板（面板（【窗口窗口】【资源资源】）中，选择面板左侧的）中，选择面板左侧的“模板模板”类别。类别。2 2重命名单击模板的名称以选择该模板。重命名单击模板的名称以选择该模板。3 3单击面板底部的单击面板底部的“删除删除”按钮，然

56、后确认要删除该模板。按钮，然后确认要删除该模板。 一旦删除模板文件，则无法对其进行检索。该模板文件将被从站点中删除。一旦删除模板文件，则无法对其进行检索。该模板文件将被从站点中删除。基于已删除模板的文档不会与此模板分离；它们保留该模板文件在被删除前所具有基于已删除模板的文档不会与此模板分离；它们保留该模板文件在被删除前所具有的结构和可编辑区域。的结构和可编辑区域。(4) (4) 重命名模板。与删除模板一样，选中文件，双击后直接修改即可，切记扩展名重命名模板。与删除模板一样，选中文件，双击后直接修改即可，切记扩展名不可改变。不可改变。【操作实例操作实例3-73-7】重命名模板重命名模板若要在若要

57、在“资源资源”面板中重命名模板，请执行以下操作：面板中重命名模板，请执行以下操作：1 1在在“资源资源”面板（面板（【窗口窗口】【资源资源】）中，选择面板左侧的）中，选择面板左侧的“模板模板”类别类别2 2重命名单击模板的名称以选择该模板。重命名单击模板的名称以选择该模板。 3 3再次单击模板的名称以便使文本可选，然后输入一个新名称。再次单击模板的名称以便使文本可选，然后输入一个新名称。 这种重命名方式与在这种重命名方式与在 Windows Windows 资源管理器中对文件进行重命名的方式相同。资源管理器中对文件进行重命名的方式相同。4 4若要更新站点中所有基于此模板的文档，请单击若要更新站

58、点中所有基于此模板的文档，请单击“更新更新”。如果不想更新基于此。如果不想更新基于此模板的任何文档，则单击模板的任何文档，则单击“不更新不更新”。 1.1.模板的基本操作模板的基本操作2 2定义模板的可编辑区定义模板的可编辑区(1) (1) 选择选择“插入插入”“模板对象模板对象”“可编辑区域可编辑区域”命令。命令。(2) (2) 用鼠标右键单击选择用鼠标右键单击选择“模板模板”“新建可编辑区域新建可编辑区域”命令。命令。 (3) (3) 在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“模板模板”按钮上的箭头，然后选择按钮上的箭头，然后选择“可可 编辑区域编辑区域”。 图图3-4

59、7 “3-47 “新建可编辑区域新建可编辑区域”对话框对话框3 3创建模板的可选区域创建模板的可选区域(1) (1) 选择选择“插入插入”“模板对象模板对象”“可选区域可选区域”命令。命令。 (2) (2) 用鼠标右键单击所选内容，然后选择用鼠标右键单击所选内容，然后选择“模板模板”“新建可选区域新建可选区域”命令。命令。(3) (3) 在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“模板模板”按钮上的箭头，然后选择按钮上的箭头，然后选择“可可选区域选区域”命令。命令。弹出弹出“新建可选区域新建可选区域”对话框，为可选区域指定选项，单击对话框，为可选区域指定选项，单击“确定确定”

60、按钮，如图按钮，如图3-483-48 所示。所示。图图3-48 “3-48 “新建可选区域新建可选区域”对话框对话框4 4创建模板的重复区创建模板的重复区执行下列操作之一创建重复区域。执行下列操作之一创建重复区域。(1)(1)选择选择“插入插入”“模板对象模板对象”“重复区域重复区域(2)”命令。命令。(2) (2) 用鼠标右键单击选择用鼠标右键单击选择“模板模板”“新建重新建重复区域复区域”命令。命令。 (3) (3) 在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“模模板板”按钮上的箭头，然后选择按钮上的箭头，然后选择“重重复区域复区域”。弹出弹出“新建重复区域新建重复区域”对话框后，在对话