網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目實(shí)訓(xùn)教程ppt課件(完整版)

1、項(xiàng)目1 優(yōu)秀網(wǎng)站賞析 項(xiàng)目2 初識(shí)Dreamweaver CS5 項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 2.1 項(xiàng)目描述 在自己動(dòng)手制作網(wǎng)頁(yè)之前，應(yīng)該熟悉網(wǎng)站和網(wǎng)頁(yè)相關(guān)的知識(shí)，了解制作網(wǎng)頁(yè)、處理圖形圖像、制作動(dòng)畫(huà)的專(zhuān)業(yè)工具，重點(diǎn)了解和熟悉Dreamweaver CS5的工作環(huán)境，從而為以后制作網(wǎng)頁(yè)打下良好的基礎(chǔ)。 返 回2.2 知識(shí)儲(chǔ)備2.2.1 網(wǎng)站和網(wǎng)頁(yè)的基礎(chǔ)知識(shí)2.2.2 網(wǎng)頁(yè)的組成元素2.2.3 網(wǎng)頁(yè)制作工具2.2.4 初識(shí)Dreamweaver CS5中文版2.2 知識(shí)儲(chǔ)備 2.2.1 網(wǎng)站和網(wǎng)頁(yè)的基礎(chǔ)知識(shí) 1.萬(wàn)維網(wǎng) “World Wide Web”簡(jiǎn)寫(xiě)為WWW，

2、也稱(chēng)為萬(wàn)維網(wǎng)。它是目前Internet上最流行的一種基于超文本形式的資源信息。萬(wàn)維網(wǎng)的最大好處是它將全世界的各種信息鏈接在一起，用戶可通過(guò)網(wǎng)絡(luò)自由地訪問(wèn)這些資源并加以利用。 2.Server與Browser Server即服務(wù)器，Browser即瀏覽器。網(wǎng)頁(yè)瀏覽者須通過(guò)瀏覽器連接到Web服務(wù)器，才能瀏覽Web服務(wù)器上的文件。3. 網(wǎng)頁(yè)與網(wǎng)站 網(wǎng)頁(yè):網(wǎng)頁(yè)瀏覽器顯示的網(wǎng)站中每一個(gè)WEB文件稱(chēng)為網(wǎng)頁(yè)。按網(wǎng)頁(yè)在一個(gè)站點(diǎn)中所處的位置可將其分為主頁(yè)（也叫首頁(yè)）和子頁(yè)（指與主頁(yè)鏈接的頁(yè)面）。根據(jù)網(wǎng)頁(yè)的表現(xiàn)形式可將網(wǎng)頁(yè)分為靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面。網(wǎng)站:通常把一系列在邏輯上可視為一個(gè)整體的頁(yè)面稱(chēng)為網(wǎng)站，通常由網(wǎng)站空

3、間、網(wǎng)站文件和資源、網(wǎng)絡(luò)地址組成 4.Hypertext、HTTP、HTML、CSSHypertext（超文本）是一種可以指向其他文件的文字或圖片，這種功能稱(chēng)為超級(jí)鏈接（HyperLink）。HTTP(HyperText Transfer Protocol)超文件傳輸協(xié)議是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)傳輸協(xié)議 HTML（HyperText Markup Language ）即超文本標(biāo)記語(yǔ)言 CSS (Cascading Style Sheets)指層疊樣式表 2.2.2 網(wǎng)頁(yè)的組成元素1.文本、圖像與動(dòng)畫(huà)文本:是網(wǎng)頁(yè)中最基本的組成元素之一，網(wǎng)站設(shè)計(jì)中的信息主要以文本為主，通過(guò)它可以清楚明了地

4、將信息傳達(dá)給網(wǎng)頁(yè)瀏覽者。圖像:較文本更生動(dòng)、更形象，給人直觀的視覺(jué)效果，傳遞一些文本不能傳遞的信息 。動(dòng)畫(huà)：網(wǎng)頁(yè)中常用的動(dòng)畫(huà)格式主要有兩種，一種是GIF動(dòng)畫(huà)，一種是SWF動(dòng)畫(huà) 2.超級(jí)鏈接與導(dǎo)航欄超級(jí)鏈接：是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接，這個(gè)目的端通常是另一個(gè)網(wǎng)頁(yè)、一幅圖片、一個(gè)電子郵件地址或者是本網(wǎng)頁(yè)中的其他位置。導(dǎo)航欄：是指通過(guò)一定的技術(shù)手段，為網(wǎng)站的訪問(wèn)者提供一定的途徑，使其可以方便地訪問(wèn)到所需的內(nèi)容，它是網(wǎng)站的“菜單”，一般由多個(gè)按鈕或者多個(gè)文本超級(jí)鏈接組成。 3.表格、框架、表單 表格：主要用于網(wǎng)頁(yè)內(nèi)容的布局，精確控制各種網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中出現(xiàn)的位置，讓瀏覽者賞心悅目 ?？蚣埽撼?/p>

5、用到的框架結(jié)構(gòu)有：左側(cè)框架、右側(cè)框架、頂部框架、底部框架、上方和下方框架以及各種嵌套框架結(jié)構(gòu)。表單：是一種重要的網(wǎng)絡(luò)交互工具，它可以實(shí)現(xiàn)瀏覽者同Web服務(wù)器之間的信息交互傳送，它是網(wǎng)絡(luò)信息收集處理的一種重要方式。提示：網(wǎng)頁(yè)中還有如音頻、視頻、JavaApplet等其他元素。 2.2.3 網(wǎng)頁(yè)制作工具 1.網(wǎng)頁(yè)編輯工具FrontPage ：是Microsoft Office家族的一員，它界面、功能與Word都非常相似。 Dreamweaver ：Dreamweaver CS5與Fireworks CS5、Flash CS5一起，被人們稱(chēng)著“網(wǎng)頁(yè)制作三劍客” 。借助Dreamweaver軟件，用戶

6、可以快速、輕松地完成設(shè)計(jì)、開(kāi)發(fā)、維護(hù)網(wǎng)站和Web應(yīng)用程序設(shè)計(jì)的全過(guò)程。Dreamweaver新功能中包含了CSS工具，可用于構(gòu)建動(dòng)態(tài)用戶界面的Ajax組件，以及與其他Adobe軟件的智能集成。 2.圖像處理工具Photoshop：是Adobe公司推出的一款圖像處理軟件，它功能強(qiáng)大，操作界面友好，使用它可以加速?gòu)南胂髣?chuàng)作到圖像實(shí)現(xiàn)的過(guò)程 。Fireworks：是一個(gè)將矢量圖形處理和點(diǎn)陣圖像處理合二為一的專(zhuān)業(yè)化Web圖像處理軟件。動(dòng)畫(huà)制作工具 ：Flash用于制作和編輯具有較強(qiáng)交互性的矢量動(dòng)畫(huà) 。 提示：除了上述介紹的工具外，還有諸如圖標(biāo)制作工具、抓圖工具、網(wǎng)站發(fā)布工具等其他的工具。 2.2.4

7、初識(shí)Dreamweaver CS5中文版 1.Dreamweaver CS5簡(jiǎn)介 它具有業(yè)界領(lǐng)先的 Web 開(kāi)發(fā)環(huán)境、新增了集成 CMS 支持、CSS檢查、與Adobe Browser Lab集成、PHP自定義類(lèi)代碼提示、保持跨媒體一致性、仔細(xì)查看站點(diǎn)特定的代碼提示等功能。 2. Dreamweaver CS5啟動(dòng)與退出（1）啟動(dòng)Dreamweaver CS5的操作步驟如下：?jiǎn)螕簟伴_(kāi)始”“程序”“Adobe”“Adobe Dreamweaver CS5”即可啟動(dòng)。提示：如果桌面上有Dreamweaver CS5的快捷方式，雙擊該快捷方式圖標(biāo)也可以啟動(dòng)Dreamweaver CS5。 （2）退出

8、Dreamweaver CS5。退出Dreamweaver CS5的方法有以下幾種：方法一：?jiǎn)螕鬌reamweaver CS5窗口右上方的“關(guān)閉”按鈕；方法二：按“ALT+F4”組合鍵；方法三：?jiǎn)螕舨藛巍拔募薄巴顺觥泵睢?3.Dreamweaver CS5工作環(huán)境 Dreamweaver CS5 工作界面由標(biāo)題欄、菜單欄、插入面板、文檔工具欄、文檔編輯區(qū)、狀態(tài)欄、屬性面板、面板組等組成。 （1）菜單欄包含了10類(lèi)菜單：文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口、幫助。菜單按功能的不同進(jìn)行了合理的分類(lèi)，使用起來(lái)非常方便。（2）文檔工具欄在文檔工具欄中包含了用于在文檔的幾個(gè)視圖之間進(jìn)

9、行快速切換的按鈕，如代碼、拆分、設(shè)計(jì) 。 （3）文檔編輯區(qū) 文檔編輯區(qū)在文檔工具欄的下方，它是用于創(chuàng)建或編輯網(wǎng)頁(yè)文件的操作區(qū)。 （4）狀態(tài)欄狀態(tài)欄在文檔編輯區(qū)的下方、屬性面板的上方，狀態(tài)欄顯示當(dāng)前文檔窗口的大小和下載速度，以及Dreamweaver新增的放大窗口的工具。 （5）屬性面板在默認(rèn)情況下，屬性面板位于Dreamweaver窗口的底部，但是可以將其拖動(dòng)成為工作區(qū)的浮動(dòng)面板。 （6）面板組面板組位于Dreamweaver窗口的右側(cè)，也可以浮動(dòng)于窗口。 （7）工作界面定制用戶可以根據(jù)個(gè)人的習(xí)慣愛(ài)好進(jìn)行工作界面的定制，單擊窗口標(biāo)題欄右側(cè)的“設(shè)計(jì)器”按鈕，在彈出的下拉菜單中定制“應(yīng)用程序開(kāi)發(fā)人

10、員”、“經(jīng)典”、“編輯器”、“設(shè)計(jì)器”等不同的工作界面 。返 回2.3 實(shí)踐向?qū)?任務(wù)2-1 將Dreamweaver CS5的工作界面定制為“經(jīng)典”界面。操作步驟： 1.單擊“開(kāi)始”菜單“程序”“Adobe”“Adobe Dreamweaver CS5”命令啟動(dòng)Dreamweaver CS5。2. 單擊窗口標(biāo)題欄右側(cè)的“設(shè)計(jì)器”按鈕，在彈出的下拉菜單中選擇“經(jīng)典”選項(xiàng)，即可完成“經(jīng)典”工作界面的定制。 返 回2.4 能力拓展 1.啟動(dòng)Dreamweaver CS5，熟悉Dreamweaver CS5的工作界面和操作環(huán)境。2. 在Dreamweaver CS5主窗口中觀察其各個(gè)菜單、工具欄、面

11、板的組成。 返 回2.5 項(xiàng)目小結(jié) 本項(xiàng)目主要介紹了有關(guān)網(wǎng)站和網(wǎng)頁(yè)的基礎(chǔ)知識(shí)、網(wǎng)頁(yè)的基本組成元素、Dreamweaver CS5的啟動(dòng)與退出，重點(diǎn)介紹了Dreamweaver CS5的操作環(huán)境，使讀者逐步了解并熟悉這個(gè)強(qiáng)大的網(wǎng)站開(kāi)發(fā)工具。 返 回項(xiàng)目3 站點(diǎn)的創(chuàng)建與管理 項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 3.1 項(xiàng)目描述 在自己動(dòng)手制作網(wǎng)頁(yè)之前，應(yīng)該熟悉網(wǎng)站和網(wǎng)頁(yè)相關(guān)的知識(shí)，了解制作網(wǎng)頁(yè)、處理圖形圖像、制作動(dòng)畫(huà)的專(zhuān)業(yè)工具，重點(diǎn)了解和熟悉Dreamweaver CS5的工作環(huán)境，從而為以后制作網(wǎng)頁(yè)打下良好的基礎(chǔ)。 返 回3.2 知識(shí)儲(chǔ)備3.2.1 站點(diǎn)的創(chuàng)建 1.認(rèn)識(shí)站點(diǎn)面

12、板站點(diǎn)面板即“文件”面板，包含在“文件”面板組中，默認(rèn)情況下位于浮動(dòng)面板?？繀^(qū)，如果該區(qū)域無(wú)文件面板，可執(zhí)行菜單“窗口”“文件”命令（或按F8鍵）即可將其打開(kāi)。選擇站點(diǎn)工具按鈕站點(diǎn)目錄文件夾列表文件列表選擇站點(diǎn)視圖2.站點(diǎn)的規(guī)劃 通常在規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)，需要注意以下幾點(diǎn)：（1）文檔分類(lèi)保存。先為站點(diǎn)在本地硬盤(pán)上創(chuàng)建一個(gè)根文件夾，在此文件夾中，分別建立諸如圖像文件夾、網(wǎng)頁(yè)文件夾等其他子文件夾。（2）合理的命名文件名。給文件命名時(shí)，盡量避免使用中文文件名，有些服務(wù)器不能對(duì)中文文件名提供很好的支持。文件夾和文件的名稱(chēng)最好要有具體的含義。3.創(chuàng)建本地站點(diǎn) 進(jìn)入Dreamweaver CS5的工作界面，選

13、擇菜單“站點(diǎn)”“新建站點(diǎn)”選項(xiàng)，系統(tǒng)彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，然后輸入“站點(diǎn)名稱(chēng)”，選擇“本地站點(diǎn)文件夾”所在的位置，在“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中，單擊“保存”按鈕。 3.2.2 站點(diǎn)的基本編輯 1.編輯站點(diǎn) 如果對(duì)站點(diǎn)進(jìn)行編輯，可以在“管理站點(diǎn)”對(duì)話框中，選擇要編輯的站點(diǎn)，然后單擊“編輯”按鈕，則將重新打開(kāi)“站點(diǎn)定義”對(duì)話框，用戶根據(jù)需要逐步修改站點(diǎn)的屬性。2.復(fù)制站點(diǎn)復(fù)制站點(diǎn)省去了重復(fù)建立多個(gè)結(jié)構(gòu)相同的站點(diǎn)的操作，這樣可以提高工作效率，可以讓這些站點(diǎn)保持一定的相似性。3.刪除站點(diǎn)如果站點(diǎn)已經(jīng)沒(méi)有用了，可以將其刪除，但這個(gè)刪除只是從Dreamweaver CS5的站點(diǎn)管理器中刪除，網(wǎng)站的文件

14、仍保存在硬盤(pán)原來(lái)的位置上，并沒(méi)有被刪除。4. 導(dǎo)入站點(diǎn)使用導(dǎo)入功能可以將現(xiàn)有的網(wǎng)站直接導(dǎo)入到Dreamweaver中進(jìn)行編輯和修改。5. 導(dǎo)出站點(diǎn)Dreamweaver可以將網(wǎng)站導(dǎo)出為XML文件，然后將其導(dǎo)回Dreamweaver，方便在各計(jì)算機(jī)和產(chǎn)品版本之間移動(dòng)網(wǎng)站，或者與其他用戶共享。 3.2.3 管理站點(diǎn)文檔 1.創(chuàng)建站點(diǎn)目錄在站點(diǎn)根目錄上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件夾”命令，如圖3-5所示，它以反白顯示，提醒更換名稱(chēng)，輸入文件夾名稱(chēng)，按回車(chē)鍵即可完成文件夾的創(chuàng)建。圖3-5 “文件”面板快捷菜單2. 網(wǎng)頁(yè)文檔的管理 （1）新建網(wǎng)頁(yè)文檔 方法一：?jiǎn)?dòng)Dreamweaver

15、 CS5后，會(huì)出現(xiàn)一個(gè)選擇界面，它包括“打開(kāi)最近的項(xiàng)目”、“新建”、“主要功能”等可選項(xiàng)，在該界面中選擇“新建”列表中的“HTML”選項(xiàng)，便可以直接創(chuàng)建一個(gè)HTML網(wǎng)頁(yè)文檔。 方法二：?jiǎn)螕鬌reamweaver CS5主窗口的菜單“文件”“新建”，打開(kāi) “新建文檔”對(duì)話框，然后在頁(yè)面類(lèi)型中選擇“HTML”，然后單擊“創(chuàng)建”按鈕即可創(chuàng)建一個(gè)空白網(wǎng)頁(yè)文檔 （2）保存網(wǎng)頁(yè)文檔保存網(wǎng)頁(yè)文檔的方法主要有以下三種。方法一：?jiǎn)螕鬌reamweaver CS5主窗口的菜單“文件”“保存”或者“保存全部”。方法二：按“Ctrl+S”組合鍵。方法三：?jiǎn)螕魳?biāo)準(zhǔn)工具欄中的“保存”按鈕或者“全部保存”按鈕。 （3）打開(kāi)

16、網(wǎng)頁(yè)文檔 打開(kāi)網(wǎng)頁(yè)文檔，單擊Dreamweaver CS5主窗口的菜單“文件”“打開(kāi)”，彈出“打開(kāi)”對(duì)話框，在該對(duì)話框中可以打開(kāi)多種類(lèi)型的文檔，如HTML、XML文檔等。（4）關(guān)閉網(wǎng)頁(yè)文檔單擊菜單“文件”“關(guān)閉”或者“全部關(guān)閉”，即可關(guān)閉網(wǎng)頁(yè)文檔。如果頁(yè)面尚未保存，則會(huì)彈出一個(gè)對(duì)話框，確認(rèn)是否保存。 3.2.4 設(shè)置網(wǎng)頁(yè)基本屬性 1.視圖Dreamweaver CS5提供的視圖方式有以下幾種：（1）代碼視圖：一個(gè)用于編寫(xiě)和編輯HTML、JavaScript、服務(wù)器語(yǔ)言代碼（如：PHP或ColdFusion標(biāo)記語(yǔ)言(CFML)）以及任何其他類(lèi)型代碼的手工編碼環(huán)境。（2）拆分視圖：是代碼視圖的一種

17、拆分版本，使用戶可以同時(shí)對(duì)文檔的不同部分進(jìn)行代碼編輯。（3）設(shè)計(jì)視圖：一個(gè)用于可視化頁(yè)面布局、可視化編輯和快速應(yīng)用程序開(kāi)發(fā)的設(shè)計(jì)環(huán)境。在此視圖中，Dreamweaver顯示文檔的完全可編輯的可視化表示形式，類(lèi)似于在瀏覽器中查看頁(yè)面時(shí)看到的內(nèi)容。（4）實(shí)時(shí)代碼視圖：它顯示瀏覽器用于執(zhí)行該頁(yè)面的實(shí)際代碼，當(dāng)在“實(shí)時(shí)”視圖中與該頁(yè)面進(jìn)行交互時(shí)，它可以動(dòng)態(tài)變化。“實(shí)時(shí)代碼”視圖不可編輯。(5) 實(shí)時(shí)視圖：類(lèi)似于“設(shè)計(jì)”視圖，但可以更逼真地顯示文檔在瀏覽器中的表示形式，并使用戶能夠像在瀏覽器中那樣與文檔進(jìn)行交互?！皩?shí)時(shí)”視圖不可編輯。但是可以在“代碼”視圖中進(jìn)行編輯，然后刷新“實(shí)時(shí)”視圖來(lái)查看所做的更改

18、。 2.設(shè)置網(wǎng)頁(yè)標(biāo)題 添加網(wǎng)頁(yè)標(biāo)題的方法有多種，在這里介紹3種方法，具體如下：方法一：在Dreamweaver CS5工具欄標(biāo)題框中直接輸入新標(biāo)題。方法二：執(zhí)行菜單中的“修改”“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話框，選擇“分類(lèi)”中的“標(biāo)題”選項(xiàng)，在“標(biāo)題”文本框中輸入相應(yīng)的標(biāo)題文字，然后單擊“確定”按鈕。 方法三：?jiǎn)螕粑臋n中的“代碼”視圖按鈕，然后在和標(biāo)簽之間輸入標(biāo)題內(nèi)容。 3.設(shè)置網(wǎng)頁(yè)背景 網(wǎng)頁(yè)背景包括背景顏色和背景圖像 。（1）執(zhí)行菜單中的“修改”“頁(yè)面屬性”命令，或者直接單擊“屬性”面板上的“頁(yè)面屬性”按鈕，或?qū)⒐鈽?biāo)定位到文檔空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“頁(yè)面屬性”命令，

19、彈出“頁(yè)面屬性”對(duì)話框。（2）在“頁(yè)面屬性”對(duì)話框中，選擇“分類(lèi)”中的“外觀（CSS）”選項(xiàng)，設(shè)置“背景顏色”或“背景圖像”。單擊“確定”按鈕 。（3）對(duì)于選擇背景顏色來(lái)說(shuō)，直接在“頁(yè)面屬性”對(duì)話框中選擇“背景顏色”選項(xiàng)即可 。4.設(shè)置頁(yè)邊距頁(yè)邊距可以在文檔的“頁(yè)面屬性”對(duì)話框中設(shè)置。（1）打開(kāi)菜單中的“修改”“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話框。（2）在“頁(yè)面屬性”對(duì)話框中，選擇“分類(lèi)”中的“外觀”選項(xiàng)，根據(jù)需要設(shè)定“上邊距”、“下邊距”、“左邊距”、“右邊距”。 5.定義默認(rèn)的文本顏色、字體和大小 文本顏色、字體和大小的設(shè)置都是在“頁(yè)面屬性”對(duì)話框中設(shè)置完成。（1）單擊“屬性”面板中的

20、“頁(yè)面屬性”按鈕，彈出“頁(yè)面屬性”對(duì)話框。（2）在“分類(lèi)”列表框“外觀（CSS）”選項(xiàng)中，分別選擇“文本顏色”、“頁(yè)面字體”和“大小”選項(xiàng)，即可將網(wǎng)頁(yè)的默認(rèn)文本顏色、字體和大小改變。 6.在瀏覽器中瀏覽網(wǎng)頁(yè) 可以在瀏覽器中瀏覽設(shè)置的效果，其方法有以下三種：方法一：按“F12”鍵。方法二：?jiǎn)螕舨藛巍拔募薄霸跒g覽器中預(yù)覽”“Iexplore”。方法三：?jiǎn)螕簟拔臋n”工具欄中“在瀏覽器中預(yù)覽/調(diào)試”按鈕，在彈出的快捷菜單中單擊“預(yù)覽在Iexplore”。 返 回3.3 實(shí)踐向?qū)?任務(wù)3-1 創(chuàng)建一個(gè)實(shí)例網(wǎng)站“我的個(gè)人站點(diǎn)”的站點(diǎn)結(jié)構(gòu)如圖3-1所示，在站點(diǎn)中創(chuàng)建一個(gè)本地根文件夾“Website”，然后

21、在“Website”文件夾中分別創(chuàng)建flash、images、music、vedio、web等子文件夾，創(chuàng)建一個(gè)Index.html空白網(wǎng)頁(yè)。 返 回3.4 能力拓展 創(chuàng)建一個(gè)名為“信工系黨員電腦維護(hù)部”的站點(diǎn)，該網(wǎng)站所有文件存儲(chǔ)在本地計(jì)算機(jī)E盤(pán)中“Web”文件夾中；在“文件”面板的站點(diǎn)根目錄下創(chuàng)建一個(gè)文件夾“DW CS5”，在該文件夾中創(chuàng)建3個(gè)子文件夾“PHOTO”、“TEXT”、“WEB”，創(chuàng)建一個(gè)INDEX.HTML的網(wǎng)頁(yè)文檔；將所有的圖像文件復(fù)制到“PHOTO”文件夾中。 返 回3.5 項(xiàng)目小結(jié) 本項(xiàng)目主要介紹了站點(diǎn)的創(chuàng)建、站點(diǎn)的規(guī)劃、創(chuàng)建本地站點(diǎn)、站點(diǎn)的基本編輯、管理站點(diǎn)文檔、設(shè)置網(wǎng)

22、頁(yè)基本屬性。對(duì)于制作一個(gè)完整的網(wǎng)站，建立站點(diǎn)的基本操作非常重要。 返 回項(xiàng)目4 制作純文本網(wǎng)頁(yè)項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 文字是網(wǎng)頁(yè)中主要的信息載體，也是網(wǎng)頁(yè)中最為重要的設(shè)計(jì)元素,用戶主要通過(guò)文字了解網(wǎng)頁(yè)的內(nèi)容。因?yàn)榧兾谋卷?yè)面所占用的存儲(chǔ)空間非常小，在網(wǎng)絡(luò)上傳輸速度較快，能快速地被用戶打開(kāi)，因此一般學(xué)習(xí)網(wǎng)站制作案例都是從純文本頁(yè)面開(kāi)始。整齊美觀、大小適中的文本能夠體現(xiàn)網(wǎng)頁(yè)的視覺(jué)效果，本項(xiàng)目所制作的“名勝古跡”純文本網(wǎng)頁(yè)，效果如圖所示。返 回4.1 項(xiàng)目描述4.2.1 文本的輸入4.2.2 網(wǎng)頁(yè)設(shè)計(jì)視圖下編輯文本4.2.3 插入相關(guān)文本要素4.2.4 文本的格式化返

23、回4.2 知識(shí)儲(chǔ)備4.2.1 文本的輸入1輸入文本文字Dreamweaver CS5提供了多種插入文本的方法。標(biāo)題、欄目名稱(chēng)等少量文本，可以選擇直接在文檔窗口中鍵入；段落文本，可以選擇從其它文檔中復(fù)制粘貼；整篇文章或表格，可以選擇導(dǎo)入XML文檔、表格式數(shù)據(jù)、Word文檔和Excel文檔，導(dǎo)入文本界面如圖 所示。 返 回4.2 知識(shí)儲(chǔ)備2輸入文本空格在“頁(yè)面設(shè)計(jì)窗口”中可以直接輸入空格，但只能輸入一個(gè)空格，如需輸入多個(gè)空格，可采用以下方法。（1）切換到代碼模式，在想插入空格的代碼中插入“”即可。（2）直接使用快捷鍵【Ctrl+Shift+空格鍵】。（3）在輸入法中，把輸入法變?yōu)槿悄Ｊ?，插入空?/p>

24、。（4）點(diǎn)“編輯”“首選參數(shù)”“允許多個(gè)連續(xù)空格”如圖所示。返 回3實(shí)現(xiàn)文本換行一般Dreamweaver中的文本段落是自動(dòng)換行的，即在輸入文字時(shí)，若文字超過(guò)了窗口顯示范圍時(shí)，會(huì)自動(dòng)換到下一行。如果在文本輸入的過(guò)程中需要?jiǎng)澐侄温洌梢允褂谩綞nter】鍵進(jìn)行換行，用【Enter】鍵換行后上下段落的行間距為較大。如果用【Shift+Enter】快捷鍵進(jìn)行強(qiáng)制換行，換行所產(chǎn)生的行距為【Enter】鍵換行所產(chǎn)生行距的一半，如圖所示。 返 回4.2.2 網(wǎng)頁(yè)設(shè)計(jì)視圖下編輯文本1選中網(wǎng)頁(yè)中的文本把鼠標(biāo)指針指向要選中的文本開(kāi)始處，按住鼠標(biāo)左鍵并拖選需要選中的文本，拖動(dòng)到被選中文本的末尾時(shí)釋放鼠標(biāo)左鍵。2刪

25、除文本操作使用鼠標(biāo)選擇要?jiǎng)h除的文本，先按住【Shift+方向鍵】選擇要?jiǎng)h除的文本，使其高亮度顯示，然后按Delete鍵刪除，或者單擊“編輯”菜單，選擇“清除”項(xiàng)進(jìn)行刪除。如果刪除中出現(xiàn)了錯(cuò)誤，單擊“編輯”菜單，選擇“撤消”項(xiàng)，或者按【Ctrl+Z】鍵，就能回到刪除之前的狀態(tài)了。3搜索、替換文本打開(kāi)需要編輯的HTML文檔，單擊“編輯”菜單，選擇“查找和替換”項(xiàng)，彈出“查找和替換”對(duì)話框，按照“查找和替換”對(duì)話框的說(shuō)明進(jìn)行操作即可。 返 回4.2.3 插入相關(guān)文本要素1.插入特殊字符（1）通過(guò)菜單“插入”“HTML”“特殊字符”插入先將光標(biāo)放置到需要插入特殊字符的位置，然后展開(kāi)菜單“插入”“HTM

26、L”“特殊字符”，在“特殊字符”的級(jí)聯(lián)菜單中選擇需要插入的特殊字符。（2）通過(guò)“文本”插入工具欄插入先在Dreamweaver CS5的“插入”工具欄中選擇“文本”，顯示“文本”插入工具欄，如圖所示。將光標(biāo)放置到需要插入特殊字符的位置，然后單擊“文本”插入工具欄的“字符”按鈕，彈出級(jí)聯(lián)菜單，在級(jí)聯(lián)菜單中選擇所需插入的特殊字符即可。返 回2插入文本列表當(dāng)需要條列式逐項(xiàng)列出內(nèi)容時(shí)，使用項(xiàng)目符號(hào)工具就可以在每一個(gè)項(xiàng)目前面加上符號(hào)或編號(hào)。（1）項(xiàng)目列表將鼠標(biāo)定位在要添加項(xiàng)目列表的段落中。在 “屬性”面板中，單擊“項(xiàng)目列表”按鈕即可對(duì)文字添加項(xiàng)目列表符號(hào)。如需更改項(xiàng)目列表，將光標(biāo)定位到需要更改項(xiàng)目列表的

27、文字上。在“屬性”面板中，單擊“列表項(xiàng)目.”按鈕，打開(kāi)“列表屬性”對(duì)話框，在對(duì)話框中進(jìn)行列表樣式設(shè)置。如圖所示。返 回（2）編號(hào)列表若單擊編號(hào)列表按鈕，則項(xiàng)目前面加上的是數(shù)字編號(hào)，如圖所示。返 回3插入水平線（1）在Dreamweaver CS5中打開(kāi)文檔，將光標(biāo)定位在要插入水平線的位置。（2）單擊“插入”菜單，選擇“HTML”項(xiàng)，選擇“水平線”命令。或者單擊“窗口”菜單，選擇“插入”項(xiàng)，打開(kāi)“插入”面板，在面板中選擇“常用”項(xiàng)，單擊“水平線”按鈕，在文檔中就插入了一條水平線。 返 回4插入時(shí)間在Dreamweaver CS5中打開(kāi)文檔，將光標(biāo)定位在要插入日期的位置上。單擊“插入”菜單，選擇“

28、日期”項(xiàng)，或者單擊“窗口”菜單，選擇“插入”項(xiàng)，打開(kāi)“插入”面板，在面板上選擇“常用”項(xiàng)，單擊“日期”按鈕，彈出“插入日期”對(duì)話框。在彈出的“插入日期”對(duì)話框中，選擇所需日期格式后，單擊“確定”按鈕。返 回4.2.4 文本的格式化1文本屬性設(shè)置（1）設(shè)置字體、字號(hào)、顏色選中要改變字體的文本。單擊菜單“插入”“HTML”選項(xiàng)“文本對(duì)象”選項(xiàng)“字體”選項(xiàng)，打開(kāi)“標(biāo)簽編輯器 - font”對(duì)話框。左側(cè)列表框選擇“常規(guī)”選項(xiàng)，在右側(cè)對(duì)應(yīng)的下拉列表框中進(jìn)行字體、字號(hào)、顏色的設(shè)置，設(shè)置完成后單擊“確定”按鈕。 返 回如果在“字體”下拉列表框中沒(méi)有需要的字體名稱(chēng)，則單擊“編輯字體列表”按鈕，打開(kāi)“編輯字體列

29、表”對(duì)話框，在“可用字體”列表中選擇要置入的字體，接著單擊 按鈕。將需要的字體置入“選擇的字體”列表中后，單擊按鈕，即可把需要的字體添加到“字體列表”。返 回（2）設(shè)置字體樣式選中要改變字體樣式的文本。如果沒(méi)有選定文本，那么設(shè)置的字體樣式將應(yīng)用于后面要輸入的文本。單擊“格式”菜單，選擇“樣式”項(xiàng)，彈出樣式下拉列表，選擇一個(gè)樣式即可。如果想取消已經(jīng)設(shè)置好的樣式，則再次選擇該樣式即可取消。 返 回2段落格式設(shè)置在Dreamweaver CS5中可以從三個(gè)方面來(lái)設(shè)置段落的格式，它們分別是設(shè)置段落的標(biāo)題、設(shè)置段落的對(duì)齊方式和設(shè)置段落的縮進(jìn)。（1）設(shè)置段落的標(biāo)題打開(kāi)HTML文檔，將光標(biāo)插入到要作為標(biāo)題的

30、行中，以下三種方法都可以設(shè)置段落標(biāo)題：方法一：使用屬性面板。打開(kāi)文本的屬性面板，在“HTML”選項(xiàng)卡的“格式”下拉列表中，選擇所需要的標(biāo)題樣式，其中“標(biāo)題 1”文字最大，“標(biāo)題 6”文字最小。方法二：使用菜單命令。單擊“格式”菜單，選擇“段落格式”項(xiàng)，在彈出的子菜單中選擇所需要的標(biāo)題樣式。方法三：使用插入面板。單擊“窗口”菜單，選擇“插入”選項(xiàng)，打開(kāi)“插入”面板，選擇“文本”選項(xiàng)，切換到“文本” 插入面板，選擇“標(biāo)題 1 - 標(biāo)題 3”按鈕就可進(jìn)行設(shè)置。 返 回（2）設(shè)置段落的對(duì)齊方式打開(kāi)HTML文檔，將光標(biāo)插入到要對(duì)齊的段落中。單擊“格式”菜單，選擇“對(duì)齊”選項(xiàng)，在彈出的子菜單中，選擇段落的

31、對(duì)齊方式即可設(shè)置。設(shè)置好段落的對(duì)齊方式后，在“代碼”視圖中可以查看源代碼，例如：.（3）設(shè)置段落的縮進(jìn)當(dāng)需要強(qiáng)調(diào)某一段落文字或者引用其他文字時(shí)，需要將文字縮進(jìn)，方便與普通段落進(jìn)行區(qū)分。打開(kāi)文檔，將光標(biāo)插入到要縮進(jìn)的一個(gè)或者多個(gè)段落中，以下兩種方法都可以設(shè)置段落的縮進(jìn)：方法一：使用菜單命令。單擊“格式”菜單，選擇“縮進(jìn)”項(xiàng)，即可設(shè)置段落的縮進(jìn)，如果想取消縮進(jìn)，單擊“格式”菜單，選擇“凸出”項(xiàng)即可。方法二：使用屬性面板。在“屬性”面板中，單擊“內(nèi)縮區(qū)塊”按鈕，即可設(shè)置段落的縮進(jìn)，如果想取消，則單擊左側(cè)的“刪除內(nèi)縮區(qū)塊”按鈕。設(shè)置好段落的縮進(jìn)，在“代碼”視圖中可以查看源代碼，例如：段落的縮進(jìn)返 回任

32、務(wù)4-1 制作“名勝古跡”純文本頁(yè)面。1. 啟動(dòng)Dreamweaver CS5，新建一個(gè)空白頁(yè)面。（1）執(zhí)行“文件”菜單中“新建”命令，在新建文檔窗體中選擇“空白頁(yè)”，頁(yè)面類(lèi)型為“HTML”，單擊“創(chuàng)建”按鈕，新建一空頁(yè)面。 （2）復(fù)制文本內(nèi)容到空白頁(yè)面，選中頁(yè)面文本，在屬性面板中，單擊“頁(yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”對(duì)話框，在該對(duì)話框中進(jìn)行設(shè)置。如頁(yè)面字體為宋體、字體大小為“24px”,顏色為黑色“#000”,左、右邊距為“10px”，上、下邊距為“8px” 。 返 回4.3 實(shí)踐向?qū)Х?回（3）選中頁(yè)面文本“中華名山-五岳”，單擊“格式”菜單，選擇“段落格式”選項(xiàng)，在彈出的子菜單中，選擇

33、為“標(biāo)題1”。在屬性面板的“CSS”選項(xiàng)卡，在“字體”列表框中選擇字體，彈出“新建CSS規(guī)則”對(duì)話框，在“選擇器類(lèi)型”下拉列表框中選擇“標(biāo)簽”，在“選擇器名稱(chēng)”下拉列表框中選擇h1，設(shè)置標(biāo)題的字體font-family為“華文楷體”，字體大小font-size為“36px”，字體樣式font-style為“normal”，顏色color為綠色“#0F0”等。返 回（4）選中標(biāo)題1“中華名山-五岳”中的“五岳”兩字，同上步驟新建CSS規(guī)則，此次選擇復(fù)合內(nèi)容，選擇器名稱(chēng)為“body h1 span”，可以在剛才的標(biāo)題1屬性中創(chuàng)建子屬性，在此屬性中調(diào)整其顏色Color屬性為紅色“#F00”。（5）再

34、次選中“中華名山-五岳”，選擇菜單“格式”“對(duì)齊”“右對(duì)齊”，設(shè)置對(duì)齊方式為居中方式。 返 回（6）把光標(biāo)定位于第一段文字之后，單擊“插入”菜單，選擇“HTML”項(xiàng)，選擇“水平線”命令，在光標(biāo)處插入一條水平線。（選擇HTML菜單欄下的插入水平線，將寬設(shè)置為1，高為100，即可得到豎線）（7）依據(jù)上面的步驟，分別設(shè)置“東岳泰山”、“西岳華山”、“南岳衡山”、“北岳恒山”、“中岳嵩山”五處文字為“標(biāo)題2”，建立不同的CSS規(guī)則來(lái)設(shè)置文本屬性。如字體大小為“30px”，顏色設(shè)置“#906”。（8）保存頁(yè)面后，在“頁(yè)面屬性”對(duì)話框中設(shè)置背景圖像，頁(yè)面標(biāo)題為“中華五岳”。（9）按快捷鍵【F12】，在瀏覽

35、器中預(yù)覽效果。 返 回 創(chuàng)建“再別康橋”網(wǎng)頁(yè)，通過(guò)制作該網(wǎng)頁(yè)，掌握文本的標(biāo)題設(shè)置、文字的移動(dòng)和復(fù)制、文字的查找與替換等基本操作。返 回4.4 能力拓展 文本是大多數(shù)網(wǎng)頁(yè)的主要內(nèi)容，Dreamweaver CS5提供了段落文本操作的基本工具，可以編排段落、建立與更改項(xiàng)目符號(hào)等，能夠隨心所欲地編輯網(wǎng)頁(yè)內(nèi)容。 返 回4.5 項(xiàng)目小結(jié)項(xiàng)目5 制作圖文混排網(wǎng)頁(yè)項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 圖像是網(wǎng)頁(yè)元素中的另一重要組成部分，在網(wǎng)頁(yè)中插入圖像可以使網(wǎng)頁(yè)更好地表現(xiàn)網(wǎng)站的主題思想，使版面變得豐富多彩，吸引更多的瀏覽者。 圖像文件的格式有很多種，但實(shí)際上在網(wǎng)頁(yè)中常使用的圖像文件格式只有

36、GIF、JPG和PNG這三種，因?yàn)檫@三種圖像文件都是經(jīng)過(guò)壓縮，因此文件比較小，利于網(wǎng)絡(luò)上傳輸與觀看。 在網(wǎng)頁(yè)中使用圖像時(shí)，要考慮圖像在頁(yè)面中的整體效果。本項(xiàng)目制作“中國(guó)廬山”圖文混排網(wǎng)頁(yè)。 返 回項(xiàng)目描述返 回5.2.1 插入圖像5.2.2 設(shè)置圖像屬性5.2.3 插入相關(guān)圖像元素返 回5.2 知識(shí)儲(chǔ)備5.2 知識(shí)儲(chǔ)備5.2.1 插入圖像在網(wǎng)頁(yè)中插入圖像的操作步驟如下：（1）將光標(biāo)定位在文檔中要插入圖像的位置。（2）執(zhí)行下列操作，菜單方式為單擊“插入”菜單，選擇“圖像”選項(xiàng)。面板快捷方式為在“插入”面板的“常用”模式下，單擊“圖像”按鈕。 返 回（3）彈出“選擇圖像源文件”對(duì)話框，單擊“文件系

37、統(tǒng)”單選按鈕，表示從本地硬盤(pán)上選擇圖像文件。在該對(duì)話框中，選擇需要插入的圖像。 返 回（4）單擊“確定”按鈕后，彈出“圖像標(biāo)簽輔助功能屬性”對(duì)話框，替換文本處可以為空，單擊“確定”即可。 （5）切換到“代碼”視圖，可以看到圖像對(duì)應(yīng)的HTML代碼。返 回5.2.2 設(shè)置圖像屬性如果插入到網(wǎng)頁(yè)的圖片大小不符合網(wǎng)頁(yè)排版的要求，就需要在Dreamweaver CS5中對(duì)圖像進(jìn)行縮放操作。在屬性面板中設(shè)置圖像大小，在HTML文檔中插入圖像后，選擇“設(shè)計(jì)”視圖，選中要調(diào)整大小的圖像，打開(kāi)圖像“屬性”面板，在圖像“屬性”面板中重新輸入一個(gè)“寬”和“高”的值，就可以改變圖像的大小，使用鼠標(biāo)可以進(jìn)行更為直觀的縮

38、放操作，具體步驟如下：（1）在HTML文檔中插入圖像后，單擊“設(shè)計(jì)”視圖，然后用鼠標(biāo)單擊要進(jìn)行縮放的圖像，在圖像上會(huì)出現(xiàn)3個(gè)控制句柄。（2）將光標(biāo)放在控制句柄上，出現(xiàn)雙箭頭的形狀后，拖動(dòng)控制句柄，即可調(diào)整圖像大小。（3）按住Shift鍵，拖動(dòng)右下方控制句柄可以等比例放大、縮小圖像。返 回圖像“屬性”面板常見(jiàn)選項(xiàng)說(shuō)明如下：“圖像”選項(xiàng)：設(shè)置圖像的名稱(chēng)或ID，一般情況可以不輸入?！皩挕焙汀案摺边x項(xiàng)：設(shè)置圖像的寬度和高度，默認(rèn)單位是像素?！霸次募边x項(xiàng)：顯示當(dāng)前圖片文件的地址?！版溄印边x項(xiàng)：指定圖像的超鏈接地址?！疤鎿Q”選項(xiàng)：設(shè)置圖像的注釋文本。 “編輯”選項(xiàng)：?jiǎn)?dòng)圖像編輯器并打開(kāi)選定的圖像。“地圖

39、”選項(xiàng)：包含“地圖”文本框和“熱點(diǎn)工具”，文本框中可以輸入圖像地圖的名稱(chēng)，熱點(diǎn)工具可以在圖片中插入熱點(diǎn)區(qū)域?！按怪边吘唷焙汀八竭吘唷边x項(xiàng)：以像素為單位在圖像的四周添加邊距?！澳繕?biāo)”選項(xiàng)：指定打開(kāi)鏈接網(wǎng)頁(yè)的框架或窗口?！斑吙颉边x項(xiàng)：設(shè)置圖像的邊框?qū)挾取！皩?duì)齊”選項(xiàng)：設(shè)置圖像的對(duì)齊方式。返 回5.2.3 插入相關(guān)圖像元素1插入“鼠標(biāo)經(jīng)過(guò)圖像” （1）“鼠標(biāo)經(jīng)過(guò)圖像”可以實(shí)現(xiàn)圖像輪換特效，給頁(yè)面增添動(dòng)態(tài)效果。先準(zhǔn)備好兩幅大小相同的圖片，將光標(biāo)定位到要插入輪換圖像的位置。單擊“插入”菜單，選擇“圖像對(duì)象”選項(xiàng)，在子菜單中單擊“鼠標(biāo)經(jīng)過(guò)圖像”命令?；蛘邌螕簟安迦搿泵姘澹x擇“常用”項(xiàng)，單擊“鼠標(biāo)經(jīng)過(guò)圖

40、像”按鈕。（2）彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，可以重新給圖像起一個(gè)名稱(chēng)。單擊“原始圖像”右側(cè)“瀏覽”按鈕，載入一幅原始圖像。單擊“鼠標(biāo)經(jīng)過(guò)圖像”右側(cè)“瀏覽”按鈕，載入一幅要進(jìn)行輪換的圖像。 返 回如果選中“預(yù)載鼠標(biāo)經(jīng)過(guò)圖像”復(fù)選框，在下載頁(yè)面時(shí)，輪換的圖像也同時(shí)會(huì)被下載到緩存中。如果輸入“替換文本”，則當(dāng)在輪換圖像上暫停鼠標(biāo)時(shí)，會(huì)出現(xiàn)該文本?！鞍聪聲r(shí)，前往的URL”右側(cè)文本框中，如果輸入網(wǎng)頁(yè)的URL地址，單擊圖像時(shí)，會(huì)進(jìn)入到鏈接的頁(yè)面。單擊“確定”按鈕，即完成了動(dòng)態(tài)輪換圖像的設(shè)置。 返 回2插入圖像占位符圖像占位符是在準(zhǔn)備好將最終圖像添加到Web 頁(yè)面之前使用的圖形，通過(guò)使用圖像占位符，可以

41、在真正創(chuàng)建圖像之前確定圖像在頁(yè)面上的位置和大小。“插入圖像占位符”對(duì)話框如圖所示。 返 回任務(wù)5-1 制作圖文混排網(wǎng)頁(yè)“中國(guó)廬山”頁(yè)面。具體操作步驟如下：1啟動(dòng)Dreamweaver CS5，單擊菜單“文件”“新建”命令，彈出“新建文檔”對(duì)話框，設(shè)置網(wǎng)頁(yè)標(biāo)題為“廬山”，然后輸入文本，設(shè)置好文本格式，保存為5-1.html。返 回5.3 實(shí)踐向?qū)?插入圖片（1）將光標(biāo)放在要插入圖像的位置，選擇菜單欄中“插入”“圖像”命令。（2）出現(xiàn)“選擇圖像源文件”對(duì)話框后，在“查找范圍”選擇文件所在的位置，在列表中選擇 “53.jpg” 文件名，顯示效果。返 回 3在頁(yè)面中插入鼠標(biāo)經(jīng)過(guò)圖像。（1）選中文本下方

42、位置，點(diǎn)擊菜單“插入”“圖像對(duì)象”“鼠標(biāo)經(jīng)過(guò)圖像”。（2）彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，分別設(shè)置“原始圖像”和“鼠標(biāo)經(jīng)過(guò)圖像”。（3）選擇插入圖像，在屬性面板設(shè)置對(duì)齊方式為右對(duì)齊即可。具體效果如圖所示。 返 回4設(shè)置背景圖像選擇菜單“修改”“頁(yè)面屬性”，彈出“頁(yè)面屬性”對(duì)話框，選中“外觀（CSS）”，設(shè)置背景圖像，如圖所示。5單擊“確定”按鈕，保存頁(yè)面，按【F12】顯示最終效果圖。返 回制作“萬(wàn)里長(zhǎng)城”網(wǎng)頁(yè)，通過(guò)制作該網(wǎng)頁(yè)，可以掌握文本設(shè)置、圖像加載、移動(dòng)、復(fù)制、刪除和屬性設(shè)置等基本操作?！叭f(wàn)里長(zhǎng)城”網(wǎng)頁(yè)的顯示效果如圖所示。 返 回5.4 能力拓展 無(wú)論是個(gè)人網(wǎng)站還是企業(yè)網(wǎng)站，圖文并茂的網(wǎng)頁(yè)

43、會(huì)為網(wǎng)頁(yè)增色不少，通過(guò)圖像美化后的網(wǎng)頁(yè)能吸引更多瀏覽者，恰當(dāng)?shù)膱D片、文字能讓頁(yè)面充滿美感。本項(xiàng)目學(xué)習(xí)插入圖像的方法、設(shè)置圖像的屬性、設(shè)置鼠標(biāo)經(jīng)過(guò)圖像等內(nèi)容，通過(guò)案例操作掌握?qǐng)D像與文本混合編排的方法。 返 回5.5 項(xiàng)目小結(jié)項(xiàng)目6 插入動(dòng)感元素 項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 隨著多媒體技術(shù)的發(fā)展，網(wǎng)頁(yè)已由最初單一的圖片、文字內(nèi)容發(fā)展為多種媒體集合的表現(xiàn)形式。在網(wǎng)頁(yè)中應(yīng)用多媒體技術(shù)，如音頻、視頻、Flash動(dòng)畫(huà)等內(nèi)容，可以增強(qiáng)網(wǎng)頁(yè)的表現(xiàn)效果，使網(wǎng)頁(yè)更生動(dòng)，激發(fā)訪問(wèn)者興趣。本項(xiàng)目所制作的“山水江西”動(dòng)感頁(yè)面效果如圖所示。 返 回6.1 項(xiàng)目描述6.2.1 Flash文件類(lèi)型

44、概述6.2.2 插入Flash對(duì)象6.2.3 插入視頻6.2.4 插入音樂(lè)6.2 知識(shí)儲(chǔ)備6.2.1 Flash文件類(lèi)型概述Flash是網(wǎng)上流行的矢量動(dòng)畫(huà)技術(shù)，近幾年很多站點(diǎn)都采用了Flash技術(shù)，把傳統(tǒng)網(wǎng)頁(yè)無(wú)法做到的效果準(zhǔn)確表現(xiàn)出來(lái)，增強(qiáng)了網(wǎng)頁(yè)的吸引力，如使用Flash制作的導(dǎo)航條、按鈕動(dòng)感十足。Dreamweaver中提供的Flash元素主要包括Flash動(dòng)畫(huà)、FlashPaper、Flash視頻，它的擴(kuò)展名為“.swf”。返 回6.2 知識(shí)儲(chǔ)備6.2.2 插入Flash對(duì)象插入Flash對(duì)象操作步驟如下：1.將光標(biāo)定位到插入動(dòng)畫(huà)的位置。 2.執(zhí)行以下操作之一。（1）單擊菜單欄的“插入”“

45、媒體”“SWF”（使用快捷鍵【Ctrl+Alt+F】），如圖所示。（2）單擊對(duì)象面板上的“插入”圖標(biāo)，選中“常用”“媒體：插件”“SWF”，界面如圖所示。返 回返 回3操作后會(huì)彈出 “選擇SWF”對(duì)話框，如圖所示（如果頁(yè)面沒(méi)有保存會(huì)出現(xiàn)圖警告示意圖，一般建議先把SWF文件和頁(yè)面文件放在同一站點(diǎn)文件夾）。 返 回4在對(duì)話框中選擇要插入的.SWF 文件，單擊“確定”按鈕。彈出“對(duì)象標(biāo)簽輔助功能屬性”對(duì)話框，設(shè)置完成后，單擊“確定”按鈕。5插入FLASH文件后，在設(shè)計(jì)視圖以FLASH圖標(biāo)方式顯示，查看動(dòng)畫(huà)效果必須打開(kāi)瀏覽器，Dreamweaver中界面如圖所示。返 回6選中Flash動(dòng)畫(huà)文件，可在屬

46、性面板中對(duì)屬性進(jìn)行設(shè)置。如圖所示。Flash“屬性”面板常見(jiàn)選項(xiàng)功能說(shuō)明如下：“FlashID”選項(xiàng)：允許為Flash輸入名稱(chēng)，用來(lái)標(biāo)識(shí)影片的腳本。“寬”和“高”選項(xiàng)：指定影片的寬度和高度，默認(rèn)單位是像素?！拔募边x項(xiàng)：顯示當(dāng)前Flash文件的地址?？梢詥螕粑募A圖標(biāo)查找源文件，也可以直接輸入路徑。返 回“背景顏色”選項(xiàng)：指定影片區(qū)域的背景顏色?！熬庉嫛卑粹o：?jiǎn)螕艟庉嫻ぞ甙粹o可對(duì)Flash文件進(jìn)行編輯。“循環(huán)”選項(xiàng)：設(shè)置影片是否循環(huán)播放。一般是選中該復(fù)選框?！白詣?dòng)播放”選項(xiàng)：設(shè)置影片在加載頁(yè)面時(shí)是否自動(dòng)播放。一般是選中該復(fù)選框?！按怪边吘唷焙汀八竭吘唷边x項(xiàng)：以像素為單位在影片的四周設(shè)置空白區(qū)

47、域。“品質(zhì)”選項(xiàng)：設(shè)置影片在瀏覽器中的顯示播放效果?！氨壤边x項(xiàng)：有默認(rèn)、無(wú)邊框、嚴(yán)格匹配三種顯示方式，一般選擇默認(rèn)方式。“對(duì)齊”選項(xiàng)：設(shè)置影片在頁(yè)面上的對(duì)齊方式?！安シ?停止”按鈕：?jiǎn)螕舸税粹o可在當(dāng)前文檔中直接播放影片,或者停止播放?！皡?shù)”按鈕：?jiǎn)螕粼摪粹o，可以打開(kāi)一個(gè)對(duì)話框，對(duì)影片的播放參數(shù)進(jìn)行設(shè)置。返 回6.2.3 插入視頻在網(wǎng)頁(yè)中除了可插入Flash動(dòng)畫(huà)外，還可插入其它的視頻，如*.mpg、*.avi、*.mov文件。操作步驟如下：（1）將光標(biāo)移到要插入影片的位置，單擊菜單“插入”“媒體”“插件”命令，（2）在“選擇文件”對(duì)話框中，選擇需要插入的視頻文件，單擊“確定”按鈕。（3）回到

48、Dreamweaver窗口后，光標(biāo)位置會(huì)出現(xiàn)視頻插件圖標(biāo)，在“屬性”面板的“寬”和“高”欄分別輸入影片的寬度和高度，如圖所示。 返 回(4)選中視頻插件圖標(biāo)，在屬性面板中可以對(duì)播放器的屬性進(jìn)行設(shè)置。(5)設(shè)置完成后，保存按下F12鍵，即可預(yù)覽播放視頻。返 回6.2.4 插入音樂(lè)1. 插入音頻文件在網(wǎng)頁(yè)中插入音頻時(shí)，考慮到下載速度、聲音效果等因素，一般采用MIDI或mp3格式的音頻。在網(wǎng)頁(yè)中插入音頻文件后，系統(tǒng)自動(dòng)生成默認(rèn)的播放器。操作步驟如下：（1）將光標(biāo)移到要插入音樂(lè)文件的位置，然后選擇“插入”面板的“常用”模式，在“媒體”中單擊 插件外掛程序按鈕。（2）在打開(kāi)的“選擇文件”對(duì)話框中選擇音樂(lè)

49、文件。 （3）回到Dreamweaver窗口后，光標(biāo)位置會(huì)出現(xiàn)音樂(lè)插件圖標(biāo)。（4）選中插件圖標(biāo)，在屬性面板中可以對(duì)播放器的屬性進(jìn)行設(shè)置，如圖所示。 返 回（5）在屬性面板中，單擊“參數(shù)”按鈕，出現(xiàn)“參數(shù)” 對(duì)話框后，在“參數(shù)”欄輸入hidden，并在“值”欄輸入false，接著單擊“+”按鈕新增設(shè)置項(xiàng)目，在“參數(shù)”欄輸入autostart，在“值”欄輸入true，最后單擊“確定”按鈕，如圖所示。 返 回（6）按下F12鍵，打開(kāi)瀏覽器預(yù)覽，在頁(yè)面中實(shí)現(xiàn)了嵌入音樂(lè)的效果，在瀏覽器里顯示了播放插件，如圖所示。 提示：hidden參數(shù)用來(lái)設(shè)置是否隱藏播放器面板，autostart參數(shù)則是設(shè)置是否自動(dòng)開(kāi)

50、始播放。2.添加背景音樂(lè)聲音能極好的烘托網(wǎng)頁(yè)頁(yè)面的氛圍，網(wǎng)頁(yè)中常見(jiàn)的聲音格式有WAV、MP3、MIDI、AIF、RA、或Real Audio格式。在頁(yè)面中可以嵌入背景音樂(lè)。這種音樂(lè)多以MP3文件為主，在Dreamweaver CS5中，添加背景音樂(lè)可以通過(guò)代碼實(shí)現(xiàn)。 返 回 在HTML語(yǔ)言中，通過(guò)這個(gè)標(biāo)記可以嵌入多種格式的音樂(lè)文件，切換到 “代碼”視圖，將光標(biāo)定位到之前的位置，在光標(biāo)的位置輸入代碼，例如：，其中l(wèi)oop=“-1”表示音樂(lè)無(wú)限循環(huán)播放，如果要設(shè)置播放次數(shù)，則改為相應(yīng)的數(shù)字即可。返 回任務(wù)6-1 制作“山水江西”動(dòng)感頁(yè)面，效果如圖所示。1啟動(dòng)Dreamweaver CS5，單擊菜單

51、“文件” “新建”命令，彈出“新建文檔”對(duì)話框新建一個(gè)空白頁(yè)面，然后保存為6-1.html。2設(shè)置圖片和文字信息（1）設(shè)置背景圖片，選擇菜單“修改”“頁(yè)面屬性”，彈出“頁(yè)面屬性”對(duì)話框，選中“外觀（CSS）”，設(shè)置背景圖像。返 回6.3 實(shí)踐向?qū)В?）將光標(biāo)放在頁(yè)面頭部，然后在菜單欄中單擊“插入”“表格”命令，切換到“代碼”視圖，在表格標(biāo)簽中設(shè)置表格背景圖片和導(dǎo)航圖片。 （3）在頁(yè)面底部插入水平線，同時(shí)添加版權(quán)信息，如圖所示。 返 回3添加SWF文件（1）將光標(biāo)定位到要插入flash文件的位置，選擇“插入”“媒體”“SWF”文件。（2）彈出“選擇SWF”對(duì)話框，查找需要的FLASH文件“山水江

52、西.swf”。（3）提示“對(duì)象標(biāo)簽輔助功能屬性”對(duì)話框，設(shè)置標(biāo)題等屬性，單擊“確定”按鈕即可。（4）選中Flash動(dòng)畫(huà)文件，設(shè)置循環(huán)、自動(dòng)播放，寬度為800像素、高度為700像素，居中對(duì)齊，Wmode模式為不透明模式，其它屬性值為默認(rèn)值。（5）選中表格，插入Flash文件“head.swf”，選中此文件，設(shè)置Wmode為透明模式，寬度為900像素、高度為180像素，其余參數(shù)為默認(rèn)值。 4選擇“文件”“保存全部”命令，保存所有文件。返 回制作所示網(wǎng)頁(yè)，通過(guò)該網(wǎng)頁(yè)的制作，熟練掌握在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)的方法和技巧等。返 回6.4 能力拓展 利用Dreamweaver內(nèi)建的多媒體組件，可以在網(wǎng)頁(yè)

53、中制作開(kāi)場(chǎng)動(dòng)畫(huà)、播放影片與聲音、顯示網(wǎng)頁(yè)更新日期等，各種媒體與程序文件都能使畫(huà)面的呈現(xiàn)方式更豐富多元化。本項(xiàng)目介紹了在網(wǎng)頁(yè)中插入多種媒體文件。通過(guò)本項(xiàng)目的學(xué)習(xí)，讓讀者掌握多種多媒體元素的靈活運(yùn)用，使網(wǎng)頁(yè)變得更加豐富。返 回6.5 項(xiàng)目小結(jié)項(xiàng)目7 插入超級(jí)鏈接 項(xiàng)目描述 知識(shí)儲(chǔ)備 實(shí)踐向?qū)?能力拓展 退 出項(xiàng)目小結(jié) 一個(gè)網(wǎng)站由多個(gè)網(wǎng)頁(yè)組成，而各個(gè)網(wǎng)頁(yè)之間通常是由超級(jí)鏈接聯(lián)系在一起。超級(jí)鏈接是網(wǎng)頁(yè)中最基本的元素之一，利用它不僅可以進(jìn)行網(wǎng)頁(yè)間的相互鏈接，還可以使網(wǎng)頁(yè)鏈接到相關(guān)的圖像文件、多媒體文件以及下載程序等。本項(xiàng)目主要介紹超鏈接的基本知識(shí)以及各種超鏈接的操作方法。本項(xiàng)目所創(chuàng)建的網(wǎng)頁(yè)效果如圖所示。

54、 返 回7.1 項(xiàng)目描述7.2 知識(shí)儲(chǔ)備7.2.1 鏈接概念7.2.2 制作鏈接7.2.3 編輯和管理鏈接返 回7.2.1 鏈接概念 超鏈接是指從一個(gè)對(duì)象指向另一個(gè)對(duì)象的指針，它可以是網(wǎng)頁(yè)中的一段文字也可以是一張圖片，甚至可以是圖片中的某一部分。它允許我們同其它網(wǎng)頁(yè)、站點(diǎn)、圖片、文件等進(jìn)行鏈接，從而使Internet上的信息構(gòu)成一個(gè)有機(jī)的整體。 根據(jù)鏈接方式的不同超鏈接可分為：絕對(duì)路徑鏈接、相對(duì)路徑鏈接兩種。而根據(jù)鏈接對(duì)象的不同超鏈接又可分為：超文本鏈接、腳本鏈接、命名錨鏈接、圖像鏈接、電子郵件鏈接、熱區(qū)鏈接，空鏈接等。在一個(gè)網(wǎng)站中，鏈接路徑通常有三種表示方式： 返 回7.2 知識(shí)儲(chǔ)備1絕對(duì)路

55、徑絕對(duì)路徑是指被鏈接文檔的完整路徑，包括使用的傳輸協(xié)議，例如“”即是一個(gè)絕對(duì)路徑。絕對(duì)路徑包含的是具體地址，如果目標(biāo)文件被移動(dòng)，則鏈接無(wú)效。從當(dāng)前瀏覽的網(wǎng)頁(yè)鏈接到其他網(wǎng)站的網(wǎng)頁(yè)時(shí)，必須使用絕對(duì)路徑。 返 回2文檔目錄相對(duì)路徑文檔目錄相對(duì)路徑，是指以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)由的路徑，使用文檔相對(duì)路徑可省去當(dāng)前文檔和被鏈接文檔的絕對(duì)路徑中相同的部分，保留不同部分。文檔目錄相對(duì)路徑適合于網(wǎng)站的內(nèi)部鏈接。例如：在本地硬盤(pán)有如下兩個(gè)文件，它們要互做超鏈接。d:mywebindex.htmld:mywebweb101.htmlindex.html要鏈接到01.html這個(gè)文件，標(biāo)準(zhǔn)的相對(duì)路徑鏈

56、接應(yīng)該是web1/01.html。 返 回3. 站點(diǎn)根目錄相對(duì)路徑 站點(diǎn)根目錄相對(duì)路徑描述從站點(diǎn)的根文件夾到文檔的路徑。站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠開(kāi)始，該正斜杠表示站點(diǎn)根文件夾。例如，/web1/index.html是文件 (index.html) 的站點(diǎn)根目錄相對(duì)路徑，該文件位于站點(diǎn)根文件夾的web子文件夾中。根目錄相對(duì)路徑也適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，一般不使用這種路徑形式。 返 回7.2.2 制作鏈接1制作內(nèi)部鏈接與本地網(wǎng)頁(yè)文檔的鏈接，是最常見(jiàn)的超文本鏈接類(lèi)型。通過(guò)創(chuàng)建與文檔的鏈接，可以將本地站點(diǎn)的一個(gè)個(gè)單獨(dú)的文檔連接起來(lái)，形成網(wǎng)站。選中要?jiǎng)?chuàng)建鏈接的對(duì)象，在“屬性面板”的“鏈

57、接”文本框中直接輸入本地網(wǎng)頁(yè)文檔的路徑和文件名，即可創(chuàng)建內(nèi)部鏈接，如圖所示。 返 回2制作外部鏈接選中要?jiǎng)?chuàng)建鏈接的對(duì)象，在“屬性面板”的“鏈接”文本框中直接輸入U(xiǎn)RL地址“”，“目標(biāo)”下拉列表框中選擇“_blank”。外部鏈接的鏈接地址一般為網(wǎng)頁(yè)地址URL（統(tǒng)一資源定位符）。 返 回在“屬性”面板中，“目標(biāo)”列表中有5個(gè)屬性供選擇：_blank：超鏈接的網(wǎng)頁(yè)會(huì)在另外一個(gè)窗口中打開(kāi)顯示。_parent：超鏈接的網(wǎng)頁(yè)會(huì)顯示在父框架或父窗口中。_self：超鏈接的網(wǎng)頁(yè)會(huì)顯示在當(dāng)前網(wǎng)頁(yè)的同一窗口或框架中，這是默認(rèn)設(shè)置。_top：超鏈接的網(wǎng)頁(yè)會(huì)顯示在父窗口中。_new：超鏈接的網(wǎng)頁(yè)在一個(gè)新窗口中打開(kāi)。

58、返 回3.創(chuàng)建空鏈接空鏈接是指未指定目標(biāo)文檔的鏈接。使用空鏈接可以為頁(yè)面上的對(duì)象或文本附加行為。選中要?jiǎng)?chuàng)建鏈接的圖片或者文字，在“屬性面板”的“鏈接”文本框中直接輸入“#”。如圖所示。 返 回4.創(chuàng)建錨點(diǎn)鏈接所謂錨點(diǎn)鏈接，是指同一頁(yè)面中的不同位置鏈接。例如，一個(gè)很長(zhǎng)的頁(yè)面，在頁(yè)面的最下方有一個(gè)“返回頂部”的文字，單擊鏈接后，可以跳轉(zhuǎn)到這個(gè)頁(yè)面最頂端，這就是一種最典型的錨點(diǎn)鏈接。創(chuàng)建錨點(diǎn)鏈接的過(guò)程分兩步，下面就來(lái)制作頁(yè)面中的“返回頂部”鏈接。第一步：創(chuàng)建命名錨記，就是在文檔中設(shè)置位置標(biāo)記，并給該位置一個(gè)名稱(chēng)，以便引用。 （1）將光標(biāo)定位在要設(shè)置標(biāo)記的位置，例如把光標(biāo)放在頁(yè)面的最上方；（2）在“插

59、入”面板的“常用”模式中，選擇“命名錨記”按鈕 ，如圖所示。返 回（3）在彈出的“命名錨記”對(duì)話框中鍵入該錨記的名稱(chēng)，如“top”，然后單擊“確定”按鈕（注意：區(qū)分大小寫(xiě)），名為top的錨點(diǎn)即被插入到文檔中的相應(yīng)的位置。如圖所示。第二步：創(chuàng)建到命名錨記的鏈接。（1）選擇要?jiǎng)?chuàng)建鏈接的文本或圖像，例如選中“返回頂部”四個(gè)字。（2）在“屬性”面板的“鏈接”文本框中，輸入錨記名稱(chēng)“top”。 返 回5.創(chuàng)建電子郵件鏈接電子郵件鏈接是一種特殊的鏈接，在網(wǎng)頁(yè)中單擊這種鏈接，不是跳轉(zhuǎn)到其他網(wǎng)頁(yè)中，而是會(huì)自動(dòng)啟動(dòng)電腦中的Outlook Express或其他E-mail程序，允許書(shū)寫(xiě)電子郵件，并發(fā)送到指定的地址

60、。創(chuàng)建電子郵件鏈接的步驟：（1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放在設(shè)置電子郵件鏈接的位置，或者選擇要作為電子郵件鏈接出現(xiàn)的文本或圖像。 返 回（2）執(zhí)行下列操作之一，插入該鏈接：方法一：在菜單欄中選擇“插入”“電子郵件鏈接”命令。方法二：在“插入”面板的“常用”模式中，單擊“電子郵件鏈接”按鈕 。 方法三：先選中文本如“聯(lián)系我們”，在“屬性“面板的“鏈接”文本框中，鍵入“mailto:”，如圖所示。返 回（3）在執(zhí)行方法一或者方法二之后，會(huì)彈出如圖所示的“電子郵件鏈接”對(duì)話框。在“文本”右側(cè)的文本框中，鍵入或編輯電子郵件鏈接的源端點(diǎn)文本。 （4）在“E-mail” 右側(cè)的文本框中，鍵