JavaEE物联网云计算系列培训教材-HTML5+CSS3+Javascript网页设计09.pptVIP

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关系是什么？ 如何实现版块间的空白间距？ 如何实现垂直居中？ 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 强调：顺时针赋值 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 说明本页选用DIV+CSS 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 为了方便控制各块，推荐在外部加上顶级容器container，以便进行统一设置及整体加载 ，中间三块放入main容器块中。 注意此处不用现场演示，通过和学员交互的方式分析思路，展示代码即可，不用现场手写代码 1、可用具体数值或百分比设置宽高； 2、不需要设置各块坐标，采用默认的普通文档流结合浮动将自动确定各块的位置 3、注意使用float浮动，达到三块同行排列的效果 4、代码按块体现层次，增加可读性 注意此处不用现场演示，通过和学员交互的方式分析思路，展示代码即可，不用现场手写代码 说明：尺寸不需要和源码一致，只要实现的效果和效果图相近即可。 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 贵美商城（一） 网站开发流程5-1 1、时刻记住：以客户需求为导向 2、形成需求文档：《网站需求规划说明书》 客户 网站开发流程5-2 美工做静态Demo，反复确认客户的需求 网站开发流程5-3 应用HTML+CSS技术，根据美工效果图制作*.html页面 可选用Dreamweaver辅助工具 网站开发流程5-4 1、测试网页是否满足客户需求 2、根据客户浏览器种类，测试浏览器的兼容性 5、发布网站 网站开发流程5-5 发布需要申请： 1、网站空间 2、域名 Internet 常见的WEB服务器： IIS、Tomcat、Apache 域名方便访问，例如： 创建站点 演示操作：用Dreamweaver创建贵美站点 注意： 1、通用的文件夹命名 2、文件、文件夹命名：小写、有语义 中小型网站的目录结构 三种页面布局技术 框架布局： 1、优点：简洁、多窗口查看 2、缺点：分多文件保存，不利于搜索引擎搜索 3、适用场合：论坛、社区 表格布局： 1、优点：设计简单、浏览器兼容性好 2、缺点：表格嵌套导致结构冗余、整个表格下载完才开始显示数据，影响访问速度 3、适用