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