《网页设计基础》word版

1、第一章 网页设计基础在制作网页之前，不仅要清楚网页的构成元素，了解制作网页需要采用哪些工具，还要知道网页的制作步骤。本章主要介绍网页设计的一些基础知识。通过本章的学习，读者应该掌握以下内容：网页中的常见元素常用网页制作工具美化网页的基本工具建立网站的基本流程网页艺术设计11 网页中的常见元素要学习网页设计与制作，首先要认识网页，了解网页中的常见元素，只有这样才能更加合理地组织和安排网页内容。图1-1所示是搜狐网站的首页，其中包含了常见的网页元素：文本、图形、超链接、表格、表单、声音和视频等。下面分别介绍各个网页元素及其在网页中的作用。111文本文本是最重要的信息载体与交流工具，是网页发布信息所

2、用的主要形式。文本虽然没有图像对浏览者的吸引力强，但却能准确地表达信息的内容和含义，而且用文本制作的网页占用空间小，浏览时，可以很快地展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又给人带来死板的感觉，使得人们不愿意再往下浏览。为了克服这一缺点，人们；为网页文本定义了一些属性，例如字体、颜色、字号、底纹和边框等，通过文本不同的格式，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的样式，包括标题的字型字号、内容的层次样式、文字列表和颜色变换等，这些将给网页中的文本赋予新的生

3、命力。1标题一个网页通常都有一个标题，表明本网页的主要内容。标题是否醒目，是否能吸引浏览者的一个关键，因此标题的设计是很重要的。2字号网页中的文字不能太大或太小，太大会使得一个网页信息量变小，太小又使得人们在浏览时感到费劲，一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼的感觉，实践证明，采用9磅的宋体文字设计的文本看起来最美观。3字型在网页适当的位置采用不同的字体、字型，也能使网页产生吸引人的效果。应该注意，虽然在报刊上变换字体字型非常普遍，但在网页制作上却要慎重，因为有些漂亮的字型在制作网页的计算机上有，但浏览者的计算机上未必装有这种字体，这样浏览者就无法看到设计者预想的浏览

4、效果了。如果只是标题或少量的文字，可能将其制作成图形，这样就可以避免其他浏览者看不到的尴尬局面了。112图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画，一个优秀的网页除了有能吸引浏览者的文字形式外，图形的表现功能是不能低估的。网页上的图形一般使用JPEG、GIF和PNG种格式，其中使用最广泛的是JPEG和GIF格式，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。通常图形在网页中有如下的应用。1菜单按钮网页上的菜单按钮有一些是用图形制作的，通常有横排和竖排两种形式，由此可以转入不同的页面。2背景图形为了加强视觉效果，有些网页在整个网页的底层放

5、置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好，但由于这是一个比较大的图像，需要占据较大的空间，致使网页的显示速度明显变慢，所以访问显示较大的网站一般都不在网页中设置背景图形。3动画为了更有效地吸引浏览者的注意，许多网页中的图像都做成了动画形式，图1-1所示网页中的各种商业广告多以动画的形式出现。113超链接超链接技术可以说是万维网流行起来的最主要原因。超链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片，一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。其链接热点通常是文本、图片、图片中的区域和不可见的程序脚本等。超链接是网页中一

6、处感觉重要的功能，是网页中最重要、最根本的元素之一。在图1-1中，加下划线的就是已经建立了超链接的文本。表格表格用来控制网页中信息的布局方式。许多大型的网站（如搜狐、网易、新浪、雅虎等）都是使用表格来进行页面布局的。使用表格可以进行页面的设计和排版，控制文本和图像在页面中的位置。另外，使用表格能使页面看起来更加直观和有条理。图11所示网页中的“新闻中心”就运用了表格进行布局定位。表单网页区别于其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就要可以将自己的决定通过Internet告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没

7、有，以及产品数量、规格和价格等信息。如果用户选择确定，那么网站返回确认信息。网页的这种交互功能是其他媒体无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。图11所示网页中的“登录”就是一个比较简单的表单。声音和视频声音是多媒体网页的一个重要组成部分。目前存在一些不同类型的声音文件，也有不同的方法将这些声音添加到网页中，在决定添加声音之前，需要考虑声音的用途、文件大小、声音品质和浏览器差别等因素。不同浏览器对于声音文件的处理方法不同，彼此之间很可能不兼容。网页的声音文件格式很多，常用的有MI

8、DI、WAV、MP3、和AIF等。用户在使用这些格式的文件时，需要加以区别。很多浏览器不用插件就可以MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则而要专门的播放器播放。一般来说，不要使用声音文件作为背景音乐，那样会影响网页的下载速度。但可以在网页中一个打开声音文件的链接，使声音变得可以控制。视频文件的格式也非常多，常见的有RM、MPEG、AVI等。采用视频文件可以使网页变得精彩而又生动。1.2常用网页制作工具目前网页制作有两种方法：一种是利用网页制作工具进行制作，如使用FrontPage、Dreamweaver等；另一种是采用HTML（超文体标识语言）的专用格式来进行编制。

9、实际上，利用工具制作的网页，其生成的源泉代码仍然是HTML文档。所以，目前制作网页归根结底都是采用超文本标识语言。超文本标识超文本标识语言是一种专门用于面制作的编程语言，它能对网页内容、页面的格式以及超链接进行描述，形成HTML文档。HTML类似于用来编制应用程序的编程语言，所不同的是这种语言专门用来制作网页。HTML文档由文本、格式化代码和导向其他文档的超链接等部分组成。DreamweaverDreamweaver是Macromedia公司推出的一款大众化的网页制作软件，它具有可视化编辑界面，用户不用编写复杂的HTML源泉代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要

10、，同时也容易被业余网页制作人员所掌握。市面上有许多种网页编辑软件，有的重视效率，有的强调版面设计，而这些功能在Dreamweaver中都可以很方便地实现。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页。所以，Dreamweaver是网页设计者的首选工具。Dreamweaver支持动态HTML技术，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果。而Rpundtrip HTML技术能够让用户轻松编辑械，

11、不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计与制作工具。1.3 建立网站的基本流程策划与准备确定主题收集资料与素材规划网站结构设计网页版式制作阶段后期工作确定网站结构制作网页元素插入元件与排版上传网站维护与更新图1-2 网站的制作流程网站的制作与建立并不复杂，但要制作一个优秀的网站并非易事。一个优秀的网站是依靠完美的规划、出色的设计理念、技术与软件等多方面合作完成的。网站的制作主要包括网页制作，网站的建立过程还包括事前企划，事后维护更新等工作，即要有一个合理的网站制作流程。一个网站的制作流程和一个电视节目的制作过程很

12、相像，包括策划、制作、广告宣传，以及每天更新等。如果要制作一个个人网站就简单多了。网站制作的基本流程与顺序是十分重要的。因为网站的制作流程可以明确工作目标和方向，提高工作效率，使网站结构清晰。图1-2所示的是一个网站的完整制作流程。确定主题网站的主题也就是网站的题材，是网站设计首先遇到的问题。网站题材千奇百怪，琳琅满目，究竟应该如何选择呢？显然，企业网站的主题就是追求提高企业的知名度，或者选择以介绍企业的知名产品为题材；或者选择以售后服务为题材；或者选择在线技术咨询为题材。校园网的主题就是对外展示学校的办学特色，多以选择介绍学校的师资队伍、办学方针为题材。个人网站的主相对选择的种类就比较多我。

13、目前Internet上提供的免费空间越来越多，于是，许多网页制作爱好者就萌发了在风上建立个人网站的念头，因此，个人网站的主题多以个人爱好为题材，没有固定的模式。网站的定位要小，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在上面往往，结果往往会事与愿违，给人的感觉是没有主题，没有特色，样样都有，却样样都很肤浅，因为谁都不可能有那么多的精力去维护维护它。最新的调查结果也显示，网络上的“主题站”比“万全站”更受人们喜爱。就好比专场店和百货商店，如果用户需要某一方面的东西肯定会选择专场店。网站的题材最好选自己擅长或者喜爱的内容。这样在制作时，才不会深得无聊或者力不从心。兴趣是制作网站的

14、动力，没有兴趣，很难设计出优秀的网站。题材不要太滥或者指在这一题材上已经有非常优秀、知名度很高的站点，要超过它是很困难的。如果题材已经确定，就可以围绕题材给网站起一个名字。网站名称，是网站设计的一部分，而且是一个关键的要素，和现实生活中一样，网站名称是否正气、响亮、易记，这对网站的形象和宣传推广也有很大的影响。为此，提出如下建议。（1）名称要正其实就是要求名称要合法、合理、合情，不能用反动的、色情的、迷信的、危害社会安全的名词语句。（2）名称要易记最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）以内，四个字的也可以用成语。字数少还有个好处，就

15、是适合于其他站点的链接排版。搜集资料明确了网站的主题之后，就要围绕主题开始搜集资料了。要想使自己的网站内容丰富，能够吸引浏览者，就要尽是搜集资料，搜集的资料越多，以后制作网站就越容易。资料可以从图书、报纸、光盘等媒体上得到，也可以从Internet上搜集。有时网站建设人员还需要得到其他部门的大力配合，详细了解情况，取得翔实的资料。当所需资料悼念的差不多时，就要对资料进行分类整理，为了更好地反映这些资料的内容，需要准备一些辅助素材。这里更多的可能是图片、动画等，这些可以自己制作，也可以从别的网站上下载。将搜集的资料根据一定规则进行整理，作为自己制作网页的素材。资料和素材准备好后，接下来就要组织和

16、安排这些内容。网站的整体规划进行网站的整体规划也就是组织网站的内容并设计其结构。网页制作者在明确网页制作目的及其主要内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不公可以很好地体现设计者的意图，也可以使可维护性与可扩展性增强。组织网站的内容可以从两个方面来考虑。从设计者的角度来考虑，可以依据补描述对象者的需要进行内容分类，以浏览者可以快捷地获取所需要的信息及其相关内容。当然，在设计网页时要全方位多方面地考虑设计者和浏览者的需要，使网站最大限度地实现设计者的目标并为浏览者提供最有效的信息服务。网站的链接结构设计对于网站的规划也是至关重要的。所谓网站的链接结构是指页面

17、之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有两种基本方式。1.树状链接结构树状链接结构与DOS的目录结构类似，颜面链接指向一级页面，一级页面链接指向二级页面。浏览这种链接结构的界面时，先一级一级进入，再一级一级退出。优点是条理清晰，访问者能明确自己所在位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首面。2.星状链接结构星状链接类似网络服务器的链接，每个页面相互之间都有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使使浏览者迷路，搞不清自己在什么位置，看了多少内容。这两种基本

18、结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用，达到比较的效果。比较好的方案是，首页和一级页面之间用星状链接结构，一级和以下各级页面之间用树状链接结构。网站设计充满无穷魅力。以上这条设计思路不一定适合于每个设计者，也不可能完全适合于各种设计的实际情况，只当抛砖引玉。网页设计与制作1.表态网页的设计与在开始制作之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等。通常在进行网页开始时，首选都进行表态网页的制作，然后在其中加入脚本程序、表单等动态内容。表态网页仅仅用来被动地发布信息，而不是有任何交

19、互功能，它是Web网页的生要组成部分。2.为网页添加动态效果表态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。仅仅由表态页面网站，不过是传统媒体的一种电子化而已，原来而要印刷在纸张上的内容现在补入到了网络上，用户在站点中切换页面，不过像在翻阅书籍，这样的站点不公生命力有限，也无法体会网络时代带来的优势。一个真正的网站，不仅应该实现传统媒体的电子化，给用户提供需要的内容，而且还应该做更多的事情，完成比页面浏览层次的需求，例如收集数据、数据传递、数据存储以及系统维护等。随着Internet技术的不断提高，越来越多的人意识到了“动态”

20、页面的生要性，“动态”页面的编写也逐渐替代了“”表态页面的编写，成为当今站点创作的谅。很多人不再满足于利用网卡免费的“个人主页”空间，而是将目光放在构建真的个人站点上来。测试与发布网页当网页设计从而制作完所有网站页面之后，而要对所设计的网页进行审查和测试，测试内容功能性测试和完整性测试两个方面。所谓功能性测试要做主网页的可用性，达到最初的组织设计目标，实现所规定的功能，读者可以方便快速地寻找到所需的内容。网页的完整性测试就是保证页面内容正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误有的需要掌握整修站点的结构备日后的修改。网页设计好，必须把它发布到Intern

21、et上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。网站的宣传与推广目前，Internet上的各种网站像天上的繁星，数不胜数。因此，对外发布的网站如果不进行宣传和推广，将无人知晓，无人问津。网站的宣传和推广一般有两种途径和方法。一种是通过传统媒体进行广告宣传；另一种是Internet自身的特点向外宣传。可用来宣传的传统媒体包括：电视、广播、报纸、广告牌、海报和黄页等。对于公司还可以在通信资料、产品手册和宣传品上印刷网站宣传信息。在Internet上宣传也是多种多样的，比如可以将风趣和网站信息发布到搜索引擎、网卡黄页、

22、新闻组以及邮件列表上进行宣传推广。也可以与其他同类网站交换宣传广告。网站的反馈与评价现在的注重信息的不断更新和交互性，只有这样才能吸引更多的浏览者来访问和参与。如何知道哪些网页内容需要调整、更新和修改，网页需要增加哪些内容呢？这些不能靠主观臆断来确定，而是需要得到访问者的反馈意见，也可以根据不同网页的被访次数来分析。获得用户反馈信息的方法很多，常用的有计数器、留言板和调查表等，也可以建立系统日志来记录网页的被访情况。网站的更新与维护网站要注意经常维护更新内容，在押人员窑新鲜，不要做好就放到服务器永远不变了，只有不断地补充、更新内容，才能吸引浏览者。维护更新时可以充分Dreamweaver提供的

23、模板和库技术，以提高工作效率。1.4网页艺术设计网页就像店铺的门面一样，做得漂亮就能吸引更多的浏览者，的网页应是一个优秀的算式设计作品，同时还应该将网络的各项特点完美地带入到设计中。网页处刑网页算式设计是网页设计最重要一环，直接影响网站的访问量。因，要认真设计网页的版式。1.版式设计原则网页制作并不是简单地将图和文字编排一下就可以了，应该遵循一定的设计规则和艺术准则。在设计网页时，无论采用体积手法对网页元素进行组合，都要遵循以下的原则：统一、平衡、连贯和响应、分割对比及和谐等。（1）统一统一是指设计作品的整体性和一致性。在设计网页时，切勿将成部分孤立分开，那样会使页面呈现一种纷杂凌乱的效果。（

24、2）平衡平衡是指画面的图像、文字的礼堂颁布匀称，能达到安定平衡的视觉效果。但又不能过于平衡，那样会显得呆板。（3）连贯和呼应连贯和呼应是指要注意页面之间的相互关系。设计时应利用各组成部分在内容上的内在联系，使表现形式彼此响应，并注意整个页面设计风格的一致性，使整个网页设计的各部分和谐。（4）分割在住处量较大时可以将页面进行有效地分割。分割是指将页面分成若干小块，各小块之间有视觉上的不同，这样可以使浏览者一目了然。（5）对比对比就是通过矛盾和冲突，使网页具有节奏感和强烈的视觉效果。对比的手法很多，比如多与少、曲与直、强与弱、虚与实、动与静、聚与散以及美与丑等。（6）和谐和谐是指整个页面浑然一体。

25、和谐不仅要看结构形式，而且要看网页所形成的视觉效果能否与人的视觉感觉形成一体沟通，产生心灵的共鸣。1.版式设计技巧一个好的网站首先是内容丰富，其次就是网面设计美观。对于网页的版式设计，提供以下建议。（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者、要提供的以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用链接解决。要知道，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）切勿以800*600以上的分辨率设计网页，常用的分辨率是640*480及800*600。现在国

26、内网站的网页分辨率基本上都是800*600，但是如果主要是面向国外访问者的站点，建议使用640*480的分辨率。（4）不应在网页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑网页内容与广告的比例，广告太多，只会令人厌烦。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，彩相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。（6）背景颜色或背景图片必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合。如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能危急舒适地阅读

27、网页。（7）不要把图片白色当作透明，要知道别人的系统不一定把内定底色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。3常见的网页布局在网页设计中，对网页进行例题的布局也是至关重要的。常见的网页布局形式如下。表格布局表格布局应用最为广泛，拥有庞大住处量的网站都用表格排版来处理住处的归纳和分布。应用表格对页面元素进行定位，使页面布局整齐、美观、乘法明了，并尽可能多地显示信息量。（2）框架布局框架布局在Internet上应用非常广泛，采用框架布局能够构建一个清楚的导航菜单和结构。利用不同的框架组合，还能制作出一些别致的布局效果。如一些Web邮件服务网站和电子

28、商务网站经常用到框架布局。（3）层布局层的特性很像Word中的图文框，设计者可以在层中放置任何页面元素，然后将层拖到网页的任何位置，实现对网页对象的精确定位。而且层可以重叠放置制作出层叠的效果来。还可以控制层的显示与隐藏，实现交互技术。如果配合时间线的使用，还可以同时移动一个或多个层，轻松制作出动态效果。（4）自由式布局自由式布局就是没有固定的布局样式，一般都是以一幅图片为视觉中心制作的，如时尚、艺术和个人网站经常采用这种布局方式。它的优点是漂亮美观，缺点是由于使用了大量图片使得网页打开速度较慢。142网页色彩设计网页中的色彩设置是最直接的视觉效果，不同的颜色运用会给人不同的心境。高明的设计师

29、会运用颜色来表现网站的理念和内在品质。下面介绍网面中色彩的定义及运用。1.网页色彩定义在网页中是以RGB方式来表示颜色的，RGB颜色包括几百万种之多，这么多的颜色却有一个共同点，都是由红、绿、蓝、这3种基色调混和而成的，RGB其实就是Red、Green、Blue的缩写。这3得基色中每一种颜色的饱和度和透明度都是可以变化的，用0（表示最弱）255法为（255，0，0），用十六进制数来表示为Red100%、Green0%、Blue0%,简单的表示法为（255，0，0），用十六进制数表示的话就变成了“FF0000”。在HTML语言中可以直接使用十六进制数来命名颜色。用排列组合方法来计算一下：256*256*256=16777216，总共可以得到16777216种RGB颜色。既然理论上可以得出16777216种颜色，那么为什么又出现了一个网页安全颜色范畴为216种颜色呢？这是因为浏览器的缘故，网页补浏览器识别以后，只有216种颜色能在浏览器中正常显示，而多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。因此将能被所有浏览器显示的216种颜色称为网页时可能发生偏差，不能正常显示。因此将能补所有浏览器正