网页制作案例教程9-10章.pdf

第九章 层叠样式表的使用 本章学习要点 掌握Css样式的编辑方法 掌握如何使用Css样式表修饰页面 任务一 产品介绍 【任务综述】 本例是一个产品介绍网页，效果如图9-1所示，通过本案例主 要实现： （1）CSS类型属性 （2）CSS区块属性 （3）CSS方框属性 （4）CSS边框属性 （5）CSS列表属性 （6）CSS扩展属性 （7）建立高级样式 任务一 产品介绍 【任务实现】 步骤一：设置CSS“类型”属性和CSS“方框”属性 � CSS CSS CCSSSS CCSSSS � 操作步骤： (1) 打开本书配套光盘中的原始文件 “ch9\1\moban.html”，在Dreamweaver CS3主窗口中，将光标置于A1单元格中， 删除文字A1。在此单元格中插入一个4行1 列的表格。其中“宽度”为“90%”， “填充”、“间距”、“边框”均设置为 0，如图9-2所示，并在“属性”面板中设 置表格的“对齐”方式为“居中对齐”。 任务一 产品介绍 (2) 将光标置于第一行单元格，在单元格中分别插入图像 “ch9\1\images\hj.jpg”和“ch9\1\js.txt”中的第一段文字。并将图像的 “宽”和“高”分别设置为“100”。如图9-3所示。 (3) 打开右侧的CSS面板，如图9-4所示。然后选 中“CSS样式”面板。 任务一 产品介绍 (4) 单击【新建CSS规则】按钮 ，弹出如图9-5所示的“新建CSS规则” 对话框，在“选择器类型”中选中“类”单选按钮，在“名称”下拉列 表框中输入“.wz”,选中“仅对该文档”单选按钮，如图9-6所示。 任务一 产品介绍 (5) 单击【确定】按钮之后弹出“.wz的CSS规则定义”对话框，如图9-7 所示。 任务一 产品介绍 (6) 在“.wz的CSS规则定义”对话框左边的“分类”列表框中选择“类 型”，在右边按照图9-8所示设置相关的属性。然后单击【确定】按钮。 此时在CSS面板中加入了“.wz”类样式。如图9-9所示。 任务一 产品介绍 (7) 在Dreamweaver CS3主窗口中，选中单元格中的文字（如图9-3），然 后在“属性”面板的“样式”下拉列表框中选择“.wz”,此时将新建立 的类样式应用到了文字当中。 (8) 按照(4)、(5)所述，创建 “.image_left”类样式，打开 “.image_letf的CSS规则定义” 对话框，在“.image_left的CSS 规则定义”对话框左边的“分 类”列表框中选择“方框”， 按照图9-10所示设置相关的属 性。然后单击【确定】按钮。 此时在CSS面板中加入了 “.image_left”类样式。 任务一 产品介绍 (9) 在Dreamweaver CS3主窗口中，选中单元格中的图像，然后在“属性” 面板的“类”下拉列表框中选择“.image_left”,此时将新建立的类样式 应用到了图像上。设置完成后的效果如图9-11所示。 (10) 按照上述方法，依次在第2、3、4行单元格中添加相应的文字和图像。 然后保存文档。 任务一 产品介绍 � 步骤二：“区块”属性、“边框”属性和“列表”属性 � 操作步骤： (1)在Dreamweaver CS3主窗口中，将光标置于A3单元格中，删除文字A3。 在此单元格中插入一个8行1列的表格。其中“宽度”为“75%”，“填 充”、“间距”、“边框”均设置为0，并在“属性”面板中设置表格的 “对齐”方式为“居中对齐”。 (2)将光标置于第一行单元格，单击菜单【插入记录】→【HTML】→【文 本对象】→【列