电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目八

步骤5 打开“新建CSS规则”对话框，“选择器类型”默认为“高级”，选择器名为“#content”，在“定义在”列表区选择“s1.css”，然后单击“确定”按钮。 步骤6 打开“#content 的 CSS 规则定义”对话框，在“分类”列表中选择“背景”，然后设置背景颜色为白色“#FFFFFF”。 步骤 7 在“分类”列表中选择“方框”，设置“宽”为 1 000 像素，“高”为 140像素，然后单击“确定”按钮，插入 ID 为“content”的 Div。 步骤 8 参照前面的方法，对照代码将插入点置于Div内，在其中嵌套一个ID为“news”的 Div，并打开“#news 的 CSS 规则定义”对话框。 步骤 9 在“分类”列表中选择“方框”，设置“宽”为362像素，“浮动”为左对齐，然后单击“确定”按钮。 步骤 10 在 ID 为“news”的 Div 中插入图像“main_05.jpg”，并将其中的文本删除。 步骤 11 对照代码将插入点置于图片后方，然后单击“插入Div标签”按钮，在ID 为“news”的 Div 中嵌套一个 ID 为“newscontent”的 Div，并打开“#newscontent 的CSS规则定义”对话框。设置“字体”为宋体，“大小”为12像素，“行高”为20像素，颜色为灰色“#999999”。 步骤 12 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“左对齐”。 步骤 13 在“分类”列表中选择“方框”，然后设置“宽”为 362 像素。 步骤 14 在“分类”列表中选择“列表”，然后设置“类型”为“方块”，“位置”为“外”，最后单击“确定”按钮。 步骤 15 将 ID 为“newscontent”的 Div 中文本删除后输入新文本，并将这些文本分为不同的段落。之后选中文本，单击“属性”面板上的“项目列表”按钮，Div中的文本将应用前面设置的列表样式。 步骤 16 对照代码将插入点置于 ID 为“news”的 Div 后，继续在 ID 为“content”的Div 中嵌套一个 ID 为“center”的 Div，并打开“＃ center 的 CSS 规则定义”对话框。在“分类”列表中选择“方框”，设置“宽”为 315 像素，“浮动”为左对齐。 步骤 17 在 ID 为“center”的 Div 中插入图像“main_06.jpg”，并将其中的文本删除。 步骤 18 将插入点置于 ID 为“center”的 Div 后，继续嵌套 ID 为“right”的 Div，并打开“#right 的 CSS 规则定义”对话框。 在“分类”列表中选择“方框”，设置“浮动”为“左对齐”，取消选择“填充”区域的“全部相同”复选框，设置“上”为22像素，“左”为19像素，之后单击“确定”按钮。 步骤 19 在 ID 为“right”的 Div 中插入图像“main_09.jpg”，这样网页中部就制作完成了。 3. 制作网页下部 网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中输入文本即可。 步骤 1 接着上面的操作，对照代码将插入点置于ID为“content”的Div后，插入ID 为“bottom”的 Div，并打开“#bottom 的 CSS 规则定义”对话框，设置“大小”为12 像素，“颜色”为灰色“#999999”。 步骤 2 在“分类”列表中选择“背景”，设置“背景颜色”为浅灰色“#EEEEEE”。 步骤 3 在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”。 步骤 4 在“分类”列表中选择“方框”，然后设置“宽”为1 000 像素，“高”为30像素，取消选择“填充”区的“全部相同”复选框，设置“上”为10像素，最后单击“确定”按钮。