12-页面布局高级技术

Report
计算机网络与网页制作
Chapter 12:页面布局高级技术
复旦大学计算机学院
肖川
[email protected]
1
目标



使用CSS的“浮动”属性
使用CSS为不同的页面设置不同的布局
display:none属性的应用
2
效果
3
1. 使一个图像浮动



1. 菜单 插入>>图像,
将图像i9100.jpg添加至
about.html
2. 在“CSS样式”面板
内 新 建 一 个 类 CSS 规
则.floatimage。
3. 在“属性”面板内设
置图像所用的“类”规
则。
4
选中
.floatimage项
效果
5
修改Float属性及其效果
6
2. 使用Div把页面分区

把标题区Div改成相对定位Div。
7
插入Div作为页面的不同区域

面板 插入>>布局>>插入Div标签,依次插入




navigation Div
main Div
sidebar Div
footer Div
每一次插入在上一
个Div的标签之后
8
修改导航栏外观

由于Div已经设置ID,
所以新建的ID CSS规
则自动作用于相同ID
的Div。
面板 CSS样式>>新建CSS规则,#navigation
9
修改页脚区的背景色

由于Div已经设置ID,
所以新建的ID CSS规
则自动作用于相同ID
的Div。
面板 CSS样式>>新建CSS规则,#footer
10
3. 设置主栏区的宽度并浮动

新建名为“#main”的ID CSS规则。
11
往主栏区填充内容

复制main_content.html的内容。
12
4. 设置侧栏区并填充内容


1. 新建名为“#sidebar”的ID CSS规则。
2. 复制features.html的内容。
13
5. 让footer区位于下方

这个设置值的含义是
“不允许浮动元素出
现在我的任何一边”
修改名为“#footer”的ID CSS规则。

已有#footer规则
14
6. 创建一个基于列表的导航栏


删除(或选中)占位符文字,菜单 插入>>HTML>>文本对象
>>项目列表,输入列表项文字。列表项之间用【Enter】
分隔。
为每个条目设置超链接:选中每个条目的文字,菜单 插入
>>超级链接,
15
使列表条目变成水平排列

在 “ CSS 样 式 ” 面 板 新 建 名 为 “ #navigation ul li ” ( 或
“#navigation li”)的CSS规则。
16
设置链接的外观和位置

在 “ CSS 样 式 ” 面 板 新 建 名 为 “ #navigation a ” ( 或
“#navigation ul li a”)的CSS规则。
使得链接的可点击区
域不限于文字,而是
链接的箱框(或方框)。
这个间隙是列表<ul>
的默认上边距造成的,
左侧间隙是列表<ul>
的默认左留白造成的。
左侧间隙
17
删除导航栏的间隙

在“CSS样式”面板新建名为“#navigation ul”的CSS规
则。
18
增加导航链接的易用性

在“CSS样式”面板新建名为“#navigation a:hover”的
CSS规则。
19
7. 改变栏区的布局

把#main的Float属性改成left,#sidebar的Float属性改成
right。
sidebar Div
main Div
20
8. 修改页面的总体宽度



把#container的Width属性值改成840,Height属性值设为空(以便容器
更好地适应所容纳的内容)。
把#header的Width属性值也改成840,
把#main的Width属性值改成520。
21
间隔50px=840-520-270,
若间隔为负数,则破坏页面布局。
9. 创建相同高度的栏区

为侧栏区添加背景色使得栏区高度不一致的问题更加突出。
22
用背景图像模拟等高栏区的效果
这种模拟方法依
赖于容器及栏区
的固定宽度。
23
增加主栏区的留白
24
增加留白属性值将自动增加Div的总体
宽度,故此处间隔缩小。为了避免可能
的布局问题,更倾向于为Div内部的元
素,如段落、列表等添加边距。
10.使用模板创建预设布局的页面

菜单 文件>>新建
25
小结

插入Div







设置Div ID
设定Div的样式 (高度、宽度、背景色、字体、留白、…)


注:HTML页面元素的
外观、格式等都是通过
CSS样式来控制。要改
变在属性面板内修改某
个选项值的思维定势。
新建类CSS规则,手工指定Div的“类”规则
新建ID CSS规则,自动作用于同名Div
新建复合内容CSS规则,自动作用于对应元素
Float属性
Clear属性
创建水平导航栏
模拟等高栏区的效果
26

similar documents