∼前言∼
製作網頁其實沒有想像中的難，只是需要花些時間。若是你只要一個簡單的網頁，那麼看看每頁最後的FrontPage部份就夠了，若想學多一點，還是好好鑽研一下各個標籤語法吧！希望在不久的將來可以看到每個人都有屬於自己的網頁。
∼工具∼
1.網頁製作軟體
FrontPage Express：
這是微軟出的，只要灌IE就會內附，介面跟WORD差不多，換句話說：只要會用WORD就一定會用，屬於所見即得類（邊做可邊看到成果），我想是最容易取得以及最適合新手的軟體了。
Microsoft Frontage 2000：
這是微軟目前最新的應用軟體，有很多不錯新的功能，使用方法上者差不多，只是更體貼我們使用者。如果你不是新手或是已經使用過電腦者可考慮使用此程式。
2.影像製作軟體
PhotoImpact：
適合剛學習影像製作的人使用，雖然沒有其他軟體專業，但在WEB的配合度方面絕對是不二選擇。
GIF animator：
製作動畫的最佳工具，附有多種動畫特效。
Smart Saver：
可以去除多餘的像素來將圖片瘦身。
ACDSee：
最佳，最快速的圖片瀏覽軟體，也最普遍。
3.其他相關軟體
Internet Explorer：
瀏覽器，用來觀看完成的網頁。建議IE5也可以利用IE，上傳自己的網頁，使用方法就是在輸入網址的地方輸入ftp://帳號:密碼@上傳主機
FTP：
將做好的網頁上傳到自己的網頁空間中。
基本HTML：
一、首先一開始需準備的東西：
記事本（或其他 HTML編輯器）
二、什麼是HTML
各位網路衝浪者（WWWSufer）在逛遍世界大大小小的WWW站，
看過成千上萬形形色色的首頁（Home Page）後，是不是也正摩拳
擦掌的想自己做出自己的首頁，讓大家看看。也許你只是想趕上
這一波熱潮，做成一個漂亮的首頁，讓來自世界各地的網有進一
步認識你，那你就要學怎麼做Home Page了。
三、宣告為HTML文件：
首先，你要先打上下面語法，然後儲存為*.html或*.htm，其語法為：
<HTML> <!--HTML的開頭-->
<HEAD> <!--文件的資訊或標題-->
<title> </title> <!--網頁的標題-->
</HEAD> <!--文件資訊的結束-->
<BODY> <!--編輯區的開頭-->
</BODY> <!--編輯區的結束-->
</HTML> <!--HTML的結束-->
四、如何製作HTML文件：
HTML 的製作流程沒啥大步了的，可能就像您在寫文章一樣，其
過程大致如下：
規劃文件內容→編輯文件→用瀏覽器預先觀看之（不滿意在回去
修改）→申請空間→自己在網路上測試之→公布你的網頁
首先，你必須想好你的網頁要放哪些東西，大致上在做什麼，譬
如我的網頁是個人首頁，專供下載軟體的網站，還有那邊要放上
圖片，那邊要放表格.....等等。
六、HTML標籤：
HTML標籤沒有大小寫之分，例如：
<body>跟<BODY>跟 <BoDy>的效果都是一樣的。
HTML標籤有很多種類行的，例如：
□前後包夾型：這種類型必須成雙成對的出現，例如在文件中的
<BODY標籤，在稍後就必須在有一個 </BODY>的標籤至於
在這標籤內的文自救會被加上此標籤的效果。成對出現者，第
二個標籤就要加上一個斜線"/"。
□單槍匹馬型：這種標籤只需出現一次，像是 <BR>或 <IMG>等
等，以後會介紹到。
七、HTML初步：
1.一個最簡單的HTML文件：
既然HTML只是普通的文字檔，那麼最陽春的HTML文件可以說是
一個普通的，不含任何標籤的文字檔了。用記事本或席他編輯器
在<BODY>中輸入下列文字：
一個陽春的HTML文件
則存檔再瀏覽就會出現：
一個陽春的HTML文件
簡單吧？
2.文件標題
哪些資訊我們可以放在<HEAD>標籤中呢？有一個我們最常用的，那就
是文件標題，這個標籤理所輸入的文字，會顯示在瀏覽器的視窗
標題上，例如：
其語法為<title>您的文件標題</title>
若我們未指定視窗標題的話，瀏覽器則會依此文件的路徑（例如
遊客無法瀏覽此圖片或下載點，請先註冊或登入會員。, 或是file:///c:/win98/desktop/index.htm
index.htm等等）做為視窗標題。
3.簡單的格式變化：
□<BR>--換行
<BR>是讓您指定換行的標籤，只要在您希望換行的地方（通常是一行的
最後面）加上<BR>標籤，則瀏覽器就會先換行，再顯示後續的
文字，例如：
<BODY> 俠客的家
俠客的家<BR> →→→→ 俠客製作
俠客製作
</BODY>
□<P>--分段
每一個標籤是分隔不同段落用的。所謂分段就是說，除了分行外
，瀏覽器還會多一行空白，在接著顯示後面的文字。例如：
俠客的家<P> 俠客的家
俠客製作<BR> →→→→
在台南縣 俠客製作
在台南縣
□<PRE>--使用原有排列
如果您希望瀏覽器能依文字在編輯程式中的排列情形來顯示，可
將這些文字前後加上<PRE>.....</PRE>的標籤，這樣文字就不會擠
成一團了，你也不用加上換行標籤了。例如：
<PRE>
白日 依山盡，黃河 入海流。
欲 窮千里目，更上一層 樓。
</PRE>
↓↓↓↓↓↓↓
白日 依山盡，黃河 入海流。
欲 窮千里目，更上一層 樓。
□<HR>--加上分隔線
在很多 Home Page 上我們可以看到為了使文件內容更清晰，
都會用一條橫線(Horizon Ruler)，分隔文件中不同的段落，使得段落更為分明。
只需在要坐上分隔線的地方加上<HR>標籤，在顯示時，
此處就會出現一條分隔線。例如：
<BODY>
李白的詩
<HR>
床前明月光<BR>
疑視地上霜<BR>
舉頭望明月<BR>
低頭思故鄉<BR>
<HR>
取自唐詩三百首
</BODY>
↓↓↓↓↓↓↓
--------------------------------------------------------------------------------
床前明月光
疑視地上霜
舉頭望明月
低頭思故鄉
--------------------------------------------------------------------------------
取自唐詩三百首
當然，不同的瀏覽器所縣市的分隔線會長得不太一樣，
另外在學會了使用圖形後，您也可考慮用自己畫的線條來做段落的分隔線。
八、標題文字：
學會如何安排簡單的段落格事後，我們現在要看看如何改變文件中的問字顯示效果
在 HTML 標籤中用於文字顯示的非常多，這裡先從最簡單、最常用的標題介紹起。
這個標題並非瀏覽器視窗左上角所顯示的標題(用<title>定義的)，
而是平常在文章中，像章節名稱之類的標題。設定標題的標籤共有六個，分別是
<H1>、<H2>.....、至<H6> ，數字愈大標題所顯示的文字愈小：
<H1>李白的詩</H1>
<H2>靜夜思</H2>
<HR>
床前明月光<BR>
疑視地上霜<BR>
舉頭望明月<BR>
低頭思故鄉
↓↓↓↓↓↓↓
李白的詩
靜夜思
--------------------------------------------------------------------------------
床前明月光
疑視地上霜
舉頭望明月
低頭思故鄉
九、文字的排列 - 對齊方向：
基本上，在瀏覽器中文字都是由左一直顯示到右，每一行都是向左對齊的。
如果您希望文字改成向中或向右對齊，可在段落標籤<P>中加入屬性來設定
千面介紹標籤的使用時只是在"<>"中加入標前的名稱而已，
其實有些標籤還有很多屬性(Attribute)可供我們選用、設定。
加入屬行時的標籤格式如下：
<標籤名稱 屬性1=屬性值 屬性2=屬性值 屬性3=....> 例如：
<IMG SRC=logo.gif border=0 alt=俠客資源網>
□<P ALIGH>--設定對齊方向
<P>標籤有個ALIGH屬性就是用來設定文字對齊的方向，可設定的值
有LEFT（向左對齊，這是預設值）、CENTER（向中對齊）、RIGHT（向右對齊）
三種。瀏覽器會將<P ALIGH=...>之後的文字以所設的對齊方式顯示，例如：
<P ALIGN =RIGHT>這段文字會對齊視窗的右邊
<P ALIGN =CENTER>這段文字會對齊視窗的中間
<P ALIGN =LEFT>這段文字會對齊視窗的左邊
↓↓↓↓↓↓↓
這段文字會對齊視窗的右邊
這段文字會對齊視窗的中間
這段文字會對齊視窗的左邊
注意，一旦設定了某種對齊方式後，例如設定了向右對齊，除非出現另一個
<P ALIGN=...>改變其他對齊方向，或是</P>，否則文件種所有文字都是向右對齊的
或是遇到<HR>、<H1>標籤時，文字的對齊方向才會設回預設的向左對齊。
□<CENTER>--向中對齊
另外還有一個對齊中央的標籤<CENTER>，其效果也是讓所有的文字向中間對齊。
而且在<CENTER>間的文字，不會因<H?>或<HR>的出現而變回預設的向右對齊。
基本標籤 ：
學習：
∼基本文件標籤語法∼
<HTML></HTML> <HEAD></HEAD>
<title></title> <BODY></BODY>
解說：
在每頁HTML文件中，都有這四組基本標籤（框架格式例外，在框架標籤會說明），為什麼說四組呢？
因為大部分的標籤都是兩兩一組，只是多加一個 / 而已。讓我們先來看這四組基本標籤：
<HTML></HTML>
這一組標籤是告訴瀏覽器說：我是一份HTML文件！包在網頁的最上下兩端，將所有的原始碼都包起來。
<HEAD></HEAD>
在這個標籤中主要包括了 title 標籤以及 JAVA Script 的內容。關於 JAVA，在進階篇會提到，這裡先不討論，所以只要列出來就可以了。
<title></title>
這個標籤就是當網頁開啟時，瀏覽器上方藍色部分出現的標題。現在你看到這頁的標題應該是吳克禮的網頁，而且也影響到當別人將網頁加入我的最愛時的名稱。
<BODY></BODY>
這個標籤包含的就是網頁的內容，除了以上三組標籤外，其它的標籤都要寫在這組標籤內。
範例：
請留意<HTML> <HEAD> <title> <title> </HEAD> <BODY> </BODY> </HTML> 的次序
∼標籤範例∼
<HTML>
<HEAD>
<title>鄭立德的網頁<title>
</HEAD>
<BODY>
BODY之間為主要語法所在，文字也是打在這之中
</BODY>
</HTML>
使用 FrontPage 做法
FrontPage Express的路徑在C:/ Program Files / FrontPage Express / BIN / FPXPRESS.exe。
執行後看到一個類似WORD的視窗，感覺很親切吧！我們先在空白處打上BODY之間為主要語法所在，文字也是打在這之中這句話，接著到檔案/畫面內容/一般的標題中打入德德哥的網頁，就完成以上範例啦！
接著就要存檔了，先在C槽中建立一個我的網頁的資料夾。然後選檔案/儲存檔案/存成檔案，把檔案命名為index.htm存在剛建的我的網頁資料夾中就好。先說明幾個觀念：
建立我的網頁資料夾的目的是：將來網站中的所有檔案都要放在這個資料夾中，以利編輯。為什麼呢？一來好找，二來牽涉到絕對路徑以及相對路徑的問題。
首頁最好命名為 index.htm，因為瀏覽器會自動搜索網站中 index.htm 這個檔案。然而我們數學系要把它設定為 Welcome.html（小心大小寫）。因為我們數學系的系統會自動讀取這個檔案（另外記得要把這放在Html的資料夾之中）。
字體標籤 ：
字體標籤分為四部份：
在字體標籤裡，對於文字的格式也有很多變化，如粗體、斜體...etc，
也定義了一些現成的格式供編者使用，如『格式化』、『變數』...etc。
但極少使用，故不多加說明。此外還可使用其他字型，如：少女字、浪漫體...etc。
但先決條件是別人電腦也要有該字型！
語法是<font face="細明體">。
還有現在<B>粗體標籤
多用<strong>加強標籤替換。
背景標籤：
∼標籤語法∼
<bodybgcolor="#FFFFFF" background="圖片路徑" bgproperties="fixed" text="#000000"link="#0000FF" vlink="FF00FF" alink="FF0000" >
解說
bgcolor：
背景顏色的設定：使用 bgcolor。
在 <body> 標籤中加入：<body bgcolor="#000000">
同樣的，背景顏色也是跟文字顏色的設定方法相同，使用十六進位（00∼ff）設定背景顏色。
當開啟畫面時，若背景圖案還沒傳輸完之前，就會先顯現背景顏色，所以總比一片灰灰的好看多了吧！
background：
背景圖片的設定：使用 background。可以用 jpg (jpeg) 或 gif 格式的圖檔。
在 <body> 標籤中加入：<body background="/目錄/檔名.gif">
這樣就可以把圖片當作是背景了！
bgproperties：
浮水印效果。
捲動畫面時，背景圖像固定不動（只能在IE中顯示）
我們一般都只有設定 bgcolor 和 background 這兩個參數，其它就算不寫，瀏覽器也會以預設值來判斷。
text：
設定文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。
link：
設定「連結前」的顏色。
vlink：
設定「按下連結」的顏色，也就是當滑鼠按下連結的瞬間所呈現的顏色。
alink：
設定「連結後」的顏色。也就是如果該連結已經有被按過了，那麼就會呈現的顏色。是為了讓使用者容易識別到底有哪些連結去過了。
圖片標籤 ：
∼標籤語法∼
<img src="圖片路徑" alt="替代文字" align="left" border="0" hspace="2" vspace="2" height="25" width="150">
解說
圖片的插入：使用 <img> 標籤
例如我們要插入一個圖片就打入：<img src="/目錄/檔名.gif">
這樣，就可以把圖片放在網頁中了。
另外，<img> 標籤還有一些屬性，可更改圖片的位置、大小、替換文字、圖片間的間隔。
<img src="圖片路徑">：
顯示圖片最基本的方法。
有一點要注意的就是：圖檔檔名大小寫要注意是否和原始碼相同。
因為在硬碟中，不論檔名是大小寫，都能正常顯示。
但傳上了網路之後，大小寫不同可是代表不同的檔案。尤其是副檔名最會出錯！
[
本帖最後由 妃 於 2011-6-18 07:40 PM 編輯 ]
加入我的最愛 | 
設定為首頁 | 
圖片上載
論壇音樂模式 
非音樂模式 
