网页设计7.pptVIP

第10章 基于CSS的网页布局技术 学习如何使用层叠样式表 (CSS) 创建一个类似的布局 使用 CSS 可以在定位元素方面进行更好地控制，减少所需的代码数量，并可以使用边距、边框、颜色等设置布局块格式。 内容 了解基于 CSS 的网页布局 课堂任务 CSS盒子模型 CSS定位 CSS排版（布局） 实例 了解基于 CSS 的网页布局(1/3) 基于 CSS 的布局使用块元素代替表格行和列的布局，所包含的代码数量要比具有相同特性的基于表格的布局中的代码数量少很多。 基于 CSS 的布局通常使用 div 标签，而不是 table 标签来创建用于布局的 CSS 布局块。可以将这些 CSS 布局块放置在页面上的任意位置，并为它们指定属性，如边框、边距、背景颜色等。 了解基于 CSS 的网页布局(2/3) 使用 Dreamweaver 可以创建层。 Dreamweaver 层是一个 HTML 页面元素，可以将它放置在页面上的任意位置。 更具体地说，它是一个div 标签。可以使用 Dreamweaver 将层拖动到页面上，然后将其放置在所需的位置。层充当保存资源（如图像、Flash 文件、文本等）的内容块。 很多情况下，插入的层的位置并不一定准确，特别是Dreamweaver并非真正的所见即所得的软件，网页的排版只有到浏览器中显示才可以真正看到排版的表现 了解基于 CSS 的网页布局(3/3) 层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。 内容 了解基于 CSS 的网页布局 课堂任务 CSS盒子模型 CSS定位 CSS排版（布局） 实例 课堂任务 检查设计草样 创建并保存新页面 插入层 向页面添加颜色 检查设计草样 使用 Dreamweaver 展示此设计。 创建并保存新页面 首先创建一个新网页，并将它保存到Web 站点的本地根文件夹 cafe_townsend 中 保存为index_css.html文件 在新文档顶部的“文档标题”文本框中，键入 Cafe Townsend 站点访问者在 Web 浏览器中查看页面时将在浏览器窗口标题栏中看到此标题 插入层 下面向网页中添加层。 从“插入”栏中选择“布局”模式。 单击“绘制层”。 将鼠标指针移动到页面上时，它将变为交叉线。将任意大小的层拖动到页面上，然后释放鼠标按钮。 插入层 单击该层左上角的选择柄， 选中此层。 在“属性”检查器中执行以下操作： 单击“层编号”文本框，将该层重命名为 banner_graphic。 “宽 (W)”： 700px。 “高 (H)”：90px。 “左 (L)” ：20px。 “上 (T)” ：20px。 添加更多层 现在，将向页面添加更多层。第一层 (banner_graphic) 将用作定位其它层的参考点。 在“插入”栏的“布局”类别中，单击“绘制层”，然后将另一个任意大小的层拖动到页面上。 单击新层的选择 柄以选中它。 添加更多层 选中新层后，在“属性”检查器中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 flash_fma。 在“宽 (W)”文本框中，输入 700px。 在“高 (H)”文本框中，输入 166px。 在“左 (L)”文本框中，输入 20px。 在“上 (T)”文本框中，输入 111px。 添加更多层 flash_fma层的上边距为111，保证不与banner_graphic层重合。 提示：当层重叠时，下面的图层的边框为虚线。 在新层外部单击一下，取消对其的选择。 选择“查看”“可视化助理”“CSS 布局背景”。 Dreamweaver 向层中添加背景颜色。这些颜色是随机选择的，并且不显示在已发布的 Web 页面上。它们只是 Dreamweaver 提供的可视化助理，用来帮助查看层以及其它各种块元素在页面上显示的位置。 添加更多层 接下来，将另外三个层拖动到页面上，置于 banner_graphic 层和 flash_fma 层的下面。 提示：通过按住 Ctrl 键并拖动，可连续绘制新的层 添加更多层 请使用“属性”检查器执行以下操作： 选择第一个层，将它命名为 header，并将它的大小设置为宽 700 像素，高 24 像素，左20px，上278px。 选择第二个层，将它命名为 center_content，然后将它的大小设置为宽 700 像素，高 350 像素，左20px ，上303px。 选择第三个层，将其命名为 footer，并将它的大小设置为宽 700 像素，高 24 像素，左20px，上654px。 在层的内部添加层 下面在center_content 层的内部添加层，其作用相当于表格单元格 在“插入”栏的“布