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

使用CSS样式美化和布局网页 项目7 知识要点 了解CSS基本概念 1 掌握CSS样式的创建和使用方法 2 掌握CSS样式属性设置方法 3 7.1 网页展示：在“商旅管理”页面中应用CSS样式 在“商旅管理”页面中应用CSS样式 在“乐途网”站点的“ch7”文件夹中创建“商旅管理”页面ctmindex.html，运用表格布局页面，插入网页中相关的内容，再创建CSS样式，对网页内容进行美化，效果如图所示。 7.2 网页制作 7.2.1 使用表格布局制作“商旅管理页面” 步骤1 启动Dreamweaver CS4，新建HTML文档，将文档命名为ctmindex.html，保存在“乐途网”站点根目录下的“ch7”文件夹中。 步骤2 按照制作“乐途网”首页的方式，在ctmindex.html中插入表格，对“商旅管理”页面进行布局。 步骤3 在表格中对应位置插入相应图片或文本，并设置表格或单元格的背景颜色，完成“商旅管理”页面的制作 7.2 网页制作 7.2.2 创建文本CSS样式 步骤1 打开“商旅管理”子页（ctmindex.html），按下Shift+F11组合键，打开【CSS样式】面板，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。 步骤2 在【选择器类型】选项组中选择“类（可以应用于任何HTML元素）”。在【选择器名称】下拉列表框中输入类样式的名称：.black12。在【规则定义】选项组中选择“新建样式表文件”，若选择“仅限该文档”，则该样式只能应用在当前网页中。 7.2 网页制作 步骤3 单击“确定”按钮，弹出【将样式表文件另存为】对话框。将CSS规则定义在mycss.css文件中，保存在站点目录下“ch7”文件夹中。 步骤4 单击“保存”按钮，弹出【.black12的CSS规则定义】对话框，设置.black12类样式的属性。在【分类】中选择【类型】，设置字体大小为“12px”，行高为“20px”，颜色为“#000”，修饰设置为无。单击“确定”按钮，完成.black12的CSS规则的定义。 7.2 网页制作 7.2.3 创建表格CSS样式 步骤1 在【CSS样式】面板中，单击“新建CSS规则”按钮，在【新建CSS规则】对话框中定义名称为.talbe1的类样式，将样式规则定义在已经保存的mycss.css样式表文件中。 步骤2 单击“确定”按钮，打开【.table1的CSS规则定义】对话框。选择【分类】中的【背景】，设置表格背景颜色为“#9C0” 。 步骤3 选择【分类】中的【边框】，设置边框的样式、宽度和颜色。单击“确定”按钮，完成.table1样式规则的定义。 7.2 网页制作 7.2.4 创建超级链接CSS样式 步骤1 在【CSS样式】面板中，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。在【选择器类型】下拉列表框中选择“复合内容（基于选择的内容）”，设置网页中各种超级链接的风格 。 步骤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 以相同的方法，在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.2 网页制作 步骤3 选中要应用“table1”CSS样式的表格，如图所示。 步骤4 在【属性】的面板的【类】下拉列表中选择“table1”样式，如图所示，将所选中的表格设置为“table