Dreamweaver MX中文版建站攻略 16--20

以上这些站点的网页宽度，说明宽度没有一个固定值。

做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。

用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。

<IMG border=0 height=372 src="http://www.gocn.net/mbsky/study/20031237826734.jpg" width=512 v:shapes="_x0000_i1031"> 

 完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。下面是Apple中国主页的结构

<IMG border=0 src="http://www.gocn.net/mbsky/study/20031237826580.jpg" width=550 v:shapes="_x0000_i1032">

摘星奴 · 发表于 2004-2-22 18:11:19

设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。

主要内容：

几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。

<IMG height=300 src="http://www.gocn.net/mbsky/study/20031237845734.jpg" width=400 v:shapes="_x0000_i1025"> 

以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。

中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。

下面一个表格，一行一列，放版权声明。

几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。

LOGO: 88×31

实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子http://www.isamsung.com.cn/ ，说明在设计时，并不受什么标准的限制。

常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：

<IMG height=300 src="http://www.gocn.net/mbsky/study/20031237845580.jpg" width=400 v:shapes="_x0000_i1026"> 

最下面的表格，一行一列，放版权声明，联系方式。

 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。

摘星奴 · 发表于 2004-2-22 18:22:35

如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如http://www.163.com

如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。

如果是个人网站，内容较少，可以使用尺寸较大的图片作菜单，应用CSS滤镜后，可以有很好的效果。

现在最流行的就是Flash导航菜单了，晃到一个按钮上时，有动画有声音，效果非常好。但是在没有装Flash播放器的电脑上，不能显示。

现在国内使用较多的是使用按钮做导航。

在Dreamweaver MX中文版提供了直接制作Flash按钮的功能，输入文字就可以做出中文的Flash按钮。

导航栏有横排的、竖排的，也有两种都有的，横排的例如:V6艺术精英<A href="http://www.v6dp.com/" target="_blank" >http://www.v6dp.com/</A>这个站点页面采用的是百分比，在任何电脑上显示都是全屏幕的。

<IMG border=0 height=777 src="http://www.gocn.net/mbsky/study/2003123793734.jpg" width=553 v:shapes="_x0000_i1027">

摘星奴 · 发表于 2004-2-22 18:29:01

坚排的如三星电子<A href="http://www.isamsung.com.cn/" target="_blank" >http://www.isamsung.com.cn/</A> 另外这个站点LOGO在右上角。

<IMG border=0 height=645 src="http://www.gocn.net/mbsky/study/20031237924734.jpg" width=553 v:shapes="_x0000_i1028"> 

横排坚排均有的：联想<A href="http://www.legend.com/" target="_blank" >http://www.legend.com/</A>联想的菜单栏还使用了弹出式菜单。

<IMG border=0 height=444 src="http://www.gocn.net/mbsky/study/20031237924580.jpg" width=557 v:shapes="_x0000_i1029"> 

网页的内容主要是文字和一些图片，为了方便阅读，两行文字之间的距离不宜太近。需要在CSS中设置行距，将在以后的文章中介绍。

摘星奴 · 发表于 2004-2-22 18:31:18

<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
 　　Dreamweaver MX 提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于 Dreamweaver 4 的浮动布局。第一次运行Dreamweaver MX需要选择一种工作区布局。

<IMG height=289 src="http://www.gocn.net/mbsky/study/20031237942734.jpg" width=413 v:shapes="_x0000_i1025"> 

选择Dreamweaver MX工作区

<IMG height=403 src="http://www.gocn.net/mbsky/study/20031237942580.jpg" width=554 v:shapes="_x0000_i1026"> 

两种布局的喜好因人而异，如果选择的是Dreamweaver MX工作区，想改成Dreamweaver 4工作区，可以使用“参数选择”对话框切换。

<IMG height=474 src="http://www.gocn.net/mbsky/study/20031237942621.jpg" width=554 v:shapes="_x0000_i1027">

电梯直达

快捷功能

楼主新帖

Dreamweaver MX中文版建站攻略 16--20

相关帖子

已有(4)人评论

关于

导读