很多网店老板都想把自己的网店好好的装修一翻,可到底怎么装修呢?简单说,就是代码贴入到宝贝描述中就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" 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:此属性是样式的意思,可以把一切的属性都包括在里边,所被包括的属性=符号必须换成:符号,两个属性要用;符号隔开,举个例子吧!
<div style="width:100px;height:100px;font-family:"宋体";font-size:30px;color:#ff000;">商网找找 http://www.swzz.net</div>
font-family:"宋体";这是字体的意思,表示这层中的文字是用宋体来显示的,font-size:30px;文字大小的意思!
这里style属性是设置在DIV中,同样也可以设置在TABLE,FONT,TR,TD标签中!style功能比较强大,如果有兴趣的可以去下载个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="width:100px;height:100px;font-family:"宋体";font-size:12px;color:#ff000">商网找找 http://www.swzz.net</span></td>
</tr>
<tr>
<td style="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="width:100px;height:100px;font-family:"宋体";font-size:12px;
color:#ff000">商网找找 http://www.swzz.net</span></td>
</tr>
<tr>
<td
style="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,也就是单元格的背景设为白色,就可以了!
以上就是网页的布局方法,布局也就是把一个表格中再填表格,一直达到自己理想的布局界面!
还记得最前边要下载的两个软件吗?在布局网页前,我们要用图片处理工具,在软件中画出自己想要的页面,再切片出来,再布局页面!
本以为可能只写一点点的吧,没想到写完看了,这么一大堆,新手持了头晕了?呵呵!其实里边内容并不多,都是实用代码!
这毕竟是一个专门职业,所以要做好,还是要下功夫的!