Transcript 12-页面布局高级技术
计算机网络与网页制作 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