計(jì)算機(jī)網(wǎng)絡(luò)原理電子教案

第8章Dreamweaver簡(jiǎn)介8.1Dreamweaver基礎(chǔ)知識(shí)1、Dreamweaver啟動(dòng)和退出方法⑴“開(kāi)始”—“程序”—“Macromedia”—“MacromediaDreamweaver”⑵雙擊桌面上的快捷圖標(biāo)。

2、窗口布局DreamweaverMX2004提供了將全部元素置于一個(gè)窗口中的集成工作區(qū)。首次啟動(dòng)Dreamweaver時(shí)，會(huì)出現(xiàn)一個(gè)工作區(qū)設(shè)置對(duì)話框可以從中選擇一種工作區(qū)布局。如果不熟悉編寫(xiě)代碼，選擇“設(shè)計(jì)者”。如果以后想更改工作區(qū)，可以使用編輯菜單“首選參數(shù)”對(duì)話框切換到一種不同的工作區(qū)。編輯菜單“首選參數(shù)”對(duì)話框如下圖：計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第1頁(yè)!⑴“插入”欄：包含用于將各種類型的“對(duì)象”（如圖像、表格和層）插入到文檔中的按鈕。每個(gè)對(duì)象都是一段HTML代碼，允許在插入它時(shí)設(shè)置不同的屬性。⑵“文檔”窗口顯示當(dāng)前創(chuàng)建和編輯的文檔。⑶“屬性檢查器”：用于查看和更改所選對(duì)象或文本的各種屬性。計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第2頁(yè)!⑷“面板組”：是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合。若要展開(kāi)一個(gè)面板組，單擊組名稱左側(cè)的展開(kāi)箭頭；若要取消停靠一個(gè)面板，拖動(dòng)該組標(biāo)題條左邊緣的手柄。⑸“文件”面板：可以管理文件和文件夾，“文件”面板還可以訪問(wèn)本地磁盤(pán)上的全部文件，類似于Windows資源管理器。3、菜單⑴“文件”菜單：包含“新建”、“打開(kāi)”、“保存”、“保存全部”，查看當(dāng)前文檔或?qū)Ξ?dāng)前文檔執(zhí)行操作，例如“在瀏覽器中預(yù)覽”和“打印代碼”。⑵“編輯”菜單：包含選擇和搜索命令，例如“選擇父標(biāo)簽”和“查找和替換”?！熬庉嫛辈藛芜€提供對(duì)DW菜單中“首選參數(shù)”的訪問(wèn)。⑶“查看”菜單：可以看到文檔的各種視圖，并且可以顯示和隱藏不同類型的頁(yè)面元素和DW工具及工具欄。⑷“插入”菜單：提供“插入”欄的替代項(xiàng)，用于將對(duì)象插入文檔。⑸“修改”菜單：可以更改選定頁(yè)面元素或項(xiàng)的屬性。使用此菜單，可以編輯標(biāo)簽屬性，更改表格和表格元素，并且為庫(kù)項(xiàng)和模板執(zhí)行不同的操作。計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第3頁(yè)!⑴顯示代碼視圖：僅在“文檔”窗口中顯示“代碼”視圖。⑵顯示代碼視圖和設(shè)計(jì)視圖：在“文檔”窗口的一部分中顯示“代碼”視圖，另一部分顯示“設(shè)計(jì)”視圖。⑶顯示設(shè)計(jì)視圖：僅在“文檔”窗口中顯示“設(shè)計(jì)”視圖。⑷標(biāo)題：允許為文檔輸入一個(gè)標(biāo)題，它將顯示在瀏覽器的標(biāo)題欄中。如果文檔已經(jīng)有了一個(gè)標(biāo)題，則該標(biāo)題將顯示在該區(qū)域中。⑸沒(méi)有瀏覽器/檢查錯(cuò)誤：可以檢查跨瀏覽器兼容性。⑹文件管理：顯示“文件管理”彈出菜單。⑺在瀏覽器中預(yù)覽/調(diào)試：在瀏覽器中預(yù)覽或調(diào)試文檔。從彈出菜單中選擇一個(gè)瀏覽器。⑻刷新設(shè)計(jì)視圖：在“代碼”視圖中進(jìn)行更改后刷新文檔的“設(shè)計(jì)”視圖。⑼視圖選項(xiàng)：允許為“代碼”視圖和“設(shè)計(jì)”視圖設(shè)置選項(xiàng)。文檔工具欄中包含如下按鈕計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第4頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第5頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第6頁(yè)!8.2.2創(chuàng)建頁(yè)面1、頁(yè)面創(chuàng)建在DreamweaverMX2004起始頁(yè)創(chuàng)建新頁(yè)，或者可以選擇“文件”>“新建”，彈出對(duì)話框：從各種預(yù)先設(shè)計(jì)的頁(yè)面布局中選擇一種。比如：選擇“基本頁(yè)”HTML，點(diǎn)擊創(chuàng)建按鈕。DreamweaverMX2004即展開(kāi)工作區(qū)界面2、頁(yè)面制作⑴【插入標(biāo)題文字】

進(jìn)入頁(yè)面編輯設(shè)計(jì)視圖狀態(tài)。光標(biāo)位置就是插入點(diǎn)的位置。啟動(dòng)中文輸入法輸入“我的主頁(yè)”四個(gè)字，并設(shè)置其大小。⑵【設(shè)置文字的格式】選中文字，在屬性面板中將字體格式設(shè)置成默認(rèn)字體，大小可任意更改字號(hào)。并選中“B”將字體變粗。⑶【設(shè)置文字的顏色】選中文字，在屬性面板中，單擊顏色選擇圖標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。

⑷【設(shè)置網(wǎng)頁(yè)的標(biāo)題和背景顏色】

點(diǎn)擊“修改”菜單選“頁(yè)面屬性”。系統(tǒng)彈出頁(yè)面屬性對(duì)話框在標(biāo)題輸入框填入標(biāo)題“我的主頁(yè)”設(shè)置背景顏色：網(wǎng)頁(yè)背景可以是圖片，也可以是顏色。如果背景要設(shè)為圖片，點(diǎn)擊背景圖象“瀏覽”按鈕，系統(tǒng)彈出圖片選擇對(duì)話框，選中背景圖片文件，點(diǎn)擊【確定】按鈕。

計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第7頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第8頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第9頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第10頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第11頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第12頁(yè)!4、常用工具欄⑴“插入”：“插入”欄包含用于創(chuàng)建和插入對(duì)象（如表格、層和圖像）的按鈕。⑵“常用”：可以創(chuàng)建和插入最常用的對(duì)象，例如圖像和表格。⑶“布局”：可以插入表格、div標(biāo)簽、層和框架。⑷“表單”：包含用于創(chuàng)建表單和插入表單元素的按鈕。⑸“文本”：插入各種文本格式設(shè)置標(biāo)簽和列表格式設(shè)置標(biāo)簽。⑹“HTML”：插入用于水平線、頭內(nèi)容、表格、框架和腳本的HTML標(biāo)簽。⑺“腳本”：僅適用于使用特定服務(wù)器語(yǔ)言的頁(yè)面，這些類別中的每一個(gè)都提供了服務(wù)器代碼對(duì)象，可以將這些對(duì)象插入“代碼”視圖中。⑻“應(yīng)用程序”：可以插入動(dòng)態(tài)元素，例如記錄集、重復(fù)區(qū)域以及記錄插入和更新表單。⑼“媒體”：可以插入Flash元素。⑽“收藏”：可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。5、文檔工具欄

計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第13頁(yè)!6、狀態(tài)欄狀態(tài)欄提供正在創(chuàng)建的文檔有關(guān)的其它信息。8.2建立站點(diǎn)8.2.1建立站點(diǎn)啟動(dòng)DreamweaverMX2004，選擇“站點(diǎn)”—“新建站點(diǎn)”出現(xiàn)“未定義站點(diǎn)1的站點(diǎn)定義”對(duì)話框。在對(duì)話框中，然后在“您打算為站點(diǎn)起什么名字？”文本框中輸入站點(diǎn)名稱（如zhiyexyuan）。單擊“下一步”，出現(xiàn)“zhiyexyuan站點(diǎn)定義為”對(duì)話框，詢問(wèn)是否要使用服務(wù)器技術(shù)。選擇“否”選項(xiàng)，指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒(méi)有動(dòng)態(tài)頁(yè)。選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”的選項(xiàng)。在站點(diǎn)開(kāi)發(fā)過(guò)程中有多種處理文件的方式，初學(xué)網(wǎng)頁(yè)制作的同學(xué)可選擇此選項(xiàng)。

單擊該文本框旁邊的文件夾圖標(biāo)。隨即會(huì)出現(xiàn)“選擇站點(diǎn)的本地根文件夾”對(duì)話框。

單擊“下一步”，出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問(wèn)如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無(wú)”?？梢陨院笤O(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的信息。單擊“下一步”，該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示設(shè)置概要。單擊“完成”完成設(shè)置。隨即出現(xiàn)“管理站點(diǎn)”對(duì)話框，顯示新站點(diǎn)。單擊“完成”關(guān)閉“管理站點(diǎn)”對(duì)話框。計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第14頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第15頁(yè)!下一頁(yè)計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第16頁(yè)!⑸【插入圖像】選擇以下任意一種方法：①使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對(duì)話框，選中該圖像文件，單擊確定。如下圖：②使用插入欄（如下圖）：?jiǎn)螕舨迦霗趯?duì)象按鈕>選按鈕，彈出“選擇圖像源文件”對(duì)話框，其余操作同上。③使用面板組“資源”面板（如下圖）：點(diǎn)按鈕，展開(kāi)根目錄的圖片文件夾，選定該文件，用鼠標(biāo)拖動(dòng)至工作區(qū)合適位置。【輸入歡迎文字】

在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字“歡迎您……”然后，利用屬性面板對(duì)文字進(jìn)行設(shè)置。保存頁(yè)面?！绢A(yù)覽網(wǎng)頁(yè)】在頁(yè)面編輯器中按F12預(yù)覽網(wǎng)頁(yè)效果。網(wǎng)站中的頁(yè)，也就是首頁(yè)，我們通常在存盤(pán)時(shí)取名為index.htm。計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第17頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第18頁(yè)!8.2.3超級(jí)鏈接1、頁(yè)面之間的超級(jí)連接⑴在網(wǎng)頁(yè)中選中要做超級(jí)鏈接的文字或者圖片。

⑵在屬性面板中單擊黃色文件夾圖標(biāo)，在彈出的對(duì)話框里選中相應(yīng)的網(wǎng)頁(yè)文件就完成了。做好超級(jí)鏈接屬性面板出現(xiàn)鏈接文件顯示。⑶按F12預(yù)覽網(wǎng)頁(yè)。在瀏覽器里光標(biāo)移到超級(jí)鏈接的地方就會(huì)變成手型。2、【郵件地址的超級(jí)連接】通過(guò)實(shí)際操作打開(kāi)“電子郵件”對(duì)話框。3、【制作圖片上的超級(jí)鏈接】

⑴首先插入圖片。單擊圖片，用展開(kāi)的屬性面板上的繪圖工具在畫(huà)面上繪制熱區(qū)。⑵屬性面板改換為熱點(diǎn)面板如圖：鏈接輸入框：填入相應(yīng)的鏈接。替代框：填入你的提示文字說(shuō)明。目標(biāo)框：不作選擇則默認(rèn)在新瀏覽器窗口打開(kāi)。⑶保存頁(yè)面，按F12預(yù)覽，用鼠標(biāo)在設(shè)置的熱區(qū)檢驗(yàn)效果。計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第19頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第20頁(yè)!計(jì)算機(jī)網(wǎng)絡(luò)原理》電子教案共22頁(yè)，您現(xiàn)在瀏覽的是第21頁(yè)!3、【制作圖片上