《网站建设与网页设计》教案

1.1教学目的和要求

1.了解HTML的发展历史和HTML5的特性；

2.掌握HTML的文档结构、代码规范和网页文件的创建过程；

3.掌握搭建支持HTML5浏览器环境的方法。

1.2教学重点和难点

1.HTML5的新特点；

2.HTML5的新元素；

1.3教学方法及手段

实例教学，讲授与演示结合。

1.4教学内容

1.4.1HTML简介

HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。

HTML5的特性及元素：

(1) 实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。 

(2) 更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。 

1.4.2HTML编写规范

HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一个排版软件，将网页的内容排成理想的效果。其格式为：

<标签> 受标签影响的内容 

每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为：

<标签  属性1="属性值1"  属性2="属性值2" …> 受标签影响的内容 。

不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、、、、、、、、、等标签。

代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。

1.4.3网页文件的创建过程

用记事本创建网页

用DW软件创建网页

1.4.4搭建支持HTML5的浏览器环境

目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。

1.4.5小结

 本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。 

第2讲HTML标签

2.1教学目的和要求

1.掌握基本的文字与段落标签的使用；

2.掌握超链接、图像、表格和列表标签的使用方法和基本属性；

3.能够进行基本的网页排版。

2.2教学重点和难点

1.各类标签的使用方法和属性设置；

2.嵌套列表的使用。

2.3教学方法及手段

实例教学，讲授与演示结合。

2.4教学内容

2.4.1文字与段落排版

注释标签

强制换行标签

段落标签

…

定位标签…

水平线标签 

标题文字标签…

2.4.2超链接

锚点标签

指向其他页面的链接

指向本页中的链接

指向下载文件的链接

指向电子邮件的链接

2.4.3图像

图像标签

用图像作为超链接热点

2.4.4表格

简单表格格式

表格内文字的对齐方式

表格在页面中的对齐方式

2.4.5列表

无序列表

• …

有序列表

1. …

嵌套列表的使用（案例讲解）

2.4.6小结

本次课主要讲述了HTML5中常用的标签，灵活掌握各类标签的使用方法的属性设置，重点介绍了嵌套列表在网页设计中的应用。 

第3讲表单

3.1教学目的和要求

1.了解表单的工作原理；

2.掌握表单标签的基本格式；

3.掌握元素、选择栏和多行文本域的用法；<p>4.掌握使用表单实现浏览者与网站之间信息交互的方法。<p>3.2教学重点和难点<p>1.<input>元素中type属性的值；<p>2.表章提交数据的意义；<p>3.3教学方法及手段<p>实例教学，讲授与演示结合。<p>3.4教学内容<p>3.4.1表单的工作原理<p>表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作。<p>3.4.2表单标签<p>网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。表单的基本语法及格式为：<p><form name="表单名" action="URL" method="get|post"><p></form><p>3.4.3表单元素<p><input>元素<p>用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。<input>元素的基本语法及格式为：<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y" /><p>选择栏<select><p>选择栏可分为两种：弹出式和字段式。<select>标签的格式为：<p><select size="x" name="控制操作名" multiple><p> <option …> … </option><p> <option …> … </option><p></select><p><option>标签的格式为：<option selected value="可选择的内容"> … </option><p>多行文本域<textarea>…

在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用标签可以设置允许成段文字的输入，格式为：<p><textarea name="文本域名" rows="行数" cols="列数"><p> 多行文本<p>

 其中的行数和列数是指不拖动滚动条就可看到的部分。

3.4.4表单的高级用法

案例讲解

在某些情况下，用户需要对表单元素进行，设置表单元素为只读或禁用，常应用于以下场景：只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示。例如，注册或交易协议、商品价格等。

禁用场景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮。

只读和禁用效果分别通过设置“readonly”和“disabled”属性来实现。

3.4.5小结

表单中的所有元素都只能放在一个表单元素中，作为一个完整的数据一起提交，HTML5对各种元素设置了一些新的属性来约束用户的输入，丰富了表单的表现力。 

第4讲HTML高级应用

4.1教学目的和要求

1.了解文档结构元素的特点与应用场合；

2.掌握使用结构元素构建网页布局的方法；

3.掌握音频和视频的基本格式以及

4.了解canvas绘图的基本原理。

4.2教学重点和难点

1.

2.元素的创建与基本原理。

4.3教学方法及手段

实例教学，讲授与演示结合。

4.4教学内容

4.4.1使用结构元素构建网页布局

HTML5中的主要文档结构元素包括：

标签：代表文档中的一段或者一节。