第一次上課：網頁製作概論及使用者介面

網頁製作概論

■WWW概念

網頁：就是我們現在準備要做的東西。
首頁：就是當我們進站時，第一眼看到的網頁。
網站：由一堆網頁所構成的完整內容，稱為網站。
WWW：則是由一堆網站所連結而成的。

■網站設計流程

確認主題→蒐集並整理資料→繪製網頁架構草圖→網頁內容設計→製作網頁元件→美編動畫及其他相關軟體的運用→撰寫互動性程式→網頁修改及程式除錯→網頁上傳至伺服器主機→網頁更新與維護

■網站呈現的方式

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

選單式網頁：以頁框.表格.按鈕.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://www.ctjh.ntpc.edu.tw/www/netsource/resource.htm

DWX教學網站

• http://www.twisu.com.tw/4/dreamweaver/dw4/dmwr.htm
• http://elearning.stut.edu.tw/media/dreamx/

使用者介面

■開啟Macromedia Dreamweaver 8

在桌面快點兩下Macromedia Dreamweaver 8圖示

■Macromedia Dreamweaver 8視窗介紹

• 功能表
• 文件工作列
• 編輯區
• 屬性面版
• 其他面版

■設定操作環境

點選編輯/偏好設定