Task2.docx

《Task2.docx》由会员分享，可在线阅读，更多相关《Task2.docx（57页珍藏版）》请在冰豆网上搜索。

Task2

Task2：

使用HTML创建静态页面

【学习目标】

✧了解HTML语言的基本特点

✧掌握常用HTML标记的功能和用法

✧制作表单网页

✧使用CSS样式表

✧了解JavaScript语言的基本特点

准备知识1：

HTML基本标记

1、什么是HTML语言？

HTML（HypertextMarkupLanguage,超文本标识语言）是网页的基础语言，它通过利用各种标记（TAG）来标识文档的结构以及标识超级链接的信息。

无论采用哪种技术进行Web开发，最终表现在用户浏览器中的还是HTML代码。

因此，了解一些基本的HTML知识对今后的学习非常有帮助。

在HTML中，标记是用来界定各种单元，如标题、段落、列表等。

HTML单元由三部分组成：

起始标记、单元内容、结束标记。

起始标记由“<”和“>”来界定，结束标记由“”来界定，单元名称和属性由起始标记给出，格式如下：

<标记名称属性名1＝属性值1属性名2＝属性值2……>内容<标记名称/>

例如：

……表示将网页背景图像设为images文件夹中的bg.jpg，页面左边距为30像素。

整个HTML网页则通常是由两部分内容组成的：

首部信息（HEAD）和文档主体（BODY），网页结构的总体框架如下：

--首部元素、元素属性及基本内容。

-->

--主体元素、元素属性及基本内容。

该部分显示在浏览器中。

其中可以包含许多元素，如

等标记，是HTML语言的核心部分。

-->

2、如何创建HTML文档？

创建HTML文档的方式有很多，比如用FrontPage、Dreamweaver、MicrosoftVisualStudio2005等专业的工具软件来制作，或者用简单的编辑工具，如记事本等程序来编辑HTML文档亦可。

这里以记事本为例，来学习编辑HTML文档的过程。

首先，打开“记事本”程序，输入以下的源代码，标记字母大小写均可，将文件保存为firstpage.htm。

欢迎进入学院主页

编辑完毕后，用IE浏览器打开firstpage.htm，显示效果如图2—1所示。

图2－1一个简单的HTML网页

3、常用的HTML标记有哪些？

现将一些经常用到的标记符基本用法总结在下面的列表中。

表2—1常用HTML标记用法

标记符

功能说明

---->

注释标记，为代码加上说明，但不被显示

开头说明，提供关于该网页的信息给浏览器

表示网页标题，显示于浏览器顶端

段落标记，表示另起一段，段落之间有一空白行

表示n级标题文字，如

换行标记，使内容显示于下一行

水平线，插入一水平线

粗体标记，产生字体加粗的效果

斜体标记，字体出现斜体效果

字体标记，设置字体、大小、颜色等

创建一个标有数字的有序列表

创建一个标有圆点●的无序列表

表格标记

表示表格中的行

表示表格内的单元格

插入图片

超链接标记

任务2.1创建学生信息管理系统网站主页

任务要求：

创建学生信息管理系统的首页，如图2－2所示。

图2－2学生信息管理系统网站主页

要求：

页面中包含标题图片，FLASH导航按钮，排版表格，文字链接，版权声明等内容。

解决步骤：

1.打开“记事本”程序，输入以下代码，并保存为index.htm。

2.在……中添加以下代码，显示5行1列的表格。

3.分别在表格第一行和第二行添加标题图片及动画，第三行至第五行添加文字、列表及超链接。

基本信息管理系统

• 设置专业

• 班级设置

• 科目设置

版权所有：

计算机科学系

完整的HTML源代码如下：

基本信息管理系统

• 设置专业

• 班级设置

• 科目设置

版权所有：

计算机科学系

实践2.1创建办公自动化系统主页

要求：

试使用HTML制作一个办公自动化系统的首页，包括版头、导航、主内容、版权等部分，建议多采用表格布局，利用图片加以美化，页面需尽量美观、整齐。

准备知识2：

HTML表单

1、什么是HTML表单？

表单一般用来收集用户输入的信息，它提供了用户和网站之间进行信息交互的渠道。

网页中常使用表单来建立搜索、查询、申请页面、进行各种调查以及收集订购信息等。

当用户填写完信息后做提交操作，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的后台程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

表单区域用

例如：

……。

●文本域

文本域接受任何类型的字母数字文本输入内容。

文本可以单行或多行显示，也可以密码域的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本。

不过使用密码域发送到服务器的密码及其它信息并未进行加密处理。

所传输的数据可能会以字母数字文本形式被截获并被读取。

因此，始终应对要确保安全的数据进行加密。

图2—3文本域

文本域的HTML代码如下：

单行文本域

密码文本域

多行文本域

●复选框

复选框允许在一组选项中选择多个选项，用户可以选择任意多个适用的选项。

图2—4复选框

复选框的HTML代码如下：

选项一

选项二

选项三

选项四

●单选按钮

在某单选按钮组中选择一个按钮，就会取消选择该组中的所有其它按钮。

图2—5单选按钮

单选按钮的HTML代码如下：

选项一

选项二

选项三

选项四

●列表/菜单

在列表中，用户可以选择多个选项。

而对于菜单而言，用户只能从中选择单个选项。

图2—6列表/菜单

列表/菜单的HTML代码如下：

—以下为菜单-->

选项一

选项二

选项三

—以下为列表，高度4行，允许多选-->

选项一

选项二

选项三

另外，还有一种叫做跳转菜单的表单对象，这种菜单中的每个选项都可以链接到某个文档或文件。

跳转菜单HTML代码如下：

window.open（this.options[this.selectedIndex].value）">

XX

谷歌

搜狐

●按钮

在单击按钮时，通常执行提交或重置表单的操作。

按钮上显示的标签可以用value属性进行自定义。

图2—7按钮

提交或重置按钮的HTML代码如下：

●图像域

图像域使用户可以在表单中插入一个图像，用于生成图形化按钮。

例如：

●文件域

文件域使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。

例如：

图2—8文件域

●隐藏域

通常为了程序处理的方便，在提交表单时通过隐藏域来发送一些不用用户填写但程序又需要的数据，隐藏域并不会在页面上显示出来。

例如：

任务2.2创建学生信息管理系统网站的登录页面

任务要求：

创建学生信息管理系统的登录页面，如图2－9所示。

图2—9学生信息管理系统的登录页面

要求：

页面中包含标题图片，登录区表单，用户密码文本框，提交按钮，版权声明等内容。

解决步骤：

1.打开“记事本”程序，输入以下代码，并保存为login.htm。

2.在……中添加以下代码，表示添加一个表单，表单中添加3行1列的表格，其中第一行添加图片，第二行留空，第三行嵌套一个5行1列的表格。

3.在table1表格中添加用户名和密码的文本框以及按钮等表单元素。

登录

用户：

密码：

版权所有：

计算机科学系

完整的HTML源代码如下：

登录

用户：

密码：