|
怎么用DW的制作淘宝模版代码
其实，学Dreamweaver(以下简称DW) 很容易，要看你有没有用心去学了。对于每一件事都要用心的去学，用心的去做，你会把它做好的。在中国，有着很多的俗语，如“慢工出细活”“磨刀不误砍柴工”等等。
很多人都喜欢用IR(ImageReady)把图片转换成代码，这确实是一个比较简单的方法。因为很多PS软件都自带IR功能。但是，本人觉得，DW既然是一个专业制作网页的工具，就有它的可取之处。从刚刚开始摸索，不懂，看教程，视屏，然后终于摸出一点小门道后，终于给我摸出一点点小信心了。现在借着心中的这一把火，传递给大家了。
教程是我一步一步的做下来，截图完成的。也希望大家能好好看完这个帖子。
本教程综合下来教会你用以下功能： A、制做简单模板 B、制作网页代码 C、熟悉DW的基本功能
1.首先如何制作模板，打开DW, 点击HTML建立新文档
2.我们要选择布局模式。在工具栏点击常用--出现下拉菜单选择布局。整个版面变成三种选择：标准、扩展、布局。再次点击布局，会出现一个对话框。直接点击确认。我们会进入到一个布局模式。如下图二解。
3.现在，给大家介绍两个在制作模板时经常会用到的两个工具：布局表格和绘制布局单元格。把它们运用好了，在以后的模板制作中会省力很多，如图示：
4.我们来选择布局表格，给模板做出一个轮廓，点击布局表格鼠标会变成一个“+”字，紧挨着左上角，点住鼠标左键，往右下角方向拉出一个区域出来。这个区域就是我们做的模板的原形了。我这里制作的是在宝贝描述里的模板，所以，我要求的尺寸是：740*220。但是人工拉出来的数据不准确，我们就要使用属性来调节尺寸了。如下图解。
5.图二，使用属性面板，调整数据
6.选择绘制布局单元格工具，鼠标也变成"+"这个符号后，沿着刚才做好的外框左上角轻击左键按住不放 ， 往右下角方向拉出一个小方格出来，松掉左键。这时在绘制好的布局表格里出现了一个白色的区域。这就是我们要用到的模板了，它可以插入图片、文字。做好后也可以直接在上面修改图片文字(图片需要按照当时设计的尺寸做好，不然不会美观的)，当然，用鼠标绘制出来的尺寸不是很精准的，需要用到我之前有介绍到最下边那个属性面板了。
7.按照刚才介绍的方法，把整个布局排满。
8.点击绘制布局单元格，在之前绘制的单元格下面再添加一个单元格，尺寸：160*30，我将用它来做宝贝的文字描述。
再次点击绘制面局单元格，继续绘制出一个尺寸为160*30的单元格，紧挨着上面的小单元格。
9.用上面的方法，把其它三个版面也排好..在这里告诉大家一个小窍门，熟悉电脑的人都知道Shift+Ctrl键的常用功能：全选，点选。 我这里要介绍的就是CTRL键，想要绘制多个单元格，还要一个一个的去点，很麻烦。所以，在这里，选择绘制单元格工具后，按住Ctrl键，就能连续的绘制多个单元格了。效果图：
10、注意：小编在这里使用的是本地文件的图片，要使用到网络里必须要上传到网络上。所以我的尺寸是160*160，可以直接在宝贝图片上右击--属性--URL地址复制就可以了。
这里的图片需要的是在主页上显示的。一般的尺寸是120*120、160*160、220*220，选择160*160(主页上一排四个的就是这个尺寸。)
11.在自己的店铺选择好图片，复制地址。(在图片上右击—属性—选择URL地址--复制)返回Dreamweaver 8 点击工具栏的插入--图像，会出现一个对话框。在相对于这里选择：站点根目录，会弹出一个对话框，直接点击确定。URL这里把刚才复制的地址Ctrl+V进去。
12.然后，在第一个单元格里，出现了第一张图片; 用这个方法继续把其它三个做好。
13.图片已经放进去了，现在该有文字，价格和超链接了。别急，咱们一步一步的来。左键点击第一张图片，然后看最下边的属性： 这里的源文件，指的是图片地址。我这里直接引用了我本地文件夹里的图片
14.在链接这里，插入你想放进去的链接。按下回车。
15.依照这个方法，把其它三个链接做好。
如果对下图这里空白的不习惯的话可以加个颜色：
未上色前。
16.上色后。
17.上色的方法：按住Ctrl键，左键点一下单元格，然后在最下边属性栏： 背景颜色这里选择。
|
