网页设计与制作09课件

第9章

模板与CSS样式

本章要点：u

模板的用途u

创建模板和设定可编辑区域u

应用模板u

编辑模板和网页更新u

CSS样式的用途u

设计CSS样式并更新网页第9章模板与CSS样式本章要点：19.1模板

9.1.1模板概述

所谓模板，实际上是一个范例页面，利用它可以生成具有统一结构与外观的多个页面。Dreamweaver将所有的模板文件存放在站点根目录的Templates子目录下，其扩展名为.dwt。

9.1模板9.1.1模板概述29.1.2创建模板

操作实例9-1将当前文档另存为模板操作步骤：①在“文件”菜单选择“打开”选项，选取一个文件。②文件打开后，继续在“文件”菜单选择“另存为模板”选项。③在“另存模板”对话框中，在“站点”下拉列表中选取站点，然后在“另存为”文本框中输入模板的名称。④单击“保存”按钮。模板文件将保存到指定站点的Templates文件夹中，文件扩展名为.dwt。

9.1.2创建模板操作实例9-1将当前文档另存为3操作实例9-2创建新的模板操作步骤：①在“窗口”菜单选择“模板”选项，打开“资源”面板。②单击“模板”按钮，显示模板面板。③在资源面板单击面板底部的“新建模板”按钮，一个新的无标题模板将被添加到模板列表中。④当模板仍处于选中状态时，为该模板输入一个名称。例如，“mainn⑤选中新建模板，单击“资源”面板底部的“编辑”按钮，进入新模板的编辑状态。⑥设计模板页面与设计普通网页基本一样，同样可以加入表格、层、图片、动画、设置页面属性等。一般先设计布局，然后填入一些固定不变的内容。例如，站点徽标（logo）、标题栏、导航栏、联系方式等。其他允许变化的内容可设定为可编辑区。⑦编辑完毕，按快捷键Ctrl+S保存模板文件。

操作实例9-2创建新的模板49.1.3设定模板的可编辑区域

可编辑区是该模板页面中可以修改的部分；锁定区是在所有页面中保持不变的页面布局部分。

9.1.3设定模板的可编辑区域可编辑区是该模板5操作实例9-3将当前模板的内容设定为可编辑区操作步骤：①在当前模板文件中，选取需要设置可编辑区的文本或其他内容。②在“常用”工具栏的“模板”下拉列表中，选择“可编辑区域”选项，打开“新建可编辑区域”对话框。③在“新建可编辑区域”对话框中，为区域输入惟一的名称。④单击“确定”按钮，可编辑区被一个有色矩形框环绕。⑤参照步骤①~③设置其他可编辑区。⑥按快捷键Ctrl+S保存模板文件。

操作实例9-3将当前模板的内容设定为可编辑区6操作实例9-5锁定可编辑区如果模板文件的某个区域已标记为可编辑区，而现在又需要将它重新锁定，使之不可编辑，可以使用“移除可编辑区域”命令重新锁定区域。操作步骤：①选中指定的“可编辑区”。②在“修改”菜单选择“模板”、“删除模板标记”选项，选中的“可编辑区”将被删除。

操作实例9-5锁定可编辑区79.1.4应用模板

操作实例9-6创建基于模板的新文档操作步骤：①在“文件”菜单选择“新建”选项。弹出“新建文档”对话框。②选择“模板”标签，显示如图9-7所示的“从模板新建”对话框。③在“模板用于”列表中选择指定站点，在“模板列表”中选择所需要的模板，“预览”窗口将显示该模板的页面。④当创建一个基于模板的新文档时，可以选择该文档是否保持依附于模板。如果选择“当模板改变时更新页面”选项时，一旦修改模板后，基于该模板的文档也将更新以反映在模板中所做的修改。如果不选择该选项，新建文档将作为模板的一个拷贝，并且是一个独立的HTML文件，不存在所谓的可编辑区或锁定区。因此，模板发生变化时并不修改该文档。⑤单击“创建”按钮，创建新文档。⑥编辑文档并保存。

9.1.4应用模板操作实例9-6创建基于模板的新文8操作实例9-7对已建文档应用模板

操作步骤：①打开指定文档。②执行下列操作之一，对当前文档应用模板。·在“修改”菜单选择“模板”、“应用模板到页”选项，弹出“选择模板”对话框。从列表中选择所需要的模板，单击“选定”按钮。如图9-10所示。·在“资源”面板的“模板”分类中选择所需要的模板，然后单击“应用”按钮。·从“资源”面板的“模板”分类中将所需要的模板拖动到文档窗口。

操作实例9-7对已建文档应用模板99.1.5编辑模板

操作实例9-12编辑一个当前文档所基于的模板文件操作步骤：①打开一个基于模板所创建的文档。②在“修改”菜单选择“模板”、“打开附加模板”选项，则打开所套用的模板文件。③按需要修改模板的内容或修改模板的页面属性。④按快捷键Ctrl+S保存所做的修改。⑤更新基于该模板的网页文件。

9.1.5编辑模板操作实例9-12编辑一个当前文档10操作实例9-15删除模板文件操作步骤：①在“资源”面板选中指定模板。②单击“删除”按钮。③在“确认删除”对话框单击“是”按钮。

操作实例9-15删除模板文件119.1.6更新基于模板的网页文件

操作实例9-18更新整个站点或使用某特定模板的所有文档操作步骤：①在“修改”菜单选择“模板”、“更新页面”选项，弹出“更新页面”对话框。②在“查看”下拉列表执行下列操作之一：·选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。该选项将更新选定站点中的所有基于模板所创建的网页文件。·选择“文件使用”，然后从相邻的弹出式菜单中选择模板名称。该选项将更新当前站点中使用该模板所建的网页文件。③在“更新”选项中选择“模板”选项。④单击“开始”按钮，Dreamweaver开始更新所指定的文件。如果选中了“显示记录”选项，Dreamweaver将提供更新的文件信息。

9.1.6更新基于模板的网页文件操作实例9-18更129.2文字样式

9.2.1CSS样式的基本操作1.CSS样式简介

CSS样式是一组在某个网页中设置的网页外观的格式属性，样式表包括该网页的所有格式。利用CSS，网页制作者可以有效地定制并改善网页。按CSS样式应用的形式，CSS样式一般分为嵌入式与外部链接式。所谓嵌入式是指在独立的网页中应用CSS样式；所谓外部链接式是指可应用于多个网页中，生成专门的*.css文件。2．创建CSS样式

9.2文字样式9.2.1CSS样式的基本操作13操作实例9-19创建新样式操作步骤：①在“窗口”菜单选择“CSS样式”选项，打开“CSS样式”面板。②单击“CSS样式”面板的“新建样式”按钮，弹出“新建CSS样式”对话框。③“新建CSS样式”对话框的各种选项如下：·类：创建自定义样式。·标签：使用已有的标签制作样式。单击“标签”下拉列表，选择已有的样式。·高级：用于对超级链接的4种状态进行设置，可以通过“选择器”下拉列表进行选择：a:Active：活动超级链接状态，即单击鼠标时的状态。a:Hover：鼠标指向超级链接时的状态。a:Link：默认的超级链接状态，即不做任何动作时的状态。a:Visited：已访问过的超级链接状态。·新建样式表文件：生成专门的*.css文件，该样式可应用于多个网页，是外部链接式样式。单击“确定”按钮之后，系统将提示保存CSS样式表文件。·仅对该文档：只对当前网页应用，是嵌入式样式。

操作实例9-19创建新样式14④选择“类”选项，在“名称”框输入自定义的CSS样式表名称（例如aa1）；选择“仅对该文档”选项。⑤单击“确定”按钮，打开如图9-18所示的“样式定义”对话框。⑥在对话框中可以定义样式表的文字、背景、边框、列表、区块、颜色等属性。⑦单击“确定”按钮，一个CSS样式创建完成。新的CSS样式显示在“CSS样式”面板中。

④选择“类”选项，在“名称”框输入自定义的CSS样式表名称（153．应用CSS样式操作实例9-20在当前网页中应用样式操作步骤：①打开网页文件。②打开“CSS样式”面板，面板中将显示自定义的CSS样式表。重定义的标签与超级链接的样式将自动应用，所以不在“CSS样式”面板中显示。③选中需要应用CSS样式的对象。例如，文本、图片、表格等。④在“CSS样式”面板中右键单击需要应用的CSS样式名称。⑤选择“套用”选项。

3．应用CSS样式169.2.2设置CSS样式的属性

1．类型类型选项卡的功能是定义样式的文本属性。·字体：设置字体。·大小：设置字号的大小，可选择不同的单位。·样式：设置字体的显示样式，包括：正常、斜体、偏斜体。·粗细：设置文本的粗细。包括：正常、粗体、特粗、细体等。·变量：文本变量。包括：正常、小型大写字母。·行高：设置文本的行高。·大小写：设置英文文本。包括：首字母大写、全部大写、全部小写。·颜色：设置文本的颜色。·修饰：修饰文本。可选择：下划线、上划线、删除线、闪烁和无。一般文本的默认设置是“无”，链接文本的默认设置是“下划线”。

9.2.2设置CSS样式的属性1．类型172．背景

背景选项卡的功能是定义网页对象的背景颜色。·背景颜色：设置对象的背景颜色。·背景图像：设置对象的背景图像。·重复：当背景图像不能填满页面时，决定是否重复和如何重复背景图像。·附件：决定背景图像是在其初始位置固定，还是与内容一起滚动。·水平位置：设置背景图像的起始水平位置。可选择左对齐、居中、右对齐等。·垂直位置：设置背景图像的起始垂直位置，可选择顶部、居中、底部等。

2．背景背景选项卡的功能是定义网页对象的背景颜色。183．区块

图9-20区块选项卡3．区块图9-20区块选项卡194．方框

图9-21方框选项卡4．方框图9-21方框选项卡205．边框

图9-22边框选项卡5．边框图9-22边框选项卡216．列表

图9-23列表选项卡6．列表图9-23列表选项卡227．定位

图9-24定位选项卡7．定位图9-24定位选项卡238．扩展

图9-25扩展选项卡8．扩展图9-25扩展选项卡249.2.3CSS样式应用实例

操作实例9-24制作9磅字目前的中文网站，大多数均采用宋体9Points（磅）字作为一般文本的字体与大小。HTML是根据西方的字库而设定的，HTML中的2号字相当于中文的10Points字，而中文字库中却没有10Points字，与其接近的只有9Points字。因此，在HTML中输入2号中文字体就显得不够美观。使用CSS样式重定义宋体9Points字，使字体美观漂亮。操作步骤：①打开网页文件9-23.htm，输入文本内容。②打开“CSS样式”面板。

9.2.3CSS样式应用实例操作实例9-24制作925③单击“新建样式”按钮，在“新建样式”对话框，做如下设置：·选择“类”。创建自定义样式。·在“名称”框输入样式名。例如输入“.css3”。·“定义在”。可根据需要选择，如果只应用于本网页，则选择“仅对该文档”；如果需要应用于整个站点，则选择下拉列表框，定义一个.css文件。例如，选择“css2.css”。④单击“确定”按钮，在“样式定义”对话框做如下设置：字体选择“宋体”，字号大小选择“9”，单位选择“点数（pt）”，行高设置为150%。⑤单击“确定”按钮，9磅字制作完成。⑥选中需要应用9磅字的文本，在“CSS样式”面板选择9points字样式，右键单击，在快捷菜单选择“套用”选项。

⑦按快捷键Ctrl+S保存网页。

③单击“新建样式”按钮，在“新建样式”对话框，做如下设置：26操作实例9-27制作固定的背景图像所谓固定的背景图像是指背景图像不随滚动条拉动而变化；背景图像总是固定在某个位置（例如固定在网页中间），并不铺满整个网页。操作步骤：①新建网页文件9-27.htm。②打开“CSS样式”面板。③在“CSS样式”面板单击“新建样式”按钮。在“新建样式”对话框做如下设置：选择“标签”选项，在“标签”下拉列表选择“body”；选择“仅对该文档”选项。④单击“确定”按钮，在“样式定义”对话框，在“分类”中选择“背景”，然后做如下设置：·背景图像：单击“浏览”按钮选择背景图像。·重复：选择“不重复”，则图像只保留原始大小，不做重复铺设。·附件：选择“固定”，则背景图像不随网页滚动。·水平位置：选择“居中”。·垂直位置：选择“居中”。⑤单击“确定”按钮，“CSS样式”面板显示“body”样式。⑥按快捷键Ctrl+S保存。按快捷键F12预览网页

操作实例9-27制作固定的背景图像27第9章

模板与CSS样式

本章要点：u

模板的用途u

创建模板和设定可编辑区域u

应用模板u

编辑模板和网页更新u

CSS样式的用途u

设计CSS样式并更新网页第9章模板与CSS样式本章要点：289.1模板

9.1.1模板概述

所谓模板，实际上是一个范例页面，利用它可以生成具有统一结构与外观的多个页面。Dreamweaver将所有的模板文件存放在站点根目录的Templates子目录下，其扩展名为.dwt。

9.1模板9.1.1模板概述299.1.2创建模板

操作实例9-1将当前文档另存为模板操作步骤：①在“文件”菜单选择“打开”选项，选取一个文件。②文件打开后，继续在“文件”菜单选择“另存为模板”选项。③在“另存模板”对话框中，在“站点”下拉列表中选取站点，然后在“另存为”文本框中输入模板的名称。④单击“保存”按钮。模板文件将保存到指定站点的Templates文件夹中，文件扩展名为.dwt。

9.1.2创建模板操作实例9-1将当前文档另存为30操作实例9-2创建新的模板操作步骤：①在“窗口”菜单选择“模板”选项，打开“资源”面板。②单击“模板”按钮，显示模板面板。③在资源面板单击面板底部的“新建模板”按钮，一个新的无标题模板将被添加到模板列表中。④当模板仍处于选中状态时，为该模板输入一个名称。例如，“mainn⑤选中新建模板，单击“资源”面板底部的“编辑”按钮，进入新模板的编辑状态。⑥设计模板页面与设计普通网页基本一样，同样可以加入表格、层、图片、动画、设置页面属性等。一般先设计布局，然后填入一些固定不变的内容。例如，站点徽标（logo）、标题栏、导航栏、联系方式等。其他允许变化的内容可设定为可编辑区。⑦编辑完毕，按快捷键Ctrl+S保存模板文件。

操作实例9-2创建新的模板319.1.3设定模板的可编辑区域

可编辑区是该模板页面中可以修改的部分；锁定区是在所有页面中保持不变的页面布局部分。

9.1.3设定模板的可编辑区域可编辑区是该模板32操作实例9-3将当前模板的内容设定为可编辑区操作步骤：①在当前模板文件中，选取需要设置可编辑区的文本或其他内容。②在“常用”工具栏的“模板”下拉列表中，选择“可编辑区域”选项，打开“新建可编辑区域”对话框。③在“新建可编辑区域”对话框中，为区域输入惟一的名称。④单击“确定”按钮，可编辑区被一个有色矩形框环绕。⑤参照步骤①~③设置其他可编辑区。⑥按快捷键Ctrl+S保存模板文件。

操作实例9-3将当前模板的内容设定为可编辑区33操作实例9-5锁定可编辑区如果模板文件的某个区域已标记为可编辑区，而现在又需要将它重新锁定，使之不可编辑，可以使用“移除可编辑区域”命令重新锁定区域。操作步骤：①选中指定的“可编辑区”。②在“修改”菜单选择“模板”、“删除模板标记”选项，选中的“可编辑区”将被删除。

操作实例9-5锁定可编辑区349.1.4应用模板

操作实例9-6创建基于模板的新文档操作步骤：①在“文件”菜单选择“新建”选项。弹出“新建文档”对话框。②选择“模板”标签，显示如图9-7所示的“从模板新建”对话框。③在“模板用于”列表中选择指定站点，在“模板列表”中选择所需要的模板，“预览”窗口将显示该模板的页面。④当创建一个基于模板的新文档时，可以选择该文档是否保持依附于模板。如果选择“当模板改变时更新页面”选项时，一旦修改模板后，基于该模板的文档也将更新以反映在模板中所做的修改。如果不选择该选项，新建文档将作为模板的一个拷贝，并且是一个独立的HTML文件，不存在所谓的可编辑区或锁定区。因此，模板发生变化时并不修改该文档。⑤单击“创建”按钮，创建新文档。⑥编辑文档并保存。

9.1.4应用模板操作实例9-6创建基于模板的新文35操作实例9-7对已建文档应用模板

操作步骤：①打开指定文档。②执行下列操作之一，对当前文档应用模板。·在“修改”菜单选择“模板”、“应用模板到页”选项，弹出“选择模板”对话框。从列表中选择所需要的模板，单击“选定”按钮。如图9-10所示。·在“资源”面板的“模板”分类中选择所需要的模板，然后单击“应用”按钮。·从“资源”面板的“模板”分类中将所需要的模板拖动到文档窗口。

操作实例9-7对已建文档应用模板369.1.5编辑模板

操作实例9-12编辑一个当前文档所基于的模板文件操作步骤：①打开一个基于模板所创建的文档。②在“修改”菜单选择“模板”、“打开附加模板”选项，则打开所套用的模板文件。③按需要修改模板的内容或修改模板的页面属性。④按快捷键Ctrl+S保存所做的修改。⑤更新基于该模板的网页文件。

9.1.5编辑模板操作实例9-12编辑一个当前文档37操作实例9-15删除模板文件操作步骤：①在“资源”面板选中指定模板。②单击“删除”按钮。③在“确认删除”对话框单击“是”按钮。

操作实例9-15删除模板文件389.1.6更新基于模板的网页文件

操作实例9-18更新整个站点或使用某特定模板的所有文档操作步骤：①在“修改”菜单选择“模板”、“更新页面”选项，弹出“更新页面”对话框。②在“查看”下拉列表执行下列操作之一：·选择“整个站点”，然后从相邻的弹出式菜单中选择站点名称。该选项将更新选定站点中的所有基于模板所创建的网页文件。·选择“文件使用”，然后从相邻的弹出式菜单中选择模板名称。该选项将更新当前站点中使用该模板所建的网页文件。③在“更新”选项中选择“模板”选项。④单击“开始”按钮，Dreamweaver开始更新所指定的文件。如果选中了“显示记录”选项，Dreamweaver将提供更新的文件信息。

9.1.6更新基于模板的网页文件操作实例9-18更399.2文字样式

9.2.1CSS样式的基本操作1.CSS样式简介

CSS样式是一组在某个网页中设置的网页外观的格式属性，样式表包括该网页的所有格式。利用CSS，网页制作者可以有效地定制并改善网页。按CSS样式应用的形式，CSS样式一般分为嵌入式与外部链接式。所谓嵌入式是指在独立的网页中应用CSS样式；所谓外部链接式是指可应用于多个网页中，生成专门的*.css文件。2．创建CSS样式

9.2文字样式9.2.1CSS样式的基本操作40操作实例9-19创建新样式操作步骤：①在“窗口”菜单选择“CSS样式”选项，打开“CSS样式”面板。②单击“CSS样式”面板的“新建样式”按钮，弹出“新建CSS样式”对话框。③“新建CSS样式”对话框的各种选项如下：·类：创建自定义样式。·标签：使用已有的标签制作样式。单击“标签”下拉列表，选择已有的样式。·高级：用于对超级链接的4种状态进行设置，可以通过“选择器”下拉列表进行选择：a:Active：活动超级链接状态，即单击鼠标时的状态。a:Hover：鼠标指向超级链接时的状态。a:Link：默认的超级链接状态，即不做任何动作时的状态。a:Visited：已访问过的超级链接状态。·新建样式表文件：生成专门的*.css文件，该样式可应用于多个网页，是外部链接式样式。单击“确定”按钮之后，系统将提示保存CSS样式表文件。·仅对该文档：只对当前网页应用，是嵌入式样式。

操作实例9-19创建新样式41④选择“类”选项，在“名称”框输入自定义的CSS样式表名称（例如aa1）；选择“仅对该文档”选项。⑤单击“确定”按钮，打开如图9-18所示的“样式定义”对话框。⑥在对话框中可以定义样式表的文字、背景、边框、列表、区块、颜色等属性。⑦单击“确定”按钮，一个CSS样式创建完成。新的CSS样式显示在“CSS样式”面板中。

④选择“类”选项，在“名称”框输入自定义的CSS样式表名称（423．应用CSS样式操作实例9-20在当前网页中应用样式操作步骤：①打开网页文件。②打开“CSS样式”面板，面板中将显示自定义的CSS样式表。重定义的标签与超级链接的样式将自动应用，所以不在“CSS样式”面板中显示。③选中需要应用CSS样式的对象。例如，文本、图片、表格等。④在“CSS样式”面板中右键单击需要应用的CSS样式名称。⑤选择“套用”选项。

3．应用CSS样式439.2.2设置CSS样式的属性

1．类型类型选项卡的功能是定义样式的文本属性。·字体：设置字体。·大小：设置字号的大小，可选择不同的单位。·样式：设置字体的显示样式，包括：正常、斜体、偏斜体。·粗细：设置文本的粗细。包括：正常、粗体、特粗、细体等。·变量：文本变量。包括：正常、小型大写字母。·行高：设置文本的行高。·大小写：设置英文文本。包括：首字母大写、全部大写、全部小写。·颜色：设置文本的颜色。·修饰：修饰文本。可选择：下划线、上划线、删除线、闪烁和无。一般文本的默认设置是“无”，链接文本的默认设置是“下划线”。

9.2.2设置CSS样式的属性1．类型442．背景

背景选项卡的功能是定义网页对象的背景颜色。·背景颜色：设置对象的背景颜色。·背景图像：设置对象的背景图像。·重复：当背景图像不能填满页面时，决定是否重复和如何重复背景图像。·附件：决定背景图像是在其初始位置固定，还是与内容一起滚动。·水平位置：设置背景图像的起始水平位置。可选择左对齐、居中、右对齐等。·垂直位置：设置背景图像的起始垂直位置，可选择顶部、居中、底部等。

2．背景背景选项卡的功能是定义网页对象的背景颜色。453．区块

图9-20区块选项卡3．区块图9-20区块选项卡464．方框

图9-21方框选项卡4．方框图9-21方框选项卡475．边框

图9-22边框选项卡5．边框图9-22边框选项卡486．列表

图9-23列表选项卡6．列表图9-23列表选项卡497．定位

图9-24定位选项卡7．定位图9-24定位选项卡508．扩展

图9-25扩展选项卡8．扩展图9-25扩展选项卡519