第 1 章 設計網頁的準備工作.

Presentation on theme: "第 1 章 設計網頁的準備工作."— Presentation transcript:

1 第 1 章 設計網頁的準備工作

2 本章提要 網頁、網站與 WWW 網頁的組成元素、設計考量及製作流程 網站的規劃考量與開發流程

3 網頁、網站與 WWW 網頁與首頁 網站就是網頁的集合 網站放在哪裡 網站與伺服器

4 網頁與首頁 何謂網頁？ 何謂 Home Page (首頁)？ 透過瀏覽器在 WWW 上所看到的每一個畫面都是網頁 (Web Page)
進入一個網站時所看到的第一個網頁 功能：負責導覽及介紹最新消息

5 網站就是網頁的集合 設計者先把整個網站架構規劃好, 然後再分別製作出不同的網頁, 讓網頁間彼此相連。這樣完整的架構就稱為網站

6 網站放在哪裡 一般網站放置在稱為伺服器 (Server) 的電腦中, 除了伺服器在維修或壞掉時關機, 其餘時間都可瀏覽
除自行架設伺服器外, 一般個人與小企業、工作室, 可向 ISP (Internet Service Provider 網路服務提供者) 申請, 在他們的伺服器上租一塊空間放置網站

7 網站與伺服器

8 網頁的組成元素、設計考量及製作流程 網頁的組成元素 網頁的設計考量 網頁的製作流程

9 網頁的組成元素 文字 圖片 超連結 其他元素

10 網頁文字 網頁元素中最基本、最重要的內容 優勢：檔案小、速度快
所佔的檔案空間非常小 (一個中文字 2 Bytes) 進入一個純文字的網頁時, 大約只要 1、2 秒鐘就可以看到整篇網頁 可利用 HTML 的語法以及新的 CSS 樣式表來改變色彩、格式與大小等屬性, 滿足不同的設計需求

11 變換網頁文字的限制 瀏覽者的電腦裡若沒有網頁中使用的字體, 瀏覽到該網頁時, 就只能以系統預設的字型顯示
解決方法可將把網頁文字做成圖形, 不過檔案大小會增大很多

12 關於網頁圖片 常應用在 WWW 上的圖形有 JPG、GIF 和 PNG 幾種格式 這些格式除了具有壓縮比例高的特性之外, 也具有跨平台的優點
不管瀏覽者用的是什麼作業系統, 都能直接在瀏覽器上看到這幾種格式的圖片

13 網頁圖片的應用

14 關於超連結 點選頁面上超連結可以： 網頁中不論是文字或圖形都可以加上超連結標記 像穿越任意門一般迅速到達要去的地方 下載檔案
寄 給網站的主人... 網頁中不論是文字或圖形都可以加上超連結標記

15 超連結的種類 連往別的網站的外部超連結 連結自己網站內部 Web Page 的內部超連結 連結同一頁面中部分內容的書籤
連至檔案以下載之的下載超連結 可以寄 的 超連結 按下或滑鼠移上時可以啟動程式產生特效的超連結

16 其他元素 表格、表單 聲音、影像、多媒體 程式特效 其他各類多媒體 Plug-in

17 表格、表單 表格在網頁中的使用： 表單在網頁中的使用： 可以做為一般表格使用 無邊框的表格常被利用來做網頁整體排版
表單是網頁與伺服端程式溝通的主要工具 討論區、留言版、會員登錄等均常使用表單功能

18 聲音、影像、多媒體在網頁的應用 設定背景音樂
利用 Active X 控制項或其他方式將音樂和影像、多媒體 (如 Flash 動畫…等) 插入網頁中播放

19 程式特效 利用 Script 程式或是 Java Applet 之類的程式可以在網頁中製造各類效果
常見的特效：跟著滑鼠移動的文字、水中倒影…

20 其他各類多媒體 Plug-in Plug-in 可以保持網頁設計的彈性, 讓新推出的多媒體格式可以利用這個方法嵌入網頁中, 只要瀏覽者擁有該媒體的播放程式, 就可以直接在瀏覽器中看到該 Plug-in 內容

21 網頁的設計考量 不同瀏覽器的觀看效果 螢幕解析度與色彩顯示 字型與語系的設定 考量網路的傳輸速度

22 不同的瀏覽器 Netscape 和 Internet Explorer 所支援的 HTML 標籤就有些許不同, 因此在網頁中所製作的效果可能會因為瀏覽者所使用的瀏覽器不同而呈現不一樣的效果 使用者使用的瀏覽器設定也會影響網頁的外觀

23 螢幕解析度 在高螢幕解析度下設計的網頁, 在低解析度螢幕上觀看時, 會造成捲動好幾次頁面才能看到原設計的網頁
目前來說, 800 X 600 解析度的設定值應該是符合最多人的需求 可以在首頁中宣告一下最佳的瀏覽解析度, 讓瀏覽者有個依據

24 色彩顯示 目前一般顯示卡可以顯示的色彩數量： 設計網頁時, 一般建議使用 256 色的圖片 256 色
16 bit High Color ( 64 k, 色) 24 bit True Color ( 1 千 6 百萬色) 設計網頁時, 一般建議使用 256 色的圖片

25 字型與語系 網頁製作時要設定對應的語系編碼 設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片
例如, 做繁體中文網頁就要將網頁的語系設為 Big-5 繁體中文, 這樣才能避免網頁中的文字出現亂碼 設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片

26 網路的傳輸速率 哪些網頁內容會影響網路的傳輸速率？ 在設計網頁時, 除非必要, 不然別放入過於龐大的檔案 含有超大圖檔 VRML 虛擬實境
影音多媒體檔案... 在設計網頁時, 除非必要, 不然別放入過於龐大的檔案

27 網頁的製作流程

28 網站的規劃考量與開發流程 架設網站的規劃與考量 網站整體開發流程

29 架設網站的規劃與考量 關於網站運作的概念 給予各類網站開發者的建議

30 網站運作的概念

31 網頁的分類方式 牽涉到伺服器中程式運作的動態網頁 不牽涉伺服器程式的網頁 需要傳資料到伺服器, 請伺服器處理過, 再將結果顯示給用戶端
如：ASP、PHP…等設計的討論區、留言版、會員網站、搜尋引擎 不牽涉伺服器程式的網頁 如 HTML 靜態網頁

32 給予各類網站開發者的建議 自己製作靜態網頁並申請 ISP 空間 自己製作動態網頁並申請 ISP 空間
委託 ASP (Application Service Provider) 公司統籌網站開發 自己擁有伺服器並處理整個網站開發

33 網站整體開發流程 擬定網站策略、目的與功能 決定伺服器與資料庫種類以及動態網頁程式語言等 架設伺服器 規劃網站結構並建立之 網頁製作流程
網站上傳 (或公開上線) 資料更新與功能改善