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

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

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

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

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

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

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

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

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

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

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

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

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