贵美商城(三).ppt

Chapter 第十一章 回顾与作业点评 使用模板页的好处？如何实现？ 表格布局适用什么场合？用于整体布局还是局部布局？ 用普通思路实现页面布局有什么缺点？ 预习检查 贵美注册页的局部结构采用哪类布局？ 贵美客户中心页的局部结构采用哪类布局？ 网站的兼容性测试方法有哪些？ 本章任务 制作贵美注册页 制作贵美客户中心页 发布并测试贵美网站 本章目标 使用form-table-tr实现表单布局 使用DIV+CSS替换框架布局 掌握测试并解决网站兼容性的常用办法 1、划分页面结构，编写HTML结构 2、分析各块的局部布局 3、分析中间块的宽高、填充、背景 4、分析内容的细边框等特殊样式 5、用Dreamweaver辅助输入HTML内容 1、如有共性风格和独特风格，应如何编写CSS？ 练习——制作贵美注册页 需求说明： 根据提供的素材，利用模板实现贵美注册页 （1）实现页面整体布局（15分钟） （2）引用顶部、底部模板页（10分钟） （3）用form-table-tr实现中间块的布局（15分钟） （4）表单内容插入和修饰（20分钟） 共性问题集中讲解 1、划分页面结构，编写HTML结构 2、分析各块的局部布局 3、分析各块的填充、背景 4、分析左右两块的宽高，实现框架页效果 5、分析内容特别的样式（二级菜单的显示隐藏） 小结 左右侧关联效果实现思路？用到哪些技术？ 二级菜单显示隐藏实现思路？用到哪些技术？ 练习——制作贵美客户中心页 需求说明： 根据提供的素材，利用模板重新实现客户中心页 （1）实现页面整体布局（10分钟） （2）引用顶部、底部模板页（10分钟） （3）实现中间块布局（10分钟） （4）实现左侧二级菜单显示/隐藏效果（20分钟） （5）实现左右两侧关联效果（20分钟） 1、根据页面间关系建立页面链接 1、不同客户可能使用不同的浏览器产品或版本 2、要考虑方便被Google等搜索引擎搜索，利用网站推广 浏览器之间的兼容性测试方法 IE多版本使用IE Collection 软件模拟 Firefox 3.5（需安装Firebug插件） 验证是否符合W3C标准的方法 制作期间使用Dreamweaver兼容性提示 网页制作完成后使用Firefox插件进行检测 发送到validator.w3.org官方网站进行在线验证 网站兼容性问题的避免策略 网页的HTML结构尽量语义化 尽量使用典型的四种局部结构 层次结构尽量简洁，尽量减少冗余标签 兼容性问题的解决思路 根据浏览器的不同版本，编写相应的CSS代码 编写思路： 不同浏览器识别不同的CSS特殊符号 如浏览器识别多个特殊符号，则控制CSS顺序 常见的兼容性问题及hack 1、三像素文本慢移问题 常见的兼容性问题及hack 2、双倍边距问题 常见的兼容性问题及hack 3、不同浏览器的边距、填充默认不一致问题 4、浮动元素后的注释，IE6中出现末尾文字或图片重复 5、IE6的table填充属性无效问题 练习——兼容性测试与hack修复 需求说明： （1）建立页面间链接（10分钟） （2）测试贵美商城页面，发现兼容性问题，并解决 （25分钟） 总结 注册表单页的实现思路？ 客户中心页的实现思路？ 网站兼容性包括哪两方面的测试？ 解决网站兼容性的思路和常用办法？ 制作贵美注册页的思路5-5 演示操作：用Dreamweaver添加带label标签的form元素 小结 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 完成时间：60分钟 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 制作贵美客户中心页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 制作贵美客户中心页的思路5-2 顶部：用iframe复用模板页 底部：用iframe复用模板页 各块的局部布局？ 中部：鉴于框架布局的缺点，采用DIV+CSS布局技术替代实现，分左右两块，左浮动 制作贵美客户中心页的思路5-3 1