计算机网络与网页制作 Chapter 12 ：页面布局高级技术

计算机网络与网页制作Chapter 12：页面布局高级技术复旦大学计算机学院肖川 cxiao@fudan.edu.cn

目标 • 使用CSS的“浮动”属性 • 使用CSS为不同的页面设置不同的布局 • display:none属性的应用

效果

1. 使一个图像浮动 选中 .floatimage项 1. 菜单插入>>图像，将图像i9100.jpg添加至about.html 2. 在“CSS样式”面板内新建一个类CSS规则.floatimage。 3. 在“属性”面板内设置图像所用的“类”规则。

效果

修改Float属性及其效果

2. 使用Div把页面分区 把标题区Div改成相对定位Div。

插入Div作为页面的不同区域 每一次插入在上一个Div的标签之后 • 面板插入>>布局>>插入Div标签，依次插入 • navigation Div • main Div • sidebar Div • footer Div

修改导航栏外观 由于Div已经设置ID，所以新建的ID CSS规则自动作用于相同ID的Div。面板 CSS样式>>新建CSS规则，#navigation

修改页脚区的背景色 由于Div已经设置ID，所以新建的ID CSS规则自动作用于相同ID的Div。面板 CSS样式>>新建CSS规则，#footer

3. 设置主栏区的宽度并浮动 新建名为“#main”的ID CSS规则。

往主栏区填充内容 复制main_content.html的内容。

4. 设置侧栏区并填充内容 1. 新建名为“#sidebar”的ID CSS规则。 2. 复制features.html的内容。

5. 让footer区位于下方 这个设置值的含义是“不允许浮动元素出现在我的任何一边” • 修改名为“#footer”的ID CSS规则。 • 已有#footer规则

6. 创建一个基于列表的导航栏 删除(或选中)占位符文字，菜单插入>>HTML>>文本对象>>项目列表，输入列表项文字。列表项之间用【Enter】分隔。为每个条目设置超链接：选中每个条目的文字，菜单插入>>超级链接，

使列表条目变成水平排列 在“CSS样式”面板新建名为“#navigation ul li”(或“#navigation li”)的CSS规则。

设置链接的外观和位置 这个间隙是列表<ul>的默认上边距造成的，左侧间隙是列表<ul>的默认左留白造成的。使得链接的可点击区域不限于文字，而是链接的箱框(或方框)。左侧间隙在“CSS样式”面板新建名为“#navigation a”(或“#navigation ul li a”)的CSS规则。

删除导航栏的间隙 在“CSS样式”面板新建名为“#navigation ul”的CSS规则。

增加导航链接的易用性 在“CSS样式”面板新建名为“#navigation a:hover”的CSS规则。

7. 改变栏区的布局 sidebar Div main Div 把#main的Float属性改成left，#sidebar的Float属性改成right。

8. 修改页面的总体宽度 间隔50px=840-520-270，若间隔为负数，则破坏页面布局。把#container的Width属性值改成840，Height属性值设为空(以便容器更好地适应所容纳的内容)。把#header的Width属性值也改成840，把#main的Width属性值改成520。

9. 创建相同高度的栏区 为侧栏区添加背景色使得栏区高度不一致的问题更加突出。

用背景图像模拟等高栏区的效果 这种模拟方法依赖于容器及栏区的固定宽度。

增加主栏区的留白 增加留白属性值将自动增加Div的总体宽度，故此处间隔缩小。为了避免可能的布局问题，更倾向于为Div内部的元素，如段落、列表等添加边距。

10.使用模板创建预设布局的页面 菜单文件>>新建

小结注：HTML页面元素的外观、格式等都是通过CSS样式来控制。要改变在属性面板内修改某个选项值的思维定势。 • 插入Div • 设置Div ID • 设定Div的样式 (高度、宽度、背景色、字体、留白、…) • 新建类CSS规则，手工指定Div的“类”规则 • 新建ID CSS规则，自动作用于同名Div • 新建复合内容CSS规则，自动作用于对应元素 • Float属性 • Clear属性 • 创建水平导航栏 • 模拟等高栏区的效果

计算机网络与网页制作 Chapter 12 ：页面布局高级技术