網頁設計基礎分享



贊助商連結


linjizen
2009-05-19, 09:22 AM
網頁設計
一‧ 基本概念

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: chwang@mail.ntit.edu.tw” taget=”top”>寄信給我</a>
特殊字元(要用小寫英文字母)
有些符號,必須用特殊方法來顯示。如:

”   用 &quot;
& 用 &amp;
<  用 &lt;
>  用 &gt;
註解符號 <!–  –>
用法:<!–這是註解,不顯示在網頁中。–>
標號清單與符號清單。

產生空白字元的三種方法。
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 下載。



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

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

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