html制作网页必看入门知识六.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分钟） 总结 注册表单页的实现思路？ 客户中心页的实现思路？ 网站兼容性包括哪两方面的测试？ 解决网站兼容性的思路和常用办法？ 作业 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式：xxx 预习作业 背诵英文单词 教员备课时在此添加内容 说明：本页到P12页，重点是和学员交互，带着学员分析实现思路，一定要让学员多想或多讨论。不用现场敲代码给学员演示，具体实现作为学员的上机练习。 说明：同上例，本页到P20页，重点是和学员交互，带着学员分析实现思路，一定要让学员多想或多讨论。不用现场敲代码给学员演示，具体实现作为学员的上机练习。 说明:此处不能设为overflow：auto，原因是有高度30px的限制。除非改为： overflow：auto； height:auto 说明:此处不能设为overflow：auto，原因是有高度30px的限制。除非改为： overflow：auto； height:auto 沃克科技 贵美商城（三） 制作贵美注册页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 制作贵美注册页的思路5-2 顶部：用iframe复用模板页 底部：用iframe复用模板页 中部：数据规则，可以考虑表单套表格