案例：新浪会员注册页面

新浪会员注册页面原始页面效果主要技能•设置跟踪图像。•绘制APDIV。主要步骤1、准备素材：①将原新浪会员注册页面的中间部分保存为图像文件，如下所示：主要步骤②保存新浪注册页面上的图片素材，如：主要步骤2、打开Dreamweaver，新建页面；3、打开“页面属性”对话框，选择“跟踪图像”，选择上面保存的图像文件，调整适合的图像透明度，即可在新建页面上看到该图像。主要步骤4、如右图，选择“绘制APDIV”按钮，通过鼠标拖动，在页面跟踪图像上绘制相应元素。APDIV的优势•通过简单的鼠标拖曳动作就能实现预想的视觉效果。无需自己编写代码（包括结构代码和定位代码）。•自动生成相应的CSS代码。•设计过程中，可以随时拖动已生成的div层，改变其原始位置及尺寸。APDIV的不足•自动生成的结构代码，皆为“顺序结构”，无法体现视觉效果中的包含或被包含关系，如上图所示：–“设置安全信息”是apDiv5，“以下信息非常重要”是apDiv6。从设计效果来看，div1包含div2，是“父子关系”。但实际生成的结构代码却是“兄弟关系”。APDIV的不足•如下图所示，检测邮箱名时，若邮箱名合法，会弹出一个新的页面元素，此时，“设置安全信息”及以下的所有页面元素的显示位置都需要向下移动。•因为绘制APdiv产生的结构代码皆为“兄弟关系”，要实现这种移动，只能改变所有“设置安全信息”及以下页面元素的坐标值，工程浩大。•如果以上需要移动的元素都放在一个父div中，移动就很简单了，只需要改变父div所对应的样式就可以了。布局难点——邮箱名输入框•结构解析：由于该控件所需要的背景素材（红边圆角框）是由两部分（）构成的，因而布局时至少需要两个容器，分别插入这两个图片作为背景。具体结构如下：divid=inputENboxdivid=inputENRbox/div/div布局难点——邮箱名输入框•样式解析：根据结构特点，为“inputENbox“插入左半边圆角框，为”inputENRbox”插入右半边圆角框，具体样式如下：#inputENbox{position:absolute;left:222px;top:213px;width:177px;height:29px;z-index:5;text-align:right;background:url(images/btn.gif)no-repeatleft-263px;}#inputENRbox{width:170px;height:inherit;z-index:5;background:url(images/btn.gif)no-repeatright-298px;margin-left:7px;}布局难点——邮箱名输入框•前面的步骤，已经可以显示出完整的红边圆角框，但要具备输入功能，还需要加入表单控件中的输入框，因而完整的结构代码如下：divid=inputENboxdivid=inputENRboxinputtype=textname=input//div/div布局难点——邮箱名输入框•表单输入框的样式设置：#inputENRboxinput{width:90%;line-height:18px;height:auto;margin:8px10px5px5px;border:none;background:#ffffef;}这条样式可以不写，但千万不能设置成与父盒子同高，否则页面显示时，会发现输入框内的光标过大，高于实际设置的字号。交互样式的设置——红绿框的转变激活前激活后关键知识点：通过访问dom节点实现指定页面元素的样式变更。交互样式的设置——参考js代码varinputENboxNode=document.getElementById(inputENbox);varinputENRboxNode=document.getElementById(inputENRbox);inputENboxNode.onclick=function(){inputENboxNode.style.background=url(images/btn.gif)no-repeatleft-195px;inputENRboxNode.style.background=url(images/btn.gif)no-repeatright-230px;}交互样式的设置——邮箱名选择界面的弹出1.一旦输入的邮箱名是合法的，点击“检测”按钮后，即将弹出如右面板。2.因而，需要为“检测”按钮绑定一个单击事件。3.在单击事件中处理新节点的创建及样式处理。交互样式的设置——参考js代码window.onload=function(){document.getElementById(btn1).onclick=function(){//获取页面上的检测按钮varx=document.getElementById(checkbtn);//创建新节点，作为弹出界面varnewNode=document.createElement(div);//设置新节点的文本内容，即可供选择的email名varinfoNode=document.createTextNode(emailinfo.);newNode.appendChild(infoNode);//设置新节点的样式newNode.className=newNode;vary=document.getElementById(div2);//在指定位置插入新节点document.getElementById(centerdiv).insertBefore(newNode,y);}}