web网站开发实验报告

成绩西安理工大学实验报告成绩第1页（共4页）课程：Web网站开发实验日期：2012年6月11日专业班号：组别：交报告日期：2012年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．表单验证对已做成的网页中“昵称”、“密码”、“确认密码”和“电子邮件”进行非空验证。下面以“电子邮件”为例，对其进行非空验证。<scripttype="text/javascript">functionfunCheck(){if(document.form1.text4.value==""){alert("“电子邮件”不能为空。")returnfalse}else{returntrue}}</script>六、实验总结通过这次实验，我才真正理解了“纸上得来终觉浅，绝知此事要躬行。”这句话的真谛。在网页布局部分，出现的问题不大，主要是将网页能