第2章--网站建设概论--《网页设计与制作》-教学课件

网页设计与制作第第2章章网站建设概论网站建设概论1网页设计与制作2.1网站概论网站概论2.1.1网站的种类网站的种类根据不同的分类方式可以将网站分成不同根据不同的分类方式可以将网站分成不同的类型，下面列出几种常见的网站分类方式。的类型，下面列出几种常见的网站分类方式。1根据网站提供的服务分类根据网站提供的服务分类（1）信息类网站；）信息类网站；（2）交易类网站；）交易类网站；（3）互动游戏类网站；）互动游戏类网站；（4）有偿信息类网站；）有偿信息类网站；（5）功能型网站；）功能型网站；（6）综合类网站。）综合类网站。2网页设计与制作2根据网站的性质分类根据网站的性质分类（1）政府网站；）政府网站；（2）企业网站；）企业网站；（3）商业网站；）商业网站；（4）教育科研机构网站；）教育科研机构网站；（5）个人网站；）个人网站；（6）非盈利机构网站；）非盈利机构网站；（7）其它类型的网站。）其它类型的网站。3网页设计与制作3根据在大型搜索引擎上的设置分类根据在大型搜索引擎上的设置分类（1）娱乐与休闲类网站；）娱乐与休闲类网站；（2）商业与经济类网站；）商业与经济类网站；（3）艺术与人文类网站；）艺术与人文类网站；（4）健康与医药类网站；）健康与医药类网站；（5）新闻与媒体类网站；）新闻与媒体类网站；（6）政府与政治类网站；）政府与政治类网站；（7）电脑与网络类网站；）电脑与网络类网站；（8）社会与文化类网站；）社会与文化类网站；（9）科学与教育类网站；）科学与教育类网站；（10）参考资料类网站。）参考资料类网站。4网页设计与制作2.1.2网站建设的步骤网站建设的步骤建设一个网站一般要经过以下步骤：网站目标和主题建设一个网站一般要经过以下步骤：网站目标和主题的确定、网站的规划、网站素材的准备、网站制作工具的的确定、网站的规划、网站素材的准备、网站制作工具的选择和确定、网站的建立、注册域名和申请网页空间、网选择和确定、网站的建立、注册域名和申请网页空间、网站的测试和发布、网站的宣传和推广以及网站的更新和维站的测试和发布、网站的宣传和推广以及网站的更新和维护。护。1网站目标和主题的确定网站目标和主题的确定1）网站目标的确定）网站目标的确定为什么要建立网站，是为了宣传产品，进行电子商务，为什么要建立网站，是为了宣传产品，进行电子商务，还是建立行业性网站？是企业的需要还是市场开拓的延伸还是建立行业性网站？是企业的需要还是市场开拓的延伸？如果是个人网站，比如说是交朋友的、学习讨论的还是？如果是个人网站，比如说是交朋友的、学习讨论的还是兴趣爱好的？建立网站前目标要明确。另外还应该知道谁兴趣爱好的？建立网站前目标要明确。另外还应该知道谁是网站将来的访问者，例如，明确该网站是面向于消费者是网站将来的访问者，例如，明确该网站是面向于消费者？雇员？学生？朋友还是家庭的？只有知己知彼，才能避？雇员？学生？朋友还是家庭的？只有知己知彼，才能避免在免在网站建设网站建设中出现很多问题，使网站建设能顺利进行。中出现很多问题，使网站建设能顺利进行。5网页设计与制作2）网站主题的确定）网站主题的确定确定网站主题是赋予网站生命关键一步，网站的确定网站主题是赋予网站生命关键一步，网站的风格和创意点是生存的两个重要因素，给网站取一个风格和创意点是生存的两个重要因素，给网站取一个好名称可以让大家容易记住你。好名称可以让大家容易记住你。（1）网站的主题）网站的主题网站主题就是建立的网站所要包含的主要内容，网站主题就是建立的网站所要包含的主要内容，也就是网站的题材问题，一个网站必须要有一个明确也就是网站的题材问题，一个网站必须要有一个明确的主题。的主题。在选择主题时还应注意以下几个问题：在选择主题时还应注意以下几个问题：主题选材要小而精。主题选材要小而精。最好选择自己擅长或者感兴趣的内容。最好选择自己擅长或者感兴趣的内容。选题不要太滥、目标定位不要太高。选题不要太滥、目标定位不要太高。6网页设计与制作（2）网站的风格）网站的风格一个优秀网站都有自己的个性和文化，而且会从一开始就千方百一个优秀网站都有自己的个性和文化，而且会从一开始就千方百计去体现它，树立起属于自己的风格。风格具有抽象性、独特性和人性计去体现它，树立起属于自己的风格。风格具有抽象性、独特性和人性等特征。等特征。风格的抽象性是指站点的整体形象给浏览者的综合感受。风格的抽象性是指站点的整体形象给浏览者的综合感受。风格的独特性是指该网站不同于其他网站的地方。风格的独特性是指该网站不同于其他网站的地方。风格的人性体现在通过网站的外表、内容、文字和交流可以概括风格的人性体现在通过网站的外表、内容、文字和交流可以概括出一个站点的个性与情绪，是温文儒雅、执著热情，还是活泼易变、放出一个站点的个性与情绪，是温文儒雅、执著热情，还是活泼易变、放任不羁。任不羁。有风格的网站与普通网站的区别在于：普通网站看到的只是堆砌有风格的网站与普通网站的区别在于：普通网站看到的只是堆砌在一起的信息，只能用理性感受来描述，比如信息量大小，浏览速度快在一起的信息，只能用理性感受来描述，比如信息量大小，浏览速度快慢。但如果浏览过有风格的网站后就能有更深一层的感性认识，比如站慢。但如果浏览过有风格的网站后就能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师或朋友。点有品位，和蔼可亲，是老师或朋友。简单地说，风格就是一句话：与众不同！简单地说，风格就是一句话：与众不同！如何树立网站风格呢？可以分这样几个步骤来实现。如何树立网站风格呢？可以分这样几个步骤来实现。确信风格是建立在有价值内容之上的。确信风格是建立在有价值内容之上的。需要彻底弄清楚希望站点给人的印象是什么。需要彻底弄清楚希望站点给人的印象是什么。在明确网站印象后，开始努力建立和加强这种印象。在明确网站印象后，开始努力建立和加强这种印象。7网页设计与制作经过第二步印象的经过第二步印象的“量化量化”后，需要进一步找出其中最有特色的东后，需要进一步找出其中最有特色的东西，就是最能体现网站风格的东西，并以它作为网站的特色加以重点强西，就是最能体现网站风格的东西，并以它作为网站的特色加以重点强化和宣传。下面提供一些参考。化和宣传。下面提供一些参考。l将网站的标志（将网站的标志（Logo），尽可能出现在每个页面上，或者出现在），尽可能出现在每个页面上，或者出现在页眉、页脚、背景上。页眉、页脚、背景上。l突出网站的标准色彩。文字的链接色彩、图片的主色彩、背景色、突出网站的标准色彩。文字的链接色彩、图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。边框等色彩尽量使用与标准色彩一致的色彩。l突出网站的标准字体。在关键的标题、菜单和图片里使用统一的突出网站的标准字体。在关键的标题、菜单和图片里使用统一的标准字体。标准字体。l想一条朗朗上口的宣传标语，把它做在网站的横幅（想一条朗朗上口的宣传标语，把它做在网站的横幅（Banner）里，）里，或者放在醒目的位置上，告诉大家本网站的特色是或者放在醒目的位置上，告诉大家本网站的特色是。l使用统一的语气和人称。即使是多人合作维护，也要让读者觉得使用统一的语气和人称。即使是多人合作维护，也要让读者觉得是同一个人写的。是同一个人写的。l使用统一的图片处理效果。例如，阴影效果的方向、厚度、模糊使用统一的图片处理效果。例如，阴影效果的方向、厚度、模糊度都必须一样。度都必须一样。l创造一个网站特有的符号或图标。例如在一句链接前的一个点，创造一个网站特有的符号或图标。例如在一句链接前的一个点，可以使用可以使用、等符号，虽然很简单的一个等符号，虽然很简单的一个变化，却给人与众不同的感觉。变化，却给人与众不同的感觉。l使用自己设计的花边、线条和点。使用自己设计的花边、线条和点。l展示网站的荣誉和成功作品。展示网站的荣誉和成功作品。l告诉网友关于你个人真实的故事和想法。告诉网友关于你个人真实的故事和想法。8网页设计与制作（3）网站的创意）网站的创意创意是网站生存的关键。实质上，创意是传达信创意是网站生存的关键。实质上，创意是传达信息的一种特别方式。息的一种特别方式。创意并不是天才者的灵感，而是思考的结果。根据创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分为美国广告学教授詹姆斯的研究，创意思考的过程分为5阶段。阶段。l准备期：研究所搜集的资料，根据旧经验，启准备期：研究所搜集的资料，根据旧经验，启发新创意。发新创意。l孵化期：将资料咀嚼消化，使意识自由发展，孵化期：将资料咀嚼消化，使意识自由发展，任意结合。任意结合。l启示期：意识发展并结合，产生创意。启示期：意识发展并结合，产生创意。l验证期：将产生的创意讨论修正。验证期：将产生的创意讨论修正。l形成期：设计制作网页，将创意具体化。形成期：设计制作网页，将创意具体化。9网页设计与制作（4）网站名称）网站名称一个好的网站应该有一个容易使人记住的名一个好的网站应该有一个容易使人记住的名称，就像人名一样，取得别致又不艰涩难懂会使称，就像人名一样，取得别致又不艰涩难懂会使人记忆深刻。例如：网易，其直观的意思就是告人记忆深刻。例如：网易，其直观的意思就是告诉人们诉人们“网络是容易使用的网络是容易使用的”，而其域名，而其域名更是借用了中国电信最早的拨号网络的更是借用了中国电信最早的拨号网络的名称，使用户在浏览网站时很容易就联想到它；名称，使用户在浏览网站时很容易就联想到它；例如搜狐，顾名思义就是以搜索引擎为特色服务例如搜狐，顾名思义就是以搜索引擎为特色服务的门户网站。的门户网站。10网页设计与制作2网站的规划网站的规划网站的规划包括总体结构的设置、目录的设网站的规划包括总体结构的设置、目录的设置和链接结构的设置。置和链接结构的设置。1）网站总体结构的确立）网站总体结构的确立网站总体结构的确立至关重要，它是网站设网站总体结构的确立至关重要，它是网站设计能否成功的关键所在。规划一个网站结构，可计能否成功的关键所在。规划一个网站结构，可以用树状结构先把每个页面的内容大纲列出来，以用树状结构先把每个页面的内容大纲列出来，尤其是要制作一个有很多页面的大网站时，特别尤其是要制作一个有很多页面的大网站时，特别需要把这个架构规划好，同时要考虑到以后可能需要把这个架构规划好，同时要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的扩充性，免得做好以后又要一改再改整个网站的架构，十分累人，也十分费时。的架构，十分累人，也十分费时。11网页设计与制作2）网站目录的设置）网站目录的设置网站的目录是指创建网站时建立的目录。下面是建立目录结构的一些建网站的目录是指创建网站时建立的目录。下面是建立目录结构的一些建议。议。（1）不要将所有文件都存放在根目录下，这样会产生如下不利影响。）不要将所有文件都存放在根目录下，这样会产生如下不利影响。文件管理混乱。文件管理混乱。上传速度慢。上传速度慢。（2）按栏目内容建立子目录。）按栏目内容建立子目录。子目录的建立首先按主菜单栏目建立。子目录的建立首先按主菜单栏目建立。其他的次要的栏目类似最新更新、友情链接等栏目，内容较多的且需其他的次要的栏目类似最新更新、友情链接等栏目，内容较多的且需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站、关于站长、站点经历等可以合并放在一个统一目录栏目，例如：关于本站、关于站长、站点经历等可以合并放在一个统一目录下。下。所有程序一般都存放在特定目录下。所有程序一般都存放在特定目录下。（3）在每个主目录下都建立独立的）在每个主目录下都建立独立的images目录。目录。（4）目录的层次不要太深。）目录的层次不要太深。（5）不要使用中文目录）不要使用中文目录,不要使用过长的目录。不要使用过长的目录。12网页设计与制作3）网站链接结构的设置）网站链接结构的设置网站链接结构是指页面之间相互链接的拓扑结构。它建网站链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。研究网站链接结立在目录结构基础之上，但可以跨越目录。研究网站链接结构的目的在于：用最少的链接，使得浏览最有效率。构的目的在于：用最少的链接，使得浏览最有效率。建立网站链接结构一般有两种基本方式：建立网站链接结构一般有两种基本方式：（1）树状链接结构（一对一）。优点是条理清晰，访问）树状链接结构（一对一）。优点是条理清晰，访问者明确知道自己在什么位置，不会者明确知道自己在什么位置，不会“迷路迷路”；缺点是浏览效；缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。绕经首页。（2）星状链接结构（一对多）。类似网络服务器的链）星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接，立体结构像东方明珠接，每个页面相互之间都建立有链接，立体结构像东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面；缺点是链接太多，容易使浏览者迷以到达自己喜欢的页面；缺点是链接太多，容易使浏览者迷路，弄不清自己在什么位置，已经看了多少内容。路，弄不清自己在什么位置，已经看了多少内容。13网页设计与制作这两种基本结构都只是理想方式，在实际这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使的网站设计中，总是将这两种结构混合起来使用，希望浏览者既可以方便快速地到达自己需用，希望浏览者既可以方便快速地到达自己需要的页面，又可以清晰地知道自己的位置。所要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接状链接结构，一级和二级页面之间用树状链接结构。结构。14网页设计与制作3网站素材的准备网站素材的准备网站素材的准备工作包括搜集、整理加工、网站素材的准备工作包括搜集、整理加工、制作和存储等环节。制作和存储等环节。4网站制作工具的选择和确定网站制作工具的选择和确定目前制作网页涉及的工具比较多，对于网页目前制作网页涉及的工具比较多，对于网页制作工具，目前通常选用的都是所见即所得的制作工具，目前通常选用的都是所见即所得的编辑工具，其中的优秀者当然是编辑工具，其中的优秀者当然是Dreamweaver和和FrontPage了；如果是初学者，了；如果是初学者，FrontPage是是首选。除此之外，还有：图片编辑工具，如首选。除此之外，还有：图片编辑工具，如Photoshop、Fireworks等；动画制作工具，如等；动画制作工具，如Flash、Cool3D等；还有网页特效工具，如网等；还有网页特效工具，如网页特效精灵、有声有色等。页特效精灵、有声有色等。15网页设计与制作5网站的建立网站的建立按照先大后小、先简单后复杂的原则制作出按照先大后小、先简单后复杂的原则制作出所有的页面。所谓先大后小是指在制作网页时，所有的页面。所谓先大后小是指在制作网页时，先把大的结构设计好，然后再逐步完善小的结构先把大的结构设计好，然后再逐步完善小的结构设计；所谓先简单后复杂是指先设计出简单的内设计；所谓先简单后复杂是指先设计出简单的内容，然后再设计复杂的内容，以便在出现问题时容，然后再设计复杂的内容，以便在出现问题时好修改。注意在制作网页时要多灵活运用软件配好修改。注意在制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率。备的设计模板，这样可以大大提高制作效率。16网页设计与制作6注册域名和申请网页空间注册域名和申请网页空间对于个人网站，在申请免费网页空间的同对于个人网站，在申请免费网页空间的同时也完成了域名的注册；还有很多的时也完成了域名的注册；还有很多的ISP（InternetServiceProvider，互联网服务，互联网服务提供商）提供域名注册和网页空间申请的收费提供商）提供域名注册和网页空间申请的收费服务功能，用户根据自己的情况进行选择。服务功能，用户根据自己的情况进行选择。17网页设计与制作 7网站的测试和发布网站的测试和发布网站制作完毕，可以先利用软件自带的测试功网站制作完毕，可以先利用软件自带的测试功能对网站进行内部测试来发现和修改基本的问题，能对网站进行内部测试来发现和修改基本的问题，最后将网站发布到最后将网站发布到Web服务器上。现在发布的工具服务器上。现在发布的工具有很多，有些网页制作工具本身就带有上传功能，有很多，有些网页制作工具本身就带有上传功能，另外利用另外利用FTP上传工具，可以很方便地把网站发布上传工具，可以很方便地把网站发布到自己申请的主页存放服务器上。网站发布以后，到自己申请的主页存放服务器上。网站发布以后，在浏览器中打开自己的网站，逐页逐个链接地再进在浏览器中打开自己的网站，逐页逐个链接地再进行测试，发现问题，及时修改，然后再上传、再测行测试，发现问题，及时修改，然后再上传、再测试，如此循环直到满意为止。试，如此循环直到满意为止。18网页设计与制作8网站的宣传和推广网站的宣传和推广网站发布后，还要不断地进行宣传，这样网站发布后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率才能让更多的朋友认识它，提高网站的访问率和知名度。网站宣传和推广的方法有很多，例和知名度。网站宣传和推广的方法有很多，例如到搜索引擎上注册，与别的网站交换链接，如到搜索引擎上注册，与别的网站交换链接，运用网络广告等。运用网络广告等。9网站的更新和维护网站的更新和维护网站是需要经常维护和更新内容的，必须网站是需要经常维护和更新内容的，必须不断给它补充新的内容，才能够长期吸引住浏不断给它补充新的内容，才能够长期吸引住浏览者。览者。19网页设计与制作2.1.3网站建设的原则网站建设的原则下面介绍一些非常实用的网站建设原则：下面介绍一些非常实用的网站建设原则：1牢记内容第一的原则牢记内容第一的原则2网页文件命名原则网页文件命名原则3图片命名的原则图片命名的原则4重视网页标题的设计重视网页标题的设计5网站导航设计要清晰网站导航设计要清晰6网页长度应限定在三个整屏以内网页长度应限定在三个整屏以内7.善用图像元素善用图像元素8网站中所有路径都采用相对路径网站中所有路径都采用相对路径9确保链接的有效性，链接层次不要太深确保链接的有效性，链接层次不要太深10善用表格来布局，但表格的嵌套层次要控制在三层左右善用表格来布局，但表格的嵌套层次要控制在三层左右11遵循遵循3次点击规则次点击规则12兼顾下载速度与美观兼顾下载速度与美观13.及时更新网页及时更新网页14.避免滥用技术避免滥用技术15要保护好个人信息要保护好个人信息20网页设计与制作2.2网页的可视化设计概论网页的可视化设计概论2.2.1网页的版面布局网页的版面布局1网页版面布局的基本概念网页版面布局的基本概念版面指的是浏览器看到的一个完整的页面。布局，就是以最适合浏览的版面指的是浏览器看到的一个完整的页面。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。方式将图片和文字排放在页面的不同位置。（1）页面尺寸）页面尺寸由于页面尺寸和显示器大小及分辨率有关，一般分辨率在由于页面尺寸和显示器大小及分辨率有关，一般分辨率在800 x600像素像素的情况下，页面的显示尺寸为：的情况下，页面的显示尺寸为：780 x428个像素；分辨率在个像素；分辨率在640 x480像素的情像素的情况下，页面的显示尺寸为：况下，页面的显示尺寸为：620X311个像素；分辨率在个像素；分辨率在1024X768像素的情况像素的情况下，页面的显示尺寸为：下，页面的显示尺寸为：1007x600像素。目前页面的尺寸一般选像素。目前页面的尺寸一般选800X600像像素的分辨率为约定俗成的浏览模式。素的分辨率为约定俗成的浏览模式。（2）整体造型）整体造型造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们都是矩形，但对于页面的造型，可以充分运用自然界中的其它形状以及它们的组合：矩形、圆形、三角形、菱形等。的组合：矩形、圆形、三角形、菱形等。21网页设计与制作（3）页头）页头页头也叫页眉，页眉的作用是定义页面的主题。页头是整个页页头也叫页眉，页眉的作用是定义页面的主题。页头是整个页面设计的关键，它牵涉到下面的更多设计和整个页面的协调性。页面设计的关键，它牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。头常放置站点名字的图片和公司标志以及旗帜广告。（4）文本）文本文本在页面中出现都是以行或者块文本在页面中出现都是以行或者块(段落段落)出现，它们的摆放位出现，它们的摆放位置决定着整个页面布局的可视性。置决定着整个页面布局的可视性。（5）页脚）页脚页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。制作者或者公司信息的地方。（6）图片）图片图片和文本是网页的两大构成元素，缺一不可。如何处理好图图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。片和文本的位置成了整个页面布局的关键。（7）多媒体）多媒体除了文本和图片，还有声音、动画、视频等其它网页元素。虽除了文本和图片，还有声音、动画、视频等其它网页元素。虽然它们不是经常被利用，但随着动态网页的兴起，它们在网页布局然它们不是经常被利用，但随着动态网页的兴起，它们在网页布局上也将变得更重要。上也将变得更重要。22网页设计与制作2网页版面布局技术网页版面布局技术（1）表格布局）表格布局（2）框架布局）框架布局（3）层叠样式表的应用）层叠样式表的应用3网页版面布局的原则网页版面布局的原则（1）主次分明，中心突出）主次分明，中心突出（2）大小搭配，相互呼应）大小搭配，相互呼应（3）图文并茂，相得益彰）图文并茂，相得益彰23网页设计与制作4网页版面布局的步骤网页版面布局的步骤网页版面布局分以下几个步骤：网页版面布局分以下几个步骤：（1）草案）草案（2）粗略布局）粗略布局（3）定案）定案24网页设计与制作5网页版面布局的类型网页版面布局的类型网页版面布局大致可分为网页版面布局大致可分为“国国”字型、拐角型、字型、拐角型、“三三”型、对称对比型、标题正文型、框架型、封面型、型、对称对比型、标题正文型、框架型、封面型、Flash型等，下面分别介绍。型等，下面分别介绍。（1）“国国”字型字型也称为也称为“同同”字型或字型或“口口”字型，是一些大型网站所字型，是一些大型网站所喜欢的类型。最上面是网站的标题以及横幅广告条，接下喜欢的类型。最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，有时左面来就是网站的主要内容，左右分列两小条内容，有时左面是主菜单，右面放友情连接等；中间是主要部分，与左右是主菜单，右面放友情连接等；中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明、广告等。这种结构在网上最常见，其优点是能版权声明、广告等。这种结构在网上最常见，其优点是能充分利用版面，信息量大，缺点是页面拥挤，不够灵活，充分利用版面，信息量大，缺点是页面拥挤，不够灵活，如图如图2-1所示，网址为：所示，网址为：http:/。25网页设计与制作图图2-1“国国”字型字型26网页设计与制作“国国”字型字型例如例如“国国”字型的网站还有字型的网站还有http:/。27网页设计与制作（2）拐角型）拐角型这种结构类型与上一种其实只是形式上的区别，这种结构类型与上一种其实只是形式上的区别，非常相近，上面也是横条网站标志非常相近，上面也是横条网站标志+广告条，接下广告条，接下来的左侧是一窄列链接等，右列是很宽的正文，下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。这是网页设计中用的面也是一些网站的辅助信息。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人容易让人看之无味看之无味。如图。如图2-2所示，网址为：所示，网址为：http:/。如果没有下面的网站辅。如果没有下面的网站辅助信息栏的结构，有时又称为助信息栏的结构，有时又称为“T”形结构。形结构。28网页设计与制作图图2-2拐角型布局拐角型布局29网页设计与制作（3）“三三”型型“三三”型结构多用于国外站点，国内用的不多。型结构多用于国外站点，国内用的不多。特点是页面上横向两条色块将页面整体分割为四部特点是页面上横向两条色块将页面整体分割为四部分，色块中大多放广告条，如图分，色块中大多放广告条，如图2-3所示，网址为：所示，网址为：http:/www.re-。30网页设计与制作图图2-3“三三”型布局型布局31网页设计与制作（4）对称对比型）对称对比型对称对比型是采取左右或者上下对称的一对称对比型是采取左右或者上下对称的一种布局方法，一半深色，一半浅色，一般用于种布局方法，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难，如图两部分有机的结合比较困难，如图2-4所示，网所示，网址为：址为：http:/。32网页设计与制作图图2-4对称对比布局对称对比布局33网页设计与制作（5）标题正文型）标题正文型这种结构类型即最上面是标题或类似的一些东这种结构类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面就西，下面是正文，比如一些文章页面或注册页面就是这种，如图是这种，如图2-5所示，网址为：所示，网址为：http:/