贵美商城(三)课件

贵美商城（三）第十一章贵美商城（三）第十一章回顾与作业点评使用模板页的好处？如何实现？表格布局适用什么场合？用于整体布局还是局部布局？用普通思路实现页面布局有什么缺点？回顾与作业点评使用模板页的好处？如何实现？预习检查贵美注册页的局部结构采用哪类布局？贵美客户中心页的局部结构采用哪类布局？网站的兼容性测试方法有哪些？预习检查贵美注册页的局部结构采用哪类布局？本章任务制作贵美注册页制作贵美客户中心页发布并测试贵美网站本章任务制作贵美注册页本章目标使用form-table-tr实现表单布局使用DIV+CSS替换框架布局掌握测试并解决网站兼容性的常用办法本章目标使用form-table-tr实现表单布局1、划分页面结构，编写HTML结构制作贵美注册页的思路5-1

根据效果图，划分为哪几个大块？

整体用DIV+CSS布局，典型的3行1列，分上、中、下三块1、划分页面结构，编写HTML结构制作贵美注册页的思路5-12、分析各块的局部布局制作贵美注册页的思路5-2顶部：用iframe复用模板页底部：用iframe复用模板页中部：数据规则，可以考虑表单套表格。因form本身也是容器，所以可以直接用form替换中间的div块#main各块的局部布局？

2、分析各块的局部布局制作贵美注册页的思路5-2顶部：用i3、分析中间块的宽高、填充、背景制作贵美注册页的思路5-32、form内的表格为3行11列3、阅读协议存在跨行，跨11行1、form的填充、背景情况？2、form内的表格几行几列？3、表格的跨行或跨列情况？1、form需设置背景图（reg_bg.gif）、上填充（65px）3、分析中间块的宽高、填充、背景制作贵美注册页的思路54、分析内容的细边框等特殊样式制作贵美注册页的思路5-41、除两个按钮外，其他input元素均为细边框样式1、input元素的样式分两类：带细边框的和不带细边框的？采用元素选择器还是类选择器？为什么？2、如何设置输入框固定宽高、细边框样式？3、如何实现提示文字右对齐？阅读协议垂直上对齐？4、输入框旁边的文字可以使用哪个标签？2、固定宽高、细边框样式：width:131px;height:17px;border:1px#333solid;3、水平对齐：text-align；垂直对齐：vertical-align4、<label>标签：点击文字将把输入焦点自动跳到输入框form{padding-top:65px;background:url(../images/reg_bg.gif)no-repeat;}input{width:131px;height:17px;border:1px#333solid;}.regtextarea{border:1px#cccsolid;}.reg.protocol{vertical-align:top;}<!--常用细节通用风格-->#mainimg.hand{cursor:pointer;}.b0{border:0px;width:auto;height:auto;}.a_r{text-align:right;}.w40{width:40px;}.w81{width:81px;}.w500{width:500px;}演示示例：制作注册页4、分析内容的细边框等特殊样式制作贵美注册页的思路5-415、用Dreamweaver辅助输入HTML内容制作贵美注册页的思路5-5演示操作：用Dreamweaver添加带<label>标签的form元素5、用Dreamweaver辅助输入HTML内容制作贵美注册1、如有共性风格和独特风格，应如何编写CSS？小结2、常用的细节风格有哪些？先定义共性风格，再定义独特风格，尽量重用代码#mainimg.hand{cursor:pointer;}//呈现手状光标.b0{border:0px;width:auto;height:auto;}//无边框、自动宽高.a_r{text-align:right;}//右对齐.w40{width:40px;}//宽40px.w81{width:81px;}//宽81px.w500{width:500px;}//宽500px1、如有共性风格和独特风格，应如何编写CSS？小结2、常用的练习——制作贵美注册页需求说明：根据提供的素材，利用模板实现贵美注册页（1）实现页面整体布局（15分钟）（2）引用顶部、底部模板页（10分钟）（3）用form-table-tr实现中间块的布局（15分钟）（4）表单内容插入和修饰（20分钟）完成时间：60分钟练习——制作贵美注册页需求说明：完成时间：60分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解共性问题集中讲解常见调试问题及解决办法共性问题集中讲解1、划分页面结构，编写HTML结构制作贵美客户中心页的思路5-1

根据效果图，划分为哪几个大块？整体用DIV+CSS布局，典型的3行1列，分上、中、下三块1、划分页面结构，编写HTML结构制作贵美客户中心页的思路52、分析各块的局部布局制作贵美客户中心页的思路5-2顶部：用iframe复用模板页底部：用iframe复用模板页各块的局部布局？

中部：鉴于框架布局的缺点，采用DIV+CSS布局技术替代实现，分左右两块，左浮动2、分析各块的局部布局制作贵美客户中心页的思路5-2顶部：3、分析各块的填充、背景制作贵美客户中心页的思路5-31、如何实现中间的空白和上方间距？2、左右两块的背景情况？1、填充：左侧有左填充（13px）和上填充（180px）2、背景图：左侧有背景图（customer.jpg）3、左右侧高度设为550px，及内容可以显示的高度范围3、分析各块的填充、背景制作贵美客户中心页的思路5-34、分析左右两块的宽高，实现框架页效果制作贵美客户中心页的思路5-4如何实现左右两块的关联？注册与认证（#reg

）买家帮助（#buy

）卖家帮助（#sale

）左右侧采用锚链接方式关联，<ahref=“#ID号（锚名）”>，具体实现:（1）右侧放三个div块，对应右边的链接，ID号和右边锚链接号关联（2）设置三个div块的高度都和容器高度一致（550px），然后设置容器为overflow:hidden（内容溢出）样式（3）修饰右侧，设填充15px，边框1px演示操作：如何实现左右侧的关联4、分析左右两块的宽高，实现框架页效果制作贵美客户中心页的思5、分析内容特别的样式（二级菜单的显示隐藏）制作贵美客户中心页的思路5-51、将<a>标签作为容器元素使用，包括图片及二级菜单2、实现隐藏效果：设<a>标签为块状元素，宽高与图片一致，并设内容溢出隐藏3、实现显示效果演示操作：如何实现左侧的二级菜单显示/隐藏a:hover{height:auto;}a{display:block;overflow:hidden;line-height:30px;width:158px;margin:0pxauto;}

演示示例2：客户服务中心页5、分析内容特别的样式（二级菜单的显示隐藏）制作贵美客户中心小结左右侧关联效果实现思路？用到哪些技术？二级菜单显示隐藏实现思路？用到哪些技术？小结左右侧关联效果实现思路？用到哪些技术？练习——制作贵美客户中心页需求说明：根据提供的素材，利用模板重新实现客户中心页（1）实现页面整体布局（10分钟）（2）引用顶部、底部模板页（10分钟）（3）实现中间块布局（10分钟）（4）实现左侧二级菜单显示/隐藏效果（20分钟）（5）实现左右两侧关联效果（20分钟）完成时间：70分钟练习——制作贵美客户中心页需求说明：完成时间：70分钟1、根据页面间关系建立页面链接建立页面间的导航链接演示操作：利用Dreamweaver建立链接、检测链接2、链接检测和修正演示示例3：设置网页间链接1、根据页面间关系建立页面链接建立页面间的导航链接演示操作：1、不同客户可能使用不同的浏览器产品或版本2、要考虑方便被Google等搜索引擎搜索，利用网站推广为什么需要考虑网站的兼容性客户1、IE包括不同版本，这是国内的主流浏览器，一般考虑：IE6.0-IE8.02、IE存在的兼容性问题较多，特别是IE6.0兼容性问题的根源：1、不同浏览器厂商对个别CSS含义解析不同；2、浏览器厂商没完全支持W3C标准客户1、不同客户可能使用不同的浏览器产品或版本为什么需要考虑网站浏览器之间的兼容性测试方法IE多版本使用IECollection软件模拟Firefox3.5（需安装Firebug插件）网站兼容性的测试办法浏览器之间的兼容性测试方法网站兼容性的测试办法验证是否符合W3C标准的方法制作期间使用Dreamweaver兼容性提示网页制作完成后使用Firefox插件进行检测发送到官方网站进行在线验证网站兼容性的测试办法演示操作：利用Dreamweaver和Firefox插件检测验证是否符合W3C标准的方法网站兼容性的测试办法演示操作：利网站兼容性问题的避免策略

网页的HTML结构尽量语义化尽量使用典型的四种局部结构层次结构尽量简洁，尽量减少冗余标签<fontsize="7">我的主题</font><br/>介绍性文字。。。。。。<br/><br/><fontsize="6">补充性的观点</font><br/>相关文字。。。。。。<br/><h1>我的主题</h1><p>介绍性文字。。。。。。<p/><h2>补充性的观点</h2><p>相关文字。。。。。。<p/>错误做法：HTML标签看不出结构语义或内容语义，样式和结构没分离正确做法：根据结构或内容语义使用相关标签，不看内容都就看出组织结构，例如：h1-一级标题h2-二级标题p-段落网站兼容性问题的避免策略网页的HTML结构尽量语义化<兼容性问题的解决思路根据浏览器的不同版本，编写相应的CSS代码编写思路：不同浏览器识别不同的CSS特殊符号如浏览器识别多个特殊符号，则控制CSS顺序演示示例4：不同浏览器识别的特殊符号兼容性问题的解决思路根据浏览器的不同版本，编写相应的CSS代常见的兼容性问题及hack1、三像素文本慢移问题演示示例5：E6三像素文本慢移常见的兼容性问题及hack1、三像素文本慢移问题演示示例常见的兼容性问题及hack2、双倍边距问题演示示例6：IE6双倍外边距常见的兼容性问题及hack2、双倍边距问题演示示例6：I常见的兼容性问题及hack3、不同浏览器的边距、填充默认不一致问题4、浮动元素后的注释，IE6中出现末尾文字或图片重复5、IE6的ta