任务1.1 了解网页与网页制作流程

当前网络空前繁荣，网络中最典型的表现形式就是网页，各类公司、企事业单位和个人都相继建立了自己的网站，越来越多的人开始学习制作网页。想要制作网页，首先应该了解网页，了解网页制作的相关知识。

什么是网页和网站？常用的网站分为哪几类？制作网页需要了解哪些相关知识？本任务就来解决这些问题。

任务内容分析

掌握网页制作技术，首先要了解网页和网站的基础知识，主要包括以下内容：

① 认识网页；

② 网页设计的基础知识；

③ 网页开发工具；

④ 网站制作流程。

任务知识学习

1.1.1 认识网页

1. 网页与网站

网页是Internet的基本信息单位，一般网页中都会有文本和图片等信息，而复杂一些的网页中还会有声音、视频等多媒体文件内容。网页通过超链接实现网络资源的非线性访问是其最大特点。

网页由网址标识，当浏览者在浏览器的地址栏中输入网址并确定浏览后，网页文件通过编译被浏览器翻译成图文并茂的网页。

虽然网页的表现形式多种多样，但构成网页的基本元素基本相同，一般包含文本、图像、超链接、动画、表单、音频和视频等内容。

文本和图像是网页中两个最基本的构成元素，它们是页面信息表现的基本形式。

超链接是网页的核心，通过它可以实现从一个网页指向另一个目的端的链接。链接目标通常是一个网页，但也可以是图像、电子邮件地址、文件、程序等。

动画、音频和视频是页面内容更丰富的表现形式，通过这些元素可以使页面更具有个性和吸引力。

表单可以用来收集访问者的数据信息，收集的数据信息会根据设计者所设置的表单程序进行相应处理，利用表单可以完成搜索、登录、发送邮件等交互功能。

网站是指在Internet中根据一定规则，使用HTML等工具制作的，用于展示特定内容的相关网页的集合。简单地说，网站是一个信息平台，就像通告栏一样，人们可以通过浏览器来访问网站，获取自己所需的信息或享受网络服务。

网站中有个页面是浏览者在访问网站时首先看到的，这个页面中包含了一个网站中几乎所有主要内容及相关导航，浏览者可以按页面中的分类，快速找到自己所需的信息内容或链接，该页面通常被称为主页或首页。

2. 网页的分类

我们通常看到的网页都是以html或htm为后缀的文件，即HTML文件。不同的后缀分别代表了不同类型的网页文件，如asp、php、jsp等。

网页通常分为静态网页和动态网页两种。

所谓静态网页，就是指网页文件中没有程序，只有HTML代码，即单纯使用HTML编写的网页。这种网页是最早发展起来的网络浏览器文件（静态网页文件格式一般为*.html或*.htm），它作为全球信息网交流平台的媒介，用户只需通过编写HTML即可将信息显示在网页上，为网络浏览者提供各种信息共享服务。

静态网页由于使用HTML编写，所以受到HTML的限制，一般不具备与用户进行交互的功能，主要用于信息发布。

所谓动态网页，就是指网页文件不仅具有HTML标记，而且还包含其他动态程序代码，从而具备与访问者进行交互的功能，能够自我更新、动态显示数据。动态网页可以由程序控制自动、实时生成页面，所以这种网页具有日常维护简单、更改结构方便、交互性能强大等优势。动态网页一般使用在需要快速更新网站信息、搜集访问者信息、自动显示后台数据的网站设计上，如新闻网站、门户网站等。

动态网页是与静态网页相对应的，以htm、html、shtml、xml等形式出现的网页是静态网页，而以asp、jsp、php、cgi等形式出现的是动态网页。

动态网页可以是纯文本内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

1.1.2 网页设计的基础知识

1. 网页版块构成

网页是由各种版块构成的。Internet中的网页内容各异，然而多数都由一些基本版块组成，包括Logo、网站导航、Banner、内容版块、页脚版块等。

（1）Logo。Logo是企业或网站的标志。图1-1所示为新浪网的Logo。

（2）网站导航。网站导航是网站的重要组成元素。合理安排导航条可以帮助浏览者迅速查找到需要的信息。图1-2所示为Adobe公司网站的导航条。

（3）Banner。Banner直译为旗帜、网幅或横幅，意译则为网页中的广告。多数Banner都以JavaScript技术或Flash技术制作，通过动画效果可展示更多内容并吸引用户观看。

（4）内容版块。网页的内容版块通常是网页的主体部分。这一版块可以包含各种文本、图像、动画、超链接等。图1-3所示为IBM公司网站的内容版块。

（5）页脚版块。页脚是网页最底端的板块，通常放置网站的版权信息。图1-4所示为国家新闻出版总署网站的页脚版权版块。

2. 网页色彩的使用

网页设计是平面设计的一个分支，与其他平面设计一样，对色彩都有较大依赖性。色彩可以决定网站的整体风格，也可以决定网站所表现的情绪。

RGB色彩模式主要应用于输出CRT显示器的一种色彩模式，它采用加法混色法，通过描述各种可见光在颜色中占据的比例来分析色彩。RGB色彩的基准是光学三原色（红、绿和蓝）。

所有网页设计领域中的色彩都是以RGB色彩模式表现的。例如，常见的#RRGGBB以及数字表示法等都是根据RGB三原色的强度实现的。

在早期各种浏览器中，图像的颜色显示方式并不统一，同一种颜色在不同的网页浏览器中可能会显示为不同的颜色。

为了保证网页基本的色彩显示，人们规定了216种颜色的显示方法，这216种颜色以同样的效果，在任意浏览器中都不会造成色彩错乱，被称为安全的颜色，即Web 216安全色。

RGB色彩模式中由00、33、66、99、CC、FF组成的颜色都是网页安全色。216种网页安全色不需要特别记忆，很多常用的网页设计软件中都自带216种网页安全色调色板，使用非常方便。

1.1.3 网页开发工具

随着计算机技术的不断发展，网页开发涉及的工具和技术多种多样，设计者可以根据网页的不同功能需求和本身使用偏好，以及对工具的掌握程度，灵活地使用开发工具和技术。厦门介绍目前较为常用的开发工具和技术。

1. 网页制作工具

Dreamweaver是由美国Adobe公司推出的一款可视化网页设计和网站管理软件，也是当前最常用的网页制作软件，其功能全面、操作灵活。Dreamweaver对动态网站的支持也毫不逊色，使用Dreamweaver及相关的技术，可以方便地创建Internet应用程序。本书主要以Dreamweaver CC为操作平台进行讲解。

除了Dreamweaver之外，还有很多工具可以开发网页，比如微软公司的办公软件Office家族成员之一的FrontPage也是一种所见即所得的网页制作软件。由于其使用简单，并且容易上手，也是初学者选择较多的一种工具。

2. 图像处理软件

（1）Photoshop。Adobe Photoshop，简称“PS”，是由Adobe公司开发的一款图像处理软件。其功能十分强大，使用范围广泛，一直深受欢迎。Photoshop支持多种图像和色彩模式，可以完成效果图和图片素材的处理工作。Photoshop可以存储的图像格式丰富，可以满足设计的多种需求。

（2）Fireworks。Fireworks是Adobe公司推出的一款网页作图软件，可以加速Web设计与开发，是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。Fireworks不仅具备编辑质量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，可与Adobe Photoshop、Adobe Dreamweaver和Adobe Flash软件很好地集成使用。

3. 网页动画制作软件

Flash是由Adobe公司推出的交互式矢量图和Web动画制作软件。Flash与Adobe公司的Dreamweaver、Fireworks并称为“网页三剑客”。Flash以界面简洁、功能强大而著称，能把动画、音效、交互等完美地融合在一起，是动画设计者常用的工具软件。

4. 网页标记语言

HTML是用来开发网页的标记语言。HTML的英文全称是Hyper Text Markup Language，即超文本标记语言。用HTML编写的文档被称为超文本标记文档，使用.html或.htm作为文件的扩展名，这种文档不要编译，可以直接被浏览器执行。HTML是网页设计的核心技术，做网页离不开HTML。

1.1.4 网站制作流程

开发网站通常都应遵循一个基本的开发流程，包括站点规划、设计、开发、测试、发布与维护，该流程常用于指导网站的开发与制作。

1. 网页设计的要点

网页作为网络中传播信息的一种重要工具，承载了大量信息内容，但页面内容和作用不同，表现形式也不同，不能要求所有网页千篇一律，既要将技术与艺术完美结合，也要实现内容与形式的统一，这就要求在设计过程中把握以下几个要点。

（1）从用户角度出发。浏览者是网页的使用者，设计人员应一切从使用者的角度出发进行网页设计。设计时应综合考虑网页受众群，浏览者的浏览器的兼容性，以及浏览者的网络条件等。

（2）突出页面主题。一个有明确主题的页面能很快吸引观众，运用多种手段突出页面的主题，能达到增强页面可读性，帮助浏览者理解网页内容的作用，所以在设计网页时应注重对主题的设计，可以通过空间层次设计等手段突出页面主题。

（3）内容与形式统一。形式通过页面的结构、风格和设计等来表现页面内容，两者应达到和谐统一。

在设计网页时，一个注意形式美的设计方案，应适合当前页面主题，不要一味追求独特而导致脱离页面应该表现的内容。同时，要注意使用恰当的页面元素来表现内容，不要盲目地堆砌各种元素，应做到形式与内容的统一。

2. 网站建设的基本流程

建设网站之前就应该有一个整体的战略规划和目标，规划好网页的大致外观后就可以着手设计了。整个网站制作并测试完成后，就可以将其发布到网络上。下面介绍建设网站的基本流程。

（1）网站需求分析。要进行网站整体设计，首先应该对用户的需求进行分析，确定网站的用户群和定位网站的主题，还有形象策划、制作规划和后期推广等内容，需求分析应以需求为本。制作一个较大的网站时，特别需要把架构规划好，还要考虑以后的扩充性。

① 确定网站主题。网站主题就是网站所包含的主要内容，网站必须有明确的主题，还要明确网页所使用的语言，调动一切手段充分表现网站的个性和情趣，这样才能给用户留下深刻的印象。

② 搜集素材。确定网站主题后，就要围绕主题开始搜集素材了。要想让自己的网站有声有色，能够吸引用户，就要尽量搜集素材，包括图片、音频、文字、视频和动画等。这些素材的准备很重要，搜集的素材越充分，以后制作网页就会越容易。素材既可以从图书、报刊、光盘等得来，也可以自己制作，还可以从网上搜集。然后，把搜集的素材去粗取精，作为自己制作网页的素材。

③ 规划站点。一个网站的设计成功与否，很大程度上取决于设计者的规划水平。网站规划包含很多内容，如网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片的运用等。只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此，制作出来的网页才能有个性、特色和吸引力。

（2）制作网站页面。网页设计是一个细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行制作。所谓先大后小，就是指在制作网页时先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是指先设计简单的内容，然后再设计复杂的内容，以便出现问题时方便修改。

在制作网页时要灵活运用CSS、模板和库，这样可以大大提高制作效率。如果很多网页都用相同的版面设计，就应为这个版面设计一个模板，然后就可以此模板为基础创建网页。如果想要改变所有网页的版面设计，只需简单地改变模板即可。

（3）测试网页。测试网页主要从以下3个方面着手：

① 看页面的效果是否美观；

② 看页面中的链接是否完好；

③ 最重要也是最麻烦的一点，就是要兼容不同的浏览器。

对于网页是否美观，仁者见仁，智者见智，但是也是有章可循的，可以从页面的整体视觉效果、美工设计、页面布局、内容实力和亲和力等方面进行检查。对于链接是否完好，可以使用Dreamweaver中的相应命令来检查。对于是否兼容不同的浏览器，同样可以使用Dreamweaver来检查。

（4）发布网站和维护。制作好网站并经过测试后，就可以将网站放在服务器上进行发布，这样能让更多的人知道并浏览网站。

发布网站可以使用专业的网站上传软件，也可以使用Dreamweaver的FTP功能。

维护是一项长期的工作，包括对服务器的软、硬件维护，数据库的维护，网站内容的更新等。多数网站还会定期改版，以保持用户的新鲜感。

掌握网站开发的基本流程，了解流程中各阶段的工作内容，进行规范化的操作，按流程进行网站开发，可以降低工作成本，提高工作效率。