dw网页淘宝设计模板.docx

dw网页淘宝设计模板 　　篇一：Dreamweaver 在淘宝美工课中的应用 　　泉州新东方 叶生方老师整理  　　Dreamweaver 在淘宝美工课中的应用  　　一、店铺装修（网页技术）  　　专业型课程分两个阶段：1、店铺装修基础阶段，2、HTML+CSS行内样式部分。  　　（一）实用型阶段——店铺装修基础  　　1、认识旺铺及类型、模板、模块、布局；旺铺XX 标准版 拓展版 XX新版  　　2、PS切片导出WEB代码  　　3、DW表格排版  　　4、分类导航设计——PS切片、DW表格、热区三种技术综合运用  　　5、旺铺宽屏效果制作（页面背景、店头自定义、自定义大图三部分组成）  　　6、图片背景、旺旺代码、收藏代码、滚动代码  　　7、识别哪些效果属于模块功能，那些效果可以自定义实现，常用的促销工具（限时打折、满就送、团购宝、搭配减价、会员管理等）  　　8、淘宝首页整体风格设计、“宝贝描详情页”风格设计  　　9、HTML常用标注介绍TABLE、TR、TD、IMG、A等用功能  　　（二）专业提升阶段——HTML+CSS行内样式  　　10、DW使用的注意要点以及认识TABLE TR TD FONT DIV SPAN H1 IMG A P LI UL marquee等常用标注。  　　11、表格结构分析，学会手写简单的网页代码  　　12、认识CSS盒子模型  　　13、了解CSS排版基本方法——实际表格相似导航效果  　　14、运用CSS设计宝贝详情页版式、利用P、IMG标注的CSS属性设置版式  　　15、CSS美化表格  　　16、了解淘宝widget库的作用与意义——悬浮旺旺、宝贝放大镜等等特效 　　篇二：用DW做出漂亮的模板 　　如何用DW做出漂亮的促销表格模板  　　很多的卖家在逛淘宝店时会发现很多的店铺装修很美观，如打折模块和团购模块，自己想去问店主怎么制作，但是有几个淘宝卖家会告诉你呢，不过不要着急，下面让开淘网为你详解一番吧。今天我们讲的是如何用DREAMWEAVER做促销表格。  　　准备工作：DW CS5版本、PS CS5版本（DW全称Dreamweaver，PS全称Photo Shop，CS5为软件的版本，不同的版本所拥有的的功能也不同，建议学习本帖的同学还是下载相同版本的软件，如果您遇到问题，我才能很好的帮您解决）、纸笔等。  　　第一步：前期筹划：在制作表格促销模块时，我们得先考虑好表格的大小，以用来链接大小合适的图片，所以此时【纸笔】必不可少。首先，通栏的尺寸为950，所以表格的宽度定为950，具体的高度还是按照您自己要设置的大小来确定。我选择的表格大小是950*580，具体表格分布为5行7列。先弄出一个大概图给大家看看：  　　图中的白色部位占据一行或一列，彩色模块为图像占位符，用来链接图片的。  　　第二步：打开DW设计软件：新建一个HTML页面，快捷键为Ctrl+N，如图  　　布局选择【无】，点击右下角的【创建】，这样一个html页面就新建成功了。  　　因为是刚建好，没有添加任何的内容，所以此时的操作界面是白色的，如上图。  　　接着，我们点击【插入】菜单，这是可以看到【表格】项目，点击，在表格中输入【5行，7列，表格宽度950，边框粗细0，单元格边框、间距0，标题选择“无”】，如下图 　　这样，一个5行7列的表格就只做而成了，大家先看看效果图 　　自动生成的表格是不居中的，所以选择右下角的【对齐：居中对齐】，这样表格就会呈现在页面的中央。大家这时是不是还觉得表格这么小，怎样将图片插入进去啊？呵呵，酸儒先傻笑一下??这样当然不能直接插图啊，首先要确定好各个单元格的大小，然后再将相应的图片插入，大家注意力集中啦，往下看：  　　在前面的大概图中，我已经标出了相应单元格大小了，左边的小方块为240*260的像素大小，右边的长方形为390*540的像素大小，其余白色部分的宽度或高度都是20px，这个只是教程中的大小，具体数据大小各位卖家可以自己设置的。切勿照葫芦画瓢，更多的还是需要自己多揣摩！  　　又有人会问，单元格的大小设置到底该怎么设置呢？各位亲，请别急，酸儒我先去喝口水！  　　首先，将鼠标定位在一个单元格中，此时在下面的【属性】栏中，会出现相应的属性，我先示范左边方格大小的设置，其他的设置雷同。  　　在下面的【属性】栏中输入【宽：240】、【高：260】，呈现出的效果如上图红色部分（红色是因为我在【背景颜色】中选择了颜色，方便大家查看区别，并无实际用处）。  　　按照，我的方法，将所有的表格大小确定好后，接着要做的工作就是将相应的促销图片放入表格中。这时