贵美商城(三)课件.ppt

《贵美商城(三)课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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-32、form内的表格为3行11列3、阅读协议存在跨行，跨11行1、form的填充、背景情况？2、form内的表格几行几列？3、表格的跨行或跨列情况？1、form需设置背景图（reg_bg.gif）、上填充（65px）4、分析内容的细边框等特殊样式制作贵美注册页的思路5-

3、41、除两个按钮外，其他input元素均为细边框样式1、input元素的样式分两类：带细边框的和不带细边框的？采用元素选择器还是类选择器？为什么？2、如何设置输入框固定宽高、细边框样式？3、如何实现提示文字右对齐？阅读协议垂直上对齐？4、输入框旁边的文字可以使用哪个标签？2、固定宽高、细边框样式：width:131px;height:17px;border:1px#333solid;3、水平对齐：text-align；垂直对齐：vertical-align4、标签：点击文字将把输入焦点自动跳到输入框form{padding-top:65px;bac

4、kground: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:40p

5、x;}.w81{width:81px;}.w500{width:500px;}演示示例：制作注册页5、用Dreamweaver辅助输入HTML内容制作贵美注册页的思路5-5演示操作：用Dreamweaver添加带标签的form元素1、如有共性风格和独特风格，应如何编写CSS？小结2、常用的细节风格有哪些？先定义共性风格，再定义独特风格，尽量重用代码#mainimg.hand{cursor:pointer;}//呈现手状光标.b0{border:0px;width:auto;height:auto;}//无边框、自动宽高.a_r{text-align

6、: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根据

7、效果图，划分为哪几个大块？整体用DIV+CSS布局，典型的3行1列，分上、中、下三块2、分析各块的局部布局制作贵美客户中心页的思路5-2顶部：用iframe复用模板页底部：用iframe复用模板页各块的局部布局？中部：鉴于框架布局的缺点，采用DIV+CSS布局技术替代实现，分左右两块，左浮动3、分析各块的填充、背景制作贵美客户中心页的思路5-31、如何实现中间的空白和上方间距？2、左右两块的背景情况？1、填充：左侧有左填充（13px）和上填充（180px）2、背景图：左侧有背景图（customer.jpg）3、左右侧高度设为550px，及内容可以显示的高度范围4

8、、分析左右两块的宽高，实