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(){
if(document.form1.text4.value==""){alert("“电子邮件”不能为空。")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）采用主流域名：.cn、.com.cn、.com等；
（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网站开发实验报告：该篇文章建议您自主创作。
来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。
《web网站开发实验报告》
由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
http://m.bsmz.net/gongwen/713216.html
- 上一篇：Seo学习总结
- 下一篇：试用期工作小结