《网页制作概述.doc》由会员分享，可在线阅读，更多相关《网页制作概述.doc（10页珍藏版）》请在金锄头文库上搜索。
1、3第1章 网页制作概述 第1章 网页制作概述本章要点 如今，上网冲浪已经成为一种时尚，构成了现代人生活中一道独特而又亮丽的风景线。当在网上漫游之际，一定会对那漂亮的网页羡慕不已。其实，用户也可以制作自己的个人网页，然后在网上发布。为了能够使用户对网页有一个总体的认识，本章将首先介绍网页的组成元素和一些常用的网页设计软件，然后通过一个简单实用的网页制作实例来介绍网页的制作过程，从而为以后设计更复杂的网页打下良好的基础。本章内容包括： 网页包括的元素 常用的网页制作工具 制作自己的第1个网页1.1 网页包括的元素无论是初次领略Internet风光的新手，还是经常上网冲浪的老手，在初次设计网页之前，
2、都必须先认识(或重新认识)构成网页的基本元素。只有这样，才能在真正的设计工作中得心应手，才能根据需要合理地组织和安排网页的内容，从而达到期望的目标。设计网页的目的主要是发布信息，因此，作为信息主要载体的文本和图像也就成了网页的基本组成部分。超级链接是Web的核心，是它将万维网中无数的网页链接在一起的，如果没有它，Web就无从谈起。此外，表格、动画、音乐和交互式表单等信息的组织、表现，以及交互元素在网页中也具有举足轻重的地位。图1.1所示是新浪网的首页，在这个网页中，包含了多种网页元素(当然不可能是全部)。下面将详细介绍网页中包含的元素及其在网页中的作用。站点的徽标，即网页中的图像网页通常使用表
3、格来定位和安排内容以列表形式组织的文本超级链接广告，一般为GIF动画或Flash动画，是典型的图像超级链接搜索表单，是表单的一种形式，可根据浏览者输入的关键字在站点内搜索相关内容导航栏，使浏览者迅速访问站点中的主要网页图1.1 网页元素概览1.1.1 文本文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文字固有的缺点，人们赋予了网页中的文本更多的属性，如字体、字号、颜色、底纹和边框等。通过不同格式的区别，突出显示重要的内容。此外，还可以在网页中设计各种各样的文字列表，以清楚地
4、表达一系列的项目。以上这些功能的运用都给网页中的文本赋予了新的生命力。1.1.2 图像和动画图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。可以在网页中使用GIF、JPEG(JPG)、PNG三种图像文件格式，其中使用最广泛的是GIF和JPEG两种格式。 提示：当使用“所见即所得”的网页设计软件在网页上添加其他非GIF、JPEG或PNG格式的图片并保存时，这些软件通常会自动将少于8位颜色的图片转换为GIF格式，或将多于8位颜色的图片转换为JPEG格式，PNG格式图片为Fireworks专用。 注意：图像虽然在网页中起着非常重要的作用，但如果网页上加入的图片过多，不仅会影响
5、网页整体的视觉效果，而且下载速度也将明显下降，可能会导致浏览者因失去耐心而离开网站。在网页中使用动画可以有效地引起浏览者的注意，毕竟活动的东西比静止的东西更有吸引力，因此，许多网站的广告都做成了动画形式。图1.2中的两幅图像即为动画中的两幅画面。另外，使用动画还可以输出更多的内容。 图1.2 使用动画的广告1.1.3 声音和视频声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的声音文件，可使用多种不同的方法将这些声音添加到网页中。在决定添加的声音文件的格式和添加方式之前，需要考虑的因素包括需添加声音的用途、格式、文件大小、品质，以及浏览器差别等。不同的浏览器对声音文件的处理方法是非常
6、不同的，彼此之间很可能不兼容。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等，设计者在使用这些格式的文件时，需要加以区别。很多浏览器不用插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。一般来说，不要使用声音文件作为背景音乐，因为那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让播放音乐变得可以控制。视频文件的格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX等。视频文件的采用让网页变得非常精彩而且有动感，网络上的许多插件也使向网页中插入视频文件的操作变得非常简单。图1.3中中
7、部的图像表示的就是一段正在播放的视频文件。图1.3 在网页中播放视频1.1.4 超级链接超级链接技术可以说是万维网流行起来的最主要的原因。超级链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件(如多媒体文件、文档或其他任意文件)、一个程序或者本网页中的其他位置。其载体通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式链接。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向另一个网页的超级链接，则
8、该网页将显示在Web浏览器上。1.1.5 表格通常使用表格来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像，以及其他的列表化数据，二是可以使用表格来精确控制各种网页元素在网页中出现的位置。1.1.6 表单使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。表单的出现使浏览者与站点的交互上升到了一个新的高度。网页中的表单通常用来接收浏览者在浏览器端的输入，然后将这些信息发送到设计者设置的目标端。这个目标既可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。表单的用途如下： l 收集联系信息l 接收用户要求l 收集订单、出货明细表和收费清单l 获
9、得反馈意见l 设置来宾签名簿l 让浏览者输入关键字，以在站点中搜索相关的网页l 让浏览者注册为会员，并以会员身份登录站点表单由具有不同功能的表单域组成。最简单的表单也要包含一个输入区域和一个提交按钮。浏览者填写表单的方式通常是输入文本、选中单选按钮与复选框，以及从下拉列表中选择选项等。根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。1.1.7 导航栏导航栏是设计者在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是要让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组超级链接，这组超级链接的目标就是
10、本站点的主页以及其他重要网页。在设计站点中的网页时，可以在站点的每个网页上都显示一个导航栏，这样，浏览者就可以方便地在站点的网页中徜徉。一般情况下，导航栏应放在较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图像按钮。1.1.8 其他特殊效果网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，如悬停按钮、Java特效、ActiveX特效等。这些特效不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。 1.2 网页制作工具网页内容如此丰富，究竟要用什么工具来制作网页是广大网页制作者最关心的话题。当前网页制作软件很多，下面介
11、绍几种极具特色的网页编辑、网页图像与动画制作软件。1.2.1 网页编辑工具1. 入门级 FrontPage 2003如果习惯使用Microsoft Office组件，那么使用FrontPage一定会得心应手。作为Microsoft Office家族的一员，FrontPage的界面、功能与Word都非常相似，它还可以与其他组件无缝融合。此外，FrontPage还提供了相当数量的模板和向导，使初学者能够非常容易地设计出美观实用的网页。FrontPage的最强大之处是其站点管理与远程发布功能。用户只需在本地对网页进行编辑，FrontPage会跟踪用户编辑过的文件，在发布时，它会自动将修改过的网页进行
12、发布，未编辑过的网页可由用户决定是否再次向服务器发送。2. 专业级 Dreamweaver MX 2004Dreamweaver MX 2004(简称Dreamweaver)与Fireworks MX 2004、Flash MX 2004一起，被人们喻为“网页制作三剑客”。同FrontPage一样，Dreamweaver也是“所见即所得”的网页编辑软件，它能够很好地支持ActiveX、JavaScript、Java、Flash和Shockwave等，而且还能通过鼠标拖动的方式制作动态的HTML效果。Dreamweaver还采用了Roundtrip HTML技术，使用这项技术，网页可以在Drea
13、mweaver和HTML代码编辑器之间自由转换，而HTML语法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到“所见即所得”带来的方便。Dreamweaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。Dreamweaver MX 2004是一种全新概念的产品。利用它，开发人员、编程人员和设计人员可以在多种服务器平台上、在一个软件中完成支持几种语言的动态网页的开发，产生和编辑用ASP(Active Server Pages)、JSP(Java Server Pages)和ColdFusion开发的Web内容。另外，由于Dreamweave
14、r MX 2004是从低版本的Dreamweaver环境衍生出来的，因此它也具有十分完美的HTML和JavaScript功能。Dreamweaver MX 2004的界面和工作环境比以前的Dreamweaver版本更简洁，更具弹性，Dreamweaver MX 2004同样具备与Fireworks、Flash和Shockwave紧密集成的诸多优点，以及使用Dreamweaver的可扩展结构来扩展和定制Web的功能。Dreamweaver MX 2004大大加速了网络时代电子交易应用中的项目交付，它提供了从网页和表单的动态生成到企业级的解决方案，如电子商店、库存管理系统和企业内部局域网的数据库应
15、用等功能。1.2.2 网页图像与动画制作工具1. Fireworks MX 2004Fireworks MX 2004(简称Fireworks)是目前最流行的网页图像制作软件。只要将 Dreamweaver的默认图像编辑器设为 Fireworks，那么网页图像在Fireworks中制作完成后进行输出就会立即在 Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入 PSD 格式图像。更方便的是，它不仅结合了Photoshop位图功能以及CorelDRAW 矢量图的功能，而且提供了大量的网页图像模板。例如，网页上很流行的阴影和立体按钮等效果，
16、只需单击网页图像模板按钮就可以制作完成。当然，其最方便之处是，它可以将图像切割、图像映射、悬停按钮、图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。2. PhotoImpactPhotoImpact 是一个功能强大、有趣且好用的基于对象的图像编辑软件，在这个软件中，所有要编辑的图像都会先以独立的对象形式存在，用户可以一直对独立的对象进行编辑，直到满意后再将它合并到图像上。当然，在编辑独立对象的过程中不会影响图像的其他部分，这样，用户对于正在编辑的作品就有了更大的控制权。PhotoImpact还提供了各种各样的特效及模板，使用户可以更轻松地编辑图像。该软件收集了许多
