1 / 35

第 1 章

第一篇 建立網站的基礎架構. 第 1 章. 設計網頁的準備工作. 本章提要. 網頁、網站與 WWW 網頁的組成元素、設計考量及製作流程. 網頁、網站與 WWW. 網頁與 Home Page 網站就是網頁的集合 網站存放在哪裡. 網頁、網站與 WWW. 一定是去過光彩炫麗的 WWW (World Wide Web 全球資訊網 ) 世界 , 你才會想要自己設計 Web Page, 網頁裡豐富的文字資料、加上奪目的影像、活潑的動畫 ..., 讓不懂電腦的人也能自由自在地享受 WWW 上豐富的寶藏與聲光效果。. 網頁、網站與 WWW.

joelle-lancaster
Download Presentation

第 1 章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第一篇 建立網站的基礎架構 第 1 章 設計網頁的準備工作

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

  3. 網頁、網站與 WWW • 網頁與 Home Page • 網站就是網頁的集合 • 網站存放在哪裡

  4. 網頁、網站與 WWW • 一定是去過光彩炫麗的 WWW (World Wide Web 全球資訊網) 世界, 你才會想要自己設計 Web Page, 網頁裡豐富的文字資料、加上奪目的影像、活潑的動畫..., 讓不懂電腦的人也能自由自在地享受 WWW 上豐富的寶藏與聲光效果。

  5. 網頁、網站與 WWW

  6. 網頁與 Home Page • 在 WWW 上所看到的每一個畫面都是 Web Page (網頁), 而進入網站看到的第一個網頁, 則稱為網站的 Home Page (首頁)。 • 首頁可說是網站的門面, 其功能通常都是負責導覽及介紹最新消息。

  7. 網頁與 Home Page

  8. 網頁與 Home Page • 正因為首頁是網站的門面, 所以製作首頁可千萬馬虎不得, 除了要包含最新資訊與網站導覽之外, 還要能表現出網站的獨特風格, 若首頁沒能給瀏覽者留下完美的第一印象, 那麼要期望他們二度光臨的機會可就微乎其微囉！

  9. 網站就是網頁的集合 • 網站就是網頁的集合, 也就是說網站設計者得先把整個網站架構規劃好, 然後再分別製作出不同的網頁, 讓網頁間彼此相連, 使連上 Internet 的人都能看到, 這樣完整的架構就稱為網站。 • 以旗標出版公司的網站為例, 它就是由許多不同內容的網頁所組成的。

  10. 網站就是網頁的集合

  11. 網站存放在哪裡 • 網站是由許多網頁所組成, 除了每一個網頁分別是一個檔案外, 網頁所包含的圖檔、聲音檔、影像檔...等, 也都存在網站中。 • 一般網站都是放置在伺服器(Server) 中, 而這些伺服器提供 Web 服務, 只在維修或壞掉時關機, 因此瀏覽者不論在什麼時候都可以瀏覽該網站。

  12. 網站存放在哪裡 • 通常只有大型企業、政府及學術單位等, 才需要考慮自行架設伺服器, 而個人與小企業、工作室, 則可以向 ISP ( Internet Service Provider 網路服務提供者) 申請網站空間。 • 以一般提供免費網站空間的 ISP 而言, 一台伺服主機下都包含許多網站, 只要把你的網頁及檔案發佈 (Publish) 到伺服主機下屬於你的路徑, 即可供其它人瀏覽。

  13. 網站存放在哪裡

  14. 網站存放在哪裡

  15. 網站存放在哪裡

  16. 網頁的組成元素、設計考量及製作流程 • 網頁的組成元素 ─ 文字、圖形、超連結與其他元素 • 網頁的設計考量 • 網頁的製作流程

  17. 網頁的組成元素 ─ 文字、圖形、超連結與其他元素 • 網頁中所包含的不外乎文字、圖片、影像、聲音...等等型態的內容, 這些就是網頁的組成元素, 其中文字、圖形與超連結可說是最基本的部分, 另外還有聲音及各種以 Plug-in 模式嵌入網頁的特效與多媒體元件, 也都屬於網頁的組成元素。

  18. 文字 • 文字是網頁中最基本也是最重要的內容, 其所佔的檔案空間非常小 (一個中文字只佔 2 Bytes), 所以當我們進入一個純文字的網頁時, 大約只要 1、2 秒鐘就可以看到完整的網頁內容, 這是多媒體所無法擁有的優勢。 • 網頁中的文字可利用 HTML、CSS 語法來改變色彩、格式與大小等屬性。

  19. 文字

  20. 變換字型的限制 • 若你在網頁中使用了瀏覽者電腦中沒有的字體, 當他瀏覽到你的網頁時, 就只能以系統預設的字型顯示 (通常是細明體), 將達不到你預期的效果。 • 若要顯示特殊字型, 建議你將文字做成圖形, 不過這樣檔案就會大很多, 故請自行斟酌使用。

  21. 圖片 • 目前較常被應用在 WWW 上的圖形有 JPG、GIF和 PNG ...等格式, 因為這些格式除了具有壓縮比例高的特性之外, 也具有跨平台的優點。 • 常見的應用例如放置在網頁中的圖片、背景圖, 也可以替表格或儲存格設定背景圖片。

  22. 圖片

  23. 超連結 • 超連結也是網頁中不可或缺的重要元素, 只要用滑鼠在頁面上點來點去, 就可以迅速到達要去的地方, 也可以下載檔案、寄 e-mail 給網站的主人...。 • 在網頁中加入超連結就像是路邊的路標一樣, 它可以指引瀏覽者方向, 不致於在網站中迷路, 所以好好規劃網頁中的超連結, 是一件非常重要的事。

  24. 超連結

  25. 其他元素 • 表格、表單︰除了一般表格外, 無邊框的表格也常被用來做網頁整體排版。表單則是網頁、使用者與伺服端程式溝通的主要工具, 常見的討論區、留言版、會員登錄等等功能都得透過它來運作 。 • 聲音、影像、多媒體︰網頁可以設定背景音樂, 也可以利用 Active X 控制項或其他方式將音樂和影像、多媒體 (如 Flash 動畫...等) 插入網頁中播放。

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

  27. 網頁的設計考量－不同瀏覽器的觀看效果 • 就大家最熟知的兩家瀏覽器 Netscape和 Internet Explorer 來說, 其所支援的 HTML 標籤有些許不同, 因此在網頁中所製作的效果可能會因為瀏覽者所使用的瀏覽器不同, 而呈現不一樣的效果。 • 建議多用幾種不同的瀏覽器來測試網頁, 或在首頁直接告訴瀏覽者要使用何種瀏覽器、什麼版本的為佳。

  28. 螢幕解析度 • 如果你是在 1024 × 768 pixel 的螢幕解析度下設計網頁, 有些瀏覽者所使用的解析度沒那麼高, 將會造成他們得捲動好幾次頁面, 才能看到你所精心設計的網頁。 • 建議你以在首頁中宣告最佳的瀏覽解析度, 讓瀏覽者有個依據。

  29. 字型與語系的設定 • 為文字套用字型時, 最好避免使用特殊字型, 否則當瀏覽者的系統中沒有你所套用的字型時, 將會以系統預設的字型顯示。 • 網頁的語系設定很重要, 例如做繁體中文網頁就要將網頁的語系設為 Big-5 繁體中文, 這樣才能徹底避免網頁中的文字變成亂碼。

  30. 瀏覽器的設定 • 影響瀏覽者觀看結果的因素, 除了瀏覽器的種類、螢幕大小及解析度、字型的設定之外, 瀏覽者所使用的瀏覽器設定, 也會影響網頁的外觀, 例如：使用者可自行設定超連結的色彩、或是網頁中字型的大小...這些設定值, 都會使網頁看起來和設計者原先的構想不同。

  31. 網頁的製作流程 • 在此提供一份網站開發流程供你參考：

  32. 網頁的製作流程 • 收集網頁內容資料︰收集資料的最大要點, 便是要符合最初整個網站的主題。 • 繪製網頁平面草稿︰規劃網頁的版面配置, 並決定網頁要在什麼樣的解析度下製作。若沒有時間繪製全部網頁, 至少要把首頁和幾個重點頁面的共同規格決定好。

  33. 網頁的製作流程

  34. 網頁的製作流程 • 製作網頁元件︰將資料轉化為網頁能呈現的格式, 例如把書面文章 key in 成文字檔, 掃瞄圖片…等。 • 實際製作網頁︰依照網頁平面草稿圖, 把製作好的網頁元件置入網頁中。 • 以不同瀏覽器與解析度多方測試︰完成的每個網頁都應該經過瀏覽器檢查與測試, 才能確定顯示效果正常與否。

  35. 網頁的製作流程 • 網站上傳︰網站製作完成後, 就可以上傳至伺服器, 然後進行網站宣傳工作。 • 資料更新與功能改善︰運作了一段時間的網站, 總是會發現許多錯誤與操作不便之處, 若能不斷更新內容並改善錯誤之處, 網站必定能大受歡迎喔！

More Related