網頁製作Dreamweaver(一)老師:助教:授課日期:認識DreamweaverDreamweaver是由Macromedia公司所出版最專業的網頁設計工具並在2005年被Adobe公司收購最新版本為CreativeSuite4(CS4)官方網站:相關產品:Flash、Fireworks、Director、Authorware、ColdFusion、HomeSite等Dreamweaver是一套功能強大而介面人性化的網頁編輯軟體及管理工具,它值得我們學習的地方,不只在於軟體本身的優點,更在於它與其他軟體的相容整合,功能的全方位延伸,與目前網際網路的多媒體化及動態資料庫的結合。學習此套軟體來當做我們進入網路專業領域的入門根基軟體是最適合不過了!如果我們設計一個複雜的電子商務(E-Commerce)網站,可以用Dreamweaver來維護管理!如果我們設計一個多媒體形式(Mulitimedia)的網站,如ShockwaveFlash多媒體格式、DHTML,而Dreamweaver也可以發揮最完整的支援整合。為什麼要用Dreamweaver?網頁製作前準備工作一、確定網站的主題與性質先了解製作這個網站的目的為何?想要表達何種訊息給瀏覽者?是娛樂性質的網站嗎?企業公司網站?教育資訊網站?個人網站?或是電子商務網站等......,確定網站的主題、及所想要表達的內容是很重要的,這可以使我們在後面製作的過程中,有一個方向可遵循,也可以使網站內容不會雜亂無章、像大雜燴一樣。二、構思網站架構確定了主題後,依據我們想製作的內容,來分類出網站中的各個項目,每個項目下要放什麼內容、有哪些延伸的小項目等一連串互相連結的細節要先規劃出來,它就像是一個由上往下延伸的樹狀架構圖,例如一個介紹個人作品的網站,它的架構可以如下圖所示:一個明確網站架構,可以使網站內容有系統的呈現出來,在日後的管理維護上也有非常大的幫助。網頁製作前準備工作根據網站主題及架構,來蒐集所需的相關資料、圖檔,依架構中的各個項目來作資料上的分類、整理。三、資料的蒐集整理網頁製作前準備工作安裝Dreamweaver安裝Dreamweaver取得與安裝AdobeCS4繁中版:•Step1開啟瀏覽器,於網址列輸入,,進入後可從下方找尋你要的軟體安裝Dreamweaver這邊以DreamwaverCS4為例。選好後按下Go安裝DreamweaverStep2接下來請輸入帳號密碼,若還不是Adobe會員的朋友們,請大膽的申請成為Adobe會員,申請會員是完全不用付任何費用滴!安裝DreamweaverStep3登入後,有趣的事將要發生了,這邊請選擇Korean|Windows|的版本後按Download安裝DreamweaverStep4接下來得先安裝Adobe的下載器,安裝完畢後會如圖下,開始進行下載的動作。安裝DreamweaverStep5下載完畢後為7z檔,請用7zip將檔解開來,並進行安裝,真正有趣的事發生了,看到了嗎?在安裝語言的地方,竟然出現了繁體中文,傑克這真的太神奇了。啟動程式啟動DreamweaverCS4面版簡介面版簡介功能表面版簡介文件視窗面版簡介屬性面板面版簡介插入面板面版簡介其他面板面版簡介新增網站新增網站點選新增網站新增網站網站定義新增網站網站定義新增網站網站定義新增網站網站定義新增網站網站定義設定頁面屬性及預覽網頁設定頁面屬性及預覽網頁網頁的字型、邊界及標題屬性設定設定頁面屬性及預覽網頁網頁的字型、邊界及標題屬性設定設定頁面屬性及預覽網頁設定網頁的標題名稱網頁的名稱打在這設定頁面屬性及預覽網頁預覽網頁:或按下F12加入與編輯圖片加入與編輯圖片將圖片放入網頁加入與編輯圖片加入隨滑鼠指標變換的圖片加入與編輯圖片滑鼠指向前加入與編輯圖片滑鼠指向後