網頁設計基礎分享

linjizen

網頁設計
一‧ 基本概念

A. 三步驟：
在自己電腦中設計(用記事本即可)。設計好後，用瀏覽器看，重覆修改。

用ftp(或ws_ftp)將網頁傳至主機。網頁目錄為www，首頁名稱為index.html。

到搜尋引擎登記。如不登記，可將網址告知親友、學生。
B. 網頁主要是由文字、圖片構成。設計網頁就是將文字、圖片放在適當位置，如同玩
　拼圖遊戲。文字可調整大小、顏色。圖片限用*.gif、*.jpg，每一圖片約5k，不要太
　大。在網頁上可控制圖片大小。注意：文字是網頁的根本。文字語法最多。
C. 第一頁叫首頁–homepage，網頁設計重心在首頁。其他叫網頁–web page。要設計出
　很漂亮的網頁，必須有美工基礎。網頁的內容及維護網頁，比較重要。不要花太多
　時間設計首頁。網頁設計是用HTML語言。

——————————————————————————–

二‧ HTML 基本語法

1. 網頁必備
<html></html>

<head><titile>網頁設計入門教學網站</title></head>

<body></body>

　實例：
　　 <html>

　　 <head><titile>網頁設計入門教學網站</title></head>

　　 <body>

　　本站是網頁設計入門的教學網站。用最簡單的文字、最簡單的方式，一步步教導
　　初學者學會網頁設計，架好自己網站。

　　 </body>

　　 </html>

請注意：當您會寫出文字網頁後，就可參考[ 三‧ ftp (檔案傳輸)使用方法 ]，上傳寫好的網頁。

2. 文字位置
< br> 標籤。文字斷句。單獨使用。實例：我們為什麼要學網頁設計？<br>

< p> 標籤。文字分段。單獨使用。實例：我們為什麼要學網頁設計？<p>

< center></center> 標籤。文字置中。
實例：< center>我們為什麼要學網路設計？</center>
< hr> 水平線。單獨使用。用來當分隔線。

3. 控制文字大小、顏色
標籤：<font></font>

屬性：size控制字型大小，1最小，7最大。

屬性：color控制字的顏色，共有約200多色。
實例：<font size=6 color= white>國學全球資訊網</font>

4. 其他：
<blockquote></blockquote> 向右縮排，空出五格空白字元。

<pre></pre> 標籤。以原來編排方式，顯示在螢幕上，但字體會變小。

mailto: 這個指令，可以讓瀏覽網頁的人，寄電子郵件給站長。
用法：<a href=”mailto: [email protected]” taget=”top”>寄信給我</a>
特殊字元(要用小寫英文字母)
有些符號，必須用特殊方法來顯示。如：

” 　用 "
&　用 &
< 　用 <
> 　用 >
註解符號 <!–　 –>
用法：<!–這是註解，不顯示在網頁中。–>
標號清單與符號清單。

產生空白字元的三種方法。
5. 網頁背景
背景顏色 <body bgcolor=green> 背景預設顏色是灰色。

讀入背景圖片 <body background=”/~chwang/gif-new/bg/bk509.gif”>

text 指定文字顏色。文字預設顏色是黑色。

link 指定超連結顏色

vlink 指定已連結過的網站，超連結顏色。
實例：

<body background=”/~chwang/gif-new/bg/bk509.gif” text=”#000080″ link=red
vlink=darkred>
如何調出喜歡的顏色？

色彩表，請參看： (交大計算機中心) Color Name and Value
6. 讀入圖片 — 影像標籤
標籤： <img src=”/~帳號/目錄名/檔名”>
實例：

<img src=”/~chwang/gif/BIGLAKE.GIF”>
屬性： align=right(靠右對齊） or left(靠左對齊) or center(圖片置中)

屬性： heigh 圖片高度

屬性： width 圖片寬度

屬性： hspace 圖片上下空白距離

屬性： vspace 圖片左右空白距離

屬性： alt=”圖片”
alt 說明：有些人的數據機速度較慢，有時網路會塞車，影響讀圖片速度，甚至
讀不出圖片。如能加上alt=”這是某圖片”，說明圖片內容。雖然沒讀出圖片，也
以知道是什麼圖片。如還是想讀出圖片，可將滑鼠移到圖片上，按滑鼠右鍵，
選” 檢視影像 “，就可看到圖片。
屬性： border 圖片四周框線。border=0時，圖片四周無框線。
實例：<img src=”/~chwang/gif/BIGLAKE.GIF” alt=”風景圖片” border=0 hsize=200

width=200 hspace=40>
7.連結網站
<a></a> 連結標籤。顏色預設為藍色，連結過的顏色預設為紫色。調整方法，參
看 5. 網頁背景。

屬性：href 放在 <a> 中。
用法：<a href=”網站位址”>這裏放連結的網站名稱</a>
屬性：target=”_top” 將被連結網頁，展現在原來視窗。

屬性：target=”_blank” 將被連結網頁，展現在新視窗。
實例：

<a href=”http://web.ntit.edu.tw/~chwang/door/homepage.htm” target=”_top”>網頁設計入
門網站</a>

說明一：

網網相連，是網際網路特色。但當我們連結別人網站時，最好將被連結的網站，
展現在原來視窗(全螢幕 )，或展現在新視窗。不要將被連結網站，放在自己網站
的框架(第12，會介紹框架用法 )中，以免瀏覽者誤認被連結網站，是我們網站的
一部份。

說明二：

當我們設計網頁，想連結電腦硬碟中其他網頁時，只要打<a href=”test.htm”>連結
test.htm</a> ，就可連結硬碟中 test.htm(所設計的網頁和硬碟中被連結的網頁，必
須放在同一目錄)。

當我們要把網頁上傳到電腦主機時(上傳方法，下節會介紹），必須先將網頁原
始碼修改成：

<a href=”/~chwang/test.htm”>連結 test.htm</a>

test.htm要放在chwang帳號，www目錄中。
用 name 跳回目錄。
8.表格標籤
<table></table> 表格標籤

<tr></tr> = table row 表格列。放在<table></table>中。

<caption></caption> 標題標籤。在表格最上方外面，加上表格標題。也可用 <caption align=”bottom”>，將標題放在表格最下方。

<th></th> = table headings 抬頭欄，粗線條字型。<tr></tr>中。

<td></td> = table data 表格資料欄。放在<tr></tr>中。

屬性：border 表格框線。內定 border=1。border=0 時，表格框線取消。

屬性：水平對齊 align=right(靠右對齊） or left(靠左對齊) or center(對齊中間)

屬性：colspan 表格欄位垂直展開
實例一：

<table border=0>

<tr><th>抬頭欄</th></tr>

<tr><td>表格資料欄</td></tr>

</table>
實例二：

<center>
<table border=1>
<tr>
<th colspan=5>學生國文成績</th>
</tr><tr>
<td>姓名</td>
<td>平時成績</td>
<td>期中考成績</td>
<td>期末考成績</td>
<td>學期成績</td>
</tr><tr>
<td>張三</td>
<td align=center>80</td>
<td align=center>80</td>
<td align=center>80</td>
<td align=center>80</td>
</tr><tr>
<td>李四</td>
<td align=center>90</td>
<td align=center>90</td>
<td align=center>90</td>
<td align=center>90</td>
<tr>
</table>
</center>

實例二執行：
學生國文成績
姓名平時成績期中考成績期末考成績學期成績
張三 80 80 80 80
李四 90 90 90 90
9.框架標籤
</frameset></frameset> 框架標籤

<frame> 框架內容。放在</frameset></frameset>中。

屬性：rows 設定列數、列高

屬性：cols 設定垂直框架、寬度

屬性：src 指向要放在框架中的 htm 檔、連結網站的網址

屬性：marginwidth 框架左右邊界寬度

屬性：marginheight 框架上下邊界寬度

屬性：scrolling 設定框架中捲動軸。可選 yes、no、auto，預設值是 auto。

屬性：border 設定框架邊框厚度
實例一：

<html>

<head><title>國學全球資訊網</title></head>

<frameset rows=”18%,68%,14%”>

<frame src=”c0.htm” marginheight=0>

<frame src=”c1.htm” marginheight=0>

<frame src=”c2.htm” marginheight=0>

</frameset>

</html>

——————————————————————————–

實例二：

<html>

<head><title>東沅書局全球資訊網</title></head>

<frameset rows=”18%,82%”>

<frame src=”store0.htm” scrolling=”no” marginheight=0 border=0>

<frameset cols=”22%,78%”>

<frame src=”store2.htm” scrolling=”no” border=0>

<frame src=”store1.htm” border=0>

</frameser>

</frameset>

</frameset>

</html>

——————————————————————————–

三‧ ftp (檔案傳輸)使用方法
跳到 ms-dos

進入傳檔目錄。 cd 目錄名

ftp mail.ntit.edu.tw

輸入帳號名稱、密碼

mkdir www

cd www

put index.html
（如果一次要傳多個檔案，用mput *.*)
dir 確定是否傳輸成功

quit
注意：

大型電腦主機，大都用 unix 作業系統。 unix 作業系統，大、小寫不同，要特別
注意檔名。檔名最好統一用小寫。

新增 — 最簡單的檔案傳輸方法(以本校為例)

1.打開ie.
2.網址列輸入 ftp://web.ntit.edu.tw
3.輸入使用者名稱.密碼.按登入.
4.在www上快速按兩下.進入資料夾.
5.滑鼠移到檔案上.按右鍵.用複製.貼上.來上傳或下載檔案.

——————————————————————————–

四‧ ws_ftp 設定及使用方法
下面 1 - 10 是設定方法，在第一次使用 ws-ftp 時，需先設定好。

Profile Name 輸入：web.ntit.edu.tw

Host Name/Address 輸入：web.ntit.edu.tw

Host Type 選擇：Automatic detect

Anonymous 勿打勾

User Id 輸入：chwang

password：******

Save Pwd 請打勾

選第二項 Startup

Inital Remote Host Directory 輸入：/home/users/chwang/www

Intial Local Directory 輸入：c:www
下面 11 - 14 是使用方法。 ws_ftp 的使用方法非常簡單。
左邊 Local System 是自己電腦目錄，右邊 Romote System 是電腦主機目錄。

要傳檔時，只要將滑鼠移到檔案上，快速按兩下，檔案就會從左邊傳到右邊，或
從右邊傳到左邊。如要傳輸多個檔案，則先拖曳滑鼠將要傳的檔案反白，然後按
中間箭頭，就可將檔案傳輸過去。

比較常用到的部份，簡單介紹如下：
Chgdir 切換目錄

Mkdir 造新目錄

Rename 改檔名

Delete 刪除檔案

Refresh 更新檔案。檔案修改、存檔後，要再上傳檔案，需先按 Refresh 更新。

Connect 斷線後，按 Connect ，再連接主機。
Ascii、Binary、Auto 三選項，只要選 Binary ( 二進位傳檔 ) 就行了。
請注意：FileZilla 比 ws_ftp 好用，設定又簡單。請至：PChome 下載。

——————————————————————————–

五‧其他事項：
如果網頁出現雜亂符號，或和預期不同，必定是原始碼有錯，應詳細檢查原始
碼。或用瀏覽器看原始碼，找出錯誤。

如果你想要跑馬燈，請按 [ 跑馬燈 ] ，進入跑馬燈網頁。