第5章 页面布局设计.ppt

第五章页面布局设计 本章内容 掌握表格布局的用法掌握框架布局的用法使用DIV布局设计页面 制作51job今日职场热点制作后台管理页面制作个人博客banner部分 本章目标 1 1什么是页面布局 banner article sidebar footer 1 2布局的设计步骤 划分页面的版块 设计草图搭建页面结构添加内容 2 1什么是表格布局 表格可以用来组织有格式的数据 Table布局 2 2表格布局的特点 优点方便排列有规律 结构均匀的内容或数据页面的开发快速 简单缺点代码臃肿不利于搜索引擎优化SEO页面加载速度慢灵活性不大 难于修改 2 3案例分析 制作51job今日职场热点 1 使用一行三列搭建页面结构2 根据需要嵌套一个多行一列表格 实现步骤 第一步 搭建页面结构 无边框 间距和边距为0 实现步骤 第二步 添加第一列的内容 热门话题 老公竟有这样的 职业病 我要 实现步骤 第三步 添加第二列的内容 实现步骤 第四步 添加第三列的内容 在线沙龙 简历中要写明薪资吗 简历中要不要写明薪资 这是一个让求职者在制作简历时感到十分纠结的问题 万一写低了 阅读全文 3 1什么是框架布局 框架布局是采用frameset将浏览器窗口分成几个独立的窗口 分别显示不同的页面的布局方式 左框架 顶端框架 右框架 3 2框架布局的特点 优点支持滚动条 方便导航 节省页面下载时间等缺点兼容性不好 保存时不方便 应用范围有限等应用场合小型商业网站 论坛 后台管理 学习教程等 3 3案例分析 实现步骤 第一步 搭建页面结构 将窗口在垂直方向分成两行 将窗口在水平方向分成两列 实现步骤 第二步 顶端banner页面 实现步骤 第三步 制作功能页面 可采用表格布局制作 系统管理页面 新闻管理页面 实现步骤 第四步 制作左侧导航页面 系统管理新闻管理文章管理影视管理商城管理音乐频道数据管理精采推荐 小结 4 1什么是DIV布局 用DIV盒模型结构给各部分内容划分到不同的区块 然后用css来定义盒模型的位置 大小 边框 内外边距 排列方式等 4 2DIV布局的优势 表现和内容相分离提高搜索引擎对网页的索引效率代码简洁 提高页面浏览速度易于维护和改版 4 3DIV元素 DIV元素是用来为HTML文档内大块 block level 的内容提供结构和背景的元素 我的博客 4 4案例分析 制作博客的banner部分 实现步骤 第一步 搭建banner结构 顶端导航 欢迎背景 主导航栏 实现步骤 第二步 制作顶端导航栏 网易首页网易博客登录 注册 top height 25px background color 1E87BE topul list style none margin left 30px margin right 10px topli padding top 6px float left margin left 5px font size 12px color FFFFFF toplia color FFFFFF 实现步骤 第三步 制作欢迎背景 我的博客 welcome background url top banner jpg no repeat height 90px blog position relative left 150px top 30px font size 30px color FFFFFF width 250px font weight bold 实现步骤 第四步 制作主导航栏 首页日志相册音乐收藏博友关于我 menu margin 0px background url bg tab gif repeat x height 32px menuul margin left 120px list style none menuli float left margin left 20px menulia display block width 80px height 25px text decoration none color 000000 padding top 8px 表格可以用来组织有格式的数据表格布局方便排列有规律 结构均匀的内容或数据框架布局支持滚动条 方便导航 节省页面下载时间等 适用于小型商业网