第4章-网页布局与排版.ppt

第四章网页布局与排版 4.1 页面布局 4.1.1 网页的版面布局 1. 确定显示分辨率 2. 版面布局的模式 T型结构布局 口型结构布局 三型布局 对称对比布局 POP布局 3. 广告位置 4.1 页面布局 4.1.2 设置可视化助理 1. CSS布局块 CSS布局外框 CSS布局背景 CSS布局框模型 AP元素轮廓线 2.表格显示 表格边框 表格宽度 其它选项 框架边框 图像地图 不可见元素 4.1 页面布局 4.1.3 设置标尺、辅助线和网格 1. 设置标尺 2. 设置布局辅助线 辅助线颜色 距离颜色 显示辅助线 靠齐辅助线 锁定辅助线 辅助线靠齐元素 清除全部 选择完成后 3. 使用布局网格 颜色 显示网格 靠齐到网格 间距 显示 完成选项设置后 4.2 使用表格布局 4.2.1 创建表格 4.2 使用表格布局 4.2.2 使用扩展表格模式 优点：容易选择对象 各表格的嵌套关系比较直观 4.2 使用表格布局 4.2.3 使用表格布局 实例4.1 使用表格进行如图4.10所示的网页布局 4.3 使用AP Div进行网页布局 4.3.1 插入AP Div 1. AP Div简介 Div标签被称为区隔标记 2. 插入AP Div 3. 设置AP Div属性 4. 使用“AP元素”面板 5. 使用CSS设置AP Div属性 4.3 使用AP Div进行网页布局 4.3.2 使用AP Div进行网页布局 1. 使用多个AP Div布局网页 2. AP Div的重叠与嵌套 AP Div的重叠 AP Div的嵌套 3. 对齐AP Div 4.3 使用AP Div进行网页布局 4.3.3 使用AP Div布局的优点 1. 内容和形式分离 2. 改变网页风格容易 3. 提高开发效率 4. 规范代码命名 5. 更好的团队合作 6. 解决浏览器的兼容性问题 4.3 使用AP Div进行网页布局 4.3.4 使用内置的CSS模板 1. 使用模板 2. 模板的类型 弹性布局 固定布局 液态布局 混合布局 绝对定位布局 4.3 使用AP Div进行网页布局 4.3.5 将AP Div转换成表格 1. 将AP Div转换成表格 2. 将表格转换成 AP Div 4.4 使用框架结构 4.4.1 框架网页 1. 框架网页实例【实例4.2】 2. 框架和框架集 4.4 使用框架结构 4.4.2 框架集网页 1. 创建一个新的框架集网页 两种方法 2. 保存设置框架集 3. 编辑框架结构 4. 父框架和子框架 4.4 使用框架结构 4.4.3 设置框架网页的属性 1. 设置框架集属性 2. 设置框架属性 4.4 使用框架结构 4.4.4 框架链接的目标 1. 设置网页元素的链接目标 _black _parent _self _top 2. 设置网页的缺省显示区域 4.4 使用框架结构 4.4.5 关于框架的建议 使用框架的不足之处： 难以实现不同框架中各元素的精确图形对齐 对导航进行测试可能很耗时间 访问者可能难以将特定页面设为书签 4.5 CSS基础 4.5.1 CSS基础 1. 什么是CSS 2. CSS的作用 1) 将格式和结构分离 2) 更容易控制页面的布局 3) 可以制作出体积更小下载更快的页面 4) 可以更快更容易的维护更新大量网页 5) 良好的浏览器兼容性 4.5 CSS基础 4.5.1 CSS基础（续） 3. CSS应用举例【实例4.3】 4.5 CSS基础 4.5.1 CSS基础（续） 4. 网页中的CSS代码 4.5 CSS基础 4.5.2 新建CSS样式 1. 新建CSS样式 1) 新建CSS样式规则 2) 指定要创建的CSS规则的选择器类型 3) 选择要定义规则的位置 4) 完成对样式属性的设置 2. 重定义标签的外观 3. 使用类定义样式 4.5 CSS基础 4.5.2 新建CSS样式（续） 4. 使用复合内容定义超级链接的样式 a:link：定义超链接文字的样式 a:visited：定义访问过的超链接文字的样式 a:hover：定义鼠标移过超链接文字时的样式 a:active：定义活动的超链接文字的样式 【实例4.4】 4.5 CSS基础 4.5.2 新建CSS样式（续） 5. 使用ID定义样式 6. 附加样式文件 1) 存放在HTML标签的属性中 2) 存放在文件头的HEAD…/HEAD之间 3) 存放在外部文件（样式表文件）中 4.5 CSS基础 4.5.3 设置CSS属性 1. 使用规则定义对话框 2. 使用面板组 4.5.4 CSS文件模板 4.6 CSS属性 4