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）多语言所语言版本本人站内容之间的切换方式设计合理。
6、本人站运营维护
（1）建立本人站内容发布审核机制，锤炼本人站内容的合法性；（2）保持本人站服务器正常工作，对本人站访问速度等采取日常跟踪
管理；（3）保持合理的真名站内容更新频率；
（4）本人站内容制作符合本人站优化所必须具备的规；（5）重
要信息（如数据等、访问日志等）的备份机制；
（6）保持本人站重要本人页的持续可访问，不受真名站改版等原
因的影响；（7）对本人站访问统计信息定期进行跟踪分析。
7、要求内容补充：
由于本人络营销环境和用户行为在不断发展变化，此人站需要增
强适应性，可通过改版、重建等方式方式或进行本人站升级。在本人
站建设技术标准方面，遵照国际WEB标准，不再使用过时的HLML4.01；在本人站运营支持这方面，融入目前居于领先地位的本人站优化思想
和方法，使得遵照规建设的本人站全面符合主流搜索引擎的优化指南，具有明显的搜索引擎优化优势。
1.本人站规划：整体规划合理，主辅菜单要不清晰；本人站建设
导向明晰，重点突出；栏目适应；各栏目统规划，整个本人站比较清晰；本人站此人的促销功能得到明显体现。
2.菜单设置：菜单采用不须图片形式，图标标识明确，有字说明，不要用户移动鼠标进行猜测；快捷键层次不宜过多，有效信息层次要少，不需要多番点击才能不能找到有效信息；过多采用鼠标响应式菜单，栏目设置不合理，使得应用程序难以发现需要内部信息的信息；
栏目设置有重叠；栏目名称意义不能明确，容易造成混淆；全flash
首页和菜单，无法优化处理，也没有下述的字说明，不采用。栏目清
晰够用，但重要信息完整，充分体现如何有效信息。3.本人站首页：
少采用大型图片，用户关心的信息在首页体现，不应多次点击；首页
下载速度要快；首页如何有效信息量丰富；首页有标题；?提供种以上
外语链接页面。主页布局比整洁，重要信息得以重点体现；打开本人
页不宜弹出多个窗口，影响正常浏览；不要刻意追求“创意”效果，
以至于很难表述理解本人站要表达的意思。
页面信息：重要信息完整，如联系方式和产品介绍等；页面信息
足够，减少多次翻页；去除与企业形象、产品、促销等方面无关的信息；防止产品详细介绍内容过少；内容页面没有标题，或本人全部使
用司原称标题；客户能够方便的及时维护补充，保持其时效性；不会
允许有无任何内容的栏目。
4.本人页字体和美工：注重美术效果，但不必小量采用图片，影
响本人页网络连接；注重美观，但有些连基本信息内容都不可用图片
格式，影响基本信息获取；字适中、颜色明晰、不影响正常视觉；主
页不应过于花哨。
8、本人站建设中必须克服的问题：
（1）终其一生站规划和栏目设置要合理：主要表现在栏目架设主
要不应有重叠、交叉、或本人类节目名称意义不明确，容易造成混淆，使得用户难以发现需要的内部信息，避免栏目过于繁多和杂乱、本人
终点站导航系统混乱；
（2）重要的信息要完整：企业介绍、联系方式、产品分类和详细
介绍、产品促销等是企业本人站最既定的信息，企业本人站上这些重
要内部信息完整；
（3）本人页信息量要足够：包括两种情况：种页面上的内容，或
本人将本来个本人页可以不可发布的内容不可分有多个本人页，而且
各本人页之间须有相互链接，不需要再次点击主页；另方面是尽管内
容总量不少，但有用的信息少，笼统介绍的素材多；
（4）栏目层次要过深。重要的信息应该出现在最显现出来容易被
用户查觉的位置，应尽可能缩短业务信息传递的渠道，以使企业信息
更加有效地传递给用户；
本人情提示：本中关于《web本人站开发实验报告》给出的例仅供您参考拓展思维使用，web本人站开发实验报告：该篇章建议您自主创作。