WEB Design

投影片摘要

網站建立的前製工作

網站的建立

檔案命名規則

認識網址

認識網頁瀏覽器

設定網頁的語系編碼

網頁基本編輯-文字設定

超連結

網頁色彩

網頁圖片格式

投影片摘要

(續)

網頁排版

表格、圖層及面版之應用

表格應用的盲點

匯入表格

表格與圖層的盲點

繪製面版

頁框之應用

網站建立的前製工作

網站的建立

檔案命名規則-首頁

檔案命名規則-根目錄

檔案命名規則-檔案名稱

檔案命名規則-分類管理

檔案命名規則-建立檔案架構

認識網址

認識網頁瀏覽器

網頁瀏覽器（分類）

網站的建立

對象：鎖定主要的客戶

主題：確定主題再設計內容及版型

類型：個人或公司網站

檔案命名規則-首頁

首頁命名原則，向您的ISP確定首頁名稱

首頁檔名是由web server決定

IIS(Internet Information Services)預設首頁

檔名

index.html

index.htm

一般ASP及UNIX OS預設檔案名稱

default.html

default.htm

副檔名

htm/html

檔案命名規則-根目錄

網站(根目錄)之檔案命名規則

所有檔案都放在根目錄下(要放到網站上的)

傳送檔案請壓縮成一個檔案

檔案命名規則-檔案名稱

全部使用英文小寫(有些server無法使用大寫字母)

只使用字母或數字

數字或英文小寫+數字

不要全部使用英文大寫或大小寫夾雜

不可有空格

不要使用特殊符號，如/\(反/斜線)、；(分號)、:(冒號)

可以使用的符號，如-(連字號)、_(底線)、~(待字號)、.(點

/dot) 。(儘量少用，有些server不支援)

保持檔名簡短

不使用不常用的檔案類型

根據作業系統，選擇最多人用的瀏覽器>跨平台>

檔案命名規則-分類管理

小型網站可能只要一

個或兩個資料匣

大型網站可能要數個

或數十個以上的資料 匣

不要任意搬動檔案或 更改檔名

超連結可能會遺失。

即使有統一更新連結功

能，但卻是費時時工 作。

html

images

bg

picture/pic

photo

download/file (.doc/ .ppt/ .xls/ .jpg)

css

flash

music/mp3

movie

檔案命名規則-建立檔案架構

由檔名辨識檔案內容

index.html

flash.swf

workshop.html、workshop2007.html

event.html、event2007.html

traffic.html

map.jpg

bg.jpg

建立網站檔案架構

認識網址

http://www.ntu.edu.tw

http://www.cc.ntu.edu.tw

http://tw.yahoo.com

http://www.yahoo.co.jp/

http://tw.msn.com/

http://www.taipei.gov.tw/

http://www.iii.org.tw/

http://www.ntu.edu.tw/http://www.cc.ntu.edu.tw/http://tw.yahoo.com/http://www.yahoo.co.jp/http://tw.msn.com/http://www.taipei.gov.tw/http://www.iii.org.tw/

認識網頁瀏覽器

專有名詞查詢-維基百科網站

http://zh.wikipedia.org/

使用最多人使用之瀏覽器及其版本

不要想像大家都是「鼎極顧客」

調查目標客戶之瀏覽者使用最多之版本

不要過度使用最新技術及版本，不是最新才好

多測試幾種常用之瀏覽器

http://zh.wikipedia.org/

網頁瀏覽器（分類）

編輯※| 討論▲| ■模板

Geckoc核心： Netscape 網景導航者（-Mozilla-Mozilla Firefox -Epiphany-Sylera-SeaMonkey-）Navigator

等CaminoKHTML

(AppleWebKit) 排版引擎：

等OmniWeb-Konqueror-Shiira-Safari

核心Trident）：元件IE（

Maxthon-GreenBrowser-Sleipnir-Internet Explorer 等Lunascape-Donut-KKman-

獨自排版引擎： 等Amaya-iCab-mosaic-Opera

文字瀏覽器： Lynx - w3m 等

關聯項目： 排HTML-HTML-網頁瀏覽器比較-網頁瀏覽器列表 瀏覽器大戰-網頁伺服器-分頁瀏覽器-版引擎

http://zh.wikipedia.org/w/index.php?title=Category:%E7%B6%B2%E9%A0%81%E7%80%8F%E8%A6%BD%E5%99%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Template:Web_brower&action=edithttp://zh.wikipedia.org/w/index.php?title=Template_talk:Web_brower&action=edithttp://zh.wikipedia.org/w/index.php?title=Template:Web_brower&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Gecko&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%BD%91%E6%99%AF%E5%AF%BC%E8%88%AA%E8%80%85&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Mozilla_Suite&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Mozilla_Firefox&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Epiphany&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Sylera&action=edithttp://zh.wikipedia.org/w/index.php?title=SeaMonkey&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%BD%91%E6%99%AF%E5%AF%BC%E8%88%AA%E8%80%85&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Camino&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=KHTML&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=OmniWeb&action=edithttp://zh.wikipedia.org/w/index.php?title=Konqueror&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Shiira&action=edithttp://zh.wikipedia.org/w/index.php?title=Safari&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Trident&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=IE%E5%85%83%E4%BB%B6%E7%80%8F%E8%A6%BD%E5%99%A8&action=edithttp://zh.wikipedia.org/w/index.php?title=Maxthon&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=GreenBrowser&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Sleipnir&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Internet_Explorer&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Lunascape&action=edithttp://zh.wikipedia.org/w/index.php?title=Donut&action=edithttp://zh.wikipedia.org/w/index.php?title=KKman&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Amaya&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=ICab&action=edithttp://zh.wikipedia.org/w/index.php?title=Mosaic&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Opera&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Lynx&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=W3m&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=HTML%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E&action=edithttp://zh.wikipedia.org/w/index.php?title=HTML&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%BD%91%E9%A1%B5%E6%B5%8F%E8%A7%88%E5%99%A8%E6%AF%94%E8%BE%83&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%BD%91%E9%A1%B5%E6%B5%8F%E8%A7%88%E5%99%A8%E5%88%97%E8%A1%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E6%B5%8F%E8%A7%88%E5%99%A8%E5%A4%A7%E6%88%98&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%B6%B2%E9%A0%81%E4%BC%BA%E6%9C%8D%E5%99%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E5%88%86%E9%A0%81%E7%80%8F%E8%A6%BD%E5%99%A8&action=edithttp://zh.wikipedia.org/w/index.php?title=HTML%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E&action=edit

認識網頁瀏覽器

網頁瀏覽器是個顯示網頁伺服器或檔案系統 內的HTML文件，並讓用戶與此些文件互動 的一種軟體。

個人電腦上常見的網頁瀏覽器包括

微軟的Internet Explorer

Mozilla的Firefox、Opera和Safari (MAC OS)

瀏覽器是最經常使用到的客戶端程序

全球資訊網是全球最大的連結文件網路文 庫。

http://zh.wikipedia.org/w/index.php?title=%E7%BD%91%E9%A1%B5%E6%9C%8D%E5%8A%A1%E5%99%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=HTML&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E8%BB%9F%E4%BB%B6&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E4%B8%AA%E4%BA%BA%E8%AE%A1%E7%AE%97%E6%9C%BA&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E5%BE%AE%E8%BB%9F&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Internet_Explorer&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Mozilla&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Mozilla_Firefox&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Opera&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=Safari&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%A8%8B%E5%BA%8F&action=edithttp://zh.wikipedia.org/w/index.php?title=%E5%85%A8%E7%90%83%E8%B3%87%E8%A8%8A%E7%B6%B2&variant=zh-tw

Opera

資料來源：維基百科，自由的百科全書

本文講述網頁瀏覽器。關於一種戲劇形式，詳見「歌劇」。

Opera

在Windows XP平臺運作的Opera 9.01瀏覽器開發者Opera Software最新穩定版9.10 / 2006年12月18日作業系統跨平臺類型

網頁瀏覽器許可協議專有

網站

www.opera.com

Opera起初是一款挪威Opera Software ASA公司製作的支持多頁

面標籤式瀏覽的網路瀏覽器，由於新版本的Opera增加了大量網路功 能，官方將Opera定義為一個網路套件。目前官方發佈的個人電腦用 的最新穩定版本為9.0。

Opera支持多種作業系統，如Windows、linux、Mac、

FreeBSD、Solaris、BeOS、OS/2、QNX等，此外，Opera還有 手機用的版本，在2006年更與Nintendo簽下合約，提供NDS及Wii 遊樂器Opera瀏覽器軟體；也支持多語言，包括簡體中文和繁體中

文。

http://zh.wikipedia.org/w/index.php?title=%E7%B6%B2%E9%A0%81%E7%80%8F%E8%A6%BD%E5%99%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%B6%B2%E9%A0%81%E7%80%8F%E8%A6%BD%E5%99%A8&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%B9%81%E4%BD%93%E4%B8%AD%E6%96%87&variant=zh-twhttp://zh.wikipedia.org/w/index.php?title=%E7%B9%81%E4%BD%93%E4%B8%AD%E6%96%87&variant=zh-tw

設定網頁的語系編碼

投影片摘要

網頁支援語系

設定網頁的語系編碼

網頁的語系設定方式

設定預設的語系編碼

目前網頁的語系設定

製作多國語言的網頁

Unicode 小常識

製作多國語言網頁的必要條件

網頁支援語系

目前網頁設定語系

一般預設為目前作業系統之語系

設定多國語系

將網頁編碼語系＝＞Unicode(UTF-8)

設定網頁的語系編碼

為了讓網頁能夠正確地顯示中文字

必須先確定網頁語系是繁體中文

否則輸入的中文字可能會變成亂碼

理論上，只要是使用繁體中文的作業系統， 就會自動把網頁編碼設為繁體中文

(Big5)

所以通常不需要再修改，但若要製作其它語 系

(如日文、韓文)的網頁，則需另外設定。

網頁的語系設定方式-Dreamweaver8

設定網頁的語系編碼1. 請在開啟/開新網頁後2. 執行『修改/頁面屬性』命令3. 切換至標題/編碼方式頁次4. 設定網頁的語系編碼

預設編碼：請執行編輯/偏好設定/新文件/ 預設編碼

網頁的語系設定方式-Frontpage2003

網站預設編碼：1. 請在開啟/開新網頁後2. 執行『工具/網站設定』命令3. 切換至語言頁次，設定網頁語系編碼

網頁目前編碼：1. 執行『工具/綱頁選項』2. 切換至預設字型頁次(語言字元集)

網頁內容編碼1. 執行『格式或按網頁右鍵/網頁內容/語言

/HTML編碼方式』

設定預設的語系編碼

如果每次在

Dreamweaver 建立的新網頁， 其語系編碼不會自動設為繁體中文的話，那 麼可能是更改到預設值了。

請執行『編輯/偏好設定』命令，在交談窗中 的新文件頁次裡做設定

可以更改回最原始的預設值

設定預設的語系編碼

目前網頁的語系設定

製作多國語言的網頁

如果想設計一個含有多國文字的網頁，例如 包含中、日、韓

3 種文字的網頁，那麼編碼

方式就不能只設定成特定某一種編碼語系， 否則其他的文字就會變成亂碼。

在製作多國語言網頁時，建議最好在一開始 先修改網頁編碼，再輸入文件內容，以確保 網頁可以完整顯示各國語言。

請開新網頁後，修改頁面屬性，將網頁編碼 設為

Unicode (UTF-8) 即可。

Dreamweaver8的設定方式

1. 開新網頁後

2. 執行『修改/頁面屬性』命令3. 將網頁編碼設為

Unicode (UTF-8) 即可

Dreamweaver8的設定方式

Dreamweaver8的設定方式

Frontpage2003的設定方式1. 請在開啟/開新網頁後2. 執行『工具/網站設定』命令3. 切換至語言頁次4. 設定網頁的語系編碼

5. 將網頁編碼設為

Unicode (UTF-8) 即可

Frontpage2003的設定方式

開啟/開新網頁>工具/網站設定

Frontpage2003的設定方式

工具/綱頁選項/至預設字型頁次(語言字元集)

Frontpage2003的設定方式

格式或按網頁右鍵/網頁內容

製作多國語言的網頁不可不知

Unicode 小常識

製作多國語言網頁的必要條件

如何取得輸入法及

Unicode 字型

Unicode 小常識

Unicode 就是所謂的『萬國碼』，是一種世 界各國語系皆通用的編碼方式，只要網頁使 用這種編碼，就不必擔心其它國家的人看不 到你網頁裡的文字

能讓多國文字同時並存在一個網頁中，不過 前提是對方的瀏覽器也要支援

Unicode 編碼

哦

一般

IE 5.0 以上皆沒有問題

製作多國語言網頁的必要條件

要使用

Unicode (UTF-8) 編碼來顯示多國文 字，至少要具備

2 個條件：

要有對應的輸入法：例如要輸入日文字，你 就必須有一套真正的日文輸入法。網路上常 用的櫻花輸入法、或用嘸蝦米輸入法打出來 的日文可不行哦！

作業系統裡要有

Unicode 字型：這是一套集 合各國文字的字型，沒有這套字型的話，就 無法顯示

Unicode 編碼的網頁文字。

製作多國語言網頁的必要條件

有了

Unicode 字型後，記得要將

Unicode (UTF-8) 編碼模式下的顯示字型換為Unicode 字型，文字才能正常出現。

請執行『編輯/偏好設定』命令：

製作多國語言網頁的必要條件

如何取得輸入法及

Unicode 字型

如果作業系統是

WindowsXP，則本身就已內 建各國語言輸入法及

Unicode 字型了。

要新增其它輸入法，可從『控制台/日期、時 間、語言和區域選項』裡進行安裝，可以自

行參考相關書籍。

網頁基本編輯-文字設定

文字字型設定

使用最普遍的字型

不用難以辨識字型

一定要用的字型可轉成圖片

中文字型：新細明體、細明體、標楷體

英文字型：

不要全部用大寫字

不要用斜體

EX：WEB DESIGN vs Web Design

文字字型設定

字體

內文字體：不要大於14~18pt，小於8~10pt

不要全設成粗體、斜體、全部大寫字、全部 小寫字及手寫體等

內文不宜過長

段落間距容易辨識

不要加引號“”

文字及表格排版

課程大綱 1. 網站的概念與規劃流程-建構第一個網站2. 文字應用3. 圖片應用與超連結4. 表格設定與應用5. 表單應用6. 圖層的基本概念7. 網站管理與上傳8. 建立多媒體網頁

建立網站 建立網站前置作業

基本網頁

編輯• 文字應用

超連結• 加入內部超連結

超連結

超連結-什麼是超連結

一提到網頁，映入腦海中的畫面，少不了加 一條底線的超連結文字。

網頁中的超連結，可以說是網頁「最基本」 也是「最實用」的特色。

只要用滑鼠按下超連結，立刻可以連結到另 一個網頁。

超連結設定方式

「內部超連結」：連結到網站內部的超連結

超連結是要連結到網站中其他網頁

同一層級：main.html(.htm)

不同資料匣連結方式

回上一層：../index.htm#top

回上二層：../../index.htm#top

或是同一網頁中的其他內容時

用法：#top(#加上錨點的名稱)

Dreamweaver 錨點(Anchor)

FrontPage 書籤(bookmark)

「外部超連結」：

連結到其他網站的超連結，網站以外，如FTP、Email、

WWW、telnet

超連結設定方式

插入>超連結

內部連結—同一網站之網頁間之連結

外部連結—網頁以外，如FTP、Email、WWW

插入>書籤/錨點(同網站狀況下)

先建立書籤/錨點，再使用超連結功能設定

同一網頁書籤/錨點之超連結：#top

另一網頁書籤/錨點之超連結：index.htm#top

不同資料匣連結

回上一層：../index.htm#top

回上二層：../../index.htm#top

加入內部超連結

「內部超連結」：連結到網站內部的超連結

超連結是要連結到網站中其他網頁

或是同一網站中的其他內容時

同一層級：main.html(.htm)

不同資料匣連結方式

回上一層：../index.htm#top

回上二層：../../index.htm#top

或是同一網頁中的其他內容時

用法：#top(#加上錨點的名稱)

不同資料匣連結方式

回上一層：../index.htm#top

回上二層：../../index.htm#top

Dreamweaver 錨點(Anchor)

FrontPage 書籤(bookmark)

加入內部超連結

加入超連結文字

連結下拉選單

為圖片加上超連結

超連結裡包含中文字的問題

加入超連結文字

在範例網站的入選作品網頁

(display.html) 中 ，需要加入可連結到以下等展示各類作品網

頁的超連結文字

人物類網頁(people.html)

靜物類網頁

(realistically.html)

動物類網頁

(animal.html)

假設想要以文字型態的方式來設定超連結

底下以練習檔

ex06-01.html 的內部超連結製 作過程來說明：

加入超連結文字

加入超連結文字

加入超連結文字

加入超連結文字

其他欲連結到各類作品網頁的文字，使用同 樣的方法就可以一一加入超連結：

加入超連結文字

修改已含有超連結的文字，是不會影響超連結內容的。

連結下拉選單

屬性面板的連結 下拉列示窗

記錄了本次啟動 Dreamweaver 後 ，在連結欄曾出

現的超連結資訊 。

為圖片加上超連結

為圖片加上超連結

超連結裡包含中文字的問題

有些非中文的瀏覽器或網站伺服器並不支援 中文字，若網頁中的超連結目標，也就是網 頁的網址含有中文字，則可能會出現找不到 連結目標的情況。

為了讓網頁在不同平台都具有相容性，舉凡 網頁的檔案、資料夾名稱、及連結路徑等

請不要使用中文字元。

加入錨點 (Anchor)

應用時機：網頁的內容很多時，可直接顯示某一部分網

頁內容的超連結，只要在網頁內容加錨點

(Anchor)即可。

Dreamweaver 錨點(Anchor)

FrontPage 書籤(bookmark)

建議可在網頁的開頭加入網頁內容索引超連結

按下有興趣的內容標題超連結，即可直接跳到網頁中該內容所

在之處

語法：#TOP(#加上錨點名稱)

不同資料匣連結方式

回上一層：../index.htm#top

回上二層：../../index.htm#top

加入錨點 (Anchor)

例如範例網站中的評審人員網頁

(judges.html) 就是以加入錨點的方式完成的 讓瀏覽者可以先按下某一評審名字的超連結

，即直接往下跳到介紹該評審的內容。

請開啟練習檔

ex06-03.html，練習如何加入

錨點：

加入錨點 (Anchor)

加入錨點 (Anchor)

加入錨點 (Anchor)

加入錨點 (Anchor)

連結到其他網頁中的錨點

若要指定可直接連結到某一網頁錨點的超連 結，直接在連結網頁的超連結之後加上錨點 名稱即可：

加入外部超連結

外部超連結的設定方式

使用到最多的外部超連結，是連結到

WWW 網站的超連

結

超連結語法：以http:// 開頭，再填上網域名稱，如

www.yam.com。

但網路上除了

WWW 網站

還有

FTP 站台，若要連結到這類站台

其超連結設定方式就與

WWW 網站有所不同

Email語法：mailto:xxxx@ntu.edu.tw

Email：不用隱藏email address，萬一打不開連結或者不

是即時要寫信(可能要抄回家) ，如寫信給我。

mailto:xxxx@ntu.edu.twmailto:huangsl@ntu.edu.tw

外部超連結的設定方式

外部超連結還有可以啟動電腦中其他網路服務程式的超連結，如啟動電子郵

件程式、新聞群組程式等等。

以下就列出一些外部超連結與啟動其他網路服務程式的超連結設定方式：

讓瀏覽者下載檔案

下載檔案的格式

將超連結指向除

HTML 格式之外的檔案，是 不是都會成為下載檔案的連結呢？答案是： 不一定。

若超連結指向瀏覽器無法分辨的檔案格式， 如

.rar、.exe 等等，瀏覽器就會當成是要下

載的檔案，進而啟動下載功能。

下載檔案的格式

瀏覽器目前普遍支援顯示的圖檔

超連結指向

.gif、.jpg、.png 等圖片格式

那麼就不會當成下載檔案

而是直接顯示在瀏覽器中

如果還是想將這些圖片當成下載檔案，那麼 就把它壓縮成

.zip 檔案吧。

變換超連結文字狀態

請打開範例檔

ch06-08.html

一般超連結文字給人的印象便是在網頁中加

了一條底線的超連結文字。

讓超連結文字不出現底線

當滑鼠指在超連結文字上時，文字會變大

接下來要示範的效果

讓超連結文字在「滑鼠移到超連結文字上」時， 底線會消失而且色彩會改變：

變換超連結文字狀態

變換超連結文字狀態

修改頁面屬性的設定

其他超連結狀態說明

使用

CSS 樣式

修改頁面屬性的設定

執行『修改/頁面屬性』命令，切換到連結頁次中設定：

其他超連結狀態說明

使用

CSS 樣式

利用

CSS 樣式則可以有更多的連結文字變 化效果

以

ex06-08.html為例說明1. 執行『文字/CSS樣式/開新檔案』命令，

並如下操作：

使用

CSS 樣式

使用

CSS 樣式2. 定義超連結文字當「滑鼠經過」的狀態下，字體會放大為

20 pt，色彩也會改變的效果：

使用

CSS 樣式

當指標移到超連結文字上時，字體變大且色彩會改變

4 種狀態說明

a:link：「滑鼠未經過」狀態

定義滑鼠尚未移到超連結文字上的文字格式，

也就是一般情況下的超連結文字。

a:hover：「滑鼠經過」狀態

a:active：「滑鼠按下」狀態

定義滑鼠按下超連結文字時的文字格式

a:visited：「超連結已拜訪過」狀態

定義超連結文字的

超連結

已經拜訪過的文字格

式

網頁色彩

文字和背景呈對比

Index color

只存下256色

假設只有用12色，在使用影像軟體存檔時， save for web color，檔案較小。

網頁顏色模式

http://zh.wikipedia.org/wiki/%E7%BD% 91%E9%A1%B5%E9%A2%9C%E8%89 %B2%E6%A8%A1%E5%BC%8F

http://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8Fhttp://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8Fhttp://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8Fhttp://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2%E6%A8%A1%E5%BC%8F

網頁圖片格式

網頁圖片格式

解析度：72ppi(pixel per inch)

網頁色彩：RGB色彩

掃瞄影像：存成高解析度(tiff/ps) ，方便修改

GIF：插畫、文字、商標、簡單圖形及大塊色圖，

可設透明色彩，動畫

JPEG：照片、全彩圖檔

PNG：GIF(PNG-8)+JPEG(PNG-24)

缺點：無法儲存動畫檔

網頁圖片格式

GIF 可設定透明背景可儲存動畫格式

最多只能儲存 256 色以交錯圖的形式顯示

適合儲存具有線條、大塊色彩，

或是含有文字的圖片。像是卡通 圖案、商標等構圖簡單、顏色分 明的圖片。

JPEG 強大的壓縮率採用破壞性的壓縮方式

具有大塊的單一純色，或是明顯

的線條、文字，建議不要存成 JPEG 格式，否則當圖片壓縮後，

可能顏色效果不好，文字與線條 也可能產生模糊或斷裂的現象。

可儲存圖片中的所有色彩，因此

像是全彩的風景照、人物照...等

PNG 透明背景、交錯顯示、跨平台採非破壞性的壓縮方式，可減少

圖片的失真現象。無法儲存動畫檔

主要是用來取代

GIF 格式

目前有些影像處理軟體、瀏覽器

尚未支援

PNG 圖檔格式，所以此

圖檔格式尚未被普遍採用。

網頁排版

「表格」

「版面模式」

在『版面模式』中繪製表格

「圖層」

表格、圖層及面版之應用

「表格」、「版面」與「圖層」的差別與應用時機巢狀圖層及巢狀表格的應用，可以讓資料排列整齊，

又可隨意地自行調整位置。表格 需要做對照的資料，或是需要將資料排列整

齊時，可使用表格。圖層 需要將網頁元件

(例如：文字、圖片、表

格、…) 任意擺放時可使用圖層版面 要繪製複雜的表格，或是將表格定位，則可

切換到版面模式來編排。

學會了表格、版面模式與圖層的使用後，在 什麼時候該用什麼方法來提升網頁製作的效 率嗎？

雖然這沒有一定的標準答案，但還是有些規 則可循。

需要將網頁元件

(例如：文字、圖片、表 格、…) 任意擺放時可使用圖層。

「表格」、「版面模式」與「圖層」的差 別與應用時機

「表格」、「版面模式」與「圖層」的差 別與應用時機

需要做對照的資料，或是需要將資料排列整齊 時，可使用表格。

「表格」、「版面模式」與「圖層」的差 別與應用時機

要繪製複雜的表格，或是將表格定位，則可 切換到版面模式來編排。

「表格」、「版面模式」與「圖層」的差 別與應用時機

綜合巢狀圖層及巢狀表格的應用

可以讓資料排列整齊，又可隨意地自行調 整位置

在

Layer2 加入巢狀表格以對齊

Layer 1，並將

Layer 2 設定為

Layer 1 的子

圖層，方便同步調整位置。

「表格」、「版面模式」與「圖層」的差 別與應用時機

「表格」、「版面模式」與「圖層」的差 別與應用時機

表格應用的盲點

表格背景顏色

某儲存格顏色無法變更，請檢查該列或該欄是 否已設定其它背景顏色了，請先取消再設定該 儲存格顏色。

立體表格

邊框設定值：通常5最適合

邊框顏色不能設定，否則看不到立體效果。

邊框顏色被限制為#333333(上及左邊)及 #999999(底及右邊)

匯入表格

Dreamweaver8

匯入表格，請先存成*.txt

檔案>匯入>匯入表格式資料

插入>表格物件>匯入表格式資料

或在其軟體複製表格後，再使用編輯功能表 >貼上特殊效果。

表格與圖層的盲點

圖層偏位問題

儘可能使用絶對位置，不易隨視窗大小調整大小

將圖層轉成表格：命令功能表>轉換

IE及Netscape4.0以前的版本並沒有支援圖層，故須轉

成表格，才能讓各版本正常顯示。

轉換圖層絶對不可以重疊，將圖層面版上之避免重疊打

勾

放在網頁左邊或向左對齊且使用絶對位置

先以表格做外框，在儲存格中加入圖層(須設定相 對位置，才能被限制在儲存格中)

繪製面版

插入列>常用>面版>

面版表格

繪製面版儲存格

『版面模式』的特色

在版面模式中，表格和儲存格都是以拉曳的方式產生

可以任意移動儲存格

不能用斜線(html的限制)

繪製表格後>須再繪製面版儲存格才能輸入資料(在標準模式下建

立之表格之儲存格無法加入任何元件)

可直接繪製面版儲存格(會自動產生表格)

面版模式下無法使用圖層(原存在的layer則可以編輯)

自己拉曳出的儲存格無法加入巢狀表格(要切回標準模式)

用『版面模式』繪製表格

加入文字或圖片及調整儲存格

繪製與清除巢狀表格

頁框之應用

操作方式

插入列>常用>面版>頁框

插入>html>頁框

頁框之應用

頁框面版

頁框的應用

頁框與頁框組

分割頁框

指定頁框的網頁來源

設定頁框的屬性

頁框的應用

簡單說來，將一個完整的網頁視窗切割成不 同的區域，以放置不同的內容，就稱為頁框 。

在此以內政部憑證管理中心網頁 (http://moica.nat.gov.tw/html/index.htm)

為例

頁框的應用

頁框的應用

頁框與頁框組

範例網站中的數位攝影金像獎網頁 (mainframe.html) 也是運用頁框效果所設計

出來的網頁。

可以在

IE 中開啟網頁，如下操作：

頁框與頁框組

頁框與頁框組

頁框與頁框組

在網頁中看到的每一塊分割區域都是一個頁 框，而這些頁框的集合，就稱為頁框組

(Frameset)。

因此網頁視窗雖是被分割成三個頁框，實際

上卻總共用了

4 個網頁。

也就是

3 個頁框網頁，再加上包含一個記錄

頁框分割方式的網頁

─頁框組，所組合而成 。

頁框與頁框組

頁框可以將原本單一的網頁視窗分割成適當 的區域，讓每個頁框顯示出不同的網頁內容 。只要能把握住這項特性，網頁製作者便可 以利用不同的頁框分割方式，呈現出最佳的 網頁效果了。

WEB Design投影片摘要投影片摘要 (續)網站建立的前製工作網站的建立檔案命名規則-首頁檔案命名規則-根目錄檔案命名規則-檔案名稱檔案命名規則-分類管理檔案命名規則-建立檔案架構建立網站檔案架構認識網址認識網頁瀏覽器網頁瀏覽器（分類）認識網頁瀏覽器Opera設定網頁的語系編碼投影片摘要網頁支援語系設定網頁的語系編碼網頁的語系設定方式-Dreamweaver8網頁的語系設定方式-Frontpage2003設定預設的語系編碼設定預設的語系編碼目前網頁的語系設定製作多國語言的網頁Dreamweaver8的設定方式Dreamweaver8的設定方式Dreamweaver8的設定方式Frontpage2003的設定方式Frontpage2003的設定方式Frontpage2003的設定方式Frontpage2003的設定方式製作多國語言的網頁不可不知Unicode 小常識製作多國語言網頁的必要條件製作多國語言網頁的必要條件製作多國語言網頁的必要條件如何取得輸入法及 Unicode 字型網頁基本編輯-文字設定文字字型設定文字字型設定文字及表格排版超連結超連結-什麼是超連結超連結設定方式超連結設定方式加入內部超連結加入內部超連結加入超連結文字加入超連結文字加入超連結文字加入超連結文字加入超連結文字加入超連結文字連結下拉選單為圖片加上超連結為圖片加上超連結超連結裡包含中文字的問題加入錨點 (Anchor)加入錨點 (Anchor)加入錨點 (Anchor)加入錨點 (Anchor)加入錨點 (Anchor)加入錨點 (Anchor)加入外部超連結外部超連結的設定方式讓瀏覽者下載檔案下載檔案的格式下載檔案的格式變換超連結文字狀態變換超連結文字狀態變換超連結文字狀態修改頁面屬性的設定其他超連結狀態說明使用 CSS 樣式使用 CSS 樣式使用 CSS 樣式使用 CSS 樣式4 種狀態說明網頁色彩網頁圖片格式網頁圖片格式網頁圖片格式網頁排版表格、圖層及面版之應用「表格」、「版面模式」與「圖層」的差別與應用時機「表格」、「版面模式」與「圖層」的差別與應用時機「表格」、「版面模式」與「圖層」的差別與應用時機「表格」、「版面模式」與「圖層」的差別與應用時機「表格」、「版面模式」與「圖層」的差別與應用時機「表格」、「版面模式」與「圖層」的差別與應用時機表格應用的盲點匯入表格表格與圖層的盲點繪製面版頁框之應用頁框的應用頁框的應用頁框的應用頁框與頁框組頁框與頁框組頁框與頁框組頁框與頁框組頁框與頁框組