第3章样式与模板.docx
- 文档编号:23927398
- 上传时间:2023-05-22
- 格式:DOCX
- 页数:34
- 大小:803.75KB
第3章样式与模板.docx
《第3章样式与模板.docx》由会员分享,可在线阅读,更多相关《第3章样式与模板.docx(34页珍藏版)》请在冰豆网上搜索。
第3章样式与模板
第3章 样式与模板
本章要点
●什么是HTML样式和CSS样式
●创建和应用HTML样式、CSS样式
●创建和链接外部CSS样式表
●什么是模板
●模板的创建
●制作基于模板的页面
本章难点
●创建和链接外部CSS样式表。
●模板的创建以及用模板更新页面
上一章我们已经学习了表格和层以及框架页面的使用,本章我们将介绍样式与模板的使用方法和技巧。
在实际的网站开发过程中,为了提高工作效率,简化工作流程,常常需要使用一些自动化功能,样式和模板是最常用的两种工具。
使用样式除了可以在单独网页中应用一致的格式以外,对于较大网站的格式设置和维护更具有重要意义。
使用模板能够大幅度提高网页制作效率,并能简化网页的编辑和维护工作。
3.1 HTML样式
样式就是格式的组合。
在Dreamweaver中可以使用两类样式:
HTML样式和CSS样式。
本节我们先学习HTML样式,CSS样式将在下一节介绍。
3.1.1使用HTML样式设置文本格式
1.什么是HTML样式
HTML样式是一种格式化文本的有力工具,它可以快速一致地将字体格式应用于文档中的文本,HTML样式可由单个或多个HTML字体标签属性(如颜色、字体、大小)以及其他格式属性(如粗体或斜体)组成。
正因为HTML样式只包含字体标签,因此可使用不支持层叠样式表(CSS)的浏览器(如3.0及更早版本的浏览器)查看,因而,HTML样式相比CSS样式而言具有更好的兼容性,可以被更低版本的浏览器识别。
HTML样式的一个缺点是对HTML样式所做的更改不自动在文档中更新。
如果应用了一个样式,后来又更改了它,则必须对文本重新应用该样式才能更新格式设置。
与CSS样式不同,HTML样式格式只影响应用它的文本或使用所选HTML样式创建的文本。
如果希望能够更改格式并自动更新该格式的所有实例,则使用CSS样式。
2.使用HTML样式设置文本格式
要使用HTML样式设置文本格式,通常包含两个过程:
首先在网页中创建样式,然后将该样式应用于网页中的文本。
例如,可以先创建一个字体为“宋体”、大小为“5”的“绿色”、“斜体”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样式”面板第一列中的符号来识别它们:
段落样式前面有一个段落标记“
”,该样式使用户可以设置段落格式。
所选样式前面有一个标记“
”,该样式使用户可以设置所选文本的格式。
“HTML样式”面板中的头两个样式“清除所选样式”和“清除段落样式”使用户可以删除选择应用该样式的文本中的所有格式标签。
注意:
在上面的“HTML样式”面板中,其中有的样式前面有“+”号。
如“粗体”样式前就有“+”号。
样式前的加号(+)指示样式将格式添加到需应用它的文本,而又不清除所选样式之前的任何样式。
如果样式没有加号,则在应用所选样式之前将清除任何现有样式。
例如,使用HTML样式“a+red”时将向任何已应用于所选文本的格式中添加红色。
2.查看和编辑现有HTML样式的样式属性
操作步骤如下:
首先确保“文档”窗口中未选择任何文本。
在“HTML样式”面板中(如图3-2所示),确保取消选择了“自动应用”复选框。
(如果打开“自动应用”选项,则在“HTML样式”面板中选择HTML样式时将会应用该样式。
)
在“HTML样式”面板中,选择一种样式,右击所选样式→在弹出的快捷菜单中选择“编辑”→弹出“定义HTML样式”对话框。
或者是双击所选样式也可以弹出“定义HTML样式”对话框。
如图3-3所示。
在“定义HTML样式”对话框中,查看或者是修改现有HTML样式的样式属性。
若要将它重置为默认选项,则单击“清除”。
图3-3“定义HTML样式”对话框
注意:
在图3-3所示的对话框中,其中的“应用到”选项确定样式是应用于所选文本(“选定范围”)还是当前文本块(“段落”)。
“当应用时”选项确定是将样式设置添加到原始文本格式中(“添加到现有样式”),还是从现有格式中删除并用新设置替换(“清除现有样式”)。
3.清除文档中的格式设置:
操作步骤如下:
选择网页中已设置格式的文本。
在“HTML样式”面板(如图3-1所示)中,单击“清除段落样式”或“清除所选样式”。
注意:
“清除段落样式”将删除文档中当前文本块的任何格式设置。
“清除所选样式”将删除所选文本的任何格式设置。
4.从“HTML样式”面板中删除样式
操作步骤如下:
在“HTML样式”面板中,取消选择复选框以关闭“自动应用”选项。
选择欲删除的HTML样式。
单击面板右下角的“删除样式”(垃圾桶)按钮。
3.1.3创建HTML样式
创建HTML样式可以用两种方法:
可以在“HTML样式”面板中通过选择要应用的格式属性来创建样式,或者可以设置文档中的文本格式,然后基于所选文本创建样式。
1.创建新的HTML样式
操作步骤如下:
在“HTML样式”面板中,单击“新建样式”按钮;也可以选择“文本”菜单→“HTML样式”→“新建样式”。
出现“定义HTML样式”对话框。
如图3-3所示。
在“名称”文本框中,输入样式名称。
在“应用到”下,执行下列操作之一选择该样式的应用方式:
●若要设置所选样式,则选择“选定范围”。
●若要设置段落样式,则选择“段落”。
注意:
段落样式应用于插入点所在的整个文本块,与实际选择的文本无关。
对于“当应用时”,选择是在所选文本或段落的现有样式基础上应用HTML样式,还是先清除所选文本或段落的格式设置,然后再应用新的HTML样式。
在“字体属性”下,使用弹出菜单选择要应用的格式选项。
如果要创建段落样式,则在“段落属性”下的“格式”弹出菜单中选择一个段落标记(如“段落”、“标题1”、“已编排格式”)。
对于“对齐方式”,单击左对齐、居中对齐或右对齐按钮以设置所需的段落对齐方式。
单击“确定”。
该样式随即添加到“HTML样式”列表中。
2.基于现有文本创建新的HTML样式
操作步骤如下:
在文档中,先选择文本,然后利用“属性检查器”对所选择的文本进行格式设置。
在“HTML样式”面板中,单击右下角的“新建样式”图标(+),出现“定义HTML样式”对话框(如图3-4所示)。
图3-4基于现有文本创建新的HTML样式
在“名称”文本框中,输入样式名称。
在“应用到”下,执行下列操作之一选择该样式的应用方式:
●若要设置所选样式,则选择“选定范围”。
●若要设置段落样式,则选择“段落”。
对于“当应用时”,选择是在所选文本或段落的现有样式基础上应用HTML样式,还是先清除所选文本或段落的格式设置,然后再应用新的HTML样式。
如果要创建段落样式,则在“段落属性”下的“格式”弹出菜单中选择一个段落标记(如“段落”、“标题1”、“已编排格式”)。
对于“对齐方式”,单击左对齐、居中对齐或右对齐按钮以设置所需的段落对齐方式,最后单击“确定”。
3.1.4应用HTML样式
应用样式非常简单,就是选择希望应用该样式的文本或段落,然后在“HTML样式”面板中选择该样式。
1.应用HTML样式
操作步骤如下:
在“文档”窗口中,执行下列操作之一选择希望应用样式的文本:
●将插入点放在段落中的任何位置以应用段落样式。
●使用光标选择希望应用所选样式的文本。
在“HTML样式”面板中,如果选中了面板底部的“自动应用”复选框,则单击要应用于文本的HTML样式;如果未选中“自动应用”复选框,则先单击要应用于文本的HTML样式,然后单击“应用”。
则文本在“文档”窗口中自动更新。
2.在其他站点中使用用户创建的HTML样式
在DreamweaverMX中,用户创建的HTML样式将自动存储在本地站点的Library文件夹中一个名为Styles.xml的文件中。
我们可以将Styles.xml文件从一个本地站点的Library文件夹拷贝到另一个本地站点的Library文件夹中,并重新使用所创建的样式。
注意:
每个站点只能包含一个Styles.xml文件。
因此,如果已经在Styles.xml文件将拷贝到的站点中创建了新的HTML样式,则要拷贝到那个站点的文件将替换现有文件。
用户不会丢失已应用的任何格式更改,而且还可以通过在文档中选择文本并定义新的HTML样式来重新创建样式。
打开站点窗口中的Library文件夹的操作步骤如下:
选择菜单“窗口”→“站点”或者是选择菜单“站点”→“站点文件”,在“站点文件”视图中打开“站点”面板。
在“站点”面板中,找到并打开Library文件夹。
3.2 使用CSS样式
使用CSS样式的主要目的是统一页面的风格以及将一种网页制作的风格应用到其他页面上去。
一般在网页的制作中,为了制作规范、专业的网页,同时提高网页制作的效率,掌握CSS样式的使用方法是十分必要的。
在DreamweaverMX中应用CSS样式是非常简单和轻松的,关键在于正确理解CSS样式的概念。
3.2.1什么是CSS样式
CSS全称CascadingStylesSheet,译为“层叠样式表”,是由W3C(WorldWideWebConsortium)组织所拟定的,主要用来指定文字、段落、版面等网页素材的格式。
在DreamweaverMX中,我们不需要熟悉CSS的语法,就可以很轻松地设计出很美妙的网页效果。
CSS样式是一系列格式规则,它们控制网页内容的外观。
使用CSS样式可以非常灵活并更好地控制确切的网页外观,从精确的布局定位到特定的字体和样式。
CSS样式使用户可以控制许多仅使用HTML无法控制的属性。
例如,可以指定自定义列表项目符号并指定不同的字体大小和单位(像素、点数等等)。
通过使用CSS样式和以像素为单位设置字体大小,可以确保以更一致的方式在多个浏览器中处理页面布局和外观。
除了设置文本格式外,还可以控制网页中块级别元素的格式和定位。
例如,可以设置边距、边框、其他文本周围的浮动文本等等。
CSS样式规则由两部分组成:
选择器和声明。
选择器是样式名称(如TR或P),而声明则用于定义样式元素。
声明由两部分组成:
属性(如font-family)和值(如Helvetica)。
术语“级联”是指对同一个网页应用多个样式表的能力。
例如,可以创建一个样式表来应用颜色,创建另一样式表来应用边距,然后将两者应用于同一个网页以创建所需的设计。
CSS样式表的主要优点是提供便利的更新功能。
更新CSS样式时,使用该样式的所有文档的格式都自动更新为新样式。
在Dreamweaver中可以定义下列类型的CSS样式表:
●自定义CSS样式(也称为类样式)使用户可以将样式属性设置为任何文本范围或文本块。
●HTML标签样式重定义特定标签(如h1)的格式。
创建或更改h1标签的CSS样式时,所有用h1标签设置了格式的文本都立即更新。
●CSS选择器样式重定义具体某个标签组合的格式(如每当h2标题出现在表格单元格内时都应用tdh2),或重定义包含特定id属性的所有标签的格式(如#myStyle应用于所有包含属性值对ID="myStyle"的标签)。
CSS样式表驻留在文档的head区域中。
CSS样式可定义HTML标签的格式属性,由class属性标识的文本范围。
DreamweaverMX识别现有文档中定义的样式,只要这些样式符合CSS样式准则。
手动HTML格式覆盖通过CSS(或HTML)样式应用的格式。
要使CSS样式能够控制段落格式,必须删除所有手动HTML格式或HTML样式。
在“文档”窗口中可以查看所应用的大部分样式属性。
也可在浏览器窗口中预览文档以查看它的应用情况。
有些CSS样式属性在MicrosoftInternetExplorer4.0和NetscapeNavigator4.0中呈现的外观不相同,有些目前不受任何浏览器支持。
3.2.2创建和应用CSS样式
1.打开“CSS样式”面板
使用“CSS样式”面板可以创建、查看、应用或编辑样式属性。
“CSS样式”面板具有两种视图或模式。
使用“应用样式”视图可应用自定义或类CSS样式;使用“编辑样式”视图可以对已应用于文档的样式进行更改。
在这两种视图中工作时都可以创建新样式。
如果“CSS样式”面板尚未打开,则单击菜单“窗口”→“CSS样式”,CSS样式面板即可打开。
如图3-5所示。
图3-5“CSS样式”面板
在“CSS样式”面板中,单击面板底部的“新建CSS样式”按钮,“新建CSS样式”对话框随即出现。
如图3-6所示。
图3-6 “新建CSS样式”对话框
2.创建新的CSS样式
创建一个CSS样式来自动完成HTML标签的格式设置或class属性所标识的文本范围的格式设置。
创建新的CSS样式操作步骤如下:
⑴将插入点放在文档中,然后执行以下操作之一打开“新建CSS样式”对话框(如图3-6所示):
●在“CSS样式”面板(如图3-5所示)中,单击面板右下角区域中的“新建CSS样式”按钮。
●在文本属性检查器中,根据需要单击“切换CSS/HTML模式”按钮以切换到“CSS模式”,如图3-7所示,然后在“CSS样式”弹出式菜单中选择“新建CSS样式”。
图3-7文本属性检查器面板
●依次单击菜单“文本”→“CSS样式”→“新建CSS样式”,随即出现“新建CSS样式”对话框。
⑵在弹出的如图3-6所示的“新建CSS样式”对话框中定义用户要创建的CSS样式的类型:
●若要创建可作为class属性应用于文本范围或文本块的自定义样式,则选择“创建自定义样式(Class)”,然后在“名称”域中输入样式名称。
注意:
自定义样式(Class)名称必须以句点开头,并且可以包含任何字母和数字组合。
例如.myhead1。
如果用户没有输入开头的句点,Dreamweaver将自动为用户输入。
●若要重定义特定HTML标签的默认格式,则选择“重定义HTML标签”,然后在“标签”域中输入一个HTML标签,或从弹出菜单中选择一个标签。
●若要为具体某个标签组合或所有包含特定Id属性的标签定义格式,则选择“使用CSS选择器”,然后在“选择器”域中输入一个或多个HTML标签,或从弹出式菜单中选择一个标签。
弹出菜单中提供的选择器包括a:
active、a:
hover、a:
link和a:
visited。
⑶选择定义样式的位置:
●若要创建外部样式表,请选择“新建样式表文件”。
●若要在当前文档中嵌入样式,请选择“仅对该文档”。
⑷单击“确定”,出现“CSS样式定义”对话框。
⑸选择要为新CSS样式设置的样式选项。
⑹设置完样式属性后,单击“确定”。
3.应用CSS样式
⑴应用自定义(Class)CSS样式
自定义(Class)CSS样式是唯一可以应用于文档中的任何文本(与控制文本的标签无关)的CSS样式类型。
与当前文档关联的所有自定义(Class)样式都显示在“CSS样式”面板的“应用样式”视图中以及文本属性检查器的CSS模式中。
应用自定义CSS样式操作方法如下:
①在文档中,选择要将CSS样式应用于的文本。
说明:
如果将插入点放在段落中则样式会应用于整个段落;如果在单个段落中选择一个文本范围,则CSS样式只影响所选范围;若要指定要应用CSS样式的确切标签,则在位于“文档”窗口左下角的标签选择器中选择标签。
②若要应用类样式,则可执行下列操作之一:
●在“CSS样式”面板中,选择“应用样式”,然后在“CSS样式”列表中单击要应用的样式的名称。
●在文本属性检查器中,根据需要单击“切换CSS/HTML模式”按钮以切换到“CSS模式”,然后在“CSS样式”弹出式菜单中选择要应用的类样式。
●依次单击“文本”→“CSS样式”,然后在子菜单中选择要应用的样式。
注意:
对于“重新定义HTML标签”样式与“使用CSS选择器”样式,网页一般自动应用该样式而无须用户指定。
⑵将自定义样式从选定内容中删除:
选择要从中删除样式的对象或文本,然后执行以下操作之一:
●在文本属性检查器中,根据需要单击“切换CSS/HTML模式”按钮以切换到“CSS模式”,然后在“CSS样式”弹出式菜单中选择“无CSS样式”。
●在“CSS样式”面板中,选择“应用样式”视图,然后选择“无CSS样式”。
4.应用实例
实例1:
自定义CSS样式的实例。
要求:
本实例中定义一种网页中常用的正文样式,效果为“字体为楷体,文字大小20px,行高150%,文字颜色为蓝色,首行缩进两个字符。
其操作步骤如下:
⑴打开一个包含段落文本的文档,打开“CSS样式”面板,然后单击“CSS样式”面板中的“新建CSS样式”按钮(如图3-5所示)→弹出“新建CSS样式”对话框(如图3-6所示)→在“名称”文本框中输入样式名称“text1”,在“类型”选项中选择“创建自定义样式(CSS)(M)”单选按钮,选择“仅对该文档”单选按钮→设置完成后单击“确定”按钮。
⑵在打开的“.text1的CSS样式定义”对话框(如图3-8所示)中,设置字体为“楷体”、大小为20像素(px)、行高为150%、文字颜色为蓝色。
⑶在如图3-8所示的“分类”列表框中选择“区块”选项,如图3-9所示,设置文字缩进为40像素(px)(相当于两个字符),单击“确定”按钮,则新建的“text1”样式出现在“CSS样式”面板中。
⑷在文档窗口中选取要应用该样式的文本,然后在“CSS样式”面板中,选择“应用样式”方式,最后在“CSS样式”列表中单击要应用的“text1”样式,即可应用该样式。
图3-8“.text1的CSS样式定义”对话框 图3-9定义区块属性
实例2:
重新定义HTML标签样式的实例。
要求:
本实例中将重定义body标签的样式属性。
其操作步骤如下:
1在“新建CSS样式”对话框中,在“类型”选项中选择“重定义HTML标签”,在“标签”弹出菜单中选择“body”,在“定义在”中选择“仅对该文档”。
如图3-10所示。
2单击“确定”,弹出“body的CSS样式定义”对话框。
如图3-11所示。
设置下列“类型”:
在“字体”弹出菜单中选择“华文行楷”,在“大小”弹出菜单中选择18和像素,在“颜色”中单击颜色选择器,然后使用滴管选择白色。
图3-10 重定义HTML标签样式 图3-11“body的CSS样式定义”对话框
3接下来,设置背景。
如图3-11所示中,在“分类”下选择“背景”选项,CSS背景属性随即出现,在“背景颜色”文本框中输入#333366(深蓝色)。
4单击“确定”,对话框关闭,样式立即应用于文档。
5在“CSS样式”面板中选择“编辑样式”。
新样式连同样式属性说明一起出现在列表中。
如图3-12所示。
在此视图方式下双击其中一种样式或者是选中其中一种样式后单击右下角的“编辑样式表”按钮均可打开“CSS样式定义”对话框,对其选中的样式属性进行编辑修改。
图3-12 CSS样式面板的编辑样式视图
实例3:
CSS选择器样式的实例。
要求:
本实例中通过设置CSS选择器样式的设置实现基于文字超链接的动态效果。
制作动态链接效果的样式表的原理就是定义超链接的四种状态:
a:
link(链接的正常显示),a:
hover(当鼠标停留在链接文字上的样式),a:
visited(链接点击之后显示的样式),a:
active(链接激活时的样式)。
并对这四种状态的样式进行不同的定义,这样在网页中当超链接处于不同状态时,就有不同的样式,从而形成发动态效果。
其操作步骤如下:
⑴在“CSS样式”面板中,单击位于面板底部的“新建CSS样式”按钮,“新建CSS样式”对话框随即出现。
如图3-13所示。
在“类型”中选择“使用CSS选择器”,在“选择器”弹出菜单中选择“a:
link”,在“定义在”中选择“仅对该文档”,单击“确定”,“CSS样式定义”对话框随即出现。
如图3-14所示。
图3-13 选择“使用CSS选择器”项
图3-14 定义样式表的a:
link
⑵为链接设置下列“类型”属性:
在字体中选择“楷体”,大小选择18像素,在“修饰”中选择“无”,在“颜色”中的文本框中输入#000000。
单击“确定”。
3再次单击位于面板底部的“新建CSS样式”按钮,“新建CSS样式”对话框随即出现。
如图3-13所示。
在“类型”中选择“使用CSS选择器”,在“选择器”弹出菜单中选择另一标签“a:
hover”,单击“确定”按钮,进入“a:
hover的CSS样式表定义”对话框,如设置样式表a:
link一样定义样式表a:
hover,如图3-15所示。
图3-15 定义样式表的a:
hover
4分别在字体中选择“隶书”,大小选择18像素,在“修饰”中选择“下划线”,在“颜色”中的文本框中输入#0000FF。
单击“确定”。
保存文件后,按F12键可以通过浏览器预览页面效果。
本实例中样式表在文档中生成如下代码内容:
--
a:
link{
font-family:
"楷体";
font-size:
18px;
color:
#000000;
text-decoration:
none;
}
a:
hover{
font-family:
"隶书";
font-size:
18px;
color:
#0000FF;
text-decoration:
underline;
}
-->
实例3:
几组不同的文字超链接样式实例。
要求:
在同一个网页中,设置多种不同的文字超链接样式。
在DreamweaverMX中,编辑超链接样式组的方法是在对超链接进行设置时,如“a:
link”的字母“a”后面加上组名,中间以“.”分开。
例如:
“a.main:
link”和“a.tools:
link”这两种命名都是可以的,目的是把文字超链接的样式分成两组,它们有不同的显示效果,但可以在同一个网页中共存,可以很好的解决上述问题。
其操作步骤如下:
⑴在“CSS样式”面板中,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 样式 模板