使用Dreamweaver制作网站

1、网站维护与网页制作网站维护与网页制作主讲：康梅娟主讲：康梅娟 网站维护与网页制作 2.12.2 2.3 2.72.8第第2 2讲讲 使用使用DreamweaverDreamweaver制作网站制作网站 网站维护与网页制作 2.12.2 2.3 2.1 DreamweaverDreamweaver基础操作基础操作2.2 2.2 模板、多媒体元素和书签超链接的使用模板、多媒体元素和书签超链接的使用2.3 2.3 图像热区、图像热区、CSSCSS样式的应用样式的应用2.4 2.4 图层的使用图层的使用2.5 2.5 创建时间轴动画创建时间轴动画

2、2.6 2.6 表单的应用表单的应用2.7 2.7 框架的应用框架的应用2.8 2.8 使用行为使用行为讲解提纲讲解提纲 网站维护与网页制作 2.12.2 2.3 2.72.8大任务大任务制作制作“空谷幽兰空谷幽兰”的网站的静态部分，包括扉页、首页、照片、音的网站的静态部分，包括扉页、首页、照片、音乐、视频、动画、文章、粉丝、北京粉丝、西安粉丝和济南粉丝共乐、视频、动画、文章、粉丝、北京粉丝、西安粉丝和济南粉丝共1111个静个静态页面。态页面。 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.42.52.

3、62.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.7

4、2.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8站点的创建和管理站点的创建和管理网页的创建和编辑网页的创建和编辑使用表格布局网页使用表格布局网页在网页中插入文本、图像和影片在网页中插入文本、图像和影片超链接的使用超链接的使用2.1 2.1 DreamweaverDreamweaver基础操作基础操作 网站维护与网页制作 2.12.2 2.3 2.72.8任务任务1 1制作制作“扉页扉页”和和“首页首

5、页” 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8一、一、站点的创建和管理站点的创建和管理创建站点创建站点 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.81 1. .创建站点创建站点- -续续u注意注意: : （1 1）可以创建多个站点）可以创建多个

6、站点（2 2）打开某个站点的方法）打开某个站点的方法“站点站点”|“|“管理站点管理站点”，选择站点，单击，选择站点，单击“完成完成”“文件文件”面板中的站点下拉列表面板中的站点下拉列表（3 3）同一个站点只需创建）同一个站点只需创建1 1次，以后编辑时只需打开编辑即可（装了还原次，以后编辑时只需打开编辑即可（装了还原卡的机子除外）卡的机子除外） 网站维护与网页制作 2.12.2 2.3 2.72.82 2. .站点的管理站点的管理（1）新建文件）新建文件（2）新建文件夹）新建文件夹 网站维护与网页制作 2.12.2 2.3 2.72.82 2. .站点的管

7、理站点的管理- -续续（3）文件夹和文件的）文件夹和文件的移动、复制、删除移动、复制、删除或重命名或重命名 （4）打开文件：双击）打开文件：双击文件名文件名 网站维护与网页制作 2.12.2 2.3 2.72.8二、二、网页的创建和编辑网页的创建和编辑1 1. .网页的创建网页的创建在在“文件文件”面板的站点中创建面板的站点中创建从启动页面创建从启动页面创建文件文件| |新建新建 网站维护与网页制作 2.12.2 2.3 2.72.82. 2. 网页的编辑网页的编辑（1 1）打开网页：文件）打开网页：文件| |打开或者在打开或者在“文件文件”面板中双击要编辑

8、的文件名称面板中双击要编辑的文件名称。（2 2）保存网页：文件）保存网页：文件| |保存；文件保存；文件| |另存为。另存为。（3 3）预览网页：按）预览网页：按“F12F12”键；文件键；文件| |在浏览器中预览在浏览器中预览| |iexporeiexpore；单击；单击“文档文档”工具栏的工具栏的【在浏览器中预览在浏览器中预览/ /调试调试】按钮，并在弹出的下拉菜单中按钮，并在弹出的下拉菜单中选择选择【预览在预览在iexporeiexpore】命令。命令。 网站维护与网页制作 2.12.2 2.3 .网页的编辑网页的编辑- -续续（4 4）设置网页标题）

9、设置网页标题（5 5）设置）设置“上边距上边距”为为0 0：修改修改| |页面属性页面属性（6 6）添加）添加/ /删除字体：选择删除字体：选择“字体字体”下拉列表的最后一项下拉列表的最后一项“编辑字体列表编辑字体列表”，打开，打开“编辑字体列表编辑字体列表”对话框。对话框。 网站维护与网页制作 2.12.2 2.3 2.72.8三、三、使用表格布局网页使用表格布局网页u 在设计网页中，表格不仅可以罗列数据，更重要的是可以用来控制在设计网页中，表格不仅可以罗列数据，更重要的是可以用来控制网页的布局。网页的布局。u 通常，新建网页后，要先在网页中插入表格，再将其它网页元素插通常

10、，新建网页后，要先在网页中插入表格，再将其它网页元素插入到表格的单元格中。入到表格的单元格中。u 网页布局的种解决方案：网页布局的种解决方案：表格表格、框架框架、图层图层。 网站维护与网页制作 2.12.2 2.3 2.72.81 1. .表格的表格的3 3种视图种视图(1)(1)标准标准视图：设计规律、简单表格视图：设计规律、简单表格(2)(2)扩展扩展视图：定位元素、放光标视图：定位元素、放光标(3)(3)布局布局视图：设计复杂、无规律表格视图：设计复杂、无规律表格 网站维护与网页制作 2.12.2 2.3 2.72.82 2. . 创建表格创建表格（1

11、 1）插入表格（）插入表格（2 2种方法）种方法）4单击单击“插入插入”|“表格表格”命令命令4单击单击“常用常用”面板中的面板中的“表格表格”按钮按钮 网站维护与网页制作 2.12.2 2.3 2.72.8（2 2）表格属性面板）表格属性面板填充填充：指定单元格的内容和单元格边框间的距离，：指定单元格的内容和单元格边框间的距离，单位是像素。单位是像素。间距间距：相邻单元格间的距离，单位是像素。：相邻单元格间的距离，单位是像素。 网站维护与网页制作 2.12.2 2.3 2.72.8（2 2）表格属性面板）表格属性面板- -续续 清除表格的列宽清除表格的列宽

12、 将表格宽度转换成像素将表格宽度转换成像素 将表格宽度转换成百分比将表格宽度转换成百分比 清除表格的行高清除表格的行高 将表格高度转换成像素将表格高度转换成像素 将表格高度转换成百分比将表格高度转换成百分比 网站维护与网页制作 2.12.2 2.3 2.72.8（3 3）为表格输入数据）为表格输入数据u 在表格的单元格中，可以插入文本、图片、超链接、表单、动在表格的单元格中，可以插入文本、图片、超链接、表单、动态组件等元素，也可以插入嵌套表格。态组件等元素，也可以插入嵌套表格。 网站维护与网页制作 2.12.2 2.3 2.72.83 3. . 编辑表格编辑

13、表格（1 1）选中整张表格选中整张表格方法方法1:1:使用使用 标记标记方法方法2:2:单击表格任意位置，按两次单击表格任意位置，按两次Ctrl + ACtrl + A方法方法3 3：单击表格左上角：单击表格左上角 网站维护与网页制作 2.12.2 2.3 2.72.8（2 2）选中表格行）选中表格行方法方法1 1：拖动鼠标从左至右：拖动鼠标从左至右方法方法2 2：把鼠标移至要选定的行的行首，鼠标会变成粗黑箭头，单：把鼠标移至要选定的行的行首，鼠标会变成粗黑箭头，单击左键，选定行击左键，选定行方法方法3 3：使用：使用 标记标记 网站维护与网页制作 2.12.2 2.3 2.

14、2.8（3 3）选中表格列）选中表格列方法方法1 1：拖动鼠标从上至下：拖动鼠标从上至下方法方法2 2：把鼠标移至要选定的列的列首，鼠标会变成粗黑箭头，单：把鼠标移至要选定的列的列首，鼠标会变成粗黑箭头，单击左键，选定列击左键，选定列（4 4）选中单元格）选中单元格方法方法1 1：单击某个单元格：单击某个单元格方法方法2 2：使用：使用 标记标记 网站维护与网页制作 2.12.2 2.3 2.72.8（5 5）添加行或列）添加行或列u 修改修改| |表格表格| |插入行插入行u 修改修改| |表格表格| |插入列插入列u 修改修改| |表格表格| |插入行

15、或列插入行或列（6 6）删除行或列）删除行或列u 修改修改| |表格表格| |删除行删除行u 修改修改| |表格表格| |删除列删除列 网站维护与网页制作 2.12.2 2.3 2.72.8（7 7）合并单元格）合并单元格u方法方法1 1：修改：修改| |表格表格| |合并单元格合并单元格u方法方法2 2：属性面板上的：属性面板上的“合并单元格合并单元格”按钮按钮 网站维护与网页制作 2.12.2 2.3 2.72.8（8 8）拆分单元格）拆分单元格u 方法方法1 1：修改：修改| |表格表格| |拆分单元格拆分单元格u 方法方法2 2：属性面板上的：属性面

16、板上的“拆分单元格拆分单元格”按钮按钮 网站维护与网页制作 2.12.2 2.3 2.72.8小结小结 表格的应用技巧：表格的应用技巧：u 外围表格宽度：外围表格宽度：780780像素像素u 内嵌表格宽度：百分比内嵌表格宽度：百分比u 每一个版块都用一个单独的表格每一个版块都用一个单独的表格u 灵活运用嵌套表格灵活运用嵌套表格 网站维护与网页制作 2.12.2 2.3 2.72.8四、四、在网页中插入文本、图像和影片在网页中插入文本、图像和影片1 1. .插入文本插入文本（1 1）插入特殊字符：插入）插入特殊字符：插入|HTML|HTML|特殊字符特殊字符（

17、2 2）插入日期：插入）插入日期：插入| |日期日期（3 3）插入水平线：插入）插入水平线：插入|HTML|HTML|水平线水平线 （4 4）空格符的键入空格符的键入：切换到：切换到全角中文全角中文进行输入进行输入（5 5）换行符换行符：shift+Entershift+Enter（6 6）段落标识符段落标识符：EnterEnter（7 7）文本的属性面板）文本的属性面板 网站维护与网页制作 2.12.2 2.3 2.72.82 2. .插入图像插入图像（1 1）插入图像：插入）插入图像：插入| |图像或单击图像或单击“常用常用”子面板上的子面板上的【图像图像】按钮按钮 （2

18、 2）设置图像属性）设置图像属性 网站维护与网页制作 2.12.2 2.3 2.72.83 3. .插入滚动字幕插入滚动字幕（1 1）选中滚动字幕内容）选中滚动字幕内容（2 2）单击）单击“插入插入”|“|“标签标签”（3 3）选择）选择“htmlhtml标签标签”中的中的marqueemarquee，单击单击“插入插入”，单击，单击“关关闭闭”（4 4）选中）选中marqueemarquee标签，在标签，在“标签检查器标签检查器”面板的面板的“属性属性”选项选项卡中设置属性卡中设置属性u BehaviorBehavior: :设置字幕运动方式设置字幕运动方式u Direct

19、ionDirection: :设置字幕滚动方向设置字幕滚动方向u ScrollamountScrollamount: :设置字幕滚动速度设置字幕滚动速度 网站维护与网页制作 2.12.2 2.3 2.72.83 3. .插入滚动字幕插入滚动字幕- -续续u ScrolldelayScrolldelay: :设置字幕滚动时停顿的时间，单位为毫秒。如果要让滚动看设置字幕滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。起来流畅，数值应该尽量小。u LoopLoop: :设置字幕滚动次数，默认值为无限，设置字幕滚动次数，默认值为无限，“-1”-1”也为无限。也为

20、无限。 u 打开行为面板，添加两个行为：打开行为面板，添加两个行为： onMouseOveronMouseOver: : this.stopthis.stop()()设置鼠标移动到滚动字幕时的动作为停止滚动。设置鼠标移动到滚动字幕时的动作为停止滚动。 onMouseOutonMouseOut： this.startthis.start()()设置鼠标离开滚动字幕时的动作为开始滚动。设置鼠标离开滚动字幕时的动作为开始滚动。 网站维护与网页制作 2.12.2 2.3 2.72.84 4. .插入插入FlashFlash影片影片 方法方法1 1：插入：插入| |媒体媒体|Flash

21、 |Flash 方法方法2 2：常用面板：常用面板|“|“媒体媒体”按钮按钮 网站维护与网页制作 2.12.2 2.3 2.72.8插入透明插入透明FlashFlash 网站维护与网页制作 2.12.2 2.3 2.72.8五五. .超链接的使用超链接的使用1 1. .超链接的概念超链接的概念 超链接是指从起始端点到目标端点的一个跳转。超链接是指从起始端点到目标端点的一个跳转。 超链接的链接目标可以是超链接的链接目标可以是1 1个网页、个网页、1 1张图片、张图片、1 1首歌曲、首歌曲、1 1个个officeoffice文文档、档、1 1个程序等；超链接的链

22、接目标可以是本机上的个程序等；超链接的链接目标可以是本机上的1 1个任意的文件，也可个任意的文件，也可以是其它服务器上的以是其它服务器上的1 1个个URLURL，或者是某个网页中的具体位置。，或者是某个网页中的具体位置。 网站维护与网页制作 2.12.2 2.3 2.72.82 2. .超链接路径超链接路径（1 1）绝对路径）绝对路径4使用完整使用完整URL,如：如：http:/（2 2）相对路径）相对路径4链接的文件相对于当前网页的路径链接的文件相对于当前网页的路径。u 注意：链接站点内部的文件最好采用相对路径。注意：链接站点内部的文件最好采用相对路径。 网站维护与网页制作

23、 2.12.2 2.3 2.72.83 3. .创建超链接创建超链接（1 1）创建页面链接）创建页面链接（2 2）创建电子邮件链接）创建电子邮件链接 网站维护与网页制作 2.12.2 2.3 2.72.8（1 1）创建页面链接）创建页面链接 选中文本或图像，在其属性面板的选中文本或图像，在其属性面板的“链接链接”后设置。后设置。 网站维护与网页制作 2.12.2 2.3 2.72.8打开目标网页的方式打开目标网页的方式u _blank_blank：在新的浏览器窗口中打开：在新的浏览器窗口中打开u _parent_parent：在父框架或上级

24、窗口中打开：在父框架或上级窗口中打开u _self_self：在同一框架或本窗口中打开：在同一框架或本窗口中打开u _top_top：在顶层框架中打开：在顶层框架中打开 网站维护与网页制作 2.12.2 2.3 2.72.8（2 2）创建）创建EmailEmail链接链接u 选中载体；选中载体；u 插入插入| |电子邮件链接，或在属性面板的电子邮件链接，或在属性面板的“链接链接”后输入：后输入：mailto:mailto:电子邮箱地址电子邮箱地址 网站维护与网页制作 2.12.2 2.3 2.72.8模板的使用模板的使用在网页中插入音频、视频在网页中插入音频

25、、视频在网页中在网页中插入图像查看器插入图像查看器书签超链接的使用书签超链接的使用2.2 2.2 模板、多媒体元素和书签超链接的使用模板、多媒体元素和书签超链接的使用 网站维护与网页制作 2.12.2 2.3 2.72.8任务任务2 2制作照片、音乐、视频、动画、文章页面。制作照片、音乐、视频、动画、文章页面。 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.

26、2.8 网站维护与网页制作 2.12.2 2.3 2.72.8一、一、模板的使用模板的使用1.1.什么是模什么是模板板？2.2.为什么要使用模板？为什么要使用模板？3.3.如何使用模板？如何使用模板？4.4.使用模板举例使用模板举例5.5.小结小结 网站维护与网页制作 2.12.2 2.3 2.72.8一、一、模板的使用模板的使用1.1.什么是模什么是模板板？模板是一种特殊类型的文档，用于设计模板是一种特殊类型的文档，用于设计“固定的固定的”页面布局页面布局；然后用户便可以基于模板创建文档，创建的文档会继承模板的；然后用户便可以基于模板创

27、建文档，创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户是用户“可编辑的可编辑的”。 网站维护与网页制作 2.12.2 2.3 2.72.8一、一、模板的使用模板的使用2.2.为什么要使用为什么要使用模板模板？u减少重复劳动减少重复劳动u使相关的网站页面风格保持一致使相关的网站页面风格保持一致u创建创建1 1次可套用多次次可套用多次u可以一次更新多个页面可以一次更新多个页面 网站维护与网页制作 2.12.2 2.3 2.72.8一、一、模板的使用模板的使用3.3.如何

28、使用如何使用模板模板？使用模板的前提使用模板的前提：首先要将网站作为首先要将网站作为DreamweaverDreamweaver管理的一个站点管理的一个站点。使用模板的思路使用模板的思路：通常制作模板文件时，只把导航条和标题栏等各个：通常制作模板文件时，只把导航条和标题栏等各个页面共有的部分制作出来，而把其他部分留给各个页面安排设置具体内容。页面共有的部分制作出来，而把其他部分留给各个页面安排设置具体内容。制作模板文件与制作普通的网页的方法是相同的，但是在制作模板文件时，制作模板文件与制作普通的网页的方法是相同的，但是在制作模板文件时，必须设置好必须设置好“页面属性页面属性”，指定好，指定好“

29、可编辑区域可编辑区域”。 网站维护与网页制作 2.12.2 2.3 2.72.8使用模板的步骤使用模板的步骤（1 1）编辑将要作为模板的页面。）编辑将要作为模板的页面。（2 2）生成模板：文件）生成模板：文件| |另存为模板，将（另存为模板，将（1 1）保存为模板页，）保存为模板页，注意选择注意选择站点和设置模板文件名站点和设置模板文件名。（3 3）编辑模板：打开模板页，插入）编辑模板：打开模板页，插入| |模板对象模板对象| |可编辑区域，可编辑区可编辑区域，可编辑区域可有多个。域可有多个。（4 4）用模板生成页面：文件）用模板生成页面：文件| |新建，选择新建，选择“模板

30、模板”中的（中的（2 2）保存的模）保存的模板页。编辑可编辑区域。板页。编辑可编辑区域。（5 5）修改模板内容与更新站点文件）修改模板内容与更新站点文件。 网站维护与网页制作 2.12.2 2.3 .使用模板举例使用模板举例（1 1）制作照片模板）制作照片模板photo.dwtphoto.dwt 网站维护与网页制作 2.12.2 2.3 2.72.8( (2)2)套用套用photo.dwtphoto.dwt制作制作“照片照片”页面页面 网站维护与网页制作 2.12.2 2.3 2.72.8小结小结u 使用模板的好处使用模板

31、的好处u 使用模板的前提使用模板的前提u 使用模板的思路使用模板的思路u 使用模板的步骤使用模板的步骤 网站维护与网页制作 2.12.2 2.3 2.72.8二、二、插入插入音频、视频音频、视频 方法：方法：插入插入 | | 媒体媒体 | | 插件插件 切换到代码视图，设置相关属性。切换到代码视图，设置相关属性。 autostartautostart=“true”=“true”，自动播放，自动播放 Loop=“true”, Loop=“true”,循环播放循环播放 网站维护与网页制作 2.12.2 2.3 2.72.8三三. .插入图像查看器插入图像查看器（

32、1 1）准备好用到的图片（尺寸相同）准备好用到的图片（尺寸相同）（2 2）插入插入| |媒体媒体| |图像查看器图像查看器（3 3）为生成的）为生成的flashflash文件设置保存路径和名称文件设置保存路径和名称（4 4）在）在FlashFlash元素面板中设置相关参数元素面板中设置相关参数ubgColorbgColor: : 背景颜色。背景颜色。ucaptionColorcaptionColor: : 图片的标题颜色。图片的标题颜色。ucaptionFontcaptionFont: : 图片的标题字体。图片的标题字体。ucaptionSizecaptionSize: : 图片的标题字体大小

33、。图片的标题字体大小。uframeColorframeColor: : 边框颜色。边框颜色。uframeShowframeShow: : 是否显示边框。是否显示边框。uframeThicknessframeThickness: :边框宽度。边框宽度。uimageCaptionimageCaption: : 图片标题。图片标题。 网站维护与网页制作 2.12.2 2.3 2.72.8三三. .插入图像查看器插入图像查看器- -续续u imageLinksimageLinks: : 为每张图片设置链接。为每张图片设置链接。u imageLinkTargetimageLinkTar

34、get: :设置打开链接网页的方式。设置打开链接网页的方式。u imageURLsimageURLs：选择图片源文件。：选择图片源文件。u showControlsshowControls: :是否显示控制台是否显示控制台 u slideAutoPlayslideAutoPlay: :是否自动播放是否自动播放 u slideDelayslideDelay: :图片播放的延迟时间。图片播放的延迟时间。u slideLoopslideLoop: : 是否循环播放。是否循环播放。u titletitle：图像查看器的标题。：图像查看器的标题。u titleColortitleColor: : 标题颜

35、色。标题颜色。u titleFonttitleFont: : 标题字体标题字体u titleSizetitleSize: : 标题字体大小。标题字体大小。u transitionTypetransitionType: : 图片切换的模式。图片切换的模式。 网站维护与网页制作 2.12.2 2.3 2.72.8四、四、书签超链接书签超链接的使用的使用先定义书签：先定义书签：I.I.光标定位在跳转的目标位置前；光标定位在跳转的目标位置前；II.II.插入插入| |命名锚记命名锚记创建超链接指向书签：文件名创建超链接指向书签：文件名# #书签名称书签名称如果是当前网页，文件名可省略

36、。如果是当前网页，文件名可省略。 网站维护与网页制作 2.12.2 2.3 2.72.8图像热区的使用图像热区的使用CSSCSS样式的使用样式的使用2.3 2.3 图像热区、图像热区、CSSCSS样式的应用样式的应用 网站维护与网页制作 2.12.2 2.3 2.72.8任务任务3 3制作粉丝、北京粉丝、西安粉丝和济南粉丝页面；使用制作粉丝、北京粉丝、西安粉丝和济南粉丝页面；使用CSSCSS样式格样式格式化所有静态页面。式化所有静态页面。 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.

37、2.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8 网站维护与网页制作 2.12.2 2.3 2.72.8一、图像热区的使用一、图像热区的使用u图像热区图像热区是在一幅图像中划分出几个不同的几何图形区域，然后分是在一幅图像中划分出几个不同的几何图形区域，然后分别为这些区域建立超链接。别为这些区域建立超链接。u创建创建图像热区图像热区的步骤：的步骤：插入图像并选中；插入图像并选中；在属性面板上选择热区工具并在图像上绘制热区在属性面板上选择热区工具并在图像上

38、绘制热区选定热区，在属性面板中设置链接目标选定热区，在属性面板中设置链接目标 网站维护与网页制作 2.12.2 2.3 2.72.8二、二、CSSCSS样式的使用样式的使用1.1.CSSCSS样式的概念样式的概念2.2.CSSCSS样式的三种存在方式样式的三种存在方式3.3.直接插入式直接插入式4.4.内嵌样式内嵌样式5.5.CSSCSS样式的类型样式的类型6.6.CSSCSS样式定义样式定义7.7.外部文件方式外部文件方式8.8.小结小结 网站维护与网页制作 2.12.2 2.3 2.72.8二、二、CSSCSS样式的使用样式的使用 1 1. CSS. C

39、SS样式的概念样式的概念 CSSCSS，翻译为翻译为“层叠样式表层叠样式表”，主要用来进行页面风格设计，主要用来进行页面风格设计。利用。利用CSSCSS不仅可以控制一个页面中的元素格式，而且可以控制不仅可以控制一个页面中的元素格式，而且可以控制多个页面中的元素格式。多个页面中的元素格式。 网站维护与网页制作 2.12.2 2.3 2.72.82 2.CSS.CSS样式的三种存在方式样式的三种存在方式 根据作用范围不同，根据作用范围不同，CSSCSS样式有三种存在方式：样式有三种存在方式：（1 1）直接插入式直接插入式（2 2）内嵌样式内嵌样式（3 3）外部文件方式外部文件方式

40、 网站维护与网页制作 2.12.2 2.3 2.72.83 3. .直接插入式直接插入式u 作用：仅对所定义的标记起作用。作用：仅对所定义的标记起作用。u 用法：代码视图下，在标记中插入用法：代码视图下，在标记中插入stylestyle属性。属性。u 格式：格式： ; 如：如：u 注意：注意：basefontbasefont、paramparam、scriptscript不能使用不能使用stylestyle属性。属性。观看示例观看示例 网站维护与网页制作 2.12.2 2.3 2.72.84 4. .内嵌样式内嵌样式（1 1）用法：定义在）用法：定义在和和之

41、间，其范围仅限于本网页之间，其范围仅限于本网页。（2 2）格式：）格式：style type=“text/”!-观看示例观看示例:未格式未格式观看示例：套用格式后观看示例：套用格式后 网站维护与网页制作 2.12.2 2.3 2.72.8（3 3）使用内嵌样式的方法）使用内嵌样式的方法u 写代码：先在写代码：先在和和之间添加之间添加stylestyle代码，然后在具体的代码，然后在具体的标记中应用样式。标记中应用样式。u 使用使用CSSCSS样式面板样式面板( (需掌握需掌握) )。* *1.1.窗口窗口| |csscss样式样式* *2.2.新建新建csscss规则规则*

42、*3.3.设置样式类型，定义在设置样式类型，定义在“仅对该文档仅对该文档”* *4.4.设置规则设置规则* *5.5.选中元素，套用样式（在属性面板的选中元素，套用样式（在属性面板的“样式样式”或或“类类”下拉列表中下拉列表中选择样式名称或在选择样式名称或在csscss样式面板中右击相应的样式名称选择样式面板中右击相应的样式名称选择“套用套用”。）。） 网站维护与网页制作 2.12.2 2.3 2.72.8（4 4）使用內嵌样式举例）使用內嵌样式举例u 举例举例. .xiaobiaotixiaobiaoti（类）（类） 、p p（标签）（标签）u . .xiaobiaotix

43、iaobiaoti: :宋体、宋体、18px18px、粗体、粗体、#4E6735#4E6735、文本对齐（居中）、文本对齐（居中）、空格保留，定义在当前文档。、空格保留，定义在当前文档。u p p：宋体、：宋体、14px14px、行高、行高20px20px、黑色、左对齐、文字缩进、黑色、左对齐、文字缩进28px28px，定，定义在当前文档。义在当前文档。 网站维护与网页制作 2.12.2 2.3 2.72.85 5. CSS. CSS样式的类型样式的类型（1 1）类类：根据用户的需要创建一个：根据用户的需要创建一个CSSCSS样式属性，可应用到文字样式属性，可应用到文字，图片

44、等网页元素中；样式的名称必须以，图片等网页元素中；样式的名称必须以“ ”开头。先定义后开头。先定义后套用。套用。（2 2）标签标签：重定义：重定义HTMLHTML标记的默认格式。只需定义，使用到该标标记的默认格式。只需定义，使用到该标记时会自动套用格式。记时会自动套用格式。（3 3）高级高级：为某个标记组合定义样式，可用于定义超链接的：为某个标记组合定义样式，可用于定义超链接的4 4种种状态的样式。只需定义，使用到该标记时会自动套用格式。状态的样式。只需定义，使用到该标记时会自动套用格式。 网站维护与网页制作 2.12.2 2.3 2.72.8CSSCSS样式举例样式举例 .

45、image.image（类）（类） : :方框方框 宽宽80px80px，高，高150px150px高级高级: : uA:linkA:link （文本超链接文本超链接）：宋体、）：宋体、16px16px、黑色、无修饰、黑色、无修饰uA:activeA:active （激活超链接激活超链接）: :宋体、宋体、16px16px、 # #FF0000FF0000、删除线、删除线uA:hoverA:hover （鼠标悬停在超链接鼠标悬停在超链接）：华文行楷、）：华文行楷、16px16px、#4A37AB#4A37AB、下、下划线划线uA:visitedA:visited （访问过的超链接访问过的超链接

46、）：宋体、）：宋体、16px16px、黑色、无修饰、黑色、无修饰 网站维护与网页制作 2.12.2 2.3 2.72.8 6 6.CSS.CSS样式定义样式定义 （1 1）类型：设置文本或段落的样式）类型：设置文本或段落的样式（2 2）背景：设置元素的背景色或背景图像）背景：设置元素的背景色或背景图像（3 3）区块：设置元素的对齐方式、放置位置）区块：设置元素的对齐方式、放置位置（4 4）方框：控制元素在页面上的放置方式，如图片、表格的大小）方框：控制元素在页面上的放置方式，如图片、表格的大小，表格的填充，页面的边界等。，表格的填充，页面的边界等。（5 5）边框：定义元素周围

47、的边框的设置（如表格的边框的宽度、）边框：定义元素周围的边框的设置（如表格的边框的宽度、颜色和样式）。颜色和样式）。 网站维护与网页制作 2.12.2 2.3 2.72.8 6 6.CSS.CSS样式定义样式定义- -续续（6 6）列表：设置列表（如项目符号列表、编号列表）的样式）列表：设置列表（如项目符号列表、编号列表）的样式 （7 7）定位：定义层的默认显示样式。）定位：定义层的默认显示样式。 （8 8）扩展：包括过滤器、分页和光标选项。）扩展：包括过滤器、分页和光标选项。4对样式所控制的对象应用特殊效果对样式所控制的对象应用特殊效果4可提供分页设置可提供分页设置4改变指

48、针图像改变指针图像 网站维护与网页制作 2.12.2 2.3 2.72.87 7. .外部文件方式外部文件方式（1 1）作用：可在每个网页中引用，可使整个网站的网页在风格上）作用：可在每个网页中引用，可使整个网站的网页在风格上保持一致。保持一致。（2 2）用法：将）用法：将csscss写成一个文件的方式，在网页头部引用该文件写成一个文件的方式，在网页头部引用该文件。注意：样式表文件的扩展名为注意：样式表文件的扩展名为. .csscss。应用格式前应用格式前应用格式后应用格式后 网站维护与网页制作 2.12.2 2.3 2.72.8（3 3）使用外部文件方式的

49、方法（）使用外部文件方式的方法（ 需掌握）需掌握）* *1.1.新建新建csscss规则时，定义在规则时，定义在“新建样式表文件新建样式表文件”或已有的样式表文件或已有的样式表文件* *2.2.打开需应用样式的网页，单击打开需应用样式的网页，单击“附加样式表附加样式表”按钮按钮* *3.3.选择样式表文件选择样式表文件* *4.4.链接或导入链接或导入* *5.“5.“类类”样式需手工套用，样式需手工套用，“标签标签”和和“高级高级”自动套用自动套用 网站维护与网页制作 2.12.2 2.3 2.72.8（4 4）使用外部文件方式举例）使用外部文件方式举例u . .dabia

50、otidabiaoti：宋体、：宋体、36px36px、粗体、黑色、垂直居中、水平居中，、粗体、黑色、垂直居中、水平居中，定义在定义在style.cssstyle.css中。中。u bodybody：在：在“背景背景”中设置背景图像，在中设置背景图像，在“方框方框”中设置中设置“上边上边界界”为为0 0，定义在，定义在style.cssstyle.css中。中。 网站维护与网页制作 2.12.2 2.3 2.72.8小结小结u 统一整个站点风格，用外部文件样式；统一某个网页风格，用内嵌统一整个站点风格，用外部文件样式；统一某个网页风格，用内嵌样式；调整网页内部某个标记时，用直

51、接插入式。样式；调整网页内部某个标记时，用直接插入式。u 三种样式可在同一网页中同时使用，如果其设置的样式发生冲突，三种样式可在同一网页中同时使用，如果其设置的样式发生冲突，则按优先级起作用。则按优先级起作用。u 优先级别：直接插入式优先级别：直接插入式 内嵌样式内嵌样式 外部文件方式外部文件方式 网站维护与网页制作 2.12.2 2.3 2.4 图层的使用图层的使用图层可用于网页布局图层可用于网页布局图层可放在网页中的任意位置图层可放在网页中的任意位置图层中可以插入任意元素图层中可以插入任意元素图层可以移动、重叠、显示或隐藏图层可以移动、重叠、显示或隐藏

52、使用图层，可以制作出三维效果使用图层，可以制作出三维效果图层和时间轴配合，可以制作动画图层和时间轴配合，可以制作动画 网站维护与网页制作 2.12.2 2.3 2.72.8图层应用实例图层应用实例- -三维效果三维效果观看页面观看页面 网站维护与网页制作 2.12.2 2.3 2.72.81 1 创建层创建层插入层：插入层：“插入插入”|“|“布局对象布局对象”|“|“层层”绘制层：绘制层：“布局布局”面板面板| |“描绘层描绘层”按钮按钮u单击单击“描绘描绘层层”按钮后，按下按钮后，按下【CtrlCtrl】键不放，可连续绘制多个层键不放，可连续绘制多个层。

53、 网站维护与网页制作 2.12.2 2.3 .层重叠层重叠 u 在层控制面板上将在层控制面板上将“防止重叠防止重叠”选项取消选中，可创建重叠的层。否选项取消选中，可创建重叠的层。否则，将无法创建重叠的层。则，将无法创建重叠的层。u 层的最大优势之一就是可以重叠，层的最大优势之一就是可以重叠，层的重叠次序是用层的重叠次序是用“z z轴轴”来表示来表示。“z轴轴”上的值可正可负，也可为上的值可正可负，也可为0，数值大的层在上面数值大的层在上面。 网站维护与网页制作 2.12.2 2.3 .层嵌套层嵌套 先在文档中插入一个层。先

54、在文档中插入一个层。将光标置于该层内，然后将光标置于该层内，然后“插入插入”|“|“布局对象布局对象”|“|“层层” 网站维护与网页制作 2.12.2 2.3 2.72.84 4 选择层选择层单击层的激活标志单击层的激活标志。单击单击【窗口窗口】| |【层层】命令，打开命令，打开“层层”面板，面板，在在“层层”面板中单面板中单击层的名称击层的名称，这种方法也适用于选择隐藏的层。，这种方法也适用于选择隐藏的层。 单击层边界，按住单击层边界，按住【ShiftShift】可以同时选定多个层。可以同时选定多个层。在层面板中单击层的名称，按住在层面板中单击层的名称，按住【ShiftSh

55、ift】可以同时选定多个层。可以同时选定多个层。 网站维护与网页制作 2.12.2 2.3 2.72.85 5 插入层对象插入层对象u 当光标移入层内时，可以插入网页元素，如文本、图像当光标移入层内时，可以插入网页元素，如文本、图像、层、表单、表格等。在层中插入网页元素的方法与在、层、表单、表格等。在层中插入网页元素的方法与在编辑窗口中插入方法一样。编辑窗口中插入方法一样。 网站维护与网页制作 2.12.2 2.3 2.72.86 6 移动层移动层n选定层，按住鼠标左键不放拖动。选定层，按住鼠标左键不放拖动。n选定层，按键盘上的四个选定层，按键盘上的四个方向

56、方向键，键，每按一次，移动每按一次，移动1 1个像素，如果同时个像素，如果同时按住按住【ShiftShift】键，每次可移动键，每次可移动1010个个像素的距离。像素的距离。 网站维护与网页制作 2.12.2 2.3 2.72.87 7 对齐层对齐层u 层的对齐方式包括左对齐、右对齐、顶端对齐和底部对齐。执行对层的对齐方式包括左对齐、右对齐、顶端对齐和底部对齐。执行对齐方式后，各层将以齐方式后，各层将以最后一个最后一个选定的层为基准对齐。选定的层为基准对齐。u 先按住先按住“Shift”Shift”键的同时用鼠标选择层，然后单击菜单键的同时用鼠标选择层，然后单击菜单【修改修改

57、】| |【对齐对齐】中相应的对齐方式或按中相应的对齐方式或按“Ctrl+Ctrl+相应的方向相应的方向”键。键。 网站维护与网页制作 2.12.2 2.3 2.72.88 8 设置层属性设置层属性u单个层的属性单个层的属性 “层编号层编号”：层的名称，具有唯一性。：层的名称，具有唯一性。 “左左”和和“上上”：层相对于页面或父层的左上角：层相对于页面或父层的左上角相对位置。相对位置。 “宽宽”和和“高高”：层的宽度和高度，如果层中内：层的宽度和高度，如果层中内容超过指定大小，这些值被忽略。容超过指定大小，这些值被忽略。 “Z轴轴”：层的重叠顺序。编号大的层出现在编：层的重叠顺

58、序。编号大的层出现在编号小的层上面。号小的层上面。 网站维护与网页制作 2.12.2 2.3 2.72.8单个层的属性单个层的属性“可见性可见性”：层的初始显示状态，包括显示：层的初始显示状态，包括显示Defaule（默认）、继承默认）、继承Inherit 、可见可见Visible、隐藏隐藏Hidden四种。四种。“背景图像背景图像”：指定背景图像。：指定背景图像。“背景颜色背景颜色”：指定背景颜色。：指定背景颜色。 网站维护与网页制作 2.12.2 2.3 2.72.8多个层的属性多个层的属性u 当选中多个层时，层属性面板将显示文本属性和普通当选中多个层时

59、，层属性面板将显示文本属性和普通层属性的子集，它可以允许一次修改多个层。层属性的子集，它可以允许一次修改多个层。 网站维护与网页制作 2.12.2 2.3 2.72.89 9 层的应用层的应用u 在网页设计中，在网页设计中，层能方便地定位页面元素层能方便地定位页面元素、显示或隐藏网页中的一、显示或隐藏网页中的一些内容。层除了象表格一样可以设定背景、设定位置、自由移动、些内容。层除了象表格一样可以设定背景、设定位置、自由移动、控制显示外，还可以轻松控制显示外，还可以轻松建立三维效果建立三维效果，我们可以使网页中的对象，我们可以使网页中的对象在垂直方向互相重叠，再在垂直方向互相重

60、叠，再配合时间轴的应用做出既美观又具有动感配合时间轴的应用做出既美观又具有动感效果的网页效果的网页。 网站维护与网页制作 2.12.2 2.3 2.72.8图层的应用图层的应用- -背景音乐背景音乐1.1.插入插入1 1个图层个图层2.2.在图层中插入插件（在图层中插入插件（插入插入| |媒体媒体| |插件插件）3.3.设置插件能够自动播放设置插件能够自动播放4.4.设置图层的可见性为设置图层的可见性为hiddenhidden 网站维护与网页制作 2.12.2 2.3 2.72.8补充：插入补充：插入flashflash按钮按钮u 在插入之前，必须先保存网页