靜態(tài)網(wǎng)頁設(shè)計制作 教案 第1章 Dreamweaver 2021 概述

STYLEREFbt1a項目一STYLEREFbt1bDreamweaver2021概述項目一Dreamweaver2021概述思政目標(biāo)了解Dreamweaver2021的界面組成，對其發(fā)展歷史有較清楚的認(rèn)識，培養(yǎng)探究精神。逐步培養(yǎng)讀者勤于思考、善于鉆研的學(xué)習(xí)習(xí)慣技能目標(biāo)熟悉Dreamweaver2021的啟動方法熟悉Dreamweaver2021的工作界面掌握Dreamweaver2021的文件操作。項目導(dǎo)讀Dreamweaver是一款用于網(wǎng)頁制作和站點管理的“所見即所得”的網(wǎng)頁編輯工具。它將可視布局工具、應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起，使得各個層次的開發(fā)人員和設(shè)計人員都能夠快速創(chuàng)建界面精美的、基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序，其直觀性與高效性是很多網(wǎng)頁編輯工具無法比擬的。任務(wù)1Dreamweaver2021窗口組成任務(wù)引入小明是一名網(wǎng)頁設(shè)計師，經(jīng)常利用Dreamweaver2021軟件為客戶設(shè)計各種不同類型的，但是要想熟練的使用Dreamweaver2021軟件，必須先了解該軟件的操作界面、窗口布局等。只有對界面有了宏觀的認(rèn)識，才能更好更快的進(jìn)行網(wǎng)站設(shè)計。那么默認(rèn)的界面中有哪些內(nèi)容，各個區(qū)域的功能是什么呢？知識準(zhǔn)備安裝完Dreamweaver2021簡體中文版之后，執(zhí)行“開始”/“程序”/“AdobeDreamweaver2021”命令，或在桌面上找到AdobeDreamweaver2021圖標(biāo)按鈕，雙擊或者右擊選擇“打開”，即可啟動Dreamweaver2021簡體中文版。為幫助用戶快速適應(yīng)Dreamweaver2021工作區(qū)中的更改，初次啟動時，Adobe提供“首次使用體驗”（如圖1-1），用戶可以快速找到適合的工作區(qū)和主題選項。圖1-1首次自定義體驗Dreamweaver2021默認(rèn)的顏色主題為黑色，為便于標(biāo)識界面元素，本書選擇淺色的顏色主題。啟動Dreamweaver2021簡體中文版（以下簡稱Dreamweaver2021）之后，默認(rèn)顯示Dreamweaver2021的歡迎界面，如圖1-2所示。該界面用于打開最近使用過的文檔或創(chuàng)建新文檔，還可以從中通過產(chǎn)品介紹或視頻教程了解關(guān)于Dreamweaver的更多信息。如果不希望每次啟動時都打開這個界面，可以在“首選項”/“常規(guī)”對話框中修改設(shè)置。圖1-2Dreamweaver2021歡迎界面單擊歡迎界面上“新建”欄目下所需的文檔類型，或執(zhí)行“文件”/“新建”命令，在打開的“新建文檔”對話框中選擇“新建文檔”類別的HTML基本項，然后選擇框架欄的“無”，單擊“創(chuàng)建”按鈕進(jìn)入Dreamweaver2021中文版的工作界面，如圖1-3所示。圖1-3Dreamweaver2021的工作環(huán)境一、菜單欄與其他多數(shù)軟件類似，Dreamweaver2021的菜單欄位于工作界面最上方，如圖1-4所示。圖1-4菜單欄二、文檔工具欄文檔工具欄主要集中了一些可以在文檔的不同視圖之間快速切換的常用命令，以及一些與查看文檔、在本地和遠(yuǎn)程站點間傳輸文檔有關(guān)的常用命令和選項。Dreamweaver2021中的文檔工具欄如圖1-5所示。圖1-5文檔工具欄在工具欄中包含了一些圖標(biāo)按鈕和彈出菜單，可以用不同的方式來查看文檔窗口或者預(yù)覽設(shè)計效果，具體各個按鈕圖標(biāo)的功能如下：：顯示代碼視圖。：在同一屏幕中顯示“代碼”視圖和“設(shè)計”視圖。：在不打開瀏覽器的情況下實時預(yù)覽頁面的效果。單擊該按鈕右側(cè)的倒三角形按鈕，在彈出的下拉菜單中可選擇“設(shè)計”視圖。三、通用工具欄通用工具欄位于界面左側(cè)，開始頁面的通用工具欄如圖1-6所示，主要集中了一些與查看文檔、在本地和遠(yuǎn)程站點之間傳輸文檔、以及代碼編輯有關(guān)的常用命令和選項。：單擊該按鈕顯示當(dāng)前打開的所有文檔列表。：單擊該按鈕彈出文件管理下拉菜單，如圖1-7所示。：擴(kuò)展全部代碼。：格式化源代碼。：應(yīng)用注釋。：刪除注釋。：自定義工具欄。單擊該按鈕打開“自定義工具欄”對話框，如圖1-8所示。在工具列表中勾選需要的工具左側(cè)的復(fù)選框，即可將工具添加到通用工具欄中。：在“實時視圖”模式下該按鈕可見。單擊該按鈕，可以打開CSS檢查模式，以可視方式調(diào)整設(shè)計，實現(xiàn)期望的樣式設(shè)計。CSS檢查模式允許開發(fā)人員以可視化方式詳細(xì)顯示CSS框模型屬性，包括填充、邊框和邊距；輕松切換CSS屬性，且無需讀取代碼；或使用獨立的第三方實用程序。CSS檢查模式在具有某些設(shè)置時最有用，如：CSS設(shè)計器以“當(dāng)前”模式打開、啟用實時視圖。如果沒有這些設(shè)置中的任何一種，將在文檔窗口頂部顯示相關(guān)的提示信息。圖1-6通用工具欄圖1-7文件管理下拉菜單圖1-8“自定義工具欄”對話框四、“插入”面板Dreamweaver2021的“插入”浮動面板，默認(rèn)?？吭诮缑嬗覀?cè)的浮動面板組中。單擊浮動面板組中的“插入”按鈕，即可彈出“插入”面板，如圖1-9所示?！安迦搿泵姘宓某跏家晥D為“HTML”面板。單擊“插入”面板中“HTML”面板右側(cè)的倒三角形按鈕，即可在彈出的下拉列表中選擇需要的面板，從而在不同的面板之間切換，如圖1-10所示。圖1-9“插入”面板圖1-10在不同面板之間進(jìn)行切換“插入”面板有7組選項，每組中有不同類型的對象。使用“插入”菜單中的命令也可以插入各種對象，使用菜單還是使用“插入”面板根據(jù)用戶的習(xí)慣決定。默認(rèn)狀態(tài)下，“插入”面板中的對象圖標(biāo)顯示右側(cè)標(biāo)簽，如果單擊下拉列表中的“隱藏標(biāo)簽”命令，則只顯示對象圖標(biāo)，而不顯示圖標(biāo)右側(cè)的標(biāo)簽。五、文檔窗口文檔窗口用于顯示當(dāng)前創(chuàng)建或者編輯的文檔，可以根據(jù)選擇的顯示方式不同而顯示不同的內(nèi)容。用戶的操作結(jié)果都會顯示在文檔窗口中。不管是利用Dreamweaver2021提供的工具或命令編寫，還是直接在“代碼”視圖中編寫，所進(jìn)行的工作都在文檔窗口中完成。文檔窗口中包含了所編輯或創(chuàng)建文檔的所有HTML代碼。單擊文檔工具欄中的按鈕，切換到“設(shè)計”視圖，文檔窗口顯示的內(nèi)容與瀏覽器中顯示的內(nèi)容相同，如圖1-11所示。使用Dreamweaver2021提供的工具或命令，可以方便地進(jìn)行創(chuàng)建、編輯文檔的各種工作，即使完全不懂HTML代碼的讀者也可以制作出精美的網(wǎng)頁。圖1-11“設(shè)計”視圖單擊工具欄中的按鈕，切換到代碼視圖，在文檔窗口中顯示的是當(dāng)前文檔的代碼，如圖1-12所示。盡管在設(shè)計視圖中可以完成絕大部分工作，但是有些工作還是必須使用代碼編輯，這就必須在代碼視圖中進(jìn)行，比如編輯插入的腳本，對腳本進(jìn)行檢查、調(diào)試等。圖1-12“代碼”視圖在編寫文檔時，有時可能必須兼顧設(shè)計樣式和實現(xiàn)代碼，這時就需要代碼與設(shè)計視圖同屏顯示。單擊工具欄中的按鈕，就可以實現(xiàn)這個功能，如圖1-13所示。圖1-13“拆分”視圖此外，在Dreamweaver2021的“拆分”模式下，執(zhí)行“查看”｜“拆分”｜“頂部的設(shè)計視圖”菜單命令，可以將“代碼”視圖和“設(shè)計”視圖上下調(diào)換；執(zhí)行“查看”｜“拆分”｜“垂直拆分”菜單命令，可以垂直拆分視圖，此時執(zhí)行“查看”｜“拆分”｜“左側(cè)的設(shè)計視圖”菜單命令，可以將“代碼”視圖和“設(shè)計”視圖左右調(diào)換，如圖1-14所示。圖1-14調(diào)換“設(shè)計”視圖和“代碼”視圖這樣，同一文檔的兩種視圖可以在同一窗口中對照顯示，并且當(dāng)選中“設(shè)計”視圖或者“代碼”視圖中的某一部分時，在另外的“代碼”視圖或者“設(shè)計”視圖中也會選中相應(yīng)的網(wǎng)頁元素。六、“屬性”面板默認(rèn)情況下，Dreamweaver2021沒有開啟“屬性”面板，用戶可以執(zhí)行“窗口”|“屬性”命令打開“屬性”面板。選中網(wǎng)頁中的某個對象后，“屬性”面板可以顯示被選中對象的屬性，如圖1-15所示。用戶可以在屬性面板中修改被選對象的各項屬性值。圖1-15“屬性”面板“屬性”面板分成上下兩部分。不同的對象有不同的屬性，因此選中不同對象時，“屬性”面板顯示的內(nèi)容是不同的。單擊面板右下角的按鈕可以關(guān)閉“屬性”面板的下面部分。這時，按鈕變成按鈕，單擊此按鈕可以重新打開“屬性”面板的下面部分。七、浮動面板組Dreamweaver2021的浮動面板組位于工作環(huán)境右側(cè)，包含的面板如圖1-16所示。在菜單欄中的“窗口”下拉菜單中可以打開或者關(guān)閉這些面板。例如，執(zhí)行“窗口”｜“CSS設(shè)計器”命令，可以打開如圖1-17所示的“CSS設(shè)計器”面板。圖1-16“窗口”菜單圖1-17“CSS設(shè)計器”面板任務(wù)2文件操作任務(wù)引入小明已經(jīng)對Dreamweaver2021的操作界面有了一個初步的認(rèn)識。接下來開始制作網(wǎng)頁，那么，怎么開始繪制新的網(wǎng)頁文件？怎么打開已有的文件？繪制好的網(wǎng)頁文件怎么保存到設(shè)定位置？知識準(zhǔn)備Dreamweaver2021的文件操作是制作網(wǎng)頁最基本的操作，包括網(wǎng)頁文件的打開、保存、關(guān)閉等。一、打開文件若要編輯一個網(wǎng)頁文件，必須先打開該文件。Dreamweaver2021可以打開多種格式的文件，例如htm、html、shtml、xhtml、asp、json、pro、js、aspx、dwt、xml、lbi、sql、css、svg等。執(zhí)行“文件”｜“打開”命令，彈出“打開”對話框，如圖1-18所示?！按蜷_”對話框與其他的Windows應(yīng)用程序一樣，可以在對話框中選中要打開的文件名，然后單擊“打開”按鈕即可打開該文件；也可在對話框中雙擊所需的文件打開。圖1-18“打開”對話框二、創(chuàng)建文件創(chuàng)建新的網(wǎng)頁文件，有以下兩種方法：（1）在Dreamweaver2021中，執(zhí)行“文件”｜“新建”命令，彈出“新建文檔”對話框，如圖1-19所示。選擇要創(chuàng)建的文件類型和布局，然后單擊“創(chuàng)建”按鈕，即可創(chuàng)建新文件。圖1-19“新建文檔”對話框創(chuàng)建HTML文件時，默認(rèn)的文檔類型為HTML5。用戶可以在“文檔類型”列表框中選擇需要的文檔類型。如果要創(chuàng)建自定義Bootstrap文檔，可以在“框架”區(qū)域選擇“Bootstrap”，然后使用Bootstrap組件構(gòu)建網(wǎng)站，或者使用Extract從Photoshop復(fù)合中將圖像、字體、樣式、文本等網(wǎng)頁元素導(dǎo)入Bootstrap文檔。（2）如果要基于模板創(chuàng)建文檔，則先在“新建文檔”對話框中單擊“網(wǎng)站模板”標(biāo)簽，選擇模板所在的站點，然后再選擇需要的模板文件。這時可以通過預(yù)覽區(qū)域瀏覽所選擇模板的樣式，如圖1-20所示。選擇需要使用的模板后，單擊“創(chuàng)建”按鈕，即可創(chuàng)建一個基于該模板的新文件。圖1-20選擇網(wǎng)站模板（3）利用Dreamweaver2021，用戶還可以基于Bootstrap起始頁模板很便捷地創(chuàng)建快速響應(yīng)的網(wǎng)頁。在“新建文檔”對話框中選擇“啟動器模板”類別，在“示例文件夾”列表中選擇“Bootstrap模板”，然后在“示例頁”列表中選擇需要的Bootstrap起始頁模板，如圖1-21所示。圖1-21選擇Bootstrap起始頁模板三、存儲文件保存網(wǎng)頁文件的方法隨保存文件的目的不同而不同。（1）如果同時打開了多個網(wǎng)頁文件，則執(zhí)行“文件”｜“保存”或“文件”｜“另存為”命令只保存當(dāng)前編輯的頁面。（2）若要保存打開的所有頁面，則執(zhí)行“文件”｜“保存全部”命令。（3）若是第一次保存該文件，則執(zhí)行“文件”｜“保存”命令彈出“另存為”對話框，如圖1-22所示。若文件已經(jīng)保存過，則執(zhí)行“文件”｜“保存”命令時，直接保存文件。（4）如果希望將一個網(wǎng)頁文檔以模板的形式保存，則先切換到要保存的文件所在的窗口，執(zhí)行“文件”｜“另存為模板”命令，打開“另存模板”對話框，如圖1-23所示。在該對話框的“站點”下拉列表框中選擇一個保存該模板文件的站點，然后在“另存為”后面的文本框中輸入文件的名稱，最后單擊“保存”按鈕完成文件的保存。圖1-22“另存為”對話框圖1-23“另存模板”對話框四、設(shè)置文檔屬性頁面標(biāo)題、背景圖像和顏色、文本和鏈接顏色以及邊距是每個Web文檔的基本屬性。一般情況下，新建一個網(wǎng)頁文件后，其默認(rèn)的頁面屬性都不符合設(shè)計需要。可以通過設(shè)置文檔的頁面屬性來自定義頁面外觀。操作步驟如下：（1）在Dreamweaver中打開要修改頁面屬性的網(wǎng)頁文件。（2）執(zhí)行“文件”/“頁面屬性”命令，在彈出的“頁面屬性”對話框中對頁面的外觀、鏈接、標(biāo)題和編碼以及跟蹤圖像進(jìn)行設(shè)置，如圖1-24所示。圖1-24“頁面屬性”對話框（3）在“外觀”分類中，可以設(shè)置頁面字體、大小、顏色、背景顏色和圖像、背景圖像的填充方式和頁邊距。頁邊距是指頁面文檔主體部分與瀏覽器上、下、左、右邊框的距離。如果同時使用背景圖像和背景顏色，下載圖像時會先出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含透明像素，則背景顏色會透過背景圖像顯示出來。默認(rèn)情況下，Dreamweaver使用CSS指定頁面屬性。如果選擇使用HTML指定頁面屬性，屬性面板仍然顯示“樣式”彈出式菜單，不過，字體、大小、顏色和對齊方式控件將只顯示使用HTML標(biāo)簽的屬性設(shè)置，應(yīng)用于當(dāng)前選擇的CSS屬性值將是不可見的，且“大小”彈出式菜單也將被禁用。（4）在“鏈接”分類中，可以定義鏈接的默認(rèn)字體、字號、顏色，以及鏈接文本不同狀態(tài)下的顏色、修飾樣式。（5）在“標(biāo)題”分類中，可以定義標(biāo)題字體，并指定最多六個級別的標(biāo)題標(biāo)簽使用的字體大小和顏色。（6）在“標(biāo)題/編碼”分類中，可以指定頁面在瀏覽器窗口或編輯窗口中顯示的標(biāo)題、所用語言的文檔編碼類型，以及指定要用于該編碼類型的Unicode范式。（7）在“跟蹤圖像”分類中，可以指定跟蹤圖像及圖像的透明度。跟蹤圖像是Dreamweaver一個非常有用的功能，是放在文檔窗口背景中的、使用各種繪圖軟件繪制的一個想象中的網(wǎng)頁排版格局圖，可以是JPEG、