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

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,*,贵美商城（二）,第十章,1,回顾与作业点评,简述,标签的语法,简述,table,表格的语法,简述实现页面局部版块的思路,页面实际高度和,width,、,height,之间有什么关系？,2,预习检查,简述制作页面模板的方法,如何实现商品分类列表页的布局？,如何实现商品具体介绍页的布局？,3,本章任务,制作贵美商品分类列表页,制作贵美商品具体介绍页,4,本章目标,使用,制作网页模板,使用,Dreamweaver,工具实现表格布局,使用,div-,ul-li,实现局部布局,5,网页模板的用途,制作网页模板,2-1,1,、多个网页有重复内容，利于减少开发时间,2,、页面复用，利于网站风格统一和维护,6,利用,标签制作模板,（,1,）分离顶部和底部为单独的页面文件,（,2,）使用,复用顶部和底部,制作网页模板,2-2,演示示例,1,：创建贵美的顶部、底部模板页,7,1,、划分页面结构，编写,HTML,结构,制作分类列表页的思路,5-1,根据效果图，划分为哪几个大块？,整体用,DIV+CSS,布局，典型的,3,行,1,列，分上、中、下三块,8,2,、分析各块的局部布局,制作分类列表页的思路,5-2,顶部：用,iframe,复用模板页,底部：用,iframe,复用模板页,中部：数据规则，可以考虑表格。因,table,本身也是容器，所以可以直接用,table,替换中间的,div,块,#main,各块的局部布局？,演示示例,2,：商品分类列表页,9,3,、分析中间块的宽高、填充、背景,制作分类列表页的思路,5-3,1,、,5,行,4,列的表格,2,、表格整体宽度：满屏（,100%,，具体宽度值由,container,块设置,980px,）,高度：可以设置,643px,，也可以不设置由内容决定,1,、几行几列的表格？,2,、表格整体宽、高？,3,、是否存在背景？,4,、是否有填充？,3,、表格设置背景图（,catlist_bg.gif,）,4,、表格标题高度：有上填充（,65px,）,演示示例,2,：商品分类列表页,10,4,、分析内容的列宽、文字行高,制作分类列表页的思路,5-4,1,、各列宽度：用百分比表示（,10%,、,20%,、,50%,、,10%,）,2,、采用,换行实现,3,、设置,的行高,lineheight,样式，估算：总高度,/,表格行数,/,单元格文字行数（,643/5/3,，考虑有图，设为,30px,）,1,、表格各列的列宽设置？,2,、如何实现第,3,列中的多行内容？,3,、如何估算,内每行文字的行高？,4,、如何实现虚线分隔线？,4,、虚线：设置,的下边框样式：,border-bottom:1px#,ddd,dashed,演示示例,2,：商品分类列表页,11,5,、用,Dreamweaver,辅助实现,制作分类列表页的思路,5-5,演示操作：用,Dreamweaver,添加表格、图片,12,练习,制作商品分类列表页,需求说明：,根据提供的素材，利用模板重新实现商品分类列表,（,1,）制作顶部、底部模板页（,15,分钟,）,（,2,）实现页面整体布局（,15,分钟,）,（,3,）实现中间块的表格局部布局（,10,分钟,）,（,4,）表格内容插入和修饰（,20,分钟,）,完成时间：,60,分钟,13,共性问题集中讲解,常见调试问题及解决办法,代码规范问题,共性问题集中讲解,14,1,、划分页面结构，编写,HTML,结构,制作商品具体介绍页的思路,7-1,根据效果图，划分为哪几个大块？,整体用,DIV+CSS,布局，典型的,3,行,1,列，分上、中、下三块,15,2,、分析各块的局部布局,制作商品具体介绍页的思路,7-2,顶部：用,iframe,复用模板页,底部：用,iframe,复用模板页,中部：,T,形结构。有哪些实现方法？,各块的局部布局？,16,普通思路实现：,制作商品具体介绍页的思路,7-3,（,1,）上方：,h1,标题,（,2,）左边：含两个,ul,，分别放大图和多个小图,（,3,）右边：,9,行,4,列的,table,（,4,）左右两块都左浮动,上方标题,含大图,含小图,含收藏文本,演示示例,3,：普通商品具体介绍页,17,简洁思路实现：,制作商品具体介绍页的思路,7-4,（,1,）上方：仍然用,h1,标题,（,2,）左边：,1,个,ul,，用,li,控制各类样式,（,3,）右边：,1,个，用,11,个,li,显示文字,（,4,）左右两块都左浮动,上方标题,大图,小图,文字,文字,演示示例,4,：简洁商品具体介绍页,18,两种思路对比：,制作商品具体介绍页的思路,7-5,上方标题,大图,小图,文字,文字,共,11,个类似,li,上方标题,含大图,含小图,含收藏文本,共,9,行,（,1,）普通思路：容易想到，缺点是层次较多、结构复杂，不利于,SEO,（,2,）简洁思路：结构语义清晰，层次较少，利于,SEO,，但需反复体会和经验积累,仔细比较两种思路的异同，优缺点？,19,3,、分析各块的宽高、填充、背景,制作商品具体介绍页的思路,7-6,1,、中间的空白如何解决？,2,、各块需要背景吗？,背景图,goodtitle_bg.gif,，,左偏移,3px,中间空白作为左侧的右填充,总宽度,350px,大图，小图和推荐收藏图,20,4,、分析内容的文字行高、浮动、填充等样式,制作商品具体介绍页的思路,7-7,标题高度设置,lineheight,样式，虚线使用,border-bottom:1px solid#,dddddd,1,、上方：如何实现上方标题的高度、虚线？,2,、左侧：如何实现大图上下的空白间距？如何实现多个小图并列显示？,3,、右侧：如何实现多行等间距？,4,、如何实现各图片的实线边框？,.good width:100%;,.good h1,width:100%;height:40px;,background:url,(./images/,goodtitle_bg.gif,)repeat-x 0px-3px;,border-bottom: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-bottom: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 padding-left:15px;,设置图片所在,li,有上下填充，多个图片所在的,li,左浮动,设置,img,的边框样式,border:2px#,ddd,solid,设置,li,的,lineheight,控制等间距,演示示例,4,：简洁商品具体介绍页,21,小结,简洁思路实现方式有哪些特点和优点？,HTML,组织结构方面？,CSS,样式编写方面？,1,、组织结构方面：,（,1,）体现结构语义基础上力求精简,（,2,）减少层次嵌套、冗余标签，利于,SEO,2,、,CSS,方面：,（,1,）先提取共性风格,（,2,）再单独编写独特风格,22,练习,制作商品具体介绍页,需求说明：,根据提供的素材，利用模板重新实现具体介绍页,（,1,）实现页面整体布局（,15,分钟,）,（,2,）引用顶部、底部模板页（,15,分钟,）,（,3,）用简洁思路实现中间块的布局（,25,分钟,）,（,4,）表格内容插入和修饰（,20,分钟,）,完成时间：,75,分钟,23,总结,使用模板页的好处是什么？如何实现？,表格布局适用哪些场合？用于整体布局还是局部布局？,具体介绍页采用普通思路和简洁思路的差别,什么样的页面要利用,SEO,？,24,作业,课后作业,必做,教员备课时在此添加内容,选做,教员备课时在此添加内容,提交时间：,xxx,提交形式：,xxx,预习作业,背诵英文单词,教员备课时在此添加内容,25,