dw网页淘宝设计模板.docx

dw网页淘宝设计模板篇一:Dreamweaver在淘宝美工课中的应用泉州新东方叶生方老师整理 Dreamweaver在淘宝美工课中的应用一、店铺装修(网页技术) 专业型课程分两个阶段:1、店铺装修基础阶段,2、HTML+CSS行内样式部分。(一)实用型阶段——店铺装修基础 1、认识旺铺及类型、模板、模块、布局;旺铺20XX标准版拓展版20XX新版 2、PS切片导出WEB代码 3、DW表格排版 4、分类导航设计——PS切片、DW表格、热区三种技术综合运用 5、旺铺宽屏效果制作(页面背景、店头自定义、自定义大图三部分组成) 6、图片背景、旺旺代码、收藏代码、滚动代码 7、识别哪些效果属于模块功能,那些效果可以自定义实现,常用的促销工具(限时打折、满就送、团购宝、搭配减价、会员管理等) 8、淘宝首页整体风格设计、“宝贝描详情页”风格设计 9、HTML常用标注介绍TABLE、TR、TD、IMG、A等用功能(二)专业提升阶段——HTML+CSS行内样式 10、DW使用的注意要点以及认识TABLETRTDFONTDIVSPANH1IMGAPLIULmarquee等常用标注。 11、表格结构分析,学会手写简单的网页代码 12、认识CSS盒子模型 13、了解CSS排版基本方法——实际表格相似导航效果 14、运用CSS设计宝贝详情页版式、利用P、IMG标注的CSS属性设置版式 15、CSS美化表格 16、了解淘宝widget库的作用与意义——悬浮旺旺、宝贝放大镜等等特效篇二:用DW做出漂亮的模板如何用DW做出漂亮的促销表格模板很多的卖家在逛淘宝店时会发现很多的店铺装修很美观,如打折模块和团购模块,自己想去问店主怎么制作,但是有几个淘宝卖家会告诉你呢,不过不要着急,下面让开淘网为你详解一番吧。今天我们讲的是如何用DREAMWEAVER做促销表格。准备工作:DWCS5版本、PSCS5版本(DW全称Dreamweaver,PS全称PhotoShop,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】,呈现出的效果如上图红色部分(红色是因为我在【背景颜色】中选择了颜色,方便大家查看区别,并无实际用处)。按照,我的方法,将所有的表格大小确定好后,接着要做的工作就是将相应的促销图片放入表格中。这时先不着急插入图片,而是先插入一个【图像占位符】,主要是为了大家以后可以再次利用这个模块。大家,还是先看到左上角的菜单栏【插入】,点击,选择【图像对象】→【图像占位符】,点击鼠标,出现如图对话框在【宽度】、【高度】中输入相应的尺寸大小,接着在【颜色】项目中添加上颜色,这个步骤的主要作用是为了区分各个单元格的图像占位符,如此一个图像占位符就做成了。接下来,将各个需要插入图像的单元格插入相应大小的图像占位符,写入