贵美商城三贵美三.pptxVIP

贵美商城（三）

本章任务制作贵美注册页制作贵美客户中心页发布并测试贵美网站2

1、划分页面结构，编写HTML结构3制作贵美注册页的思路5-1根据效果图，划分为哪几个大块？整体用DIV+CSS布局，典型的3行1列，分上、中、下三块

2、分析各块的局部布局4制作贵美注册页的思路5-2顶部：用iframe复用模板页底部：用iframe复用模板页中部：数据规则，可以考虑表单套表格。因form本身也是容器，所以可以直接用form替换中间的div块#main各块的局部布局？

3、分析中间块的宽高、填充、背景5制作贵美注册页的思路5-32、form内的表格为3行11列3、阅读协议存在跨行，跨11行1、form的填充、背景情况？2、form内的表格几行几列？3、表格的跨行或跨列情况？1、form需设置背景图（reg_bg.gif）、上填充（65px）

4、分析内容的细边框等特殊样式6制作贵美注册页的思路5-41、除两个按钮外，其他input元素均为细边框样式1、input元素的样式分两类：带细边框的和不带细边框的？采用元素选择器还是类选择器？为什么？2、如何设置输入框固定宽高、细边框样式？3、如何实现提示文字右对齐？阅读协议垂直上对齐？4、输入框旁边的文字可以使用哪个标签？2、固定宽高、细边框样式：width:131px;height:17px;border:1px#333solid;3、水平对齐：text-align；垂直对齐：vertical-align4、label标签：点击文字将把输入焦点自动跳到输入框form{padding-top:65px;background: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:40px;}.w81{width:81px;}.w500{width:500px;}

5、用Dreamweaver辅助输入HTML内容7制作贵美注册页的思路5-5

1、如有共性风格和独特风格，应如何编写CSS？8小结2、常用的细节风格有哪些？先定义共性风格，再定义独特风格，尽量重用代码#mainimg.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分钟）9

1、划分页面结构，编写HTML结构10制作贵美客户中心页的思路5-1根据效果图，划分为哪几个大块？整体用DIV+CSS布局，典型的3行1列，分上、中、下三块

2、分析各块的局部布局11制作贵美客户中心页的思路5-2顶部：用iframe复用模板页底部：用iframe复用模板页各块的局部布局？中部：鉴于框架布局的缺点，采用DIV+CSS布局技术替代实现，分左右两块，左浮动

3、分析各块的填充、背景12制作贵美客户中心页的思路5-31、如何实现中间的空白和上方间距？2、左右两块的背景情况？1、填充：左侧有左填充（13px）和上填充（180px）2、背景图：左侧有背景图（customer.jpg）3、左右侧高度设为550px，及内容可以显示的高度范围

4、分析左右两块的宽高，实现框架页效果13制作贵美客户中心页的思路5-4如何实现左右两块的关联？注册与认证（#reg）买家帮助（#buy）卖家帮助（#sale）左右侧采用锚链接方式关联，ahref=“#ID号（锚名）”，具体实现:（1）右侧放三个div块，对应右边的链接，I