第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件.pptx

1、 清华大学出版社清华大学出版社 第8章使用CSS美化网页中文版Dreamweaver CS6从入门到精通中文版Dreamweaver CS6网页制作从入门到精通本章导读从入门到精通清华大学出版社2认识层叠样式表12创建层叠样式表3定义层叠样式表属性4应用并管理层叠样式表中文版Dreamweaver CS6从入门到精通8.1 认识层叠样式表层叠样式表即CSS样式，其全称为Cascading Style Sheets，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。中文版Dreamweaver CS6从入门到精通中文版Dreamweaver CS6网页制作从入门到精通中文版Dre

2、amweaver CS6网页制作从入门到精通8.2.2 创建层叠样式表从入门到精通清华大学出版社6认识认识层层CSS样式的类型样式的类型1新建新建内部内部CSS样式样式2链接链接外部外部CSS样式表样式表3中文版Dreamweaver CS6网页制作从入门到精通1认识层CSS样式的类型从入门到精通清华大学出版社7 在“新建CSS规则”对话框的“选择器类型”下拉列表框中可以对创建的CSS类型进行设置，Dreamweaver CS6中一共包括类、ID、标签和复合内容4种。类型类型类类ID标签标签复合复合中文版Dreamweaver CS6网页制作从入门到精通该样式可用于HTML中的任何元素，定义该

3、类型的CSS样式时，需在其名称前加上“.”符号。Dreamweaver CS6会为该类型的CSS样式的HTML代码中添加class属性。类从入门到精通清华大学出版社8 中文版Dreamweaver CS6网页制作从入门到精通该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，ID类型的CSS样式，其名称前应添加“#”符号。ID从入门到精通清华大学出版社9中文版Dreamweaver CS6网页制作从入门到精通该样式用于重新定义HTML元素，只需新建该类型的CSS样式后，即可直接将其应用到网页中。标签从入门到精通清华大学出版社10中文版Dreamweaver CS6网页制作从入门到精通该样

4、式用于在已创建的CSS样式基础上，创建或改变一个或多个标签、类或ID的复合规则样式表，使包含在该标签中的内容遵循定义的CSS规则进行显示。复合内容从入门到精通清华大学出版社11中文版Dreamweaver CS6网页制作从入门到精通内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文件而存在的形式。在Dreamweaver CS6中可以直接在“CSS样式”面板中新建任一类型的内部层叠样式，新建后的样式存放在HTML文件的头部，即与 标签内，并以开始，结束。2新建内部CSS样式从入门到精通清华大学出版社12 中文版Dreamweaver CS6网页制作从入门到精通在Dreamweaver

5、 CS6中可以链接已经创建好的CSS文件，使其应用到网页中。3链接外部CSS样式表从入门到精通清华大学出版社13 中文版Dreamweaver CS6从入门到精通8.3 定义层叠样式表属性8.3.1 设置类型属性8.3.2 设置背景属性8.3.3 设置区块属性8.3.4 设置方框属性8.3.6 设置列表属性8.3.7 设置定位属性8.3.8 设置扩展属性8.3.5 设置边框属性8.3.9 设置过渡属性中文版Dreamweaver CS6网页制作从入门到精通CSS的“类型”属性主要用于设置文本的样式和格式，只要在CSS规则定义对话框的“分类”列表框中选择“类型”选项，即可在对话框右侧进行设置。8

6、.3.1 设置类型属性从入门到精通清华大学出版社15 中文版Dreamweaver CS6网页制作从入门到精通“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定义对话框的“分类”列表框中选择“背景”选项，即可在对话框右侧对其进行设置。8.3.2 设置背景属性从入门到精通清华大学出版社16 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在对话框右侧可对区块的样式进行设置。8.3.3 设置区块属性从入门到精通清华大学出版社17 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框的“分类”列表框

7、中选择“方框”选项，在对话框右侧可对方框的样式进行设置。8.3.4 设置方框属性从入门到精通清华大学出版社18 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在对话框右侧可对边框的样式进行设置。8.3.5 设置边框属性从入门到精通清华大学出版社19 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在对话框右侧可对列表的样式进行设置。8.3.6 设置列表属性从入门到精通清华大学出版社20 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话

8、框的“分类”列表框中选择“定位”选项，在对话框右侧可对定位的样式进行设置。8.3.7 设置定位属性从入门到精通清华大学出版社21 中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框的“分类”列表框中选择“扩展”选项，在对话框右侧可对扩展的样式进行设置。8.3.8 设置扩展属性从入门到精通清华大学出版社22 中文版Dreamweaver CS6网页制作从入门到精通在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可对过渡样式进行设置。8.3.9 设置过渡属性从入门到精通清华大学出版社23中文版Dreamweaver CS6从入门到精通8.4 应用并管理层叠样式

9、表8.4.3 删除层叠样式表删除层叠样式表应用应用层叠样式表层叠样式表使用使用多边形套索工具多边形套索工具8.4.18.4.28.4.3中文版Dreamweaver CS6网页制作从入门到精通8.4.1 应用层叠样式表从入门到精通清华大学出版社25 使用网页元素的快捷菜单应用CSS样式123使用网页元素的“属性”面板应用CSS样式在“CSS样式”面板中应用层叠样式中文版Dreamweaver CS6网页制作从入门到精通在Dreamweaver CS6中选中要应用样式的网页元素后，在其上单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”命令，在弹出的子菜单中选择相应的CSS样式即可。1使用网页元

10、素的快捷菜单应用CSS样式从入门到精通 清华大学出版社26 中文版Dreamweaver CS6网页制作从入门到精通选中要应用样式的网页元素后，在其“属性”面板的“样式”下拉列表框（其他网页元素如表格、图像等则是“类”下拉列表框）中选择需要的选项即可。2使用网页元素的“属性”面板应用CSS样式从入门到精通清华大学出版社27中文版Dreamweaver CS6网页制作从入门到精通在网页选中要应用样式的网页元素后，在“CSS样式”面板中要应用的CSS样式名称上单击鼠标右键，在弹出的快捷菜单中选择“应用”命令即可。3在“CSS样式”面板中应用层叠样式从入门到精通清华大学出版社28 中文版Dreamw

11、eaver CS6网页制作从入门到精通8.4.2 编辑层叠样式从入门到精通清华大学出版社29在在CSS规则定义对话框中修改规则定义对话框中修改1在在“CSS样式样式”面板中修改面板中修改2中文版Dreamweaver CS6网页制作从入门到精通在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开对应的CSS规则定义对话框，重新对其参数进行定义即可。1在CSS规则定义对话框中修改从入门到精通清华大学出版社30中文版Dreamweaver CS6网页制作从入门到精通如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其进行修改。方法是：在“CSS样式”面板中选择需要进行修改的样式，在

12、“属性”栏中直接对其进行设置即可。2在“CSS样式”面板中修改从入门到精通清华大学出版社31 中文版Dreamweaver CS6网页制作从入门到精通如果网页中存在未使用的CSS样式，可对其进行删除。只要在“CSS样式”面板中选择要删除的CSS样式，再单击“删除CSS规则”按钮 即可。8.4.3 删除层叠样式表从入门到精通清华大学出版社32中文版Dreamweaver CS6从入门到精通8.5 提高实例美化鸿宇装饰页面本例将对制作好的“鸿宇装饰”网页的首页进行美化。通过链接外部CSS样式文件，为网页中已定义好的标签应用样式，然后再根据网页中的具体内容创建层叠样式表，将其应用到需要的部分，最后再

13、通过浏览器浏览美化网页后的效果。中文版Dreamweaver CS6网页制作从入门到精通8.5.1 行业分析从入门到精通清华大学出版社34使用层叠样式表美化网页是网页制作中必不可少的步骤，通过它可以对网页的整体风格进行统一，确定网页的色调，也可以对网页中的每个部分进行定义，使其效果更为丰富。使用层叠样式表的方法较为简单，只需对其进行定义并将其应用到网页标签中即可，但在进行层叠样式表的设置时，应掌握一些设置的方法和技巧，以避免花费太多时间，却仍不得要领的情况。CSS样式的优先级样式的优先级文字文字水平居中水平居中图片图片宽度自适应宽度自适应禁止禁止自动换行自动换行使用使用图片替换文本图片替换文本

14、中文版Dreamweaver CS6网页制作从入门到精通8.5.2 操作思路从入门到精通清华大学出版社35打开网页链接外部CSS样式文件修改CSS样式操作思路1234新建并应用CSS样式中文版Dreamweaver CS6从入门到精通8.6 提高练习美化红驴旅行网网页打开网页链接外部CSS样式表修改CSS样式新建并应用CSS样式中文版Dreamweaver CS6从入门到精通8.7 知识问答问：我想将图像设置一种线性透明的效果，如何使用CSS实现呢？问：我想将内部样式表中的样式保存为外部样式表，该如何操作呢？中文版Dreamweaver CS6从入门到精通知识关联：CSS的语法结构在Dreamweaver中可以直接通过新建CSS样式来创建层叠样式，但对于较为熟悉CSS的用户而言，他们一般采用手写的方式来进行定义。此时就需要对CSS样式的语法结构有清楚的认识。CSS的语法结构由三部分组成，分别是选择符（Selector）、属性（property）和值（value）。在书写时可以采用如下的方式进行。选择符 body属性：值；Background-color：red；