打开dreamweaver，新建网页并保存为“die.html”，选择【插入】【布局对象】【div标签】命令，打开“div标签”对话框。
二、输入div标签名称
1、在“ID”列表框中选择“top”
2、单击“新建css规则”按钮准备进行css规则定义
三、新建css规则
在打开的对话框中保持默认设置，单击“确定”按钮进行css规则新建。
四、设置属性
1、在“分类”列表框中选择“方框”选项。
2、在窗口右侧进行css规则定义，其中margin值的设置非常重要，“left”及“right”为auto，则可让div页面水平居中。
3、单击“确定”按钮。
五、创建div按钮
返回“插入div标签”，单对话框，单击“确定”按钮，完成div标签的插入
六、查看创建的div
将鼠标光标定位在div，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
1在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1"></div>
<div id="top2"></div>
<div id="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我截图的照片</div>
<div id="top2">
<div class="baidu"></div>
<div class="baidu"></div>
</div>
<div id="top3">
<div class="baidujingyan"></div>
<div class="baidujingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:#FF33FF}
#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}
#top1{background:#66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}
#top2{background:#FF00CCheight:400pxwidth:800px}
#top3{background:#FF9933height:550pxwidth:800px}
.baidu{background:#FF6666height:380pxwidth:380pxfloat:leftmargin:10px}
.baidujingyan{background:#FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我老婆的照片</div>
<div id="top2">
<div class="baidu"><img src="QQ图片20141212090452.jpg"></div>
<div class="baidu"><img src="QQ图片20141212090346.jpg"></div>
</div>
<div id="top3">
<div class="baidujingyan"><img src="QQ图片20141212090224.jpg"></div>
<div class="baidujingyan"><img src="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
哈？你window.open里面写的是啥玩意？你是想向QQ空间相册那样，点击一张小图就会弹出一个遮罩窗口，这个窗口负责显示大图呢？还是想直接点击那个图片的连接的就直接启动一个新的网页（你的新网页是想另外开启(_blank)呢？还是想在原来的窗口(_parent)打开呢？）？如果是第一种，那就用CSS样式，先把一个DIV窗口隐藏起来，但用户点击那张小图的时候，这时候再显示隐藏的那个DIV，查看大图，然后在显示大图的div里设计个返回或者关闭按钮，用户点击时，就自动隐藏了display:none；
如果是第二种开启一个新网页呢，那就更简单了。
<a href="大图./html" target="_parent"><img src="./images/tn/ballad_of_the_glonk_01_cover_320-tn.jpg" width="30" height="30" />
</a>
然后你再在新的网页窗口“大图./html”这个网页里显示你的大图就好了，
<img src="./images/tn/ballad_of_the_glonk_01_cover_320-tn.jpg" width="100" height="100" />
如果要返回，那最容易了，给个返回的按钮或者连接就可以了，比如：
<a href="home./html">返回主页</a>
