1、用html和css开发站点tp09

1、 贵美商城（一）第九章回顾与作业点评根据你的理解，什么是盒子模型？页面布局通常用盒子模型的属性？局部布局div-ul-li 结构的应用场合？ 局部布局div-dl-dt-dd结构的应用场合？ 预习检查网站的开发流程有哪几步？样式表有哪三类应用方式？页面布局的大致思路？本章任务制作贵美商城首页本章目标使用DIV+CSS制作简单的页面布局根据网站开发流程制作网站1、需求分析 （1）网站想实现什么目标？（2）谁来访问？ （3）访问者需要什么？ （4）用多少时间，预算是多少，完成的质量？ （5）网站内容是什么？ 网站开发流程5-1 1、时刻记住：以客户需求为导向2、形成需求文档：网站需求规划说明书客户

2、 2、伪界面设计 网站开发流程5-2 美工做静态Demo，反复确认客户的需求3、网站制作 网站开发流程5-3 应用HTML+CSS技术，根据美工效果图制作*.html页面可选用Dreamweaver辅助工具4、测试网页 网站开发流程5-4 1、测试网页是否满足客户需求2、根据客户浏览器种类，测试浏览器的兼容性5、发布网站网站开发流程5-5 发布需要申请：1、网站空间 2、域名 Internet常见的WEB服务器：IIS、Tomcat、Apache域名方便访问，例如： 使用Dreamweaver创建站点创建站点演示操作：用Dreamweaver创建贵美站点注意：1、通用的文件夹命名2、文件、文件

3、夹命名：小写、有语义中小型网站的目录结构常用的三种页面布局技术三种页面布局技术框架布局：1、优点：简洁、多窗口查看2、缺点：分多文件保存，不利于搜索引擎搜索3、适用场合：论坛、社区表格布局：1、优点：设计简单、浏览器兼容性好2、缺点：表格嵌套导致结构冗余、整个表格下载完才开始显示数据，影响访问速度3、适用场合：不符合W3C，逐渐淡出DIV+CSS布局：1、优点：符合W3C内容和结构分离的思想、层次结构简单、利用搜索引擎搜索2、缺点：布局稍微复杂、存在浏览器兼容问题3、适用场合：主流的布局方式1、划分页面结构制作贵美首页布局3-1根据效果图，划分为哪几个大块？ 典型的3行3列结构，如何用HTML

4、实现？2、编写HTML内容结构制作贵美首页布局3-21、推荐加顶级容器，方便统一设置2、中间三块放入main容器块中main（页面主体）container（顶级容器）注意命名规范1、各块的业界习惯的命名2、注意最外面的大块用ID，其他用class或ID均可演示示例1：首页布局3、编写CSS控制各块的布局（layout.CSS ）制作贵美首页布局3-31、可用具体数值或百分比设置宽高2、不需要设置各块坐标3、注意使用float浮动4、代码按块体现层次 演示示例1：首页布局1、分析局部布局制作顶部的思路2-12、实现各块内容制作顶部的思路2-2用背景图方式实现，不要作为image内容，更符合W3C

5、推荐的内容语义用div-ul-li，各li浮动。小图标用背景图偏移截取填入内容并设置颜色等修饰类似顶部菜单的实现演示操作：用Dreamweaver输入列表、Hypersnap的使用利用Hypersnape等工具获取尺寸（Ctrl+Shift+R）练习贵美首页的整体布局 需求说明：重新实现贵美首页的整体布局（顶部课下完成） 完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解制作商品分类版块的思路3-11、分析局部布局典型的div内套多个ul-li多个ul-li块并列，“商品类别”字体为h1号标题演示示例2：制作贵美商品分类制作商品分类版块的思路3-22、确定各块

6、宽高及填充等设置整个div块的背景图设置左填充设置上填充内容宽度width设为189px，实际宽度为margin+padding+width=204px清除块级标签默认值演示示例2：制作贵美商品分类制作商品分类版块的思路3-33、确定各行行高及列宽 设置行高lineheightWidth=内容总宽度/总列数演示示例2：制作贵美商品分类各项的间距，通过设置宽度width实现练习贵美商品分类版块 需求说明：在上一练习基础上，根据提供的素材，重新实现贵美左边的商品分类版本（1）实现页面HTML结构（15分钟）（2）实现CSS （25分钟）完成时间：40分钟制作疯狂购物版块的思路3-11、分析局部布局

7、大div块中套上、下两个div块演示示例3：制作贵美中部内容下方为多个dl-dt/dt实现，左浮动。dt（标题）：图片dd（描述）：文字制作疯狂购物版块的思路3-22、确定各块宽高及填充等区块衔接原则：一般是在大区块的右边或下方来实现，所以中间的空白作为上方div的下填充，左边的空白作为商品分块的右填充演示示例3：制作贵美中部内容设置下方div块的上填充制作疯狂购物版块的思路3-33、确定各行行高及列宽 将外边距和填充清零，设置dl-dt/dd块的宽（内容总宽度/总列数）、高（内容总高度/总行数）控制dt（图片）高度确保每幅图片高度一致演示示例3：制作贵美商品分类设置图片的行高lineheight和高度一致设置border为1px solid #ccc 练习贵美疯狂购物版块需求说明：在上一练习基础上，根据提供的素材，重新实现贵美的中部版块（1）实现局部结构（20分钟）（2）实现CSS （25分钟）完成时间：45分钟总结 简述网站开发流程说明网站各版块实现的思