网页制作基础知识 教案

网页制作基础知识教案

教学目标：

了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。

教学重点难点：

在深刻了解概念的基础上把理论转化成实际的应用。

教学过程：

在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。

网页的基本元素

文本：基本组成部分

图像：更加直观准确地表达某些信息，并且可以起到美化网页，吸引读者注意力的作用

超链接：可以方便地转入其他网页进行浏览。

网页的其他元素：音乐表格表单

美化网页，丰富网页的内容，增强网页的功能。

网页的实质

网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。

网页的实质 = 表格+文本+图片+动画+声音+超级链接+……

◆网站相当于发行到全世界的期刊。

◆网站的实质 = 服务器上的文件夹

◆主页相当于期刊的封面。

◆主页的实质 = 打开网站的第一个网页

网页和网站的分类

从网页是否执行程序来分，可分为静态网页和动态网页这两种类型。

什么是静态网页、动态网页?

◆所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定

不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。

静态网页一般以.htm或.html为后缀结尾的，俗称html文件。本课程就是制作静态网页的课程。

◆所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换

成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。

动态网页一般要用专门的脚本语言编写，如ASP、https://www.360docs.net/doc/2e9632670.html,、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十分相似

网页制作注意事项

◆要沉稳，不要花里胡哨。自助网站制作的人往往喜欢猎奇，弄一些不必要

的乱七八糟的东西，比如弹出窗口啦、脚本代码啦、很大的图片啦，等等。

◆要素净、大气，不要五彩缤纷。要注意在一个自助网站的页面里不要用色

太杂。要确定一个颜色主调，再搭配一两种反差不太大的颜色即可。正文文字的大小要基本统一，文字的颜色也不要红红绿绿。不要认为如何制作网页的关键是以大文字和鲜艳的色彩来强调很多意思，实际上使人眼花缭乱，什么都强调不了，也很不大气。

◆要有个性、有风格，要突出行业的特点。比如娱乐业可以热烈一些、活泼

一些，政府网站则要庄重一些；收藏、书画业要古朴典雅，策划、时装业则要前卫一些。

◆一个网页不要太长，一般两屏到三屏就可以了。在同一个网页里，如果文

字或图片太多，既不美观，也会影响你的网页打开的速度。如果内容实在太多，应该分作几个页面，或者分为几个二级栏目。

◆其实，如何制作网页，重点做好网站的首页。网站的首页就好比一个人的

脸面，如果脏兮兮的，会把你的顾客吓跑。网站的首页做得好，里面的内容一般也会不错。