Download
1 / 130
1.3k likes | 1.48k Views
第十一章 網站設計實務. 章節大綱. 第十一章 多媒體網頁設計. 11-6 Dreamweaver 的面板操作. 11-1 認識網站. 11-7 以 Dreamweaver 建立網站. 11-2 HTML 簡介. 11-8 Dreamweaver 的基本操作. 11-3 動態網頁簡介. 11-9 以網站架構圖建立網頁檔. 11-4 網頁配色快易通. 11-10 相對路徑與絶對路徑. 11-5 Dreamweaver CS4 快速入門. 備註：可依進度點選小節. 第十一章 網站設計實務.
E N D
章節大綱 第十一章 多媒體網頁設計 11-6 Dreamweaver的面板操作 11-1 認識網站 11-7 以Dreamweaver建立網站 11-2 HTML簡介 11-8 Dreamweaver的基本操作 • 11-3 動態網頁簡介 • 11-9 以網站架構圖建立網頁檔 • 11-4 網頁配色快易通 • 11-10 相對路徑與絶對路徑 • 11-5 Dreamweaver CS4 快速入門 備註：可依進度點選小節
第十一章 網站設計實務 • 近年來全球吹起了網際網路的風潮，從電子商務網站到私人的個性化網頁，一瞬間幾乎所有的資訊都連上了網際網路。然而這些資訊取得的介面大多靠的是五花八門的網頁介紹，因此網頁架設已成為全民學習的浪潮。 • 當然網頁技術的種類也不斷地推陳出新，由HTML、CSS到炙手可熱的ASP(動態伺服器網頁) 或ASP.NET，亦或是客戶端的JavaScript、Dreamweaver到伺服端的JSP等。從本章開始要開始進入到網站設計的領域，藉由本篇深入淺出的介紹，相信各位都可以很輕易的學會網站設計的觀念及方式。
11-1認識網站 什麼是網站（Website）？簡單而言就是用來放置網頁（Page）及相關資料的地方，當我們使用工具設計網頁之前，必須先在自己的電腦上建立一個資料夾，用來儲存所設計的網頁檔案，而這個檔案資料夾就稱為「網站資料夾」。當所有的網頁設計完成後，接下來就要讓別人可以經由網際網路的連線，然後到我們所設計的網頁上瀏覽，此時放置頁面的「網站資料夾」就是一個「網站」了。
11-1-1網頁基本元素 當各位以瀏覽器進入某一個網站後，所看到的第一個網頁畫面，即稱為「首頁」。網頁（Page）及首頁（Homepage）也是初學者易於混淆的觀念，當瀏覽者連線到網站時，一定要有個頁面來作為瀏覽者最先看到畫面，接著再利用此頁面中的超連結來繼續瀏覽其他網頁畫面，這個瀏覽者最先看到網頁稱為首頁（Homepage），其他的頁面則稱為（Page）。 通常為了達到迅速彰顯這個網站主題的效果，首頁設計就顯得相當重要！從首頁中還可以透過按下超連結功能，再進入此網站的其他相關網頁，簡單來說，我們可以將網站看成是網頁的集合。 至於網頁畫面中的基本組成元素有文字、圖片及超連結等項目，其中文字及圖片是用來表達頁面中的資料內容。但是網站中當然不可能只有一個頁面，此時「超連結」就負起了各個網頁之間串連的工作。簡單說明如下：
網頁基本元素 特色與說明 文字 文字構成網頁主題，用來傳達網頁訊息，它包含了標題、大小、層次、樣式與顏色。 圖形 善用圖形能豐富網頁內容。常用的圖例類型有JPG、GIF、PNG，每張圖片的應用包含有標題、背景圖、主圖等。 超連結 超連結的使用，可讓上網者悠游在不同網頁和不同網站。
不過網頁效果的技術一日千里，單純的文字及圖片已經無法滿足設計及瀏覽者的需求，加上背景音樂、Flash動畫、JavaScript等多媒體互動式特效是目前網頁設計的主流，如下所示：不過網頁效果的技術一日千里，單純的文字及圖片已經無法滿足設計及瀏覽者的需求，加上背景音樂、Flash動畫、JavaScript等多媒體互動式特效是目前網頁設計的主流，如下所示： http://www.tpbbdo.com.cy/bbdo.html
11-1-2建置網站流程 基本上，建置一個網站的流程大致如下圖所示： 步驟一：擬定網站主題，才能針對網站收集相關資料，並規劃出此網站所需網頁及相關素材。以公司網站為例，具有線上購物機制或僅提供產品資料查詢就是二種不同的主題訴求。 http://www.momoshop.com.tw/main/Main.jsp
由於網站也算是商品的一種，要怎麼讓網站具有高點閱率就是在設計之前的規劃重點，雖然我們不可能為了建置一個網站而進行市場調查，但是若能在網站建立之前，先針對「網站主題」及「客戶族群」多與客戶及團隊成員討論，必定可以讓這個網站更加的成功。由於網站也算是商品的一種，要怎麼讓網站具有高點閱率就是在設計之前的規劃重點，雖然我們不可能為了建置一個網站而進行市場調查，但是若能在網站建立之前，先針對「網站主題」及「客戶族群」多與客戶及團隊成員討論，必定可以讓這個網站更加的成功。 http://www.ikea.com/
步驟二：開始繪製網站架構圖，並進行頁面設計，與選擇一個製作網頁與處理影像的軟體，如FrontPage、Dreamweaver等。步驟二：開始繪製網站架構圖，並進行頁面設計，與選擇一個製作網頁與處理影像的軟體，如FrontPage、Dreamweaver等。 基本上，網站架構圖同時也是導覽頁面中，連結按鈕設計的依據，當各位進入到網站之後，就是根據頁面上的連結按鈕來找尋資料頁面。
尤其瀏覽動線就像是車站或機場中畫在地上的一些彩色線條，而瀏覽動線設計的線條會導引上網流覽者到想要去的地方而不會送失方向。尤其瀏覽動線就像是車站或機場中畫在地上的一些彩色線條，而瀏覽動線設計的線條會導引上網流覽者到想要去的地方而不會送失方向。 此外，在進行頁面設計之前，各位可以先將網頁背景圖案、連結按鈕及Flash動畫先設計好，最後再進行頁面效果組合，頁面設計，接下來才會開始運用到網頁設計軟體，如Dreamweaver的設計功能。在使用Dreamweaver來新增網站及網頁後，就準備將各個成員設計好的資料在此作整合，以完成整個網站的建置。
步驟三：將製作完成的網頁進行上傳與測試，這時必須要知道申請網頁空間的大小，是否能容納製作的網頁，另外還包括不同瀏覽器的觀看效果、螢幕解析度與螢幕大小、色彩顯示、字型的設定，網路的傳輸速度等。步驟三：將製作完成的網頁進行上傳與測試，這時必須要知道申請網頁空間的大小，是否能容納製作的網頁，另外還包括不同瀏覽器的觀看效果、螢幕解析度與螢幕大小、色彩顯示、字型的設定，網路的傳輸速度等。 網站完成後總要有一個窩來讓使用者可以進入瀏覽，目前使用的方式有「自行架設伺服器」、「虛擬主機」及「申請網站空間」等三種方式可以選擇，其中的差異請看如附表中的說明：
從上表中得知，若以功能性而言，自行架設伺服器主機當然是最佳方案，但是建置所花費的成本就是一筆不小的開銷。若以一般公司行號而言，初期採用「虛擬主機」是一個不錯的選擇，而且可以視網站的需求，選用主機的功能等級與費用，將自行架設伺服器主機當作公司中長期的方案。如下所示的網站，就有提供虛擬主機服務的網站：從上表中得知，若以功能性而言，自行架設伺服器主機當然是最佳方案，但是建置所花費的成本就是一筆不小的開銷。若以一般公司行號而言，初期採用「虛擬主機」是一個不錯的選擇，而且可以視網站的需求，選用主機的功能等級與費用，將自行架設伺服器主機當作公司中長期的方案。如下所示的網站，就有提供虛擬主機服務的網站： http://www.nss.com.tw/zgc.php
步驟四：除了持續網站內容宣傳，還要去較具規模的網站，如雅虎登錄來推廣網站，網頁的內容必須經常進行更新與維護。步驟四：除了持續網站內容宣傳，還要去較具規模的網站，如雅虎登錄來推廣網站，網頁的內容必須經常進行更新與維護。 好的廣告及行銷手法可以增進商品的市場佔有率，各位可以到各大搜尋引擎去登錄網址，好讓瀏覽者輸入搜尋文字時，可以看到我們的網站名稱。除此之外，和其他網站交換連結也是個不錯的方式，如果這個網站的公司有編列廣告預算的話，那麼在各大入口網站放置廣告圖片，也是一個最直接的行銷手法。
定期對網站做內容維護及資料更新，是維持網站競爭力的不二法門。我們可定期或是在特定節日時，改變頁面的風格樣式，這樣可以持續為網站帶給瀏覽者的新鮮感。而資料更新就是要隨時注意的部份，避免商品在市面上已流通了一段時間，但網站上的資料卻還是舊資料的狀況發生。另外網站內容的擴充也是更新的重點之一。網站建立初期，其內容及種類都會較為單純。但是時間一久，慢慢就會需要增加內容，讓整個網站資料更加的完備，關於這方面，也建議各位多去參考其他同類型的網站，或是相關資料書籍，勤做筆記與多下工夫，才能真正的讓網站長長久久。定期對網站做內容維護及資料更新，是維持網站競爭力的不二法門。我們可定期或是在特定節日時，改變頁面的風格樣式，這樣可以持續為網站帶給瀏覽者的新鮮感。而資料更新就是要隨時注意的部份，避免商品在市面上已流通了一段時間，但網站上的資料卻還是舊資料的狀況發生。另外網站內容的擴充也是更新的重點之一。網站建立初期，其內容及種類都會較為單純。但是時間一久，慢慢就會需要增加內容，讓整個網站資料更加的完備，關於這方面，也建議各位多去參考其他同類型的網站，或是相關資料書籍，勤做筆記與多下工夫，才能真正的讓網站長長久久。
11-2 HTML簡介 • 要撰寫網頁的HTML語法時，只要使用Windows預設的記事本就可以了，請先開啟Windows XP中附屬應用程式中的記事本，然後輸入下面的文字資料：
最後按二下直接開啟剛才所儲存的檔案，畫面內容如下： • 這個就是利用語法來設計網頁的方式，而這個語法稱為「超文字標記語言，HyperText Markup Language」英文簡稱為HTML，也因此網頁檔案的副檔名則為 htm、html、asp與aspx等。
11-2-1語法基本結構 • 語法對稱性 • HTML屬於「對稱性」的語法，大部份語法都是成雙成對的，「<>」的作用代表著裡面的英文字是一個HTML語法指令，「<>」內沒有加上「/」表示是語法開始，有加上「/」表示是語法結束。
語法結構性 • HTML語法的「結構性」則是指語法的擺放位置，這裡先列出前面所使用到的語法功能：
11-2-2文字格式語法 • 字體大小 • 字體大小可使用<H>及<Font Size>二種語法來進行設定。以<H>為例，只要將要設定的文字內容放置在<H>及</H>之間即可：
<Font Size>語法的設定內容及效果： • 若要讓文字進行換行可以加上<Br>語法：
粗體、斜體及底線 • 粗體、斜體及底線的語法為<B>、<I>和<U>，這三種語法不僅可單獨使用，也可以混合使用。
文字顏色 • 文字顏色的語法為<Font Color=”顏色值”>，這裡的顏色值是採用「RGB顏色的十六進位碼」及「顏色名稱」等二種方式，不過有些RGB的顏色值和我們使用的顏色名稱會有一些出入(如圖中的綠色)，請注意：
11-2-3圖片的應用 • 加入圖片的方式 • 影像的加入是使用<img>語法，「src」參數則是指定來源影影像的位置及檔案名稱。底下用個例子來說明： <Html> <Body> <Img Src="A004.gif"> </Body> </Html>
圖片語法的其他設定 • (1)Alt參數 • 「Alt」參數可以當滑鼠游標停留在影像上方時所顯示的提示文字，同時此文字也可以在影像無法正確顯示時顯示此文字：
(2)Width及Height參數 • 用來設定圖片在畫面上顯示時的寬度及高度：
11-2-4網頁超連結 • 在HTML之中，所有的超連結都是使用<a>標籤語法來建立，而不同的超連結類型只是運用href參數指定不同的連結方式。另外HTML標記中有四個屬性可以讓您選定文字顏色、連結字顏色、甚至您按下連結文字後的顏色變化，讓瀏覽者知道哪些檔案已經閱讀過：
連結到網站中其他各頁的超連結 • 連結到其他網址的超連結
電子郵件超連結 • 檔案下載超連結
圖片超連結 • 在<a>和</a>的語法之中加入<img>圖片語法就可以替圖片加上超連結效果。
11-2-5製作表格功能 • 表格所使用到的HTML標籤共有三組，分別是<Table>、<Tr>及<Td>，其中<Table>區段是由許多個<Tr>所構成，而<Tr>區段則是由一個以上的<Td>所組成。 • 在<Td>區段裡的內容，即是要顯示的資料，至於<Tr>標籤則是用來分隔資料列。
簡單的表格應用： <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>
11-3 動態網頁簡介 • CSS樣式表 • 只使用HTML語法時 • 此時必須對每一個要建立格式效果的文字都加上語法標籤才能一一看到效果。
11-3-1CSS樣式表 • 使用CSS效果 • 若使用CSS時只要事先定義好<H1>的文字格式效果，再來直接進行套用即可。 畫面預覽結果
語法說明 • 事實上，在頁面中加入的CSS語法可區分為定義及使用二種。 • 定義是用於設定格式效果內容，而使用則是設定要套用樣式效果的頁面區域。
11-3-2CSS的定義 • (1)設定單一HTML語法標籤的CSS效果 • 此種方式是將現有的HTML語法標籤加上CSS效果，如圖中我們是將<H1>標籤加入「文字顏色」及「置中對齊」的效果。
(2)同時設定多組HTML語法標籤的CSS效果 • 我們可以同時對多組HTML語法標籤加入CSS效果的。 • (3)自訂標籤的CSS效果 • 若是現有的語法標籤都不適於加入CSS效果時，則另外自訂一個標籤來加入CSS效果，不過要注意的是自訂樣式標籤的前面要加上一點。
CSS的使用 • (1)直接在HTML語法標籤中加入CSS樣式效果 • 這種方式適用於只有特定文字需要CSS效果時，只要在語法標籤加上「Sytle=”樣式效果”」即可。
(2)使用設定HTML語法標籤的方式加入CSS效果 • 當頁面中多處區域需要相同的CSS效果時則採用此方法。
(3)使用自訂標籤的方式加入CSS效果 • 和上述方法一樣，適用於頁面中多處區域需要相同的CSS效果時，只要在語法標籤中加入「Class=自訂標籤名稱」即可使用。
透過CSS功能還可以任意調整網頁文繞圖的形式、濾鏡特效、漸層效果、光暈效果、探照燈效果、淡入淡出效果等，請看以下範例網頁。 網頁上的各種濾鏡效果 網頁上的文繞圖效果
網頁上的轉場效果 網頁上的探照燈效果
