新編Dreamweaver CS3動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作教程第2章.ppt

1、2.1 項(xiàng)目1：選擇工作區(qū)布局 2.2 項(xiàng)目2：調(diào)用Dreamweaver CS3輔助功能 2.3 項(xiàng)目3：本地站點(diǎn)的建立 2.4 項(xiàng)目4：文檔管理 2.5 課堂綜合訓(xùn)練 2.6 小結(jié) 習(xí)題,第2章 Dreamweaver CS3基礎(chǔ),Dreamweaver CS3包括三種工作區(qū)布局：針對(duì)編程人員的編碼器、適合網(wǎng)站設(shè)計(jì)師的設(shè)計(jì)器和可供網(wǎng)站測(cè)試人員使用的雙重屏幕。這三種環(huán)境能分別給不同角色的工作帶來(lái)很大的方便，從而發(fā)揮Dreamweaver CS3出色的工作效率。【設(shè)計(jì)器】為默認(rèn)工作區(qū)布局，如圖2.1所示。,2.1 項(xiàng)目1：選擇工作區(qū)布局,圖2.1 【設(shè)計(jì)器】工作區(qū)布局,在【編碼器】布局下，將重

2、要的面板和編輯窗口集成在一起，從而縮小了編輯窗口。窗口右側(cè)是Dreamweaver CS3的代碼布局，面板組?？吭谧髠?cè)。本書大部分內(nèi)容將在【設(shè)計(jì)器】布局中進(jìn)行介紹。1. 操作步驟選擇工作區(qū)布局的具體操作步驟如下：(1) 如果要切換工作區(qū)布局，可以選擇【窗口】【工作區(qū)布局】菜單，然后在展開(kāi)的子菜單中選擇相應(yīng)的布局命令即可，如圖2.2所示。,圖2.2 【工作區(qū)布局】子菜單,(2) 點(diǎn)擊【保存當(dāng)前】，彈出【保存工作區(qū)布局】對(duì)話框，如圖2.3所示，給當(dāng)前布局模式命名，運(yùn)用此菜單，用戶可以依據(jù)個(gè)人習(xí)慣保存工作區(qū)布局模式。輸入自定義名稱“設(shè)計(jì)1”。(3) 點(diǎn)擊【管理】子菜單，彈出【管理工作區(qū)布局】對(duì)話框，

3、可對(duì)用戶自定義布局進(jìn)行刪除、重命名操作，如圖2.4所示。,圖2.3 【保存工作區(qū)布局】對(duì)話框,圖2.4 【管理工作區(qū)布局】對(duì)話框,(4) 啟動(dòng)Dreamweaver CS3后會(huì)顯示歡迎界面，并要求用戶從中選擇新建、打開(kāi)或者以其他方式創(chuàng)建文檔，如圖2.5所示。(5) 打開(kāi)編輯窗口，可以看到Dreamweaver CS3主窗口，其工作界面分為標(biāo)題欄、菜單欄、文檔工具欄、狀態(tài)欄、屬性面板、浮動(dòng)面板組等，如圖2.6所示。詳細(xì)介紹如下：,圖2.5 DW歡迎界面,圖2.6 Dreamweaver CS3主窗口操作界面,菜單欄：位于標(biāo)題欄下方，包括【文件】、【編輯】、【查看】、【插入記錄】、【修改】、【文本

4、】、【命令】、【站點(diǎn)】、【窗口】和【幫助】等10個(gè)菜單項(xiàng)，它們包含了Dreamweaver CS3的所有操作命令，通過(guò)它們可以對(duì)網(wǎng)頁(yè)文檔進(jìn)行制作、編輯和修改。 插入面板：包含了用于創(chuàng)建和插入對(duì)象的按鈕。當(dāng)鼠標(biāo)移動(dòng)到一個(gè)按鈕上時(shí)，會(huì)出現(xiàn)包含有該按鈕名稱的工具提示，單擊該按鈕即可插入相應(yīng)的元素。 屬性面板：屬性面板用來(lái)顯示文本編輯窗口中被選中的元素的屬性，并允許用戶在屬性面板中對(duì)元素屬性進(jìn)行修改。選中的元素不同，面板中的內(nèi)容就不同。,文檔工具欄：包含了比較常見(jiàn)的文檔按鈕，可以實(shí)現(xiàn)“代碼”視圖、“設(shè)計(jì)”視圖及同時(shí)顯示“代碼”和“設(shè)計(jì)”視圖的拆分視圖間的快速切換。文檔工具欄還包含一些與查看文檔、在本地

5、和遠(yuǎn)程站點(diǎn)間傳輸文檔相關(guān)的常用命令和選項(xiàng)。狀態(tài)欄：位于文檔編輯區(qū)域最底部的是狀態(tài)欄，狀態(tài)欄中的【選取工具】、【手形工具】和【縮放工具】按鈕分別用來(lái)選取對(duì)象、移動(dòng)頁(yè)面工作區(qū)域和縮放頁(yè)面。狀態(tài)欄【設(shè)置縮放比例】列表菜單可用于顯示和調(diào)整瀏覽器窗口的內(nèi)部尺寸，按比例縮放瀏覽器大小?！敬翱诖笮　坎藛慰梢赃x擇顯示器大小，默認(rèn)為640480像素。狀態(tài)欄最右側(cè)顯示的是網(wǎng)頁(yè)下載速度，即下載文件時(shí)的數(shù)據(jù)傳輸速率(以kb/s為單位)。,標(biāo)簽選擇器：標(biāo)簽選擇器位于狀態(tài)欄的最左邊，用于顯示當(dāng)前選定內(nèi)容標(biāo)簽的層次結(jié)構(gòu)。單擊選擇器中的任何標(biāo)簽，可以顯示該標(biāo)簽的全部?jī)?nèi)容。若要設(shè)置標(biāo)簽選擇器中某個(gè)標(biāo)簽的類或者ID屬性，可右鍵單

6、擊該標(biāo)簽，從彈出的快捷菜單中選擇一個(gè)類或ID。浮動(dòng)面板組：為了方便設(shè)計(jì)者的使用，Dreamweaver CS3將一些常用的面板組合到一個(gè)統(tǒng)一的面板組中，每個(gè)面板都可以自由展開(kāi)和折疊，并可以和其他面板?？吭谝黄鸹蛉∠？俊蝹€(gè)面板還可以拖動(dòng)到編輯窗口中，使用戶可以輕易地訪問(wèn)所需面板。,2. 相關(guān)知識(shí)點(diǎn)保存工作區(qū)布局的方法；認(rèn)識(shí)Dreamweaver CS3主窗口工作界面。,1. 屏幕閱讀器支持功能屏幕閱讀器會(huì)朗讀計(jì)算機(jī)屏幕上顯示的文字，Dreamweaver CS3支持Window Eyes屏幕閱讀器。Dreamweaver CS3用戶可以使用屏幕閱讀器來(lái)協(xié)助創(chuàng)建Web頁(yè)。屏幕閱讀器會(huì)從“文檔”

7、窗口的左上角開(kāi)始朗讀。它還會(huì)在創(chuàng)作過(guò)程中朗讀在輔助功能標(biāo)簽或?qū)傩灾刑峁┑姆俏谋拘畔ⅲ鐟?yīng)用程序中的按鈕標(biāo)簽文字或圖像說(shuō)明。,2.2 項(xiàng)目2：調(diào)用Dreamweaver CS3輔助功能,2. 操作系統(tǒng)輔助功能Dreamweaver CS3支持Windows操作系統(tǒng)的高對(duì)比度設(shè)置。在Windows控制面板中的【輔助功能選項(xiàng)】中選擇【顯示】標(biāo)簽，勾選【使用高對(duì)比度】，用戶可按個(gè)人喜好選擇可讀性好的字體和顏色。啟用高對(duì)比度后，它會(huì)對(duì)Dreamweaver CS3產(chǎn)生以下三方面影響：(1) 對(duì)話框和面板將使用系統(tǒng)顏色設(shè)置。如果將顏色設(shè)置為“黑底白字”，則所有Dreamweaver CS3對(duì)話框和面板都

8、會(huì)以白色的前景顏色和黑色的背景顏色來(lái)顯示。,(2) “代碼”視圖使用系統(tǒng)和窗口的文本顏色。例如將系統(tǒng)顏色設(shè)置為“黑底白字”，然后在【編輯】【首選參數(shù)】【代碼顏色】中更改文本顏色，Dreamweaver CS3會(huì)忽略顏色設(shè)置，仍然以白色前景顏色和黑色背景顏色顯示代碼文本。(3) 頁(yè)面使用系統(tǒng)瀏覽器的背景顏色和字體顏色。例如系統(tǒng)顏色的設(shè)置為“白底黑字”，而在“設(shè)計(jì)”視圖中，將【修改】【頁(yè)面屬性】中的背景顏色和文本顏色分別設(shè)置為綠色(#339933)和黃色(#FFCC00)，則所完成的頁(yè)面依然會(huì)顯示與瀏覽器相同的顏色，即顯示為白底黑字。,3. 鍵盤導(dǎo)航在Windows系統(tǒng)中，無(wú)需使用鼠標(biāo)，可以使用鍵

9、盤在面板、檢查器、對(duì)話框、框架和表格中導(dǎo)航。1) 面板導(dǎo)航面板導(dǎo)航有以下功能：(1) 在“文檔”窗口中，按Ctrl+F6組合鍵將焦點(diǎn)切換到某一面板，這時(shí)面板標(biāo)題周圍將會(huì)有黑色虛線框指示焦點(diǎn)位于該面板，屏幕閱讀器會(huì)朗讀該面板標(biāo)題欄。,(2) 連續(xù)按Ctrl+F6組合鍵可在各面板間進(jìn)行切換，按Ctrl+Shift+F6組合鍵可將焦點(diǎn)切換至先前的面板。(3) 按空格鍵展開(kāi)面板，再次按空格鍵可折疊該面板。按Tab鍵可在該面板上的各個(gè)選項(xiàng)之間移動(dòng)。如果某一選項(xiàng)包含若干選擇，可使用箭頭鍵滾動(dòng)查看這些選擇元素，然后按空格鍵作出選擇。,2) 屬性檢查器導(dǎo)航屬性檢查器導(dǎo)航操作如下：(1) 按Ctrl+F3組合鍵

10、顯示屬性檢查器。 (2) 按Ctrl+Alt+Tab組合鍵，直到將焦點(diǎn)切換到屬性檢查器。(3) 按Tab鍵在屬性檢查器的各個(gè)選項(xiàng)之間移動(dòng)。(4) 使用箭頭鍵在選項(xiàng)的各項(xiàng)選擇元素之間移動(dòng)。(5) 按Ctrl+Tab組合鍵或者在焦點(diǎn)位于右下部的展開(kāi)箭頭上時(shí)按空格鍵，以打開(kāi)和關(guān)閉屬性檢查器的展開(kāi)部分。,3) 對(duì)話框?qū)Ш綄?duì)話框?qū)Ш降牟僮魅缦拢?1) 按Tab鍵在對(duì)話框中的各個(gè)選項(xiàng)之間移動(dòng)。(2) 使用箭頭鍵在選項(xiàng)的各項(xiàng)選擇元素之間移動(dòng)。(3) 如果該對(duì)話框包含【類別】列表，可按Ctrl+Tab組合鍵將焦點(diǎn)切換到【類別】列表，然后使用箭頭鍵在列表中向上或向下移動(dòng)。(4) 按Enter鍵退出對(duì)話框。,4)

11、 框架導(dǎo)航框架導(dǎo)航的具體操作如下：(1) 按Alt+向下鍵，將插入點(diǎn)置于“文檔”窗口中。 (2) 按Alt+向上鍵，選擇當(dāng)前具有焦點(diǎn)的框架。(3) 繼續(xù)按Alt+向上箭頭鍵，將焦點(diǎn)切換到框架集。如果存在嵌套框架集，則再切換到父框架集。(4) 按Alt+向下鍵，將焦點(diǎn)切換到子框架集或該框架集中的一個(gè)框架。(5) 當(dāng)焦點(diǎn)位于單個(gè)框架上時(shí)，按Alt+向左鍵或向右鍵可讓焦點(diǎn)在各個(gè)框架之間移動(dòng)。,5) 表格導(dǎo)航表格導(dǎo)航的具體操作如下：(1) 根據(jù)需要，使用箭頭鍵或按Tab鍵移動(dòng)到表格中的其他單元格。如果在最右側(cè)的單元格中按Tab鍵，則會(huì)將另一行添加到表格。(2) 插入點(diǎn)位于某單元格時(shí)按 Ctrl+A組合

12、鍵即選中該單元格；連續(xù)按Ctrl+A組合鍵兩次即選中整個(gè)表格；按Ctrl+A組合鍵三次，然后按向上、向左或向右箭頭鍵即退出表格。,4. 相關(guān)知識(shí)點(diǎn)Windows中設(shè)置輔助功能的方法；屏幕閱讀器支持；操作系統(tǒng)輔助功能；鍵盤導(dǎo)航的方法。,1. 操作步驟建立本地站點(diǎn)的操作步驟如下：(1) 在本地硬盤上建立一個(gè)用來(lái)設(shè)置站點(diǎn)并可保存文件的文件夾，即本地站點(diǎn)的根目錄。如建立D:mysite存放站點(diǎn)文件，并建立D:mysiteimage存放網(wǎng)頁(yè)圖像文件。(2) 選擇Dreamweaver CS3的【站點(diǎn)】【新建站點(diǎn)】菜單。(3) 彈出如圖2.7所示的站點(diǎn)定義對(duì)話框，默認(rèn)狀態(tài)下，激活的是【高級(jí)】標(biāo)簽，在【分類

13、】列表中選擇【本地信息】。,2.3 項(xiàng)目3：本地站點(diǎn)的建立,圖2.7 【站點(diǎn)定義】對(duì)話框,(4) 在【站點(diǎn)名稱】文本框中輸入網(wǎng)站名稱，網(wǎng)站名稱顯示在【文件】面板中的下拉列表中。站點(diǎn)名稱可以是用戶自定義名稱，其名稱不會(huì)在瀏覽器上顯示，只用于參考和辨認(rèn)，如命名為“TEST”。(5) 單擊文本框后面的【瀏覽文件】按鈕，在打開(kāi)的【選擇站點(diǎn)本地根文件夾】對(duì)話框中選擇本地站點(diǎn)文件，如圖2.8所示，單擊【確定】按鈕完成目錄設(shè)置?；蛘咧苯釉谖谋究蛑休斎胝军c(diǎn)目錄和文件夾名稱。,圖2.8 站點(diǎn)文件夾設(shè)置選擇,(6) 【默認(rèn)圖像文件夾】用來(lái)指定站點(diǎn)默認(rèn)的圖像存放文件夾的位置，在此我們選擇D:mysiteimage為

14、存放網(wǎng)站圖像的文件夾。(7) 在【鏈接相對(duì)于】單選按鈕選項(xiàng)中選擇“文檔”。(8) 在【HTTP地址】文本框中輸入完整的URL，以便于檢驗(yàn)網(wǎng)站的絕對(duì)URL鏈接。(9) 勾選【緩存】前面的復(fù)選框。對(duì)話框中信息輸入完畢后，當(dāng)前站點(diǎn)的相關(guān)信息如圖2.9所示。,圖2.9 本地站點(diǎn)設(shè)置,(10) 設(shè)置完畢，單擊【確定】按鈕，返回設(shè)計(jì)視圖。(11) 選擇菜單【窗口】【文件】命令，打開(kāi)【文件】面板，如圖2.10所示，剛才建立的站點(diǎn)名稱及站點(diǎn)中的文件都顯示在文件面板中。 2. 相關(guān)知識(shí)點(diǎn)新建站點(diǎn)的方法；【站點(diǎn)定義】對(duì)話框的設(shè)置方法。,圖2.10 【文件】面板,1. 創(chuàng)建新的空白文檔創(chuàng)建新的空白文檔的具體操作如下

15、：(1) 選擇【文件】【新建】命令，打開(kāi)【新建文檔】對(duì)話框，如圖2.11所示。,2.4 項(xiàng)目4：文檔管理,圖2.11 【新建文檔】對(duì)話框,(2) 【新建文檔】對(duì)話框由【空白頁(yè)】、【空模板】、【模板中的頁(yè)】、【實(shí)例中的頁(yè)】和【其他】共5個(gè)側(cè)選項(xiàng)卡組成。(3) 在對(duì)話框中選擇【空白頁(yè)】【HTML】【無(wú)】選項(xiàng)。(4) 單擊【創(chuàng)建】按鈕，創(chuàng)建一空白文檔。執(zhí)行【文件】【保存】命令，為網(wǎng)頁(yè)命名，保存網(wǎng)頁(yè)。在此我們將網(wǎng)頁(yè)命名為text.html。,2. 保存文檔 保存文檔的具體操作如下：(1) 為了保存文檔，選擇【文件】【保存】命令。(2) 彈出【另存為】對(duì)話框后，保存位置將會(huì)指定為“本地站點(diǎn)文件夾、文件名

16、稱為”。輸入用戶自定義文件名text.html后，單擊【保存】按鈕，如圖2.12所示。(3) 在右側(cè)的【文件】面板中會(huì)出現(xiàn)剛剛保存的文件，如圖2.13所示。,圖 2.12 【另存為】對(duì)話框,圖2.13 【文件】面板中保存的文件,3. 打開(kāi)現(xiàn)有文檔打開(kāi)現(xiàn)有文檔的具體操作如下：(1) 若要再次打開(kāi)已有的文檔，且此文檔最近剛被編輯，可以直接在Dreamweaver CS3歡迎界面的【打開(kāi)最近的項(xiàng)目】中查找并單擊文檔鏈接。(2) 如果【打開(kāi)最近的項(xiàng)目】中沒(méi)有需要的文檔，可單擊歡迎界面的【打開(kāi)】圖標(biāo)，或者在菜單中選擇【文件】【打開(kāi)】命令，在彈出的【打開(kāi)】對(duì)話框中查找所需文檔后，點(diǎn)擊【打開(kāi)】即可，如圖2.

17、14所示。,圖2.14 【打開(kāi)】對(duì)話框,4. 關(guān)閉文檔關(guān)閉剛剛操作的文檔時(shí)，可以單擊文檔窗口右側(cè)上端的【關(guān)閉】按鈕，也可以在文檔窗口上面的文檔標(biāo)簽上單擊鼠標(biāo)右鍵后，在快捷菜單中選擇【關(guān)閉】命令，如圖2.15所示。5. 相關(guān)知識(shí)點(diǎn)創(chuàng)建新文檔的方法；保存文檔的方法；打開(kāi)/關(guān)閉一個(gè)或多個(gè)文檔的方法。,圖2.15 【關(guān)閉】文檔命令,1新建一個(gè)本地站點(diǎn)，命名為“study”。2新建一個(gè)空白文檔，命名為test1.html，保存在站點(diǎn)目錄下。3關(guān)閉test1.html。4打開(kāi)test1.html文檔。,2.5 課堂綜合訓(xùn)練,本章主要介紹了工作區(qū)的布局、Dreamweaver CS3的輔助功能、站點(diǎn)的概念、使用向?qū)Т罱ㄕ军c(diǎn)、文檔管理方法等內(nèi)容。學(xué)習(xí)完本章后，讀者應(yīng)掌握建立一個(gè)本地站點(diǎn)和創(chuàng)建網(wǎng)站文檔的基本方法。,2.6 小 結(jié),1. 選擇題(1) 在Dreamweaver CS3中，下面關(guān)于定義站點(diǎn)的說(shuō)法錯(cuò)誤的是( )。A. 首先定義新站點(diǎn)，打開(kāi)站點(diǎn)定義設(shè)置窗口B. 在站點(diǎn)定義設(shè)置窗口的站點(diǎn)名稱(Site Name)中填寫網(wǎng)站的名稱C. 在站點(diǎn)設(shè)置窗口中，可以設(shè)置本地網(wǎng)站的保存路徑，而不可以設(shè)置圖像的保存路徑D. 本地站點(diǎn)的定義比較簡(jiǎn)單，基本上選擇好目錄就可以了,習(xí) 題,(2) 在Dreamweaver CS3中，下面關(guān)于查看網(wǎng)站的說(shuō)法錯(cuò)誤的是( )。A. 只能將當(dāng)?shù)氐木W(wǎng)站顯示成一個(gè)文件