小菜鸟实战 Dreamweaver 制作简单代码模板

茶小小好郁闷 ，发了三次，不知道这次能不能发得上，都说我的帖子太长太长了~~~。哇卡卡~~《 太好了，终于发上去了..第一次发帖，大家哪里不明白的可以跟帖提问。我会为大家一一解答的。淘宝女装皇冠店我建立了一个交流群：869406922 （我们是菜鸟，所以需要学习） 现在看到很多的人在教怎么使用Dreamweaver制作模板，让我这个小菜鸟心也痒痒的，用自己刚刚学到不久的知识，来分享给大家。其实，学会了用Dreamweaver的简单操作后，一些基本的模板，就可以举一反三了。教程有一点长，我把每一步都写了下来，所以请耐心的看完。如果有不懂的或者哪里有疑问的，请跟帖，我会一一回答的。本教程综合下来教会你用以下功能：A、制做模板B、添加背景C、制做代码使用工具：Macromedia Dreamweaver 8 打开Dreamweaver 8,出现以下对话框。在创建新项目这里点：HTML直接新建了一个页面。模式选择布局模式。为什么我要选择这个模式，呆会在下面的教程中会给大家解释的。点击布局模式，弹出上面这个对话框，直接点确认。进入到下一步。现在给大家介绍两个工具，在制作模板的时候非常给力呀~~ 布局单元格，用来绘制一个一个模板分割的。好了，下面，我来给大家讲解一个非常简单的排版模板。 选择布局表格，鼠标会变成一个+字，在页面划出一个区域出来。我这里制作的是在宝贝描述里的模板，所以，我要求的尺寸是：740*220如图：它会出现这样的一个区域。它的作用就像是一个框架，让我们在一个框架里.费话不多说，继续写，继续上图给大家。自己手划出来的尺寸肯定是不对的，这样我们该怎么去调节它呢？看图解：就是上面这个属性栏了，我选择的宽是固定的，所以，调节一下尺寸把它改成:740*220.好了，现在开始做模板了。选择绘制布局单元格工具 ，沿着刚才做好的布局表格内侧划出一个间隙来，我这里做的是160*160的，尺寸可以自定。如图： 尺寸不对，把鼠标移到单元格上，旁边绿色的线变红了轻轻左键一点。会出现这种情况：再返到最底下的属性栏，修改尺寸。我这里把它修改成160*160.如上图属性，在最下边。依照之前的方法，把单元表格均匀排满。如图：其实，在做完第一个单元格后，会出现一个白色的小虚线，这个是参考线，大家在做单元格的时候，不用再担心怎么去对齐，直接照对参考线就OK再点击绘制布局单元格，在之前的模板下边增加一个小板。用来添加文字滴~~~如图： 绿色的那个就是我刚刚添加的小单元格，我这里尺寸为:160*30,在下面再添加一个。如图： 尺寸：160*30继续，把其它三个也做好。在这里教大家一个小诀窍：增加新的布局单元格的时候，想要多增加几个，按住Ctrl键不放就可以了。好了，现在已经排好了。如图: 这样算已经完成了一半了。 大家记得在制作的过程中按保存键，以免出现意外情况丢失数据。好了，小茶叶要在这里给大家罗嗦一下，为什么我要做160*160的这个模板了。不知道大家注意到了没有，在首面显示的那个宝贝图片尺寸，是160*160 、 120*120 、 180*180、 220*220这三种尺寸的。我现在做的这个模板适用于拓展版and拓展版以下的版本。好了，话不多说，开始制作了。A、在自己的店铺选择好图片，复制地址。（在图片上右击—属性—选择URL地址--复制）B、返回Dreamweaver 8 点击工具栏的插入--图像，会出现一个对话框。如图：在相对于这里选择:站点根目录 Url这里输入刚才复制的地址，记得，把原来的前缀去掉。点击确定。这个时候，又会出现一个对话框：在第一个栏里出现了我们做好的第一张图片,如图 继续做好第二个，第三个。图片已经放进去了，现在该有文字，价格和超链接了。别急，咱们一步一步的来。点击第一张图片，然后看最下边的属性：这里的源文件，指的是图片地址。淘宝商城我这里直接引用了我本地文件夹里的图片。在链接这里，插入你想放进去的链接。按下回车。如下图，已经做好的链接：依照这个方法，把其它三个链接做好。如果对下图这里空白的不习惯的话可以加个颜色：未上色前：上色后：上色的方法：按住Ctrl键，左键点一下单元格，然后在最下边属性栏： 背景颜色这里选择。再来一张看看总体效果的：