DIV+CSS制作简单的页面布局.ppt

Chapter 第九章 回顾与作业点评 根据你的理解，什么是盒子模型？ 页面布局通常用盒子模型的属性？ 局部布局div-ul-li 结构的应用场合？ 局部布局div-dl-dt-dd结构的应用场合？ 预习检查 网站的开发流程有哪几步？ 样式表有哪三类应用方式？ 页面布局的大致思路？ 本章任务 制作贵美商城首页 本章目标 使用DIV+CSS制作简单的页面布局 根据网站开发流程制作网站 1、需求分析 （1）网站想实现什么目标？ （2）谁来访问？ （3）访问者需要什么？ （4）用多少时间，预算是多少，完成的质量？ （5）网站内容是什么？ 2、伪界面设计 3、网站制作 4、测试网页 使用Dreamweaver创建站点 常用的三种页面布局技术 1、划分页面结构 2、编写HTML内容结构 3、编写CSS控制各块的布局（layout.CSS ） 1、分析局部布局 2、实现各块内容 练习——贵美首页的整体布局 需求说明： 重新实现贵美首页的整体布局（顶部课下完成） 共性问题集中讲解 练习——贵美商品分类版块 需求说明： 在上一练习基础上，根据提供的素材，重新实现贵美左边的商品分类版本 （1）实现页面HTML结构（15分钟） （2）实现CSS （25分钟） 练习——贵美疯狂购物版块 需求说明： 在上一练习基础上，根据提供的素材，重新实现贵美的中部版块 （1）实现局部结构（20分钟） （2）实现CSS （25分钟） 总结 简述网站开发流程 说明网站各版块实现的思路 页面实际宽高和width、height关系是什么？ 如何实现版块间的空白间距？ 如何实现垂直居中？ 制作顶部的思路2-2 用背景图方式实现，不要作为image内容，更符合W3C推荐的内容语义 用div-ul-li，各li浮动。小图标用背景图偏移截取 填入内容并设置颜色等修饰 类似顶部菜单的实现 演示操作：用Dreamweaver输入列表、Hypersnap的使用 利用Hypersnape等工具获取尺寸（Ctrl+Shift+R） 完成时间：25分钟 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 制作商品分类版块的思路3-1 1、分析局部布局 典型的div内套多个ul-li 多个ul-li块并列，“商品类别”字体为h1号标题 演示示例2：制作贵美商品分类 制作商品分类版块的思路3-2 2、确定各块宽高及填充等 设置整个div块的背景图 设置左填充 设置上填充 内容宽度width设为189px， 实际宽度为 margin+padding+width=204px 清除块级标签默认值 演示示例2：制作贵美商品分类 制作商品分类版块的思路3-3 3、确定各行行高及列宽 设置行高lineheight Width=内容总宽度/总列数 演示示例2：制作贵美商品分类 各li项的间距，通过设置宽度width实现 完成时间：40分钟 制作疯狂购物版块的思路3-1 1、分析局部布局 大div块中套上、下两个div块 演示示例3：制作贵美中部内容 下方为多个dl-dt/dt实现，左浮动。 dt（标题）：图片 dd（描述）：文字 制作疯狂购物版块的思路3-2 2、确定各块宽高及填充等 区块衔接原则： 一般是在大区块的右边或下方来实现，所以中间的空白作为上方div的下填充，左边的空白作为商品分块的右填充 演示示例3：制作贵美中部内容 设置下方div块的上填充 制作疯狂购物版块的思路3-3 3、确定各行行高及列宽 将dldd外边距和填充清零，设置dl-dt/dd块的宽（内容总宽度/总列数）、高（内容总高度/总行数） 控制dt（图片）高度确保每幅图片高度一致 演示示例3：制作贵美商品分类 设置图片img的行高lineheight和dt高度一致 设置border为1px solid #ccc 完成时间：45分钟 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 强调：顺时针赋值 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 说明本页选用DIV+CSS 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2