网页制作基础知识 教案
教学目标：
了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。
教学重点难点：
在深刻了解概念的基础上把理论转化成实际的应用。
教学过程：
在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。
网页的基本元素
文本 ：基本组成部分
图像 ：更加直观准确地表达某些信息，并且可以起到美化网页，吸引读者注意力的作用
超链接 ：可以方便地转入其他网页进行浏览。网页的其他元素：音乐 表格 表单
美化网页，丰富网页的内容，增强网页的功能。
网页的实质
网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。
网页的实质 = 表格+文本+图片+动画+声音+超级链接+…… 网站相当于发行到全世界的期刊。 网站的实质 = 服务器上的文件夹 主页相当于期刊的封面。
主页的实质 = 打开网站的第一个网页
网页和网站的分类
从网页是否执行程序来分，可分为静态网页和动态网页这两种类型。什么是静态网页、动态网页? 所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。
静态网页一般以.htm或.html为后缀结尾的，俗称html文件。本课程就是制作静态网页的课程。
所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。
动态网页一般要用专门的脚本语言编写，如ASP、ASP.NET、PHP、JSP等等 动态网页内含有程序代码，运行于服务器端的程序、网页和组件等都属于动态网页，在网络中看到的动态网页通常是以.asp、.jsp等后缀结尾的，但也有以.php结尾的，如我们学校的校园网首页。
一个完整有价值的网站应该是集静态、动态、动画于一身的。
制作静态网页的工具
用HTML语言直接编写(,用WORD编写,用Dreamwaver编写,用Frontpage编写) 图片编辑工具：Photoshop、Firworks等； 动画制作工具：Flash、Swish、Cool 3d等；
还有网页特效工具：有声有色、网页特效梦工厂等。HTML语言
• 概念：是一种使用一组特定的标记来描述文档结构的语言，HTML的源代码由网络浏览器解释执行。
• 结构：HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
HTML语言的特点:它们是成双出现的 Dreamweaver • 较为专业的网页设计工具软件。
• 可视化编辑、HTML代码编辑的软件包
• 支持ActiveX、JavaScript、Java、Flash、Shockwave等各种编程工具。• 支持动态HTML的设计 Frontpage • “功能强大，简单易学”的特点，采用“所见即所得”的编辑模式，不必了解HTML的语法
• 基本使用方法与Word十分相似
网页制作注意事项
要沉稳，不要花里胡哨。自助网站制作的人往往喜欢猎奇，弄一些不必要的乱七八糟的东西，比如弹出窗口啦、脚本代码啦、很大的图片啦，等等。
要素净、大气，不要五彩缤纷。要注意在一个自助网站的页面里不要用色太杂。要确定一个颜色主调，再搭配一两种反差不太大的颜色即可。正文文字的大小要基本统一，文字的颜色也不要红红绿绿。不要认为如何制作网页的关键是以大文字和鲜艳的色彩来强调很多意思，实际上使人眼花缭乱，什么都强调不了，也很不大气。
要有个性、有风格，要突出行业的特点。比如娱乐业可以热烈一些、活泼一些，政府网站则要庄重一些；收藏、书画业要古朴典雅，策划、时装业则要前卫一些。
一个网页不要太长，一般两屏到三屏就可以了。在同一个网页里，如果文字或图片太多，既不美观，也会影响你的网页打开的速度。如果内容实在太多，应该分作几个页面，或者分为几个二级栏目。
其实，如何制作网页，重点做好网站的首页。网站的首页就好比一个人的脸面，如果脏兮兮的，会把你的顾客吓跑。网站的首页做得好，里面的内容一般也会不错。
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
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采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用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的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
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标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。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、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口属性设置
2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
