第十一章網站設計實務

第十一章網站設計實務第十一章網站設計實務

備註：可依進度點選小節

11-1 認識網站

11-2 HTML簡介

11-3 動態網頁簡介

第十一章多媒體網頁設計

11-7 以 Dreamweaver建立網站 11-8 Dreamweaver的基本操作 11-9 以網站架構圖建立網頁檔

11-6 Dreamweaver的面板操作

11-4 網頁配色快易通 11-10 相對路徑與絶對路徑

11-5 Dreamweaver CS4 快速入門

3

• 近年來全球吹起了網際網路的風潮，從電子商務網站到私人的個性化網頁，一瞬間幾乎所有的資訊都連上了網際網路。然而這些資訊取得的介面大多靠的是五花八門的網頁介紹，因此網頁架設已成為全民學習的浪潮。

• 當然網頁技術的種類也不斷地推陳出新，由HTML 、 CSS 到炙手可熱的 ASP( 動態伺服器網頁 ) 或 ASP.NET ，亦或是客戶端的JavaScript 、 Dreamweaver 到伺服端的 JSP 等。從本章開始要開始進入到網站設計的領域，藉由本篇深入淺出的介紹，相信各位都可以很輕易的學會網站設計的觀念及方式。

第十一章網站設計實務

4

什麼是網站（ Website ）？簡單而言就是用來放置網頁（ Page ）及相關資料的地方，當我們使用工具設計網頁之前，必須先在自己的電腦上建立一個資料夾，用來儲存所設計的網頁檔案，而這個檔案資料夾就稱為「網站資料夾」。當所有的網頁設計完成後，接下來就要讓別人可以經由網際網路的連線，然後到我們所設計的網頁上瀏覽，此時放置頁面的「網站資料夾」就是一個「網站」了。

11-1 認識網站

5

當各位以瀏覽器進入某一個網站後，所看到的第一個網頁畫面，即稱為「首頁」。網頁（ Page ）及首頁（ Homepage ）也是初學者易於混淆的觀念，當瀏覽者連線到網站時，一定要有個頁面來作為瀏覽者最先看到畫面，接著再利用此頁面中的超連結來繼續瀏覽其他網頁畫面，這個瀏覽者最先看到網頁稱為首頁（ Homepage ），其他的頁面則稱為（ Page ）。

通常為了達到迅速彰顯這個網站主題的效果，首頁設計就顯得相當重要！從首頁中還可以透過按下超連結功能，再進入此網站的其他相關網頁，簡單來說，我們可以將網站看成是網頁的集合。至於網頁畫面中的基本組成元素有文字、圖片及超連結等項目，其中文字及圖片是用來表達頁面中的資料內容。但是網站中當然不可能只有一個頁面，此時「超連結」就負起了各個網頁之間串連的工作。簡單說明如下：

11-1-1 網頁基本元素

6

網頁基本元素特色與說明

文字文字構成網頁主題，用來傳達網頁訊息，它包含了標題、大小、層次、樣式與顏色。

圖形善用圖形能豐富網頁內容。常用的圖例類型有JPG 、 GIF 、 PNG ，每張圖片的應用包含有標題、背景圖、主圖等。

超連結超連結的使用，可讓上網者悠游在不同網頁和不同網站。

7

不過網頁效果的技術一日千里，單純的文字及圖片已經無法滿足設計及瀏覽者的需求，加上背景音樂、 Flash 動畫、 JavaScript 等多媒體互動式特效是目前網頁設計的主流，如下所示：

http://www.tpbbdo.com.cy/bbdo.html

8

基本上，建置一個網站的流程大致如下圖所示：

步驟一：擬定網站主題，才能針對網站收集相關資料，並規劃出此網站所需網頁及相關素材。以公司網站為例，具有線上購物機制或僅提供產品資料查詢就是二種不同的主題訴求。

11-1-2 建置網站流程

http://www.momoshop.com.tw/main/Main.jsp

9

由於網站也算是商品的一種，要怎麼讓網站具有高點閱率就是在設計之前的規劃重點，雖然我們不可能為了建置一個網站而進行市場調查，但是若能在網站建立之前，先針對「網站主題」及「客戶族群」多與客戶及團隊成員討論，必定可以讓這個網站更加的成功。

http://www.ikea.com/

10

步驟二：開始繪製網站架構圖，並進行頁面設計，與選擇一個製作網頁與處理影像的軟體，如 FrontPage 、 Dreamweaver 等。基本上，網站架構圖同時也是導覽頁面中，連結按鈕設計的依據，當各位進入到網站之後，就是根據頁面上的連結按鈕來找尋資料頁面。

11

http://www.kcg.gov.tw/

12

尤其瀏覽動線就像是車站或機場中畫在地上的一些彩色線條，而瀏覽動線設計的線條會導引上網流覽者到想要去的地方而不會送失方向。

此外，在進行頁面設計之前，各位可以先將網頁背景圖案、連結按鈕及 Flash 動畫先設計好，最後再進行頁面效果組合，頁面設計，接下來才會開始運用到網頁設計軟體，如Dreamweaver 的設計功能。在使用 Dreamweaver 來新增網站及網頁後，就準備將各個成員設計好的資料在此作整合，以完成整個網站的建置。

13

步驟三：將製作完成的網頁進行上傳與測試，這時必須要知道申請網頁空間的大小，是否能容納製作的網頁，另外還包括不同瀏覽器的觀看效果、螢幕解析度與螢幕大小、色彩顯示、字型的設定，網路的傳輸速度等。網站完成後總要有一個窩來讓使用者可以進入瀏覽，目前使用的方式有「自行架設伺服器」、「虛擬主機」及「申請網站空間」等三種方式可以選擇，其中的差異請看如附表中的說明：

15

從上表中得知，若以功能性而言，自行架設伺服器主機當然是最佳方案，但是建置所花費的成本就是一筆不小的開銷。若以一般公司行號而言，初期採用「虛擬主機」是一個不錯的選擇，而且可以視網站的需求，選用主機的功能等級與費用，將自行架設伺服器主機當作公司中長期的方案。如下所示的網站，就有提供虛擬主機服務的網站：

http://www.nss.com.tw/zgc.php

16

步驟四：除了持續網站內容宣傳，還要去較具規模的網站，如雅虎登錄來推廣網站，網頁的內容必須經常進行更新與維護。好的廣告及行銷手法可以增進商品的市場佔有率，各位可以到各大搜尋引擎去登錄網址，好讓瀏覽者輸入搜尋文字時，可以看到我們的網站名稱。除此之外，和其他網站交換連結也是個不錯的方式，如果這個網站的公司有編列廣告預算的話，那麼在各大入口網站放置廣告圖片，也是一個最直接的行銷手法。

17

http://reg.yam.com/register/register.asp

18

定期對網站做內容維護及資料更新，是維持網站競爭力的不二法門。我們可定期或是在特定節日時，改變頁面的風格樣式，這樣可以持續為網站帶給瀏覽者的新鮮感。而資料更新就是要隨時注意的部份，避免商品在市面上已流通了一段時間，但網站上的資料卻還是舊資料的狀況發生。另外網站內容的擴充也是更新的重點之一。網站建立初期，其內容及種類都會較為單純。但是時間一久，慢慢就會需要增加內容，讓整個網站資料更加的完備，關於這方面，也建議各位多去參考其他同類型的網站，或是相關資料書籍，勤做筆記與多下工夫，才能真正的讓網站長長久久。

19

要撰寫網頁的 HTML語法時，只要使用Windows預設的記事本就可以了，請先開啟Windows XP中附屬應用程式中的記事本，然後輸入下面的文字資料：

11-2 HTML 簡介

20

接著在存檔時輸入 (htm)副檔名：

21

最後按二下直接開啟剛才所儲存的檔案，畫面內容如下：

這個就是利用語法來設計網頁的方式，而這個語法稱為「超文字標記語言， HyperText Markup Language」英文簡稱為 HTML，也因此網頁檔案的副檔名則為 htm 、 html 、 asp 與 aspx等。

22

語法對稱性 HTML屬於「對稱性」的語法，大部份語法都是成雙成對的，「 <>」的作用代表著裡面的英文字是一個 HTML語法指令，「 <>」內沒有加上「 /」表示是語法開始，有加上「 /」表示是語法結束。

11-2-1語法基本結構

23

如圖中的 <Html>和 </Html>就是一組語法，其他的依此類推。同時語法中並沒有區分英文字母的大小寫，而語法前面的空白也可以視個人的習慣決定是否加入，不過這裏建議各位最好還是利用空白鍵來區隔出程式碼的內容結構，這樣在檢查語法內容時會方便許多：

24

語法結構性 HTML語法的「結構性」則是指語法的擺放位置，這裡先列出前面所使用到的語法功能：

25

接著再一次對照圖中記事本的語法內容：

26

字體大小字體大小可使用 <H>及 <Font Size>二種語法來進行設定。以 <H>為例，只要將要設定的文字內容放置在 <H>及 </H>之間即可：

11-2-2 文字格式語法

27

<H>語法的設定內容及效果

28

<Font Size>語法的設定內容及效果：

若要讓文字進行換行可以加上 <Br>語法：

29

粗體、斜體及底線粗體、斜體及底線的語法為 <B>、 <I>和 <U>，這三種語法不僅可單獨使用，也可以混合使用。

30

文字顏色文字顏色的語法為 <Font Color=” 顏色值” >，這裡的顏色值是採用「 RGB顏色的十六進位碼」及「顏色名稱」等二種方式，不過有些 RGB的顏色值和我們使用的顏色名稱會有一些出入 (如圖中的綠色 )，請注意：

31

加入圖片的方式影像的加入是使用 <img>語法，「 src」參數則是指定來源影影像的位置及檔案名稱。底下用個例子來說明：

11-2-3 圖片的應用

<Html><Body><Img Src="A004.gif"></Body></Html>

32

圖片語法的其他設定 (1)Alt 參數

• 「 Alt」參數可以當滑鼠游標停留在影像上方時所顯示的提示文字，同時此文字也可以在影像無法正確顯示時顯示此文字：

33

(2)Width 及 Height 參數• 用來設定圖片在畫面上顯示時的寬度及高度：

34

在 HTML之中，所有的超連結都是使用 <a>標籤語法來建立，而不同的超連結類型只是運用 href參數指定不同的連結方式。另外HTML標記中有四個屬性可以讓您選定文字顏色、連結字顏色、甚至您按下連結文字後的顏色變化，讓瀏覽者知道哪些檔案已經閱讀過：

11-2-4網頁超連結

35

連結到網站中其他各頁的超連結

連結到其他網址的超連結

36

電子郵件超連結

檔案下載超連結

37

圖片超連結在 <a>和 </a>的語法之中加入 <img>圖片語法就可以替圖片加上超連結效果。

38

表格所使用到的 HTML標籤共有三組，分別是<Table> 、 <Tr>及 <Td>，其中 <Table>區段是由許多個 <Tr>所構成，而 <Tr>區段則是由一個以上的 <Td>所組成。在 <Td>區段裡的內容，即是要顯示的資料，至於 <Tr>標籤則是用來分隔資料列。

11-2-5 製作表格功能

39

簡單的表格應用： <Html><Body><Table Border="1"><Tr> <Td><Img Src="pic1.tif"></Td> <Td><Img Src="pic2.tif"></Td></Tr><Tr> <Td> 圖片一 </Td> <Td> 圖片二 </Td></Tr><Table></Body></Html>

40

CSS樣式表只使用 HTML語法時

• 此時必須對每一個要建立格式效果的文字都加上語法標籤才能一一看到效果。

11-3 動態網頁簡介

41

使用 CSS效果 • 若使用 CSS時只要事先定義好 <H1>的文字格式效果，再來直接進行套用即可。

11-3-1CSS樣式表

畫面預覽結果

42

• 想要調整文字顏色，只要變更「 Color語法之後的顏色值」即可，勿須再一一加以修改。

43

語法說明

事實上，在頁面中加入的 CSS語法可區分為定義及使用二種。定義是用於設定格式效果內容，而使用則是設定要套用樣式效果的頁面區域。

44

(1) 設定單一 HTML 語法標籤的 CSS 效果此種方式是將現有的 HTML語法標籤加上 CSS效果，如圖中我們是將 <H1>標籤加入「文字顏色」及「置中對齊」的效果。

11-3-2CSS 的定義

45

(2) 同時設定多組 HTML 語法標籤的 CSS 效果• 我們可以同時對多組 HTML語法標籤加入 CSS效果的。

(3)自訂標籤的 CSS 效果• 若是現有的語法標籤都不適於加入 CSS效果時，則另外自訂一個標籤來加入 CSS效果，不過要注意的是自訂樣式標籤的前面要加上一點。

46

CSS的使用 (1) 直接在 HTML 語法標籤中加入 CSS 樣式效果

• 這種方式適用於只有特定文字需要 CSS效果時，只要在語法標籤加上「 Sytle=” 樣式效果”」即可。

47

(2) 使用設定 HTML 語法標籤的方式加入 CSS 效果

• 當頁面中多處區域需要相同的 CSS效果時則採用此方法。

48

(3) 使用自訂標籤的方式加入 CSS 效果• 和上述方法一樣，適用於頁面中多處區域需要相同的CSS效果時，只要在語法標籤中加入「 Class=自訂標籤名稱」即可使用。

49

透過 CSS功能還可以任意調整網頁文繞圖的形式、濾鏡特效、漸層效果、光暈效果、探照燈效果、淡入淡出效果等，請看以下範例網頁。

網頁上的文繞圖效果網頁上的各種濾鏡效果

50

網頁上的探照燈效果網頁上的轉場效果

51

網站設計是設計作品的一種，除了內容主題的文字之外，同時也要考量到頁面佈局及配色的美觀性，讓每位瀏覽者都能對設計的網站印象深刻。尤其網頁儼然成為推銷產品、公司行號及個人的一項利器，很多網頁設計師都會特別善用色彩來做推銷，讓網站與該公司的形象合而為一。

11-4 網頁配色快易通

http://163.29.104.6/kidsart/index.html

52

對於精心設計的網頁畫面，有時在其他瀏覽器或平台上所呈現的效果並不如預期中的效果好，這是因為不同的平台或瀏覽器都有各自的調色盤所致。因此如何讓網頁在任何的顯示器、作業系統或瀏覽器上都能顯示相同的效果，這時就必須了解網頁安全色的功用。

11-4-1 網頁配色技巧

http://www.nanshanlife.com.tw/

53

包含如下的 216種色彩，各位可以在繪圖軟體中輸入 RGB數值，即可得到該顏色，或是在 HTML語法中輸入它的 16進位，網頁編輯程式即可轉譯成該顏色：

11-4-2 網頁安全色

54

以 Photoshop為例，當使用者按下顏色色塊進入檢色器裡，只要勾選「僅網頁色彩」，那麼所選定的顏色就可以適用於網頁上：

55

又如 PhotoImpact也是大家所愛用的網頁編輯程式，在「色彩面板」右側下拉選擇「色譜中的Web安全色彩」，就可以使用網頁安全色：

56

在配色的過程中，也必須注意「網頁配色」與「頁面佈局」的一致性，因為配色只是一種輔助及參考，以「專業」特質為配色效果來看，多多少少要隨著不同的頁面佈局，而針對配色效果中的某個顏色來加以修正，如果執著於書籍中的配色方式，有可能會得到反效果也說不定。所以在配色時要和調整頁面佈局的步驟一起進行，如此才可使得頁面效果更盡善盡美。

14-4-3 網頁配色簡介

57

網站配色的範例：

http://tw.asus.com/

冷色系看起來就非常具有專業的風格

http://www.baby-mother.com.tw/

暖色系帶給人較為溫馨的感覺

http://www.agisgame.com.tw/Show/index.asp

顏色對比強烈的配色會帶給人較有活力的感覺

58

以色相配色的角度來說，色彩是以紅、橙、黃、綠、藍、紫的順序排列成如下的色相環：

11-4-4網頁色相配色

59

類似色相的配色假如選用紅色為網頁的主色調，那麼可以設定橙色和紫色與其搭配，選用黃色為主色調時，則選用橙色和綠色與其搭配；因為橙色和紫色就緊鄰在紅色的左右兩旁，而橙色和綠色緊鄰在黃色的兩側，這樣的色相搭配既有變化，也不會太突兀。

類似色相的配色 (黃 / 綠色 )

60

互補色相的配色假如選用紅色為網頁的主色調，若選用其對角位置的黃綠、綠、藍等互補色相來做搭配，則其效果會變得較強眼，尤其紅、綠色兩色放置在一起時，紅色會變得更鮮紅，綠色會更翠綠。

互補色相的配色 (橙 /藍 )

61

如下圖是顯示紅色調的情形；最右側是彩度最高，顏色最鮮艷紅色，當紅色加入白色後，它會變成「明亮」色，再加入白色，它會變成「淺」色，再加入白色，依序變成「淡」色，甚至趨近白色。

11-4-5網頁色調配色

明度

彩度表

62

類似色調的配色以「淡」色為例，與其鄰近的色調就稱為「類似色調」，諸如淺色、帶淺灰、淺灰等色均屬之。如下圖的網頁，就是以橙色的類似色調為主軸，整個網頁給人很沉穩、平和的感覺。

類似色調的配色 (橙色調 )

63

相對色調的配色距離「淡」色較遠的色調則稱為「相對色調」，諸如：鮮豔、濃、暗、帶暗灰…等色，由於其明暗的對比差異較大，因此易形成視覺注意的焦點。

相對色調的配色 (綠色調 )

64

Dreamweaver原先是由 Macromedia公司發展的一套網頁設計與編輯器軟體。從 Dreamweaver 推出到現在，就一直是專業網站設計者心目中最理想的開發工具。除了內建的設計功能以外，網路上還有許許多多為 Dreamweaver量身訂做的擴充元件(Extension) ，各位只要下載之後直接安裝，就能持續擴充Dreamweaver 的網頁設計功能。因為擁有多項強大的設計功能及特點，所以 Dreamweaver 也成為了目前擁有最多使用者的網頁設計軟體。 Dreamweaver提供網頁規劃、設計到管理全方位功能，兼顧設計與程式開發，是製作網頁時的不二之選。提供「所見即所得」的視覺化環境，設計階段即能準確掌握呈現效果。軟體的強大設計功能，讓網頁設計人員能輕易擺脫 HTML原始碼的限制，以較少的時間做出具專業水準的網站。

11-5 Dreamweaver CS4 快速入門

65

11-5-1啟動 Dreamweaver

66

11-5-2 認識 Dreamweaver視窗環境

67

功能表放置 Dreamweaver各項編輯指令的區域，不過許多功能指令可以透過滑鼠右鍵所顯示的快顯功能表來執行。插入面板插入面板用來插入各式各樣的網頁元件，面板上的每一個圖示都代表著一種元素，只要點選面板中的功能圖示，就可以將相關元件放置到網頁上。至於「插入」面板的開啟及隱藏，可由「視窗 /插入」來進行。

68

文件視窗是網頁內容的編輯區域，設計出來的網頁畫面與實際上線時的呈現效果幾乎一模一樣。

屬性面板對頁面中的各種元素進行調整及編輯。當各位在頁面上點選不同的網頁元素時，屬性面板也會對應顯示不同的屬性。執行「視窗 / 屬性」可決定是否顯示「屬性面板」。

其他工作面板是安排各種輔助編輯的面板，畫面上所看到「 CSS樣式」、「 AP元素」、「檔案」及「資源」是在Dreamweaver預設啟動的工作面板。

69

Dreamweaver也提供了「開新檔案」、「儲存檔案」及「剪下」、「複製」、「貼上」等快速工具按鈕。

71

11-6-1 面板的開啟與隱藏 Dreamweaver的所有面板可以經由「視窗」功能表來開啟。當各位下拉「視窗」功能表時，就可繼續在下方的清單中選取所要開啟的面板名稱。如果面板名稱之前有出現 D006的圖示，就表示該面板目前是開啟的狀態。

11-6 Dreamweaver 的面板操作

72

以下圖為例，目前畫面包含「檔案」及「資源」兩個面板功能。

74

11-6-2 展開與收合面板

75

11-6-3 調整面板大小

76

11-6-4 調整面板位置

78

點取面板群組的最右側時會出現功能表清單，不同的面板都有其專屬的功能表內容。如下圖所示是「檔案」面板的功能表

11-6-5 使用面板功能表

79

11-6-6 新增工作區

80

請先依照前面介紹的方式調整適合您的面板位置，再由視窗上方下拉選擇「新增工作區」指令，就可以再開啟的視窗中輸入自訂的工作區版面。

82

11-6-7 插入面板的類別切換

85

11-7-1 開始建立網站請先在硬碟中（以 C 磁碟機）新增一個名為「 education」的資料夾，同時在此資料夾之下再新增一個名為「 images」的子資料夾，這個「 images」子資料夾將要用來放置網站中的所有圖片檔案。

11-7 以 Dreamweaver 建立網站

92

11-7-2 網站的管理

94

視窗中的各個按鈕功能說明

95

11-7-3 多個網站之間的切換

97

11-7-4 網站的匯入方式

100

11-8-1新增網頁檔案

11-8 Dreamweaver 的基本操作

102

11-8-2 新增網站資料夾

103

11-8-3 網頁檔案的編輯與開啟

106

如果工作區上有多個網頁被開啟，那麼可以透過文件上方的標籤來做切換。如圖示：

107

11-8-4 切換頁面的編輯模式

109

11-8-5 設定頁面的編碼方式

110

若要變更整個網站的預設語系時，請執行「編輯 /偏好設定」指令來做設定。

111

11-8-6 設定編輯區大小

113

執行「編輯 /偏好設定」指令，透過這裡的設定，就不用一個個頁面作設定修改。

11-8-7 設定頁面字體大小的預設值

114

如果是要調整特定頁面的字體大小的預設值，則請執行「修改 / 頁面屬性」指令做修正。

115

以 CSS語法作外觀設定

11-8-8設定頁面背景

116

以 HTML標籤作外觀設定

117

頁面標題文字是顯示於瀏覽器視窗左上角的標題文字。

11-8-9設定頁面標題文字

119

網站架構圖

11-9 以網站架構圖建立網頁檔

120

網頁檔案的命名

121

新增的檔案清單

123

請執行「檔案 /於瀏覽器中預覽 /編輯瀏覽器清單」指令，即可進入以下的視窗來設定其它的瀏覽器程式。

11-9-1 設定預覽畫面的瀏覽器

124

11-10-1 圖片與路徑的關係由於 Dreamweaver是採用網頁畫面及圖片分開設計的方式，因此圖片影像的來源位置並不一定會在網站資料夾之中，而是位於電腦中的其他資料夾（以 C:\WebImage為例），在這種情況下如果我們將影像加入到頁面中時就會看到如圖的視窗畫面。

11-10 相對路徑與絶對路徑

125

這時如果點選鈕，則 Dreamweaver會詢問你要將影像複製一份到網站資料夾中的什麼地方（在此以網站中的「 images」資料夾為例）。

126

而在屬性面板中也會顯示圖檔位置，因為目前編輯的頁面與存放圖片的「 images」資料夾都是「相對於」網站資料夾之下，所以不需要特別去指定圖片檔案的正確路徑位置「 C:\education\images\ad.jpg 」，只要註明「 images\ad.jpg 」 Dreamweaver就能判斷圖片檔案的正確位置，以上的觀念就是「相對路徑」。

127

反之若點選鈕，此時 Dreamweaver就不會將影像複製一份到網站資料夾之中，也因此要在屬性面板內明確指定影像檔案的來源位置，如此才能在使用瀏覽器預覽網頁畫面時可以正確顯示圖片內容，像這種以完整路徑指定圖片的方式就是「絶對路徑」。

128

若我們在網站資料夾新增一個網頁檔案，而且在檔案還未儲存時就在頁面上建立超連結的話，會看到如圖中的訊息視窗。

11-10-2 超連結與路徑的關係

129

當點選以後，在屬性面板上會顯示如下圖的連結路徑，這表示目前所使用的是「絶對路徑」，主要是因為目前頁面還未儲存，所以 Dreamweaver無法判斷目前頁面與超連結之間的路徑關係，只好暫時使用「絶對路徑」來指定連結的位置。

130

Q&A討論時間

本章結束

第十一章 網站設計實務

Documents

第十一章網站設計實務