盘锦事业单位招聘-写物作文
《网页设计与制作教案》
教师：
系部：信息技术工程系
专业：计算机应用
班级：计机
湄洲湾职业技术学院
2008-2009学年第一学期
唐 俊 奇
电子信息
07（1）信息07（1）08（2）
- 1 -
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。
【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。
【教学重点】
网页设计中的若干术语。
【教学难点】
理解网页设计中的若干术语。
【教学方式】
讲授式、讨论式、案例分析式。
【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。
【新课内容】
1.1
WWW和URL
1.1.1 Web的起源
Web是World Wide
Web的简称，一般也称之为WWW或3W
1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）
WWW采用CS（客户机服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper
Text Transfer Protocol，超文本传输协议）作
为网络应用层通信协议
1.1.3 URL
URL的完整格式
协议:主机名或IP地址：端口号路径名文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape
Navigator、Mosaic
等
1.2.1 IE5的界面
1.2.2
IE5的使用
- 2 -
1.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 -
列表标志的使用。
【教学方式】
讨论式、案例分析式、练习式。
【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。
【新课内容】
2.1
HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
<标记>内容<标记>
2、单标记
语法：<标记>
最常用的单标记是
3、标记属性
语法
<标记 属性1
属性2 属性3 … >
例子
4、注释语句
格式
例子
2.1.2 HTML文档的基本结构
【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用
列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志
【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图
片。
- 4 -
* 使学生掌握超级链接标志的使用。
【教学重点】
* 字体、图片和超级链接标志的使用。
* 网页中特殊符号的输入 。
【教学难点】
* 理解特殊符号对应的标志。
* 理解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.2.6
文本修饰
2.2.7 预格式化文本
使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素
2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格
2.2.9
文本强制换行和不换行
文本强制换行
不换行
2.2.10 插入水平线
使用
标记
属性：Width，Size，Align，Noshade，color
2.2.11
使用列表
1、无序列表
......
2、有序列表
......
3、定义列表
……
2.3 插入图片
2.3.1 在网页中插入图片
基本格式
- 6 -
2.3.2 图片的属性
2.4 建立超级链接
2.4.1 指向一个目标
1、建立超级链接
2、为图片建立超级链接
3、链接到邮件和多媒体文件
链接到邮件
请与我联系
2.4.2
使用锚点
Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。
Ø建立锚点：
Ø
Ø使超级链接指向已定义的锚点。
Ø
Ø
2.4.3 新窗口和基准链接
1、打开新窗口
Target=开一个新窗口
2、基准链接
在
与 之间设定
图像地图的格式为： Usemap=
是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接
方式，理解和
使用书签链接学习HTML中超级链接标志的难点。
第四讲
HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。
【教学目的】
使学生掌握简单表格、表单与框架的制作。
【教学重点】
*
表格中单元格的合并以及表格嵌套和叠加操作。
* 框架的嵌套使用。
*
表单元素标志与属性。
【教学难点】
*
理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。
*
理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。
【教学方式】
案例分析式、项目教学
【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。
【新课内容】
2.5
插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 |
| 第一行第二列 | |
| 第二行第一列 | | 第二行第二列 | |