新实战Dreamweaver CS5 网页制作教程 第2版 教学课件 刘天真 第5章 使用CSS样式.pptVIP

5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.1.1 案例制作：书法背后的人生 5.2　标签样式与复合内容样式的创建与应用 通过本案例的操作，你将学会：如何创建标签样式，如何创建复合内容样式，设置CSS样式的各项属性，应用标签样式对网页背景、边距等进行设置，应用复合内容样式对超链接进行美化。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： （1）规划站点 新建文件夹“baiyangdian_lvyou_2”，将素材文件夹中所有文件和文件夹拷贝到“baiyangdian_lvyou_2”文件夹中。 （2）定义站点 在Dreamweaver CS5中，单击菜单“站点”→“新建站点”命令，通过“站点设置对象”对话框定义站点，站点名称为“白洋淀旅游”，本地站点文件夹设置为baiyangdian_lvyou_2文件夹。打开chaiputai_a.html。 （3）本实例是在5.1.3实战演练的基础上完成的，已经创建并应用如下类样式。 .title样式美化文章标题。 .content样式美化文章内容。 .banquan样式美化版权信息。 .image样式设置图像边框、边距。 .input样式美化表单元素。 （4）创建标签样式美化网页 ? 重新定义td标签美化网中的其它文字。 ? 重新定义form标签设置表单的下边距。 ? 重新定义body标签设置背景与外边距。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： 1）重新定义td标签。单击“CSS样式”面板右下角的新建CSS规则按钮 ，打开“新建CSS规则”对话框。 2）“选择器类型”项选择“标签”，“选择器名称”下拉列表框中选择“td”，“规则定义”选择“css_file.css”。如图所示。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： 3）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“分类”列表中选择“类型”，右侧设置字体为宋体，大小为12px，行高140%，颜色为#333，保存，预览。 4）重新定义form标签。单击“CSS样式”面板右下角的新建CSS规则按钮 ，打开“新建CSS规则”对话框。 5）“选择器类型”项选择“标签”，“选择器名称”下拉列表框中选择“form”，“规则定义”选择“css_file.css”。 6）单击“确定”按钮，打开“CSS规则定义”对话框，在左侧“方框”类别中“边界”部分选中复选框，“上”设为“0”，保存，预览，如图所示。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： 7）用同样方法重新定义body标签，“背景”类别中“背景图像”设为images/t1.gif，“背景重复”为“重复”；在“方框”类别中“边界”部分勾选复选框，“上”设为0像素，预览，如图所示，网页会自动应用标签样式。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： （5）创建复合内容样式 创建复合内容样式是对超链接的四种状态a:link、a:visited、a:hover和 a:active进行设置。 1）设置a:link。单击“CSS样式”面板右下角的“新建CSS规则”按钮 ，打开“新建CSS规则”对话框。 2）“选择器类型”项选择“复合内容”，“选择器名称”下拉列表框中选择“a:link”，“规则定义”选择“css_file.css”，单击“确定”按钮，打开“CSS规则定义”对话框。 3）在“分类”列表中选择“类型”。右侧设置字体为宋体，大小为12像素，颜色为#333，修饰设为无，单击“确定”按钮。 4）用同样的方法设置a:visited。“分类”列表中选择“类型”，字体为宋体，大小为12像素，颜色为#333，修饰设为无。 5.2.1　案例制作：利用标签样式与复合内容样式美化“采蒲台的苇”网页 5.2　标签样式与复合内容样式的创建与应用 操作步骤： 5）用同样的方法设置a:hover。“分类”列表中选择“类型”，字体为宋体，大小为12像素，颜色为#F00，修饰设为下划线。 6）用同样的方法设置a:act