Div + CSS 混合布局实例.doc

Div + CSS混合布局实例一、准备工作目录及素材1、在 D：盘上创建名为 myweb的新文件夹。2、准备所需素材。拷贝 F:网页素材网站重构源文件第3章 中的 images 文件夹到 D:myweb文件夹中。3、在 D:myweb文件夹中新建子文件夹 style 。 二、定义站点1、启动 Dreamweaver cs4，选择“站点 ”“管理站点”。 2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。 4、在“站点名称”文本框中，输入 远航 Wireless Services 作为站点名称。 5、在“本地根文件夹”文本框中，指定 D:myweb 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。 6、在“默认图像文件夹”文本框中，指定 D:myweb 文件夹中已有的 images 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。9、从“分类”列表中选择“本地信息”，“HTTP 地址”须根据实际情况做相应修改。10、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。 11、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。三、了解你的任务下图是一张为 远航 Wireless Services站点设计的完整的和符合要求的设计草样。作为 Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的 Web 页面。四、创建并保存新页面 建立站点并检查设计草样后，你就可以开始创建 Web 页面了。首先你将创建一个新页面，并将它保存到你的 Web 站点的本地根文件夹 D:myweb中。该页面最终将成为 远航 Wireless Services站点的主页。1、在 Dreamweaver cs4 中，选择“文件”“新建”。 2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“HTML”，在“布局”列表中选择“无”，然后单击“创建”按钮，从而创建一个新的 HTML 文档。 3、在新文档顶部的“文档标题”文本框中，输入“远航网欢迎您！” 。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。 4、选择“文件”“另存为”。 5、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的D:myweb文件夹并打开该文件夹。 6、在“文件名”文本框中输入 index.html，然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。五、制作页面布局1、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。2、在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 pagebox 。3、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 pagebox层。4、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在结束标签之前”，Div 容器选择 “，“ID” 设置为 menu 。设置完成后单击“确定”按钮，在页面中将插入 menu 层。5、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 header 。设置完成后单击“确定”按钮，在页面中将插入 header层。6、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 main 。设置完成后单击“确定”按钮，在页面中将插入 main层。7、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在开始标签之后”，Div 容器选择 “，“ID” 设置为 main_top。设置完成后单击“确定”按钮，在页面中将插入 main_top层。8、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 left 。设置完成后单击“确定”按钮，在页面中将插入 left层。9、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 right 。设置完成后单击“确定”按钮，在页面中将插入 right层。10、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 main_bottom 。设置完成后单击“确定”按钮，在页面中将插入 main_bottom 层。11、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 link。设置完成后单击“确定”按钮，在页面中将插入 link 层。12、再次单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 footer 。设置完成后单击“确定”按钮，在页面中将插入 footer层。13、切换到代码视图，将一些不必要的文字删除。14、按快捷键 Ctrl+S 保存该页面。六、制作页面导航1、双击“CSS样式”面板上的“CSS样式”标签，展开“CSS样式”面板。2、单击“CSS样式”面板下部的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“标签”，在“选择器名称”中输入 * ，在“规则定义”中选择“新建样式表文件”。3、单击“新建CSS规则”对话框中的“确定”按钮，然后在弹出的“将样式表文件另存为”对话框中，将新建的样式表文件保存为 D:mywebstylecss.css .4、在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中分别设置“填充”和“边界”都为0 。5、在“分类”列表中的单击“边框”选项，然后在弹出的选项卡中设置“宽度”为0 。6、在“CSS 规则定义”对话框中单击“确定”按钮，Dreamweaver 将自动打开刚刚建立的外部样式表文件 css.css ，同时页面会自动链接到该 CSS 文件。7、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“标签”，在“选择器名称”中选择 body ，在“规则定义”中选择“css.css”。8、单击“新建CSS规则”对话框中的“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“类型”选项，然后在弹出的选项卡中分别设置“字体”为“宋体”，“大小”为12px，“颜色”为#575757 。9、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“居中”。10、单击“确定”按钮，完成该 CSS 规则的定义。11、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #pagebox，在“规则定义”中选择“新建样式表文件”。12、单击“新建CSS规则”对话框中的“确定”按钮，然后在弹出的“将样式表文件另存为”对话框中，将新建的样式表文件保存为 D:mywebstyleDiv.css .13、在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimagesbj.jpg ，“重复”选择“横向重复”。15、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽”为100% ，“高”为100% ，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。16、在“CSS 规则定义”对话框中单击“确定”按钮，完成该 CSS 规则的定义。17、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #menu，在“规则定义”中选择“Div.css”。18、单击“新建CSS规则”对话框中的“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。19、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽”为779px ，“高”为80px 。20、单击“确定”按钮，完成该 CSS 规则的定义。21、将光标移到 menu 层中，将多余的文本内容删除，然后插入图像D:mywebimages301.jpg。22、用相同的方法，在该层中插入其它的图像（302.jpg308.jpg）。23、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #menu img，在“规则定义”中选择“Div.css”。24、单击“新建CSS规则”对话框中的“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中的“填充（Padding）”选项区中设置“左”为 4px 。25、单击“确定”按钮，完成该 CSS 规则的定义。26、按 Ctrl+S 保存该网页，然后按 F12 在浏览器中预览该页面。七、制作页面顶部内容1、双击“CSS样式”面板上的“CSS样式”标签，展开“CSS样式”面板。2、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #header，在“规则定义”中选择“Div.css”。3、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为779px ，“高”为 184px ，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。4、单击“确定”按钮，完成该 CSS 规则的定义。5、将光标移到 menu 层中，将多余的文本内容删除，然后插入图像D:mywebimages309.jpg。6、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #main，在“规则定义”中选择“Div.css”。7、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages310.jpg ，“重复”选择“不重复”。9、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽”为795px ，“高”为 694px ，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。10、单击“确定”按钮，完成该 CSS 规则的定义。11、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #main_top，在“规则定义”中选择“Div.css”。12、单击“确定”按钮。13、在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为570px ，“高”为 48px ，在“填充（Padding）”选项区中设置“上”为 15px，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。14、单击“确定”按钮，完成该 CSS 规则的定义。15、将光标移到 main_top层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。16、选中 main_top 层中输入的所有文字内容，单击属性面板中的“项目列表”按钮。17、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #main_top li，在“规则定义”中选择“Div.css”。18、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“列表”选项，然后在弹出的选项卡中设置“类型”为“无（none）”。19、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽”为80px ，“高”为20px ，“浮动”为“left”。20、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。21、单击“确定”按钮，完成该 CSS 规则的定义。22、按 Ctrl+S 快捷键保存该网页，然后按 F12 快捷键在浏览器中预览该页面。八、制作页面左侧内容1、双击“CSS样式”面板上的“CSS样式”标签，展开“CSS样式”面板。2、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #left，在“规则定义”中选择“Div.css”。3、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为 194px ，“高”为 352px ，“浮动”为“left”，在“边界（Margin）”选项区中分别设置“上为 5px。5、在“分类”列表中的单击“边框”选项，然后在弹出的选项卡中设置 right的“样式”为 “虚线”，“宽度”为 1px ，“颜色”为 #B8B8B8 。6、在“分类”列表中的单击“区块”选项，设置“文本对齐”为 “left”。7、单击“确定”按钮，完成该 CSS 规则的定义。8、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。9、在弹出的“插入 Div 标签”对话框中，“插入”选择“在开始标签之后”，Div 容器选择 “，“ID” 设置为 left1。10、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 left1层。11、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #left1，在“规则定义”中选择“Div.css”。12、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 159px ，“高”为 117px ，在“边界（Margin）”选项区中分别设置“左”为 28px，“右”为 7px。13、单击“确定”按钮，完成该 CSS 规则的定义。14、将光标移到 left1 层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages311.gif。15、按 Shift+Enter 换行，然后 输入（或者复制+粘贴）相应的文本内容。16、选中 left1层中输入的所有文字内容，单击属性面板中的“项目列表”按钮。17、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #left1 li，在“规则定义”中选择“Div.css”。18、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“列表”选项，然后在弹出的选项卡中设置“类型”为“无（none）”。19、在“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages312.gif ，“重复”选择“不重复”，“水平位置”设置为 10px。20、在“分类”列表中的“类型”选项，然后在弹出的选项卡中设置“行高”为 20px。21、在 “分类”列表中的“区块”选项，然后在弹出的选项卡中设置“文字缩进”为 30px 。22、单击“确定”按钮，完成该 CSS 规则的定义。23、用同样的方法，制作 left2 层和 left3 层。24、完成后，按 Ctrl+S 快捷键保存该网页，然后按 F12 快捷键在浏览器中预览该页面。九、制作页面主体内容1、双击“CSS样式”面板上的“CSS样式”标签，展开“CSS样式”面板。2、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #right，在“规则定义”中选择“Div.css”。3、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages315.gif ，“重复”选择“不重复”。4、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽”为 561px ，“高”为 352px ，“浮动”为“left”，在“边界（Margin）”选项区中分别设置“上为 5px，“左为 9px。5、单击“确定”按钮，完成该 CSS 规则的定义。6、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。7、在弹出的“插入 Div 标签”对话框中，“插入”选择“在开始标签之后”，Div 容器选择 “，“ID” 设置为 right1。8、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 right1 层。9、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #right1，在“规则定义”中选择“Div.css”。10、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages316.gif ，“重复”选择“不重复”。11、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 110px ，“高”为 249px ，“浮动”为“left”；在“填充（Padding）”选项区中设置“左”为 9px，“右”为 10px，在“边界（Margin）”选项区中设置“上”为 10px，“下”为 5px，“左”为 8px。12、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。13、单击“分类”列表中的“类型”选项，然后在弹出的选项卡中设置“行高”为 20px ，14、单击“确定”按钮，完成该 CSS 规则的定义。15、将光标移到 right1层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages317.gif。16、在刚插入的图像后面单击，按 Shift+Enter 换行，然后输入（或者复制+粘贴）相应的文本内容。17、在刚插入的图像后面单击，然后插入图像 D:mywebimages318.gif。18、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #right1 img，在“规则定义”中选择“Div.css”。19、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中的“边界（Margin）”选项区中设置“上”为 8px。20、单击“确定”按钮，完成该 CSS 规则的定义。21、类似地，在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。22、在弹出的“插入 Div 标签”对话框中，“插入”选择“在 标签之后”，Div 容器选择 “，“ID” 设置为 right2。23、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 right2层。24、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #right2，在“规则定义”中选择“Div.css”。25、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages316.gif ，“重复”选择“不重复”。26、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 110px ，“高”为 249px ，“浮动”为“left”；在“填充（Padding）”选项区中设置“左”为 9px，“右”为 10px，在“边界（Margin）”选项区中设置“上”为 10px，“下”为 5px，“左”为 5px。27、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。28、单击“分类”列表中的“类型”选项，然后在弹出的选项卡中设置“行高”为 20px ，29、单击“确定”按钮，完成该 CSS 规则的定义。30、将光标移到 right2层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages319.gif。31、在刚插入的图像后面单击，按 Shift+Enter 换行，然后输入（或者复制+粘贴）相应的文本内容。32、在刚插入的图像后面单击，然后插入图像 D:mywebimages320.gif。33、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #right2 img，在“规则定义”中选择“Div.css”。34、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中的“边界（Margin）”选项区中设置“上”为 8px。35、单击“确定”按钮，完成该 CSS 规则的定义。36、用类似的方法，制作 right3 层和 right4 层。37、类似地，在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。38、在弹出的“插入 Div 标签”对话框中，“插入”选择“在 标签之后”，Div 容器选择 “，“ID” 设置为 right5。39、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 right5层。40、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #right5，在“规则定义”中选择“Div.css”。41、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages323.gif ，“重复”选择“不重复”。42、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 107px ，“高”为 60px ，“浮动”为“left”；在“填充（Padding）”选项区中设置“左”为 8px，“右”为 12px，在“边界（Margin）”选项区中设置“左”为 8px。43、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。44、单击“分类”列表中的“类型”选项，然后在弹出的选项卡中设置“行高”为 20px ，45、单击“确定”按钮，完成该 CSS 规则的定义。46、将光标移到 right5层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages324.gif。47、在刚插入的图像后面单击，按 Shift+Enter 换行，然后输入（或者复制+粘贴）相应的文本内容。48、用类似的方法，制作 right6 层、right6 层和 right8 层。49、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #main_bottom，在“规则定义”中选择“Div.css”。50、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages328.gif ，“重复”选择“不重复”。51、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 737px ，“高”为 159px ，“清除”为“left”；在“填充（Padding）”选项区中设置“上”为 10px，在“边界（Margin）”选项区中设置“上”、“下”均为0，“右”、“左”均为auto 。52、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。53、单击“确定”按钮，完成该 CSS 规则的定义。54、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。55、在弹出的“插入 Div 标签”对话框中，“插入”选择“在开始标签之后”，Div 容器选择 “，“ID” 设置为 main_bottom1。56、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 main_bottom1层。57、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #main_bottom1，在“规则定义”中选择“Div.css”。58、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages329.gif ，“重复”选择“不重复”。59、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 119px ，“高”为 62px ，“浮动”为“left”；在“填充（Padding）”选项区中设置“上”为 8px，“左”为 10px，“右”为 10px，在“边界（Margin）”选项区中设置“左”为 6px。60、单击“确定”按钮，完成该 CSS 规则的定义。61、将光标移到 right5层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages330.gif。62、在刚插入的图像后面单击，输入相应的文字，然后按 Shift+Enter 换行，然后输入（或者复制+粘贴）相应的文本内容。63、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #main_bottom1 img，在“规则定义”中选择“Div.css”。64、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“区块”选项，然后在弹出的选项卡中设置“垂直对齐”为“文本顶对齐”。65、在“分类”列表中单击“方框”选项，然后在弹出的选项卡的“边界（Margin）”选项区中设置“下”为 5px，“右”为 5px。66、单击“确定”按钮，完成该 CSS 规则的定义。67、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“类”，在“选择器名称”中输入 .font01，在“规则定义”中选择“css.css”。68、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“分类”列表中的“类型”选项，然后在该选项卡中设置“字体”为“宋体”，“大小”为12px ，“粗细”为 “粗体，“行高”为 20px 。69、单击“确定”按钮，完成该 CSS 规则的定义。70、拖选相应的文本内容，然后在“属性”面板中的“类”列表中选择刚刚定义的类样式 font01。71、用类似的方法，制作 main_bottom2层、main_bottom3 层、main_bottom4 层和main_bottom5 层。72、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #link，在“规则定义”中选择“Div.css”。73、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 795px ，“高”为 62px ；在“填充（Padding）”选项区中设置“上”为 18px。74、单击“确定”按钮，完成该 CSS 规则的定义。75、将光标移到 link层中，将多余的文本内容选中并删除，然后插入相应的图像。76、再次单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“复合内容”，在“选择器名称”中输入 #link img，在“规则定义”中选择“Div.css”。77、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“方框”选项，然后在弹出的选项卡的“边界（Margin）”选项区中设置“左”为 18px，“右”为 18px。78、单击“确定”按钮，完成该 CSS 规则的定义。79、完成后，按 Ctrl+S 快捷键保存该网页，然后按 F12 快捷键在浏览器中预览该页面。十、制作页面版底1、单击“CSS样式”面板下部的“新建CSS规则”按钮。2、在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #footer，在“规则定义”中选择“Div.css”。3、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages334.gif ，“重复”选择“横向重复”。4、在“分类”列表中的单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“左对齐”。5、在“分类”列表中的单击“方框”选项，然后在弹出的选项卡中设置“宽度”为 100% ，“高度”为 78px 。6、单击“确定”按钮，完成该 CSS 规则的定义。7、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。8、在弹出的“插入 Div 标签”对话框中，“插入”选择“在开始标签之后”，Div 容器选择 “，“ID” 设置为 footer_left。9、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 footer_left层。10、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #footer_left，在“规则定义”中选择“Div.css”。11、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“区块”选项，然后在弹出的选项卡中设置“文本对齐”为“右对齐”。12、在“分类”列表中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 346px ，“高”为 65px ，“浮动”为“left”；在“填充（Padding）”选项区中设置“上”为 13px。13、单击“确定”按钮，完成该 CSS 规则的定义。14、将光标移到 footer_left层中，将多余的文本内容选中并删除，然后插入图像 D:mywebimages335.gif。15、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。16、在弹出的“插入 Div 标签”对话框中，“插入”选择“在标签之后”，Div 容器选择 “，“ID” 设置为 footer_right。17、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 footer_right层。18、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #footer_right，在“规则定义”中选择“Div.css”。19、单击“确定”按钮，在随后弹出的“CSS 规则定义”对话框中单击“方框”选项，然后在弹出的选项卡中设置“宽”为 445px ，“高”