Download presentation
Presentation is loading. Please wait.
1
計算機概論 請老師填入姓名主講 課本：數位傳真2012 博碩文化出版發行
2
第十四章 網站設計實務 課前指引 近年來全球吹起了網際網路的風潮，從電子商務網站到私人的個性化網頁，一瞬間幾乎所有的資訊都連上了網際網路。然而這些資訊取得的介面大多靠的是五花八門的網頁介紹，因此網頁架設已成為全民學習的浪潮。當然網頁技術的種類也不斷地推陳出新，由HTML、CSS 到炙手可熱的ASP( 動態伺服器網頁) 或ASP.NET，亦或是客戶端的JavaScript、Dreamweaver 到伺服端的JSP 等。
3
章節大綱 14-1 認識網站 14-5 Dreamweaver的面板操作 14-2 HTML簡介 14-6 以Dreamweaver建立網站
14-3 網頁配色技巧 14-7 Dreamweaver的基本操作 14-4 Dreamweaver快速入門 備註：可依進度點選小節
4
14-1 認識網站 網頁基本元素 網頁畫面中的基本組成元素有文字、圖片及超連結等項目，其中文字及圖片是用來表達頁面中的資料內容。但是網站中當然不可能只有一個頁面，此時「超連結」就負起了各個網頁之間串連的工作。簡單說明如下：
5
建置網站流程(1) 擬定網站主題，才能針對網站收集相關資料，並規劃出此網站所需網頁及相關素材。
6
建置網站流程(2) 開始繪製網站架構圖，並進行頁面設計，與選擇一個製作網頁與處理影像的軟體，如FrontPage、Dreamweaver等。
7
建置網站流程(3) 將製作完成的網頁進行上傳與測試，這時必須要知道申請網頁空間的大小，是否能容納製作的網頁，另外還包括不同瀏覽器的觀看效果、螢幕解析度與螢幕大小、色彩顯示、字型的設定，網路的傳輸速度等。
8
建置網站流程(4) 除了持續網站內容宣傳，還要去較具規模的網站，如雅虎登錄來推廣網站，網頁的內容必須經常進行更新與維護。
9
14-2 HTML簡介 語法基本結構(1) 語法對稱性
HTML 屬於「對稱性」的語法，大部份語法都是成雙成對的，「<>」的作用代表著裡面的英文字是一個HTML 語法指令，「<>」內沒有加上「/」表示是語法開始，有加上「/」表示是語法結束。 如圖中的<Html> 和</Html> 就是一組語法，其他的依此類推。同時語法中並沒有區分英文字母的大小寫，而語法前面的空白也可以視個人的習慣決定是否加入，不過這裏建議各位最好還是利用空白鍵來區隔出程式碼的內容結構，這樣在檢查語法內容時會方便許多：
10
語法基本結構(2) 語法結構性 HTML 語法的「結構性」則是指語法的擺放位置，這裡先列出前面所使用到的語法功能：
11
文字格式語法(1) 字體大小 字體大小可使用<H> 及<Font Size> 二種語法來進行設定。以<H> 為例，只要將要設定的文字內容放置在<H> 及</H> 之間即可： 續下頁
13
文字格式語法(2) 粗體、斜體及底線 粗體、斜體及底線的語法為<B>、<I> 和<U>，這三種語法不僅可單獨使用，也可以混合使用。
14
文字格式語法(3) 文字顏色 文字顏色的語法為<Font Color=" 顏色值">，這裡的顏色值是採用「RGB 顏色的十六進位碼」及「顏色名稱」等二種方式，各位可以參考有關網頁配色的書籍，不過有些RGB 的顏色值和我們使用的顏色名稱會有一些出入( 如圖中的綠色)，請各位注意：
15
圖片的應用(1) 加入圖片的方式 影像的加入是使用<img> 語法，「src」參數則是指定來源影影像的位置及檔案名稱。底下用個例子來說明：
16
圖片的應用(2) 圖片語法的其他設定 Alt參數：「Alt」參數可以當滑鼠游標停留在影像上方時所顯示的提示文字，同時此文字也可以在影像無法正確顯示時顯示此文字。 續下頁
17
Width及Height參數：用來設定圖片在畫面上顯示時的寬度及高度。
18
網頁超連結(1) 在HTML 之中，所有的超連結都是使用<a> 標籤語法來建立，而不同的超連結類型只是運用href 參數指定不同的連結方式。另外HTML 標記中有四個屬性可以讓您選定文字顏色、連結字顏色、甚至您按下連結文字後的顏色變化，讓瀏覽者知道哪些檔案已經閱讀過：
19
網頁超連結(2) 連結到網站中其他各頁的超連結 連結到其他網址的超連結
20
網頁超連結(3) 電子郵件超連結 檔案下載超連結 圖片超連結
在<a> 和</a> 的語法之中加入<img> 圖片語法就可以替圖片加上超連結效果。
21
製作表格功能 表格所使用到的HTML 標籤共有三組，分別是<Table>、<Tr> 及<Td>，其中<Table> 區段是由許多個<Tr> 所構成，而<Tr> 區段則是由一個以上的<Td> 所組成。 在<Td> 區段裡的內容，即是要顯示的資料，至於<Tr> 標籤則是用來分隔資料列。 續下頁
23
14-3 網頁配色技巧 網頁安全色 網頁安全色包含如下的216 種色彩，各位可以在繪圖軟體中輸入RGB 數值，即可得到該顏色，或是在HTML 語法中輸入它的16 進位，網頁編輯程式即可轉譯成該顏色：
24
網頁色相配色(1) 如果以色相配色的角度來說，色彩是以紅、橙、黃、綠、藍、紫的順序排列成如下的色相環：
25
網頁色相配色(2) 類似色相的配色 互補色相的配色
假如選用紅色為網頁的主色調，那麼可以設定橙色和紫色與其搭配，選用黃色為主色調時，則選用橙色和綠色與其搭配；因為橙色和紫色就緊鄰在紅色的左右兩旁，而橙色和綠色緊鄰在黃色的兩側，這樣的色相搭配既有變化，也不會太突兀。 互補色相的配色 假如選用紅色為網頁的主色調，若選用其對角位置的黃綠、綠、藍等互補色相來做搭配，則其效果會變得較強眼，尤其紅、綠色兩色放置在一起時，紅色會變得更鮮紅，綠色會更翠綠。
26
14-4 Dreamweaver快速入門 啟動Dreamweaver CS5
27
認識Dreamweaver視窗環境(1)
28
認識Dreamweaver視窗環境(2) 功能表 插入面板
用來插入各式各樣的網頁元件，面板上的每一個圖示都代表著一種元素，只要點選面板中的功能圖示，就可以將相關元件放置到網頁上。至於「插入」面板的開啟及隱藏，可由「視窗/ 插入」來進行。
29
認識Dreamweaver視窗環境(3) 文件視窗 屬性面板 其他工作面板
是網頁內容的編輯區域，設計出來的網頁畫面與實際上線時的呈現效果幾乎一模一樣。 屬性面板 對頁面中的各種元素進行調整及編輯。當各位在頁面上點選不同的網頁元素時，屬性面板也會對應顯示不同的屬性。執行「視窗/ 屬性」可決定是否顯示「屬性面板」。 其他工作面板 是安排各種輔助編輯的面板，畫面上所看到「CSS 樣式」、「AP 元素」、「檔案」及「資源」是在Dreamweaver 預設啟動的工作面板。
30
14-5 Dreamweaver的面板操作 面板的開啟與隱藏
續下頁
31
在此以下圖為例，目前畫面包含「檔案」及「資源」兩個面板功能。
32
展開與收合面板
33
調整面板大小
34
調整面板位置
35
使用面板功能表
36
新增工作區
37
插入面板的類別切換 2 1 3
38
14-6 以Dreamweaver建立網站 開始建立網站 1 2 續下頁
39
3 4
40
網站的管理 1 2 續下頁
41
視窗中的各個按鈕功能說明如下：
42
多個網站之間的切換 1 2
43
網站的匯入方式 1 2 續下頁
44
3
45
14-7 Dreamweaver的基本操作 新增網頁檔案
46
新增網站資料夾
47
網頁檔案的編輯與開啟 1 續下頁
48
2 3
49
切換頁面的編輯模式 續下頁
51
設定頁面的編碼方式
52
設定頁面背景(1) 以CSS語法作外觀設定
53
設定頁面背景(2) 以HTML標籤作外觀設定
54
設定頁面標題文字
55
本章結束 Q&A討論時間
Similar presentations
