爱华网淘宝网店铺装修宝典——附录2 店铺装修常用代码
附录2 店铺装修常用代码
淘宝店铺中，描述模板、公告栏、促销区等区域都可以编写HTML代码。因此，对于HTML代码的了解和掌握非常重要，笔者根据店铺装修中的常用功能，收集了以下代码标签，可以快速掌握HTML代码标签的使用。
HTML基础知识
HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”，和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。一个HTML文件的后缀名是.htm或者是.html。
在淘宝店铺中描述模板、公告栏、促销区等编写的源文件就是由HTML编写的网页代码。推荐使用Dreamweaver进行代码编辑，因为它是所见即所得的编辑HTML的优秀软件。
1．HTML文件基本架构
<HTML> 文件开始
<HEAD> 标头区开始
<TITLE>...</TITLE> 标题区
</HEAD> 标头区结束
<BODY> 本文区开始
文本区内容
</BODY> 本文区结束
</HTML> 文件结束
其中：
<HTML> 网页文件格式。
<HEAD> 标头区：记录文件基本资料，如作者、编写时间等信息。
<TITLE> 标题区：文件标题须使用在标头区内，可以在浏览器最上面看到标题。
<BODY> 本文区：文件资料，即在浏览器上看到的网站内容，也是要复制、粘贴到店铺装修中的源文件。
2．HTML元素
HTML元素是用来标记文本，表示文本的内容。比如body，p，title就是HTML元素。
HTML元素用Tag表示，Tag以“<”开始，以“>”结束。
Tag通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结尾的就叫做Closing Tag。
目前HTML的Tag不区分大小写的。比如，<HTML>和<html>其实是相同的。
3．HTML元素的属性
HTML元素可以拥有属性，属性可以扩展HTML元素的能力。
比如可以使用一个bgcolor属性，使得页面的背景色成为红色，像这样：
<body bgcolor="red">
再比如，可以使用border这个属性，将一个表格设成一个无边框的表格：
<table border="0">
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
基本代码
1．文本代码
<font color="#666666" size="4">零界点设计</font>
说明：设定字体的大小，分绝对SIZE，如 <font size=4>和相对size如：<font size=+1>。
设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度（00暗~FF亮）。 #RRGGBB所代表的是红、绿、蓝三原色，每一色由两位十六进制的数值表示（即十进制0~255）。十六进制：0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
2．图片代码
<img src="图片地址" alt="图片说明" align=top border=1>
说明：先把图片上传到网络相册中，将图片地址拷贝下来，替换“图片地址”文字。
3．链接代码
<a href="链接地址">这里可以是文字或图片</a>
说明：将文字或图片的要指向的链接地址粘贴至“链接地址”处。
4．背景音乐代码
<bgsound src="音乐地址" loop="-1"></bgsound>
说明：loop循环，背景音乐播放次数；src文件或URL地址（可为WAV、MIDI格式）
5．滚动条代码
<marquee bgcolor=red behavior=alternate direction=left scrollamout=10 scrolldelay=100 width=100px>零界点设计</marquee>
说明：behavior设定卷动方式，其中alternate为交替来回卷动；scroll为卷动（默认设置）；slide为滑动。
Bgcolor是设置背景颜色；
Direction是设定卷动方向；
Height是高度；
Loop设置循环，卷动次数（默认为无限循环）；
Scrollamount设定卷动距离；
Scrolldelay设定卷动时间；
Truespeed设定卷动速度；
Width是宽度。
常用源代码
1．分时问候
<script language="JavaScript">
<!--
var mess1="";
document.write("<center><font color='#0000FF' size=4><b>")
day = new Date( )
hr = day.getHours( )
if (( hr >= 0 ) && (hr <= 4 ))
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
mess1="深夜了，注意身体，该休息了！"
if (( hr >= 4 ) && (hr < 7))
mess1="清晨好，这麽早就上网呀？！ "
if (( hr >= 7 ) && (hr < 12))
mess1="早上好，一天之际在于晨，又是美好的一天！"
if (( hr >= 12) && (hr <= 13))
mess1="该吃午饭啦！有什麽好吃的？"
if (( hr >= 13) && (hr <= 17))
mess1="外面的天气很热吧?！心静自然凉！ "
if (( hr >= 17) && (hr <= 18))
mess1="太阳落山了！快看看夕阳吧！"
if ((hr >= 18) && (hr <= 19))
mess1="吃过晚饭了吗？"
if ((hr >= 19) && (hr <= 23))
mess1="一天过的可真快！今天过的好吗？"
document.write(mess1)
document.write("</b></font></center>")
//--->
</script>
说明：将代码放至<body>…</body>之间，其中：
if (( hr >= 0 ) && (hr <= 4 ))
mess1="深夜了，注意身体，该休息了！"
在0-4点间，出现“深夜了，注意身体，该休息了！”字样，依此类推。
2．图片淡入淡出
<script language="JavaScript">
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
child.filters.alpha.opacity=0 + b;
setTimeout("fade()",100);
}
</script>
<img src="img/1.jpg" name="child" border=0
alt="Image" style="filter:alpha(opacity=0)">
说明：将代码放至<body>…</body>之间要显示该图片的位置，其中：
<img src=img/1.jpg name=child style="filter:alpha(opacity=0) ">
表示插入一个文件名为“1.jpg”的图片，设置其透明度为0，根据插入的图片路径进行修改。
3．闪烁文字
<script language=javascript>
<!--
function initArray() {
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var ctext = "看看我，我会变色";
var speed = 1000;
var x = 0;
var color = new initArray(
"red",
"blue",
"green",
"black",
"yellow",
"pink");
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.write('<div id="c"><center>'+ctext+'</center></div>');
}
function chcolor()
{
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.all.c.style.color = color[x];
}
(x < color.length-1) ? x++ : x = 0;
}
setInterval("chcolor()",1000);
-->
</script>
说明：将代码放至<body>…</body>之间要显示闪烁文字的位置，其中： var ctext = "看看我，我会变色";
输入要显示的闪烁文字。
4．图形跟随鼠标
<script language="JavaScript">
var newtop=0
var newleft=0
if (navigator.appVersion.indexOf("MSIE") != -1) {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"') eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth') eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight') eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width }
else
{
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
newleft=document.body.scrollLeft + event.clientX
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft')
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval('curElement'+styleSwitch+'.pixelTop=newtop')
}
document.onmousemove = doMouseMove;
</script>
<script language="javascript">
if (navigator.appVersion.indexOf("MSIE") != -1) {
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="images/rabbit.gif"
STYLE="position:absolute;TOP:0pt;LEFT:0pt;Z-INDEX:2;visibility:hidden;">')
document.write('</div>')
}
</script>
说明：将代码放至<body>…</body>之间，效果与动画鼠标类似，该代码是在鼠标指针旁边跟随一张图片，其中：
document.write('<img ID=iit src="images/rabbit.gif"
rabbit.gif为上传后的图形名称
5．滚动显示图片
<script language="JavaScript1.2">
<!--
var scrollerwidth=64
var Scrollerheight=64
var scrollerbgcolor='white'
var pausebetweenimages=3000
var slideimages=new Array()
slideimages[0]='<a href=#; img src=img/logo1.gif; border=0;'
slideimages[1]='<a href=#; img src=img/logo2.gif; border=0;'
slideimages[2]='<a href=#; img src=img/logo3.gif; border=0;'
slideimages[3]='<a href=#; img src=img/logo4.gif; border=0;'
slideimages[4]='<a href=#; img src=img/logo5.gif; border=0;'
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages) return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
//-->
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor};>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<p>
<script language="JavaScript1.2">
<!--
if (document.all){
document.writeln('<span id="main2"
style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0
'+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
人民邮电出版社 www.ptpress.com.cn
淘宝网店铺装修宝典——附录2 店铺装修常用代码
}
//-->
</script>
说明：将代码放至<body>…</body>之间要滚动显示图片的位置，其中：
slideimages[0]='<a href=#; img src=img/logo1.gif; border=0;'
slideimages[1]='<a href=#; img src=img/logo2.gif; border=0;'
slideimages[2]='<a href=#; img src=img/logo3.gif; border=0;'
slideimages[3]='<a href=#; img src=img/logo4.gif; border=0;'
slideimages[4]='<a href=#; img src=img/logo5.gif; border=0;'
logo1.gif、logo2.gif、logo3.gif、logo4.gif、logo5.gif为滚动显示的5张图片。该滚动显示图片的效果与滚动字幕略有不同，每显示一张图片会略有停顿，方便浏览。
6．随机产生的图片
<script language="JavaScript">
a = 3
var pp = Math.random();
var foot = Math.round(pp * (a-1))+1;
function create() {
this.src = ''
this.border = ''
this.alt = ''
}
b = new Array()
for(var i=1; i<=a; i++) { b[i] = new create() }
b[1].src = "img/4.jpg"
b[1].border = "0"
b[1].alt = ""
b[2].src = "img/2.jpg"
b[2].border = "0"
b[2].alt = ""
b[3].src = "img/3.jpg"
b[3].border = "0"
b[3].alt = ""
var pic = "";
pic += '<img src='+b[foot].src+' border="0"'+' alt='+b[foot].alt+'>';
document.write(pic)
</script>
说明：将代码放至<body>…</body>之间要显示图片的位置，每次刷新网页都会随机显示不同的图片，其中：2.jpg、3.jpg、4.jpg为该实例中显示的图片名称，请更换为你需要显示的图片名称。
人民邮电出版社 www.ptpress.com.cn
