《贵美商城(三)ppt课件.ppt》由会员分享，可在线阅读，更多相关《贵美商城(三)ppt课件.ppt（31页珍藏版）》请在三一办公上搜索。
1、贵美商城（三）,第十一章,回顾与作业点评,使用模板页的好处？如何实现？表格布局适用什么场合？用于整体布局还是局部布局？用普通思路实现页面布局有什么缺点？,预习检查,贵美注册页的局部结构采用哪类布局？贵美客户中心页的局部结构采用哪类布局？网站的兼容性测试方法有哪些？,本章任务,制作贵美注册页制作贵美客户中心页发布并测试贵美网站,本章目标,使用form-table-tr实现表单布局使用DIV+CSS替换框架布局 掌握测试并解决网站兼容性的常用办法,1、划分页面结构，编写HTML结构,制作贵美注册页的思路5-1,根据效果图，划分为哪几个大块？,整体用DIV+CSS布局，典型的3行1列，分上、中、下三
2、块,2、分析各块的局部布局,制作贵美注册页的思路5-2,顶部：用iframe复用模板页,底部：用iframe复用模板页,中部：数据规则，可以考虑表单套表格。因form本身也是容器，所以可以直接用form替换中间的div块# main,各块的局部布局？,3、分析中间块的宽高、填充、背景,制作贵美注册页的思路5-3,2、form内的表格为3行11列 3、阅读协议存在跨行，跨11行,1、form的填充、背景情况？2、form内的表格几行几列？3、表格的跨行或跨列情况？,1、form需设置背景图（reg_bg.gif）、上填充（65px）,4、分析内容的细边框等特殊样式,制作贵美注册页的思路5-4,1
3、、除两个按钮外，其他input元素均为细边框样式,1、input元素的样式分两类：带细边框的和不带细边框的？采用元素选择器还是类选择器？为什么？2、如何设置输入框固定宽高、细边框样式？3、如何实现提示文字右对齐？阅读协议垂直上对齐？4、输入框旁边的文字可以使用哪个标签？,2、固定宽高、细边框样式：width:131px;height:17px;border:1px #333 solid;3、水平对齐：text-align；垂直对齐：vertical-align 4、标签：点击文字将把输入焦点自动跳到输入框,form padding-top:65px;background:url(./image
4、s/reg_bg.gif) no-repeat; input width:131px;height:17px;border:1px #333 solid; .reg textarea border:1px #ccc solid; .reg .protocol vertical-align:top; #main img.handcursor:pointer; .b0 border:0px;width:auto;height:auto; .a_r text-align:right; .w40 width:40px; .w81 width:81px; .w500 width:500px; ,5、用D
5、reamweaver辅助输入HTML内容,制作贵美注册页的思路5-5,1、如有共性风格和独特风格，应如何编写CSS？,小结,2、常用的细节风格有哪些？,先定义共性风格，再定义独特风格，尽量重用代码,#main img.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; /宽500px,练习制作贵美注册页,需求说明：
6、根据提供的素材，利用模板实现贵美注册页（1）实现页面整体布局（15分钟）（2）引用顶部、底部模板页（10分钟）（3）用form-table-tr实现中间块的布局（15分钟）（4）表单内容插入和修饰（20分钟）,完成时间：60分钟,共性问题集中讲解,常见调试问题及解决办法代码规范问题,共性问题集中讲解,1、划分页面结构，编写HTML结构,制作贵美客户中心页的思路5-1,根据效果图，划分为哪几个大块？,整体用DIV+CSS布局，典型的3行1列，分上、中、下三块,2、分析各块的局部布局,制作贵美客户中心页的思路5-2,顶部：用iframe复用模板页,底部：用iframe复用模板页,各块的局部布局？,
7、中部：鉴于框架布局的缺点，采用DIV+CSS布局技术替代实现，分左右两块，左浮动,3、分析各块的填充、背景,制作贵美客户中心页的思路5-3,1、如何实现中间的空白和上方间距？2、左右两块的背景情况？,1、填充：左侧有左填充（13px）和上填充（180px）2、背景图：左侧有背景图（customer.jpg ）3、左右侧高度设为550px，及内容可以显示的高度范围,4、分析左右两块的宽高，实现框架页效果,制作贵美客户中心页的思路5-4,如何实现左右两块的关联？,注册与认证（#reg ）,买家帮助（#buy ）,卖家帮助（#sale ）,左右侧采用锚链接方式关联，具体实现:（1）右侧放三个div块
8、，对应右边的链接，ID号和右边锚链接号关联（2）设置三个div块的高度都和容器高度一致（550px），然后设置容器为overflow:hidden（内容溢出）样式 （3）修饰右侧，设填充15px，边框1px,5、分析内容特别的样式（二级菜单的显示隐藏）,制作贵美客户中心页的思路5-5,1、将标签作为容器元素使用，包括图片及二级菜单,2、实现隐藏效果：设标签为块状元素，宽高与图片一致，并设内容溢出隐藏,3、实现显示效果,a:hover height:auto;,a display:block; overflow:hidden; line-height:30px; width:158px; mar
9、gin:0px auto;,小结,左右侧关联效果实现思路？用到哪些技术？二级菜单显示隐藏实现思路？用到哪些技术？,练习制作贵美客户中心页,需求说明：根据提供的素材，利用模板重新实现客户中心页（1）实现页面整体布局（10分钟）（2）引用顶部、底部模板页（10分钟）（3）实现中间块布局（10分钟）（4）实现左侧二级菜单显示/隐藏效果（20分钟） （5）实现左右两侧关联效果（20分钟）,完成时间：70分钟,1、根据页面间关系建立页面链接,建立页面间的导航链接,2、链接检测和修正,1、不同客户可能使用不同的浏览器产品或版本2、要考虑方便被Google等搜索引擎搜索，利用网站推广,为什么需要考虑网站的兼
10、容性,客户,1、IE包括不同版本，这是国内的主流浏览器，一般考虑：IE6.0-IE8.02、IE存在的兼容性问题较多，特别是IE6.0,兼容性问题的根源：1、不同浏览器厂商对个别CSS含义解析不同；2、浏览器厂商没完全支持W3C标准,客户,浏览器之间的兼容性测试方法IE多版本使用IE Collection 软件模拟Firefox 3.5（需安装Firebug插件）,网站兼容性的测试办法,验证是否符合W3C标准的方法制作期间使用Dreamweaver兼容性提示网页制作完成后使用Firefox插件进行检测 发送到validator.w3.org官方网站进行在线验证,网站兼容性的测试办法,网站兼容性
11、问题的避免策略,网页的HTML结构尽量语义化 尽量使用典型的四种局部结构 层次结构尽量简洁，尽量减少冗余标签,我的主题介绍性文字。补充性的观点相关文字。,我的主题介绍性文字。补充性的观点相关文字。,错误做法：HTML标签看不出结构语义或内容语义，样式和结构没分离,正确做法：根据结构或内容语义使用相关标签，不看内容都就看出组织结构，例如：h1-一级标题h2-二级标题p-段落,兼容性问题的解决思路,根据浏览器的不同版本，编写相应的CSS代码编写思路： 不同浏览器识别不同的CSS特殊符号 如浏览器识别多个特殊符号，则控制CSS顺序,常见的兼容性问题及hack,1、三像素文本慢移问题,常见的兼容性问题及hack,2、双倍边距问题,常见的兼容性问题及hack,3、不同浏览器的边距、填充默认不一致问题 4、浮动元素后的注释，IE6中出现末尾文字或图片重复 5、IE6的table填充属性无效问题,练习兼容性测试与hack修复,需求说明：（1）建立页面间链接（10分钟）（2）测试贵美商城页面，发现兼容性问题，并解决 （25分钟）,完成时间：35分钟,总结,注册表单页的实现思路？客户中心页的实现思路？网站兼容性包括哪两方面的测试？解决网站兼容性的思路和常用办法？,
