网页布局，随心所“绘”——Dreamweaver联手Fireworks实战网页布局.docxVIP

网页布局，随心所“绘”——Dreamweaver联手Fireworks实战网页布局2010-07-27 15:27:56| 分类：IT大舞台 | 标签：网页制作|字号大中小订阅关于网页的布局，不但需要有好的规划，而且也需要较强的技术支持，特别是对于那些复杂的布局结构。一般地，我们先根据自己的规划用网页编辑软件制作好表格，然后再填充上网页元素。这样做的布局，一是需要较强的表格驾驭能力，二是难免会使整个页面显得不太和谐。那么，我们能不能先用图像处理软件勾画出网页的大体布局，然后再转换为HTML网页文件，最后再把剩余的内容填充上？没有做不到的，只有想不到的。其实Macromedia软件公司早就为我们想好了，现在就让我们用网页制作专家Dreamweaver联手网页图形图像处理大师Fireworks实现刚才的想法。一、绘制布局图形首先，拿一张白纸、一支笔，静下心来，根据自己的规划绘制网页布局草图，以做到心中有数。现拟做一个以文学为题材的“一品文”网站首页，页面力求简洁清新，布局草图如图1所示。然后，在Fireworks MX中新建一文档，高度和宽度分别设为770像素和900像素，背景设为白色，保存文件名为index.png 。◆小提示：我们常常把网站页面的宽度控制在770像素之内，这是为了在800×600分辨率下显示时，既能充满屏幕又不至于出现水平滚动条，而且在1024×768的分辨率下也会得到不错的效果。◆小提示：如果大家感兴趣，可到向笔者索取“一品文”网站的源文件拿来研究。在文档的画布上，绘制如图2所示的网页图形布局。1. 绘制网站的Logo我们先以绘制网站的Logo（网站标志）图形（如图3所示）为例，介绍Fireworks的基本绘图功能。（1）选择工具箱中矢量绘图部分的 “矩形”（图4）工具，然后在画布的左上角绘制一矩形，在选中所绘矩形的前提下，设置工具箱中颜色部分的笔触和填充颜色。（2）分别复制两个同样的矩形，利用方向键移动位置，然后设置不同的笔触颜色，如图5所示。（3）选择工具箱中矢量绘图部分的文字（图6）工具，在矩形的右下角位置拖动鼠标出现一文本框，输入“一品文”文字，然后在其属性面板上进行相关设置，如字体、字号、颜色、效果等。◆小提示：当我们选中不同的对象时，在属性面板上将显示不同的内容，通过对属性面板的设置可精确控制对象的属性。2. 绘制“最近更新”导航条下面我们再以“最近更新”导航条（如图7所示）为例，使大家更进一步了解Fireworks 的绘图功能。绘制矩形并选中，在其属性面板具体设置如下：将高和宽分别设为21、400，矩形圆度设为44；在填充方式的下拉列表中选择“线形”填充，单击（图8）按钮，弹出渐变色的颜色和透明度设置面板，如图9所示，单击其中的颜色指示柄弹出调色盘，设定颜色，而单击透明度设置柄会弹出透明度调节的滑杆；单击（图10）按钮，在弹出的颜色面板中单击上方的透明按钮（图11），这样绘制的矩形无边框，最终设置如图12所示。◆小提示：在绘制布局图形时，要根据预定的内容确定各板块的尺寸，然后细心地绘制，尤其是各板块中的细节部分。有些部分确定位置后可保留空白或用色块代替，如Banner（广告条）等，我们也可以把经过处理的相关图片直接粘贴到“画布”上。图形的绘制要花费很长的时间，不仅需要充分利用Fireworks的绘图功能，而且要充分发挥你的创意和潜力，大家要在实践中不断探索提高。◆小资料：常见网页布局的类型常见的网页布局可分为“国”字型、标题正文型、左右框架型（上下框架型）、封面型、变化型等，下面让我们简单看一下。1. “国”字型：是一些大型网站常用的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，中间是主要部分，左右分列两小条，与中间部分一起罗列到页面底部，最下面是网站的基本信息，如联系方式、版权声明等。2. 拐角型：这种结构其实与“国”字型很相似，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是网站的基本信息。3. 标题正文型：这种类型最上面是标题或类似的一些东西，下面是正文，如一些文章或注册页面就属于此类。4．左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。一般的大型论坛都是这种类型。5．封面型：这种类型基本上出现在一些网站的首页，大部分为精美的平面设计结合一些小的动画，然后放上几个简单的链接或者仅是一个“进入”的链接。这种类型大部分用于企业网站和个人主页。6．变化型：即上面几种类型的结合与变化。二、切分布局图形现在我们要对该图形进行切分，单击工具箱中网页部分的切片工具（图13）按钮，在图形的左上角按下鼠标左键并拖动出现一个框（如图14），这个框在Fireworks中称为“切片”。鼠标靠近切片边线