网页设计与制作案例教程 唐乾林

《网页设计与制作案例教程 唐乾林》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程 唐乾林（20页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作案例教程 主编：唐乾林第一章 网页设计基础知识本章要点 网页制作的基础知识 网站制作的流程 HTML语言基础本章将介绍网页设计的一些基础知识，通过本章的学习，将学习到一些关于网页设计的基础 知识、网站开发的基本流程和HTML语言简介，并能使用HTML语言制作一个简单的网页。随着因特网（Internet）应用的迅速发展和普及，信息技术正极大地改变着人们的生活 和工作方式。基于Internet而开展的信息发布、企业宣传、电子商务、网络游戏、网络教育 、远程医疗等活动正方兴未艾，而这一切都离不开Web网站的支持。在接触网页制作之前，先 对网页设计的知识做一个基本的了解。 1.1 网页制

2、作的基础知识 Internet是一个将世界上各种不同计算机网络连接起来的全球性网络。中文名称为“因特网”， 它通过使用TCP/IP协议，可以在不同厂商、不同操作系统、不同型号的计算机之间进行信息 交换，从而让Internet上的各计算机间的资源达到共享并能相互通信的目击者的。1.1.1 WWW、URL、HTTP和浏览器 1. 什么是WWW？WWW 是 World Wide Web的缩写，也可以简称为 Web，中文名字为“万维网”。它 起源于1989年3月，由欧洲量子物理实验室 CERN（the European Laboratory for Particle Physics）所发展出来的主从结

3、构分布式超媒体系统。通过万维网，人们只要通过使用简单的 方法，就可以很迅速方便地取得丰富的信息资料。它是Internet上把所有信息组织起来的一种方式，它是一个超文本文档的集合，其中包括所要的 任何本地信息。它是从一个文档链接到另一个文档，可以纵横于Internet网络。由于用户在 通过 Web 浏览器访问信息资源的过程中，无需再关心一些技术性的细节，而且界面非常友好 ，现在WWW的应用以远远超出了原设想。成为Internet上最受欢迎的应用之一。它的出现极大 的推动了Internet的推广。2. 统一资源定位器(URL): URL是Uniform Resoure Locator（统一资源定位

4、器）的缩写。就是WWW 服务器的地址，也叫网址。 URL是标识某一特定的信息页所用的一个短的字符串，是一种访问Internet资源的方法。URL主要 用在各种WWW客户程序和服务程序上，当用户选中某一资源时，客户/服务程序自动查找该资 源所在的服务器地址，一旦找到，即将资源调出来，供用户浏览。它能准确解释文档所在的 地址及文档的类型。 URL地址格式排列是有一定的规则的，它的语法格式如下：协议名称:/服务器主机名称：通信端口/文件目录文件名称协议名称:指出WWW客户程序用来操作的工具。如“http:/”表示WWW服务器，ftp:/”表示FTP服 务器，“gopher:/”表示Gopher服务器

5、，而“new:”表示Newgroup新闻组。在WWW中，“客户”与“服务器”是一个相对的概念，只存在于一个特定的连接期间，即在某个 连接中的客户在另一个连接中可能作为服务器。基于HTTP协议的客户/服务器模式的信息交 换过程，它分四个过程：建立连接、发送请求信息、发送响应信息、关闭连接。这就好像上 面的例子电话订货的全过程。 4.浏览器（Browers）:实际上是一个软件程序，作用是在网络上与Web服务器打交道，从服 务器中下载文件，用于与WWW建立连接，并与之进行通信。它可以在WWW系统中根据链接 确定信息资源的位置，并将用户感兴趣的信息资源取回来，对 HTML 文件进行解释，然后将 文字图

6、像或者将多媒体信息还原出来。 互联网上网浏览网页内容离不开浏览器，现在大多数用户使用的是微软公司提供的IE浏览器 （Internet Explorer），当然还有其他一些浏览器如Netscape Navigator 、Mosaic 、Opera ，以及近年发展迅猛的火狐浏览器等，国内厂商开发的浏览器有腾讯TT浏览器、遨游浏览器 （Maxthon Browser）等。 1.1.2 网页、主页和网站 1. 网页 网页实际是一个文件，存放在世界某个角落的的某一台计算机中，而这台计算机必须 是与互联网相连的。网页经由网址（URL）来识别与存取，当用户在浏览器输入网址后，经 过一段复杂而又快速的程序，网

7、页文件会被传送到你的计算机，然后再通过浏览器解释网页 的内容，再展示到你的眼前。 文字与图片和超链接是构成一个网页的三个最基本的元素。可以简单的理解为：文字，就是 网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等 。网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、 声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页 面，于是就得到所看到的画面如图1-1。 3.网站 从技术点说，就是若干个相关网页的集合，网站是由多个网页构成。 网站就好比一本书，是由封面和内页组成， 那么，首页就像这本书的封面，打开改网站

8、浏览 出现的第一个页面。 1.1.3 网页编辑器 工欲善其事，必先利其器，制作网页第一件事就是选定一种网页制作软件。 1.记事本 从原理上来讲，虽然直接用记事本也能写出网页，但是对网页制作必须具有一定的 html 基础 ，非初学者能及，且效率也很低。用记事本写网页，其文件的扩展名不再是“.txt”，而是“.htm” 或“.html”，对于HTML文件的控制标记来说，都可以将它视为基本的“符号”再加上HTML文件 的控制命令。 记事本编辑窗口如图1-3所示。图1-3 记事本编写网页2.专业级网页制作工具 Dreamweaver Stdio8 网页制作软件首推 Dreamweaver，它简单易学，

9、功能强大， Macromedia Dreamweaver M 提供了更多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持。使开发人员和设 计师能够快捷的创建代码规范的应用程序,集成程度非常高，开发环境精简而高效，开发人员 能够运用Dreamweaver与他们的服务器技术构建功能强大的网络应用程序衔接到用户的数据 、网络服务体系。 Dreamweaver Stdio8提供基于强大的规范管理来确保高质量的设计，设计环境提供CSS迅速 高效的开发代码简洁、专业规范的站点。图1-4 Dreamweaver Studio8工作界面3. 微软FrontPage 200 制作功能强大的网页 Front

10、page2000是建立和管理专业网站的简易工具。Frontpage2000保留和发展了Frontpage 98的优秀功能，并根据用户的的要求增加了许多新功能。 (1) 更容易建立专业的，精确的网站Frontpage 2000 的网站创建和管理工具给用户从未有过 的全面控制权。用户可以精确的放置每一个元素在网页的任何位置，为网站设定专业的谐调 的外观，输入和编辑html原代码，使用最新的网页技术，这一切不需要您编写任何程序。 (2) Frontpage 2000不仅仅可以用来制作网页，用户可以使用它来建设和维护整个网站，更简 单的检测，更新网站。工作组用户可以通过Frontpage2000 使分

11、布在世界各地的子公司一起 工作。 (3) Frontpage 2000与其它office组件的整合性更加提高，打开和运行的速度比frontpage 98更 快。图1-5 微软FontPage20001.2.4 网站的美工 网页实际作为新兴的技术，是介于平面设计和编程技术之间的学科。必须综合运用各方面的 知识，才能把网页实际做成更加富有人性化，多元化的艺术和技术的复合体。网页作为一种 媒体，它应该具有一定的艺术感染力，一个色彩杂乱，布局杂乱的网页很难会有浏览者喜欢 。 网上不乏一些优秀的作品，善于以巧妙合理而又令人信服的方式表达一些语言无法表达的思 想通常是借助计算机设计一些特殊技法使得页面丰富

12、多样而又简单明了。有的页面柔和、丰 富，有的页面优雅，单纯，有的页面含蓄，沉稳，有的页面又富于节奏感，不同的页面依据 其表达的内容而具有不同的个性和内涵。它们不仅是传达信息的工具，还是一种令人赏心悦 目的艺术品。 要设计好网站的页面，网页的美工设计和内容都必须具有针对性，即对不同类别的网页要求 采用不同的美工艺术效果。例如政府类网站的设计就要求庄严，肃穆，以体现网站内容的严 肃与庄重；而作为个人网站，则完全可以依据个人的喜好和个性来采取丰富多变的设计风格 。一些风格独特的个人网站，往往追求“站不惊人死不休”的设计效果，为互联网世界增添了 一道道独特的亮丽风景线。 要设计出一个美观的站点，首先要

13、理解并善于运用色彩。色彩是客观存在的，但是人对色彩 的反映却是随着很多因素的变化而变化的。当人们看物体时，常常伴着心理的调节，这是因 为人们长期生活在一个色彩世界中，积累了许多视觉经验，一旦直觉经验与外来色彩刺激发 生一定的感应时，就会在人的心理上引发某种情绪比如红色，在可见光谱中，它的波长最 长，属于积极的、扩张的、外向的暖色调区域颜色。另外，红色还是品质最纯粹的三原色之 一，对人眼的刺激效用最显著，最容易引人注目。在高饱和状态时，常常传递出热烈、喜庆 、吉祥、兴奋、生命、革命、激情、敬畏、残酷、危险等心理信息。而绿色在可见光谱中， 恰居于中央，其明度不高，刺激性不大，因此对人的生理作用及心

14、理反应均显得平静温和。 最纯正的绿色蕴涵着和平、生命、青春、希望、舒适、安逸、公正、平凡、平庸、嫉妒等感 情含义。例如，绿色的象征意味中使用最广泛的词汇是“和平”与“安全”。 在网站的设计中，对于色彩的考虑应该贯穿于整个设计过程。一般来说，这个过程包括以下 四个步骤。 1.整理和收集资料 要使色彩设计有较强的目的性和针对性，力求避免许多习必惯的、用之过多的配色手法，应 充分发挥色彩的信息传达功能，产品类、企业类网站可广泛收集与商品、竞争商标情况进行 分类整理，以获得必要的 信息。 2.审视主题，选择合理的色彩表现方法 把握配置表达主题，以色彩的语言传达和强化这一主题。在这一过程中，色彩本身不是

15、被动 的陈述，完全能够利用其独特的语言优势进行再创造、在提高，以强化网站的主题和风格， 个浏览者留下长久的、难以遗忘的深刻印象。 3.选择合理的色彩配置方法 色彩配置的方法有多种，在确认表现主题后，可根据实际情况进行选择。可以依据主题表现 的重点进行配色，如理性的或感性的色彩搭配、色调和风格的选择，是强调商品还是强调情 绪色，是强调一贯色还是强调流行趋势。可以以色相为主进行配色。也可以色彩的明度或彩 度为主进行配色。 4.调整色彩细微关系 调整阶段的主要任务是以总体特征为依据，进一步推敲色彩的各种关系，如色调、色相、明 度、色彩、色性、面积比、空间关系、位置关系等，使色彩的配置能准确地、完整得

16、传达信 息、烘托气氛。1.3.1 HTML语言基础 所有的Web文件都是由超文本标记语言HTML所创建的。在这种语言中，可以使用各种标记 对文档进行处理，这些标记决定了文件内容的外观、结构以及交互性等。HTML的标记总是封 装在由小于号（）构成的一对尖括号之中。单标记一些标记称为“单标记”， 因为它只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标记 是,它表示一个换行。双标记另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分 构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而 尾标记告诉Web浏览器在这里结束该功能。开始标记前加一个斜杠（/）即成为尾标记。这类 标记的语法是：内容其中“内容”部分就是要被这对标记施加作用的部分。例如 你想突出对某段文字的显示，就将此段文字放在一对 和标记中： 粗体效果显示文字内容标记属性许多单标记和双标记的开始标记内可以包含一些属 性，其语法是：各属性之间无先后次序，属