1 / 26

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

计算机网络 与网页制作 Chapter 12 : 页面布局高级技术. 复旦大学计算机学院. 肖川 cxiao@fudan.edu.cn. 目标. 使用 CSS 的“浮动”属性 使用 CSS 为不同的页面设置不同的布局 display:none 属性的 应用. 效果. 1. 使 一个图像浮动. 选中 . floatimage 项. 1. 菜单 插入 >> 图像,将图像 i9100.jpg 添加至 about.html 2. 在“ CSS 样式”面板内新建一个类 CSS 规则 . floatimage 。 3. 在“属性”面板内设置图像所用的“类”规则。.

jenis
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

  3. 效果

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

  5. 效果

  6. 修改Float属性及其效果

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

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

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

  10. 修改页脚区的背景色 由于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规则

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

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

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

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

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

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

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

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

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

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

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

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

More Related