很多網店老板都想把自己的網店好好的裝修一翻,可到底怎么裝修呢?簡單說,就是代碼貼入到寶貝描述中就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,也就是單元格的背景設為白色,就可以了!
以上就是網頁的布局方法,布局也就是把一個表格中再填表格,一直達到自己理想的布局界面!
還記得最前邊要下載的兩個軟件嗎?在布局網頁前,我們要用圖片處理工具,在軟件中畫出自己想要的頁面,再切片出來,再布局頁面!
本以為可能只寫一點點的吧,沒想到寫完看了,這么一大堆,新手持了頭暈了?呵呵!其實里邊內容并不多,都是實用代碼!
這畢竟是一個專門職業,所以要做好,還是要下功夫的!
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 網店裝修三步曲
