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

1、89/course_centerDreamweaver MX 2004網(wǎng)頁(yè)制作基礎(chǔ)v2.1 Dreamweaver MX 2004工作區(qū)工作區(qū)v2.2 規(guī)劃和設(shè)置站點(diǎn)規(guī)劃和設(shè)置站點(diǎn) v2.3 網(wǎng)頁(yè)文字與圖像的編輯網(wǎng)頁(yè)文字與圖像的編輯 v2.4 巴黎文化之旅巴黎文化之旅首頁(yè)制作首頁(yè)制作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è)計(jì)者布局和代可供選擇的工作區(qū)布局：設(shè)計(jì)者布局和代碼編寫者布局。在碼編寫者布局。在Windows中首次啟動(dòng)中首次啟動(dòng)Dreamweaver MX 2004時(shí)，會(huì)出現(xiàn)時(shí)，會(huì)出現(xiàn)一個(gè)對(duì)話框讓用戶選擇一種工作區(qū)布局。一個(gè)對(duì)話框讓用戶選擇一種工作區(qū)布局。對(duì)話框如下圖：對(duì)話框如下圖： v1. 設(shè)計(jì)者工作區(qū)(建議)v2. 代碼編寫者工作區(qū)v3. 切換工作區(qū)89/course_center用戶選擇一種工作區(qū)布局89/course_center用戶選擇一種工作區(qū)布局v可以從中選擇一種工作區(qū)布局。如果不熟悉編寫可以從中

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

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

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

6、選擇編輯編輯首選參數(shù)首選參數(shù)，打開(kāi)，打開(kāi)首選參數(shù)首選參數(shù)對(duì)話框?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)簽及其全部?jī)?nèi)容。單擊以選擇文檔的整個(gè)正文。 “窗口大小”彈出式菜單（僅當(dāng)顯示“設(shè)計(jì)”視圖時(shí)可見(jiàn)）用來(lái)將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。 最右側(cè)是頁(yè)面（包括全部相關(guān)的文件，如圖像和其他媒體文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27、鍵即可保存文件。v可以直接選擇主菜單上的可以直接選擇主菜單上的文件文件關(guān)閉關(guān)閉 即即可關(guān)閉文件。如果此時(shí)文件沒(méi)有保存，程可關(guān)閉文件。如果此時(shí)文件沒(méi)有保存，程序會(huì)要求將文件進(jìn)行保存。序會(huì)要求將文件進(jìn)行保存。89/course_center2.3 網(wǎng)頁(yè)文字與圖像的編輯 v在網(wǎng)頁(yè)上編輯文字是非常重要的在網(wǎng)頁(yè)上編輯文字是非常重要的, ,因?yàn)榫W(wǎng)頁(yè)因?yàn)榫W(wǎng)頁(yè)的結(jié)構(gòu)有的結(jié)構(gòu)有90%90%都是由文字所組成都是由文字所組成, ,所以網(wǎng)頁(yè)所以網(wǎng)頁(yè)上的文字編輯需要一套完整且有規(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)在頁(yè)面上在文字當(dāng)在頁(yè)面上在文字屬性屬性面板上設(shè)置相關(guān)格面板上設(shè)置相關(guān)格式時(shí)，會(huì)在式時(shí)，會(huì)在樣式樣式中自動(dòng)出現(xiàn)中自動(dòng)出現(xiàn)CCS樣式樣式(style)，以后還可以將該樣式套用到尚未，以后還可以將該樣式套用到尚未設(shè)置的選取文字上，節(jié)省重復(fù)設(shè)置的麻煩。設(shè)置的選取文字上，節(jié)省重復(fù)設(shè)置的麻煩。89/course

29、_center2.3.2 格式化文字v認(rèn)識(shí)文字的認(rèn)識(shí)文字的屬性屬性面板面板89/course_center2.3.2 格式化文字v設(shè)置文字格式設(shè)置文字格式 選取要更改格式的部分 格式：段落v設(shè)置文字大小設(shè)置文字大小 單位：點(diǎn)數(shù)；大小：16 自動(dòng)產(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ū)會(huì)的搜索面板會(huì)自動(dòng)找到套用此樣式的項(xiàng)目，并進(jìn)行替換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è)置文字對(duì)齊方式與縮進(jìn)v設(shè)置對(duì)齊方式 將標(biāo)題居中將標(biāo)題居中v設(shè)置縮

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

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

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

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

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

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

38、amic如果設(shè)窗口打開(kāi)的鏈接為如果設(shè)窗口打開(kāi)的鏈接為_(kāi)blank,按下鏈按下鏈接時(shí)會(huì)打開(kāi)一個(gè)新的窗口顯示網(wǎng)頁(yè)接時(shí)會(huì)打開(kāi)一個(gè)新的窗口顯示網(wǎng)頁(yè),打開(kāi)太多的打開(kāi)太多的窗口對(duì)計(jì)算機(jī)而言是一個(gè)負(fù)擔(dān)。窗口對(duì)計(jì)算機(jī)而言是一個(gè)負(fù)擔(dān)。改為改為_(kāi)dynamic:可讓所鏈接的網(wǎng)站由非可讓所鏈接的網(wǎng)站由非主頁(yè)的新窗口打開(kāi)主頁(yè)的新窗口打開(kāi),但均在同一個(gè)窗口中顯示。但均在同一個(gè)窗口中顯示。89/course_center小技巧v#top為返回該頁(yè)頁(yè)首，用戶不需要設(shè)置為返回該頁(yè)頁(yè)首，用戶不需要設(shè)置top錨點(diǎn)。錨點(diǎn)。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巴黎文化之旅 景點(diǎn)介紹

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

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

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