HTML语言与网页制作教案

城步职业中学：刘红兰

教学内容：HTML语言与网页制作

教学目的：

1、掌握输入和运行HTML文件的方法

2、掌握HTML基本的结构标记

3、掌握html在网页特效中的简单运用

教学重点：HTML基本的结构标记 教学难点：html在网页特效中的简单运用 教学方法：演示法 教学地点：多媒体 教学课时：1课时 教学过程:

一、什么是HTML语言

网页是由一种称为HTML的语言来描述的，网站中的大多数网页都以HTML文件的形式保存，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。下面，让我们来看一看下面这个例子吧！

如果我们要在网页中显示“城步职业中专计算机16班！”一行文字，可以用HTML 语句来描述：测试页面 城步职业中专计算机16班！

美诚国际教育宿州二中网页制作课程小结 田老师

第一讲 HTML的基本结构

-------根控制标记

-------头控制标记

标题 -------标题标记 -------头控制标记(尾)

-------网页显示区域

信息网络应用基础课程设计

题目: HTML静态网页制作

姓名

学院电子工程学院 专业电子信息科学与技术 班级

2014211202

学号

2014210

班内序号 指导教师范春晓 目录

一、 实验要求 .......................................................................... 3

二、 实验主题 .......................................................................... 3

1、 设计主题 .......................................................................... 3

2、 功能 ................................................................................. 3

3、 运行流程 .......................................................................... 4

4、 每部分功能及应用的HTML技术 ......................................... 4

三、 实验内容运行结果 ............................................................ 5

1、 整体布局 .......................................................................... 5

2、局部 .................................................................................... 9

四、 实验心得与感受 .............................................................. 12

1、遇到的问题 ....................................................................... 12

2、实验心得 ........................................................................... 12

一、 实验要求

1、有明确的主题。

2、页面制作精美、大方，看着舒服。

3、至少选择以下三类技术完成网页： (1) 多媒体(图像、声音) (2) 超链接(三种) (3) 表格(表格中的链接) (4) 表单 (5) 多框架

二、 实验主题

1、 设计主题

旅行——洛杉矶

本次信息网络应用基础实验需要运用HTML语言自行设计一个网页，要求能在本机上运行。

根据自己的兴趣爱好，我设计了介绍“旅行——洛杉矶”为例的网页。洛杉矶是美国一个非常著名的城市。在网页中运用文字、图片、音乐、表格、超链接等简要介绍了这个地方的美景、文化、旅游路线等等，页面中使用了表单用于用户的登录。达到了预期的效果。

2、 功能

(1)打开网页后可以播放背景音乐，且可以暂停或调节音量。

(2)界面有视频，可以点击控制视频界面的三种大小模式(放大，缩小，普通)。 (3)超链接到美国国家地理网。

(4)显示表格，并且向表格的单元格中添加图片和万维网的链接。 (5)还有图像超链接，点击图像跳转到另一设计的HTML文件中。 (6)表单可以输入想要用户名和密码。

(7)表格是各个关于洛杉矶的模块，点击模块链接后页面显示相应模块。

(8)每个模块显示相应内容。 (9)返回顶部的设置，在界面底部点击“返回顶部”即回到界面的最顶部界面中。

3、 运行流程

(1)打开名为“我的追梦者”的html文件。

(2)播放背景音乐。可选择暂停或调节音量。

(3)在表单栏中可以输入用户名和密码，其中密码是“

”模式。

(4)其中在表单中设置有6个链接，可以查看各种你对于洛杉矶的印象而搜索。

(5)界面的视频，是关于洛杉矶美景的一个视频，点击即可播放，对于界面的大小有放大、缩小、普通三种选择。

(6)三种超链接，点击“美国国家地理网”即可进入其官网，表格中的超链接点击即可进入相应的模块，图片超链接点击即可跳转到“北京，北京”网页中去。

(7)在界面最底部，点击“返回顶部”即可回到界面顶部。

(8)全部浏览完成。

4、 每部分功能及应用的HTML技术

(1)显示文字：加入段落。

(2)显示背景图片：“src”，即“source”。

(3)播放音乐：“audio”插入播放器。

(4)登录界面：插入表单。

(5)跳转相应模块：超链接之“同一文档的其他位置”。

(6)显示表格：添加表格。

(7)跳转万维网：超链接之“美国国家地理网”。

(8)跳转另一设计的网页：超链接之“北京，北京”。

(9)返回顶部：“href”进行。

三、 实验内容运行结果

运行结果、运行图片及其运行代码。

1、 整体布局

(1) 主界面

(2)文字链接及图片链接

a.美国国家地理网：

b.其他地方，例如北京

(3) 目录简介里的各个界面链接：

a.洛杉矶简介

b.相关美景

c.电影的魅力 d.音乐风云

e.明星阵容

f.游玩路线

2、局部

(1)背景音乐及文字超链接

运行代码：

(2)登录界面

运行代码：

(3)目录简介

运行代码：

(4)视频模块

运行代码：

(5)图片超链接

运行代码：

(6)返回顶部

运行代码：

(7)主题，文字

运行代码

四、 实验心得与感受

1、遇到的问题

在插入视频播放的时候，总是自动播放，然而我是想一开始是不播放的。 开始排版的时候不能让输入的文字按自己想放置的位置而放置。 解决方法：

把“controls”给去掉即可解决这个问题了。

排放的文字书上是用

来弄的，即使文字部分加入空格键也是不能改变它的位置，而我换用这个即可解决这个问题了。

2、实验心得

这次的实验中，终于学会了一直以来很好奇网页的编写。 从最初的一无所知，到逐渐的熟练掌握。尤其是做的内容还是我很喜欢的城市。做的认真不言而喻。最终完成后浏览成果时，给别人展示、讲解功能时，真的很开心。然而，这仅仅是开始。需要走的路，需要学习的知识，还有很多很多。希望在今后的学习生活中，能像这次的实验一样，可以将个人兴趣和知识融合在一起。让我们学的更有动力、更有趣味性。

《网页设计与制作(HTML+CSS)》课程教学大纲

任课教师：张志慧 编写时间：2018-12-14

一、课程的性质与目标

《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。

二、课程的主要内容及基本要求

《网页设计与制作教案》

教师：系部：信息技术工程系专业：计算机应用班级：计机

湄洲湾职业技术学院

2008-2009学年第一学期

唐 俊 奇

电子信息

07(1)信息07(1)08(2)

- 11.3 网页中所使用的技术

1.3.1 HTML语言和XML语言

1、HTML语言

ØHTML只使用SGML中很小一部分标记

ØHTML语言(Hyper Text Markup Language 超文本标记语言)

ØHTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具

2、XML语言

XML(eXtensible Markup Language) 1.3.2 动态网页

1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序

1.4 制作网页的基本方法

1.4.1 制作网页的基本步骤

1、确定网页的内容

2、设计网页的组织结构

3、资料的收集与整理

4、选择网页的设计方法

1.4.2 制作网页时要注意的问题

1、网页的标题要简洁，明确。

2、在文本中要使用水平线，以分割不同部分。

3、对重点段落要强调显示。

4、网页中插入的图片要尽量的小。

5、图形要附加文字说明，以便关闭图像时查看。

6、网页中引用的资料及商标(或图标)，不能侵犯版权。 【课后小结】

通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。

第二讲 HTML的基本标志与格式标志

【教学内容】

讲解HTML基本标志对和格式标志。 【教学目的】

使学生标志对与格式标志对的使用。 【教学重点】

格式标志的使用。 【教学难点】

- 3* 使学生掌握超级链接标志的使用。 【教学重点】

* 字体、图片和超级链接标志的使用。 * 网页中特殊符号的输入 。 【教学难点】

* 理解特殊符号对应的标志。 * 理解img标志中属性的意义。 * 理解书签超级链接的意义 。 【教学方式】

讨论式、案例分析式、练习式。 【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《WEB网站设计》Joel Sklar著 高等教育出版社。

3、《HTML网页制作教程》材义语编著 铁道出版社。 【新课内容】

2.2 插入文字

2.2.1 划分段落 格式

段落内容 2.2.2 插入标题文字 格式

标题内容 2.2.3 字号属性

设置基准字号： 网页内的其他文字，采用下面的格式来定义 ...... Size的有效范围是1(最大)到7(最小)。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。 2.2.4 颜色属性 两种方式

字符串 2.2.5 字体属性

2.2.6

文本修饰

......，文字以粗体显示。 ......，文字显示为斜体。 ......，显示下划线。

...... STRIKE>，中心线贯穿文字。 < EM>...... EM>，强调文字，通常用斜体。

< STRONG>...... STRONG >，特别强调的文字，通常用黑体。

- 5

2.3.2 图片的属性

2.4 建立超级链接

2.4.1 指向一个目标

1、建立超级链接

2、为图片建立超级链接

3、链接到邮件和多媒体文件 链接到邮件

请与我联系 2.4.2 使用锚点

Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。 Ø建立锚点：

Ø锚点文字 Ø使超级链接指向已定义的锚点。 Ø文字 Ø文字 2.4.3 新窗口和基准链接

2、基准链接

在 与 之间设定

2.4.4 图像地图

图像地图的格式为：

...... 2.4.4 图像地图 【课后小结】

本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志

- 72.6 表单的应用

表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。

2.6.1 创建表单

2.6.2 用定义用户交互 (1)单行文本输入区 (2)密码输入区 (3)单选框 (4)复选框 (5)隐藏区域 (6)按钮

2.6.3 定义下拉式菜单

你选修的课程：

计算机

英语

逻辑学

心理学 2.6.4 定义多行文字输入区域 请输入你的详细介绍：

文字

2.7 框架窗口

框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。 2.7.1 框架的定义 2.7.2 框架属性设置2.7.3 子窗口属性设置

- 9 - 2.7.4 常见的框架窗口划分方法 (1)标题和正文，分为上下两部分 (2)层次结构，分为上中下三部分

(3)目录和标题，分为左上、左下、右三部分

(4)标题、目录和正文，分为上、左下、右下三部分 (5)嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。