盒子模型相关.pptVIP

IEhaib IEhaib IEhaib W3school 网上教程的XML部分的XHTML结构化 贵美商城（三） * 回顾与作业点评 使用模板页的好处？如何实现？ 表格布局适用什么场合？用于整体布局还是局部布局？ 用普通思路实现页面布局有什么缺点？ * 预习检查 贵美注册页的局部结构采用哪类布局？ 贵美客户中心页的局部结构采用哪类布局？ 网站的兼容性测试方法有哪些？ * 本章任务 制作贵美注册页 制作贵美客户中心页 发布并测试贵美网站 * 本章目标 使用form-table-tr实现表单布局 使用DIV+CSS替换框架布局 掌握测试并解决网站兼容性的常用办法 * 1、划分页面结构，编写HTML结构 制作贵美注册页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DIV+CSS布局，典型的3行1列，分上、中、下三块 * 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、除两个按钮外，其他input元素均为细边框样式 1、input元素的样式分两类：带细边框的和不带细边框的？采用元素选择器还是类选择器？为什么？ 2、如何设置输入框固定宽高、细边框样式？ 3、如何实现提示文字右对齐？阅读协议垂直上对齐？ 4、输入框旁边的文字可以使用哪个标签？ 2、固定宽高、细边框样式：width:131px;height:17px;border:1px #333 solid; 3、水平对齐：text-align；垂直对齐：vertical-align 4、label标签：点击文字将把输入焦点自动跳到输入框 form { padding-top:65px;background:url(../images/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.hand{cursor:pointer; } .b0 { border:0px;width:auto;height:auto; } .a_r { text-align:right; } .w40 { width:40px; } .w81 { width:81px; } .w500 { width:500px; } 演示示例：制作注册页 * 5、用Dreamweaver辅助输入HTML内容 制作贵美注册页的思路5-5 演示操作：用Dreamweaver添加带label标签的form元素 * 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 * 练习——制作贵美注册页 需求说明： 根据提供的素材，利用模板实现贵美注册页 （1）实现页面整体布局（15分钟） （2）引用顶部、底部模板页（10分钟） （3）用form-table-tr实现中间块的布局（15分钟） （4）表单内容插入和修饰（20分钟） 完成时间：60分钟 * 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 * 1、划分页面结构，编写HTML结构 制作贵美客户中心页的思路5-1 根据效果图，划分为哪几个大块？ 整体用DI