html制作网页必看入门知识五.ppt

Chapter 第十章 回顾与作业点评 简述iframe标签的语法 简述table表格的语法 简述实现页面局部版块的思路 页面实际高度和width、height之间有什么关系？ 预习检查 简述制作页面模板的方法 如何实现商品分类列表页的布局？ 如何实现商品具体介绍页的布局？ 本章任务 制作贵美商品分类列表页 制作贵美商品具体介绍页 本章目标 使用iframe/制作网页模板 使用Dreamweaver工具实现表格布局 使用div-ul-li实现局部布局 网页模板的用途 利用iframe/标签制作模板 （1）分离顶部和底部为单独的页面文件 （2）使用iframe /复用顶部和底部 1、划分页面结构，编写HTML结构 2、分析各块的局部布局 3、分析中间块的宽高、填充、背景 4、分析内容的列宽、文字行高 5、用Dreamweaver辅助实现 练习——制作商品分类列表页 需求说明： 根据提供的素材，利用模板重新实现商品分类列表 （1）制作顶部、底部模板页（15分钟） （2）实现页面整体布局（15分钟） （3）实现中间块的表格局部布局（10分钟） （4）表格内容插入和修饰（20分钟） 共性问题集中讲解 1、划分页面结构，编写HTML结构 2、分析各块的局部布局 普通思路实现： 简洁思路实现： 两种思路对比： 3、分析各块的宽高、填充、背景 4、分析内容的文字行高、浮动、填充等样式 小结 简洁思路实现方式有哪些特点和优点？ HTML组织结构方面？ CSS样式编写方面？ 练习——制作商品具体介绍页 需求说明： 根据提供的素材，利用模板重新实现具体介绍页 （1）实现页面整体布局（15分钟） （2）引用顶部、底部模板页（15分钟） （3）用简洁思路实现中间块的布局（25分钟） （4）表格内容插入和修饰（20分钟） 总结 使用模板页的好处是什么？如何实现？ 表格布局适用哪些场合？用于整体布局还是局部布局？ 具体介绍页采用普通思路和简洁思路的差别 什么样的页面要利用SEO？ 作业 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课时在此添加内容 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 说明：同上例，本页到P20页，重点是和学员交互，带着学员分析实现思路，一定要让学员多想或多讨论。不用现场敲代码给学员演示，具体实现作为学员的上机练习。 沃克科技 贵美商城（二） 制作网页模板2-1 1、多个网页有重复内容，利于减少开发时间 2、页面复用，利于网站风格统一和维护 制作网页模板2-2 演示示例1：创建贵美的顶部、底部模板页 制作分类列表页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 制作分类列表页的思路5-2 顶部：用iframe复用模板页 底部：用iframe复用模板页 中部：数据规则，可以考虑表格。因table本身也是容器，所以可以直接用table替换中间的div块# main 各块的局部布局？ 演示示例2：商品分类列表页 制作分类列表页的思路5-3 1、5行4列的表格 2、表格整体宽度：满屏（100%，具体宽度值由container块设置980px） 高度：可以设置643px，也可以不设置由内容决定 1、几行几列的表格？ 2、表格整体宽、高？ 3、是否存在背景？ 4、是否有填充？ 3、表格设置背景图（catlist_bg.gif） 4、表格标题高度：有上填充（65px） 演示示例2：商品分类列表页 制作分类列表页的思路5-4 1、各列宽度：用百分比表示（10%、20%、50%、10%） 2、采用br换行实现 3、设置td的行高lineheight样式，估算：总高度/表格行数/单元格文字行数（643/5/3，考虑有图，设为30px） 1、表格各列的列宽设置？ 2、如何实现第3列中的多行内容？ 3、如何估算td内每行文字的行高？ 4、如何实现虚线分隔线？ 4、虚线：设置td的下边框样式： border-bottom:1px #ddd dashed 演示示例2：商品分类列表页 制作分类列表页的思路5-5 演示操作：用Dreamweaver添加表格、图片 完成时间：60分钟 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 制作商品具体介绍页的思路7-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 制作