第3章样式与模板.doc

《第3章样式与模板.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第3章　样式与模板本章要点l什么是HTML样式和CSS样式l创建和应用HTML样式、CSS样式l创建和链接外部CSS样式表l什么是模板l模板的创建l制作基于模板的页面本章难点l创建和链接外部CSS样式表。l模板的创建以及用模板更新页面上一章我们已经学习了表格和层以及框架页面的使用，本章我们将介绍样式与模板的使用方法和技巧。　　在实际的网站开发过程中，为了提高工作效率，简化工作流程，常常需要使用一些自动化功能，样式和模板是最常用的两种工具。使用样式除了可以在单独网页中应用一致的格式以外，对于较大网站的格式设置和维护更具有重要意义。使用模板能够大幅度提高网页制作效率，并

2、能简化网页的编辑和维护工作。3．1　HTML样式　　样式就是格式的组合。在Dreamweaver中可以使用两类样式：HTML样式和CSS样式。本节我们先学习HTML样式，CSS样式将在下一节介绍。3.1.1使用HTML样式设置文本格式1．什么是HTML样式HTML样式是一种格式化文本的有力工具，它可以快速一致地将字体格式应用于文档中的文本，HTML样式可由单个或多个HTML字体标签属性（如颜色、字体、大小）以及其他格式属性（如粗体或斜体）组成。正因为HTML样式只包含字体标签，因此可使用不支持层叠样式表(CSS)的浏览器（如3.0及更早版本的浏览器）查看，因而，HT

3、ML样式相比CSS样式而言具有更好的兼容性，可以被更低版本的浏览器识别。HTML样式的一个缺点是对HTML样式所做的更改不自动在文档中更新。如果应用了一个样式，后来又更改了它，则必须对文本重新应用该样式才能更新格式设置。与CSS样式不同，HTML样式格式只影响应用它的文本或使用所选HTML样式创建的文本。如果希望能够更改格式并自动更新该格式的所有实例，则使用CSS样式。2．使用HTML样式设置文本格式要使用HTML样式设置文本格式，通常包含两个过程：首先在网页中创建样式，然后将该样式应用于网页中的文本。例如，可以先创建一个字体为“宋体”、大小为“5”的“绿色”、“斜

4、体”HTML样式。再选择希望应用该样式的文本，然后从“HTML样式”面板中选择该HTML样式。效果如图3－1所示。图3－1　HTML样式示例3.1.2　使用“HTML样式”面板1．打开“HTML样式”面板操作步骤如下：在文档窗口中，依次单击“窗口”菜单→“HTML样式”命令，则打开“HTML样式”面板，如图3－2所示。显示可供当前本地站点使用的HTML样式。删除样式新建样式图3－2　打开“HTML样式”面板在图3－2中可以看出，HTML样式有两种类型：“段落样式”和“所选样式”。可通过“HTML样式”面板第一列中的符号来识别它们：段落样式前面有一个段落标记“”，该样

5、式使用户可以设置段落格式。所选样式前面有一个标记“”，该样式使用户可以设置所选文本的格式。“HTML样式”面板中的头两个样式“清除所选样式”和“清除段落样式”使用户可以删除选择应用该样式的文本中的所有格式标签。注意：在上面的“HTML样式”面板中，其中有的样式前面有“＋”号。如“粗体”样式前就有“＋”号。样式前的加号(+)指示样式将格式添加到需应用它的文本，而又不清除所选样式之前的任何样式。如果样式没有加号，则在应用所选样式之前将清除任何现有样式。例如，使用HTML样式“a+red”时将向任何已应用于所选文本的格式中添加红色。2．查看和编辑现有HTML样式的样式属性

6、操作步骤如下：⑴首先确保“文档”窗口中未选择任何文本。⑵在“HTML样式”面板中（如图3－2所示），确保取消选择了“自动应用”复选框。（如果打开“自动应用”选项，则在“HTML样式”面板中选择HTML样式时将会应用该样式。）⑶在“HTML样式”面板中，选择一种样式，右击所选样式→在弹出的快捷菜单中选择“编辑”→弹出“定义HTML样式”对话框。或者是双击所选样式也可以弹出“定义HTML样式”对话框。如图3－3所示。⑷在“定义HTML样式”对话框中，查看或者是修改现有HTML样式的样式属性。⑸若要将它重置为默认选项，则单击“清除”。图3－3“定义HTML样式”对话框注意

7、：在图3－3所示的对话框中，其中的“应用到”选项确定样式是应用于所选文本（“选定范围”）还是当前文本块（“段落”）。“当应用时”选项确定是将样式设置添加到原始文本格式中（“添加到现有样式”），还是从现有格式中删除并用新设置替换（“清除现有样式”）。3．清除文档中的格式设置：操作步骤如下：⑴选择网页中已设置格式的文本。⑵在“HTML样式”面板（如图3－1所示）中，单击“清除段落样式”或“清除所选样式”。注意：“清除段落样式”将删除文档中当前文本块的任何格式设置。“清除所选样式”将删除所选文本的任何格式设置。4．从“HTML样式”面板中删除样式操作步骤如下：⑴在“H