1.5 项目实训

1.5.1 项目描述

本项目实现一个登录页面，页面文件名为login.html，页面运行效果如图1-5所示；项目的文件结构如图1-6所示。本项目分别使用NetBeans 8和Eclipse neon.3开发，使用NetBeans开发的项目名称为ch01，如图1-6所示；使用Eclipse开发的项目名称为ch1。

1.5.2 学习目标

本实训主要的学习目标是使用1.4节的知识并参考第2章和第3章内容编写一个HTML页面，激发学生的自学兴趣，通过自学第2章和第3章的知识达到巩固已学知识以及预习新知识的目的。

1.5.3 项目需求说明

本项目实现一个静态登录页面，用户可以在其中输入用户名和密码，页面提供有“登录”和“取消”按钮。

1.5.4 项目实现

【例1-2】 登录页面（login.html）。

1.5.5 项目实现过程中注意的问题

在编写项目代码时，首先应注意HTML或者JSP文件不能新建在META-INF和WEB-INF文件夹中，否则文件将不能运行，一般会提示404错误，即找不到文件错误；其次，为了支持中文字符，<meta http-equiv=＂Content-Type＂content=＂text/html；charset=UTF-8＂>中charset的属性值应为GB2312或者UTF-8；最后，要正确使用HTML的标签。

1.5.6 常见问题及解决方案

1．HTML标签和属性值拼写错误

这类错误如图1-7所示。

解决方案：在初学网页制作时，由于对编写标签不熟悉或者输入时不小心，容易把标签名、属性名或者属性值拼错，将出现如图1-7所示的情况，即页面显示的内容不是人们需要的结果。解决方法是根据异常情况查找错误位置，重新输入正确的标签名称、属性名称、属性值。

2．HTML标签的嵌套关系错误

这类错误如图1-8所示。

解决方案：在编写网页时，由于使用的标签嵌套关系错误出现异常，导致需要显示的内容不能显示出来或者显示的内容不是页面需要的效果。解决方法是正确使用标签的嵌套关系。

1.5.7 拓展与提高

请为表格添加背景颜色、为页面添加背景图片以及添加权限管理功能，效果如图1-9所示。