《Dreamweaver 网页设计与制作》课件——项目七 制作美容网站——应用样式表.pptVIP

任务 2?为网站子页设置 样式——样式表的高级应用 * LOGO * LOGO * LOGO 项目七?制作美容网站——应用样式表 任务 1 为网站首页设置样式——样式表的基本应用 任务 2 为网站子页设置样式——样式表的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 * LOGO 项目七?制作美容网站——应用样式表 任务 1 为网站首页设置样式——样式表的基本应用 任务 2 为网站子页设置样式——样式表的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 任务 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）：指定背景图像相对于元素的初始位置，可以使背景图像与页面中心垂直和水平对齐。 “背景”属性 * LOGO * LOGO * LOGO 项目七?制作美容网站——应用样式表 任务 1 为网站首页设置样式——样式表的基本应用 任务 2 为网站子页设置样式——样式表的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 * LOGO 项目七?制作美容网站——应用样式表 任务 1 为网站首页设置样式——样式表的基本应用 任务 2 为网站子页设置样式——样式表的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧