網頁設計與製作.

Presentation on theme: "網頁設計與製作."— Presentation transcript:

1 網頁設計與製作

2 大綱 網頁設計與製作實施情形 網頁設計簡介 網站版型介紹 網頁設計常見的迷思與問題 網頁設計流程 網頁製作

3 網頁設計與製作實施情形 實施對象：高二學生(社會組)或對網頁設計有興趣的同學 實施節數：6節(可依實際情況調整) 實施方式：
上課講述 練習操作 分組完成網頁 評量：比照網頁設計競賽評分方式

4 網頁設計簡介 網頁設計就是使用標識語言（markup language)，經過一系列概念化，設計，編排，和執行的過程後透過瀏覽器產生圖形界面展示於客戶端。 網頁設計的目的就是產生網站，什麼是網站呢，就是伺服器內的一系列網頁的組合。這些網頁內容包括文字、圖片（GIFs，JPEGs，PNGs）、表格，或是媒體資料如動畫、視訊、聲音等。

5 網站版型介紹 網站版型：預先規劃設計好的網站雛型 優點： 設計版型需要的思考： 網站建置時容易掌控 使用者可以快速的找到所需資料
可以提升使用者再度瀏覽的意願 設計版型需要的思考： 網頁的大小：多少較合適，手機版型是否支援 延伸的問題：擴充性

6 網站版型介紹 商業網站-Yahoo 教育網站-北一女 Logo 選單 新聞 其他連結 Logo 選單 最新消息 其他連結 商品

7 網站版型介紹 網站版型會依據網站的特色而定 線上繪製網站草圖Mockflow 有趣的用戶研究：中、美、韓用戶瀏覽網頁習慣

8 網頁設計常見的迷思與問題 網頁設計常見的迷思 網頁設計常見的問題 網站的首頁要有動畫、音樂←→速度 一頁裡面塞的內容越多越好←→版面
網頁的色彩越多越好←→配色 網頁設計常見的問題 檔名使用中文 檔名中有空白 檔名大小寫

9 網頁設計流程 確定目標 擬定架構 收集資料 設計製作 上傳測試 維護更新

10 網頁設計流程 擬定架構 收集資料 利用心智圖來擬定架構 確定網站版型 利用Google來搜尋資料 利用EverNote來記錄資料(範例)
心智圖介紹(範例1，範例2) 確定網站版型 手繪 Mockflow 收集資料 利用Google來搜尋資料 利用EverNote來記錄資料(範例)

11 網頁製作 網站管理-以Dreamweaver為例 範例

12 網頁製作 建立網頁(資料夾) 範例

13 網頁製作 文字的處理 範例

14 網頁製作 影像的處理 範例

15 網頁製作 連結方式的介紹 來源端 目的端 文字的連結－選取要超連結的文字 影像的連結－選取要超連結的影像 連結到外部網頁(範例)
連結到mail (範例) 網頁內部的連結(範例) 連結到檔案(範例)

16 網頁製作 表格的操作 插入表格(範例) 合併儲存格(範例) 插入列(範例) 插入欄(範例)

17 網頁製作 多媒體物件的插入 聲音(範例) Flash (範例) 影片(範例)

18 網頁製作 成果 台灣的大溪地 桃花園遊記之單車遊公園 桃園一日情

19 網頁製作 進階： 頁框 Iframe 跑馬燈 CSS HTML5的介紹

20 簡報完畢 謝謝指教