第3章 網(wǎng)頁制作基礎(chǔ)

1、第3章 Dreamweaver基礎(chǔ) 目錄目錄 1、Dreamweaver的安裝與啟動 2、站點創(chuàng)建與管理 3、基本網(wǎng)頁的創(chuàng)建 4、超鏈接的創(chuàng)建 3 Dreamweaver基礎(chǔ)基礎(chǔ) Macromedia Dreamweaver CS4是Adobe公司最新推出的集 網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是針對 專業(yè)網(wǎng)頁設(shè)計師特別開發(fā)的可視化網(wǎng)頁開發(fā)工具，其功能強(qiáng)大， 操作方便，支持多種瀏覽器，并可建立跨平臺的網(wǎng)頁，倍受眾多 網(wǎng)頁設(shè)計師的青睞。 目標(biāo)：目標(biāo)： 了解Dreamweaver CS4新增功能，學(xué)會安裝和卸載 Dreamweaver CS4，熟悉Dreamweaver CS4的工

2、作界面。了解 網(wǎng)站開發(fā)過程，能夠創(chuàng)建和管理網(wǎng)站，掌握在網(wǎng)頁中插入文本和 圖像的基本方法和技巧。理解絕對路徑和相對路徑的概念，學(xué)會 在網(wǎng)頁中創(chuàng)建各種超級鏈接的基本方法和技巧。 3.1 Dreamweaver的安裝與啟動的安裝與啟動 本節(jié)先介紹Dreamweaver CS4新增的功能，然后 簡介安裝軟件所需的軟硬件環(huán)境，接著介紹 Dreamweaver的安裝、卸載和啟動方法，最后簡介 Dreamweaver的工作界面。 目標(biāo)：目標(biāo)： 本節(jié)的主要任務(wù)是了解Dreamweaver CS4的新增 功能，學(xué)會安裝、卸載和啟動Dreamweaver CS4，熟 悉Dreamweaver CS4的工作界面，為

3、進(jìn)一步熟練使用 打好基礎(chǔ)。 3.1.1新增功能新增功能 Dreamweaver CS4新增了下列的各種新功能。 （1）實時視圖 （2）針對Ajax和JavaScript框架的代碼提示 （3）相關(guān)文件 （4）增強(qiáng)集成編碼功能 （5）代碼導(dǎo)航器 （6）新增Adobe AIR創(chuàng)作支持 （7）增強(qiáng)FLV支持 （8）CSS最佳做法 （9）HTML數(shù)據(jù)集 3.1.2安裝、卸載和啟動安裝、卸載和啟動 1系統(tǒng)需求系統(tǒng)需求 WindowsMac OS CPU1GHz或更快的處理器PowerPC G5或或Intel多核處理器多核處理器 軟件軟件Microsoft Windows XP (帶有 Service Pa

4、ck 2, 推薦 Service Pack 3) 或 Windows Vista Home Premium、Business、 Ultimate 或 Enterprise (帶有 Service Pack 1, 通過 32 位 Windows XP 和 Windows Vista 認(rèn)證) Mac OS X 10.4.11 - 10.5.4 版版 內(nèi)存內(nèi)存512MB 內(nèi)存512MB 內(nèi)存內(nèi)存 硬盤空間硬盤空間1GB 可用硬盤空間用于安裝; 安裝過程中需 要額外的可用空間 (無法安裝在基于閃存的 設(shè)備上) 1.8GB 可用硬盤空間用于安裝；可用硬盤空間用于安裝； 安安 裝過程中需要額外的可用空間裝

5、過程中需要額外的可用空間 (無法無法 安裝在使用區(qū)分大小寫的文件系統(tǒng)的安裝在使用區(qū)分大小寫的文件系統(tǒng)的 卷或基于閃存的設(shè)備上卷或基于閃存的設(shè)備上) 顯示器顯示器1280800屏幕，16位顯卡1280800屏幕，屏幕， 16位顯卡位顯卡 光驅(qū)光驅(qū)DVD-ROM 驅(qū)動器DVD-ROM 驅(qū)動器驅(qū)動器 其他其他在線服務(wù)需要寬帶在線服務(wù)需要寬帶 Internet 連接連接在線服務(wù)需要寬帶在線服務(wù)需要寬帶 Internet 連接連接 3.1.2安裝、卸載和啟動安裝、卸載和啟動 l2安裝安裝 l 在安裝Dreamweaver CS4前關(guān)閉系統(tǒng)中正在運行的所有應(yīng)用 程序，包括其它Adobe應(yīng)用程序、Micro

6、soft Office應(yīng)用程序和瀏覽 器窗口。此外，最好在安裝過程中臨時關(guān)閉病毒防護(hù)程序。安裝 方法如下所示： l將軟件光盤放入光盤驅(qū)動器，然后按屏幕指示操作。如果安裝程 序沒有自動啟動，請瀏覽到位于光盤根目錄下的Adobe CS4文件 夾，雙擊Setup.exe啟動安裝過程。 l如果您是從網(wǎng)站下載的軟件，請打開文件夾，瀏覽到Adobe CS4 文件夾，雙擊Setup.exe，然后按屏幕指示操作。 3.1.2安裝、卸載和啟動安裝、卸載和啟動 l3. 卸載卸載 l請在卸載前關(guān)閉系統(tǒng)中正在運行的所有應(yīng)用程序，包 括其它Adobe應(yīng)用程序、Microsoft Office應(yīng)用程序和 瀏覽器窗口。卸載

7、方法如下所示： l在Windows XP中，打開Windows控制面板，雙擊 “添加/刪除程序”。選擇想要卸載的軟件，單擊【更 改/刪除】按鈕，然后按屏幕指示操作。 l在Windows Vista中，打開Windows控制面板，雙擊 “添加/刪除程序”。選擇想要卸載的軟件，單擊【更 改/刪除】按鈕，然后按屏幕指示操作。 3.1.2安裝、卸載和啟動安裝、卸載和啟動 l4啟動啟動 l單擊“開始”菜單，選擇“程序”，在展開菜 單中單擊“Adobe Dreamweaver CS4”可以 啟動Dreamweaver，進(jìn)入Dreamweaver開始 界面。 3.1.3工作界面工作界面 DW8 文檔標(biāo)簽 菜

8、單欄 工具欄:常用 布局 表單 文本 面板組 標(biāo)簽選擇器 屬性面板 狀態(tài)欄 文檔窗口： 代碼 設(shè)計 拆分 3.1.3工作界面工作界面 CS4 文檔標(biāo)簽 文檔工具欄 菜單欄 輔助工具欄 面板組 標(biāo)簽選擇器 標(biāo)簽選擇器 狀態(tài)欄 文檔窗口： 代碼 設(shè)計 拆分 3.2 站點創(chuàng)建與管理站點創(chuàng)建與管理 站點即網(wǎng)站（Website），是指在因特網(wǎng)上，根據(jù)一 定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的 相關(guān)網(wǎng)頁的集合。人們可以通過網(wǎng)站來發(fā)布想要公開的資 訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。 網(wǎng)站創(chuàng)建是指網(wǎng)絡(luò)設(shè)計師應(yīng)用各種網(wǎng)絡(luò)設(shè)計技術(shù)，為 企事業(yè)單位、公司和個人在全球互聯(lián)網(wǎng)（Internet）上建

9、立自己的站點。 目標(biāo)：目標(biāo)： 本節(jié)的學(xué)習(xí)目標(biāo)是初步了解網(wǎng)站的總體規(guī)劃，了解網(wǎng) 站建設(shè)的步驟，掌握在Dreamweaver中創(chuàng)建和管理網(wǎng)站的 基本方法。 3.2.1 網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃 要成功設(shè)計和創(chuàng)建一套網(wǎng)站系統(tǒng)，必須先做好網(wǎng)站的 總體規(guī)劃，然后按照規(guī)劃一步一步的實施，才能保證網(wǎng)站 建設(shè)的順利進(jìn)行。 1. 與網(wǎng)站需求方進(jìn)行詳盡的溝通，明確網(wǎng)站的目的、功能 等各方面的詳細(xì)要求。 2. 依據(jù)需求擬定網(wǎng)站建設(shè)解決方案。 3. 進(jìn)入網(wǎng)站建設(shè)項目的具體實施階段。 4. 在設(shè)計工作期間，要有嚴(yán)格的項目監(jiān)控機(jī)制，以確保網(wǎng) 站建設(shè)的每一步都能切實符合要求。 3.2.1 網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃 l創(chuàng)建網(wǎng)站的基本工作流程

10、： l1建設(shè)網(wǎng)站前的市場分析 l2建設(shè)網(wǎng)站的目的及功能定位 l3網(wǎng)站技術(shù)解決方案 l4網(wǎng)站內(nèi)容及實現(xiàn)方式 l5網(wǎng)頁設(shè)計 l6網(wǎng)頁設(shè)計的工具 l7費用預(yù)算 l8網(wǎng)站測試 l9網(wǎng)站發(fā)布與推廣 l10網(wǎng)站維護(hù) 3.2.2 網(wǎng)站建設(shè)注意事項網(wǎng)站建設(shè)注意事項 在網(wǎng)站設(shè)計過程中應(yīng)考慮的注意事項： （1）網(wǎng)站的版式設(shè)計 （2）網(wǎng)站形式與內(nèi)容相統(tǒng)一 （3）三維空間的構(gòu)成和虛擬現(xiàn)實 （4）多媒體功能的利用 （5）網(wǎng)站測試和改進(jìn) （6）內(nèi)容更新與溝通 （7）合理運用新技術(shù) 設(shè)置文檔類型 網(wǎng)站建設(shè)流程網(wǎng)站建設(shè)流程個人網(wǎng)站個人網(wǎng)站 1.明確主題，資料收集 2.描繪網(wǎng)站框架，具體制作 3.測試網(wǎng)站，完善功能 4.申請空

11、間，發(fā)布站點 5.網(wǎng)站推廣，內(nèi)容更新 網(wǎng)站的層次結(jié)構(gòu) 網(wǎng)站的欄目結(jié)構(gòu)、內(nèi)容布局 具體制作，開發(fā)應(yīng)用程序 內(nèi)容是否符合要求 文本和圖像等素材是否正確 各個頁面之間的鏈接是否順暢 下載速度是否順暢 不同瀏覽器是否正常瀏覽 域名 ftp 網(wǎng)站建設(shè)流程網(wǎng)站建設(shè)流程企業(yè)網(wǎng)站企業(yè)網(wǎng)站 與客戶溝通 網(wǎng)站制作意向 制作網(wǎng)站 規(guī)劃方案 洽談設(shè)計 細(xì)節(jié) 失敗 簽署協(xié)議 并交預(yù)約付款 客戶提交網(wǎng)站 相關(guān)資料 設(shè)計主頁方案 修改方案不合格 用戶審核 合格用戶確認(rèn)整體制作 修改 不合格 向用戶提交 完成稿 合格 客戶最終 確認(rèn) 上傳至服務(wù)器 交付剩余尾數(shù) 3.2.3 創(chuàng)建網(wǎng)站創(chuàng)建網(wǎng)站 l在Dreamweaver中， “

12、站點”是指屬于某個Web站 點的文檔的本地或遠(yuǎn)程存儲位置。 l站點由三個部分（或文件夾）組成： （1）本地文件夾：通常位于本地計算機(jī)上，用來存儲網(wǎng)頁設(shè)計師正 在處理的網(wǎng)站文件。Dreamweaver將此文件夾稱為“本地站點”。 （2）遠(yuǎn)程文件夾：通常位于運行Web服務(wù)器的計算機(jī)上，用來存儲 用于測試、生產(chǎn)和協(xié)作等用途的文件。Dreamweaver將此文件夾 稱為“遠(yuǎn)程站點”。遠(yuǎn)程文件夾包含瀏覽者從Internet訪問的文件。 （3）測試服務(wù)器文件夾：用來處理動態(tài)頁的文件夾。 3.2.3 創(chuàng)建網(wǎng)站創(chuàng)建網(wǎng)站 l使用Dreamweaver應(yīng)用向?qū)韯?chuàng)建網(wǎng)站，可 以分為“基本”與“高級”兩種方式。 l

13、1“基本基本”方式方式 “基本”方式指導(dǎo)網(wǎng)頁設(shè)計師逐步來完成站點的設(shè) 置，每一步都有針對性的指導(dǎo)。 l2“高級高級”方式方式 具有一定網(wǎng)頁制作基礎(chǔ)的高級用戶，可以選擇“高 級”選項卡，直接創(chuàng)建站點信息。通過這種模式進(jìn)行 設(shè)置，網(wǎng)頁設(shè)計師在創(chuàng)建站點過程中可發(fā)揮更強(qiáng)的主 動性。 3.2.3 創(chuàng)建網(wǎng)站創(chuàng)建網(wǎng)站 管理站點文件管理站點文件 l一般來說,一個站點包含的文件很多,大型站點 更是如此.如果將所有的文件混雜在一起,則整 個站點顯得雜亂無章,自己看起來也很不舒服 且不易管理。應(yīng)該將各個文件分門別類地放到 不同的文件夾下，這樣可以使整個站點結(jié)構(gòu)看 起來條理清晰，井然有序。這樣做主要是為網(wǎng) 頁設(shè)計人員

14、在修改管理頁面文件時提供方便。 3.2.3 創(chuàng)建網(wǎng)站創(chuàng)建網(wǎng)站 管理站點文件管理站點文件 adm放置后臺管理程序，對于動態(tài)網(wǎng)站是少不了的一個文件夾 audio放置音頻文件 backup放置備份文件 doc放置Word文檔 img放置站點用到的圖片 video放置放置視頻文件 zip提供給客戶下載的壓縮文件 source放置開發(fā)過程中編寫的源文件，如FLASH，photoshop index站首頁中的各種文件，首頁使用率最高，為它單獨建一個文 件夾很有必要 web放置WEB文件夾 3.2.4 管理網(wǎng)站管理網(wǎng)站 l1導(dǎo)入和導(dǎo)出站點導(dǎo)入和導(dǎo)出站點 所謂導(dǎo)入、導(dǎo)出站點就是先將站點配置信息導(dǎo)出為以.ste

15、為 文件擴(kuò)展名的XML文件作為備份，等到將來需要還原時，將該 站點信息再導(dǎo)入到Dreamweaver中。 l2刪除站點刪除站點 當(dāng)不再需要某一站點時，可以從“管理站點”對話框中進(jìn)行 刪除。 l3上傳文件上傳文件 就是把編輯好的文件從本地站點復(fù)制到遠(yuǎn)程服務(wù)器上。 l4獲取文件獲取文件 就是從遠(yuǎn)程站點復(fù)制文件到本地站點。 l5同步文件同步文件 就是使本地站點的文件與遠(yuǎn)程站點的文件保持一致。 3.3 基本網(wǎng)頁的創(chuàng)建基本網(wǎng)頁的創(chuàng)建 在Dreamweaver中，創(chuàng)建網(wǎng)頁很簡單。用戶 可以以所見即所得的方式在網(wǎng)頁中插入文本、圖 形、圖像、視頻、Flash及超鏈接等內(nèi)容，從而 制作出各種風(fēng)格的網(wǎng)頁。本節(jié)將詳

16、細(xì)介紹如何在 網(wǎng)頁中插入各種元素。 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 在編輯文檔前，需要對頁面的屬性進(jìn)行必要 的設(shè)置，設(shè)定一些影響到整個網(wǎng)頁的參數(shù)。頁面 設(shè)置的內(nèi)容包括外觀、鏈接、標(biāo)題、標(biāo)題/編碼 和跟蹤圖像等。通過設(shè)置頁面屬性可以控制頁面 的背景顏色、背景圖像、文本及鏈接樣式等。 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 l1外觀外觀 外觀設(shè)置主要用來設(shè)置頁面的一些基本屬性。 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 l2鏈接鏈接 鏈接用來設(shè)置頁面的超鏈接效果，包括鏈接字體及字號、鏈接文 本顏色、變換圖像鏈接顏色、已訪問鏈接和活動鏈接的顏色。 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 l3標(biāo)題標(biāo)題(CSS)

17、 標(biāo)題（CSS）可以設(shè)置網(wǎng)頁標(biāo)題CSS的字體和各標(biāo)題的字體和顏 色 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 l4. 標(biāo)題標(biāo)題/編碼編碼 標(biāo)題/編碼可以設(shè)置網(wǎng)頁的標(biāo)題和文字編碼。標(biāo)題可在該文本框 中輸入主題名稱或一些廣告語。 3.3.1頁面屬性設(shè)置頁面屬性設(shè)置 l5. 跟蹤圖像跟蹤圖像 跟蹤圖像就是設(shè)計網(wǎng)頁的草圖，作為背景鋪在編輯網(wǎng)頁的下面， 用來引導(dǎo)網(wǎng)頁的設(shè)計。 3.3.2 插入文本插入文本 文本是網(wǎng)頁中的基礎(chǔ)元素，無論制作什么 類型的網(wǎng)頁，都是不可缺少的。網(wǎng)頁中的文本可 以分為網(wǎng)頁標(biāo)題、普通文本和特殊字符三大類。 1插入網(wǎng)頁標(biāo)題插入網(wǎng)頁標(biāo)題 網(wǎng)頁標(biāo)題是一個在瀏覽器的標(biāo)題欄上顯示 的網(wǎng)頁標(biāo)題。設(shè)置

18、合理的標(biāo)題，可以幫助讀者區(qū) 分各個網(wǎng)頁的主要內(nèi)容。 3.3.2 插入文本插入文本 l2插入普通文本插入普通文本 網(wǎng)頁中的文本是表達(dá)網(wǎng)頁內(nèi)容的主要方式。 根據(jù)輸入方式的不同，可以分為普通文本和特 殊字符。普通文本就是用戶可以在網(wǎng)頁中按照 文本方式直接輸入的文本。 3.3.2 插入文本插入文本 l3插入特殊字符插入特殊字符 在網(wǎng)頁制作中，設(shè)計人員經(jīng)常需要插入一些諸 如版權(quán)符號的特殊字符。這些特殊字符在 HTML中以名稱或數(shù)字的形式表示。 例如，符號C表示版權(quán)聲明，在HTML中用 “” （javascript一詞后依次接一個冒號和一個分 號）即可，表示不執(zhí)行任何代碼，相當(dāng)于空鏈接。 3.4.9 歸納

19、與思考?xì)w納與思考 通過創(chuàng)建鏈接，可以把Internet上眾多的網(wǎng) 站和網(wǎng)頁聯(lián)系起來，構(gòu)成一個有機(jī)的整體。點擊 網(wǎng)頁上的鏈接就可以在Internet上的網(wǎng)站之間相 互跳轉(zhuǎn)，實現(xiàn)網(wǎng)絡(luò)漫游。在網(wǎng)頁中可以創(chuàng)建的鏈 接包括文字鏈接、圖像鏈接、下載鏈接、電子郵 件鏈接、錨記鏈接和腳本鏈接等。 3.4.10 應(yīng)用技巧與常見錯誤應(yīng)用技巧與常見錯誤 在網(wǎng)頁中插入錨記時，在設(shè)計模式下經(jīng)常發(fā)現(xiàn)網(wǎng)頁 元素跳到其他位置，不利于網(wǎng)頁元素的定位。如果不希 望這種情況的發(fā)生，可以單擊“查看”“可視化助理” 命令，在彈出的下拉菜單中單擊“不可見元素”，取消 選中狀態(tài)。 在創(chuàng)建鏈接時初學(xué)者常犯的錯誤是不能正確使用路 徑。第一個方面的錯誤是路徑名和文件名使用中文