网页设计制作基础.ppt

《网页设计制作基础.ppt》由会员分享，可在线阅读，更多相关《网页设计制作基础.ppt（60页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作教程西安工业大学计算机学院西安工业大学计算机学院西安工业大学计算机学院西安工业大学计算机学院雷聚超雷聚超雷聚超雷聚超1 1 网页、网站的概念网页、网站的概念网页、网站的概念网页、网站的概念2 Web2 Web标准标准标准标准3 3 网站的规划与设计网站的规划与设计网站的规划与设计网站的规划与设计4 4 网站开发工作流程网站开发工作流程网站开发工作流程网站开发工作流程5 5 网站策划书撰写要点网站策划书撰写要点网站策划书撰写要点网站策划书撰写要点6 6 常用网页制作软件常用网页制作软件常用网页制作软件常用网页制作软件7 7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页

2、设计的基本概念8 8 网页版面设计网页版面设计网页版面设计网页版面设计9 9 实训实训实训实训10 10 网页的相关概念网页的相关概念第第1章章 网页设计制作概述网页设计制作概述1.1.1 1.1.1 网页、网站和主页网页、网站和主页网页、网站和主页网页、网站和主页 网页（网页（网页（网页（Web PageWeb Page）是存放在）是存放在）是存放在）是存放在WebWeb服务器上供客户端用服务器上供客户端用服务器上供客户端用服务器上供客户端用户浏览的文件，可以在户浏览的文件，可以在户浏览的文件，可以在户浏览的文件，可以在InternetInternet上传输。网页是按照网页文上传输。网页是按

3、照网页文上传输。网页是按照网页文上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标档规范编写的一个或多个文件，这种格式的文件由超文本标档规范编写的一个或多个文件，这种格式的文件由超文本标档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合记语言创建，能将文字、图片、声音等各种多媒体文件组合记语言创建，能将文字、图片、声音等各种多媒体文件组合记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎在一起，这些文件被保存在特定计算机的特定目录中。几乎在一起，这些文件被保存在

4、特定计算机的特定目录中。几乎在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或所有的网页都包含链接，可以方便地跳转到其他相关网页或所有的网页都包含链接，可以方便地跳转到其他相关网页或所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。是相关网站。是相关网站。是相关网站。如果在浏览器的地址栏中输入网站地址，浏览器会自动如果在浏览器的地址栏中输入网站地址，浏览器会自动如果在浏览器的地址栏中输入网站地址，浏览器会自动如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网连接到这个网址所指向

5、的网络服务器，并出现一个默认的网连接到这个网址所指向的网络服务器，并出现一个默认的网连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为页（一般为页（一般为页（一般为index.htmlindex.html或或或或default.htmldefault.html），这个最先打开的），这个最先打开的），这个最先打开的），这个最先打开的默认页面就被称为默认页面就被称为默认页面就被称为默认页面就被称为“主页主页主页主页”或或或或“首页首页首页首页”。1.1 1.1 网页、网站的概念网页、网站的概念网页、网站的概念网页、网站的概念1.1.2 1.1.2 静态网页和动态网页静态网页和动态网页静

6、态网页和动态网页静态网页和动态网页 静态网页指客户端的浏览器发送静态网页指客户端的浏览器发送静态网页指客户端的浏览器发送静态网页指客户端的浏览器发送URLURL请求给请求给请求给请求给WWWWWW服务服务服务服务器，服务器查找需要的超文本文件，不加处理直接下载到客器，服务器查找需要的超文本文件，不加处理直接下载到客器，服务器查找需要的超文本文件，不加处理直接下载到客器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器户端，运行在客户端的页面是已经事先做好并存放在服务器户端，运行在客户端的页面是已经事先做好并存放在服务器户端，运行在客户端的页面

7、是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的中的网页。其页面的内容使用的仅仅是标准的中的网页。其页面的内容使用的仅仅是标准的中的网页。其页面的内容使用的仅仅是标准的HTMLHTML代码，代码，代码，代码，静态网页通常由纯粹的静态网页通常由纯粹的静态网页通常由纯粹的静态网页通常由纯粹的HTML/CSSHTML/CSS语言编写。语言编写。语言编写。语言编写。动态网页技术根据程序运行的区域不同，分为客户端动动态网页技术根据程序运行的区域不同，分为客户端动动态网页技术根据程序运行的区域不同，分为客户端动动态网页技术根据程序运行的区域不同，分为客户端动态技术与服务器端动态技术。态

8、技术与服务器端动态技术。态技术与服务器端动态技术。态技术与服务器端动态技术。客户端动态技术不需要与服务器进行交互，实现动态功客户端动态技术不需要与服务器进行交互，实现动态功客户端动态技术不需要与服务器进行交互，实现动态功客户端动态技术不需要与服务器进行交互，实现动态功能的代码往往采用脚本语言形式直接嵌入到网页中。服务器能的代码往往采用脚本语言形式直接嵌入到网页中。服务器能的代码往往采用脚本语言形式直接嵌入到网页中。服务器能的代码往往采用脚本语言形式直接嵌入到网页中。服务器发送给浏览者后，网页在客户端浏览器上直接响应用户的动发送给浏览者后，网页在客户端浏览器上直接响应用户的动发送给浏览者后，网页

9、在客户端浏览器上直接响应用户的动发送给浏览者后，网页在客户端浏览器上直接响应用户的动作。常见的客户端动态技术包括作。常见的客户端动态技术包括作。常见的客户端动态技术包括作。常见的客户端动态技术包括JavaScriptJavaScript、ActiveXActiveX和和和和FlashFlash等。等。等。等。1.1 1.1 网页、网站的概念网页、网站的概念网页、网站的概念网页、网站的概念1.2.1 Web1.2.1 Web标准的概念标准的概念标准的概念标准的概念 WebWeb标准不是某一种标准，而是一系列标准的集合。网标准不是某一种标准，而是一系列标准的集合。网标准不是某一种标准，而是一系列标

10、准的集合。网标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（页主要由三部分组成：结构（页主要由三部分组成：结构（页主要由三部分组成：结构（StructureStructure）、表现）、表现）、表现）、表现（PresentationPresentation）和行为（）和行为（）和行为（）和行为（BehaviorBehavior）。对应的标准也分）。对应的标准也分）。对应的标准也分）。对应的标准也分为三类：结构化标准语言主要包括为三类：结构化标准语言主要包括为三类：结构化标准语言主要包括为三类：结构化标准语言主要包括XHTMLXHTML和和和和XMLXML，表现标，表现标，

11、表现标，表现标准语言主要为准语言主要为准语言主要为准语言主要为CSSCSS，行为标准主要包括对象模型，行为标准主要包括对象模型，行为标准主要包括对象模型，行为标准主要包括对象模型W3C DOMW3C DOM、ECMAScriptECMAScript等。这些标准大部分由等。这些标准大部分由等。这些标准大部分由等。这些标准大部分由W3CW3C起草和发布，也有起草和发布，也有起草和发布，也有起草和发布，也有一些是其他标准组织制定的标准，如一些是其他标准组织制定的标准，如一些是其他标准组织制定的标准，如一些是其他标准组织制定的标准，如ECMAECMA（European European Compute

12、r Manufacturers AssociationComputer Manufacturers Association）的）的）的）的ECMAScriptECMAScript标准。标准。标准。标准。例如，人体模特换衣服和表演。模特就好比数据，衣服例如，人体模特换衣服和表演。模特就好比数据，衣服例如，人体模特换衣服和表演。模特就好比数据，衣服例如，人体模特换衣服和表演。模特就好比数据，衣服则是表现形式，模特的表演动作是行为。模特和衣服是分离则是表现形式，模特的表演动作是行为。模特和衣服是分离则是表现形式，模特的表演动作是行为。模特和衣服是分离则是表现形式，模特的表演动作是行为。模特和衣服是分

13、离的，这样就可以随意换衣服。的，这样就可以随意换衣服。的，这样就可以随意换衣服。的，这样就可以随意换衣服。1.2 Web1.2 Web标准标准标准标准1.2.2 1.2.2 建立建立建立建立WebWeb标准的目的标准的目的标准的目的标准的目的 简单地说，建立简单地说，建立简单地说，建立简单地说，建立WebWeb标准的目的是：标准的目的是：标准的目的是：标准的目的是：提供最大利益给最多的网站用户；提供最大利益给最多的网站用户；提供最大利益给最多的网站用户；提供最大利益给最多的网站用户；确保任何网站文档都能够长期有效；确保任何网站文档都能够长期有效；确保任何网站文档都能够长期有效；确保任何网站文档

14、都能够长期有效；简化代码，降低建设成本；简化代码，降低建设成本；简化代码，降低建设成本；简化代码，降低建设成本；让网站更容易使用，能适应更多不同用户和更多网络设备；让网站更容易使用，能适应更多不同用户和更多网络设备；让网站更容易使用，能适应更多不同用户和更多网络设备；让网站更容易使用，能适应更多不同用户和更多网络设备；当浏览器版本更新或者出现新的网络交互设备时，确保所当浏览器版本更新或者出现新的网络交互设备时，确保所当浏览器版本更新或者出现新的网络交互设备时，确保所当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。有应用能够继续正确执行。有应用能够继续正确执行。有应用能

15、够继续正确执行。1.2 Web1.2 Web标准标准标准标准1.2.3 1.2.3 采用采用采用采用WebWeb标准的优点标准的优点标准的优点标准的优点 1 1客户端的优点客户端的优点客户端的优点客户端的优点 采用采用采用采用WebWeb标准后，客户端的好处主要体现在以下方面：标准后，客户端的好处主要体现在以下方面：标准后，客户端的好处主要体现在以下方面：标准后，客户端的好处主要体现在以下方面：文件下载与页面显示速度更快；文件下载与页面显示速度更快；文件下载与页面显示速度更快；文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、弱视、色盲等残内容能被更多的用户所访问（包括失明、弱视

16、、色盲等残内容能被更多的用户所访问（包括失明、弱视、色盲等残内容能被更多的用户所访问（包括失明、弱视、色盲等残障人士）；障人士）；障人士）；障人士）；2.2.服务器端的优点服务器端的优点服务器端的优点服务器端的优点 采用采用采用采用WebWeb标准后，服务器端的好处主要体现在以下方面：标准后，服务器端的好处主要体现在以下方面：标准后，服务器端的好处主要体现在以下方面：标准后，服务器端的好处主要体现在以下方面：更少的代码和组件，容易维护；更少的代码和组件，容易维护；更少的代码和组件，容易维护；更少的代码和组件，容易维护；带宽要求降低（代码更简洁），成本降低；带宽要求降低（代码更简洁），成本降低；

17、带宽要求降低（代码更简洁），成本降低；带宽要求降低（代码更简洁），成本降低；更容易被搜寻引擎搜索到；更容易被搜寻引擎搜索到；更容易被搜寻引擎搜索到；更容易被搜寻引擎搜索到；1.2 Web1.2 Web标准标准标准标准 在建设网站之前，需要对网站进行一系列的分析和设计，在建设网站之前，需要对网站进行一系列的分析和设计，在建设网站之前，需要对网站进行一系列的分析和设计，在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案，这就是网站的规然后根据分析的结果提出合理的建设方案，这就是网站的规然后根据分析的结果提出合理的建设方案，这就是网站的规然后根据分析的结果提出合理

18、的建设方案，这就是网站的规划与设计。划与设计。划与设计。划与设计。网站的规划与设计一般应遵循以下三个原则：网站的规划与设计一般应遵循以下三个原则：网站的规划与设计一般应遵循以下三个原则：网站的规划与设计一般应遵循以下三个原则：最大限度地满足用户需要；最大限度地满足用户需要；最大限度地满足用户需要；最大限度地满足用户需要；最有效地进行资源利用；最有效地进行资源利用；最有效地进行资源利用；最有效地进行资源利用；使用方便，界面友好，运行高效；使用方便，界面友好，运行高效；使用方便，界面友好，运行高效；使用方便，界面友好，运行高效；常规的规划与设计方法一般有以下三种：自顶向下、自常规的规划与设计方法一

19、般有以下三种：自顶向下、自常规的规划与设计方法一般有以下三种：自顶向下、自常规的规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。底向上、不断增补的设计方法。底向上、不断增补的设计方法。底向上、不断增补的设计方法。1.3 1.3 网站的规划与设计网站的规划与设计网站的规划与设计网站的规划与设计 典型的典型的典型的典型的WebWeb开发工作流程包括以下几个阶段。开发工作流程包括以下几个阶段。开发工作流程包括以下几个阶段。开发工作流程包括以下几个阶段。1 1）规划站点：包括确立站点的策略或目标、确定所面向的用）规划站点：包括确立站点的策略或目标、确定所面向的用）规划站点：包括确

20、立站点的策略或目标、确定所面向的用）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。户以及站点的数据需求。户以及站点的数据需求。户以及站点的数据需求。2 2）设置开发环境：包括选择）设置开发环境：包括选择）设置开发环境：包括选择）设置开发环境：包括选择WebWeb应用程序服务器、利用应用程序服务器、利用应用程序服务器、利用应用程序服务器、利用DreamweaverDreamweaver网页制作软件定义站点及数据源。网页制作软件定义站点及数据源。网页制作软件定义站点及数据源。网页制作软件定义站点及数据源。3 3）规划页面设计和布局：包括用绘画工具创建页面和界面模）规划页面

21、设计和布局：包括用绘画工具创建页面和界面模）规划页面设计和布局：包括用绘画工具创建页面和界面模）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用型，以及使用型，以及使用型，以及使用DreamweaverDreamweaver、FrontPageFrontPage布置页面。布置页面。布置页面。布置页面。4 4）创建内容资源：包括使用）创建内容资源：包括使用）创建内容资源：包括使用）创建内容资源：包括使用FireworksFireworks、PhotoshopPhotoshop和和和和FlashFlash创建图像、视频等。创建图像、视频等。创建图像、视频等。创建图像、视频等。5 5）

22、组合、测试和部署站点：包括使用）组合、测试和部署站点：包括使用）组合、测试和部署站点：包括使用）组合、测试和部署站点：包括使用DreamweaverDreamweaver设置文设置文设置文设置文本格式、编译资源，测试代码将站点发布到服务器上。本格式、编译资源，测试代码将站点发布到服务器上。本格式、编译资源，测试代码将站点发布到服务器上。本格式、编译资源，测试代码将站点发布到服务器上。6 6）维护站点：包括使用）维护站点：包括使用）维护站点：包括使用）维护站点：包括使用DreamweaverDreamweaver保持内容的更新。保持内容的更新。保持内容的更新。保持内容的更新。1.4 1.4 网站

23、开发工作流程网站开发工作流程网站开发工作流程网站开发工作流程案例一：规划曙光大学网站案例一：规划曙光大学网站案例一：规划曙光大学网站案例一：规划曙光大学网站【案例综述案例综述案例综述案例综述】规划曙光大学网站的结构。规划曙光大学网站的结构。规划曙光大学网站的结构。规划曙光大学网站的结构。【案例展示案例展示案例展示案例展示】本书围绕着一个完整网站的制作作为主要讲解本书围绕着一个完整网站的制作作为主要讲解本书围绕着一个完整网站的制作作为主要讲解本书围绕着一个完整网站的制作作为主要讲解案例，其站点规划结构图及其含义如图案例，其站点规划结构图及其含义如图案例，其站点规划结构图及其含义如图案例，其站点规

24、划结构图及其含义如图1-11-1所示。所示。所示。所示。1.4 1.4 网站开发工作流程网站开发工作流程网站开发工作流程网站开发工作流程 网站策划书应该尽可能地涵盖网站规划中的各个方面，网站策划书应该尽可能地涵盖网站规划中的各个方面，网站策划书应该尽可能地涵盖网站规划中的各个方面，网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，写作要科学、认真、实事求是。以最常见的企业网站为例，写作要科学、认真、实事求是。以最常见的企业网站为例，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。介绍网站策划书的撰写要点。介绍网站策

25、划书的撰写要点。介绍网站策划书的撰写要点。1 1前期调研分析前期调研分析前期调研分析前期调研分析2.2.网站的功能定位网站的功能定位网站的功能定位网站的功能定位3 3网站技术解决方案网站技术解决方案网站技术解决方案网站技术解决方案4 4网站内容规划网站内容规划网站内容规划网站内容规划5 5网页设计网页设计网页设计网页设计6 6网站维护网站维护网站维护网站维护7 7网站测试网站测试网站测试网站测试8 8网站发布与推广网站发布与推广网站发布与推广网站发布与推广9 9网站设计日程表网站设计日程表网站设计日程表网站设计日程表1010费用明细费用明细费用明细费用明细1.5 1.5 网站策划书撰写要点网站

26、策划书撰写要点网站策划书撰写要点网站策划书撰写要点1.6 1.6 常用网页制作软件常用网页制作软件常用网页制作软件常用网页制作软件1.6.1 1.6.1 网页制作工具网页制作工具网页制作工具网页制作工具 网页制作工具分为网页制作工具分为网页制作工具分为网页制作工具分为“可视化可视化可视化可视化”和和和和“非可视化非可视化非可视化非可视化”两大类。两大类。两大类。两大类。“可可可可视化视化视化视化”网页编辑器的优点是直观、使用方便、容易学习，在其中网页编辑器的优点是直观、使用方便、容易学习，在其中网页编辑器的优点是直观、使用方便、容易学习，在其中网页编辑器的优点是直观、使用方便、容易学习，在其中

27、制作网页与在制作网页与在制作网页与在制作网页与在WordWord中编辑相似，缺点是难以精确达到与浏览器完中编辑相似，缺点是难以精确达到与浏览器完中编辑相似，缺点是难以精确达到与浏览器完中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。全一致的显示效果。全一致的显示效果。全一致的显示效果。“非可视化非可视化非可视化非可视化”的网页编辑器，因为是用的网页编辑器，因为是用的网页编辑器，因为是用的网页编辑器，因为是用HTMLHTML代码来设计的，所以控制精确，但是，工作效率太低。代码来设计的，所以控制精确，但是，工作效率太低。代码来设计的，所以控制精确，但是，工作效率太低。代码来设计的，所以控

28、制精确，但是，工作效率太低。1 1DreamweaverDreamweaver2.FrontPage2.FrontPage3 3Adobe GoLiveAdobe GoLive4 4HomeSiteHomeSite5 5Visual Studio 2008/2010Visual Studio 2008/20106.Delphi Intraweb6.Delphi Intraweb1.6 1.6 常用网页制作软件常用网页制作软件常用网页制作软件常用网页制作软件1.6.2 1.6.2 网页图形图像处理工具网页图形图像处理工具网页图形图像处理工具网页图形图像处理工具 使用网页图形图像处理工具可以设计、

29、处理适合网页的使用网页图形图像处理工具可以设计、处理适合网页的使用网页图形图像处理工具可以设计、处理适合网页的使用网页图形图像处理工具可以设计、处理适合网页的图形图像。图形图像。图形图像。图形图像。1 1FireworksFireworks2.Photoshop2.Photoshop3 3CorelDRAWCorelDRAW1.6 1.6 常用网页制作软件常用网页制作软件常用网页制作软件常用网页制作软件1.6.3 1.6.3 网页动画制作与特效工具网页动画制作与特效工具网页动画制作与特效工具网页动画制作与特效工具 随着网络速度的提高，越来越多的网页中使用了动画效随着网络速度的提高，越来越多的网

30、页中使用了动画效随着网络速度的提高，越来越多的网页中使用了动画效随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且果，这些动态显示的画面不仅吸引了浏览者的注意力，而且果，这些动态显示的画面不仅吸引了浏览者的注意力，而且果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。也给原本较呆板的画面增添了不少生机。也给原本较呆板的画面增添了不少生机。也给原本较呆板的画面增添了不少生机。1 1FlashFlash2.Ulead GIF Animator2.Ulead GIF Animator1.6 1.6 常用网页制作软

31、件常用网页制作软件常用网页制作软件常用网页制作软件1.6.4 1.6.4 网页上传工具网页上传工具网页上传工具网页上传工具 制作好的网页要上传到提供主页空间的服务器后，才能制作好的网页要上传到提供主页空间的服务器后，才能制作好的网页要上传到提供主页空间的服务器后，才能制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维让浏览者访问。上传工具选择合适与否将影响对网站更新维让浏览者访问。上传工具选择合适与否将影响对网站更新维让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。护的效率。护的效率。护的效率。1 1CuteFTPCuteFTP2

32、.FlashFXP2.FlashFXP3 3LeapFTPLeapFTP4 4其他上传工具其他上传工具其他上传工具其他上传工具（1 1）UploadNow!UploadNow!上传工具上传工具上传工具上传工具（2 2）WS-FTPWS-FTP上传工具上传工具上传工具上传工具DreamweaverDreamweaver软件自身也具有上传网页的功能。软件自身也具有上传网页的功能。软件自身也具有上传网页的功能。软件自身也具有上传网页的功能。1.6 1.6 常用网页制作软件常用网页制作软件常用网页制作软件常用网页制作软件1.6.5 1.6.5 网页设计工具的发展动向网页设计工具的发展动向网页设计工具的

33、发展动向网页设计工具的发展动向 20052005年年年年4 4月月月月1818日，全球知名的应用软件公司日，全球知名的应用软件公司日，全球知名的应用软件公司日，全球知名的应用软件公司AdobeAdobe以以以以3434亿美元的价格收购了亿美元的价格收购了亿美元的价格收购了亿美元的价格收购了MacromediaMacromedia公司，这次收购代表着公司，这次收购代表着公司，这次收购代表着公司，这次收购代表着多媒体产业领域的融合。随着多媒体产业领域的融合。随着多媒体产业领域的融合。随着多媒体产业领域的融合。随着AdobeAdobe公司对公司对公司对公司对MacromediaMacromedia公

34、公公公司进行全新的整合，势必推出更加强大的图形网页应用软件，司进行全新的整合，势必推出更加强大的图形网页应用软件，司进行全新的整合，势必推出更加强大的图形网页应用软件，司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的为图形处理与网页制作开创出新的空间。目前网页制作中的为图形处理与网页制作开创出新的空间。目前网页制作中的为图形处理与网页制作开创出新的空间。目前网页制作中的HTMLHTML代码与图片都是单独制作的，需要美工人员与网页制代码与图片都是单独制作的，需要美工人员与网页制代码与图片都是单独制作的，需要美工人员与网页制代码与图片都是单

35、独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推作人员共同完成，但是，随着两家公司的合并，极有可能推作人员共同完成，但是，随着两家公司的合并，极有可能推作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作出新的软件，实现图片与网页的一体化操作，提高网页制作出新的软件，实现图片与网页的一体化操作，提高网页制作出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。的效率。的效率。的效率。另外，另外，另外，另外，FireworksFireworks和和和和ImageReadyImageReady在未来的地位，

36、也很在未来的地位，也很在未来的地位，也很在未来的地位，也很有可能被已经强势的有可能被已经强势的有可能被已经强势的有可能被已经强势的PhotoshopPhotoshop和和和和FlashFlash取代。取代。取代。取代。1.7.1 1.7.1 虚拟界面虚拟界面虚拟界面虚拟界面 由于网页是通过计算机的显示通道与人们交流的，并不由于网页是通过计算机的显示通道与人们交流的，并不由于网页是通过计算机的显示通道与人们交流的，并不由于网页是通过计算机的显示通道与人们交流的，并不是现实世界中的实际物体，因此又被称为是现实世界中的实际物体，因此又被称为是现实世界中的实际物体，因此又被称为是现实世界中的实际物体，

37、因此又被称为“虚拟界面虚拟界面虚拟界面虚拟界面”。从。从。从。从网络的角度来看，虚拟界面是一个网站的窗口，网站中的数网络的角度来看，虚拟界面是一个网站的窗口，网站中的数网络的角度来看，虚拟界面是一个网站的窗口，网站中的数网络的角度来看，虚拟界面是一个网站的窗口，网站中的数据库信息、链接功能以及各种网络服务都通过这个界面进行据库信息、链接功能以及各种网络服务都通过这个界面进行据库信息、链接功能以及各种网络服务都通过这个界面进行据库信息、链接功能以及各种网络服务都通过这个界面进行实施。一个网站的网页可以有多个，通常根据需要分层设置。实施。一个网站的网页可以有多个，通常根据需要分层设置。实施。一个网

38、站的网页可以有多个，通常根据需要分层设置。实施。一个网站的网页可以有多个，通常根据需要分层设置。从平面设计的角度来看，每个虚拟界面就是一个版面，从平面设计的角度来看，每个虚拟界面就是一个版面，从平面设计的角度来看，每个虚拟界面就是一个版面，从平面设计的角度来看，每个虚拟界面就是一个版面，可以利用平面设计理念对其进行设计。但是，网页毕竟是计可以利用平面设计理念对其进行设计。但是，网页毕竟是计可以利用平面设计理念对其进行设计。但是，网页毕竟是计可以利用平面设计理念对其进行设计。但是，网页毕竟是计算机技术和多媒体技术的产物，具有某些一般版面所没有的算机技术和多媒体技术的产物，具有某些一般版面所没有的

39、算机技术和多媒体技术的产物，具有某些一般版面所没有的算机技术和多媒体技术的产物，具有某些一般版面所没有的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的特点和性质。为了对虚拟版面进行设计，就必须拓展设计的范围，丰富设计的手段，如对于版面各种媒介的设计与制作，范围，丰富设计的手段，如对于版面各种媒介的设计与制作，范围，丰富设计的手段，如对于版面各种媒介的设计与制作，范围，丰富设计的手段，如对于版面各种媒介的设计与制作，要应用一些新的技术。要应用一些新的技术。要应用一些新的技术。要应用一些新

40、的技术。1.7 1.7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页设计的基本概念1.7.1 1.7.1 虚拟界面虚拟界面虚拟界面虚拟界面 网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。图2-1 包含多种多媒体的网页1.7 1.7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页设计的基本概念1.7.2 1.7.2 网页界面的特点网页界面的特点网页界面的特点网页界面的特点 网页的界面通过显示器显示，除了运用一般版面设计手网页的界面通过显示器显示，除了运用一般版面设计手网页

41、的界面通过显示器显示，除了运用一般版面设计手网页的界面通过显示器显示，除了运用一般版面设计手段对这个虚拟界面进行设计以外，还需要针对该界面的独特段对这个虚拟界面进行设计以外，还需要针对该界面的独特段对这个虚拟界面进行设计以外，还需要针对该界面的独特段对这个虚拟界面进行设计以外，还需要针对该界面的独特之处进行设计，这就需要了解虚拟界面的独特之处。其主要之处进行设计，这就需要了解虚拟界面的独特之处。其主要之处进行设计，这就需要了解虚拟界面的独特之处。其主要之处进行设计，这就需要了解虚拟界面的独特之处。其主要表现在以下几个方面。表现在以下几个方面。表现在以下几个方面。表现在以下几个方面。1 1版面尺

42、寸规范化版面尺寸规范化版面尺寸规范化版面尺寸规范化2.2.媒介形式的多样化媒介形式的多样化媒介形式的多样化媒介形式的多样化3 3有限的界面颜色数量有限的界面颜色数量有限的界面颜色数量有限的界面颜色数量4 4界面的嵌套性界面的嵌套性界面的嵌套性界面的嵌套性5 5具有控制功能具有控制功能具有控制功能具有控制功能1.7 1.7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页设计的基本概念1.7.2 1.7.2 网页界面的特点网页界面的特点网页界面的特点网页界面的特点版面尺寸规范化：通常采用显示器的标准显示模式。版面尺寸规范化：通常采用显示器的标准显示模式。版面尺寸规范化：通常采用显示器的

43、标准显示模式。版面尺寸规范化：通常采用显示器的标准显示模式。1 1）800800像素像素像素像素600600像素。像素。像素。像素。2 2）10241024像素像素像素像素768768像素。像素。像素。像素。3 3）12801280像素像素像素像素10241024像素或更高。像素或更高。像素或更高。像素或更高。图图图图2-22-2是采用不同显示模式显示的迪斯尼公司网站的网页。是采用不同显示模式显示的迪斯尼公司网站的网页。是采用不同显示模式显示的迪斯尼公司网站的网页。是采用不同显示模式显示的迪斯尼公司网站的网页。a)800像素600像素 b)1024像素768像素 c)1280像素1024像素1

44、.7 1.7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页设计的基本概念1.7.3 1.7.3 网页的功能网页的功能网页的功能网页的功能 网页是计算机技术和多媒体技术实际应用的产物，因此，网页是计算机技术和多媒体技术实际应用的产物，因此，网页是计算机技术和多媒体技术实际应用的产物，因此，网页是计算机技术和多媒体技术实际应用的产物，因此，网页同时具备计算机技术和多媒体技术的基本功能。其主要网页同时具备计算机技术和多媒体技术的基本功能。其主要网页同时具备计算机技术和多媒体技术的基本功能。其主要网页同时具备计算机技术和多媒体技术的基本功能。其主要功能包括：展示功能、超链接功能、检索功能

45、以及统计和计功能包括：展示功能、超链接功能、检索功能以及统计和计功能包括：展示功能、超链接功能、检索功能以及统计和计功能包括：展示功能、超链接功能、检索功能以及统计和计算功能等。算功能等。算功能等。算功能等。1.7 1.7 网页设计的基本概念网页设计的基本概念网页设计的基本概念网页设计的基本概念1.8.1 1.8.1 版面编排原则版面编排原则版面编排原则版面编排原则 网页是信息传播的一种载体，在设计上同其他出版物如网页是信息传播的一种载体，在设计上同其他出版物如网页是信息传播的一种载体，在设计上同其他出版物如网页是信息传播的一种载体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一

46、些设计的基本原报纸、杂志等有许多共同之处，也要遵循一些设计的基本原报纸、杂志等有许多共同之处，也要遵循一些设计的基本原报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又则。但是，由于表现形式、运行方式不同，网页设计同时又则。但是，由于表现形式、运行方式不同，网页设计同时又则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、具有其特有的规律。网页的艺术设计，是技术与艺术的结合、具有其特有的规律。网页的艺术设计，是技术与艺术的结合、具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与

47、形式的统一。内容与形式的统一。内容与形式的统一。内容与形式的统一。版面编排的首要任务就是根据网页传达内容的需要，将版面编排的首要任务就是根据网页传达内容的需要，将版面编排的首要任务就是根据网页传达内容的需要，将版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组不同的文字和图片按照一定的次序用最合理的编排和布局组不同的文字和图片按照一定的次序用最合理的编排和布局组不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。版面编排应注意以下几点。成一个有机的整体并展现出来。版面编排应注意以下几点。成一个有机的整体并展现出来。版

48、面编排应注意以下几点。成一个有机的整体并展现出来。版面编排应注意以下几点。1 1突出中心，理清主次突出中心，理清主次突出中心，理清主次突出中心，理清主次2.2.搭配合理，大小呼应搭配合理，大小呼应搭配合理，大小呼应搭配合理，大小呼应3 3图文并茂，相得益彰图文并茂，相得益彰图文并茂，相得益彰图文并茂，相得益彰1.8 1.8 网页版面设计网页版面设计网页版面设计网页版面设计1.8.2 1.8.2 网页排版布局的一般步骤网页排版布局的一般步骤网页排版布局的一般步骤网页排版布局的一般步骤（1）构思）构思 根据网站内容的整体风格，设计版面布局。根据网站内容的整体风格，设计版面布局。（2）初步填充内容）

49、初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。的标志、广告条、菜单、导航条、计数器等。（3）细化）细化 在将各主要元素确定好之后，下面就可以考虑文字、图在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，设计者可以像、表格等页面元素的排版布局了。在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对每利用网页编辑工具把草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。一种元素所占的比例也要有一个详细的

50、数字，以便以后修改。1.8 1.8 网页版面设计网页版面设计网页版面设计网页版面设计1.8.3 1.8.3 版面典型风格版面典型风格版面典型风格版面典型风格 网页的版面风格与广告设计的版面风格是统一的，其目网页的版面风格与广告设计的版面风格是统一的，其目的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。的都是为了产生美感、提高阅读兴趣、吸引人们的注意力。网页的设计首先要考虑风格的定位。任何网页都要根据主题网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形