网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第9章.ppt

《网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第9章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第9章使用样式和模板9.1使用HTML样式9.2使用CSS样式9.3使用模板9.1使用HTML样式9.1.1什么是HTML样式HTML样式是一种格式化文本的有力工具，它可以快速一致地将字体格式应用于文档中的文本。HTML样式由一系列的HTML标签组成，浏览器根据样式中包含的HTML标签进行显示。由于这个原因，HTML样式相比CSS样式而言具有更好的兼容性，可以被更低版本的浏览器识别。返回目录要使用HTML样式修饰文本，通常包含两个过程：首先是在网页中创建样式，然后是将样式应用于网页文本。例如，可以创建一个具有“字体为‘黑体’、大小为‘4’、颜色为‘绿

2、色’”的HTML样式，然后选中需要应用该样式的文本，最后从“HTML样式”面板中选择该样式，即可应用到所选文本或段落上，如图9.1所示。图9.1HTML样式示例HTML样式的一个缺点是：对HTML样式所做的更改不会自动在文档中更新。如果应用了一个样式，后来又更改了它，则必须对文本重新应用该样式才能更新格式设置。9.1.2创建HTML样式创建HTML样式的步骤为。（1）在文档窗口中选择“窗口”菜单中的“HTML样式”命令，打开HTML样式面板，如图9.2所示。图9.2打开HTML样式面板（2）单击样式面板上的“新建样式”按钮，打开“定义HTML样式”对

3、话框，如图9.3所示。图9.3“定义HTML样式”对话框其中各选项的含义如下：“名称”：指定HTML样式的名称（注意命令规则）。“应用到”：选项“选定范围（S）［a］”表示将样式应用于选取的文本上；选项“段落（P）［¶］”表示将样式应用于段落文本上。“当应用时”：选项“添加到现有样式（A）”表示在原有样式基础上应用新样式；选项“清除现有样式（C）”表示应用样式前清除已有的文本格式。“字体属性”：该区域中的选项用于设置字符格式。其中，“字体”用于设置字体；“字号”用于设置字的大小；“颜色”用于设置文字颜色；“样式”用于设置文字样式，可以是粗体、

4、斜体或其他样式。“段落属性”：该区域中的选项用于设置段落格式。其中，“格式”用于设置文本的段落格式（包括“标题”等格式）；“对齐方式”用于设置段落的对齐方式。（3）设置完成后单击“确定”按钮，则新样式被添加到HTML样式面板中。其中表示应用于选取文本的样式，表示应用于段落文本的样式。如果样式符号右边有加号，表示是应用时将附加到原有格式之上（即在定义样式时选中了“添加到现有样式（A）”选项）的HTML样式类型，如图9.4所示。（4）如果要修改现有的HTML样式，可以在样式面板中双击该样式名称，打开“定义HTML样式”对话框，重新对样式进行修改。9.1

5、.3应用HTML样式正如9.1.1节中所述，应用样式非常容易——只要首先选取段落或文字，然后在HTML样式面板中单击样式名称即可应用。需要注意的一点是，HTML样式是作用于整个站点的，因此只要在站点的某个网页中定义了HTML样式，即可在网站中的任意网页应用该样式。此外，如果需要在其他站点中使用当前站点中定义的HTML样式，可以执行以下操作。（1）选择“窗口”菜单中的“站点”命令，或“站点”菜单中“站点文件”命令，打开“站点”面板。（2）在“站点”面板中，找到并打开Library文件夹。（3）拷贝名为styles.xml的文件。该文件包含站点的所有HT

6、ML样式。（4）打开需要使用HTML样式的站点，将拷贝的styles.xml文件粘贴到该站点的Library文件夹。每个站点只能包含一个styles.xml文件。因此，如果已经在styles.xml文件将拷贝到的站点中创建了新的HTML样式，则要拷贝到那个站点的文件将替换现有文件。不过这样操作并不会丢失已应用的任何格式更改（因为HTML样式在应用时就已经都转换成了相应的HTML标签），而且还可以通过在文档中选择文本并定义新的HTML样式来重新创建样式。9.2使用CSS样式9.2.1什么是CSS样式CSS（CascadingStyleSheet，层叠样

7、式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS样式表中的层叠是指多个CSS样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据CSS标准中定义的层叠规则来决定哪一种样式优先，优先的样式将覆盖其他样式。返回目录“字体属性”：该区域中的选项用于设置字符格式。其中，“字体”用于设置字体；“字号”用于设置字的大小；“颜色”用于设置文字颜色；“样式”用于设置文字样式，可以是粗体、斜体或其他样式。“段落属性”：该区域中的选项用于设置段落格式。其中，“格式”用于设置文本的段落格式（包括“

8、标题”等格式）；“对齐方式”用于设置段落的对齐方式。（1）选择“窗口”菜单中的“站点”命令，或“站点”菜单中