第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件_第1页
第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件_第2页
第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件_第3页
第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件_第4页
第8章使用CSS美化网页 中文版Dreamweaver CS6网页制作课件_第5页
已阅读5页，还剩71页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

·清华大学出版社·第8章使用CSS美化网页中文版DreamweaverCS6从入门到精通·清华大学出版社·第8章中文版DreamweaverC本章导读从入门到精通清华大学出版社2认识层叠样式表12创建层叠样式表3定义层叠样式表属性4应用并管理层叠样式表本章导读从入门到精通清华大学出版社2认识层叠样式表12创建层8.1认识层叠样式表层叠样式表即CSS样式，其全称为CascadingStyleSheets，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。8.1认识层叠样式表层叠样式表即CSS样式，其全称为Ca第8章使用CSS美化网页中文版DreamweaverCS6网页制作课件第8章使用CSS美化网页中文版DreamweaverCS6网页制作课件8.2.2创建层叠样式表从入门到精通清华大学出版社6认识层CSS样式的类型1新建内部CSS样式2链接外部CSS样式表38.2.2创建层叠样式表从入门到精通清华大学出版社6认识1．认识层CSS样式的类型从入门到精通清华大学出版社7

在“新建CSS规则”对话框的“选择器类型”下拉列表框中可以对创建的CSS类型进行设置，DreamweaverCS6中一共包括类、ID、标签和复合内容4种。类型类ID标签复合1．认识层CSS样式的类型从入门到精通清华大学出版社7该样式可用于HTML中的任何元素，定义该类型的CSS样式时，需在其名称前加上“.”符号。DreamweaverCS6会为该类型的CSS样式的HTML代码中添加class属性。类从入门到精通清华大学出版社8

该样式可用于HTML中的任何元素，定义该类型的CSS样式时，该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，ID类型的CSS样式，其名称前应添加“#”符号。ID从入门到精通清华大学出版社9该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，I该样式用于重新定义HTML元素，只需新建该类型的CSS样式后，即可直接将其应用到网页中。标签从入门到精通清华大学出版社10该样式用于重新定义HTML元素，只需新建该类型的CSS样式后该样式用于在已创建的CSS样式基础上，创建或改变一个或多个标签、类或ID的复合规则样式表，使包含在该标签中的内容遵循定义的CSS规则进行显示。复合内容从入门到精通清华大学出版社11该样式用于在已创建的CSS样式基础上，创建或改变一个或多个标内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文件而存在的形式。在DreamweaverCS6中可以直接在“CSS样式”面板中新建任一类型的内部层叠样式，新建后的样式存放在HTML文件的头部，即<head>与<head>标签内，并以<style>开始，</style>结束。2．新建内部CSS样式从入门到精通清华大学出版社12

内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文在DreamweaverCS6中可以链接已经创建好的CSS文件，使其应用到网页中。3．链接外部CSS样式表从入门到精通清华大学出版社13

在DreamweaverCS6中可以链接已经创建好的CSS从入门到精通清华大学出版社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设置过渡属性从入门到精通清华大学出版社8.3定义层叠样式表属性8.3CSS的“类型”属性主要用于设置文本的样式和格式，只要在CSS规则定义对话框的“分类”列表框中选择“类型”选项，即可在对话框右侧进行设置。8.3.1设置类型属性从入门到精通清华大学出版社15

CSS的“类型”属性主要用于设置文本的样式和格式，只要在CS“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定义对话框的“分类”列表框中选择“背景”选项，即可在对话框右侧对其进行设置。8.3.2设置背景属性从入门到精通清华大学出版社16

“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在对话框右侧可对区块的样式进行设置。8.3.3设置区块属性从入门到精通清华大学出版社17

在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在在CSS规则定义对话框的“分类”列表框中选择“方框”选项，在对话框右侧可对方框的样式进行设置。8.3.4设置方框属性从入门到精通清华大学出版社18

在CSS规则定义对话框的“分类”列表框中选择“方框”选项，在在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在对话框右侧可对边框的样式进行设置。8.3.5设置边框属性从入门到精通清华大学出版社19

在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在对话框右侧可对列表的样式进行设置。8.3.6设置列表属性从入门到精通清华大学出版社20

在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在在CSS规则定义对话框的“分类”列表框中选择“定位”选项，在对话框右侧可对定位的样式进行设置。8.3.7设置定位属性从入门到精通清华大学出版社21

在CSS规则定义对话框的“分类”列表框中选择“定位”选项，在在CSS规则定义对话框的“分类”列表框中选择“扩展”选项，在对话框右侧可对扩展的样式进行设置。8.3.8设置扩展属性从入门到精通清华大学出版社22

在CSS规则定义对话框的“分类”列表框中选择“扩展”选项，在在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可对过渡样式进行设置。8.3.9设置过渡属性从入门到精通清华大学出版社23在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可从入门到精通清华大学出版社8.4应用并管理层叠样式表8.4.3删除层叠样式表应用层叠样式表使用多边形套索工具8.4.18.4.28.4.3从入门到精通清华大学出版社8.4应用并管理层叠样式表8.8.4.1应用层叠样式表从入门到精通清华大学出版社25

使用网页元素的快捷菜单应用CSS样式123使用网页元素的“属性”面板应用CSS样式在“CSS样式”面板中应用层叠样式8.4.1应用层叠样式表从入门到精通清华大学出版社25在DreamweaverCS6中选中要应用样式的网页元素后，在其上单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”命令，在弹出的子菜单中选择相应的CSS样式即可。1．使用网页元素的快捷菜单应用CSS样式从入门到精通

清华大学出版社26

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

在网页选中要应用样式的网页元素后，在“CSS样式”面板中要应8.4.2编辑层叠样式从入门到精通清华大学出版社29在CSS规则定义对话框中修改1在“CSS样式”面板中修改28.4.2编辑层叠样式从入门到精通清华大学出版社29在C在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开对应的CSS规则定义对话框，重新对其参数进行定义即可。1．在CSS规则定义对话框中修改从入门到精通清华大学出版社30在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其进行修改。方法是：在“CSS样式”面板中选择需要进行修改的样式，在“属性”栏中直接对其进行设置即可。2．在“CSS样式”面板中修改从入门到精通清华大学出版社31

如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其如果网页中存在未使用的CSS样式，可对其进行删除。只要在“CSS样式”面板中选择要删除的CSS样式，再单击“删除CSS规则”按钮即可。8.4.3删除层叠样式表从入门到精通清华大学出版社32如果网页中存在未使用的CSS样式，可对其进行删除。只要在“C从入门到精通清华大学出版社338.5提高实例——美化鸿宇装饰页面本例将对制作好的“鸿宇装饰”网页的首页进行美化。通过链接外部CSS样式文件，为网页中已定义好的标签应用样式，然后再根据网页中的具体内容创建层叠样式表，将其应用到需要的部分，最后再通过浏览器浏览美化网页后的效果。从入门到精通清华大学出版社338.5提高实例——美化鸿宇8.5.1行业分析从入门到精通清华大学出版社34使用层叠样式表美化网页是网页制作中必不可少的步骤，通过它可以对网页的整体风格进行统一，确定网页的色调，也可以对网页中的每个部分进行定义，使其效果更为丰富。使用层叠样式表的方法较为简单，只需对其进行定义并将其应用到网页标签中即可，但在进行层叠样式表的设置时，应掌握一些设置的方法和技巧，以避免花费太多时间，却仍不得要领的情况。CSS样式的优先级文字水平居中图片宽度自适应禁止自动换行使用图片替换文本8.5.1行业分析从入门到精通清华大学出版社34使用层叠8.5.2操作思路从入门到精通清华大学出版社35打开网页链接外部CSS样式文件修改CSS样式操作思路1234新建并应用CSS样式8.5.2操作思路从入门到精通清华大学出版社35打开网页从入门到精通清华大学出版社368.6提高练习——美化红驴旅行网网页打开网页链接外部CSS样式表修改CSS样式新建并应用CSS样式从入门到精通清华大学出版社368.6提高练习——美化红驴从入门到精通清华大学出版社378.7知识问答问：我想将图像设置一种线性透明的效果，如何使用CSS实现呢？问：我想将内部样式表中的样式保存为外部样式表，该如何操作呢？从入门到精通清华大学出版社378.7知识问答问：我想将图从入门到精通清华大学出版社知识关联：CSS的语法结构在Dreamweaver中可以直接通过新建CSS样式来创建层叠样式，但对于较为熟悉CSS的用户而言，他们一般采用手写的方式来进行定义。此时就需要对CSS样式的语法结构有清楚的认识。CSS的语法结构由三部分组成，分别是选择符（Selector）、属性（property）和值（value）。在书写时可以采用如下的方式进行。选择符{body{属性：值；Background-color：red；}}从入门到精通清华大学出版社知识关联：CSS的语法结构在Dre·清华大学出版社·第8章使用CSS美化网页中文版DreamweaverCS6从入门到精通·清华大学出版社·第8章中文版DreamweaverC本章导读从入门到精通清华大学出版社40认识层叠样式表12创建层叠样式表3定义层叠样式表属性4应用并管理层叠样式表本章导读从入门到精通清华大学出版社2认识层叠样式表12创建层8.1认识层叠样式表层叠样式表即CSS样式，其全称为CascadingStyleSheets，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。8.1认识层叠样式表层叠样式表即CSS样式，其全称为Ca第8章使用CSS美化网页中文版DreamweaverCS6网页制作课件第8章使用CSS美化网页中文版DreamweaverCS6网页制作课件8.2.2创建层叠样式表从入门到精通清华大学出版社44认识层CSS样式的类型1新建内部CSS样式2链接外部CSS样式表38.2.2创建层叠样式表从入门到精通清华大学出版社6认识1．认识层CSS样式的类型从入门到精通清华大学出版社45

在“新建CSS规则”对话框的“选择器类型”下拉列表框中可以对创建的CSS类型进行设置，DreamweaverCS6中一共包括类、ID、标签和复合内容4种。类型类ID标签复合1．认识层CSS样式的类型从入门到精通清华大学出版社7该样式可用于HTML中的任何元素，定义该类型的CSS样式时，需在其名称前加上“.”符号。DreamweaverCS6会为该类型的CSS样式的HTML代码中添加class属性。类从入门到精通清华大学出版社46

该样式可用于HTML中的任何元素，定义该类型的CSS样式时，该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，ID类型的CSS样式，其名称前应添加“#”符号。ID从入门到精通清华大学出版社47该样式只能应用于惟一的标签，且这个标签的ID必须是惟一的，I该样式用于重新定义HTML元素，只需新建该类型的CSS样式后，即可直接将其应用到网页中。标签从入门到精通清华大学出版社48该样式用于重新定义HTML元素，只需新建该类型的CSS样式后该样式用于在已创建的CSS样式基础上，创建或改变一个或多个标签、类或ID的复合规则样式表，使包含在该标签中的内容遵循定义的CSS规则进行显示。复合内容从入门到精通清华大学出版社49该样式用于在已创建的CSS样式基础上，创建或改变一个或多个标内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文件而存在的形式。在DreamweaverCS6中可以直接在“CSS样式”面板中新建任一类型的内部层叠样式，新建后的样式存放在HTML文件的头部，即<head>与<head>标签内，并以<style>开始，</style>结束。2．新建内部CSS样式从入门到精通清华大学出版社50

内部CSS样式是指存放在网页代码中，并非以单独的层叠样式表文在DreamweaverCS6中可以链接已经创建好的CSS文件，使其应用到网页中。3．链接外部CSS样式表从入门到精通清华大学出版社51

在DreamweaverCS6中可以链接已经创建好的CSS从入门到精通清华大学出版社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设置过渡属性从入门到精通清华大学出版社8.3定义层叠样式表属性8.3CSS的“类型”属性主要用于设置文本的样式和格式，只要在CSS规则定义对话框的“分类”列表框中选择“类型”选项，即可在对话框右侧进行设置。8.3.1设置类型属性从入门到精通清华大学出版社53

CSS的“类型”属性主要用于设置文本的样式和格式，只要在CS“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定义对话框的“分类”列表框中选择“背景”选项，即可在对话框右侧对其进行设置。8.3.2设置背景属性从入门到精通清华大学出版社54

“背景”属性可以对网页的背景样式进行设置，只要在CSS规则定在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在对话框右侧可对区块的样式进行设置。8.3.3设置区块属性从入门到精通清华大学出版社55

在CSS规则定义对话框的“分类”列表框中选择“区块”选项，在在CSS规则定义对话框的“分类”列表框中选择“方框”选项，在对话框右侧可对方框的样式进行设置。8.3.4设置方框属性从入门到精通清华大学出版社56

在CSS规则定义对话框的“分类”列表框中选择“方框”选项，在在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在对话框右侧可对边框的样式进行设置。8.3.5设置边框属性从入门到精通清华大学出版社57

在CSS规则定义对话框的“分类”列表框中选择“边框”选项，在在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在对话框右侧可对列表的样式进行设置。8.3.6设置列表属性从入门到精通清华大学出版社58

在CSS规则定义对话框的“分类”列表框中选择“列表”选项，在在CSS规则定义对话框的“分类”列表框中选择“定位”选项，在对话框右侧可对定位的样式进行设置。8.3.7设置定位属性从入门到精通清华大学出版社59

在CSS规则定义对话框的“分类”列表框中选择“定位”选项，在在CSS规则定义对话框的“分类”列表框中选择“扩展”选项，在对话框右侧可对扩展的样式进行设置。8.3.8设置扩展属性从入门到精通清华大学出版社60

在CSS规则定义对话框的“分类”列表框中选择“扩展”选项，在在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可对过渡样式进行设置。8.3.9设置过渡属性从入门到精通清华大学出版社61在CSS的规则定义对话框中选择“过渡”选项，在对话框右侧即可从入门到精通清华大学出版社8.4应用并管理层叠样式表8.4.3删除层叠样式表应用层叠样式表使用多边形套索工具8.4.18.4.28.4.3从入门到精通清华大学出版社8.4应用并管理层叠样式表8.8.4.1应用层叠样式表从入门到精通清华大学出版社63

使用网页元素的快捷菜单应用CSS样式123使用网页元素的“属性”面板应用CSS样式在“CSS样式”面板中应用层叠样式8.4.1应用层叠样式表从入门到精通清华大学出版社25在DreamweaverCS6中选中要应用样式的网页元素后，在其上单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”命令，在弹出的子菜单中选择相应的CSS样式即可。1．使用网页元素的快捷菜单应用CSS样式从入门到精通

清华大学出版社64

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

在网页选中要应用样式的网页元素后，在“CSS样式”面板中要应8.4.2编辑层叠样式从入门到精通清华大学出版社67在CSS规则定义对话框中修改1在“CSS样式”面板中修改28.4.2编辑层叠样式从入门到精通清华大学出版社29在C在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开对应的CSS规则定义对话框，重新对其参数进行定义即可。1．在CSS规则定义对话框中修改从入门到精通清华大学出版社68在CSS规则定义对话框中修改CSS样式的方法很简单，只需打开如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其进行修改。方法是：在“CSS样式”面板中选择需要进行修改的样式，在“属性”栏中直接对其进行设置即可。2．在“CSS样式”面板中修改从入门到精通清华大学出版社69

如果对CSS样式较为熟悉，可以直接在“CSS样式”面板中对其如果网页中存在未使用的CSS样式，可对其进行删除。只要在“CSS样式”面板中选择要删除的CSS样式，再单击“删除CSS规则”按钮即可。8.4.3删除层叠样式表从入门到精通清华大学出版社70如果网页中存在未使用的CSS样式，可对其进行删除。只要在“C从入门到精通清华大学出版社718.5提高实例——美化鸿宇装饰页面本例将对制作好的“鸿宇装饰”网页的首页进行美化。通过链接外部CSS样式文件，为网页中已定义好的标签应用样式，然后再根据网页中的具体内容

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论