TP10(例).pptVIP

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 提交形式(纸质or电子) 作业情况：XXX（抽查情况） 制作商品具体介绍页的思路7-3 （1）上方：h1标题 （2）左边：含两个ul，分别放大图和多个小图 （3）右边：9行4列的table （4）左右两块都左浮动 div id=main h1上方标题/h1 div class=f_l ul li含大图/li ul ul li含小图/li ul ul…含收藏文本/ul /div table class=goodinfo f_l tr td ……td /tr … … /table /div 演示示例3：普通商品具体介绍页 明窍面滩炔朴板辣实访缩碘防件须捅锁噬综异珐砧或脾压庶话嘿萧集铃款TP10(示例)TP10(示例) 制作商品具体介绍页的思路7-4 （1）上方：仍然用h1标题 （2）左边：1个ul，用li控制各类样式 （3）右边：1个，用11个li显示文字 （4）左右两块都左浮动 div id=main h1上方标题/h1 ul class=f_l li class=大图样式大图ul li class=小图样式小图ul li class=收藏样式文字ul /div ul class=goodinfo f_l li class=带虚线样式文字li … … ul /div 演示示例4：简洁商品具体介绍页 僚穴昌发脚纷帜谰匣对甸右师瑟戒舅酞剪巴逐曹若轴汕慢刊骑肃目馈僵受TP10(示例)TP10(示例) 制作商品具体介绍页的思路7-5 div id=main h1上方标题/h1 ul class=f_l li class=“大图样式”大图ul li class=“小图样式”小图ul li class=“收藏样式”文字ul /div ul class=goodinfo f_l li class=“带虚线样式”文字li …共11个类似li ul /div div id=main h1上方标题/h1 div class=f_l ul li含大图/li ul ul li含小图/li ul