网页制作第四章.pptVIP

二、版面布局设计（1） 800＊600是目前大多数显示器设置的分辨率，所以很多网站在设计时都针对800＊600进行设计。但是1024＊768却是未来的发展趋势，将日益成为主流的分辨率模式，所以在设计时最好能兼顾这两种分辨率。 二、版面布局设计（1） 第二步是确定网页的框架。框架指的是怎么样从整体上把页面划分开来，比如上下分或者左右分。框架有很多种，最简单的是图4-23所示的左右型框架和上下型框架，例如图4-20所示的湖南教师网站的内容网页就是其中的第一种框架。这种框架一般有大小两块区域，其中一块较大的区域放置网页的主体内容，它通常占据整个屏幕的五分之四。 而另一块较小的区域 通常放置的是网站标 志和导航条。 二、版面布局设计（1） 将上下型框架和左右型框架结合起来可以形成复合型框架，如图4-24显示的就是几种比较常见的复合型框架。复合型框架非常适合于布局大量的内容，所以经常用于网站主页的版面布局，比如图4-12所示的德德玛网站主页采用的就是图4-24中第5种复合型框架，图4-15所示的首都之窗 主页和图4-18湖南教师 网主页采用的就是图 4-24中第4种复合型框架 。 二、版面布局设计（1） 当然，并不是所有的网页都是有框架的，往往这时的网页都具有相当鲜明的个性。它将网页的内容很好地融入到图片或者FLASH动画当中，给人一种与众不同的感觉。这种无框架的设计通常很难，需要很高的电脑美术功底才行。很多个人站点或者艺术站点都会采用无框架结构，例如可乐猫网站主页。 二、版面布局设计（1） 第三步就是在框架的不同区域上安排不同的内容。不同的网页内容自然是不一样的，所以在这里只是向大家介绍内容编排上的一个基本知识，那就是人们在浏览一个网页的时候，通常会把第一眼停留在网页的左上角或中间的地方(如图4-25所示)，然后才会浏览其他部分。这个部分通常称为 焦点，所以在布局内容的时候， 应该把最能传达信息、最能吸 引人的内容放在这些地方， 比如网站标志和必威体育精装版新闻。 二、版面布局设计（2） 2. 版面布局的基本方法 熟悉网页制作的人在拿到网页的相关内容后，也许很快就可以在脑子里形成大概的布局，并且可以直接用网页制作工具开始制作。但是对不熟悉网页布局的人来说，这么做有相当大的困难，所以这时，就需要借助于其他的方法来进行网页布局。 二、版面布局设计（2） 第一种方法是用手工的方式在纸上画草图。 第二种方法使用网页制作工具Dreamweaver或Frontpage，这两种工具都提供了图4-23和图4-24所示的网页框架集，或者使用表格布局法。 第三种方法是用专业制图软件来进行布局（如Fireworks和Photoshop等），用它们可以像设计一幅图片、一幅招贴画、一幅广告一样去设计一个网页的界面，然后再考虑如何用网页制作工具去实现这个网页。 4.4节 网页设计实战 【本节内容】 一. 从Dreamweaver到Fireworks设计网页 二.从Fireworks 到Dreamweaver设计网页 一、 网页设计实战 设计网页布局，可以先用手工画一个草图，再在dreamweaver中设计网页的大体布局；然后使用fireworks等软件为网页内每一个局部块制作相应大小的图形图像，最后将这些图形图像分别插入到dreamveaver设计的网页布局小块里去。 也可以使用fireworks直接制作网页整体效果图，再将其详细分割，导出为网页；然后再用dreamveaver对网页进行调整与修改。 一、 从Dreamweaver到Fireworks设计网页 1．使用dreamweaver设计网页布局 以中国网页设计学院主页设计为例，来学习网页设计。设计网页宽度约1000点 ，使用手工方法在白纸上绘制首页的布局。 在dreamweaver工具软件中创建一个网站（设一存放图片文件夹images），新建首页，按照前面纸绘网页的布局，用表格（table）设计出布局，表格的边框大小、间距大小、填充大小都指定为0，表格宽度就是网页的宽度。网页布局不是规则表格，需要拆分和合并单元格；一行内有多个单元格时，除最后一个单元格外，其它单元格都要指定其宽度，每行至少指定一个单元格的高度。 一、 从Dreamweaver到Fireworks设计网页 也可以用块（div，也叫层）的方法来设计网页布局，每个小区域都是一个小块，大块里包含小块，整个网页是一个大的块。 2．采用fireworks设计图片 采用fireworks设计首页布局中的图片时注意要 （1）网页主图的设计 一、 从Dreamweaver到Fireworks设计网页