网页设计与制作Word文档格式.docx

网页设计与制作Word文档格式.docx

《网页设计与制作Word文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计与制作Word文档格式.docx（16页珍藏版）》请在冰豆网上搜索。

或名采用层次型命名机制。

（主机名）（机构名）（网络类型名）（国别代码）

域名系统实现了域名——IP地址的映射。

域名系统的实质是一个分布式数据库，包括提出数据的标准格式、数据库查询方法，以及本地更新数据的标准方法。

五、WWW

万维网于1990年诞生于瑞士日内瓦的欧洲粒子物理实验室。

万维网建立在标准化的网络概念之上，采用客户机/服务器的体系结构。

资源共享是互联网的基本特征。

Web是通过超文本语言的来具体实现的。

在实际应用之中，它主要包括三个方面：

1、实现资源引用的统一命名机制

URL即统一资源定位器，是指向互联网上文件位置的标志，主要由四部分组成，分别是：

访问类型、访问的主机、端口号以及访问的文件的路径。

HTTP一般使用80端口，FTP一般使用21端口。

2、使用标准的Web文件传输机制——HTTP

3、文本的逻辑结构采用标记语言HTML描述协议

HTML是万维网中超文超文件的基础

第二节网页概述

网页：

Web站点中使用HTML编写而成的单位文档，是Web中的信息载体。

其使用的描述语言是HTML。

超文本：

指的是在一个网页上可以通过事先嵌入的超级链接转到存储于其他任何地方的网页。

超媒体：

是网页包含了种种多媒体信息或多媒体链接。

除了含有文本、图形、图像、动画外，还可以包含表格、窗体，可以和用户进行交互、接收用户输入。

Web服务器也称为网点或站点

主页：

在一个站点的众多网页中，总有一个网页是被指定为该站点的“门户网页”，即为该站点的主要，这个页面是整个站点的核心，站点内所有内容都由门户页面进行索引，该页通常被命名为index.html或default.html

万维网是全球性的信息服务网络，而Web服务器上的信息，则以网页的方式组织一个整体。

网页就是存放在互联网中的Web服务器上的一个文件，或者说是一种文档——Web文档。

第三节HTML概述

HTML：

超文本标记语言是创建网页时使用的语言。

HTML文件被浏览器解释后就是网页由标记（tag）和文本组成。

就其本质而言，是一个基于文本的编码标准，用于指示浏览器以什么方式显示信息。

第四节Web浏览器

一、Web浏览器

所谓Web浏览器：

指一个运行在用户计算机上的程序，它负责下载、显示网页，因此也称为WWW客户程序。

二、浏览器与超文本

网页的特征，也就是HTML文档的基本特征——超文本，它是指将一个文档的链接嵌入另外一个文档的形式。

超链接有时也称为快捷链接或简称为超链。

超级链接的最大特点在于它能引出WWW中的任何信息。

三、浏览器与超媒体

在超媒体的第一个应用中，网页中的图形本身就是一个链接。

在超媒体的第二个应用中，Web的链接可以打开某一程序，而且显示并播放其中的图片、音频或视频剪辑。

四、处理多媒体信息

五、保存Web文档的方式

Web浏览器能以HTML文件（以.htm或.html为扩展名）方式或无格式文体（.Txt为扩展名）方式来保存Web文档。

六、当前流行的Web浏览器

目前最流行的浏览器主要有NetscapeNavigator和MicrosoftInternetExplorer（IE）两种。

批处理浏览器和离线浏览器

第五节网页设计的基本目标

评价一个网站网页设计的好坏主要包括创意和制作两个部分。

一、创意要新

网站设计总的目标是：

好的创意、丰富的内容、新颖的观点

二、页面制作

1、网页结构

2、页面内容

3、文字

4、图形

三、商业网页设计的要求

1、良好的视觉效果

2、站点开发周期尽可能短，网页发布的信息一定要准确

3、维护更新要方便

4、商业网页制作的其他应注意的几个问题

第六节网页制作工具及其分类

一、标记型网页制作工具

HTML是网页制作的基础，也是最基本的工具。

最具代表性的HTML标记编辑器有：

1、HotDog是最流行的HTML标记编辑器之一，不要求用户熟悉HTML。

2、Homesite是一种较新的、使用BorlandDelphi编辑器，小巧而工能齐全。

需要用户有一点HTML基础，适合已有一定网页制作经验的人使用。

二、“所见即所得”型网页制工作

所见即所得型网页制作工具：

它是指创建的网页文件在编辑过程中的显示与文件最终在浏览器显示的效果是一样的，用户不需要接触HTML源代码就可以做出希望要的网页。

1、通用工具备——office套件

2、专用工具

（1）FrontPage

（2）Dreamweaver

基本特征

（1）最佳的制作效率

（2）网站管理

（3）无可比拟的控制能力

（4）丰富模板和XML支援

（5）多游览器平台的支持

三、编程型网页制作工具

1、CGI编程

所谓CGI脚本程序，是服务器上的一个可执行程序。

CGI只是一种实现用户交互的环境，并不是一种语言。

2、Java编程

Java是一种广泛使用的网络编程语言，它是一种新的计算机概念。

首先，作为一种程序设计语言，它简单、面向对象，不依赖于机器的结构，具有可移值性、安全性，提供了并发的机制并具有很高的性能。

其次，它最大限度地利用了网络。

它的小应用程序可在网络上运行而不受CPU和环境的限制。

还提供了丰富的类库。

四、图像处理工具

GIF图像交换格式是一种最大色系256色的通用图像格式。

JPEG是一种压缩存储的图形格式，由联合照片专家组开发并以其命名。

使用图像处理工具可对图像进行编辑、修饰、优化、图形文件格式转换等处理。

五、通用图像处理工具（Photoshop）

六、专用图像处理工具

七、不同类型工具的比较

“所见即所得”编辑器往往具有一些致命的弱点：

难以精确达到与浏览器完全一致的显示效果

“所见即所得”编辑器往往会书写冗余高的代码，不如手工书写的来得简洁。

第七节小结

一、从了解HTML的基本标记开始

二、选择一个自己认为颇为顺手的工具，从第一页面开始

三、多多访问他人的网页，从中受到启发

四、深入分析成功的网站、网页

考核要求

识记：

互联网提供的几种服务及其各自概念与功勇；

互联网发展历程。

领会：

Web浏览服务的基本体系结构，互联网基本名词：

URL，超级链接。

网页与主页之间的关系。

网页的基本要领。

应用：

实际上际，查看网页。

HTML的概念；

HTML的基本构成单位：

标记。

识别HTML文件；

标记的基本写法。

Web浏览器如何处理多媒体信息、如何保存页网。

Web浏览器如何进行工作。

使用Web浏览器。

站点设计中应该考虑的问题。

网页设计的基本原则。

第六节网页制作开发工具及其分类

网页开发工具的分类以及主流开发工具的名称。

快速掌握网页制作的几个方法。

第二章网站设计的原则与页风风格

本章主要向读者介绍如何进行网站结构设计以及站点风格的选择。

通过分析大量的站点实例，对各类不同性质的站点应该采用的风格进行了讲解。

通过本章的学习，读者还应该理解网站层次规划的原则，掌握层次设计的基本方法，初步了解标准的网站项目流程及时间进度安排，能够利用相应的原则和方法进行网站层次设计。

第一节网站设计原则

一、网站设计的基本原则

网页制作最重要的一个原则是：

创意

基本原则：

1、网页内容要便于阅读。

2、站点内容要精、专和及时更新

3、注重色彩搭配

4、考虑带宽

5、要适当考虑不同浏览器、不同分辨率的情况

6、提供交互性

7、简单即为美

二、网站设计的国际专业流程

1、初始商讨

2、构思

3、综合内容

4、页面布局和导航

5、图像制作

6、内容流程

7、测试

8、验收交付

第二节站点的整体风格

网站的风格：

整个网站所用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。

一、商业网站的风格

1、Sony的网站

标志的不变性和必须出现在最醒目的地方是商业网站的一个重要重征。

2、Sun公司的主页

与国内的许多站点不同的是Sun公司的搜索引擎属于站内搜索引擎，包含两个部分：

一是通过选择主题进行浏览；

另一是关键词搜索。

网站的目的是发布自己的信息，而不是其他站点做免费广告，不是建立超级链接的“仓库”，在制作、设计网站时应当考虑这一点。

Sun公司的主页最突出的一点是：

把正中位置留给产品广告。

通过网络获取商业利益是公司的宗旨。

网站上的广告一般分为两种：

一种是公司在自己网站上做的产品广告；

还有一种是公司在别人的网站上做的广告。

3、微软公司的网站

商业网站的风格特征：

（1）公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。

（2）可以采用主题图形产品广告来突出公司形象与风格。

（3）主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏图片、文字之间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小。

（4）不要把主要栏目和次要栏目都显示在同一个页面上。

（5）商业网站一般都有固定的栏目页面，如技术支持，服务，关于公司等。

（6）必须建立站内搜索引擎，以便浏览都在站内查找所需要的信息。

二、非商业组织站点风格

1、北京大学的网站

2、北京电影学院的网站

3、北京航天大学的网站

4、清华大学的网站

非商业组织的网站风格：

（1）强调页面的主色调。

（2）主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼。

（3）超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎

（4）信息查看板很重要，放置信息查看板主要有两种方法：

一是在主页直接放置信息查看板；

二是当页面主题图形小，超级链接也不多的情况下不宜把信息宜看板放在主页，则可以在主页上暗加一个快速进入信息查看板的超级链接。

三、个人网站的风格

个人网站的基本风格有三种：

主题图形式、信息发布式及介于两者之间的形式。

主题图形式网站最显著的标志是主页有一个醒目的图形

信息发布式个人网站则主要看重网站的信息量

介于上述两种类型之间的网站既想突出个人形象，又想发布大量信息，组织形式不鲜明。

第三节站点的层次

网站的层次是说主页面和二级页面、三级页面之间的结构关系。

“首页——栏目页——文章页”或“一级页面——二级页面——三级页面”结构。

首页大多采用主题图形配以少量文字介绍的方法。

二级页面是每个栏目的始页，该页面应有该栏目的对应的主题图形，相对于整个网站的主题图形来说，标志要小但必须醒目。

三级页面是文章页，位于最底层，当浏览者进入栏目后见到的超级链接，就是通向大篇幅文本的。

第四节站点结构实例分析

1、IMB的主站点

2、公共信息站点结构

3、个人网站的结构

（1）主题图形式的个人网站

（2）信息发布式个人网站

第五节网站目录结构组织

一、站点目录结构的组织

网站的目录是指你建立网站时创建的目录。

规划目录结构时应当遵循的几个原则：

1、不要将所有文件都存在根目录下

不利因素

（1）文件管理混乱

（2）上传速度慢

2、按栏目内容分别建立子目录

3、在每个主目录下都建立独自的images目录

4、目录的层次不要太深

其他还需要注意的还有：

（1）切忌使用中文目录。

（2）不要使用过长的目录。

（3）尽量使用意义明确的目录。

二、网站的链接结构的组织

网站的链接结构是指页面之间相互链接的拓朴结构。

它建立在目录结构基础之上，但可以跨越目录。

研究网站链接结构的根本目的在于：

用最少的链接，使得浏览最有效率。

1、树形链接结构（一对一）优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。

缺点是浏览效率低，要进行栏目跳转时，必须绕红首页。

2、星形链接结构（一对多）

优点是浏览方便，随时可以到达自己喜欢的页面。

缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

最好的办法是：

首页和一级页面之间用星形链接结构，一级和二级页面之间用树形链接结构。

第六节小结

首先，一个站点必须要有自己的风格

其次，由于网站的主要目的是提供信息，因此如何把这些信息有效地组织起来，使浏览者能够迅速地在站点内部找到他们所感兴趣的信息就非常重要。

最后，站点的信息载体是文件，信息之间的联系是通过超级链接来实现的。

带宽的概念；

用户端的环境因素。

网站设计的基本核心；

网站设计的基本原则。

使用网站设计原则评价站点。

不同性质的站点目标在风格上的体现

商业站点、事业站点、个人站点的风格特征。

站点各层次之间的关系。

站点层次概念；

站点的三级结构。

分析现有站点的层次结构，指出结构特征；

结事自己将要设计的站点分析站点结构是否合理。

实例站点的风格特、优缺点；

不同站点风格结构的不同及原因

站点结构的标准。

分析一个现有站点，指出其风格特征及结构类型。

网站的站点目录结构组织方法；

超级链接组织类型和方法。

合理组织站点的目录结构；

正确处理站点中的文件之间的链接关系。

网站层次规划的原则；

层次设计的基本方法；

标准网站项目流程及时间进度安排。

依据网站层次规划的原则规划一个站点的结构，并对流程、时间、进度做计划。

第三章网页构图与色彩

通过本章的学习，理解页面平衡的概念，掌握处理页面失衡的方法。

了解色彩的基本概念、属性搭配等色彩运用的基本知识，理解计算机配色的原理，能够在计算机上进行配色。

了解GIF，JPEG两种图像格式的优缺点，能够依据要求选择图像格式。

了解Web安全色的原理，能够在使用色彩时考虑安全色及解决方法。

掌握网页文本颜色体系。

了解页面基本构图法：

大色块构图和抽像线条构图法。

第一节页面的重心平衡

一、重心平衡概述

重心平衡：

即页面重心所反映的网页上各种元素分布的协调程度。

一般情况下，重心平衡指左右重心平衡，而“上重下轻”也是网页构图通常采用的做法，即对页面上下重心的平衡要求不严。

二、重心平衡设计实例

1、OZ.com主页的重心平衡设计

2、Cheverolet公司页面的重心平衡设计

3、新民生咨询公司的主面平衡

第二节页面色彩以及图片的格式

一、网页用色概述

应该从公司的标准色上入手。

应该针对不同的站点主题来布置色彩。

用色往往不是非常单纯的运用，还要考虑诸多因素。

网页设计的用色也要特别关注流行色的发展。

网页色彩的运用问题比起处理网页重心问题来显得更为复杂。

二、色彩的基本概念

色相：

颜色的基本属性，反映颜色的原貌，通过色相，人们才能区分种种彩色。

人们通常所说的颜色，其实就是指色相。

饱和度也叫纯度：

指颜色的纯洁度。

明度叫也亮度：

体现颜色的深浅。

三、色彩和GIF，JPGE文件格式

在互联网上最为常用的图像格式一般采用GIF或JPEG两种文件。

设计的线条简单、色彩各类比较少的图形，或者是制作透明图形、制作动画，那以就用GIF格式。

因为GIF文件能够做动画，而且它的压缩算法是通过精简色彩集实现的；

如果需要在网页上放置一幅照片，或者是处理过的照片，那么就使用JPEG文件格式，因为JPEG的压缩算法对包含有复杂的颜色的图片很有效。

GIF格式中最多允许有256色，而JPEG则没有这个限制，且可以显示所有的RGB颜色。

RGB颜色在一般个人电脑上可以从000000-FFFFFF，也就是所谓的24位真采色，它共有1677216种不同的色彩。

而GIF的颜色只用8位表示，所以其色彩范为为00-FF，只能显示256种颜色。

GIF的原理是先为所有的颜色建立一个索引，然后选择其中256种最常见的颜色进行显示，因此GIF用来处理高清晰度照片是不合适的。

由实际效果对比可以得出这样的结论：

1、当图像色彩较少时保存JPEG并不合算，不仅文件体积大、而且图像边缘失真。

2、均采用64色GIF时，不使用抖动选项时图像比较锐利，尺寸居中，仅添加抖动时图像尺寸一般都要烃大，但画面更柔和。

3、当Lossy的值为50%以上时，图像尺寸大幅减小，但图像品质下降。

因此，只要图像品质可以接受，采用Lossy就能大幅减少GIF尺寸。

四、Web安全调色板

浏览器只能选择216种进行显示。

对任意通道，都采取一种“跳跃”的方式进行颜色编码，即R，G，B都只能在00-FF之间的跳跃取值，而不能任意取值。

对于任何一个通道，可取的十进制值有：

0，51，102，153，204，255（换成十六制进就是00，33，66，99，CC，FF）6种，因此三个通道综合起来，可以选的颜色数目就只有6*6*6=216种。

如果采用了安全调色板以外的颜色，在Web上显示时就会产生“抖动”。

“抖动”的原理是：

它伪造了那些在颜色有限的调色板中不能显示的颜色；

在视觉上，近邻像素倾向于混合而产生在图像中实际不存在的颜色，从而达到一种补偿目的。

“抖动”的图像有很多颗粒，显得图像非常粗糙。

Web安全色是指Web中能显示的颜色，对于浏览器而言是固定的，无论原图像有多少种颜色，它都只能显示000000，000033，000066……FFFFFF这216种色彩，是跳跃式的。

第三节页面构图方法

一、网页布局相关的基本概念

1、页面尺寸

页面尺寸和显示器大小及分辨率有关系，一般来说，当显示器分辨率在800*600的情况下，浏览器为标准工具栏时页面的可用显示尺寸为780*428个像素；

分辨率在640*480的情况下，页面的显示尺寸为620*311个像素；

分门徒率在1024*768的情况下，面面的显示尺寸为1007*600。

从以上数据可以看出，分辨率越高可供使用的页面尺寸越大。

在网页设计过程中，当面向浏览器分辨率为固定的时候，向下滚动页面是惟一给网页增加更多内容（尺寸）的方法。

2、整体造型：

矩形、圆形、三角形、菱形

3、页眉：

页眉又可称之为页头，其作用是定义页面的主题。

在页眉通常放置站点的名字、图片和公司标志以及旗帜广告。

4、文本：

文本在页面中多数是以行或者块出现的，它们的摆放位置决定着整个页面布局的可视性。

5、页脚：

页脚则通常放置制作者、公司相关信息、版权的地方，有时候，还会放置一个导航栏。

6、图片：

图片和文本是网页的两大构成核心，缺一不可。

7、多媒体

二、网页页面布局的方法

1、纸上布局法

（1）准备若干张白纸和几支削好的铅笔，橡皮一块。

（2）选择页面尺寸。

（3）页面总体造型的选择。

（4）选择一个形状作为整个页面的主题造型。

（5）在构思了许多图形之后，选择一个中意的基本结构作为整个页面的主题造型。

（6）开始增加页眉。

（7）增加文本。

（8）增加图片

2、软件布局法

三、页面构图实例

1、大色块构图

（1）对称色块构图。

在每个色块的前景文字的颜色是统一的

（2）非对称色块构图：

各色块的份量、形状、位置都不同的色块运用。

运用色块制作网页时的要点：

（1）冷暖色调在均匀使用时不宜靠近，如果必须的话，应当使用中间色（白色或黑色）分隔过渡，在对称色块构图中更应该注意。

（2）纯度相同的两种颜色也不宜放在一起，如亮红和亮绿。

（3）整个页面中最好有一个主色调，否则这个页面就显得凌乱。

2、抽象线条构图

抽象线条构图：

仅仅凭借简单的线条（圆、直线、圆孤等）形成的网页。

抽象线条的构图并不是独立的，由于线条纤细，很容易造成重心不稳，因此抽象线条构图往往需要搭配一些图片，以起到画龙点睛的作用。

抽象线条构图一定要注意留给抽象线条充分的表现空间。

第四节文本色彩体系

Link颜色示范：

显示未访问的超级链接颜色。

Vlink颜色示范：

显示已经访问过的超级链接颜色。

Alink颜色示范：

显示超级链接被激活时的颜色。

第五节网页设计的通用规则

规则一：

网站的设计目的决定设计方案

规则二：

浏览者的需求第一位

规则三：

页面的有效性

规则四：

页面布局的保持统一性

规则五：

使用表格和适当的帧结构来设计网页

规则六：

谨慎使用图片

规则七：

平面设计意识

规则八：

减少JavaApplet和其他多媒体的使用

本章主要从如何设计一个页面的角度出发，重点介绍了页面的重心平衡、页面色彩的运用、页面的构图方法以及网页设计过程中需要遵从的一些通用规则。

网页的重心；

页面的平衡。

能够实际发现和解决页点重心失衡

一、色彩的基本概念

色彩的基本概念、属性，色彩的含义。

运用色彩的概念、属性，在计算机上调配颜色。

二、GIF/JPEG图像格式

GIF/JPEG图像体系对比；

优缺点比较；

能够依据实际情况选择使用不同的图像格式。

三