很多網(wǎng)店老板都想把自己的網(wǎng)店好好的裝修一翻,可到底怎么裝修呢?簡單說,就是代碼貼入到寶貝描述中就OK!很多IT行外人,一聽到代碼,就不知如何下手了!在這里,我就來介紹一些常用的語法吧!
首先:要準(zhǔn)備兩樣工具,Dreamweaver(IT界簡稱為DW,是設(shè)計網(wǎng)頁界面用的),Fireworks或Photoshop(IT界簡稱為FW和PS,這兩個都是圖片處理工具,前者簡單易用,后者復(fù)雜高效) 下載地址http://www.swzz.net
附:網(wǎng)店裝修按網(wǎng)站建設(shè)的專業(yè)術(shù)語來說是做美工,美工的首要條件就是審美觀要好,其次才是軟件工具應(yīng)用!在這里推薦一個網(wǎng)頁學(xué)習(xí)網(wǎng)站給大家,有不懂的可以加入群問問 學(xué)網(wǎng)頁網(wǎng)http://www.xwangye.com
其次:申請一個無防盜鏈接相冊或靜態(tài)空間(如果有防盜鏈,你鏈接不了圖片),以后裝修的圖片和寶貝圖片都要放在這里邊!
現(xiàn)在講講基本常用的一些HTML標(biāo)簽吧:
裝修就是要用HTML代碼來裝修,HTML代碼不區(qū)分大小寫,這里就不介紹HTML了含義了,越多大家越暈,下邊有些也不介紹了吧,有興趣的可以百度下!
注:HTML標(biāo)簽都是用"<>"包括后成雙成對出現(xiàn)的(如:<div></div>或<table></table>),結(jié)尾標(biāo)簽要加個"/",在這里,我就寫一個了!
在學(xué)習(xí)以下內(nèi)容時,你可以在桌面上新建一個寫字板或記事本,把記事本后綴名改成swzz.htm,用鼠標(biāo)右鍵點擊該文件,選擇打開方式,選擇寫字板或記事本,然后把以下所要調(diào)試的內(nèi)容復(fù)制到里邊,保存(快捷鍵Ctrl+S).雙擊要開此swzz.htm就可以看到效果了!
一、布局標(biāo)簽(層顯示和表格顯示)
1.DIV:層的意思,與table類似,個人覺得在易趣中實用度還行,淘寶中不好使用!(例:<div>商網(wǎng)找找http://www.swzz.net</div>就是一個層,層沒有任何屬性,在網(wǎng)頁中除了顯示文字,不會有層的效果!不急,后邊教!)
2.TABLE:表格的意思,與DIV類似,在網(wǎng)店裝修比DIV好用,推薦使用!
3.TR:表格中行的意思,一對表示一行!
4.TD:表格中單元格的意思,一對表示一格!
注:TABLE,TR,TD三個是合起來用,缺一不可!(例:<table><tr><td>商網(wǎng)找找 http://www.swzz.net</td></tr></table>)
二、文本標(biāo)簽
5.H:這個是標(biāo)題字體格式,如H1至H6,字從大到小!(例:<H1>商網(wǎng)找找 http://www.swzz.net</H1>或<H6>商網(wǎng)找找http://www.swzz.net</H6>)
6.HR:這個是水平線的意思,也就是在網(wǎng)頁里顯示一橫線,此標(biāo)簽不用成對出現(xiàn),一個即可!(如:<HR>)
7.BR:這個是換行的意思,此標(biāo)簽不用成對出現(xiàn),一個即可!(如:商網(wǎng)找找<br>http://www.swzz.net)
8.P:這個也是換行的意思,與BR的區(qū)別在于,BR換行上行與下行中間無空隙,P換行上行與下行中間會多出一條的空隙,此標(biāo)簽不用成對出現(xiàn),一個即可!(如:商網(wǎng)找找<p>http://www.swzz.net)
9.B:表示文本加粗(如:<B>商網(wǎng)找找 http://www.swzz.net</B>)
10.U:表示文本下劃線(如:<U>商網(wǎng)找找 http://www.swzz.net</U>)
11.I:表示文本斜體(如:<I>商網(wǎng)找找 http://www.swzz.net</I>)
12.S:表示文本刪除線,即在文字中間加一橫線(如:<S>商網(wǎng)找找 http://www.swzz.net</S>)
13.BIG:表示大字體顯示文本(如:<BIG>商網(wǎng)找找 http://www.swzz.net</BIG>)
14.SMALL:表示小字體顯示文本(如:<SMALL>商網(wǎng)找找 http://www.swzz.net</SMALL>)
15.SUP:表示文本為上標(biāo)(如:<SUP>商網(wǎng)找找 http://www.swzz.net</SUP>)
16.SUB:表示文本為上標(biāo)(如:<SUB>商網(wǎng)找找 http://www.swzz.net</SUB>)
17. 表示空格,在HTML中,直接按空白鍵可以設(shè)出一個空格,如果多個空格,HTML只能讀取一個!
三、其它
1.IMG:表示顯示圖片,此標(biāo)簽不用成對出現(xiàn),一個即可(如:<img src="圖片地址" alt=商網(wǎng)找找 http://www.swzz.net>,alt屬性值表示注釋)
2.BGSOUND:添加背景音樂,此標(biāo)簽不用成對出現(xiàn),一個即可(如:<bgsound src="音樂地址" loop="循環(huán)次數(shù)">,loop為-1時,無條件循環(huán)播放)
3.:表示超鏈接(如:<a href="http://www.swzz.net" target="_blank" title="商網(wǎng)找找">商網(wǎng)找找http://www.swzz.net</a>,href屬性值為要鏈接的地址,target屬性值為在新窗口打開(_parent為在當(dāng)前窗口打開),title屬性值為注釋文字)
4.移動文字:<marquee direction=down>商網(wǎng)找找 http://www.swzz.net</marquee>(解說:此為從上往下移動,只要把direction屬性值變掉就可以做出不同的移動,up從下往上,right從左往右,left從右往左,alternate從左到右來回走動,把文字換成圖片,也就成了圖片左右移動了)
現(xiàn)在講講基本常用的一些屬性吧:
注:屬性是添加在HTML標(biāo)簽中的,兩個參數(shù)用空格隔開,屬性值用""括起來!(如:<div width="100" height="100">)
1.WIDTH:表示寬度的意思,很實用,實用范圍很廣(如:width="100")
2.HEIGHT:表示高度的意思,很實用,實用范圍很廣(如:height="100")
3.BACKGROUND:設(shè)置背景圖片(如:background="圖片地址")
4.BGCOLOR:表示背景顏色的意思(如:<td bgcolor="#ff0000">,#ff0000表示紅色,此色植可以開DW或FW或PS來查,很方便!)
5.COLOR:表示文字顏色的意思(如:<font color="#000000">商網(wǎng)找找 http://www.swzz.net</font>)
6.ALIGN:表示對齊的意思(如:<td align="right">,right右,center中,left左)
部分解說:
一、設(shè)置文字屬性:文字屬性不用設(shè)置在表格或?qū)拥臉?biāo)簽中,需設(shè)置在特定<font>或<span>標(biāo)簽中,此標(biāo)簽必須成對出現(xiàn),舉個例子吧!
<font color="#FF0000" size="+1" face="宋體">商網(wǎng)找找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;">商網(wǎng)找找 http://www.swzz.net</div>
font-family:"宋體";這是字體的意思,表示這層中的文字是用宋體來顯示的,font-size:30px;文字大小的意思!
這里style屬性是設(shè)置在DIV中,同樣也可以設(shè)置在TABLE,FONT,TR,TD標(biāo)簽中!style功能比較強(qiáng)大,如果有興趣的可以去下載個CSS手冊看看!
三、HTML默認(rèn)的一些屬性:
1.默認(rèn)對齊為"居左";
2.默認(rèn)的背景顏色為"白色";
3.默認(rèn)的字體為"宋體";
4.默認(rèn)的大小為"12像素";
舉兩個表格例子吧!
1.簡單表格
<table width="100" height="100" border="1" cellspacing="2" cellpadding="3">
<tr>
<td><font color="#ff0000" size="+1" face="宋體">商網(wǎng)找找 http://www.swzz.net</font></td>
<td><span style="width:100px;height:100px;font-family:"宋體";font-size:12px;color:#ff000">商網(wǎng)找找 http://www.swzz.net</span></td>
</tr>
<tr>
<td style="width:100px;height:100px;font-family:"宋體";font-size:12px;color:#ff000" colspan="2">商網(wǎng)找找 http://www.swzz.net</td>
</tr>
</table>
說明: border="1"邊框為1,cellspacing="2"間距為2,cellpadding="3"填充為3,colspan="2"表示此行表格兩列合并成一列,也就是一個單元格式
2.細(xì)邊表格
<table width="100" height="100" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"><font color="#ff0000" size="+1" face="宋體">商網(wǎng)找找http://www.swzz.net</font></td>
<td bgcolor="#FFFFFF"><span style="width:100px;height:100px;font-family:"宋體";font-size:12px;color:#ff000">商網(wǎng)找找 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">商網(wǎng)找找 http://www.swzz.net</td>
</tr>
</table>
說明:把TABLE的邊框設(shè)置成0,也就是沒有邊框,背景設(shè)為黑色,把每個TD,也就是單元格的背景設(shè)為白色,就可以了!
以上就是網(wǎng)頁的布局方法,布局也就是把一個表格中再填表格,一直達(dá)到自己理想的布局界面!
還記得最前邊要下載的兩個軟件嗎?在布局網(wǎng)頁前,我們要用圖片處理工具,在軟件中畫出自己想要的頁面,再切片出來,再布局頁面!
本以為可能只寫一點點的吧,沒想到寫完看了,這么一大堆,新手持了頭暈了?呵呵!其實里邊內(nèi)容并不多,都是實用代碼!
這畢竟是一個專門職業(yè),所以要做好,還是要下功夫的!
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
本文來源： 網(wǎng)店裝修三步曲
