第 1 讲　网页设计基础知识

第1讲　网页设计基础知识 网页设计概述 Web标准简介网站开发工作流程常用网页制作软件网页版面设计基础 1 2 3 5 4

第一章　网页设计基础知识 学习目标 • 理解网站、网页及主页等基本概念。 • 理解网页的基本工作原理，区分静态网页和动态网页。 • 了解网页制作的常用工具。 • 掌握网站开发的基本工作流程。 • 了解网页版面设计基本知识。

1.1.1 网页、网站和主页 网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。　　　网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图像、声音、动画等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。　　　在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页，这个最先打开的默认页面就被称为“主页”或“首页” （默认文件名一般为index.html或default.html）。 1.1　网页设计概述

网站是一系列相关联（通常是通过超链接的形式相关联的）的网页文件的集合，一个完整的网站是由首页（或称为主页）和若干个独立的网页（也称为内容页或子网页）组成的。网站是一系列相关联（通常是通过超链接的形式相关联的）的网页文件的集合，一个完整的网站是由首页（或称为主页）和若干个独立的网页（也称为内容页或子网页）组成的。　　网站实际上就是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。　　网站有大有小，有综合门户网站，如新浪网、搜狐网、腾讯网等，此类网站内容丰富，结构庞大；有个人网站、专题网站，此类网站结构较为简单，内容简洁，往往只有少量网页组成。 1.1　网页设计概述

1.1　网页设计概述 1.1.2 静态网页和动态网页　网页通常分为两种：静态网页和动态网页。　　　静态网页指客户端浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。　　　当Web 服务器接收到对静态页的请求时，服务器将读取该请求，查找该页，然后将其发送到请求浏览器，如图所示。

　　所谓动态网页，是指根据用户的请求，由服务器动态生成的网页。例如，ASP网页，PHP网页，JSP网页。　　所谓动态网页，是指根据用户的请求，由服务器动态生成的网页。例如，ASP网页，PHP网页，JSP网页。　　　当 Web 服务器接收到对动态页的请求时，它将该页传递给应用程序服务器，它读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回 Web 服务器，然后 Web 服务器将该页发送到请求浏览器。该过程如图所示。 1.1　网页设计概述

1.1.3 网页的基本功能 1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。 2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。 3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。 1.1　网页设计概述

1.2.1Web标准 Web标准不是某一种标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为三类：结构化标准语言主要包括XHTML和XML，表现标准语言主要为CSS，行为标准主要包括对象模型W3C DOM、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。 1.2Web标准简介

1.2.2 建立Web标准的目的 简单地说，建立Web标准的目的是：　 1、提供最大利益给最多的网站用户； 2、确保任何网站文档都能够长期有效； 3、简化代码，降低建设成本； 4、让网站更容易使用，能适应更多不同用户和更多网络设备； 5、当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 1.2Web标准简介

　　典型的Web开发工作流程包括以下几个阶段。　　典型的Web开发工作流程包括以下几个阶段。 1）规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 2）设置开发环境：包括选择Web应用程序服务器、利用Dreamweaver网页制作软件定义站点及数据源。 3）规划页面设计和布局：包括用绘画工具创建页面和界面模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护和更新站点：包括使用Dreamweaver保持内容的更新。 1.3　网站开发工作流程

1.3.1　网站策划（规划） 　　　网站策划就是在制作网站前对网站进行周密的计划，明确制作网站的目的及怎么做。主要包括： 1、确定网站的主题 2、确定网站的用户群 3、确定网站的配色方案 4、收集网站的素材和内容 5、确定网站栏目 6、确定网站结构　　　（1）确定网站的目录结构　　　（2）确定网站的链接结构 7、确定网页的版式设计与布局 1.3　网站开发工作流程

1.3.2　设置开发环境 　　网站开发环境一般应包括Web服务器和站点，可能还需要一个应用程序服务器（通常为数据库应用程序服务器）。 Web服务器是提供文件以响应Web浏览器请示的软件。其作用是，当Web服务器接收到访问网页的请求时， Web服务器会根据请求查找到相应的页面，然后将其发送给提出请求的浏览器。　　常见的Web服务器有：　　（1）Microsoft Internet Information Server（IIS）　　（2）Apache HTTP Server 　　（3）Netscape Enterprise Server 　　（4）Sun ONE Web Server 1.3　网站开发工作流程

1.3.3　网页设计与制作 　　一个成功的网站首先需要优秀的设计，然后辅之优秀的制作。在网站开发的实际工作中，通常包括： 1、手绘草图　　建议在进行网页设计时，先按照创意和设想绘制出网站首页与子页的草图。框架和大体风格确定后，可以继续在草图上标明栏目、内容和网站上一些颜色符号等，以避免遗漏规划的内容，并进一步网站风格。 2、设计效果图　　效果图的设计是将网站风格、创意设计和网站内容整合在一起的过程，就是根据草图在图像处理软件（Photoshop或Fireforks）中进行图像编辑处理。在这个过程中，需要策划人员、创意人员、美工制作人员和程序员相互配合。　　 1.3　网站开发工作流程

3、分割效果图 　　网页效果图完成后，还需要对效果图进行切割，并导出切割后的图像。一般用Fireforks软件。 4、网页制作　　网页制作就是对切割好的网页进行优化设置，对图片、文字、动画等进行排版操作。通常用Dreamweaver网页编辑软件。 1.3　网站开发工作流程

1.3.4　网站测试与发布 　　网站制作完成后，在正式推出之前，要进行必要的测试，这是非常必要的。　　测试通过后，就可以正式发布了。网站的发布是指将网站上传到指定的Web服务器上。 1.3.5　网站的维护和更新　　网站发布后，还应该定期进行维护和更新工作。 1.3　网站开发工作流程

1.4.1 网页制作工具 　　网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率较低。 1．Dreamweaver 2．FrontPage 3．Adobe GoLive 4．HomeSite 5．Visual Studio 2005/2008 1.4常用网页制作软件

1.4.2 网页图形图像处理工具 　　使用网页图形图像处理工具可以设计、处理适合网页的图形图像。 1．Fireworks 2．Photoshop 3．CorelDraw 1.4常用网页制作软件

1.4.3 网页动画制作与特效工具 　　随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。 1．Flash 2．Ulead GIF Animator 1.4常用网页制作软件

1.4.4 网页上传工具 制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。 1．CuteFTP 2．FlashFXP 3．LeapFTP 4．其他上传工具　　　　（1）UploadNow!上传工具　　　　（2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。 1.4常用网页制作软件

1.5.1　网页界面的特点 　　　网页是通过计算机显示器与人们交流的，并不是现实世界中的一个实际物体，因此又被称“虚拟界面”。这种界面具有以下几种特点：　　（1）版面尺寸规范化；　　（2）媒介形式的多样化；　　（3）有限的界面颜色数量；　　（4）界面的嵌套性；　　（5）具有控制功能； 1.5网页版面设计基础

1.5.2　版面编排原则 　　　网页是信息传播的一种载体，在设计上同其他出版物如报纸、杂志等有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式不同，网页设计同时又具有其特有的规律。网页的艺术设计，是技术与艺术的结合、内容与形式的统一。　　　网页版面编排的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来。网页版面编排应注意以下几点： 1．突出中心，理清主次 2．搭配合理，大小呼应 3．图文并茂，相得益彰 1.5网页版面设计基础

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

1.5网页版面设计基础 对称型偏置型 1.5.4　网页版面典型风格　　　网页的设计首先要考虑风格的定位。任何网页都要根据主题的内容来决定其风格与形式，因为只有形式与内容的完美统一才能达到理想的效果。主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。　　　比较典型的网页版面布局主要有：对称型、偏置型、标题型和混合型等。标题型

1.5.5　网页排版布局的常用技术 　　（1）CSS（层叠样式表）布局　使用CSS布局技术能完全精确地定位文本图片。CSS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。　　（2）表格布局　表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上比用CSS更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。　　（3）框架布局　从布局上考虑，框架结构也是一种布局方法。 1.5网页版面设计基础

1.5.6　网页版面设计规则 　　　网页设计与广告、报刊等平面设计有着共同的要求，下面主要介绍网页的特殊之处。 1．首屏页面的设计 2．导航栏的设计 3．媒介规格设计 4．网页效果与网页效率 5．强调整体 6．网页与读者群 7．网页命名规则 8．及时更新网页 1.5网页版面设计基础 1.图像以能够清晰辨认的最小尺寸不尺度。分辨率采用72dpi，颜色采用256色，格式采用gif或bmp. 2.动画数量不可过多，画面尺寸不可过大。画面采用256色，动画格式采用gif或Flash动画。 3.网页上有两种场合使用声音：按钮提示音和背景音乐。尽量减少声音文件的大小，但要保证声音质量。 1.网页的宽度应小于屏幕窗口的，网页向下延伸的长度可随意一些，但不可过长，以免与浏览器设置发生冲突，无法正常显示。 2.应设法抓住读者的视线，使读者对网页发生兴趣 1.避免滥用媒体形式。 2.不要轻易使用粗体或斜体文字。 3.尽量不要使用数据量较大的图片或动画。 4.网页的背景可以使用gif格式的图片，但要避免喧宾夺主，使文字辨认发生困难。　（1）简单、意义明确，与网页内容有一定关联；　（2）以小写英文字母为主，必要时采用数字形成字号；　（3）尽量避免采用键盘上需要按shift键输入的符号，减少调试中出错的概率。　（1）经常性地检测链接成功率，及时更正或删除错误的地址；　（2）更新未完成时，发布“网页正在更新，希望各位见谅”的提示信息；　（3）网页更新后，在设计、内容形式、媒体形式等方面在有新意。 1.导航的数量要适当。 2.导航提示要明确、清晰、醒目。 3.导航栏尽量采用横向设置，可在不使用滚动条的情况下一览无余。　网页的整体性包括内容和形式上的整体性，在设计时要强调网页的整体性，包括版式、色彩、风格等方面。　网页一般都有一个与之对应的读者群，在设计网页时，读者群的问题必须在考虑之列。

第 1 讲 网页设计基础知识