网店装修教程 三招教你搞定网店装修-塑造漂亮网店

发布时间:2014/6/25 11:59:33

对于辅助网页编辑来说,Fireworks将是最大的功臣。借助于 Macromedia Fireworks 8,您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver 和 Macromedia Flash 共同构成的集成工作流程可以让您创建并优化图像,同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具,无需学习代码即可创建具有专业品质的网页图形和动画,如变换图像和弹出菜单等。

三招教你搞定网店装修-塑造漂亮网店。很多顾客买家在光顾网店的时候,能被一些漂亮美观的网店吸引,从而买下自己想要的东西,那么我们这些做网店店长的,怎样才能把自己的网店装修的更漂亮呢?

很多网店老板都想把自己的网店好好的装修一翻,可到底怎么装修呢?简单说,就是代码贴入到宝贝描述中就OK!很多IT行外人,一听到代码,就不知如何下手了!在这里,我就来介绍一些常用的语法吧! 
首先:要准备两样工具,Dreamweaver(IT界简称为DW,是设计网页界面用的),Fireworks或Photoshop(IT界简称为FW和PS,这两个都是图片处理工具,前者简单易用,后者复杂高效) 下载地址http://www.swzz.net
附:网店装修按网站建设的专业术语来说是做美工,美工的首要条件就是审美观要好,其次才是软件工具应用!在这里推荐一个网页学习网站给大家,有不懂的可以加入群问问 学网页网http://www.xwangye.com
其次:申请一个无防盗链接相册或静态空间(如果有防盗链,你链接不了图片),以后装修的图片和宝贝图片都要放在这里边! 
现在讲讲基本常用的一些HTML标签吧: 
装修就是要用HTML代码来装修,HTML代码不区分大小写,这里就不介绍HTML了含义了,越多大家越晕,下边有些也不介绍了吧,有兴趣的可以百度下!
注:HTML标签都是用"<>"包括后成双成对出现的(如:<div></div>或<table></table>),结尾标签要加个"/",在这里,我就写一个了!
在学习以下内容时,你可以在桌面上新建一个写字板或记事本,把记事本后缀名改成swzz.htm,用鼠标右键点击该文件,选择打开方式,选择写字板或记事本,然后把以下所要调试的内容复制到里边,保存(快捷键Ctrl+S).双击要开此swzz.htm就可以看到效果了! 
一、布局标签(层显示和表格显示) 
1.DIV:层的意思,与table类似,个人觉得在易趣中实用度还行,淘宝中不好使用!(例:<div>商网找找 http://www.swzz.net</div>就是一个层,层没有任何属性,在网页中除了显示文字,不会有层的效果!不急,后边教!) 
2.TABLE:表格的意思,与DIV类似,在网店装修比DIV好用,推荐使用! 
3.TR:表格中行的意思,一对表示一行! 
4.TD:表格中单元格的意思,一对表示一格! 
注:TABLE,TR,TD三个是合起来用,缺一不可!(例:<table><tr><td>商网找找 http://www.swzz.net</td></tr></table>) 
二、文本标签 
5.H:这个是标题字体格式,如H1至H6,字从大到小!(例:<H1>商网找找 http://www.swzz.net</H1>或<H6>商网找找 http://www.swzz.net</H6>) 
6.HR:这个是水平线的意思,也就是在网页里显示一横线,此标签不用成对出现,一个即可!(如:<HR>) 
7.BR:这个是换行的意思,此标签不用成对出现,一个即可!(如:商网找找<br>http://www.swzz.net) 
8.P:这个也是换行的意思,与BR的区别在于,BR换行上行与下行中间无空隙,P换行上行与下行中间会多出一条的空隙,此标签不用成对出现,一个即可!(如:商网找找<p>http://www.swzz.net) 
9.B:表示文本加粗(如:<B>商网找找 http://www.swzz.net</B>) 
10.U:表示文本下划线(如:<U>商网找找 http://www.swzz.net</U>) 
11.I:表示文本斜体(如:<I>商网找找 http://www.swzz.net</I>) 
12.S:表示文本删除线,即在文字中间加一横线(如:<S>商网找找 http://www.swzz.net</S>) 
13.BIG:表示大字体显示文本(如:<BIG>商网找找 http://www.swzz.net</BIG>) 
14.SMALL:表示小字体显示文本(如:<SMALL>商网找找 http://www.swzz.net</SMALL>) 
15.SUP:表示文本为上标(如:<SUP>商网找找 http://www.swzz.net</SUP>) 
16.SUB:表示文本为上标(如:<SUB>商网找找 http://www.swzz.net</SUB>) 
17. 表示空格,在HTML中,直接按空白键可以设出一个空格,如果多个空格,HTML只能读取一个! 
三、其它 
1.IMG:表示显示图片,此标签不用成对出现,一个即可(如:<img src="图片地址" alt="商网找找 http://www.swzz.net">,alt属性值表示注释) 
2.BGSOUND:添加背景音乐,此标签不用成对出现,一个即可(如:<bgsound src="音乐地址" loop="循环次数">,loop为-1时,无条件循环播放) 
3.:表示超链接(如:<a href="http://www.swzz.net" target="_blank" data-title="商网找找">商网找找 http://www.swzz.net</a>,href属性值为要链接的地址,target属性值为在新窗口打开(_parent为在当前窗口打开),title属性值为注释文字) 
4.移动文字:<marquee direction=down>商网找找 http://www.swzz.net</marquee>(解说:此为从上往下移动,只要把direction属性值变掉就可以做出不同的移动,up从下往上,right从左往右,left从右往左,alternate从左到右来回走动,把文字换成图片,也就成了图片左右移动了) 
现在讲讲基本常用的一些属性吧: 
注:属性是添加在HTML标签中的,两个参数用空格隔开,属性值用""括起来!(如:<div width="100" height="100">) 
1.WIDTH:表示宽度的意思,很实用,实用范围很广(如:width="100") 
2.HEIGHT:表示高度的意思,很实用,实用范围很广(如:height="100") 
3.BACKGROUND:设置背景图片(如:background="图片地址") 
4.BGCOLOR:表示背景颜色的意思(如:<td bgcolor="#ff0000">,#ff0000表示红色,此色植可以开DW或FW或PS来查,很方便!) 
5.COLOR:表示文字颜色的意思(如:<font color="#000000">商网找找 http://www.swzz.net</font>) 
6.ALIGN:表示对齐的意思(如:<td align="right">,right右,center中,left左) 
部分解说: 
一、设置文字属性:文字属性不用设置在表格或层的标签中,需设置在特定<font>或<span>标签中,此标签必须成对出现,举个例子吧! 
<font color="#FF0000" size="+1" face="宋体">商网找找 http://www.swzz.net</font> 
<SPAN>用法与<FONT>类似,但<SPAN>一般不用于做文字方面属性,而是用来装STYLE属性; 
color为颜色属性,size为字体大小,face为字体 
二、style-mip:此属性是样式的意思,可以把一切的属性都包括在里边,所被包括的属性=符号必须换成:符号,两个属性要用;符号隔开,举个例子吧! 
<div style-mip="width:100px;height:100px;font-family:"宋体";font-size:30px;color:#ff000;">商网找找 http://www.swzz.net</div> 
font-family:"宋体";这是字体的意思,表示这层中的文字是用宋体来显示的,font-size:30px;文字大小的意思! 
这里style-mip属性是设置在DIV中,同样也可以设置在TABLE,FONT,TR,TD标签中!style-mip功能比较强大,如果有兴趣的可以去下载个CSS手册看看! 
三、HTML默认的一些属性: 
1.默认对齐为"居左"; 
2.默认的背景颜色为"白色"; 
3.默认的字体为"宋体"; 
4.默认的大小为"12像素";
举两个表格例子吧! 
1.简单表格 
  <table width="100" height="100" border="1" cellspacing="2" cellpadding="3">
    <tr>
      <td><font color="#ff0000" size="+1" face="宋体">商网找找 http://www.swzz.net</font></td>
      <td><span style-mip="width:100px;height:100px;font-family:"宋体";font-size:12px;color:#ff000">商网找找 http://www.swzz.net</span></td>
    </tr>
    <tr>
      <td style-mip="width:100px;height:100px;font-family:"宋体";font-size:12px;color:#ff000" colspan="2">商网找找 http://www.swzz.net</td>
    </tr>
  </table>
 
说明: border="1"边框为1,cellspacing="2"间距为2,cellpadding="3"填充为3,colspan="2"表示此行表格两列合并成一列,也就是一个单元格式 
2.细边表格 
  <table width="100" height="100" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
    <tr>
      <td bgcolor="#FFFFFF"><font color="#ff0000" size="+1" face="宋体">商网找找 http://www.swzz.net</font></td>
      <td bgcolor="#FFFFFF"><span style-mip="width:100px;height:100px;font-family:"宋体";font-size:12px;color:#ff000">商网找找 http://www.swzz.net</span></td>
    </tr>
    <tr>
      <td style-mip="width:100px;height:100px;font-family:"宋体";font-size:12px;color:#ff000" colspan="2" bgcolor="#FFFFFF">商网找找 http://www.swzz.net</td>
    </tr>
  </table>
 
说明:把TABLE的边框设置成0,也就是没有边框,背景设为黑色,把每个TD,也就是单元格的背景设为白色,就可以了! 
以上就是网页的布局方法,布局也就是把一个表格中再填表格,一直达到自己理想的布局界面!
还记得最前边要下载的两个软件吗?在布局网页前,我们要用图片处理工具,在软件中画出自己想要的页面,再切片出来,再布局页面! 
本以为可能只写一点点的吧,没想到写完看了,这么一大堆,新手持了头晕了?呵呵!其实里边内容并不多,都是实用代码!
这毕竟是一个专门职业,所以要做好,还是要下功夫的!
其实有很多东西大家可以在搜索引擎上搜索,相信答案很快就会有的,比如照片要怎么处理,你就搜索什么!


 

上一篇:如何在宝贝描述里面插入产品的展示照片

下一篇:网店掌柜教你如何装修网店

推荐货源
微商厂家直供货源
推荐资讯
最新资讯
分类栏目
新手开店 开店经验 淘宝推广
进货技巧 淘宝故事 网店装修
图片处理 网购技巧 行业新闻
创业项目 淘宝考试 品牌排行
微信开店 品牌百科 微商货源