贵美商城网站设计

1、 贵美商城二第十章回忆与作业点评简述标签的语法简述table表格的语法简述实现页面局部版块的思路页面实际高度和width、height之间有什么关系？预习检查简述制作页面模板的方法如何实现商品分类列表页的布局？如何实现商品具体介绍页的布局？本章任务制作贵美商品分类列表页制作贵美商品具体介绍页本章目标使用制作网页模板使用Dreamweaver工具实现表格布局 使用div-ul-li实现局部布局网页模板的用途制作网页模板2-1 1、多个网页有重复内容，利于减少开发时间2、页面复用，利于网站风格统一和维护利用标签制作模板1别离顶部和底部为单独的页面文件2使用复用顶部和底部 制作网页模板2-2 演示示

2、例1：创建贵美的顶部、底部模板页1、划分页面结构，编写HTML结构制作分类列表页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 2、分析各块的局部布局 制作分类列表页的思路5-2顶部：用iframe复用模板页 底部：用iframe复用模板页 中部：数据规那么，可以考虑表格。因table本身也是容器，所以可以直接用table替换中间的div块# main 各块的局部布局？ 演示示例2：商品分类列表页3、分析中间块的宽高、填充、背景 制作分类列表页的思路5-31、5行4列的表格 2、表格整体宽度：满屏100%，具体宽度值由container

3、块设置980px高度：可以设置643px，也可以不设置由内容决定1、几行几列的表格？2、表格整体宽、高？3、是否存在背景？4、是否有填充？ 3、表格设置背景图catlist_bg.gif 4、表格标题高度：有上填充65px演示示例2：商品分类列表页4、分析内容的列宽、文字行高 制作分类列表页的思路5-41、各列宽度：用百分比表示10%、20%、50%、10% 2、采用换行实现3、设置的行高lineheight样式，估算：总高度/表格行数/单元格文字行数643/5/3，考虑有图，设为30px1、表格各列的列宽设置？2、如何实现第3列中的多行内容？3、如何估算内每行文字的行高？4、如何实现虚线分隔

4、线？4、虚线：设置的下边框样式：border-bottom:1px #ddd dashed演示示例2：商品分类列表页5、用Dreamweaver辅助实现 制作分类列表页的思路5-5演示操作：用Dreamweaver添加表格、图片练习制作商品分类列表页 需求说明：根据提供的素材，利用模板重新实现商品分类列表1制作顶部、底部模板页15分钟2实现页面整体布局15分钟3实现中间块的表格局部布局10分钟4表格内容插入和修饰20分钟 完成时间：60分钟共性问题集中讲解常见调试问题及解决方法代码标准问题共性问题集中讲解1、划分页面结构，编写HTML结构制作商品具体介绍页的思路7-1 根据效果图，划分为哪几个

5、大块？整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 2、分析各块的局部布局 制作商品具体介绍页的思路7-2顶部：用iframe复用模板页 底部：用iframe复用模板页 中部：T形结构。有哪些实现方法？各块的局部布局？ 普通思路实现：制作商品具体介绍页的思路7-31上方：h1标题2左边：含两个ul，分别放大图和多个小图3右边：9行4列的table4左右两块都左浮动 上方标题 含大图 含小图 含收藏文本 演示示例3：普通商品具体介绍页简洁思路实现：制作商品具体介绍页的思路7-41上方：仍然用h1标题2左边：1个ul，用li控制各类样式3右边：1个，用11个li显示文字4左右两块都左

6、浮动 上方标题 大图 小图 文字 文字 演示示例4：简洁商品具体介绍页两种思路比照：制作商品具体介绍页的思路7-5 上方标题 大图 小图 文字 文字 共11个类似li 上方标题 含大图 含小图 含收藏文本 共9行 1普通思路：容易想到，缺点是层次较多、结构复杂，不利于SEO2简洁思路：结构语义清晰，层次较少，利于SEO，但需反复体会和经验积累仔细比较两种思路的异同，优缺点？3、分析各块的宽高、填充、背景 制作商品具体介绍页的思路7-61、中间的空白如何解决？2、各块需要背景吗？背景图goodtitle_bg.gif，左偏移3px中间空白作为左侧的右填充总宽度350px大图，小图和推荐收藏图 4

7、、分析内容的文字行高、浮动、填充等样式 制作商品具体介绍页的思路7-7标题高度设置lineheight样式，虚线使用border-bottom:1px solid #dddddd1、上方：如何实现上方标题的高度、虚线？2、左侧：如何实现大图上下的空白间距？如何实现多个小图并列显示？3、右侧：如何实现多行等间距？ 4、如何实现各图片的实线边框？.good width:100%; .good h1 width:100%; height:40px; background:url ( ./images/goodtitle_bg.gif ) repeat-x 0px -3px; border-botto

8、m:1px solid #dddddd; font:bold 14px/40px 宋体; text-align:center;.good ul width:350px;padding-right:35px; .bigimg padding:15px 0px; .smallimg float:left;width:65px; .smallimg img border:2px #ddd solid; .op width:180px; .goodinfo width:350px;letter-spacing:0.5px; line-height:30px; .goodinfo li border-b

9、ottom:1px #ddd dashed; li.buynow height:74px;line-height:74px;border:0px; li.buynow img padding:17px 0px;vertical-align:middle; li.onlinepay background:#FFFFED url(./images/onlinepay.gif) no-repeat 5px 8px; border:1px solid #DDCF8F; line-height:16px; padding:5px 0px 3px 76px; .goodinfo li span paddi

10、ng-left:15px; 设置图片所在li有上下填充，多个图片所在的li左浮动设置img的边框样式border:2px #ddd solid设置li的lineheight控制等间距演示示例4：简洁商品具体介绍页小结 简洁思路实现方式有哪些特点和优点？ HTML组织结构方面？CSS样式编写方面？1、组织结构方面： 1表达结构语义根底上力求精简 2减少层次嵌套、冗余标签，利于SEO2、CSS方面：1先提取共性风格2再单独编写独特风格练习制作商品具体介绍页 需求说明：根据提供的素材，利用模板重新实现具体介绍页1实现页面整体布局15分钟2引用顶部、底部模板页15分钟3用简洁思路实现中间块的布局25分钟4表格内容插入和修饰2