大家过年好,我是克克。看了大家的回帖,很多朋友都喜欢我们店的店铺介绍,也有很多朋友上门讨教,所谓“独乐乐不如众乐乐”嘛~~现在克克教大家怎样自己制作一个漂漂滴店面介绍。很简单的~~软件:Dreamweaver下载页面:http://www.skycn.com/soft/860.html(试用版)注册码在网上找一下就可以找到。下面
开始教程:
首先说一下思路吧,也就是定向。
制作之前,根据自己店铺的行当设定一下风格,比如我们卖MM饰品的,就要做一些女性化的可爱点的,再比如卖计算机相关的就IT点的,需要考虑的主要就是颜色搭配,在设定之前,除了自己的直观视觉,也找些朋友帮忙想想颜色,人多力量大嘛(好像和“力量”没什么关系……),再有就是找一些风格类似的成功站点分析一下,选一个最适合自己店面和商品的配色方案。稍后我会贴出一些配色方案的图片出来,请小小的期待一下……
骨头定了,现在该是想肉的时候了。惹眼的文字内容也是一个网站很关键的一点哦,我们店的都是我们可爱的美女妙妙想出来的。对于淘宝上的网页来说,无非就是介绍一下自己的店铺,介绍一些商品,当然别忘了介绍一下自己,让大家从店铺上认识你更多些。
接下来是准备图片素材,这个步骤呢,说来也简单,http://image.baidu.com输入关键字,可以找到很多图片,里面总有适合你使用的,现在也流行用插画图,很韩国风格的那种,像我们店铺下面的那个MM那种图片,还有就是矢量图,一般网上的是.ai格式的,要装AdobeIllustrator或者CorelDraw才可以使用,太平洋网http://www.pconline.com.cn上有提供打包下载。
准备工作完毕,下面可以开始动手做了。
动手制作,其实也简单。我眼中的网页就是表格套表格。表格?可能大家对这个词不陌生,对,就是我们常用的WORD的那种表格。但是HTML语言乱七八糟的写起来谈何容易!……这个时候才知道工具的重要性,就要借助编辑工具了。常见的网页编辑工具有MicrosoftFrontpage、MacromediaDreamweaver、AdobeGoLive等等,都是不需要懂HTML的所见即所得的编辑器,我这里主要讲一下简单的使用Dreamweaver来编辑网页。
Dreamweaver目前最高版本为MX2004,本人用的是MX6.0,有中文版,可以从官方网站上下载到试用版本,可以试用30天,当然借助搜索引挚可以
电子商务资料库56:#883'$%&"#.5找到很多注册版和破解版(不是鼓励大家用盗版哦……不过不用白不用),安装是传说中的一路回车,在此不详述。
程序界面如下图:
很像一个简单的记事本吧?现在在里面随心的打字,就会生成一张网页了。
新装好的DW会有很多个小栏,没用的我都关掉了,这两个是常用的,竖着的是工具栏,横着的是属性栏。
先说工具栏,把鼠标放到各个小按钮上,会有提示这个按键的作用,这些主要就是在网页中插入原素,例如点一下那个小树的图标,按提示选中一张图片,就把图片插入到网页中了。刚才说的最重要的表格……就是右行第二个像小窗子一样的按键,行列这种词对于熟悉WORD的应该很容易就搞定吧。
以上这些算是初识软件,对各个工具熟悉一小会就可以使用了。
制作之前先布局,就是画框框。比如淘宝店铺页,上面是页眉(头),下面是页脚(尾),中间是内容(肚子)分两大栏目,左边是导航,右边是商品。这些步骤可以拿起笔在纸上画画,把框架分部画出来,哪放文字哪放图片先规划好了。
下面我就以上面提的淘宝式布局来说一下一个简单淘宝店面的制作过程。
1、先插入一个表格,设表格宽度为760像素,其它设定按下图:
2、然后在横着的属性栏中的“对齐”选择“居中”,这个大表格就是头了。
用PHOTOSHOP等工具简单做一张包含店名的图,在上面的表格里,点插入图片按钮,选中图片,插入到表格。效果如下图:
3、把光标放到头表格的右边,不选中任何,然后重复步骤1,再建一个760像素宽的居中的表格,做为肚子。
由于我们中间部分要分成左右两块,所以将此表格设为2列,可以选中表格在下面的属性栏中设定,也可以把光标点到表格中间,点属性栏左下角的小按钮“拆分单元格”,原理方法和WORD表格一样。
4、左边的列我来放导航,导航字数不多,要窄一些,把光标点到左边框,在属性栏给该列设定一下宽度,我这里设做200,然后在“垂直”那里,设定为“顶端”,我想让左边的背景色为粉红,就在属性栏里的“背景颜色”
共3页: 上一页 1 [2] [3] 下一页
上一篇:店铺装修DIY系列第一课 下一篇:简单的水印添加方法~~