《網(wǎng)頁設計》完整課件 網(wǎng)頁設計4

1、第四講 Dreanweaver MX網(wǎng)頁設計基礎及基本操作與文字編輯 主要內(nèi)容：一、Dreamweaver MX簡介二、Dreamweaver MX工作界面三、Dreamweaver MX基本操作與文字編輯四、 五、本節(jié)小結(jié)六、作業(yè)1Dreamweaver MX簡介 Dreamweaver MX是Macromedia公司推出的最新版本的優(yōu)秀的可視化、功能強大的所見即所得的網(wǎng)頁制作工具，一直以來它是專業(yè)人事的首選。因為它不但能夠完成一般網(wǎng)頁編輯器所能完成的工作，而且還能制作出許多需要通過編程才能達到的效果。而對于廣大的愛好者來說，該軟件功能強大、界面友好、操作方便、容易掌握。只要熟練掌握該軟件的

2、使用，便能夠制作出相當高水平的網(wǎng)頁。2必須注意： Dreamweaver和現(xiàn)在市場上使用的其它的網(wǎng)頁制作軟件如Frontpage, 微軟的Word等在風格上有所不同， Dreamweaver采用的是Macromedia浮動面板的設計風格，對于初學者來說，可能會感到不適應。但當你習慣了其操作方法后，就會發(fā)現(xiàn)Dreamweaver的直觀性和高效性是Frontpage和其它軟件所無法比擬的。更多的體會可能只能靠我們同學學習、掌握、熟練使用該軟件以后留給同學們自己總結(jié)了。3Dreamweaver MX 工作界面介紹 當我們第一次啟動Dreamweaver MX軟件時，會彈出一個工作界面選擇窗口：4 可

3、以讓用戶根據(jù)自己的需要設置，可選擇的界面包括“Dreamweaver MX工作區(qū)”和“Dreamweaver 4工作區(qū)”。 （也就是說，Dreamweaver MX提供了有二種工作界面的風格：） 第一種：將全部元素置于一個窗口的集成布局風格，即“Dreamweaver MX工作區(qū)”。請看下圖示例：5對象面板屬性面板標題欄主菜單中間空白的就是網(wǎng)頁編輯區(qū)（文檔窗口）狀態(tài)欄面板組站點面板Dreamweaver MX工作界面6 第二種：非常類似于Dreamweaver 4的浮動布局風格，即“Dreamweaver 4工作區(qū)”。請看下圖示例：7 提示：如果不是第一次使用Dreamweaver MX，如何

4、可以重新設置自己的需要的界面？ 也就是說： 選擇一種工作區(qū)后要切換到另一個工作區(qū)該怎么辦？ 操作方法是：1、選擇Dreamweaver MX中的菜單“編輯”“參數(shù)選擇”命令，會彈出“參數(shù)選擇”對話框： 8參數(shù)選擇對話框可以修改工作區(qū)的風格9 2、在“參數(shù)選擇”對話框中的左側(cè)的“分類”列表中選擇“常規(guī)”類。 3、單擊“更改工作區(qū)”按鈕。 4、選擇一種工作區(qū)布局，然后單擊“確定”按鈕。此時系統(tǒng)會出現(xiàn)一條警告信息，通知您重新啟動Dreamweaver后將出現(xiàn)新的布局。 5、退出Dreamweaver MX，并重新啟動它，就換了一種工作界面。 10DreamweaverMX工作區(qū)功能介紹 一、標題欄

5、標題欄用來顯示當前編輯頁面的標題。標題的內(nèi)容相當于HTML中TITLE標記引出的標題內(nèi)容。在括號中顯示了當前文件所在的目錄和文件名。如果該文件尚未保存或尚未保存的改動時，則文件名后面將會有星號出現(xiàn)，提醒你保存。11二、主菜單 主菜單中包括文件（File）、編輯（Edit）、查看（View）、插入（Insert）、修改（Modify）、文字（Text）、命令（Commands）、站點（Site）、窗口（Window）、幫助（Help）十個菜單選項。 每個菜單中又包括許多命令和子菜單，當單擊菜單中的命令時，就會執(zhí)行相應的功能。主菜單中囊括了Dreamweaver中的所有功能和命令，這就像是Drea

6、mweaver的大本營一樣。12三、 對象面板（“插入”欄）對象面板的作用就是在光標的后面加入不同的對象，如表格、圖像、圖層等。它包含用于將各種類型的“對象”插入到文檔中的按鈕。對象面板共分12項，分別是：常用、布局、文本、表格、框架、表單、模板、字符、媒體、文件頭、腳本、應用程序。對象面板是在網(wǎng)頁中創(chuàng)建各種類型元素的重要工具，使用對象面板時，只要單擊對象按鈕到頁面編輯窗口就可以插入對象了。根據(jù)插入的對象不同，Dreamweaver會彈出相應的對話框，讓用戶對插入的對象做進一步的設置。13四、狀態(tài)欄 狀態(tài)欄的左邊是HTML元素信息條，它以HTML的方式顯示光標當前位置的網(wǎng)頁元素信息?？梢栽诖诉x

7、中HTML標簽，所以有的教科書把稱為HTML標簽選擇器。 567289表示窗口大小信息欄，它可以顯示和調(diào)節(jié)窗口的大小。 1K/1秒表示當前文件的大小和下載的時間（或者是網(wǎng)頁的連接速度）。14五、屬性面板（屬性檢查器） 屬性面板用于檢查或修改當前頁面中被選定元素的各種屬性。當用戶在屬性面板中修改對象屬性后，大多數(shù)的屬性都可以立即在文檔窗口中顯示出來，如改變圖像的對齊方式等。而有些個別屬性需要將當前操作焦點跳出文本框或按Enter鍵后才能更新。如修改圖像尺寸。說明：屬性面板的內(nèi)容是動態(tài)變化的，它會隨當前選擇對象的不同而變化，因為不同類型的對象擁有不同的屬性。15六、網(wǎng)頁編輯區(qū)（文檔窗口） 在Dre

8、amweaverMX界面的中間空白處就是網(wǎng)頁編輯區(qū)，或者稱為文檔窗口，它顯示當前創(chuàng)建和編輯的文檔。該窗口基本可以顯示頁面在瀏覽器中的最終顯示效果，其中有些元素只能在瀏覽器中才能正確顯示，如一些圖片或Flash動畫等。 運行DreamweaverMX后會自動新建一個空白的文檔窗口，用戶就可以在其中進行各種輸入、設計、編輯操作。16七、面板組：面板組是組合在一個標題下面的相關面板的集合。 面板組包含有設計面板（包括“CSS樣式”、“HTML樣式”、“行為”）、代碼面板、應用程序面板、文件面板。若要使用某個面板，（則要展開一個面板組），單擊組名左側(cè)的展開箭頭。若要取消?？恳粋€面板組，請拖動該組標題條

9、左邊的手柄。八、“站點”面板：“站點”面板可以管理組成站點的文件和文件夾。非常類似Windows的資源管理器。17DreamweaverMX基本操作主要介紹以下四個問題：定義本地站點創(chuàng)建主頁文件設置頁面屬性輸入文本并對文本進行編輯18什么是站點？ 在第一次上課介紹網(wǎng)頁基礎知識時，我們簡單介紹了站點。 站點（或稱 Web站點、網(wǎng)站）指的是一組具有共享屬性（如相關的主題、類似的設計或共同的目的）的鏈接文檔。絕大多數(shù)網(wǎng)頁設計都是圍繞站點目的進行的。 理解：將制作好的一些相關網(wǎng)頁以一定形式組織起來，這就是站點。 嚴格地說，站點是網(wǎng)頁文檔的磁盤組織形式，它是由文檔和文檔所在的文件夾組成（利用不同的文件夾

10、，將不同的內(nèi)容分門別類地保存，便于管理和更新）。 19 介紹幾個概念：1、本地計算機：若你正在使用的一臺計算機，同時也是用來存放上傳到服務器之前時所有的網(wǎng)頁及站點的內(nèi)容，則這臺電腦稱為本地計算機。2、本地站點：指的是本地計算機創(chuàng)建的站點。實質(zhì)上它是指網(wǎng)站中所有的網(wǎng)頁文件在本地計算機的存放位置。3、遠程計算機： 除了本地計算機外，還應該有一臺計算機來發(fā)布主頁，供Internet用戶瀏覽，這臺計算機就叫做遠程計算機。 實際上就是Internet服務器。 20 4、遠程站點：在本地站點設計完畢后，可以利用各種FTP程序?qū)⒈镜卣军c上傳到Internet服務器上，形成遠程站點。5、站點的規(guī)劃和設計：指的

11、是創(chuàng)建Web站點通常是從對其進行規(guī)劃開始的：決定要創(chuàng)建多少頁、每頁上顯示什么內(nèi)容、以及網(wǎng)頁是如何互相鏈接起來的。 21創(chuàng)建本地站點的方法：1、第一步必須先在本地計算機的磁盤上建立一個文件夾。（作為本地站點的根文件夾）提示：為了方便以后管理站點上的文件，先在本地文件夾中創(chuàng)建幾個目錄：htm、img、 others，分別存放網(wǎng)頁設計中用到的資源及網(wǎng)頁文件。2、建立本地站點，選擇主菜單中的“站點/新建站點”命令，在彈出的新建站點對話框進行設置。創(chuàng)建本地站點22 新建站點的操作步驟： 第一步：選擇菜單中的“站點”“新建站點”命令，如圖所示：23 在彈出的對話框中選擇“基本”選項卡，出現(xiàn)定義站點向?qū)В?/p>

12、下圖所示：為站點輸入一個名稱，中、英文均可24第二步：單擊“下一步”按鈕，詢問是否要使用服務器技術，選擇“否”選項（表示目前該站點是一個靜態(tài)站點，沒有動態(tài)頁即不使用Web應用程序：如ASP、JavaServer Page JSP）25第三步：單擊“下一步”按鈕，選擇“編輯我的計算機上的本地副本，完成后再上傳到服務器（推薦）”單選項，然后指定本地機磁盤上的一個文件夾儲存站點文件（包括網(wǎng)頁文件及設計網(wǎng)頁用到的其它資源）指定的文件夾稱為站點的本地根文件夾26第四步：單擊“下一步”按鈕，在彈出的對話框中設置如何連接到遠程服務器，單擊下拉菜單，選擇“無”。如下圖所示：27第五步：單擊“下一步”按鈕，彈出

13、如下圖設置概要。單擊“完成”按鈕，完成設置。28*使用“高級”選項卡定義站點操作方法：選擇“高級”選項卡，在“分類”區(qū)域中選擇“本地信息”，如下圖所示：29說明：在“站點名稱”文本框中，輸入站點的名稱。在“本地根文件夾”文本框中，指定本地計算機的磁盤上用于存放所有站點文件的文件夾。（如果本地根文件夾尚不存在，應先創(chuàng)建好的文件夾）。在“自動刷新本地文本列表”選項中，指定每次文件復制到本地站點時，DreamweaverMX是否自動刷新本地文件列表。在“默認圖象文件夾”文本框中，指定此站點的默認圖象文件夾的路徑。30在“http地址”文本框中，輸入已完成的Web站點將使用的URL。對于“啟用緩存”選

14、項，指定是否創(chuàng)建本地緩存以提高鏈接和站點管理任務的速度，這是DreamweaverMX 提供的很好的資源，要選中。 在本地計算機上設計網(wǎng)頁，本地站點的信息設置已經(jīng)足夠了，遠程站點的信息以后設置。31創(chuàng)建主頁文件的步驟方法一：啟動了DreamweaverMX軟件，如同啟動Word等其它應用軟件一樣打開了一個新的空的網(wǎng)頁文檔，就可以在這個新的文檔中進行網(wǎng)頁設計編輯；或者單擊“文件”菜單中的“新建”命令，或直接按Ctrl+N鍵，打開一個新頁面，在該頁面中也可以進行網(wǎng)頁的設計編輯。網(wǎng)頁設計編輯完畢后，保存網(wǎng)頁文件：保存的位置在戰(zhàn)點根目錄下，新文件取名為“index.htm” 即建立了主頁文件。32方法

15、二：打開站點管理窗口在站點管理窗口右邊的本地文件夾列表框中建立新文件，新文件取名為“index.htm” 按回車鍵，即建立了主頁文件。雙擊“index.htm”文件，進入編輯“index.htm”的網(wǎng)頁文件窗口，進行主頁設計。（操作演示說明）33設置頁面屬性 頁面的屬性包括頁面的標題、背景圖像、背景顏色等（還記得，在什么HTML的標記中來設置這些參數(shù)嗎？） 操作方法：單擊“修改（Modify）”菜單中的“頁面設置（Page Properties）”命令，或直接按Ctrl+J鍵，便可打開“頁面設置”的對話框進行設置。34輸入文本并對文本進行編輯 使用Dreamweaver輸入文本及對文本進行編輯的方法與我們學過的字處理軟件的操作方法非常類似，Dreamweaver系統(tǒng)也提供非常靈活、方便快捷的菜單、命令對文字進行編輯處理。其操作方法非常簡單，很容易掌握。（舉例演示說明）注意：1、在Dreamweaver中的“空格”是中文全角下按“空格”鍵。 2、換段直接按回車鍵。（出現(xiàn)空一行） 3、段落中的換行按Shift+Enter。（不空一行）35本節(jié)小結(jié) 本節(jié)主要向大家介紹了Dreamweaver MX的工作界面及功能簡介，使初次接觸Dreamweaver MX的使用者能較