第2章-Dreamweaver網(wǎng)頁制作基礎(chǔ)

1、89/course_centerDreamweaver MX 2004網(wǎng)頁制作基礎(chǔ)v2.1 Dreamweaver MX 2004工作區(qū)工作區(qū)v2.2 規(guī)劃和設(shè)置站點規(guī)劃和設(shè)置站點 v2.3 網(wǎng)頁文字與圖像的編輯網(wǎng)頁文字與圖像的編輯 v2.4 巴黎文化之旅巴黎文化之旅首頁制作首頁制作v2.5 插入超鏈接插入超鏈接v2.6 網(wǎng)絡(luò)多媒體的應(yīng)用網(wǎng)絡(luò)多媒體的應(yīng)用89/course_center2.1 Dreamweaver MX 2004工作區(qū)v2.1.1 選擇工作區(qū)布局vDreamweaver MX 2004提供了兩種提供了兩種

2、可供選擇的工作區(qū)布局：設(shè)計者布局和代可供選擇的工作區(qū)布局：設(shè)計者布局和代碼編寫者布局。在碼編寫者布局。在Windows中首次啟動中首次啟動Dreamweaver MX 2004時，會出現(xiàn)時，會出現(xiàn)一個對話框讓用戶選擇一種工作區(qū)布局。一個對話框讓用戶選擇一種工作區(qū)布局。對話框如下圖：對話框如下圖： v1. 設(shè)計者工作區(qū)(建議)v2. 代碼編寫者工作區(qū)v3. 切換工作區(qū)89/course_center用戶選擇一種工作區(qū)布局89/course_center用戶選擇一種工作區(qū)布局v可以從中選擇一種工作區(qū)布局。如果不熟悉編寫可以從中

3、選擇一種工作區(qū)布局。如果不熟悉編寫代碼選擇代碼選擇“設(shè)計者設(shè)計者”。如果想更改工作區(qū)，可以。如果想更改工作區(qū)，可以使用編輯菜單使用編輯菜單“首選參數(shù)首選參數(shù)”對話框切換到一種不對話框切換到一種不同的工作區(qū)。同的工作區(qū)。 “ “編輯編輯” “ “首選參數(shù)首選參數(shù)”“常規(guī)常規(guī)”v對話框如下圖：對話框如下圖： 89/course_center更改工作區(qū)89/course_center2.1.2 使用Dreamweaver窗口和面板 89/course_center2.1.2 使用Dreamwe

4、aver窗口和面板v“文檔”窗口 “文檔”窗口用于顯示當(dāng)前文檔?？梢赃x擇下列任一視圖：89/course_center2.1.2 使用Dreamweaver窗口和面板v“文檔”窗口 “設(shè)計”視圖，這是一個用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計環(huán)境。 “代碼”視圖，這是一個用于編寫和編輯 HTML、JavaScript、服務(wù)器語言代碼（如Microsoft Active Server Page (ASP)或ColdFusion標(biāo)記語言）以及任何其他類型代碼的手工編碼環(huán)境 。 利用“拆分”視圖可以在單個窗口中同時看到同一文檔的“代碼”視圖和“設(shè)計

5、”視圖 。89/course_center2.1.2 使用Dreamweaver窗口和面板v“插入”欄 包含將各種對象（圖像，表格，圖層）插入文件中所用的面板89/course_center2.1.2 使用Dreamweaver窗口和面板v“屬性檢查器” 用于查看和更改所選對象或文本的各種屬性。89/course_center2.1.2 使用Dreamweaver窗口和面板v“面板組”89/course_center小技巧 如何設(shè)置默認(rèn)的編碼方式v選擇

6、選擇編輯編輯首選參數(shù)首選參數(shù)，打開，打開首選參數(shù)首選參數(shù)對話框?qū)υ捒?9/course_center2.1.2 使用Dreamweaver窗口和面板v狀態(tài)欄狀態(tài)欄“文檔文檔”窗口底部的狀態(tài)欄提供與正窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。創(chuàng)建的文檔有關(guān)的其他信息。 標(biāo)簽選擇器顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽以選擇該標(biāo)簽及其全部內(nèi)容。單擊以選擇文檔的整個正文。 “窗口大小”彈出式菜單（僅當(dāng)顯示“設(shè)計”視圖時可見）用來將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。 最右側(cè)是頁面（包括全部相關(guān)的文件，如圖像和其他媒體文件

7、）的文檔大小和估計下載時間。89/course_center2.1.2 使用Dreamweaver窗口和面板v“歷史記錄”面板 打開“歷史記錄”面板【shift+F10】 撤消最后一個步驟 一次撤消多個步驟 設(shè)置“歷史記錄”面板保留和顯示的步驟數(shù) 刪除當(dāng)前文檔的歷史記錄列表89/course_center2.2 規(guī)劃和設(shè)置站點 為了達到最佳效果，在創(chuàng)建任何為了達到最佳效果，在創(chuàng)建任何WEB站站點頁面之前應(yīng)該對站點進行設(shè)計與規(guī)劃。點頁面之前應(yīng)該對站點進行設(shè)計與規(guī)劃。89/course_ce

8、nter2.2.1 站點規(guī)劃和設(shè)計1. 確定目標(biāo)確定目標(biāo) 2. 選擇目標(biāo)用戶選擇目標(biāo)用戶 3. 創(chuàng)建具有瀏覽器兼容性的站點創(chuàng)建具有瀏覽器兼容性的站點 4. 組織站點結(jié)構(gòu)組織站點結(jié)構(gòu)5. 創(chuàng)建設(shè)計外觀創(chuàng)建設(shè)計外觀 6. 設(shè)計導(dǎo)航方案設(shè)計導(dǎo)航方案 7. 規(guī)劃和收集資源規(guī)劃和收集資源 89/course_center2.2.2 設(shè)置Dreamweaver站點vDreamweaver 站點是用于組織所有與站點是用于組織所有與Web站點關(guān)聯(lián)的文檔的一種方法?？梢詫⑺军c關(guān)聯(lián)的文檔的一種方法?？梢詫⑺醋饕粋€項目。需要為所開發(fā)的每個看作一個項目。需要為所開發(fā)的每個Web

9、站站點設(shè)置一個站點。通過在站點中組織文件，點設(shè)置一個站點。通過在站點中組織文件，可以與可以與FTP一起利用一起利用Dreamweaver將站將站點上傳到點上傳到Web服務(wù)器、自動跟蹤和維護鏈接、服務(wù)器、自動跟蹤和維護鏈接、管理文件以及共享文件。除非定義站點，否管理文件以及共享文件。除非定義站點，否則不能充分利用則不能充分利用Dreamweaver的功能。的功能。 89/course_center設(shè)置Dreamweaver站點的方法：v方法一：使用方法一：使用“站點定義站點定義”向?qū)?，它可以逐向?qū)?，它可以逐步完成設(shè)置過程；步完成設(shè)置過程；v方法二：使用方法二：

10、使用“站點定義站點定義”對話框的對話框的“高級高級”設(shè)置，它可以根據(jù)需要分別設(shè)置本地、遠設(shè)置，它可以根據(jù)需要分別設(shè)置本地、遠程和測試文件夾。程和測試文件夾。89/course_center實例演示 新建一個網(wǎng)站（1）v選擇選擇站點站點管理管理站點站點對話框。選擇對話框。選擇新建新建站點站點進入進入定義網(wǎng)站的流程定義網(wǎng)站的流程89/course_center新建一個網(wǎng)站-（2）v進入進入基本基本選項卡，使用網(wǎng)站定義向?qū)Вx項卡，使用網(wǎng)站定義向?qū)В梢暂p松完成所有設(shè)置。在可以輕松完成所有設(shè)置。在站點定義站點定義對對話框的話框的

11、編輯文件編輯文件中輸入想要的網(wǎng)站名稱。中輸入想要的網(wǎng)站名稱。在此范例中，輸入網(wǎng)站名稱為在此范例中，輸入網(wǎng)站名稱為“巴黎文化之巴黎文化之旅旅”，單擊，單擊下一步下一步按鈕。按鈕。89/course_center新建一個網(wǎng)站-（3）輸入站點的名字輸入站點的名字89/course_centerv在在站點定義站點定義對話框的對話框的編輯文件，第編輯文件，第2部分部分，請選擇請選擇否，我不想使用服務(wù)器技術(shù)否，我不想使用服務(wù)器技術(shù)，然后單擊，然后單擊下一步下一步按鈕。按鈕。新建一個網(wǎng)站-（4）89/

12、course_center新建一個網(wǎng)站-（5）v在在站點定義站點定義對話框的對話框的編輯文件，第編輯文件，第3部部分分，請選擇，請選擇編輯我的計算機上的本地副本，編輯我的計算機上的本地副本，完成后再上傳到服務(wù)器（推薦）完成后再上傳到服務(wù)器（推薦），然后在，然后在您將把文件存儲在計算機上的什么地方您將把文件存儲在計算機上的什么地方中中設(shè)置為設(shè)置為“e:paris”中，然后單擊中，然后單擊下一步下一步按鈕。按鈕。89/course_center新建一個網(wǎng)站-（5）89/course_center新建一個網(wǎng)站-（6）v在在站點定

13、義站點定義對話框的對話框的共享文件共享文件中，請中，請單擊菜單按鈕，選擇單擊菜單按鈕，選擇無無暫不設(shè)置遠程服暫不設(shè)置遠程服務(wù)器的連線，然后單擊務(wù)器的連線，然后單擊下一步下一步按鈕。按鈕。選選”無無“89/course_center新建一個網(wǎng)站-（7）v最后，在此對話框中，會將前面的設(shè)置做最后，在此對話框中，會將前面的設(shè)置做一個總結(jié)，當(dāng)確認(rèn)無誤后，請單擊一個總結(jié)，當(dāng)確認(rèn)無誤后，請單擊完成完成按鈕。按鈕。v回到回到dreamweaver工作環(huán)境中，將會工作環(huán)境中，將會在右側(cè)在右側(cè)文件文件面板組的面板組的文件文件面板中，發(fā)面板中，發(fā)現(xiàn)一個現(xiàn)一個“巴黎文化之旅巴黎文

14、化之旅”的新網(wǎng)站。的新網(wǎng)站。89/course_center新建一個網(wǎng)站-（7）89/course_center站點文件的管理v在文件面板中進行管理在文件面板中進行管理 站點名稱 查看狀態(tài) 文件上傳管理按鈕 擴展/折疊站點文件管理，可以說是Dreamweaver MX2004管理網(wǎng)站的首要戰(zhàn)將，它不僅可以管理本地文件夾，還可以查看遠程網(wǎng)站文件，更厲害的是它可以生存在個人或多人的工作模式中，亦能同步更新遠程網(wǎng)站及本地文件夾的內(nèi)容89/course_center遠端站點與本地文件的關(guān)系v所有

15、制作完成的網(wǎng)頁最后要放置在所有制作完成的網(wǎng)頁最后要放置在Web Server上，但制作者不能在服務(wù)器上制作上，但制作者不能在服務(wù)器上制作網(wǎng)頁。常規(guī)做法一般先將本地計算機的文網(wǎng)頁。常規(guī)做法一般先將本地計算機的文件夾模擬成遠程服務(wù)器的文件夾，完成作件夾模擬成遠程服務(wù)器的文件夾，完成作品后再將本地文件夾里完成的作品上傳到品后再將本地文件夾里完成的作品上傳到服務(wù)器中成為真正的網(wǎng)站。服務(wù)器中成為真正的網(wǎng)站。v這個原理在這個原理在dreamweaver中延伸為中延伸為本本地文件地文件與與遠端站點遠端站點89/course_center實例演示1 新建一個簡單網(wǎng)頁v以下邊

16、的簡單網(wǎng)頁為例，敘述一下制作過以下邊的簡單網(wǎng)頁為例，敘述一下制作過程程 89/course_center實例演示1 新建一個簡單網(wǎng)頁89/course_center實例演示1 新建一個簡單網(wǎng)頁v先對這個頁面進行一下分析?？纯催@個頁先對這個頁面進行一下分析?？纯催@個頁面用到了那些東西。面用到了那些東西。 網(wǎng)頁頂端的標(biāo)題網(wǎng)頁頂端的標(biāo)題“我的主頁我的主頁”是一段文字。是一段文字。 網(wǎng)頁中間是一幅圖片。網(wǎng)頁中間是一幅圖片。 最下端的歡迎詞是一段文字。最下端的歡迎詞是一段文字。 網(wǎng)頁背景是一深紫紅顏色。網(wǎng)頁背景是一深紫紅顏色。 ht

17、tp:/89/course_center實例演示1 新建一個簡單網(wǎng)頁v首先啟動首先啟動Dreamweaver MX 2004，確保已，確保已經(jīng)用站點管理器建立好了一個網(wǎng)站經(jīng)用站點管理器建立好了一個網(wǎng)站“dreamweaverEX”（根目錄）。（根目錄）。v注意：為了制作方便，事先要打開資源管注意：為了制作方便，事先要打開資源管理器，把要使用的圖片收集到網(wǎng)站目錄理器，把要使用的圖片收集到網(wǎng)站目錄images文件夾內(nèi)。文件夾內(nèi)。 89/course_center設(shè)置網(wǎng)頁的標(biāo)題和背景顏色 v點擊點擊“修改修改”菜單選菜單選“頁面屬性頁面屬性

18、”。系統(tǒng)彈出。系統(tǒng)彈出頁面屬性對話框（如下圖）頁面屬性對話框（如下圖） 89/course_center實例演示1 新建一個簡單網(wǎng)頁v在在“分類分類”“標(biāo)題標(biāo)題/編碼編碼”，請在標(biāo)題輸入框填入標(biāo)，請在標(biāo)題輸入框填入標(biāo)題題“我的主頁我的主頁”v在在“分類分類”“外觀外觀”，設(shè)置背景顏色：網(wǎng)頁背景可以，設(shè)置背景顏色：網(wǎng)頁背景可以是圖片，也可以是顏色。此例是顏色是圖片，也可以是顏色。此例是顏色#990033 。如上圖打開背景顏色選擇器進行選取。如果背景如上圖打開背景顏色選擇器進行選取。如果背景要設(shè)為圖片，點擊背景圖像要設(shè)為圖片，點擊背景圖像“瀏覽瀏覽”按鈕，系統(tǒng)彈

19、按鈕，系統(tǒng)彈出圖片選擇對話框，選中背景圖片文件，點擊確出圖片選擇對話框，選中背景圖片文件，點擊確定按鈕。定按鈕。 89/course_center插入標(biāo)題文字 v進入頁面編輯設(shè)計視圖狀態(tài)。在一般情況下，進入頁面編輯設(shè)計視圖狀態(tài)。在一般情況下，編輯器默認(rèn)左對齊，光標(biāo)在左上角閃爍，光編輯器默認(rèn)左對齊，光標(biāo)在左上角閃爍，光標(biāo)位置就是插入點的位置。如果要想讓文字標(biāo)位置就是插入點的位置。如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動居中插入，點屬性面板居中按鈕即可。啟動中文輸入法輸入中文輸入法輸入“我的主頁我的主頁”四個字。字小不四個字。字小不要緊，稍后可以對它

20、進行設(shè)置。要緊，稍后可以對它進行設(shè)置。 89/course_center實例演示1 新建一個簡單網(wǎng)頁v【設(shè)置文字的格式】【設(shè)置文字的格式】 選中文字，在上圖屬選中文字，在上圖屬性面板中將字體格式設(shè)置成默認(rèn)字體，大性面板中將字體格式設(shè)置成默認(rèn)字體，大小可任意更改字號。并選中小可任意更改字號。并選中“B”將字體變將字體變粗。粗。v【設(shè)置文字的顏色】首先選中文字，在屬【設(shè)置文字的顏色】首先選中文字，在屬性面板中，單擊顏色選擇圖標(biāo)，在彈出的性面板中，單擊顏色選擇圖標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。顏色選擇器中用滴管選取顏色即可。 http:/202.116

21、.47.189/course_center顏色選擇器89/course_center插入圖片插入圖片v下面準(zhǔn)備插入圖片，為了使圖片插入時在源下面準(zhǔn)備插入圖片，為了使圖片插入時在源文件的路徑上采用相對地址，在這里建議先文件的路徑上采用相對地址，在這里建議先將頁面保存到站點根目錄，通常首頁會以將頁面保存到站點根目錄，通常首頁會以index.htm命名。命名。89/course_center設(shè)置圖片v設(shè)計視圖狀態(tài)，在標(biāo)題設(shè)計視圖狀態(tài)，在標(biāo)題“我的主頁我的主頁”右邊空右邊空白處單擊鼠標(biāo)，回車換一行，按照以下的白處單擊鼠標(biāo)，回車換一

22、行，按照以下的步驟插入一幅圖片，并使這張圖片居中。步驟插入一幅圖片，并使這張圖片居中。也可以通過屬性面板中的左對齊按鈕讓其也可以通過屬性面板中的左對齊按鈕讓其居左安放。居左安放。 89/course_center【插入圖像】常用方法：（1）使用插入菜單：在）使用插入菜單：在“插入插入”菜單選菜單選“圖像圖像”，彈出彈出“選擇圖像源文件選擇圖像源文件”對話框，選中該圖像對話框，選中該圖像文件，單擊確定。如下圖：文件，單擊確定。如下圖： 89/course_center【插入圖像】常用方法：（2）使用插入欄（如下圖）：單擊插入

23、欄圖）使用插入欄（如下圖）：單擊插入欄圖像像 對象按鈕，選圖象按鈕對象按鈕，選圖象按鈕 ，彈出，彈出“選擇選擇圖像源文件圖像源文件”對話框，其余操作同上。對話框，其余操作同上。 89/course_center【插入圖像】常用方法：（3）使用面板組）使用面板組“資源資源”面板面板（如圖）：點圖像按鈕，展開（如圖）：點圖像按鈕，展開根目錄的圖片文件夾，選定該根目錄的圖片文件夾，選定該文件，用鼠標(biāo)拖動至工作區(qū)合文件，用鼠標(biāo)拖動至工作區(qū)合適位置。適位置。 89/course_center注意事項v為了管理方便，一般設(shè)計習(xí)慣把圖片

24、放在為了管理方便，一般設(shè)計習(xí)慣把圖片放在“images”文件夾內(nèi)以便于管理。文件夾內(nèi)以便于管理。v網(wǎng)站里的網(wǎng)頁和圖片等資源的文件名網(wǎng)站里的網(wǎng)頁和圖片等資源的文件名要用要用英文或用拼音文字命名而且使用小寫英文或用拼音文字命名而且使用小寫，不，不能用中文，否則會出現(xiàn)一些麻煩。能用中文，否則會出現(xiàn)一些麻煩。 89/course_center【輸入歡迎文字】 v在圖片右邊空白處單擊，回車換行。仍然在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字按照上述方法，輸入文字“歡迎瀏覽我的網(wǎng)歡迎瀏覽我的網(wǎng)頁，請多提寶貴意見。頁，請多提寶貴意見?！比缓螅脤傩悦嫒缓?/p>

25、，利用屬性面板對文字進行設(shè)置。板對文字進行設(shè)置。89/course_center實例演示1 新建一個簡單網(wǎng)頁v保存頁面。一個簡單的頁面已經(jīng)編輯完畢。保存頁面。一個簡單的頁面已經(jīng)編輯完畢。v【預(yù)覽網(wǎng)頁】在頁面編輯器中按【預(yù)覽網(wǎng)頁】在頁面編輯器中按F12預(yù)覽網(wǎng)預(yù)覽網(wǎng)頁效果。網(wǎng)站中的第一頁，也就是首頁，我頁效果。網(wǎng)站中的第一頁，也就是首頁，我們通常在存盤時取名為們通常在存盤時取名為index.htm。 89/course_center小技巧：在文件面板中建立文件v新建網(wǎng)頁新建網(wǎng)頁v更改文件名更改文件名v刪除文件刪除文件v新建文件

26、夾新建文件夾v更改文件夾名稱更改文件夾名稱v刪除文件夾刪除文件夾89/course_center小技巧：開啟網(wǎng)頁v在文件面板中，可以選取要開啟的網(wǎng)頁后在文件面板中，可以選取要開啟的網(wǎng)頁后按按enter鍵或雙擊鼠標(biāo)左鍵即可。鍵或雙擊鼠標(biāo)左鍵即可。89/course_center小技巧：在瀏覽器中預(yù)覽網(wǎng)頁v按快速鍵按快速鍵F12 即可。即可。89/course_center小技巧：保存、關(guān)閉文件v可以直接選擇主菜單上的可以直接選擇主菜單上的文件文件保存保存或或按按ctrl+s鍵即可保存文件。

27、鍵即可保存文件。v可以直接選擇主菜單上的可以直接選擇主菜單上的文件文件關(guān)閉關(guān)閉 即即可關(guān)閉文件。如果此時文件沒有保存，程可關(guān)閉文件。如果此時文件沒有保存，程序會要求將文件進行保存。序會要求將文件進行保存。89/course_center2.3 網(wǎng)頁文字與圖像的編輯 v在網(wǎng)頁上編輯文字是非常重要的在網(wǎng)頁上編輯文字是非常重要的, ,因為網(wǎng)頁因為網(wǎng)頁的結(jié)構(gòu)有的結(jié)構(gòu)有90%90%都是由文字所組成都是由文字所組成, ,所以網(wǎng)頁所以網(wǎng)頁上的文字編輯需要一套完整且有規(guī)則的整上的文字編輯需要一套完整且有規(guī)則的整理方法理方法89/cours

28、e_center2.3.1 輸入文字v在編輯區(qū)直接輸入文字在編輯區(qū)直接輸入文字v復(fù)制現(xiàn)有的文字復(fù)制現(xiàn)有的文字v將將headlth.txt復(fù)制到當(dāng)前編輯區(qū)復(fù)制到當(dāng)前編輯區(qū)89/course_center2.3.2 格式化文字 v當(dāng)在頁面上在文字當(dāng)在頁面上在文字屬性屬性面板上設(shè)置相關(guān)格面板上設(shè)置相關(guān)格式時，會在式時，會在樣式樣式中自動出現(xiàn)中自動出現(xiàn)CCS樣式樣式(style)，以后還可以將該樣式套用到尚未，以后還可以將該樣式套用到尚未設(shè)置的選取文字上，節(jié)省重復(fù)設(shè)置的麻煩。設(shè)置的選取文字上，節(jié)省重復(fù)設(shè)置的麻煩。89/course

29、_center2.3.2 格式化文字v認(rèn)識文字的認(rèn)識文字的屬性屬性面板面板89/course_center2.3.2 格式化文字v設(shè)置文字格式設(shè)置文字格式 選取要更改格式的部分 格式：段落v設(shè)置文字大小設(shè)置文字大小 單位：點數(shù)；大?。?6 自動產(chǎn)生style1樣式89/course_center2.3.2 格式化文字v設(shè)置文本顏色設(shè)置文本顏色 在色板上選#FF0000 注意： style1樣式的變化v設(shè)置文本樣式設(shè)置文本樣式 選擇粗體 注意： style1樣式的變化89/course_c

30、enter2.3.3 樣式的命名、修改與套用 v樣式的重新命名樣式的重新命名 在樣式下拉列表中選擇重命名 鍵入新的名字，如：“head1” 返回編輯區(qū)會的搜索面板會自動找到套用此樣式的項目，并進行替換89/course_center2.3.3 樣式的命名、修改與套用 v樣式的修改樣式的修改 在標(biāo)簽選擇選擇選取所有文字，于是在標(biāo)簽查看器相關(guān)CSS面板選取head1,在color中修改顏色#cc0000標(biāo)簽選擇標(biāo)簽選擇89/course_center2.3.4 設(shè)置文字對齊方式與縮進v設(shè)置對齊方式 將標(biāo)題居中將標(biāo)題居中v設(shè)置縮

31、進 首行縮進；全角狀態(tài)下按首行縮進；全角狀態(tài)下按2次空格次空格 設(shè)置段落縮進設(shè)置段落縮進89/course_center2.4巴黎文化之旅首頁制作v文字編輯（到文字編輯（到paris下取素材）下取素材） 雙擊巴黎文化之旅default.htm 把txtdefault.txt的內(nèi)容復(fù)制到default.htm 建立4種樣式，參數(shù)見下表 標(biāo)題欄輸入：巴黎 文化之旅基本要求基本要求89/course_center2.4巴黎文化之旅首頁制作v設(shè)置各樣式再套用在各個文字段落上設(shè)置各樣式再套用在各個文字段落上v其中各樣式設(shè)置內(nèi)容如下：

32、其中各樣式設(shè)置內(nèi)容如下：樣式名稱樣式名稱設(shè)置內(nèi)容設(shè)置內(nèi)容Head1大?。捍笮。?6，粗體，顏色：，粗體，顏色：#990000Head2大?。捍笮。?4，粗體，顏色：，粗體，顏色：#996600Poem大?。捍笮。?0，斜體，斜體Normal大?。捍笮。?089/course_center2.4巴黎文化之旅首頁制作head1poemhead2normal89/course_center2.4巴黎文化之旅首頁制作head2normal89/course_center2.4巴黎文化之旅首頁制作

33、v插入水平線插入水平線 光標(biāo)移至插入點 插入HTML 單擊水平線按鈕89/course_center2.4巴黎文化之旅首頁制作v圖像的使用圖像的使用 將光標(biāo)移至段首 插入切換為常用 單擊圖像選取paris001.jpg 按確定89/course_center2.4巴黎文化之旅首頁制作v設(shè)置圖像的邊框與對齊方式設(shè)置圖像的邊框與對齊方式 選取圖像 邊框 為1 對齊：右對齊 用同樣的方法將paris002.jpg，paris003.jpg插入到頁面89/course_center小技巧v如何編

34、輯如何編輯Dreamweaver中的圖像中的圖像 編輯 使用FW優(yōu)化 裁減 重新取樣 亮度和對比度 銳利化89/course_center2.5超鏈接的使用v作為網(wǎng)站一般有很多的頁面，如果頁面之間彼此作為網(wǎng)站一般有很多的頁面，如果頁面之間彼此是獨立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是獨立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是無法運行的。為了建立起網(wǎng)頁之間的聯(lián)系我們是無法運行的。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。稱必須使用超級鏈接。稱“超級鏈接超級鏈接”，是因為它什，是因為它什么都能鏈接，如：網(wǎng)頁、下載文件、網(wǎng)站地址、么都能鏈接，如：網(wǎng)頁、下載文

35、件、網(wǎng)站地址、郵件地址郵件地址等等。等等。 89/course_center2.5超鏈接的使用v超鏈接的方式超鏈接的方式 文字鏈接 圖像鏈接 按鈕鏈接 網(wǎng)頁、網(wǎng)站地圖鏈接89/course_center2.5超鏈接的使用v鏈接的對象鏈接的對象 命名錨點的超鏈接 網(wǎng)站內(nèi)部的超鏈接 網(wǎng)站外部的超鏈接 文件下載的超鏈接 電子郵件的超鏈接89/course_center2.5.2巴黎文化之旅 景點介紹鏈接設(shè)置v命名錨點的插入命名錨點的插入 打開viewpoint.htm，在景點介紹下方輸入各景點

36、的名稱 在標(biāo)題文字前插入命名錨點0107，以“凱旋門”為例，在鏈接：#01基本要求基本要求89/course_center2.5.2巴黎文化之旅 景點介紹鏈接設(shè)置v設(shè)置文字鏈接設(shè)置文字鏈接 打開viewpoint.htm，在景點介紹下方輸入各景點的名稱 以“凱旋門”為例，在鏈接：#0189/course_center2.5.2巴黎文化之旅 景點介紹鏈接設(shè)置v設(shè)置圖像圖片鏈接設(shè)置圖像圖片鏈接89/course_center2.5.2巴黎文化之旅 景點介紹鏈接設(shè)置v相關(guān)網(wǎng)站的鏈接設(shè)置相關(guān)網(wǎng)站

37、的鏈接設(shè)置 選擇圖片 輸入鏈接的地址 目標(biāo)：“_blank” 輸入替換文字89/course_center超級鏈接屬性面板中的目標(biāo)選項v“目標(biāo)目標(biāo)” 稱為目標(biāo)區(qū)。默認(rèn)的情況下域中總稱為目標(biāo)區(qū)。默認(rèn)的情況下域中總有四個選項。有四個選項。_blank ：單擊鏈接以后，指向頁面出現(xiàn)在新窗口中。_parent：用指向頁面替換他外面所在的框架結(jié)構(gòu)。_self：將連接頁面顯示在當(dāng)前框架中。(空)_top：跳出所有框架，頁面直接出現(xiàn)在瀏覽器中。 89/course_center小技巧v在同一個新窗口顯示鏈接在同一個新窗口顯示鏈接_dyn

38、amic如果設(shè)窗口打開的鏈接為如果設(shè)窗口打開的鏈接為_blank,按下鏈按下鏈接時會打開一個新的窗口顯示網(wǎng)頁接時會打開一個新的窗口顯示網(wǎng)頁,打開太多的打開太多的窗口對計算機而言是一個負擔(dān)。窗口對計算機而言是一個負擔(dān)。改為改為_dynamic:可讓所鏈接的網(wǎng)站由非可讓所鏈接的網(wǎng)站由非主頁的新窗口打開主頁的新窗口打開,但均在同一個窗口中顯示。但均在同一個窗口中顯示。89/course_center小技巧v#top為返回該頁頁首，用戶不需要設(shè)置為返回該頁頁首，用戶不需要設(shè)置top錨點。錨點。89/course_center為圖片

39、建立鏈接網(wǎng)站名稱網(wǎng)站名稱網(wǎng)址網(wǎng)址凱旋門凱旋門http:/www. /Monuments/Arc艾菲爾鐵塔艾菲爾鐵塔http:/www. tour-eiffel.fr奧塞美術(shù)館奧塞美術(shù)館http:/www. musee-orsay.fr羅浮宮羅浮宮http:/www.louvre.fr龐比度中心龐比度中心http:/ac-gp.fr圣母院圣母院http:/ndparis.free.fr.圣心堂圣心堂/Monuments/Sacre.Coeur89/course_center2.5.2巴黎文化之旅 景點介紹

40、鏈接設(shè)置v建立郵件鏈接建立郵件鏈接v格式：格式：mailto:郵箱地址郵箱地址mailto:郵箱地址郵箱地址?subject=我有話要說我有話要說 “我有話要說我有話要說”成為郵件的主題成為郵件的主題89/course_center2.5.2巴黎文化之旅 景點介紹鏈接設(shè)置v建立下載文件的鏈接建立下載文件的鏈接v按按鏈接鏈接旁的旁的瀏覽文件瀏覽文件按鈕按鈕v選擇要下載的文件選擇要下載的文件89/course_center本周上機練習(xí)v以巴黎文化之旅為例：以巴黎文化之旅為例： 首頁頁面的建立default.htm 景點介紹頁面

41、的建立viewpoint.htm v小組站點的規(guī)劃小組站點的規(guī)劃 參考“巴黎文化之旅”網(wǎng)站規(guī)劃表，寫出本組網(wǎng)站規(guī)劃，每小組發(fā)一份網(wǎng)站規(guī)劃到老師的郵箱 規(guī)劃表請用小組編號及組長學(xué)號命名，主題寫小組編號89/course_center2.6 網(wǎng)絡(luò)多媒體v在網(wǎng)頁中加入在網(wǎng)頁中加入Flashv在網(wǎng)頁中加入音頻在網(wǎng)頁中加入音頻v在網(wǎng)頁中加入影片在網(wǎng)頁中加入影片89/course_center在頁面中使用FLASHv插入插入FLASH動畫動畫89/course_center在頁面中使用FLASHv插

42、入插入FLASH動畫動畫 打開index.htm頁面,選擇表格的第一格 常用工具欄/媒體/FLASH 插入動畫mediaintro.swf屬性設(shè)置：屬性設(shè)置：89/course_center在頁面中使用FLASHv插入插入FLASH文字文字什么是什么是FLASH文字文字?在頁面上有些文字在頁面上有些文字,想使用想使用特殊的字體特殊的字體,常礙于瀏覽器的字體限制而不能常礙于瀏覽器的字體限制而不能完成。用圖片來處理在大小及處理上極不方便。完成。用圖片來處理在大小及處理上極不方便。把文字轉(zhuǎn)換為把文字轉(zhuǎn)換為FLASH動畫文件，不僅文件量小，動畫文件，不僅文件量小，而且還可以使用特殊字體、自定義顏色等，不而且還