第十三次上課:專題報告e達人-網頁篇(1)

網頁製作概論

■WWW概念

網頁：就是我們現在準備要做的東西。

首頁：就是當我們進網站時，第一眼看到的網頁。

網站：由一堆網頁所構成的完整內容，稱為網站。

WWW：則是由一堆網站所連結而成的。

第 一個WWW

■網站設計流程

網頁設計前置作業

1. 客戶需求了解：此階段針對客戶想要的功能與風格進行討論了解，確認後進行彙整。
2. 網站企劃：針對客戶需求進行腦力激盪功能企劃，提出更完整全面的網站功能。
3. 提案說明：正式向客戶提出企劃書，進行討論與確認網站執行


網頁設計施工階段

1. 首頁提案：提出首頁設計給予客戶討論，再經過使用者測試，修改後確認網站首頁設計。
2. 網站資訊架構：藉由科學方法針對網站各分類與階層間關係進行資訊架構，項目命名，力求網站不會讓使用者迷路與迷惑。
3. 內頁設計與功能開發：針對網站內頁進行視覺設計，網站相關需求的功能開發
4. 網站使用性測試：挑選一般使用者進行網站使用性測試，包含是否了解網站性質，定位，以及所在位置等，確認網站符合使用者之需求。


網頁完工階段

1. 測試網頁功能是否正常，除錯。
2. 網站上線與結案。


後續服務

客戶都可享有網站上線後的相關服務，包含了功能的擴充，網路行銷工具，網站經營顧問等相關服務。

■網站呈現的方式

首頁式：以單頁方式設計.(維護不易) 範 例

選單式網頁：以頁框.表格.按鈕.CSS產生(適合學生及初學網頁設計者.學到HTML程式語法.維護不易)範 例

部落格(網誌)：管理方便範 例

微網誌：微型部落格(每篇文字不超過40個字)範例 範例

社群網站：高度互動及娛樂(遊戲.朋友....)範 例

■網頁軟體製作簡介

作業平台：windows

使用軟體：
[初學]FrontPage、Namo WebEditor、……(沒人用)
[進階]Dreamwaver、Flash、……
[影像處理]PhotoShop、PhotoImpact

網頁設計三劍客-Adobe DFP

網頁組成：
標題、按鈕、超連結、背景圖、圖片、文字、表格、表單、多媒體……。

網頁製作：
文字、背景、插入圖片、分隔線、跑馬燈、表格、超連結、背景音樂。

網頁製作技術概況：
HTML、CSS、JavaScript、DHTML、Java、Flash、XML、XHTML

網頁基本概念:
網頁中的圖片(gif、jpg、png) 、網頁相關檔案的檔名(不可為中文)、網頁中的路徑

網站設計之注意事項:

• 首頁要有明顯的標題
  
• 建立適當的視窗標題( 此標題將來會被 "搜尋引擎" 以及 "我的最愛" 所用 )
• 儘量把網頁最重要的訊息放在前面
• 提供站內查詢或是網站地圖
• 網頁的連結要儘量在短而有力的關鍵字上
• 不要用花俏的動作過度裝飾不重要的內容
• 在網頁上使用有意義的圖片
• 網頁的內容最好能兼顧瀏覽與列印的品質
  

歸納:

避免華而不實的功能、注意瀏覽器的相容性、提供無障礙的瀏覽方式(跨平台瀏覽器如Firefox.Google Chrome)
清爽簡單勝過五顏六色、主題明確、內容豐富

網站設計之標準:

• W3C
• HTML
• HTML5

HTML5 是由 HTML+ CSS+ JavaScript 所組成，目標就是減少瀏覽器對外掛程式的需求

<HTML5跟HTML4最大的差別>

<HTML5的優點與缺點>

優點

• 使用語意化的Tag，有利於SEO(footer、header和main等取代div，讓電腦能夠更加理解網頁的內容，容易被 搜尋引擎找到)。
• 若HTML5成為網頁標準技術，則即使瀏覽器不同，也不會再出現不同的網站看起來不一樣的情形，也可跨平台瀏覽(如:手機)
• 雖說目前還是有部分瀏覽器無法支援全部格式，但都還是持續的更新技術與支援。
• 支援使用多媒體Audio、Video的標籤，輕易使網頁豐富化，大 幅減少外掛程式，就算沒有外掛程式一樣可以在網頁上瀏覽豐富的影音內容。
• 將Web帶入一個成熟且完整的應用平台。
• Google與Youtube等 一些世界性的大型網站也都選擇開始使用HTML5，這些都是HTML5為未來趨勢的佐證。

缺點

• 雖說所有主流瀏覽器 (Internet Explorer, Chrome, Firefox, Opera, Safari等) 不斷的更新技術，但目前還是有部分瀏覽器無法全部支援其格式。
• 若是不支援 HTML 5，只支援 Flash Player 的瀏覽器（像一些不再提供更新的瀏覽器），就無法在瀏覽器內播放HTML 5影音。
• audio 和 video 常常還是需要有 Javascript 支援，才能正常使用操作面板。
• 無法像Flash 以及Silverlight般把資源封裝，影音檔案或其他相關連結可能會很容易被抓出來，得靠些方式擋直接連結或暴力下載。

■網頁製作相關網站

首頁製作百寶箱-歷史悠久
http://163.32.161.36/case/DOB/

http://ms2.ctjh.ntpc.edu.tw/~luti/97-1/97-1html-java.htm

https://www.youtube.com/watch?v=8_guUvlctR8