1.2 网站开发基础知识

1.2.1 网页与网站

1. Internet与WWW

计算机网络是多台计算机通过特定的连接方式构成的一个计算机集合体，它是 Internet的基础，在这个集合体中使用一套共同遵循的规则，即网络协议，实现网络中设备的相互沟通。

（1）Internet的理解

普遍观点：Internet是由数百万台计算机和数以千万计用户组成的全球范围内的计算机互联网络，是一个世界范围内信息资源的大型集合体系。

网络专家观点：Internet是一个基于TCP/IP的网络，它由分布在各个国家的数以万计的网络互联设备组成，其间布满了复杂的通信线路，每台计算机在网络中具有独有的标识—IP地址，无时无刻不在流动着的数据——IP数据包，IP数据包在通信协议的控制帮助下，能够从发送信息处准确地传送到接收信息的目的地。

社会学家观点：Internet是一个虚拟社会，是一个世界地球村，在Internet中能够找到现实生活中的某些特征和事实。

Internet上提供各种服务，供上网的用户使用，包括WWW服务（网页浏览服务）、电子邮件服务、网上传呼、文件传输、在线聊天、网上购物、网络炒股、联网游戏等。

（2）WWW（World Wide Web）

它由遍布在Internet上的称为Web服务器的计算机组成，它将不同的信息资源有机地组织在一起，通过一种叫做“浏览器”的软件进行浏览。

基本工作过程：首先用户要连接到Internet，然后在浏览窗口中输入一个Internet地址（该地址通常对应于一个网页）并按Enter键后，请求显示Internet上的某个特定网页。这个“请求”被浏览器通过电话线等网络介质传送到用户所在的服务器端，然后服务器做出“响应”，再通过网络介质把用户请求的特定网页传送到用户所在的计算机，最后由浏览器进行显示。当用户在页面中操作时，如单击其中的超链接，则这种“请求”又会通过网络介质传送到提供相应页面的服务器，然后还是由服务器做出响应。

2. 网站与网页

网页是构成Web服务器这样一个庞大资源集合的元素，网页中包含“超链接”，将一个网页连接到其他网页，构成了万维网的纵横交错。

网站是通过超链接组合在一起的一系列逻辑上可以视为一个整体的一些网页的集合，通常为了完成某个特定目标。

3. 网页

网页是用超文本标记语言（HyperText Markup Language，HTML）写成的文档。HTML是网页的一种规范，它通过标签（也叫做标记符）定义了网页内容的显示。

1.2.2 网站制作工具

1. 网页编辑工具

网页编辑工具的作用就是用直观的方式实现网页制作的过程，编辑工具将HTML代码的生成自动化，用户实际操作的结果就是最终生成的网页效果，即HTML文档，所见即所得。目前应用广泛的网页编辑工具有Dreamweaver和FrontPage。

（1）Dreamweaver

Dreamweaver是一种专业的网页编辑工具，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。它提供了非常友好的用户界面和强大的功能，与目前流行的Flash技术紧密结合，已经成为专业用户和普通用户的首选网页开发工具。

（2）FrontPage

FrontPage也是一款非常优秀的网页（网站）制作与管理软件，继承了Office系列软件界面通用、操作简单的特点，十分适合初学者使用。

2. 素材处理与创作工具

一个完整的网页除了HTML源文件外，还需要其他一些文件，诸如图像、多媒体等，这些文件在网络上传输通常需要对原始素材进行一些处理，如图像优化、格式转换等，同时，为了获得最佳的显示效果，还需要制作一些特效，这些工作的完成需要素材处理工具协助，具体工具如下：

（1）Photoshop

Photoshop是一种专业的图形图像处理软件，能够实现各种专业化图像处理，可以方便地制作和处理各种Web图像。

（2）Fireworks

Fireworks是一种专业的Web图形工具软件，Fireworks将功能完全集中在Web上，同时又提供了许多独创的只适合于Internet的功能，是基于Web应用而建立的。

（3）Flash

目前较流行的一种Web矢量动画软件，它建立了在Web上的交互式矢量图形和动画的工业标准。其图形是压缩的矢量图形，不会因为缩放导致影像失真，并采用网络流式媒体技术，可以在网上迅速传输。

（4）Anfy

一种常用的Java特效生成工具，以简明的方式实现多种复杂的Java效果，可以在Internet上下载并使用该软件。

（5）其他

其他一些可用于完成某些特定功能的软件：用于矢量绘图的Illustrator、Corel DRAW和FreeHand，用于制作GIF动画的GIF Animator，用于制作3D特效的Cool 3D等。

1.2.3 教学网站开发流程

教学网站的建设通常都遵循一个基本的流程：规划阶段、设计阶段、开发阶段、发布阶段与维护阶段。

1. 规划站点

教学网站的成功运作首先取决于网站规划。在建立网站前应做好网站的教学设计，明确网站的教学目标、功能定位、建站技术等，并且进行详细分析，写出网站规划书。

（1）教学设计

教学网站的目标组织和学习设计是网站规划中最重要的部分，是教学网站设计与开发是否成功的最重要因素。在目标组织方面，教学目标清晰、定位准确、表述规范，适应于相应认知水平的学生；网站教学内容重点、难点突出，启发引导性强，符合认知规律，有利于激发学生主动学习。在学习设计方面，构建良好的教学交互（包括人机交互、师生网上交互、同学之间网上交互等）；设计多种形式的习题题型，题量丰富，有对习题的评判或学生自学习效果的评价；模拟教学实践环境，根据学习内容设计研究性或探究性实践问题，培养学生的创新精神与实践能力。

教学网站通常的功能模块有教师介绍、教师课表、课程教案、参考资料、教学论坛、课后答疑、典型问题、优秀作品、学生成绩管理、考试管理、作业管理等。这些模块之间的关系有的是同级关系、有的是从属关系，可根据其关系画出模块层次关系图，构设网页内容的布局。原则上主要功能模块在前，次要功能模块在后，并且为每一个模块对应的网页命名，提前标注说明。

（2）软件选择

网站的设计技术是完成网站的保证，目前的网站从技术方面可初步分为静态网站和动态网站。

静态网站中的网页不提供人机交互功能，只是文字、图形、动画、视频等资料的数字化显示，是初学者较好的选择。

动态网站是指具有人机交互功能的网站，并不是初学者所理解的具有动画的网页。主要制作网站中有关数据管理功能模块。动态网站制作技术较复杂，需要和数据库进行交互，要求制作者具备一定的编程能力和数据库管理技术。

（3）确定站点的风格

站点的整体风格即网站内容的表现形式，包括网页所采用的布局结构、颜色、字体、标准图形和图像等。具体包括如下几种：

① 信息式：界面以文字信息为主，布局整齐划一，简洁明快，每层次页面都会有一个导航系统，顶部区域使用较有特色的标志，顶部中间是广告横幅，其他部分是较多的文本超链接。

② 画廊式：该类网站以艺术教育教学类网站为主，表现形式主要以图像、动画和多媒体等高新网络技术为主，表现个人特色，其特点是页面布局或时尚新颖，或严谨简约，注重课程的特征。

③ 综合式：基于以上两种风格结合的网页，即文字与图像或其他网络媒体技术的结合体。

2. 设计站点

（1）建立站点目录结构

先将站点中的各种信息资源进行整理、归类，然后在计算机硬盘上新建一个站点文件夹，再根据需要在文件夹中新建若干子文件夹，将不同类型的文件存放在站点中，最后在这个站点根文件夹中新建一个主页文件。

① 定位网站的主题和名称

主题要小而精。网站名称要易记，最好用中文名称。另外，网站名称的字数应该控制在六个字以下，这样也方便于其他站点的友情链接排版。名称要有特色，能够直接体现自己的内容。

② 网页文件命名规则

● 最好使用小写英文名称（可以用汉语拼音代替），中间无空格。一般不使用中文文件名；

● 可以包含数字或下画线，如class_1.htm、chap_1.htm等；

● 注意正确的文件扩展名，一般由相应软件自动添加，如网页的“.htm”或“.html”、图片的“.gif”等。

（2）设计导航系统

导航系统实质上就是一组使用了超链接技术的网页对象（包括文字、按钮、小图片等），它们将网站中的内容有机地连接在一起，是浏览者获取网页信息的基本界面。设计的方案是：首页和一级页面之间用星状链接结构，一级和以下各级页面之间采用树状链接结构。

① 导航的分类

文本导航：基于文本的超链接，实用高效，速度快，是使用最普遍的一种导航方式。

图片导航：使用图像、按钮吸引访问者，让用户单击，多用于个人站点或是公司网站。

图像映射技术导航：浏览者单击图像不同区域（也称热点）时，会跳转到不同的页面。

② 导航设计原则

通过最少的单击次数得到最多的信息量，根据页面内容的逻辑关系制作网站的导航系统。

③ 导航设计要点

● 浏览者应该能方便地知道他们现在正处于网站中的什么位置，即要提供页面的位置信息；

● 在页面中提供返回首页或上一级页面的超链接；

● 提供与站点制作者联系的电子邮件链接；

● 整个导航系统的风格应该一致，否则会使浏览者产生已经离开网站的错觉。

（3）设计页面的版式

页面版式是指如何安排网页中的元素（包括文本、图像、动画等），或者说用什么形式表现网页的内容，网页中要放置些什么内容，包括导航栏、文本、图像或其他多媒体信息的详细数目。

页面版式设计要点：

● 界面布局合理、新颖、活泼、有创意；

● 整体风格统一，导航清晰简捷。

（4）网页中的颜色

通过设置文本颜色、背景颜色、链接颜色及图像颜色，可以构造出很多网页布局效果。设计颜色方案遵循以下规则：

● 保持一致性。若选择一种颜色作为网站的主色调，要保持这种风格，使图像和多媒体信息的颜色与之匹配。若多种色彩则注意搭配协调，视觉效果好，符合视觉心理。

● 注意可读性。文字、图片、音、视频、动画等切合教学主题，和谐协调，配合适当。

（5）文字、图像等对象的使用

为确保网页中的所有字体能够被访问者的浏览器正确显示，中文网站中的字体最好使用默认的“宋体”、“楷体”、“黑体”等基本字体，并使用“样式”对站点的文本进行统一管理。对于特殊字体可以使用图像处理软件将文字制作成图片，然后放置在网页中。在使用时要考虑它们的数量和质量对网页下载速度的限制。

各种媒体制作精细，吸引力强，激发学生的学习兴趣。

（6）收集和制作素材

需要准备的素材：图像、动画、文本及其他多媒体信息。一般可以在网上免费下载或者是购买光盘素材，自己制作则更佳，可以体现自己的设计风格。

3. 制作网页

具体实施设计结果，将站点中的网页按照设计方案制作出来，通过Dreamweaver等软件在各个具体网页中添加实际内容，包括文本、图像、声音、Flash电影及其他多媒体信息。需要注意的是，在这个阶段一定要对网页进行反复测试，修改，确保网页最终显示结果与设计结果相同。

4. 本地测试

通过建立本地站点，配置IIS，测试网站的可靠性和检查链接有无错误。

5. 网站发布与维护

为了使用户可以访问站点，需要发布站点，首先向ISP申请网页空间，得到有关远程站点的基本信息（包括用户名、主机地址、用户密码等），然后使用FTP软件或者Dreamweaver进行网站上传。发布成功后，应根据访问者的建议，不断修改或更新网站中的信息，从浏览者的角度完善网站。这个周而复始的过程构成了网站的维护过程。

【上机练习】

按照教学网站的信息资源来分类，从网上搜索各种类型的教学网站各一个，分别按类型记下网站的名称、网址。