使用CSS样式美化和布局网页项目管理知识分析.ppt

《使用CSS样式美化和布局网页项目管理知识分析.ppt》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、使用CSS样式美化和布局网页项目7知识要点了解CSS基本概念1掌握CSS样式的创建和使用方法2掌握CSS样式属性设置方法37.1网页展示：在“商旅管理”页面中应用CSS样式在“商旅管理”页面中应用CSS样式在“乐途网”站点的“ch7”文件夹中创建“商旅管理”页面ctmindex.html，运用表格布局页面，插入网页中相关的内容，再创建CSS样式，对网页内容进行美化，效果如图所示。7.2网页制作7.2.1使用表格布局制作“商旅管理页面”步骤1启动DreamweaverCS4，新建HTML文档，将文档命名为ctmindex.html，保存在“乐途网”站点根目录下的“

2、ch7”文件夹中。步骤2按照制作“乐途网”首页的方式，在ctmindex.html中插入表格，对“商旅管理”页面进行布局。步骤3在表格中对应位置插入相应图片或文本，并设置表格或单元格的背景颜色，完成“商旅管理”页面的制作7.2网页制作7.2.2创建文本CSS样式步骤1打开“商旅管理”子页（ctmindex.html），按下Shift+F11组合键，打开【CSS样式】面板，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。步骤2在【选择器类型】选项组中选择“类（可以应用于任何HTML元素）”。在【选择器名称】下拉列表框中输入类样式的名称：.black12。

3、在【规则定义】选项组中选择“新建样式表文件”，若选择“仅限该文档”，则该样式只能应用在当前网页中。7.2网页制作步骤3单击“确定”按钮，弹出【将样式表文件另存为】对话框。将CSS规则定义在mycss.css文件中，保存在站点目录下“ch7”文件夹中。步骤4单击“保存”按钮，弹出【.black12的CSS规则定义】对话框，设置.black12类样式的属性。在【分类】中选择【类型】，设置字体大小为“12px”，行高为“20px”，颜色为“#000”，修饰设置为无。单击“确定”按钮，完成.black12的CSS规则的定义。7.2网页制作7.2.3创建表格CSS样式步骤

4、1在【CSS样式】面板中，单击“新建CSS规则”按钮，在【新建CSS规则】对话框中定义名称为.talbe1的类样式，将样式规则定义在已经保存的mycss.css样式表文件中。步骤2单击“确定”按钮，打开【.table1的CSS规则定义】对话框。选择【分类】中的【背景】，设置表格背景颜色为“#9C0”。步骤3选择【分类】中的【边框】，设置边框的样式、宽度和颜色。单击“确定”按钮，完成.table1样式规则的定义。7.2网页制作7.2.4创建超级链接CSS样式步骤1在【CSS样式】面板中，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。在【选择器类型】下拉

5、列表框中选择“复合内容（基于选择的内容）”，设置网页中各种超级链接的风格。步骤2在【选择器名称】中选择【a:link】，将规则定义在mycss.css文件中，单击【确定】按钮，打开【a:link的CSS规则定义】对话框。选择【分类】中的【类型】，设置字体大小为“12px”，颜色为“#06F”，修饰为无（表示无下划线。单击“确定”按钮，完成a:link样式规则的定义。7.2网页制作步骤3同定义a:link的CSS规则方法一样，在步骤1对话框中选择【a:visited】，在【a:visited的CSS规则定义】对话框中设置a:visited超链接样式。步骤4以相同的

6、方法，在mycss.css文件中定义a:hover超链接样式。7.2网页制作7.2.5应用类CSS样式下面来应用创建好的CSS样式美化页面。因为在创建“.black12”、“.table”以及超级链接样式时，“商旅管理”栏目网页（ctmindex.html）为当前打开页面，因此，可以直接应用mycss.css样式表文件中的CSS样式。步骤1在“商旅管理”网页（ctmindex.html）的设计视图中，用鼠标选中商旅管理介绍的文本。步骤2在【属性】面板的【类】下拉列表中选择类样式“black12”，如图所示，这样所选中的文本就设置成“black12”所定义的样式。

7、【属性】面板中选择样式7.2网页制作步骤3选中要应用“table1”CSS样式的表格，如图所示。步骤4在【属性】的面板的【类】下拉列表中选择“table1”样式，如图所示，将所选中的表格设置为“table1”样式。选中要应用“table1”样式的表格在【属性】面板中设置类样式7.2网页制作7.2.6主页应用CSS样式表文件步骤1在右侧【文件】浮动面板中，鼠标双击打开“乐途网”首页index.html。步骤2单击【CSS样式】面板中的【附加样式表】命令，或者直接单击面板下的“附加样式表”按钮，打开【链接外部样式表】对话框。步骤3在“文件/URL”文本框中输入myc

8、ss.css的路径及文件