项目八CSS──设置海洋知识网页样式 （课件）-高二《网页设计与制作》同步教学（人民邮电版）

项目八CSS──设置海洋知识网页样式 设置页眉CSS样式 任务一 设置网页主体的CSS样式 任务二 设置页脚的CSS样式 任务三 任务一 设置页眉CSS样式 （一） 定义“body”的CSS样式 【操作步骤】 1.首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。 2.在网站根文件夹下面新建一个网页文档并保存为“index.htm”。 3.在菜单栏中选择【窗口】／【CSS样式】命令，即在【CSS样式】命令前打上“√”，打开【CSS样式】面板，如图所示。 4.在【CSS样式】面板中单击面板底部的按钮，在弹出的【新建CSS规则】对话框的【选择器类型】选项组中，点选【标签（重新定义特定标签的外观）】单选钮，在【标签】下拉列表中选择【body】选项，在【定义在】选项组中点选【仅对该文档】单选钮，如图所示。 5.单击按钮，进入【body的CSS规则定义】对话框，在【类型】分类中设置文本大小为“14像素”，如图所示 。 6.切换到【区块】分类，在【文本对齐】下拉列表中选择【居中】选项，如图所示。 7.切换到【方框】分类，在【边界】选项中勾选【全部相同】复选框。然后在【上】文本框中输入“0”，如图所示。 【操作步骤】 1.在网页中插入一个1行2列的表格，在【属性】面板中设置表格Id为“TopTable”，表格的填充、间距和边框均为“0”。 2.在表格被选中的状态下，在【CSS样式】面板中单击 按钮，弹出【新建CSS规则】对话框，参数设置如图所示。 （二） 定义页眉的CSS样式 3.单击 按钮，进入【保存样式表文件为】对话框，在【文件名】文本框中输入“css”，如图所示。 4.单击 按钮，进入【#TopTable的CSS规则定义（在css.css中）】对话框，在【背景】分类中设置背景颜色为“#33CCFF”，如图所示。 5.切换到【方框】分类，设置方框宽度为“800像素”，高度为“80像素”，边界全部为“0”，如图所示。然后单击 按钮，关闭对话框。 6.在【CSS样式】面板中单击 按钮，弹出【新建CSS规则】对话框，在【选择器类型】选项组中点选【类（可应用于任何标签）】单选钮。 7.在【名称】文本框中输入“.TopTd1”，在【定义在】选项组中点选【css.css】单选钮，如图所示。 8.单击 按钮，进入【.TopTd1的CSS规则定义（在css.css中）】对话框，在【方框】分类中设置宽度为“250像素”，如图所示。然后单击 按钮，关闭对话框。 9.选择表格的第1个单元格，在【属性】面板的【样式】下拉列表中选择【TopTd1】选项，将其样式应用到第1个单元格上，如图所示。 10.使用同样的方法创建类CSS样式“.TopTd2”，在【类型】分类中设置其字体为“幼圆”，文本大小为“36像素”，行高为“80像素”，颜色为“#000000”，在【背景】分类中设置其背景图像为“images/bj.jpg”，在【区块】分类中设置文本对齐方式为“居中”，然后将样式应用到第2个单元格上 ，如图所示。 11.在第1个单元格中插入图像“images/logo.jpg”，在第2个单元格中输入文本“一同走进神秘的海洋世界”，如图所示 。 任务二 设置网页主体的CSS样式 （一） 设置左侧栏目CSS样式 1.在页眉下面继续插入一个1行2列的表格，设置表格Id为“MidTable”，填充、边框均为“0”，间距为“3”。 2.在“css.css”中新建【高级】CSS样式“#MidTable”，设置背景颜色为“#0033FF”，方框宽度为“800像素”，高度为“300像素”，边界全部为“0”。 3.选择左侧单元格，在【属性】面板中设置其水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。 4.在“css.css”中创建【类】CSS样式“.MidTd1”，在【背景】分类中设置背景颜色为“#FFFFFF”，在【方框】分类中设置宽度为“150像素”，然后通过【属性】面板将该样式应用到左侧单元格。 5.在左侧单元格中插入一个6行1列的表格，设置表格ID为“MidTd1Table”，宽度为“80%”，填充、边框均为“0”，间距为“6”。 6.在“css.css”中创建【高级】CSS样式“#MidTd1Table td”，在【MidTd1Table td的CSS 规则定义（在css.css中）】对话框中定义也可以在“css.css”样式表文件中设置，如图所示 。 7.在单元格中输入文本并添加空链接，文本依次为“海洋奥秘”、“海洋生物”、“海洋气象”、“海洋科普”、“海洋科技”、“环保防污”。 8