專題製作 許惠淑
網路源起 電影介紹：十月的天空 美國蘇聯冷戰時期，蘇聯發射第一顆人造衛星上外太空，刺激了美國國內科學的發展，為通訊之便，因此網際網路應運而生。 抓住自己的夢想，勇敢追尋！
網站介紹 入口網站 搜尋引擎類,瀏覽器軟體公司類,ISP服務類, 網路社區類,資訊提供類 機構網站 政府, 一般公司行號, 學校 個人網站
HTML 介紹 HTML（Hyperlink Text Markup Language） 超文件標記語言 網路通訊協定 全球資訊網 瀏覽器 指令內嵌在文字中, 以 “ < > ” 符號框住關鍵字而形成所謂的標籤
HTML 介紹 html語法結構主要分 head和body兩部份 head標籤對 (<head></head>) <base>標籤 , <title></title>標籤對 , <meta>標籤 body標籤對 (<body></body>) 置放所有的顯示資料,如文件的文字、圖片等主體內容 text 屬性 bgcolor 屬性 link 屬性 alink 屬性 vlink 屬性 …
HTML 介紹 一個html的基本架構 <html> <head> <title>Sue的第一個家</title> </head> <body>歡迎光臨*^_^*,這是我的第一個網頁喔!! </body> </html>
網頁與 Home Page 網頁（Web Page） 首頁 ( Home Page ) 透過瀏覽器在WWW上所看到的畫面 進入一個網站時所看到的第一個網頁 網站的門面
網站結構 網站中所有的網頁以超連結的方式連接,不同的連接方式有不同的結構 線性結構 樹狀結構 每個網頁以直線方式連結起來 類似樹狀伸展，一層一層的連接
網站開發流程 企劃階段 施工前置作業 施工階段 維護
網站開發流程 企劃階段 擬定網站的功能 決定網站主題,網站名稱,網站內容 資料蒐集與整理 繪製網站架構與流程 繪製網頁平面草圖
網站開發流程 施工前置作業 製作網頁元件 利用草圖規劃,進行個別元件製作 背景、標幟、按鈕、水平線、分隔線、動畫 個人風格呈現 網頁版面設計
網站開發流程 施工階段 相容性問題 時間規劃 修改與新增 維護 資訊更新與維護
網頁製作 素材製作 網頁製作 Photoimpact, Photoshop, Flash, Gif Animator Dreamweaver, Frontpage, NotePad , Word 利用Dreamweaver網頁編輯器
素材製作 Photoimpact的網路元件設計師
素材製作 製作標幟--利用橫幅 點選左邊橫幅清單, 右邊即有範例, 可依需求選取
素材製作 在此選單中,可調整元件的大小,陰影,超連結
素材製作 在標幟下的標題,邊框,渦卷,皆可依需求做不同的設計,且標幟下的選單也會因範例而各有不同
素材製作 完成設計的動作後,即可匯出處理 影像最佳化程式 個別的物件 元件物件 可協助處理透明化的背景 整個標幟為一物件 就如範例中的標題,邊框,渦卷,皆會各成一物件 元件物件 整個標幟為一物件
素材製作 在此以影像最佳化來完成此標幟 只有GIF檔才可完成透明化的背景 邊界的柔和選項可依需求選取
素材製作 在網路元件設計師中的其他範例,例如項目符號,按鈕,按鈕列,分隔線等,皆可依上述製作標幟的操作步驟來進行 按鈕列可一次做多個按鈕,且儲存時只需為第一個按鈕命名,其餘Photoimpact會自動幫你依序建好其他按鈕 個人風格塑造
網頁製作 利用Dreamweaver網頁編輯器軟體 所見即所得的視覺網頁編輯軟體 Dreamweaver網頁製作 網頁編輯 網頁版面製作 動態網頁
環境介紹 網頁文件視窗
環境介紹 網站管理視窗
環境介紹 工作環境 主功能表列 工具列 物件面版 屬性面板 狀態列
環境介紹 工作環境--主功能表列 提供各狀態下的指令,不過大部分的指令都可在面板上執行,或是可以在編輯區上按滑鼠右鍵出現的快顯功能表中下達指令
環境介紹 工作環境--工具列 可用不同的模式來檢視網頁,或是快速開啟瀏覽器來檢視網頁的結果 在此提供三個按鈕來切換三個不同的檢視模 式來編輯網頁
環境介紹 工作環境--物件面版 提供現成的網頁元件 共有七種不同的物件面板 檔頭--網頁開頭 隱藏--不可見物件 可利用右上角的來切換
環境介紹 工作環境--屬性面板 在編輯區中選取不同的元件時,會出現不同的屬性面板 可設定文字,圖片,各網頁元件的屬性
環境介紹 工作環境--狀態列 在狀態列中可以顯示目前網頁中主要的html標籤,網頁視窗尺寸,網頁檔案大小,預估下載時間及啟動列
環境介紹 工作環境--狀態列 目前網頁中主要的html標籤 可選擇網頁的實際大小
環境介紹 工作環境--狀態列 下載指示欄位 啟動列 Dreamweaver會自動計算檔案的大小及瀏覽時下載的時間 可快速啟動幾種常用的浮動面板 與“啟動”面板視窗是相同的
網站架構管理 定義網站 建立首頁 按網站地圖,或網站/新網站 名稱取網站帳號,選取放置網站的資料夾 檔案開新檔案 首頁命名為index.htm 按右鍵設為首頁
網站架構管理 建立網站架構 連結與路徑 開啟網站地圖,完成網頁與網頁間的連結 在本地資料夾下建立相關資料夾 圖片資料夾,音效資料夾,按鈕資料夾 連結與路徑 在Dreamweaver中,若連結出現「file://...」就是錯誤連結,正常應是直接出現檔名或資料夾名
智慧財產權 原創性與創作性 著作權法的保護目的 保障著作人權益及促進社會文化發展 著作權保護的是“表達”,而非“概念” 避免侵權
網頁編輯 文字設定 網頁設定 圖片設定 超連結 插入其他物件
網頁編輯 文字設定 自動折行的文字 用Enter鍵換段落,用Shift+Enter鍵換行 加入特殊字元,註解文字,水平分隔線 像素 %
網頁編輯 文字設定 文字的樣式屬性 選取文字後,在其屬性視窗中更改即可 段落、字型、文字大小、文字色彩、粗體斜體等樣式、對齊方式、超連結、項目符號、文字縮排
網頁編輯 網頁設定 設定頁面顯示大小 網頁屬性交談窗 輸入網頁標題 執行「修改/網頁屬性」 按右鍵選取網頁屬性 這裡所輸入的文字，會出現在瀏覽器的標題列，即顯示在網頁的左上方
網頁編輯 網頁設定--頁面屬性設定
網頁編輯 網頁設定 網頁背景圖片 網頁背景色彩 一般文字及連結文字色彩 設定頁面邊界 設定網頁語系 指定網頁藍圖 使用內建的網頁色彩樣式
網頁編輯 圖片設定--圖片格式 GIF圖檔格式 JPG圖檔格式 PNG圖檔格式 只容納256色彩,適合構圖簡單、顏色分明的圖片 可儲存所有的色彩,具強大的壓縮率,適合全彩的風景照、人物照 PNG圖檔格式 結合上述兩圖檔格式的優點 較新的瀏覽器才有支援
網頁編輯 加入圖片 在物件列裡，點選插入影像的圖示 執行Insert/Image 點選編輯視窗的圖片 物件屬性視窗 編輯圖片物件的屬性設定狀態
網頁編輯 圖片屬性設定 調整圖片大小,修改圖片來源,為圖片加上超連結,文繞圖的排列方式,替代文字及低解析圖片,設定圖片周圍間距,設定圖片外框,編輯圖片,製作影像地圖
網頁編輯 超連結 加入內部超連結 加入超連結文字 加入超連結圖片 加入錨點：可在網頁的開頭加入網頁內容索引超連結
網頁編輯 超連結 加入外部超連結 外部超連結與啟動其他網路服務程式的URL書寫方式 在新瀏覽器視窗、同一個新視窗中顯示連結網頁：Target列示窗 加入電子信箱超連結：Insert Email Link（信箱位址如：123@young.com.tw?subject=網站意見） 加入下載檔案超連結：利用Site Map
網頁編輯 超連結 使用CSS變換超連結文字狀態 Text/CSS Styles/Edit Style Sheet active：滑鼠按下 hover：滑鼠經過 link：滑鼠未經過 visited：URL已拜訪過
網頁編輯 插入其他物件 Flash動畫 Flash按鈕 Flash文字 背景音樂 視訊檔 日期及計數器
網頁版面製作 表格 框架 樣版 可以排列資料,使圖文看來井然有序，應用在版面配置上時,是非常好用的排版工具 有大量圖片,或是具有分欄效果的文字資料,都可利用表格輕鬆完成版面配置 框架 可將完整的網頁視窗切割成不同區域,可分別置放不同的內容 樣版 需要經常出現或需大量製作相同網頁時
網頁版面製作 加入表格 在一般物件視窗中即可選取插入表格
網頁版面製作 表格屬性設定 整個表格屬性
網頁版面製作 表格屬性設定 儲存格屬性
網頁版面製作 框架 可利用頁框物件插入所需框架 每個所切隔出來的頁框,代表必須放置一個網頁在其中,且會產生一個包覆所有框架的網頁 如果你分隔出來三個頁框,就需要儲存四個htm檔
網頁版面製作 框架 頁框設定視窗 頁框屬性設定
網頁版面製作 框架 頁面屬性設定 框架命名及切換
網頁版面製作 框架 預設的Frame名稱 _blank：將超連結網頁開啟到另一個新的網頁視窗 _parent：將超連結網頁開啟到上一層Frameset（在有巢狀Frame的情形下） _self：將超連結網頁開啟到本身所在的頁框 _top：拆散所有頁框組成為一個網頁
動態網頁 圖層 時間軸 表單 作用 可任意的移動位置或重疊 在網頁中製作動畫 可作為版主與瀏覽者之間互動的媒介 可設定瀏覽器及網頁上各元件的行為藉以產生動態效果
動態網頁 圖層 ( Layer ) 在圖層中可放入任何網頁元件 可任意的移動位置或重疊 在一般物件中即可插入圖層 圖層屬性設定
動態網頁 時間軸 利用圖層或圖片在不同時間下的位移移動,製造出動畫效果
動態網頁 表單 應用範圍很廣,例如製作留言版,問卷調查,討論版,會員資格申請表…等 可選取表單物件,其提供了完整的表單元件
動態網頁 作用 物件事件動作 先選取要產生作用的物件,再在作用視窗中,選取要增加的事件,例如滑鼠移過,而此時就會有一對應的動作,例如變換圖片
參考書目 精采Dreamweaver動態網頁設計,知城出版社,徐蕙英,吳目誠編著. 網頁編織三部曲,第三波出版社,黃啟銘編著 網頁設計師,全華科技圖書公司,王年燦等人編著 Photoimpact,Dreamweaver等圖示均為其公司版權所有