本文讲述了一个静态网站的设计到重构到架设全部流程，还讲述了一个蛋疼设计师的诙dan谐teng日常，嘛，表在意后面这一句就是了。。。（丝路教育微信公众号：silujy）
嘿嘿嘿嘿嘿嘿~~~~~
我又粗现了，是不是被大大的惊喜了一个，哎哟我去那满脸愤怒的表情是神马情况，咳咳咳我知道我知道，太久没有献上我宝贵的节操了是不是。
嘛，上次咱们折腾出了这么一个奇葩的东西，是不是感觉很惨，嗯，感觉很正确。不过没关系啦，咱们这次就让她“丰满”起来。下面的童鞋有木有跟我一起想歪的，有木有有木有。
OK，先从低级别的讲起，这个简单内容少嘎嘣脆。
先贴个我的设计稿。
好的，现在打开你的设计稿，我们来“神速一刀切”。
在PS中，选择“切片工具”，和剪切图标在一个组里
切片完成之后想调整还可以用切片选择工具重新选择任意切片然后调整，这句话像不像在念经。。。
然后存储为web所用格式，快捷键就不说了，你懂的。格式选择JPG，尺寸不要动，点存储，文件名先随便，格式选仅限图像，默认设置，所有切片。
然后分别给它们命名，简单点可以1234，复杂点就是为了SEO和可维护性考虑，命名得语义化，例如LOGO，就命名首页-头部-logo，home_top_logo。这样的话在其他地方用的另外尺寸的logo就不会和这个logo搞混。
命名好后，把images文件夹整个复制到网页文件所在位置，这点很重要别忘记哟。
然后我们回到DW，在HTML中，有两种方法插入图片，先让我们试试第一种，直接在页面插入。
好了现在我们插入了第一张切图，在DW里F12预览看看。。。
卧槽，这什么鬼，为毛和其他的区域重叠了，为毛我缩小浏览器的时候出现了这么无节操的情况。
嘿嘿，原因我们先不深究，这里主要是想让大家了解一下这样是不行滴。
我们得用第二种插入图片的方法-在CSS中作为背景插入。总是插入插入什么的我都有点脸红了呢，哎卧槽，我为什么要脸红？？？
额，说CSS，首先回顾下上次的代码，额好吧上面回顾过了。
之前我们给每个DIV都加了同一个名字叫做box并且赋予了这个名字一些属性，呵呵呵我咋想起游戏里的称号了呢，带属性的名字，艾玛这个解释好。那接下来首先呢咱们得给box这个名字再加一个属性，至于为神马，嘿嘿，高级篇中自有妙用。
按照DIV的名字或者按照序号什么的，写出这几个新的属性，我的是9个分区，就写了9个名字并给它们写上属性，这里为了简单就用bg1这样的形式写了，如果是工作中的项目的话肯定不能这样写的，要代码语义化，具体的知识等开支线剧情来讲吧。
这里属性的意思大家应该大致明白，首先是背景：图片地址 水平对齐 垂直对齐，然后是宽度百分百，高度要跟着当前插入的图片走，因为是背景图片，DIV也就是容器本身是不会因为背景图片而自适应的。
然后把这些荣耀的名字赐予每一个DIV吧
好嘞，现在我们再来F12一下，当然你在之前预览的页面刷新也行。
粗来了粗来了，网页粗来了，噢也。
额，有些奇怪的东西在，哈哈，是我们上节课加的边框，还有每个区域的名字。把这些东东删掉再看，喔，醉了，这是我第一个网页，就好比月球上那个小脚印一样，意义非凡啊。
让我们再看一下全部的代码吧
是不是特有成就感，是不是感觉到了春天~~~
嘛，孩子，这只是低级功法而已，表太激动，实际上真正的网页要比这个复杂很多倍，哦呵呵呵呵，表怪我打击你，太容易满足容易被江湖淘汰哟~~~
