《Dreamweaver 网页设计与制作》课件-项目七 制作美容网站-应用样式表_第1页
《Dreamweaver 网页设计与制作》课件-项目七 制作美容网站-应用样式表_第2页
《Dreamweaver 网页设计与制作》课件-项目七 制作美容网站-应用样式表_第3页
《Dreamweaver 网页设计与制作》课件-项目七 制作美容网站-应用样式表_第4页
《Dreamweaver 网页设计与制作》课件-项目七 制作美容网站-应用样式表_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

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

文档简介

任务1为网站首页设置样式——样式表的基本应用任务2为网站子页设置样式——样式表的高级应用项目七制作美容网站——应用样式表任务1 为网站首页设置样式——样式表的基本应用◆理解并熟悉样式的类型◆熟悉样式的创建方法一、熟悉“CSS样式”面板在Dreamweaver中，可以借助“CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”→“CSS样式”命令，可打开“CSS样式”面板，如图所示。“CSS样式”面板（所有样式模式）“CSS样式”面板的“全部”选项卡包含两个窗格。其中，上面的“所有规则”窗格显示了当前文档中定义的样式和链接到当前文档的样式文件中定义的样式。使用下方的“属性”窗格可以快速编辑“所有规则”窗格中所选样式的属性。“CSS样式”面板（当前选择模式）二、CSS样式的存在方式1.外部CSS样式表为增强CSS样式的通用性，可以创建扩展名为“css”的样式表文件。利用“CSS样式”面板可将该文件链接至站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。2.内部（或嵌入式）CSS样式表内部CSS样式表是一系列包含在HTML文档head部分style标签内的CSS样式，如图所示。“CSS样式”面板（当前选择模式）内部CSS样式表三、CSS样式的分类1.类样式类样式又称自定义样式，是唯一可应用于文档中任何对象的CSS样式，主要用于定义一些特殊的样式。例如，可为网页中的列表项定义样式。2.标签样式标签样式用来重定义HTML标签的样式。例如，定义table标签样式后，网页中所有表格都将自动应用该样式。3.选择器样式选择器样式又称高级样式，主要用来定义链接文本的样式，也可用来重定义特定标签组合的样式。四、创建样式的一般步骤在Dreamweaver中，可按照以下方法来创建CSS样式。打开“新建CSS规则”对话框选择“选择器”类别 选择标签“保存样式表文件为”对话框“×××CSS规则定义”对话框“背景”属性其中部分选项的意义如下。重复（background-repeat）：确定是否以及如何重复背景图像。附件（background-attachment）：确定背景图像是固定在它的原始位置还是随内容一起滚动。水平位置和垂直位置（background-position）：指定背景图像相对于元素的初始位置，可以使背景图像与页面中心垂直和水平对齐。“背景”属性任务2 为网站子页设置样式——样式表的高级应用◆掌握附加外部样式的使用方法◆理解并掌握CSS滤镜的使用方法一、附加外部样式如果网站中多个网页文档用到了同一个样式，可以将该样式保存在外部样式文件中，然后将样式文件链接至各个网页文档，就可以对各文档应用该样式了。打开“链接外部样式表”对话框选择样式文件设置添加形式查看链接样式的代码预览网页二、CSS滤镜应用CSS滤镜可为图像设置渐变、透明、阴影等效果。在“×××的CSS规则定义”对话框左侧的“分类”列表中选择“扩展”选项，右侧的“过滤器”下拉列表中为用户提供了多种滤镜

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

最新文档

评论

0/150

提交评论