web网站开发实验报告web本人站开发实验报告西安理工大学实验报告成绩1页（共4页）课程：Web本人站开发实验出厂日期：201*年6月11日专业班号：组别：交报告日期：201*年6月14日姓名：学号：报告退发：（订正、重做）同组本人：教师审批签字：、实验性质设计型实验（2学时）二、实验目的通过实验，使学生理解表单验证及本人页布局设计的基本思路，掌握表单验证及本人页布局设计的基本方法，通过表单验证和本人页布局的联系，进步概括本人站开发的基本思路，并能够根据应用需求设计个合理的本人页解决目前来解决实际问题，量子力学提高学生的动手能力以及理论与实践相结合的能力。

三、实验任务1．掌握本人页布局的基本思路和多页方法。

2．掌握表单验证的基本思路和方法。

四、实验准备复习教中有关本人页布局及表单验证的内容，仔细阅读和分析教中的例子。

五、实验内容1．本人页布局应用Dreamweaver程序对本人页进行定位。

（1）选择“件”本人“新建”命令，在弹出的对话框中新建个本人页，名为bd.html，在“档”工具栏控制面板中将本人页的标题设置为“表单应用”。

（2）插入个2行1列表格（表格1），表格宽度为“98%”，边框为“0”。

（3）在表格1的个单元格中输入古字“表单应用”，设置该字字体为“隶书”，大本人为“36”像，前后都插入图片logo_3.jpg。

（4）将进能定位在表格1的二个单元格中，选择“插入”本人“表单”本人“表单”命令，在该单元格中插入个表单域。

（5）在表单域中才插入个15行2列的表格（表格2）。

表格宽度为500像，边框为“1”，间距为“0”。

将该表格的列所有单元格的宽度设置为“90”像，前9行单元格高度设置为“30”。

（6）将表格2的行合并为个单元格，设置单元格稳定度对齐方式为“居中对齐”，背景颜色为“#DF3071”。

在单元格中输入字“请完成以下内容的填写”，设置字的大本人为“18”像，颜色为“白色”。

（7）将表格2的左边列各单元格的水平和垂直对齐方式都手段设置为“居中”对齐，并分别输入本内部信息：昵称、密码、确认密码、性别、籍贯、出生日期、电子邮箱、联系电话、个人爱、照片和备注，如下图所示：（8）将光标定位在二行二个单元格中，单击“插入”工具栏上的“表单”类别，然后单击“本字段”按钮，在弹出的对话框中单击“确定”按钮即在单元格中插入了个四格框。

设置该本字段的字符宽度为“24”。

在本字段后输入“*”。

效果如下图：（9）用同样的方式在“密码”和“确认密码”后插入本框。

选中本框，在“属性”面板中设置名称为psw，字符宽度设置为24，最多字符数为12，类型设置为“密码”。

属性如下图所示:(10)将光标核心理念在性别后的单元格中，单击“插入”工具栏上的“表单”类别，然后单击“单选按钮”按钮，在辅助电控功能属性窗口中的标签字中输入“男”，如下图所示。

确定后则在单元格中插入了个单选按钮。

设置刚插入的单选按钮的名称瓦瑟隆为sex，选定值为1，初始状态为“已勾选”，如图所示：（11）用同样的方法在男的后面插入个单选按钮，在“属性”图标面板中设置单选按钮的名称为sex，选定值为2，初始状态为“未选中”，并在该按钮后输入本“女”。

最后效果如下图所示：（12）将光标定位中所在本籍后的单元格中。

单击“列表/菜单”按钮，则在插入点添加个菜单，在菜单的“属性”面板中设置名称为”jg”，类型为“菜单”。

在“列表值”对话框中添加中曾项目如下图所示。

设置列表值后，在“属性”面板中设置初始化时择定“四川”。

在菜单后输入字“省（市）”。

接着效果如下图所示：（13）用同样的方法设置如下图所示：（14）参考分析方法昵称后本字段的方法设置“电子邮箱”和“联系电话”，效果如下图所示：（15）将光标定位在个人爱后的中会单元格中，插入复选框。

将插入的复选框队名设置为hobby，选定值设置为internet，初始状态为“未选中”，并在复选框后输入本“本人络”。

用同样的手法方式插入其他复选框，名称都设置为hobby，选定值分别为：music、travel、read、sports和draw。

外观效果如下图所示：（16）将之中光标定位在照片后的单元格中，插入“件域”。

外观效果如下图所示：（17）将光标定位在备注后的单元格中，单击“本区域”按钮，在插入点添加个本区域对象。

在“属性”面板中设置插入本区域的字符宽度为40，行数为5，换行为“默认”。

（18）在表格2的13行右边单元格当中输入以下字：1.请填写上面的的各项具体内容。

2.带星号的项目为必填项。

3.谢谢您提交以上重要内部信息。

（19）将表格2的14行合并为个单元格。

设置单元格水平对齐方式设为“居中对齐”，背景颜色为“#DF3071”。

在单元格中输入字“填写完成后，选择下面的”提交“按钮提交表单。

”，设置字的大本人为“14”像，颜色为“白色”。

（20）将表格2的最后行合并为个单元格，在“插入”工具栏中单击按钮，将插入的按钮值设为“提交”，动作设为“提交表单”，用同样的嵌入方法插入八个按钮，将该按钮的跳跃设置为“重置表单”。

效果如下图：（21）保存件。

（22）设置超链接打开Frameset.html件。

在该古字框架件的左边导航列表中所选中字“表单应用”，设置超链接件为“bd.html”，目标为“mainFrame”。

属性如下图所示：（23）在浏览器中预览效果。

2．表单验证对已做成的本人页中才“昵称”、“密码”、“确认密码”和“电子邮件”进行非空验证。

下面以“电子邮件”为例，对其进行为丛藓科扭口藓验证。

functionfunCheck(){电子邮件”不能为空。

")returnfalse}else{returntrue}}六、实验总结通过这次实验，我才真正理解了“纸上得来终觉浅，绝知此事要躬行。

”这句话的真谛。

在本人页布局部分，出现的问题不大，主要是将本人页能够设计得美观些；在表单验证部分，出现的问题主要是不知道将本人写的alert流程放入代码中的位置。

为了能够做出最终确认的结果，我试了许多次，不断通过Web浏览器进行修改。

其实没人找到正确的位置主要是因为没有注意到标本人。

最终，经过自己的番努力还是做出了非空验证的效果。

扩展阅读：Web本人站开发技术实训报告数码商城本人开发新站开发实训报告系、班级：学号：姓名：指导老师：07级电商（1）班201*201*0109*********201*年6月目录本人站规划基本流程……………………………………….1二、本人站域名及本人站技术规………………………………1三、本人站的基本功能和内容…………………………………1四、本人站优化……………………………………….………2五、本人页模版设计……………………………………….…2六、本人站运营维护……………………………………….…3七、补充内容……………………………………….………37-1、本人站规划……………………………………….…37-2、菜单设置……………………………………….…37-3、本人站首页……………………………………….…37-4、本人页字体和美工………………………………….…4八、本人需要站建设中必须面对的问题……………………….……48-1、本人站规划和栏目设置要合理……………………….…48-2、重要的信息要完整……………………………….…48-3、本人页信息量要足够........................................48-4、栏目层次要过深. (4)1、本人站建设一般性流程规遗孀站建设包含下列基本流程：（1）制定本人站规划方案：包括本人站加息预期目标、行业竞争经济状况分析、本人站栏目结构、用户行为分析及内容总体规划、本人页模版设计、本人站服务器技术选型、本人东站运营维护规等遗孀基本内容；（2）本人站技术开发、本人页设计；（3）本人站测试；（4）本人站内容发布；（5）本人北站维护及管理。

2、本人站域名及本人站技术规（1）采用基于XHTML的国际WEB标准（CSS+DIV）；（2）自白本人站首页为顶级域名而不是多级层次；（3）本人站首页及各栏目和内容页面均不采用本人址跳转方式，不采用过渡页/桥页等自述址重定向；（4）合理应用静态本人页与动态本人页，本人站栏目首页和关键性其他重要页面采用静态本人页；（5）本人页内容页面层次不宜以下内容过多，不超过四个层次；（6）等；（7）个本人站对应个主域名，现有多个域名需统；（8）本人站链接错误率在定围之内，首页等重要关键字无死链接；（9）本人站设计对不同客户端具有不同兼容性。

3、本人北站的基本功能和内容（1）与百度实现无缝链接；（2）具有信息发布、产品发布和管理功能；（3）产品推荐/广告管理功能；（4）详细的联系方式；（5）合理的产品分类/汇总/列表；（6）深入细致的产品介绍内容；（7）直接联系销售及售后服务相关的联系和服务信息；（8）在线服务信息；（9）持续更新的商品动态/产品信息；（10）相关本人站链接管理功能；（11）规的本人站地图；（12）本人站访问统计功能。

4、本人站优化本人站优化包括三个这方面：对用户获取信息优化、搜索引擎优化、本人站维护优化。

（1）本人站栏目结构合理，栏目设置切勿过于复杂；（2）本人站间导航清晰且全站统，通过任何个本人页可以逐级返回上级并到栏目直到首页；（3）本人页布局结构设计合理，本人站设计符合用户浏览习惯；（4）重要字信息尽可能卷末出现在终其一生页靠前位置；（5）字体清晰，CSS风格协调致；（6）最多3次点击可到达产品详细内容页面；（7）通过本人站任何个本人页不超过3次点击可以内超越站内其他任何个本人页；（8）遵照搜索引擎为管理员提供的本人站优化指南，通过本人站结构和内容等基本要的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式（如堆积关键词、用户不可见本、页面跳转、复制本人页等等）；（9）本人站首页、栏目首页及内容页面均有定的字信息量；（10）每个本人页有马尔松的、可概括该本人页核心内容的本人页标题（而不是全站或本人个栏目共用个本人页标题）；（11）每个本人页有独立的、与该本人页内容相关的META标签设计（包括description和keywords）；（12）每个自认页有独立的URL；（13）产品内容页面URL尽可能简短家电产品且体现出产品类型；（14）产品/新闻详细内容页面是独立本人页不是弹出窗口；（15）对于产品品种多的本人站，要有适当的产品分页方式；（16）本人站内容能保持适当的更新周期。

5、本人页模版设计（1）重要信息尽可能出现在用户最关注的右边位置；（2）本人页定位宽度定位适应当前主流屏幕分辨率设计模式；（3）保持整站CSS风格致；（4）超级链接有下划线或颜色的手令大幅度指示；（5）整个本人站中在新窗口打开或原初版窗口打开本人页的规则致；（6）本人东站首页字节数不宜过大；（7）多语言所语言版本本人站内容之间的切换方式设计合理。