教你用DW8做DIV+CSS网站导航页

[em02]

不管DIV+CSS出来的XHTML布局是否被广大做程序，做网站，做美工的接受，但纵观各大门户网站正在不知不觉的进行重构工作，就可想而知这种观念已不再是前几年只停留在口头上或文字上了。163.com，和讯，阿里巴巴，淘宝，当当网等这些门户网，早就开始进行网站工作了。其实无论用table布局也好，用div+xhtml+css也罢，都是一种习惯问题，或者说是一种大从趋势问题吧。对于诸如我之类的不知几等数几流的小站站长来说，是否也要追随这样一种“风”呢？我个人认为还是有必要的，如果你想在这行多混几年，多学点东东，那么这就不仅是一种“风气”，而是一种要必须掌握的一种技能，最起码，在你的简历上双多了几行字：会用DIV+CSS进行标准网页设计。其实，你只要花几天时间，把这个思想装到自己的脑袋里，相信你也会很快就上手的，毕竟，CSS不是一种复杂的程序语言。废话少说，言归正传，我们还是开始进行我们的主要任务吧。

首先，我们来看一下我们要设计的导航页，这是一个非常简单的如图：




比较一下两种不同布局的文件大小，一种是用表格，一种是用Div+Css,两者比较如下：
    表格布局    Div+Css布局
文件    1.09KB    1.00KB
占用位置大小    4.00KB    4.00KB
代码    共34行(包括两行从psd里切割后生成的注释)    20行


用表格布局的代码如下:




用DIV+CSS布局的代码如下:





以上两种代码所呈现的设计界面是一样的，现在我们开始我们的第一步。
1．    首先我们在photoshop里面进行好页面的设计，同时做的页面的图片切割工作是必不可少的。
如图1:这就是在ps里面用快捷键k扎划分出来的导航页的切割图。当然，各人有各人的切割方法，操作步骤都是基本一样的，当你切割好后，点击“文件”菜单下的“存储为Web所用格式”就可以根据你的要求输出一个首页来了。





2．    如果你不想使用DIV+CSS布局，那么恭喜你，你的首页已经基本出来了，你可以直接打开由PS自动生成的web页面，就可以看到这个导航页了，代码就是上面所示的table布局代码.可是，我们现在要用DIV+Css，所以我们只能接着往下走啦，哈哈.
3．    分析由PS所切出来的这个页面，我们可以很清楚的看到，由于这页面布局比较简单，而且所切割的图片都是以大块大块为主，只用中间的几个链接可能需要花一小点点功夫，其它的图片是很好处理的了。
4．    先做好前期准备，新建一个文件夹newindex，里面分别再建Css,flash,images三个文件夹，这样我们就可以把对应的元素放在对应的地方，方便我们的管理和维护。如图:




接下来，我们就要真正的开工了！
我们的工具是Dreamweaver8就够了，新建一个站点命名为newindex(新建站点的知识就不用说了吧),Ctrl+N新建一个html页面(index2.htm),再来一个快捷键SHIFT+F11调出DW8中的CSS面板，我们的DIV+CSS工作就从这里开始了。
首先，我们定义一下body的大致属性，先让其上下左右的边距均为0，这样就可以使网页处于“顶上”状态，我们点击CSS面板右下方的的右数第三个键，就会出现CSS选择器了，如图





（因为我这是en版的DW,如果你的是china版的话，我想上面这三个选择就不用再说明了）我们选择第二项标签，在tag的下拉菜单中选中body这项，点击OK后，DW就会要求你新建一个CSS文件，我们把这CSS放在我们先前做好的CSS文件夹里头,然后定义一下文件名就OK了.如图,





保存之后,就会出现CSS选择器这个东东了,同时在index2.htm里面的head部分会出现一代码:

:

这里话的作用就是链接到我们的CSS文件了,让我们所定义的CSS发挥作用.

这里就是选择你所定义的BODY标签的CSS属性了,如果你对CSS比较了解,你可以直接在CSS.CSS这个文件里面直接书写,当然,如果你对CSS一知半解或半桶水的话,用DW这个选择器是最好不过的了.看,我一下子就搞掂了BODY的属性(英文版尚且如此,中文版对尔等人来说更不在话下了).





相对应的CSS.CSS文件中,也就会多了几行东东.
body {
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
简单说明一下:对index2.html这页面的body,其字体大小为12px;字体没有任何修饰,同时其页边距与其页间距均设为0

(如果想对CSS中标签相关属性更多的了解,搞一相苏沈小雨的CSS2.0后册是少不了的啦.)

有了第一步,接下来的工作就比较简单了,从PS里面的PSD图（或者从table布局里面），我们可以分析到这个导航页的长和宽是width:1000px; height:619;我们在表格布局里面通常是把所有的元素都放在一个大table里面,但在DIV里面是很忌讳这样的.根据我们的切割图可知,网页最上的是一个大图片(这就是偷懒的作用了),左边一个大图片,右边由一行链接跟下面又是一块大图片组成的,那么我们可以大致的把其分为四块DIV,一块是头部的DIV,一块是左边的DIV,一块的导航条的DIV,还有一块就是导航条下面的一块DIV,如图:



根据分析,我们就能开始进行CSS的设计了,
对头部的DIV,我们同样可以通过(Shift+F11)调出CSS面板,进行相关的CSS属性的设定,假定我们将此DIV的ID命名为head,则通过如下操作进行设定(其实用手写也不是很慢D)
步骤1:




步骤2:




步骤3:




点击确定之后,我们可以在css.css文件里面看到以下代码:

#head
{width:1000px; height:279px; background-image:url(../images/index_01.jpg); background-repeat:no-repeat;
}

说明一下:在以ID为head的这个DIV中,其宽度为1000px,高度为279px,背景图片是位于images文件夹下的index_01.jpg同时,背景不重复.这个高度跟宽度,实际上是根据背景图片的长和宽来定义的.float设为left是指该DIV是向左浮动的.

有了上页的第一个DIV的出现,我们就可以如法炮制出左边的DIV跟下边的DIV啦!这个过程我就不说了,只要你按照#head的做法去做就可以写出#left跟#menubelow这两个DIV,当然,你也可以在CSS.CSS这个文件下直接书写,所得的代码就会跟下面的是一样的了.
#left
{width:448px; height:340px; background-image:url(../images/index_02.jpg); background-repeat:no-repeat; float:left;}
#menubelow
{height:237px; width:552px; float:left; background-image:url(../images/index_08.jpg); background-repeat:no-repeat;}


现在就只剩下中间这块导航没做了,我们知道,如果将这几个图片跟上面一做成背景的话,就无法产生链接了,所以我们只能通过用这个标签来实现我们的目的,由于这几张导航的图片之间没有间隙,我们就可以把其间距跟边距都设为0.我们把这块也建一个以ID为piclink的DIV,这个DIV的宽度是以导航条中的5块小图地宽度之和为宽度(101*4+148)=552px,高度则是与其一致为103px,这样我们就又得到了个新的DIV
#piclink
{width:552px; height:103px; float:left; padding:0; margin:0; border:0; background-color:#FFFFFF;}

而由于这个Picink的DIV里面,我们主要是用来插入导航条图片的,尽管五张图片长宽均不一样,但我们为了要使插入图片后相互之间不能有间隙,我们就可以设定其间距与边距均为0,同时,把其边框设定为0,我们就可以得到在piclink这个Div下的标签,我们对其作了以下CSS的规则:
#piclink img
{border:0; padding:0; margin:0;float:left;}
同理,为了使导航条在链接时不出现边框,我们可以定义其在a:link下,边框为0

#piclink a:link
{border:0;}

其它的#piclink a:visited ,#piclink a:hover之类的也就可以同样定义了


这样,我们对整个页面的CSS就差不多搞完了,现在查看一下CSS.css文件,是不是又多了几行东东?

body {
    font-size: 12px;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
#head
{width:1000px; height:279px; background-image:url(../images/index_01.jpg); background-repeat:no-repeat;
}
#left
{width:448px; height:340px; background-image:url(../images/index_02.jpg); background-repeat:no-repeat; float:left;}
#piclink
{width:552px; height:103px; float:left; padding:0; margin:0; border:0; background-color:#FFFFFF;}
#piclink img
{border:0; padding:0; margin:0;float:left;}
#piclink a:link
{border:0;}
#menubelow
{height:237px; width:552px; float:left; background-image:url(../images/index_08.jpg); background-repeat:no-repeat;}

CSS也写完了,我们现在回到index2.html这个页面,我们只要在中把DIV写进去就OK了!
首先是






简单分析一下:
都是通过模式来规划的,由于所有的布局都在CSS.CSS里面设定好了,因此相对于表格来讲,这里的代码少了N多啦.其实这里主要就是在#piclink处插入了几个链接,要不整个页面的主体就只有4个构成了,哈哈,感觉是不是很爽??

由上面一步一步可以知道,DIV+CSS其实也不是想像中的很难,只是大家习惯了用table,一来就是table,没有主动考虑到DIV,个人认为,如果你用多了DIV+CSS,你就很容易感觉到他的好处所在了,在制作页面的效率上,一般的DIV+CSS页面制作所花的时间不会比Table多多少的.哈哈,说是说了这么多东东,不知大家有没看懂呢????希望大家多多指教.
本文所提及到的几个文件就是德仔工作室的导航页,如果你有需要的话,你可以自己去下载另存为啦………
下载地址:http://www.dezai.cn/ 点击另存为就可以的啦[em02]


文中若有不正之处，欢迎指教，谢谢!

同时提供Flash版下载地址：




点击此处下载本教程

上一篇: 可能是最后一个asp程序
下一篇: 德仔工作室web技术电子期刊第五期(2006.4)
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: