Transcript Document

網頁設計與製作
1
大綱






網頁設計與製作實施情形
網頁設計簡介
網站版型介紹
網頁設計常見的迷思與問題
網頁設計流程
網頁製作
2
網頁設計與製作實施情形



實施對象：高二學生(社會組)或對網頁設計
有興趣的同學
實施節數：6節(可依實際情況調整)
實施方式：




上課講述
練習操作
分組完成網頁
評量：比照網頁設計競賽評分方式
3
網頁設計簡介


網 頁 設 計 就 是 使 用 標 識 語 言 （ markup
language)，經過一系列概念化，設計，編
排，和執行的過程後透過瀏覽器產生圖形界
面展示於客戶端。
網頁設計的目的就是產生網站，什麼是網站
呢，就是伺服器內的一系列網頁的組合。這
些網頁內容包括文字、圖片（GIFs，JPEGs，
PNGs）、表格，或是媒體資料如動畫、視
訊、聲音等。
4
網站版型介紹

網站版型：預先規劃設計好的網站雛型

優點：




網站建置時容易掌控
使用者可以快速的找到所需資料
可以提升使用者再度瀏覽的意願
設計版型需要的思考：


網頁的大小：多少較合適，手機版型是否支援
延伸的問題：擴充性
5
網站版型介紹
商業網站-Yahoo
教育網站-北一女
Logo
Logo
新聞
選
單
其他連結
商品
選單
最新消息
其他連
結
6
網站版型介紹




網站版型會依據網站的特色而定
線上繪製網站草圖Mockflow
有趣的用戶研究：中、美、韓用戶瀏覽網頁
習慣
從F型網頁瀏覽看用戶對網頁的瀏覽習慣
7
網頁設計常見的迷思與問題

網頁設計常見的迷思




網站的首頁要有動畫、音樂←→速度
一頁裡面塞的內容越多越好←→版面
網頁的色彩越多越好←→配色
網頁設計常見的問題



檔名使用中文
檔名中有空白
檔名大小寫
8
網頁設計流程
確定目標
擬定架構
收集資料
維護更新
上傳測試
設計製作
9
網頁設計流程

擬定架構

利用心智圖來擬定架構


確定網站版型



心智圖介紹(範例1，範例2)
手繪
Mockflow
收集資料


利用Google來搜尋資料
利用EverNote來記錄資料(範例)
10
網頁製作


網站管理-以Dreamweaver為例
範例
11
網頁製作


建立網頁(資料夾)
範例
12
網頁製作


文字的處理
範例
13
網頁製作


影像的處理
範例
14
網頁製作

連結方式的介紹

來源端



文字的連結－選取要超連結的文字
影像的連結－選取要超連結的影像
目的端




連結到外部網頁(範例)
連結到mail (範例)
網頁內部的連結(範例)
連結到檔案(範例)
15
網頁製作

表格的操作




插入表格(範例)
合併儲存格(範例)
插入列(範例)
插入欄(範例)
16
網頁製作

多媒體物件的插入



聲音(範例)
Flash (範例)
影片(範例)
17
網頁製作

成果



台灣的大溪地
桃花園遊記之單車遊公園
桃園一日情
18
網頁製作

進階：





頁框
Iframe
跑馬燈
CSS
HTML5的介紹
19
簡報完畢
謝謝指教
20