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