网页模版，个人网站建设入门知识(2)

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

<点图片看大图>

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

然后存储为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。相对位置的理解得练习一段时间，不过不难放心。

除了相对位置，还有绝对位置，你百度一张图片右键属性可以看到地址那里有一长串的网址，把那个复制下来替换掉相对地址就行，不过网站一般没有用到这个的时候，这个先不深究。