手把手教用你DI和CSS建个人网站-那些你不知道的技巧

嘿嘿嘿嘿嘿嘿~~~~~

我又粗现了，是不是被大大的惊喜了一个，哎哟我去那满脸愤怒的表情是神马情况，咳咳咳我知道我知道，太久没有献上我宝贵的节操了是不是。

啊，嗯，闲话少叙，各位五湖四海三山五岳的好汉和姑娘们，你们真的没被我惊喜到吗？啊哈啊哈啊哈哈哈哈~~~啊~~~别打脸~~~

嘛，上次咱们折腾出了这么一个奇葩的东西，是不是感觉很惨，嗯，感觉很正确。不过没关系啦，咱们这次就让她丰满起来。下面的童鞋有木有跟我一起想歪的，有木有有木有。

上次咱们建立了。。。嘛。。。等我数一下。。。啊是9个区域，有可能童鞋们建了678个，不过不要在意这些细节，按照自己的设计来就是了。

在切图前，首先得说一下其实这个功夫也有分级的，低级的部分叫做神速一刀切，高级的部分叫做雕花神手，其间难度不可同日而语，自然学成后功力也天差地别，望各位江湖好友慎重选择。

是不是特有盟主风范，呵呵呵，呵呵呵呵呵

OK，先从低级别的讲起，这个简单内容少嘎嘣脆。

先贴个我的设计稿。

我们可以看到，区域一一对应，设计的时候我们应该要想到，做成网页的时候要怎么去分区域实现，而且能够保证设计质量的情况下能够尽量简单的实现出来。嘛，当然对于新手来说现在说这个貌似然并卵，不过这很重要，请牢记，这也是为神马设计师要学习这些鬼代码的原因。

好的，现在打开你的设计稿，我们来神速一刀切。

在PS中，选择切片工具，和剪切图标在一个组里

用切片工具切出上面分出的那些区域，注意切片与切片之间不能相交，也不能有间隙，仔细点调整好。切片的时候大小不合适可以随时调整大小，方法和使用变形工具类似。

切片完成之后想调整还可以用切片选择工具重新选择任意切片然后调整，这句话像不像在念经。。。

然后存储为web所用格式，快捷键就不说了，你懂的。格式选择JPG，尺寸不要动，点存储，文件名先随便，格式选仅限图像，默认设置，所有切片。

这里其实有个小支线任务，格式可以选择HTML和图像，PS会帮你生成一个网页，不过那个太LOW了，咱大侠们不屑一顾，嗯，不管你们信不信反正我信了。

保存后打开你存的文件夹，PS有生成一个images文件夹，表改这位夹兄的名字哟，实际上网站保存图片的文件夹都叫这个名字。打开images文件夹，我们可以看到切好的图。

然后分别给它们命名，简单点可以1234，复杂点就是为了SEO和可维护性考虑，命名得语义化，例如LOGO，就命名首页-头部-logo，home_top_logo。这样的话在其他地方用的另外尺寸的logo就不会和这个logo搞混。

命名好后，把images文件夹整个复制到网页文件所在位置，这点很重要别忘记哟。

然后我们回到DW，在HTML中，有两种方法插入图片，先让我们试试第一种，直接在页面插入。

看到那个img标签了吗，那就是直接插入一张图片的意思，格式反正你记住就这么写就行，src后面的引号里的是图片文件的相对位置，这里的意思就是与网页文件同级的文件夹images里的1.jpg。相对位置的理解得练习一段时间，不过不难放心。

好了现在我们插入了第一张切图，在DW里F12预览看看。。。

卧槽，这什么鬼，为毛和其他的区域重叠了，为毛我缩小浏览器的时候出现了这么无节操的情况。

嘿嘿，原因我们先不深究，这里主要是想让大家了解一下这样是不行滴。

我们得用第二种插入图片的方法-在CSS中作为背景插入。总是插入插入什么的我都有点脸红了呢，哎卧槽，我为什么要脸红？？？

额，说CSS，首先回顾下上次的代码，额好吧上面回顾过了。

这个意思就是包住并且别盖住，懂不懂不，包住，但是里面那事儿变大了你也得跟着变大，不能盖住人家。

啊，不能乱想，继续写代码。

看到没有看到没有，比游戏还diao，每个角色可以佩戴多个称号，只要中间用空格分开就行，太淫荡了有木有，太不要脸了有木有。

好嘞，现在我们再来F12一下，当然你在之前预览的页面刷新也行。

粗来了粗来了，网页粗来了，噢也。

额，有些奇怪的东西在，哈哈，是我们上节课加的边框，还有每个区域的名字。把这些东东删掉再看，喔，醉了，这是我第一个网页，就好比月球上那个小脚印一样，意义非凡啊。

让我们再看一下全部的代码吧

是不是特有成就感，是不是感觉到了春天~~~

嘛，孩子，这只是低级功法而已，表太激动，实际上真正的网页要比这个复杂很多倍，哦呵呵呵呵，表怪我打击你，太容易满足容易被江湖淘汰哟~~~

　　非常感谢您读完蓝港网络的这篇文章："手把手教用你DI和CSS建个人网站-那些你不知道的技巧"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。