Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义第7章网页布局重点内容：•网页而已的布局原则•使用水平线•使用表格布局网页•使用层布局网页•表格与层的转换•框架网页Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义一、网页的布局原则网页布局就是指以最适合浏览的方式将图像和文字等网页对象摆放在网页的不同位置，以便用户能够从浏览器中看到效果最佳的网页。在摆放网页对象时，要讲究一定的布局原则。而在介绍布局原则前，先介绍一下常见的布局结构，然后再介绍布局原则。1.布局结构常见的布局结构有以下几种。“T”型布局：所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”，所以我们称之为“T”形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明，如右图所示。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义一、网页的布局原则“口”型布局：这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，如右上图所示。“三”型布局：这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条，如右中图所示。对称对比布局：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。POP布局：POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图像作为页面的设计中心，如右下图所示。Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义一、网页的布局原则除了以上布局外，有很多网站的布局是没有规律的，设计者在设计时往往会加入自己的各种想法，以期待网页能够别具一格，脱颖而出，如右下图所示。我们在设计网页时，也可以根据个人观点，加入各种新颖的思维。2.布局原则现在的网站中常见的内容有文字、图像、符号、动画、按钮等。其中文字所占比重很大，因为网络是以传送信息为主，而使用文字还是最有效率的；也就是说文字是网页传输信息的主要工具，在制作站点时应该腾出一定的空间用于承载文字，不应为了讲究“美观”，而将比重放在没有具体内容的其他网页对象上。Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义一、网页的布局原则除了文字外，网站中比重较大的应属图像，加入图像不但可以使页面更加活跃，而且可以形象的说明问题。为了使网页中的各类网页对象能够有机的结合在一起，在布局过程中，我们应遵循以下几条原则：正常平衡：亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。异常平衡：即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。对比：所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。空白：空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。图像解说：此法对不能用语言说服、或用语言无法表达的情感，特别有效。图像解说的内容，可以传达给浏览者的更多的心理因素。Dreamweaver应用技术——《DreamweaverMX2004实训教程》讲义二、使用水平线水平线对网页的布局起着重要的作用，可清晰地划分网页。在网页中加入水平线，不仅可以使网页的内容分隔得更加明显，还可以有效地组织信息。1.添加水平线要向页面中添加水平线，应选择【插入】|【HTML】|【水平线】命令，或是单击【插入】工具栏左侧的下拉三角按钮...
