这篇文章讲述了一个静态网站从设计到重建再到架设的全过程，也讲述了一个蛋疼设计师惠丹腾的日常生活。嗯，注意后一句就好了。。。(丝路教育微信微信官方账号:silujy)
嘿嘿嘿~ ~ ~ ~
我又得到了一个粗略的图片，这是一个大惊喜吗？哦，我生气的脸是什么情况？咳咳，我知道，我知道，我太久没有献出我宝贵的节操了吧？
啊，好了，不要八卦了，五湖四海的少男少女们，你们真的对我一点都不惊讶吗？啊哈啊哈哈哈哈~ ~ ~啊~ ~别打脸~ ~ ~
好了，好了，经过这么一段时间的休息，让我们的领导带你去八卦一下东邪DIV和杜CSS之间的猥琐事情吧。快点，关上门，把狗放了。哦，不，让DW去吧。。。
嗯，上次我们扔出这么美好的东西，不觉得很惨吗？嗯，感觉不错。不过没关系，这次还是让她丰满一点吧。以下童鞋是木头做的，我觉得用歪了，木头，木头。
我们上次建立了它。。。好吧。。。等我数数。。。啊，是九个区域。有可能童鞋已经建了678了，但是不要在意这些细节。按照自己的设计就好了。
根据前面提到的区域，我们必须将设计好的东西放入这些div中。俗话说，剪图也是真的。江湖人称之为最高武功秘笈“葵花宝典”。割得越深，就越强烈。这只是一个错别字来表明你想要多少。
切图之前，首先我得说，其实这功夫是分等级的。下半部分叫“快一刀切”，上半部分叫“雕神之手”。这期间难度不一样，自然学会后技巧也大不一样。希望各位江湖朋友慎重选择。
是独特的领袖风范，呵呵呵，呵呵呵？
好了，先从低级说起。这个简单的内容不那么脆。
先贴我的设计稿。
我们可以看到，地区之间是一一对应的。设计的时候要想好制作一个网页的时候如何分区域实现，在保证设计质量的情况下，尽可能简单的实现。嗯，当然，对于新手来说，这个现在看起来是绝配，但是很重要。请记住，这也是神马设计师要学习这些鬼码的原因。
好了，现在打开你的设计稿，我们来“快速一刀切”。
在PS中，选择切片工具，它与剪切图标在同一组。
用切片工具把上面分开的区域切掉。注意切片之间不能有交叉或缝隙，仔细调整。切片时，如果大小不合适，可以随时调整大小。该方法类似于使用变形工具。
如果要在切片后进行调整，也可以使用切片选择工具重新选择任何切片，然后进行调整。这句话听起来像是念叨吗？。。
然后以web使用的格式存储，快捷键就不说了，你懂的。选择JPG格式，不要动尺寸，点击保存，文件名先可选，格式选择仅限图片。默认设置是所有切片。
其实这里有个小副业。格式可以选择HTML和图片。PS会帮你生成一个网页，但是那个太低了，所以我们的英雄不在乎。好吧，不管你信不信，反正我信。
保存后，打开保存的文件夹。PS创建了一个i***ges文件夹，把这个文件夹的名字改成了兄弟。其实网站保存图片的文件夹就叫这个名字。打开图像文件夹，我们可以看到剪切的图像。
然后分别命名。简单点可以1234，复杂点是为了SEO和可维护性。如果名字是语义性的，比如LOGO，命名home-head -logo和home_top_logo。这样其他地方用的其他尺寸的logo就不会和这个logo混淆了。
命名后，请务必将“图像”文件夹拷贝到网页文件的位置。别忘了。
那我们回到DW。在HTML中，插入图片有两种方式。我们先试试第一个，直接插入页面。
看到那个img标签了吗，那就是直接插入一张图片的意思，格式反正你记住就这么写就行，src后面的引号里的是图片文件的相对位置，这里的意思就是与网页文件同级的文件夹i***ges里的1.jpg。相对位置的理解得练习一段时间，不过不难放心。看到那个img标签了吗？意思是直接插入图片。反正你只要记住格式，这样写就可以了。src后面的引号表示图片文件的相对位置，表示与网页文件同级的文件夹i***ges中的1.jpg。理解相对位置需要一定的练习，但是放心并不难。
除了相对位置，还有绝对位置。你可以看到百度一张图片的右键属性里有一长串网址。只需***并替换相对地址。但是，在网站普遍不用这个的时候，先不要深究。
好，现在我们插入第一个切割，并在DW F12中预览。。。
***，什么鬼？为什么会和其他区域重叠？为什么我在缩小浏览器的时候会出现这种不守规矩的情况？
嘿嘿，原因就不深究了。这里主要是让大家知道这是不可能的。
我们不得不使用插入图片的第二种方法——在CSS中作为背景插入。每次插东西都会有点脸红。哎，我为什么要脸红？？？
呃说到CSS，先回顾一下上一段代码，呃，好吧，上面已经回顾过了。
之前，我们为每个名为box的DIV添加了相同的名称，并为该名称赋予了一些属性。呵呵呵，为什么我会想到游戏里的标题？带属性的名字，艾玛，很好解释。然后，首先，我们要在名称框中添加另一个属性。至于为什么，呵呵，高级篇自有妙用。
意思是包起来，不要盖起来，明白吗？不是，包起来，但是大了就得大，不能盖人。
啊，别想了。继续写代码。
好了，现在我们要给每个DIV一个唯一的名字。
根据DIV的名字或者序列号什么的写这些新的属性。我的是9个分区，所以我为它们写了9个名称和属性。这里为了简单起见，用bg1的形式写。如果是工作中的项目，一定不能这么写。先说代码语义，具体知识等支出线。
这里属性的意思应该是大体理解的。一、背景:图像地址水平对齐，垂直对齐，然后宽度100%。高度应该跟随当前插入的图像。因为是背景图，所以DIV，也就是容器本身，不会因为背景图而自适应。
然后给每个DIV起这些光荣的名字。
你看到了吗？比游戏还刁。每个角色可以戴多个头衔，只要中间用空隔开。太***太***了。
好，现在我们再做F12。当然，您可以刷新之前预览的页面。
粗糙，粗糙，粗糙的网页，哦，是的。
嗯，里面有些奇怪的东西。哈哈，是我们上节课加的边界，还有每个区域的名字。把这些东西删掉再读一遍。哦，我喝醉了。这是我的第一个网页，就像月球上的那个小脚印。意义重大。
让我们再看一遍所有的代码。
有没有特别的成就感，或者说有没有春天的感觉~ ~ ~
嗯，我的孩子，这只是低级的**。太***了。实际上，真实的网页要比这个复杂很多倍。呵呵呵，打你是我的错。太容易满足，容易被江湖淘汰~ ~ ~
本文来自抚琴绘长歌投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/494979.html
微信扫一扫 
