1.在上一节,我们学习了如何使用PS来创建一个页面.这一节我们就来学习如何把这个页面生成标准的html+css文件.(PS创建页面:http://www.ximumu.cn/post/166.html)

2.在写HTML之前我们来分析一下页面的结构,因为一个好的HTML结构,对写CSS样式来是很重要的.下图是页面的DIV图.

3.打开PSD文件,首先我们要把头部的背景用切片工具切出一个切片来,如图;

4.切片出LOGO,另存为WEB格式.

5.现在来切片标题.因为标题的文字字体不是标准的WEB字体,还有标题的阴影用CSS很难实现,所以要把标题切片出来.

6.把电脑也切片出来,在这之前要把电脑里的图像给关掉.

7.关闭侧栏的内层,只显示背景,然后使用选区工具选中大部分的区域,如图:

8.把上面的选中的区域复制并粘贴到一个新的文件里.使用变形工具扩大垂直.(为什么要做这一部,因为这样就可以有足够的空间来填写内容了.)

9.现在回到网页中,把下面的一部分也切片出来.

10.把按扭复制并粘贴到一个新的图层,在一步里我们要把按扭的渐变头尾调换一下,这样就可以一个动态的效果.

11.把图像导出来,并且保存gif格式.

12.把这些图像保存在一个文件夹内.

下面就是HTML+CSS部分

13.在DW中创建一个新的HTML文件.按照第2步写入div布局.然后在头部写入一个无序列表来做导航.

PS:如果觉得图片看不清楚,就点此下载大图并清晰图片.

14.填充无序列表的内容,并加一个"alt"来为描述列表项目.

15.现在开始填充内容.因为最后消息是两栏的形式.所以不要忘了添加一个class.

16.现在来写右侧边的代码.

17.好了,现在来为页脚添加代码,因为页脚分为三列,所以在页脚div容器里再加三个div.

18.现在来写CSS样式,首先清除下浏览器默认值.再添加字体大小,背影,和页面大小.

19.为头部添加CSS(木木:导航的设置请参考:如何使用CSS让菜单横向)

20.续继添加头部的CSS样式,在浏览器的效果如下:

21.下面是内容的CSS样式.为内容做一个左浮动的效果,消息栏目也是设置为左浮动.

22.现在可以添加右侧内容的CSS样式.在10步我们来做按扭效果,现在为按扭添加它的CSS样式.

23.下面是页脚的灰色地带的CSS样式.

24.续继为页脚添加CSS样式.

25.现在来为没有开启javascript用户来添加CSS样式.

26.完成HTML+CSS的代码.现在来为电脑图片添加幻灯片显示功能.添加javascript文件.

27.为javascript添加代码.

28.最终完成的效果.