第5课 登录和注册页面的Html实现(一)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第5课登录页面的Html实现
本课实训目标:
学习在MyEclipse中的Html静态页面制作技术,利用表单及其控件标签实现学生在线论坛的登录的Html页面。
本课实训内容:
教授初学者初次了解在MyEclipse开发环境中编写Html静态网页内容的步骤和方法,复习并回复Html的标记语法内容,本次练习内容为在在线论坛项目中实现登录和注册页面。
练习步骤一:登录页面 Login.html实现
首先打开在线论坛项目目录,在WebRoot目录的user子目录中找到Login.html,并点击打开该文件进行编辑,如图1,图2.
图1 在线论坛项目结构
网页设计
窗体网页编辑工
具栏
图2 MyEclipse中的网页编辑模式
步骤二:为编辑登录对话框添加表单
登录页面的作用是接收用户输入并且提交给程序进行处理,而只有form表单能够将用户输入内容提交给应用程序或者下一个网页。编写form表单如图3,图4。
图3 在Login.html中创建表单(一)
图4 在Login.html创建表单(二)
步骤三:在表单域中添加4行2列的
图5 在表单中添加表格结构(一)
图6在表单中添加表格结构(二)
步骤三:在表格中添加标签文本
方法是直接在网页设计窗体中点击表格单元,编辑内容即可,如图7
图7 编辑登录页面的信息标签
步骤四:添加用户名输入的文本框控件
首先点击网页设计窗体中要放置文本框控件的位置,然后打开右边网页工具栏(Palette)的
图8 添加用户名输入的文本框控件(一)
选择
图9 添加文本控件标签
步骤五:添加密码框标签
同步骤四,在表格的第二行,第二列位置添加一个密码框标签,该密码框标签为
图10 添加密码框控件标签
图11 拥有用户名和密码输入框的登录页面
步骤五:添加“确定”、“重置”表单按钮和“我要注册”的超链接在网页工具栏中选择
的用户输入提交给表单action事件所指定的网页或者是应用程序,如图12,图13。
图12 添加“确定”按钮(一)
图13 添加“确定”按钮(二)
在网页工具栏中再次选择
用户输入清空或者设置为默认内容状态,如图14,图15。
图14 添加表单内容“重置”按钮(一)
图15 添加表单内容“重置”按钮(二)
设置“我要注册”超文本链接,首先如图15输入“我要注册”的文本,并且使
之处于选中状态,而后选择网页工具栏中的“Hyperlink”标记,在打开的对话框中输入要链接到网页的URL为“AddUser.html”,Title标题可以不设,其作用为用户鼠标在网页中划过该超链接时显示的提示内容,另外Target内容不选,使用默认方式,如图16,图17,图18。
图16 设置“我要注册”的超文本链接(一)
图17 设置“我要注册”的超文本链接(二)
图19 设置“我要注册”的超文本链接(三)
当然同学们也可以选择Visual Stdio2010或者Dreawaver编写出此登录网页再拷贝到项目的捷径方法,不过就缺少了学习MyEclipse工具的机会。
另外,本人建议学习者更加尝试着直接在网页代码编辑框中直接利用Html 标记来编写以上网页程序,这样能更加强化对网页编程的理解和掌握,内容如下: