(实验10制作表单页面.docVIP

实验10 制作表单页面 实验目的 熟悉表单域和表单元素的创建和使用 实验内容 留言板留言界面的设计。要求：内容包括留言用户名、密码、性别、爱好、职业、留言内容等，主要应用单行文本域、单选按钮、复选按钮、下拉菜单、多行文本域和图片按钮等对象； 跳转按钮的设计。要求：给你的个人网站增加一个精彩连接的跳转下拉菜单；编写java程序，输出不同国家和地区的日期时间以及货币信息。 实验指导 实验任务一：设计留言板留言的静态表单页面 实验步骤： 第1步：新建“我要留言”栏目的文件结构。在你的个人站点中增加一个“我要留言”栏目，文件夹为notebook,并在其中创建一个index.html的网页文件，如图1所示。 图1 “我要留言”栏目的文件结构 第2步：设计留言页面的网页布局。打开index.html文件，设计如图2所示的页面导航布局。 图2 “我要留言”界面的导航布局 第3步：插入表单域。将鼠标定位在在图2界面的内容显示区，然后在“插入”面板的“表单”选项卡中单击“表单域”按钮，如图3所示，然后在页面上将显示一个红色虚线轮廓的矩形。 图3 插入表单及表单选项的工具面板 第4步：设置表单域的属性。选中插入的表单域对象，然后在属性面板中设置其属性，如图4所示。 图4 设置表单域的属性 第5步：插入表单元素的布局表格。将鼠标定位在表单域中，然后插入一个9行2列的表格，并在表格中输入如图5所示的表格内容。 图5 布局表单元素的表格 第6步：在图5的表单布局表格中依次插入文本框、密码框、单选按钮、复选按钮、下拉菜单、文件域、多行文本区域和按钮等8种表单元素，并分别设置它们的属性，如名称、长度、默认值等，如图6和图7所示。 图6 插入表单元素后的表单界面 图7 设置菜单/列表的属性窗口 第7步：保存网页文件，浏览表单页面的设计效果。 实验任务二：设计精彩链接的调转菜单。 第1步：在你的个人网页的左边导航栏中的最下边的一个单元格中，插入一个“友情链接”栏目的表单域，如图8所示。 图8 插入友情链接的表单域 第2步：插入跳转菜单表单元素。将鼠标定位于图8中的表单域中，输入“友情链接”的提示文字，然后在“表单”工具面板中单击“跳转菜单”按钮，插入一个“跳转菜单”，如图9所示。 图9 插入跳转菜单表单元素的工具面板 第3步：设置跳转菜单的属性。选中插入的跳转菜单，然后在属性面板中设置其名字为JumpMenu,类型为“菜单”，然后单击“列表值…”按钮，在弹出的列表值中输入项目标签和项目值，如图10所示，最后单击“确定”按钮。 图10 设置友情链接“跳转菜单”的属性 第4步：修改调转的代码，使其调转后在新窗口打开。选中友情链接跳转菜单，切换到代码窗口，如图11所示，将调转菜单的onChange事件的相应函数改为： onChange=javaScript:window.open(this.options[this.selectedIndex].value)，然后保存文件，切换回设计窗口。 图11 修改友情链接跳转菜单的onChange事件的响应函数 第5步：保存文件，测试跳转菜单的功能。