网站建设基本常识入门.ppt

《网站建设基本常识入门.ppt》由会员分享，可在线阅读，更多相关《网站建设基本常识入门.ppt（88页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作网页设计与制作网站建设基本常识入门网站建设基本常识入门1网页设计与制作网页设计与制作2.1网站建设概论网站建设概论2.1.1网站的种类网站的种类根据不同的分类方式可以将网站分成不同根据不同的分类方式可以将网站分成不同的类型，下面列出几种常见的网站分类方式。的类型，下面列出几种常见的网站分类方式。1根据网站提供的服务分类根据网站提供的服务分类（1）信息类网站；）信息类网站；（2）交易类网站；）交易类网站；（3）互动游戏类网站；）互动游戏类网站；（4）有偿信息类网站；）有偿信息类网站；（5）功能型网站；）功能型网站；（6）综合类网站。）综合类网站。2网页设计与制作网页设计与制作2根据

2、网站的性质分类根据网站的性质分类（1）政府网站；）政府网站；（2）企业网站；）企业网站；（3）商业网站；）商业网站；（4）教育科研机构网站；）教育科研机构网站；（5）个人网站；）个人网站；（6）非盈利机构网站；）非盈利机构网站；（7）其它类型的网站。）其它类型的网站。3网页设计与制作网页设计与制作3根据在大型搜索引擎上的设置分类根据在大型搜索引擎上的设置分类（1）娱乐与休闲类网站；）娱乐与休闲类网站；（2）商业与经济类网站；）商业与经济类网站；（3）艺术与人文类网站；）艺术与人文类网站；（4）健康与医药类网站；）健康与医药类网站；（5）新闻与媒体类网站；）新闻与媒体类网站；（6）政府与政治类网

3、站；）政府与政治类网站；（7）电脑与网络类网站；）电脑与网络类网站；（8）社会与文化类网站；）社会与文化类网站；（9）科学与教育类网站；）科学与教育类网站；（10）参考资料类网站。）参考资料类网站。4网页设计与制作网页设计与制作2.1.2网站建设的步骤网站建设的步骤建设一个网站一般要经过建设一个网站一般要经过9个步骤：个步骤：1.网站目标和主题的确定网站目标和主题的确定2.网站的规划网站的规划3.网站素材的准备网站素材的准备4.网站制作工具的选择和确定网站制作工具的选择和确定5.网站的建立网站的建立6.注册域名和申请网页空间注册域名和申请网页空间7.网站的测试和发布网站的测试和发布8.网站的宣

4、传和推广网站的宣传和推广9.网站的更新和维护网站的更新和维护5网页设计与制作网页设计与制作1网站目标和主题的确定网站目标和主题的确定1）网站目标的确定）网站目标的确定为为什什么么要要建建立立网网站站，是是为为了了宣宣传传产产品品，进进行行电电子子商商务务，还还是是建建立立行行业业性性网网站站？是是企企业业的的需需要要还还是是市市场场开开拓拓的的延延伸伸？如如果果是是个个人人网网站站，比比如如说说是是交交朋朋友友的的、学学习习讨讨论论的的还还是是兴兴趣趣爱爱好好的的？建建立立网站前目标要明确。网站前目标要明确。谁谁是是网网站站将将来来的的访访问问者者，例例如如，明明确确该该网网站站是是面面向向于

5、于消消费费者者？雇雇员员？学学生生？朋朋友友还还是是家家庭庭的的？只只有有知知己己知知彼彼，才才能能避避免免在在网网站站建建设设中中出出现现很很多问题，使网站建设能顺利进行。多问题，使网站建设能顺利进行。6网页设计与制作网页设计与制作2）网站主题的确定）网站主题的确定确定网站主题是赋予网站生命关键一步，网站的确定网站主题是赋予网站生命关键一步，网站的风格和创意点是生存的两个重要因素，给网站取一个风格和创意点是生存的两个重要因素，给网站取一个好名称可以让大家容易记住你。好名称可以让大家容易记住你。7网页设计与制作网页设计与制作（1）网站的主题）网站的主题网网站站主主题题就就是是建建立立的的网网站

6、站所所要要包包含含的的主主要要内内容容，也也就就是是网网站站的的题题材材问问题题，一一个个网网站站必必须须要有一个明确的主题。要有一个明确的主题。在选择主题时还应注意以下几个问题：在选择主题时还应注意以下几个问题：主题选材要小而精。主题选材要小而精。最好选择自己擅长或者感兴趣的内容。最好选择自己擅长或者感兴趣的内容。选题不要太滥、目标定位不要太高。选题不要太滥、目标定位不要太高。8网页设计与制作网页设计与制作（2）网站的风格）网站的风格一个优秀网站都有自己的个性和文化，而且会从一开一个优秀网站都有自己的个性和文化，而且会从一开始就千方百计去体现它，树立起属于自己的风格。始就千方百计去体现它，树

7、立起属于自己的风格。风格具有抽象性、独特性和人性等特征。风格具有抽象性、独特性和人性等特征。风格的抽象性是指站点的整体形象给浏览者的综合感风格的抽象性是指站点的整体形象给浏览者的综合感受。受。风格的独特性是指该网站不同于其他网站的地方。风格的独特性是指该网站不同于其他网站的地方。风格的人性体现在通过网站的外表、内容、文字和交风格的人性体现在通过网站的外表、内容、文字和交流可以概括出一个站点的个性与情绪，是温文儒雅、执著流可以概括出一个站点的个性与情绪，是温文儒雅、执著热情，还是活泼易变、放任不羁。热情，还是活泼易变、放任不羁。9网页设计与制作网页设计与制作简单地说，简单地说，风格就是一句话：与

8、众不同！风格就是一句话：与众不同！如如何何树树立立网网站站风风格格呢呢？可可以以分分这这样样几几个个步步骤骤来实现。来实现。确信风格是建立在有价值内容之上的。确信风格是建立在有价值内容之上的。需需要要彻彻底底弄弄清清楚楚希希望望站站点点给给人人的的印印象象是是什什么。么。在在明明确确网网站站印印象象后后，开开始始努努力力建建立立和和加加强强这种印象。这种印象。10网页设计与制作网页设计与制作l将网站的标志（将网站的标志（Logo），尽可能出现在每个页面上，或者出现在页眉、），尽可能出现在每个页面上，或者出现在页眉、页脚、背景上。页脚、背景上。l突出网站的标准色彩。文字的链接色彩、图片的主色彩、

9、背景色、边框突出网站的标准色彩。文字的链接色彩、图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。等色彩尽量使用与标准色彩一致的色彩。l突出网站的标准字体。在关键的标题、菜单和图片里使用统一的标准字突出网站的标准字体。在关键的标题、菜单和图片里使用统一的标准字体。体。l想一条朗朗上口的宣传标语，把它做在网站的横幅（想一条朗朗上口的宣传标语，把它做在网站的横幅（Banner）里，或者）里，或者放在醒目的位置上，告诉大家本网站的特色是放在醒目的位置上，告诉大家本网站的特色是。l使用统一的语气和人称。即使是多人合作维护，也要让读者觉得是同一使用统一的语气和人称。即使是多人合作维护，也要让

10、读者觉得是同一个人写的。个人写的。l使用统一的图片处理效果。例如，阴影效果的方向、厚度、模糊度都必使用统一的图片处理效果。例如，阴影效果的方向、厚度、模糊度都必须一样。须一样。l创造一个网站特有的符号或图标。例如在一句链接前的一个点，可以使创造一个网站特有的符号或图标。例如在一句链接前的一个点，可以使用用、等符号，虽然很简单的一个变化，却给人等符号，虽然很简单的一个变化，却给人与众不同的感觉。与众不同的感觉。l使用自己设计的花边、线条和点。使用自己设计的花边、线条和点。l展示网站的荣誉和成功作品。展示网站的荣誉和成功作品。l告诉网友关于你个人真实的故事和想法。告诉网友关于你个人真实的故事和想法

11、。11网页设计与制作网页设计与制作（3）网站的创意）网站的创意创意是网站生存的关键。实质上，创意是传达信创意是网站生存的关键。实质上，创意是传达信息的一种特别方式。息的一种特别方式。创意并不是天才者的灵感，而是思考的结果。根创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分据美国广告学教授詹姆斯的研究，创意思考的过程分为为5阶段。阶段。l准备期：研究所搜集的资料，根据旧经验，启准备期：研究所搜集的资料，根据旧经验，启发新创意。发新创意。l孵化期：将资料咀嚼消化，使意识自由发展，孵化期：将资料咀嚼消化，使意识自由发展，任意结合。任意结合。l启示期：意识发展并

12、结合，产生创意。启示期：意识发展并结合，产生创意。l验证期：将产生的创意讨论修正。验证期：将产生的创意讨论修正。l形成期：设计制作网页，将创意具体化。形成期：设计制作网页，将创意具体化。12网页设计与制作网页设计与制作（4）网站名称）网站名称一一个个好好的的网网站站应应该该有有一一个个容容易易使使人人记记住住的的名名称称，就就像像人人名名一一样样，取取得得别别致致又又不不艰艰涩涩难难懂懂会会使使人人记记忆忆深深刻刻。例例如如：网网易易，其其直直观观的的意意思思就就是是告告诉诉 人人 们们“网网 络络 是是 容容 易易 使使 用用 的的”，而而 其其 域域 名名更更是是借借用用了了中中国国电电信

13、信最最早早的的拨拨号号网网络络的的名名称称，使使用用户户在在浏浏览览网网站站时时很很容容易易就就联联想想到到它它；例例如如搜搜狐狐，顾顾名名思思义义就就是是以以搜搜索索引引擎擎为为特特色色服服务务的门户网站。的门户网站。13网页设计与制作网页设计与制作2网站的规划网站的规划l总体结构的设置总体结构的设置l目录的设置目录的设置l链接结构的设置链接结构的设置14网页设计与制作网页设计与制作1）网站总体结构的设置）网站总体结构的设置网网站站总总体体结结构构的的确确立立至至关关重重要要，它它是是网网站站设设计计能能否否成成功功的的关关键键所所在在。规规划划一一个个网网站站结结构构，可可以以用用树树状状

14、结结构构先先把把每每个个页页面面的的内内容容大大纲纲列列出出来来，尤尤其其是是要要制制作作一一个个有有很很多多页页面面的的大大网网站站时时，特特别别需需要要把把这这个个架架构构规规划划好好，同同时时要要考考虑虑到到以以后后可可能能的的扩扩充充性性，免免得得做做好好以以后后又又要要一一改改再再改改整整个个网网站站的架构，十分累人，也十分费时。的架构，十分累人，也十分费时。15网页设计与制作网页设计与制作2）网站目录的设置）网站目录的设置网站的目录是指创建网站时建立的目录。网站的目录是指创建网站时建立的目录。（1）不不要要将将所所有有文文件件都都存存放放在在根根目目录录下下，这这样样会会产产生生如

15、如下下不利影响。不利影响。文件管理混乱。文件管理混乱。上传速度慢。上传速度慢。（2）按栏目内容建立子目录。）按栏目内容建立子目录。子目录的建立首先按主菜单栏目建立。子目录的建立首先按主菜单栏目建立。其其他他的的次次要要的的栏栏目目类类似似最最新新更更新新、友友情情链链接接等等栏栏目目内内容容较较多多的的且且需需要要经经常常更更新新的的可可以以建建立立独独立立的的子子目目录录。而而一一些些相相关关性性强强，不不需需要要经经常常更更新新的的栏栏目目，例例如如：关关于于本本站站、关关于于站站长长、站点经历等可以合并放在一个统一目录下。站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录

16、下。所有程序一般都存放在特定目录下。16网页设计与制作网页设计与制作（3）在每个主目录下都建立独立的）在每个主目录下都建立独立的images目录。目录。（4）目录的层次不要太深。）目录的层次不要太深。（5）不要使用中文目录。）不要使用中文目录。（6）不要使用过长的目录。）不要使用过长的目录。17网页设计与制作网页设计与制作3）网站链接结构的设置）网站链接结构的设置网网站站链链接接结结构构是是指指页页面面之之间间相相互互链链接接的的拓拓扑扑结结构。构。它建立在目录结构基础之上，但可以跨越目录。它建立在目录结构基础之上，但可以跨越目录。研研究究网网站站链链接接结结构构的的目目的的在在于于：用用最最

17、少少的的链链接接，使得浏览最有效率。使得浏览最有效率。建立网站链接结构一般有两种基本方式：建立网站链接结构一般有两种基本方式：（1）树状链接结构）树状链接结构（2）星状链接结构）星状链接结构18网页设计与制作网页设计与制作（1）树状链接结构（一对一）树状链接结构（一对一）优优点点是是条条理理清清晰晰，访访问问者者明明确确知知道道自自己己在在什什么么位位置，不会置，不会“迷路迷路”；缺缺点点是是浏浏览览效效率率低低，一一个个栏栏目目下下的的子子页页面面到到另另一一个栏目下的子页面，必须绕经首页。个栏目下的子页面，必须绕经首页。19网页设计与制作网页设计与制作（2）星状链接结构（一对多）星状链接结

18、构（一对多）类似网络服务器的链接，在每个网页设置一个类似网络服务器的链接，在每个网页设置一个共同的链接枢纽，使所有的网面都可以通过枢纽保共同的链接枢纽，使所有的网面都可以通过枢纽保持链接。专业类的网站通常使用星状链接方式。持链接。专业类的网站通常使用星状链接方式。优点是浏览方便，随时可以到达自己喜欢的页优点是浏览方便，随时可以到达自己喜欢的页面；面；缺点是链接太多，容易使浏览者迷路，弄不清缺点是链接太多，容易使浏览者迷路，弄不清自己在什么位置，已经看了多少内容。自己在什么位置，已经看了多少内容。20网页设计与制作网页设计与制作这两种基本结构都只是理想方式，在实际的网这两种基本结构都只是理想方式

19、，在实际的网站设计中，总是将这两种结构混合起来使用，希望站设计中，总是将这两种结构混合起来使用，希望浏览者既可以方便快速地到达自己需要的页面，又浏览者既可以方便快速地到达自己需要的页面，又可以清晰地知道自己的位置。可以清晰地知道自己的位置。最好的办法是：最好的办法是：首页和一级页面之间用星状链首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。接结构，一级和二级页面之间用树状链接结构。页面中显示导航条。页面中显示导航条。如：你现在的位置如：你现在的位置首页首页-财经新闻财经新闻-股市信息股市信息-21网页设计与制作网页设计与制作3.网站素材的准备网站素材的准备l搜集搜集素素材材

20、既既可可以以从从图图书书、报报纸纸、光光盘盘和和多多媒媒体体上上获获得得，也也可可以以从互联网上搜集。从互联网上搜集。l整理加工整理加工搜搜集集到到的的素素材材要要进进行行适适当当加加工工，如如图图片片扫扫描描、文文字字录录入入、图片剪接。图片剪接。l制作制作网网页页内内容容用用到到得得文文字字、图图片片等等在在制制作作网网页页前前完完成成，装装饰饰的的图图片片如如按按钮钮、背背景景图图等等可可以以在在网网页页制制作作的的过过程程中中根根据据需需要要制作。制作。l存储存储加加工工后后的的素素材材要要分分门门别别类类保保存存在在专专门门的的文文件件夹夹中中，文文件件名要有规律，容易看明白。名要有

21、规律，容易看明白。22网页设计与制作网页设计与制作4网站制作工具的选择和确定网站制作工具的选择和确定目目前前制制作作网网页页涉涉及及的的工工具具比比较较多多，对对于于网网页页制制作作工工具具，目目前前通通常常选选用用的的都都是是所所见见即即所所得得的的编编辑辑工工具具，其其 中中 的的 优优 秀秀 者者 当当 然然 是是 Dreamweaver和和FrontPage了；了；如如果果是是初初学学者者，FrontPage是是首首选选。除除此此之之外外，还还有有：图图片片编编辑辑工工具具，如如Photoshop、Fireworks等等；动动画画制制作作工工具具，如如Flash、Cool3D等等；还还

22、有有网网页页特特效工具，如网页特效精灵、有声有色等。效工具，如网页特效精灵、有声有色等。23网页设计与制作网页设计与制作5网站的建立网站的建立按按照照先先大大后后小小、先先简简单单后后复复杂杂的的原原则则制制作作出出所所有的页面。有的页面。所所谓谓先先大大后后小小是是指指在在制制作作网网页页时时，先先把把大大的的结结构设计好，然后再逐步完善小的结构设计；构设计好，然后再逐步完善小的结构设计；所所谓谓先先简简单单后后复复杂杂是是指指先先设设计计出出简简单单的的内内容容，然后再设计复杂的内容，以便在出现问题时好修改。然后再设计复杂的内容，以便在出现问题时好修改。注注意意在在制制作作网网页页时时要要

23、多多灵灵活活运运用用软软件件配配备备的的设设计模板，这样可以大大提高制作效率。计模板，这样可以大大提高制作效率。24网页设计与制作网页设计与制作6注册域名和申请网页空间注册域名和申请网页空间对对于于个个人人网网站站，在在申申请请免免费费网网页页空空间间的的同同时时也也完完成成了了域域名名的的注注册册；还还有有很很多多的的ISP（InternetServiceProvider，互互联联网网服服务务提提供供商商）提提供供域域名名注注册册和和网网页页空空间间申申请请的的收收费费服服务务功功能能，用用户户根根据据自自己己的的情况进行选择。情况进行选择。25网页设计与制作网页设计与制作7网站的测试和发布

24、网站的测试和发布网网站站制制作作完完毕毕，可可以以先先利利用用软软件件自自带带的的测测试试功功能能对对网网站站进进行行内内部部测测试试来来发发现现和和修修改改基基本本的的问问题题，最后将网站发布到最后将网站发布到Web服务器上。服务器上。现现在在发发布布的的工工具具有有很很多多，有有些些网网页页制制作作工工具具本本身身就就带带有有上上传传功功能能，另另外外利利用用FTP上上传传工工具具，可可以以很很方方便便地地把把网网站站发发布布到到自自己己申申请请的的主主页页存存放放服服务务器器上。上。网网站站发发布布以以后后，在在浏浏览览器器中中打打开开自自己己的的网网站站，逐逐页页逐逐个个链链接接地地再

25、再进进行行测测试试，发发现现问问题题，及及时时修修改改，然后再上传、再测试，如此循环直到满意为止。然后再上传、再测试，如此循环直到满意为止。26网页设计与制作网页设计与制作8网站的宣传和推广网站的宣传和推广网网站站发发布布后后，还还要要不不断断地地进进行行宣宣传传，这这样样才才能能让更多的朋友认识它，提高网站的访问率和知名度。让更多的朋友认识它，提高网站的访问率和知名度。网站宣传和推广的方法有很多。网站宣传和推广的方法有很多。例例如如到到搜搜索索引引擎擎上上注注册册，与与别别的的网网站站交交换换链链接接，运用网络广告运用网络广告等。等。27网页设计与制作网页设计与制作9网站的更新和维护网站的更

26、新和维护网网站站是是需需要要经经常常维维护护和和更更新新内内容容的的，必必须须不不断断给它补充新的内容，才能够长期吸引住浏览者。给它补充新的内容，才能够长期吸引住浏览者。28网页设计与制作网页设计与制作2.1.3实用的网站建设原则实用的网站建设原则1.牢记内容第一的原则牢记内容第一的原则内内容容丰丰富富有有价价值值加加上上外外表表漂漂亮亮美美观观是是优优秀秀网网站站必必备备的的要要素。素。2.网页文件命名原则网页文件命名原则（1）每每一一个个目目录录中中应应该该包包含含一一个个默默认认的的html文文件件，文文件件名统一用名统一用index.html（2）文文件件名名称称统统一一用用小小写写的

27、的英英文文字字母母、数数字字和和下下划划线线的的组合组合（3）尽尽可可能能使使自自己己和和工工作作组组的的每每一一个个成成员员能能方方便便地地理理解解每一个文件的意义每一个文件的意义29网页设计与制作网页设计与制作3图片命名的原则图片命名的原则图图片片文文件件名名分分为为头头、尾尾两两部部分分，用用下下划划线线分分开开。头部分表示此图片的大类性质。头部分表示此图片的大类性质。（1）放放置置在在页页面面顶顶部部的的广广告告、装装饰饰图图案案等等长长方方形的图片取名为形的图片取名为banner（2）标记性的图片取名为）标记性的图片取名为logo（3）在在页页面面上上位位置置不不固固定定并并且且带带

28、有有链链接接的的小小图图片取名片取名button（4）在在页页面面上上某某一一个个位位置置连连续续出出现现，性性质质相相同的链接栏目的图片取名为同的链接栏目的图片取名为menu（5）装饰用的照片取名为）装饰用的照片取名为pic（6）不带链接表示标题的图片取名为）不带链接表示标题的图片取名为title30网页设计与制作网页设计与制作4重视网页标题的设计重视网页标题的设计5网站导航设计要清晰网站导航设计要清晰6网页长度应限定在三个整屏以内网页长度应限定在三个整屏以内7.善用图像元素善用图像元素8网站中所有路径都采用相对路径网站中所有路径都采用相对路径9确保链接的有效性，链接层次不要太深确保链接的有

29、效性，链接层次不要太深10.善用表格来布局，但表格的嵌套层次要控制在三善用表格来布局，但表格的嵌套层次要控制在三层左右层左右11遵循遵循3次点击规则次点击规则12兼顾下载速度与美观兼顾下载速度与美观13.及时更新网页及时更新网页14.避免滥用技术避免滥用技术15要保护好个人信息要保护好个人信息31网页设计与制作网页设计与制作2.2网页的可视化设计概论网页的可视化设计概论2.2.1网页的版面布局网页的版面布局2.2.2网页的版面布局网页的版面布局2.2.3网页的版面布局网页的版面布局2.2.4网页的版面布局网页的版面布局2.2.5网页的版面布局网页的版面布局2.2.6网页的版面布局网页的版面布局

30、2.2.1网页的版面布局网页的版面布局32网页设计与制作网页设计与制作2.2.1网页的版面布局网页的版面布局1网页版面布局的基本概念网页版面布局的基本概念版面指的是浏览器看到的一个完整的页面。布局，就是版面指的是浏览器看到的一个完整的页面。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。以最适合浏览的方式将图片和文字排放在页面的不同位置。（1）页面尺寸）页面尺寸页面尺寸和显示器大小及分辨率有关页面尺寸和显示器大小及分辨率有关一般分辨率在一般分辨率在800 x600像素的情况下，页面的显示尺寸像素的情况下，页面的显示尺寸为：为：780 x428个像素；分辨率在个像素；分辨率在640

31、 x480像素的情况下，页面像素的情况下，页面的显示尺寸为：的显示尺寸为：620X311个像素；分辨率在个像素；分辨率在1024X768像素的像素的情况下，页面的显示尺寸为：情况下，页面的显示尺寸为：1007x600像素。像素。目前页面的尺寸一般选目前页面的尺寸一般选800X600像素的分辨率为约定俗像素的分辨率为约定俗成的浏览模式。成的浏览模式。33网页设计与制作网页设计与制作（2）整体造型）整体造型造型就是创造出来的物体形象。这里是指页面的整体形造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层象，这种形象应该是一个整体，图形与文本的接合应

32、该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩型，可以充分运用自然界中的其它形状以及它们的组合：矩形、圆形、三角形、菱形等。形、圆形、三角形、菱形等。（3）页头）页头页头也叫页眉，页眉的作用是定义页面的主题。页头是页头也叫页眉，页眉的作用是定义页面的主题。页头是整个页面设计的关键，它牵涉到下面的更多设计和整个页面整个页面设计的关键，它牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。广告。（

33、4）文本）文本文本在页面中出现都是以行或者块文本在页面中出现都是以行或者块(段落段落)出现，它们的出现，它们的摆放位置决定着整个页面布局的可视性。摆放位置决定着整个页面布局的可视性。34网页设计与制作网页设计与制作（5）页脚）页脚页页脚脚和和页页头头相相呼呼应应。页页头头是是放放置置站站点点主主题题的的地地方，而页脚是放置制作者或者公司信息的地方。方，而页脚是放置制作者或者公司信息的地方。（6）图片）图片图图片片和和文文本本是是网网页页的的两两大大构构成成元元素素，缺缺一一不不可可。如如何何处处理理好好图图片片和和文文本本的的位位置置成成了了整整个个页页面面布布局局的的关键。关键。（7）多媒体

34、）多媒体除除了了文文本本和和图图片片，还还有有声声音音、动动画画、视视频频等等其其它它网网页页元元素素。虽虽然然它它们们不不是是经经常常被被利利用用，但但随随着着动动态网页的兴起，它们在网页布局上也将变得更重要。态网页的兴起，它们在网页布局上也将变得更重要。35网页设计与制作网页设计与制作2网页版面布局技术网页版面布局技术（1）表格布局）表格布局（2）框架布局）框架布局（3）层叠样式表的应用）层叠样式表的应用3网页版面布局的原则网页版面布局的原则（1）主次分明，中心突出）主次分明，中心突出（2）大小搭配，相互呼应）大小搭配，相互呼应（3）图文并茂，相得益彰）图文并茂，相得益彰36网页设计与制作

35、网页设计与制作4网页版面布局的步骤网页版面布局的步骤（1）草案）草案（2）粗略布局）粗略布局（3）定案）定案37网页设计与制作网页设计与制作5网页版面布局的类型网页版面布局的类型l“国国”字型字型l拐角型拐角型l“三三”型型l对称对比型对称对比型l标题正文型标题正文型l框架型框架型l封面型封面型lFlash型型38网页设计与制作网页设计与制作（1）“国国”字型字型也称为也称为“同同”字型或字型或“口口”字型，是一些大型网站所字型，是一些大型网站所喜欢的类型。最上面是网站的标题以及横幅广告条，接下喜欢的类型。最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，有时左面

36、来就是网站的主要内容，左右分列两小条内容，有时左面是主菜单，右面放友情连接等；中间是主要部分，与左右是主菜单，右面放友情连接等；中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明、广告等。这种结构在网上最常见，其优点是能版权声明、广告等。这种结构在网上最常见，其优点是能充分利用版面，信息量大，缺点是页面拥挤，不够灵活，充分利用版面，信息量大，缺点是页面拥挤，不够灵活，如图如图2-1所示，网址为：所示，网址为：http:/。39网页设计与制作网页设计与制作图图2-1“国国”字型字型40网页设计与制作网页设计与制作

37、“国国”字型字型例如例如“国国”字型的网站还有字型的网站还有http:/。41网页设计与制作网页设计与制作（2）拐角型）拐角型这种结构类型与上一种其实只是形式上的区别，这种结构类型与上一种其实只是形式上的区别，非常相近，上面也是横条网站标志非常相近，上面也是横条网站标志+广告条，接下来广告条，接下来的左侧是一窄列链接等，右列是很宽的正文，下面的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。这是网页设计中用的最也是一些网站的辅助信息。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的

38、布局方法。清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易缺点是规矩呆板，如果细节色彩上不注意，很容易让人让人看之无味看之无味。如图。如图2-2所示，网址为：所示，网址为：http:/。如果没有下面的网站辅助。如果没有下面的网站辅助信息栏的结构，有时又称为信息栏的结构，有时又称为“T”形结构。形结构。42网页设计与制作网页设计与制作图图2-2拐角型布局拐角型布局43网页设计与制作网页设计与制作（3）“三三”型型“三三”型型结结构构多多用用于于国国外外站站点点，国国内内用用的的不不多多。特特点点是是页页面面上上横横向向两两条条色色块块将将页页面面整整体体

39、分分割割为为四四部部分，色块中大多放广告条。分，色块中大多放广告条。如如 图图 2-3所所 示示，网网 址址 为为：http:/www.re-。44网页设计与制作网页设计与制作图图2-3“三三”型布局型布局45网页设计与制作网页设计与制作（4）对称对比型）对称对比型对称对比型是采取左右或者上下对称的一种布对称对比型是采取左右或者上下对称的一种布局方法，一半深色，一半浅色，一般用于设计型站局方法，一半深色，一半浅色，一般用于设计型站点。点。优点是视觉冲击力强，缺点是将两部分有机的优点是视觉冲击力强，缺点是将两部分有机的结合比较困难，结合比较困难，如图如图2-4所示，网址为：所示，网址为：http

40、:/。46网页设计与制作网页设计与制作图图2-4对称对比布局对称对比布局47网页设计与制作网页设计与制作（5）标题正文型）标题正文型这种结构类型即最上面是标题或类似的一些东这种结构类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面就西，下面是正文，比如一些文章页面或注册页面就是这种。是这种。如图如图2-5所示，网址为：所示，网址为：http:/ 页页 面面 内内 容容 的的 反反 色色。如如 中中 央央 美美 术术 学学 院院 的的 首首 页页http:/（旧旧版版本本），它它的的Logo是是绿绿色色的的，而而整整个个界界面面用用了了橘橘红红色色的的渐渐变变色色的的背背

41、景景，对对比比明明显显，突突出出了了主主体。体。62网页设计与制作网页设计与制作（3）导航菜单所在区域。把菜单背景颜色设置）导航菜单所在区域。把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度，比较强烈的暗一些，然后依靠较高的颜色对比度，比较强烈的图形元素或独特的字体将网页内容和菜单的不同准图形元素或独特的字体将网页内容和菜单的不同准确地区分开来。确地区分开来。（4）侧栏。尽管不是所有网页都会使用侧栏，）侧栏。尽管不是所有网页都会使用侧栏，但它仍不失为显示附加信息的一个有用方式，在色但它仍不失为显示附加信息的一个有用方式，在色彩上的使用要注意和网页内容应清楚地区分开，同彩上的使用要注意和网页内

42、容应清楚地区分开，同时也要易于阅读。时也要易于阅读。（5）页脚。这一项最不重要，不应该喧宾夺）页脚。这一项最不重要，不应该喧宾夺主，可以考虑和侧栏相同的颜色或稍微压深一些的主，可以考虑和侧栏相同的颜色或稍微压深一些的颜色。颜色。63网页设计与制作网页设计与制作4）网页色彩设计的趋势）网页色彩设计的趋势随着网页制作经验的积累，设计者用色有这样随着网页制作经验的积累，设计者用色有这样的一个趋势：的一个趋势：单色单色五彩缤纷五彩缤纷标准色标准色单色单色64网页设计与制作网页设计与制作2.2.3网页的艺术设计原则网页的艺术设计原则需要遵循的艺术原则主要有：对比原则、协调原则、平衡需要遵循的艺术原则主要

43、有：对比原则、协调原则、平衡原则和趣味原则。原则和趣味原则。1对比原则对比原则两事物的相对比较称为对比。常用的对比方法有以下两事物的相对比较称为对比。常用的对比方法有以下8种：种：1)大小的对比大小的对比2)明暗的对比明暗的对比3)粗细的对比粗细的对比4)曲线与直线的对比曲线与直线的对比5)水平线与垂直线水平线与垂直线6)质感的对比质感的对比7)位置的对比位置的对比8)多重对比多重对比65网页设计与制作网页设计与制作图图2-9对比对比66网页设计与制作网页设计与制作2协调原则协调原则协调原则是相对于对比原则而言的。所谓协调，就是将协调原则是相对于对比原则而言的。所谓协调，就是将界面上的各种元素

44、之间的关系进行统一处理，合理搭配，使界面上的各种元素之间的关系进行统一处理，合理搭配，使之构成和谐统一的整体。协调主要体现在以下之构成和谐统一的整体。协调主要体现在以下4个方面：个方面：1)主与从主与从2)动与静动与静3)入与出入与出4)统一与协调统一与协调67网页设计与制作网页设计与制作图图2-10协调协调68网页设计与制作网页设计与制作3平衡原则平衡原则界面是否平衡是非常重要的。例如在一个介绍电脑的界面上，将界面是否平衡是非常重要的。例如在一个介绍电脑的界面上，将一台电脑放在界面的左边，看起来似乎要倒向右边，但在界面的左边一台电脑放在界面的左边，看起来似乎要倒向右边，但在界面的左边设计者安

45、排了粗体的标题和文字，恰好起到了支撑作用，使人感觉非设计者安排了粗体的标题和文字，恰好起到了支撑作用，使人感觉非常平稳，这就是平衡带来的艺术效果。达到平衡的一种方法是将界面常平稳，这就是平衡带来的艺术效果。达到平衡的一种方法是将界面在高度上三等分，图形的中轴落在下三分之一划分线上，这样就可以在高度上三等分，图形的中轴落在下三分之一划分线上，这样就可以保持空间上的平衡。保持空间上的平衡。平衡并不是对称。以一点为起点，向左右同时展开的形态，称为平衡并不是对称。以一点为起点，向左右同时展开的形态，称为左右对称形，应用对称的原理可以发展出旋涡等形状复杂的平衡状态。左右对称形，应用对称的原理可以发展出旋

46、涡等形状复杂的平衡状态。我国的古典艺术，大多讲究对称原则。应用对称，可以使用户产生庄我国的古典艺术，大多讲究对称原则。应用对称，可以使用户产生庄重威严感，但缺少活泼性。在界面设计上，一般不认可对称原则。现重威严感，但缺少活泼性。在界面设计上，一般不认可对称原则。现代造型艺术也向代造型艺术也向“非对称非对称”方向发展。当然，在画面需要表达传统风方向发展。当然，在画面需要表达传统风格时，对称仍是较好的表现手段。格时，对称仍是较好的表现手段。中心也是平衡的一个方面。在人的感觉上，左右会有微妙的差异。中心也是平衡的一个方面。在人的感觉上，左右会有微妙的差异。如果某界面右下角有一处吸引力特别强的地方，考

47、虑左右平衡时，如如果某界面右下角有一处吸引力特别强的地方，考虑左右平衡时，如何处理这个地方，就成为关键问题。人的视觉对从左上到右下的流向何处理这个地方，就成为关键问题。人的视觉对从左上到右下的流向较为自然。将右下角空着来编排标题与插图，就会产生一种自然的流较为自然。将右下角空着来编排标题与插图，就会产生一种自然的流向，反之，就会失去平衡而显得不自然。向，反之，就会失去平衡而显得不自然。69网页设计与制作网页设计与制作图图2-11平衡平衡70网页设计与制作网页设计与制作4趣味原则趣味原则在界面设计中注意在界面设计中注意“趣味性趣味性”可以可以“寓用于乐寓用于乐”。除。除了运用形象、直观、生动的图

48、形优化界面来提高趣味性，了运用形象、直观、生动的图形优化界面来提高趣味性，利用以下方法也能提高趣味性。利用以下方法也能提高趣味性。1）比例）比例2）强调）强调3）凝聚与扩散）凝聚与扩散4）形态的意向）形态的意向5）变化率）变化率6）规律感）规律感7）导向）导向8）空白区）空白区9）屏幕上的文字）屏幕上的文字71网页设计与制作网页设计与制作图图2-12趣味趣味72网页设计与制作网页设计与制作2.2.4网页的点、线、面的运用网页的点、线、面的运用点、线、面是构成视觉空间的基本元素，是表现视觉点、线、面是构成视觉空间的基本元素，是表现视觉形象的基本设计语言。形象的基本设计语言。1）点的视觉构成）点的

49、视觉构成在网页中，一个单独而细小的形象可以称之为点。点在网页中，一个单独而细小的形象可以称之为点。点是相比较而言的，比如一个汉字是由很多笔划组成的，但是相比较而言的，比如一个汉字是由很多笔划组成的，但是在整个页面中，它可以称为一个点。点也可以是一个网是在整个页面中，它可以称为一个点。点也可以是一个网页中相对微小单纯的视觉形象，如一个按钮、一个页中相对微小单纯的视觉形象，如一个按钮、一个Logo等。等。点是相对线和面而存在的视觉元素。点是构成网页的最基点是相对线和面而存在的视觉元素。点是构成网页的最基本单位，使用得当，可以画龙点睛。一个网页往往需要有本单位，使用得当，可以画龙点睛。一个网页往往需

50、要有数量不等、形状各异的点来构成。点的形状、方向、大小、数量不等、形状各异的点来构成。点的形状、方向、大小、位置、聚集和发散，能够给人带来不同的心理感受。下面位置、聚集和发散，能够给人带来不同的心理感受。下面以具体的页面为例介绍点的运用和表现。以具体的页面为例介绍点的运用和表现。73网页设计与制作网页设计与制作图图2-13点的构成点的构成74网页设计与制作网页设计与制作图图2-14点的构成点的构成75网页设计与制作网页设计与制作2）线的视觉构成）线的视觉构成点的延伸形成线。点的延伸形成线。线线在在页页面面中中的的作作用用在在于于表表示示方方向向、位位置置、长长短短、宽宽度度、形状、质量和情绪。