网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第8章教案 项目8 设置海洋知识网页样式

1、项目八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.在网页中插入一个

2、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像素”，如图所示。然

3、后单击 按钮，关闭对话框。,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、设置其水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。 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.在“css.css”中创建基于表格“MidTd1Table”的超级链接【高级】CSS样式“#MidTd1Table a:link,#MidTd1Table a:visited”，如图所示。在【类型】分类中设置文本粗细为“粗体”，颜

5、色为“#FFFF00”，修饰效果为“无”。,9.继续在“css.css”中创建基于表格“MidTd1Table”的超级链接【高级】CSS样式“#MidTd1Table a:hover”，在【类型】分类中设置文本颜色为“#FF0000”，修饰效果为“下划线”。设置超级链接CSS样式前后以及在浏览器中的显示效果，如图所示。,（二） 设置右侧栏目的CSS样式,【操作步骤】 1.选择主体部分右侧的单元格，在【属性】面板中设置其水平对齐方式为“居中对齐”，垂直对齐方式为“顶端”。 2.在“css.css”中创建【类】CSS样式“.MidTd2”，在【背景】分类中设置背景颜色为“#FFFFFF”，然后通过【属性】面板将该样式应用到右侧单元格。 3.在右侧单元格中输入一段文本，并按Enter键将鼠标光标移到下一段，然后插入一个2行4列的表格，填充为“0”、边框为“1”，间距为“3”。 4.在“css.css”中创建【高级】CSS样式“#MidTable .MidTd2 p”，在【类型】分类中设置文本大小为“16像素”，行高为“30像素”，颜色为“#006600”，在【区块】分类中设置文本对齐方式为“

6、左对齐”。,5.将鼠标光标置于文本所在段，然后在【属性】面板中单击按钮，使文本缩进显示，如图所示。,6.将鼠标光标置于文本下面表格的第1行第1个单元格内，右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加“id=“MidTd2TableTd1”，如图所示。,7.在“css.css”中创建【高级】CSS样式“#MidTd2TableTd1，在【方框】分类中设置宽度为“150像素”，高度为“100像素”。 8.将鼠标光标分别置于第1行的其他单元格内，并右键单击文档左下角的“”标签，在弹出的快捷菜单中选择【设置ID】【MidTd2TableTd1】命令，把样式应用到这些单元格上。 9.在第1行的4个单元格中分别插入图像“images/1.jpg”、“images/2.jpg”、“images/3.jpg”和“images/4.jpg”。 10.运用同样的方法设置表格第2行第1个单元格的ID为“MidTd2TableTd2”，并在“css.css”中创建【高级】CSS样式“#MidTd2TableTd2”，在【类型】分类中设置文本大小为“16像素”，文本粗细为“粗体”，行高为“30像素”，在【背景】分类中设置背景颜色为“#00CCCC”，在【区块】分类中设置文本对齐方式为“居中”，最后把第2行的其他单元格的ID也设置为“MidTd2TableTd2”,11.在第2行的4个单元格中依次输入文本，如图所示。,任务三 设置页脚的CSS样式,【操作步骤】 1.在主体页面表格的下面，即页脚处插入一个1行1列的表格，表格ID为“FootTable”，填充、间距和边框均为“0”。 2.在“css.css”中创建高级CSS样式“#FootTable”，在【类型】分类中设置大小为“14像素”、“粗体”、行高为“40像素”，在【背景】分类中设置背景颜色为“#00CCFF”，在【区块】分类中设置文本对齐方式为“居中”，在【方框】分类中设置方框宽度为“800像素”。 3.最后输入相应的文本，如图所示。 4.最后再次保存文件,

《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第8章教案 项目8 设置海洋知识网页样式 》由会员E****分享，可在线阅读，更多相关《网页设计与制作 项目教学 教学课件 ppt 王君学 孙海伦 金哲第8章教案 项目8 设置海洋知识网页样式 》请在金锄头文库上搜索。