（一）、學(xué)習(xí)風(fēng)格模板制作前你應(yīng)該懂得一些簡(jiǎn)單的html知識(shí)：
HTML是一種描述文檔結(jié)構(gòu)的標(biāo)記性語(yǔ)言，它使用一些約定的標(biāo)記對(duì)WWW上的各種信息進(jìn)行標(biāo)記。當(dāng)用戶(hù)瀏覽WWW信息時(shí)，瀏覽器會(huì)自動(dòng)解釋這些標(biāo)記的含義，并按照一定的格式在屏幕上顯示這些被標(biāo)記的文件。
1、通過(guò)HTML可以調(diào)用圖片、文字、聲音、動(dòng)畫(huà)、視頻等網(wǎng)頁(yè)元素
圖片調(diào)用： <IMG SRC="文件名">
文字格式： <FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>
聲頻： <EMBED SRC="音樂(lè)文件名" AUTOSTART=true>
視頻： <EMBED SRC="視頻文件名" AUTOSTART=true>
2、通過(guò)HTML可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)，最常見(jiàn)的就是網(wǎng)站首頁(yè)欄目調(diào)用后面的“moer...”。
頁(yè)面跳轉(zhuǎn)：〈A HREF="文件路徑/文件名"></A>
3、認(rèn)識(shí)html文檔：
html文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。通用格式如下：
<HTML>
<HEAD>
-------插入頭部信息
</HEAD>
<BODY>
-------插入html的文檔正文部分
</BODY>
</HTML>
其中<HTML>在最外層， 表示這對(duì)標(biāo)記間的內(nèi)容是HTML文 檔。我們還會(huì)看到一些Hompage省略<HTML>標(biāo)記，因?yàn)?html 或.htm 文件被Web瀏覽器默認(rèn)為是HTML文檔。<HEAD> 之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。<BODY> 標(biāo)記一般不省略， 表示正文內(nèi)容的開(kāi)始。
下面是一個(gè)最基本的超文本文檔的源代碼：
<HTML>
<HEAD>
<TITLE>HTML示例</TITLE>
</HEAD>
<BODY>
<CENTER>
<H3>歡迎光臨</H3>
<BR>
<HR>
<FONT SIZE=2>
感謝您的到來(lái)！
</FONT>
</CENTER>
</BODY>
</HTML>
4、認(rèn)識(shí)html文檔中的標(biāo)簽：
剛剛接觸html文檔，最大的障礙就是一些用“<”和“>”括起來(lái)的句子，我們稱(chēng)它為標(biāo)簽，它們是用來(lái)分割和標(biāo)記文本的元素。
A. 單標(biāo)簽
某些標(biāo)記稱(chēng)為“單標(biāo)簽”，因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類(lèi)標(biāo)記的語(yǔ)法是：< 標(biāo)簽名稱(chēng)>，最常用的單標(biāo)簽是<BR>, 它表示換行。
B.雙標(biāo)簽
另一類(lèi)標(biāo)記稱(chēng)為“雙標(biāo)簽”，它由“始標(biāo)簽”和“尾標(biāo)簽”兩部分構(gòu)成，必須成對(duì)使用，其中始標(biāo)簽告訴Web瀏覽器從此處開(kāi)始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一個(gè)斜杠（/）即成為尾標(biāo)記。這類(lèi)標(biāo)記的語(yǔ)法是：<標(biāo)簽> 內(nèi) 容</ 標(biāo)簽> 其中“內(nèi)容” 部分就是要被這對(duì)標(biāo)記施加作用的部分。例如你想突出對(duì)某段文字的顯示，就將此段文字放在一<EM> </EM>標(biāo)記中：<EM>動(dòng)易網(wǎng)絡(luò)</EM>
5、學(xué)會(huì)讀網(wǎng)頁(yè)源碼：
我們來(lái)看看動(dòng)易公司的網(wǎng)頁(yè)源碼(即htm語(yǔ)言,查看方法為先選中你要看的網(wǎng)頁(yè),右
鍵->查看源代碼,會(huì)得到一個(gè)用記事本打開(kāi)的文件,里面就是我們要學(xué)習(xí)的網(wǎng)頁(yè)源
代碼即htm語(yǔ)言了)
<html>
<head>
<title>動(dòng)易網(wǎng)絡(luò)科技 >> 首 頁(yè)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Keywords" content="動(dòng)易,動(dòng)易網(wǎng)絡(luò),動(dòng)易網(wǎng)絡(luò)科技有限公司,動(dòng)易網(wǎng)站管理系統(tǒng),動(dòng)力文章系統(tǒng),文章系統(tǒng),動(dòng)力,網(wǎng)站建設(shè),解決方案,網(wǎng)站,設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì)制作,軟件,幫助,系統(tǒng)幫助,動(dòng)易幫助,服務(wù)">
<meta name="description" content="動(dòng)易網(wǎng)絡(luò)"> <link href='/Skin/DefaultSkin.css' rel='stylesheet' type='text/css'> <script language='JavaScript' type='text/JavaScript' src='/js/menu.js'></script>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
window.open ("/skin/200508/2005II/20056index_ad3.html", "newwindow", "height=464, width=316, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
}
-->
</script>
<script src="/JS/prototype.js"></script>
<script src="/JS/checklogin.js"></script>
</head>
這里整體結(jié)構(gòu)的頭部信息,放置在<head>與</head>之中.
meta是用來(lái)在HTML文檔中模擬HTTP協(xié)議的響應(yīng)頭報(bào)文。meta 標(biāo)簽用于網(wǎng)頁(yè)的<head>與</head>中，meta 標(biāo)簽的用處很多。meta 的屬性有兩種：name和http-equiv。name屬性主要用于描述網(wǎng)頁(yè)，對(duì)應(yīng)于content（網(wǎng)頁(yè)內(nèi)容），以便于搜索引擎機(jī)器人查找、分類(lèi)（目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找meta值來(lái)給網(wǎng)頁(yè)分類(lèi)）。這其中最重要的是description（站點(diǎn)在搜索引擎上的描述）和keywords（分類(lèi)關(guān)鍵詞），所以應(yīng)該給每頁(yè)加一個(gè)meta值。比較常用的有以下幾個(gè)：
name 屬性
<meta name="Generator" contect="">用以說(shuō)明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="KEYWords" contect="">向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞；
<meta name="DEscription" contect="">告訴搜索引擎你的站點(diǎn)的主要內(nèi)容；
<meta name="Author" contect="你的姓名">告訴搜索引擎你的站點(diǎn)的制作的作者；
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
其中的屬性說(shuō)明如下：
設(shè)定為all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢(xún)；
設(shè)定為index：文件將被檢索；
設(shè)定為follow：頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為noindex：文件將不被檢索，但頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為nofollow：文件將不被檢索，頁(yè)面上的鏈接可以被查詢(xún)。
6、代碼中的鏈接使用:
在html語(yǔ)言中，最重要的就是對(duì)鏈接的使用,一般形式如:<a href=要指向的網(wǎng)址 target=_blank>要顯示的內(nèi)
容</a>，鏈接（也稱(chēng)超鏈接）是超文本的一個(gè)重要特征，它是指通過(guò)標(biāo)志符號(hào)的作用，并把不連續(xù)的兩段文字或兩個(gè)文件聯(lián)接起來(lái)。鏈接是構(gòu)起網(wǎng)富網(wǎng)絡(luò)世界的紐帶：
A、鏈接文件的使用標(biāo)志：
要建立一個(gè)鏈接，必須具備兩個(gè)條件：
1：確認(rèn)被鏈接的文件名稱(chēng)URL
2：在文件中確定鏈接
HTML文件的鏈接標(biāo)志是：<A>……</A>
在<A>中除了標(biāo)記名“A”外還包括其他擴(kuò)展信息，這些擴(kuò)展信息稱(chēng)為屬性。
HREF是鏈接中一個(gè)最常用的屬性，該屬性用來(lái)指出所要鏈接文件的名稱(chēng)或URL。其
結(jié)構(gòu)形式為：
<A HREF=“被鏈接的文件名”>高亮顯示的文本</A>
我們看這個(gè)的代碼：<a href="html2.htm" target="mainFrame">
這是我們剛才點(diǎn)擊從動(dòng)易官方站采來(lái)的源代碼，大家可以在Dreamweaver里打開(kāi)，你會(huì)更容易找到這樣的源代碼的意思是怎樣的，里面a這是鏈接的標(biāo)志，后面的href命令指出鏈接的方向，也就是方向指向文件名。
同一個(gè)文件中的鏈接：
在制作html網(wǎng)頁(yè)時(shí)，經(jīng)常是需要鏈接的文件的兩部分內(nèi)容分別存成兩個(gè)文件，甚至是網(wǎng)絡(luò)上的文件，這就形成了本地鏈接和網(wǎng)絡(luò)鏈接兩種鏈接方式。
A、本地鏈接：
本地鏈接是鏈接本地的文件，并不需要網(wǎng)絡(luò)了，只要本機(jī)有瀏覽器就可，這里就不解釋了。
B、網(wǎng)絡(luò)鏈接：
這個(gè)很簡(jiǎn)單的，有時(shí)我們需要從一個(gè)站點(diǎn)鏈接到一個(gè)站點(diǎn)，這種通過(guò)網(wǎng)絡(luò)實(shí)現(xiàn)鏈接方法與本地文件鏈接相同，仍然是可能<a>標(biāo)記和屬性以及提示鏈接的一些文字，只是在文件名處應(yīng)寫(xiě)上網(wǎng)絡(luò)上的URL而己：如你可以用這個(gè)基本的格式,去鏈接你想要鏈接的.如,讓別人點(diǎn)郵箱的鏈接,就能發(fā)信給你......
<a href=mailtinfo@powereasy.net>聯(lián)系我們</a>
當(dāng)然還有好多,大家可以在以后的學(xué)習(xí)中自己去發(fā)現(xiàn)......
7、美化網(wǎng)頁(yè)時(shí)要注意的地方：
A、插入圖象要注意格式和尺寸
在HTML網(wǎng)頁(yè)中加入圖像是通過(guò)<img>標(biāo)記實(shí)現(xiàn)的。其書(shū)寫(xiě)格式為：<IMG SRC=”圖像的文件名或URL”>，如我們?cè)诰W(wǎng)頁(yè)源碼中找到：<img src="../../images/banner.gif" width="760" height="80">
這里的"../../images/banner.gif"路徑名，后面的width="760" height="80"是寬和高。在<IMG>中使用了一個(gè)很重要的屬<src>，src的作用是指出一個(gè)圖像文件名或是指出URL（此時(shí)的路徑名書(shū)寫(xiě)規(guī)則與使用鏈接時(shí)的書(shū)寫(xiě)規(guī)則相同）。 如果同一個(gè)文件中需要反復(fù)使用絕對(duì)路徑名或URL。因?yàn)槭褂孟鄬?duì)路徑名，瀏覽器只需將圖像文件下載一次，再次使用這個(gè)圖像時(shí)只要再重新顯示一遍即可。如果使用的是絕對(duì)路徑名，每次顯示時(shí)都要下載一次圖像像，這會(huì)大大降低圖像的顯示速度。
B、調(diào)整圖像和文本的相對(duì)位置
在實(shí)際的網(wǎng)頁(yè)制作過(guò)程中，經(jīng)常需要將圖像和文本放在一起進(jìn)行顯示使用<img>標(biāo)記的ALIGN屬性可以調(diào)整圖像與文本的位置：
ALIGN=top 圖像的頂部與其他文本或圖像的底部對(duì)齊
ALIGN=middle 圖像的中間與其它文本或圖像的底部對(duì)齊
ALIGN=bottom 圖像的底部與其它文本或圖像的底部對(duì)齊（缺省值）
ALIGN=left 圖像放置在屏幕左邊
ALIGN=right 圖像放置在屏幕右邊
如把上面提到的例子修改成：<img src="../../images/banner.gif" width="760" height="80" ALIGN=left> 我們只是在后面加上一句ALIGN=left，大家就會(huì)看到這個(gè)名為banner的圖片顯示靠左。
C、設(shè)計(jì)圖像的替代文字
雖然圖像可以使你的網(wǎng)頁(yè)變得絢麗多彩，富有吸引力，但會(huì)帶來(lái)傳輸速度降低的問(wèn)題，有些瀏覽者為了提高網(wǎng)頁(yè)下載速度，會(huì)關(guān)掉瀏覽器中載入的圖像命令。為了使只瀏覽文本的用戶(hù)能夠了解頁(yè)面上的圖片內(nèi)容可以使用<IMG>的alt命令。代碼如下：<img src="../../images/banner.gif" width="760" height="80" alt="動(dòng)易公司">，這樣當(dāng)banner圖片沒(méi)有出現(xiàn)時(shí)，ALT將引導(dǎo)文字內(nèi)容會(huì)出現(xiàn)在屏幕上，以彌補(bǔ)無(wú)法顯示的圖像。
8、表格在html中的運(yùn)用：
可以說(shuō),表格是最常用的了,在以前的網(wǎng)頁(yè)制作中,如果不用表格,網(wǎng)頁(yè)真是沒(méi)法看�，F(xiàn)在web2.0技術(shù)的流行,大多數(shù)人喜歡用div+css.但對(duì)才接觸網(wǎng)絡(luò)的人來(lái)說(shuō),表格還是很重要的,它對(duì)我們新手學(xué)習(xí)風(fēng)格網(wǎng)頁(yè)模板的制作,還是很有幫助的。
學(xué)習(xí)怎樣在網(wǎng)頁(yè)上創(chuàng)建表格之前，需要首先了解表格的基本部分：
● 表格標(biāo)題(Caption)：指示表格的含義，標(biāo)題可有可無(wú)。
● 表格標(biāo)簽(Table Headings Label)指示行、列存放的內(nèi)容說(shuō)明，一般以黑體、大寫(xiě)突出顯示。
● 表格數(shù)據(jù)(Table Data)：指示表格的內(nèi)容。
● 表格單元(Table Cell)：指示表格中各個(gè)獨(dú)立的區(qū)域，其中一個(gè)區(qū)域可以放置表格標(biāo)簽或者 表格數(shù)據(jù)。
創(chuàng)建表格使用的標(biāo)記
<table>標(biāo)記是定義表格的總標(biāo)記，HTML要求一個(gè)表格的全部?jī)?nèi)容包含<table>.....</table>標(biāo)記之中，其中可以有標(biāo)題及表格的內(nèi)容。
<table>標(biāo)記中最常用屬性是BORDER屬性。從HTML3.2以后，BORDER的含義有了變化，它的值不再標(biāo)記邊框有無(wú)，而是以像素點(diǎn)為單位表示邊框的寬度，如BORDER=1即邊框?yàn)?個(gè)像素點(diǎn)（像素點(diǎn)是位圖的基本單位），如果不包含BORDER屬性則默認(rèn)無(wú)邊，這與HTML2.0恰恰相反。
下面是一個(gè)簡(jiǎn)單代碼的例子，表中只有一行數(shù)據(jù)，該行包含四個(gè)單元，一個(gè)表格標(biāo)簽，三個(gè)數(shù)據(jù)單元。
<html>
<head>
<title>一個(gè)單行表格</title>
</head>
<body>
<table border=2>
<caption>表的標(biāo)題</caption>
<tr>
<th>表頭</th>
<td>表的數(shù)據(jù)</td>
<td>表的數(shù)據(jù)</td>
<td>表的數(shù)據(jù)</td>
</tr>
</table>
</body>
</html>
其實(shí)對(duì)表格的學(xué)習(xí)主要還應(yīng)該結(jié)合自己學(xué)習(xí)中的實(shí)踐來(lái)理解，這樣效果會(huì)更好一些！
加好友 
發(fā)短信
新月派彎刀
Post By：2006/7/6 0:00:19 [只看該作者]
