【任務(wù)1】創(chuàng)建“單元1”站點(diǎn)并瀏覽網(wǎng)課件

網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程

（第3版）網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程2單元1創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁【任務(wù)1-1】創(chuàng)建“單元1”站點(diǎn)并瀏覽網(wǎng)頁2單元1創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁【任務(wù)1-1】創(chuàng)建“單元1”站3【任務(wù)描述】【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)“單元1”創(chuàng)建一個(gè)名稱為“單元1”的本地站點(diǎn)，站點(diǎn)文件夾為“Unit01\task01-1”。3【任務(wù)描述】【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)“單元1”創(chuàng)建一4【任務(wù)實(shí)施】在DreamweaverCC的主界面中，單擊【站點(diǎn)】→【新建站點(diǎn)】菜單命令，打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框，如圖1-3所示。（1）打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框圖1-3【站點(diǎn)設(shè)置對(duì)象】對(duì)話框4【任務(wù)實(shí)施】在DreamweaverCC的主界面中，單擊5（2）在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中設(shè)置本地站點(diǎn)信息在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框的“站點(diǎn)名稱”文本框中輸入站點(diǎn)名稱“單元1”，在“本地站點(diǎn)文件夾”文本框中輸入完整的路徑名稱“D:\網(wǎng)頁設(shè)計(jì)與制作案例\Unit01\”。5（2）在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中設(shè)置本地站點(diǎn)信息6（3）保存創(chuàng)建的站點(diǎn)在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中單擊【保存】按鈕，保存創(chuàng)建的站點(diǎn)，更新站點(diǎn)緩存。此時(shí)在【文件】面板中可以看到新創(chuàng)建的本地站點(diǎn)“單元1”中的文件夾和文件，如圖1-5所示。圖1-5新創(chuàng)建的本地站點(diǎn)“單元1”中的文件夾和文件6（3）保存創(chuàng)建的站點(diǎn)圖1-5新創(chuàng)建的本地站點(diǎn)“單元1”7【任務(wù)描述】（1）熟悉DreamweaverCC工作界面的基本組成。（2）熟悉【文件】面板的組成。（3）了解DreamweaverCC工作界面各個(gè)組成部分的主要功能?！救蝿?wù)1-1-2】認(rèn)識(shí)DreamweaverCC

的工作界面7【任務(wù)描述】（1）熟悉DreamweaverCC工作界面8【任務(wù)實(shí)施】DreamweaverCC的工作界面如圖1-6所示。圖1-6DreamweaverCC的界面布局與組成8【任務(wù)實(shí)施】DreamweaverCC的工作界面如圖1-91．認(rèn)識(shí)DreamweaverCC的標(biāo)題欄標(biāo)題欄用于顯示網(wǎng)頁文檔的路徑和名稱。2．認(rèn)識(shí)DreamweaverCC的菜單欄DreamweaverCC的菜單欄包含10類菜單：【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點(diǎn)】、【窗口】和【幫助】，如圖1-6所示。91．認(rèn)識(shí)DreamweaverCC的標(biāo)題欄2．認(rèn)識(shí)Dre103．認(rèn)識(shí)DreamweaverCC的【文檔】工具欄【文檔】工具欄中包含用于切換文檔窗口視圖的【代碼】、【拆分】、【設(shè)計(jì)】、【實(shí)時(shí)視圖】按鈕和一些常用功能按鈕。103．認(rèn)識(shí)DreamweaverCC的【文檔】工具欄114．認(rèn)識(shí)DreamweaverCC的【標(biāo)準(zhǔn)】工具欄【標(biāo)準(zhǔn)】工具欄中包含網(wǎng)頁文檔的基本操作按鈕，例如【新建】、【打開】、【保存】、【剪切】、【復(fù)制】、【粘貼】等按鈕，如圖1-8所示。圖1-8【標(biāo)準(zhǔn)】工具欄114．認(rèn)識(shí)DreamweaverCC的【標(biāo)準(zhǔn)】工具欄圖1125．認(rèn)識(shí)DreamweaverCC的“文檔”窗口【文檔】窗口也稱為文檔編輯區(qū)，該窗口所顯示的內(nèi)容可以是代碼、網(wǎng)頁，或者兩者的共同體。125．認(rèn)識(shí)DreamweaverCC的“文檔”窗口136．認(rèn)識(shí)DreamweaverCC

的“插入”面板選擇【窗口】→【插入】命令，在DreamweaverCC的主界面的右側(cè)面板區(qū)域?qū)@示【插入】面板。通常情況下會(huì)顯示【插入】面板之“HTML”類型，如圖1-10所示。圖1-10【插入】面板136．認(rèn)識(shí)DreamweaverCC圖1-10【插入14在DreamweaverCC的【插入】面板中，單擊【插入】面板【模板】按鈕，即可展開“插入”工具類型列表，如圖1-11所示。圖1-11“插入”工具的類型14在DreamweaverCC的【插入】面板中，單擊【插157．認(rèn)識(shí)DreamweaverCC的【屬性】面板【屬性】面板用于查看和更改所選取的對(duì)象或文本的各種屬性，每個(gè)對(duì)象有不同的屬性?！緦傩浴棵姘灞容^靈活，它隨著選擇對(duì)象不同而改變，例如當(dāng)選擇一幅圖像，【屬性】面板上將出現(xiàn)該圖像的對(duì)應(yīng)屬性，如圖1-13所示。圖1-13【屬性】面板157．認(rèn)識(shí)DreamweaverCC的【屬性】面板圖1-16DreamweaverCC包括多個(gè)面板，這些面板都有不同的功能，將它們疊加在一起便形成了面板組。如圖1-15所示。面板組主要包括“插入”面板、“文件”面板、“CSS設(shè)計(jì)器”面板、“CSS過渡效果”面板等。8．認(rèn)識(shí)DreamweaverCC的面板組圖1-15面板組與【文件】面板16DreamweaverCC包括多個(gè)面板，這些面板都有不179．認(rèn)識(shí)DreamweaverCC的【文件】面板網(wǎng)站是多個(gè)網(wǎng)頁、圖像、動(dòng)畫、程序等文件有機(jī)聯(lián)系的整體，要有效地管理這些文件及其聯(lián)系，需要有一個(gè)有效的工具，【文件】面板便是這樣的工具。179．認(rèn)識(shí)DreamweaverCC的【文件】面板18圖1-18【文件】面板【文件】面板的組成如圖1-18所示，在該面板中顯示了當(dāng)前站點(diǎn)的內(nèi)容。18圖1-18【文件】面板【文件】面板的組成如圖1-181910．認(rèn)識(shí)DreamweaverCC的標(biāo)簽選擇器在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當(dāng)前選定內(nèi)容標(biāo)簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標(biāo)簽，可以選擇該標(biāo)簽及網(wǎng)頁中對(duì)應(yīng)的內(nèi)容。在標(biāo)簽選擇器還可以設(shè)置網(wǎng)頁的顯示比例。1910．認(rèn)識(shí)DreamweaverCC的標(biāo)簽選擇器20【任務(wù)描述】【任務(wù)1-1-3】打開與保存網(wǎng)頁文檔

0101.html（1）啟動(dòng)DreamweaverCC，打開一個(gè)網(wǎng)頁

文檔0101.html。（2）瀏覽網(wǎng)頁0101.html。（3）保存對(duì)網(wǎng)頁0101.html的修改。（4）關(guān)閉網(wǎng)頁0101.html。20【任務(wù)描述】【任務(wù)1-1-3】打開與保存網(wǎng)頁文檔（1）啟21【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html在DreamweaverCC主窗口中，選擇菜單命令【文件】→【打開】，彈出【打開】對(duì)話框，在【打開】對(duì)話框中選擇文件夾“task01-1”中需要打開的網(wǎng)頁文檔0101.html，然后單擊【打開】按鈕即可。21【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html222．瀏覽網(wǎng)頁在DreamweaverCC主窗口中瀏覽網(wǎng)頁的方法有2種：（1）選擇菜單【文件】→【在瀏覽器中預(yù)覽】→【GoogleChrome】。（2）按F12快捷鍵。按快捷鍵F12則以iexplore瀏覽方式瀏覽網(wǎng)頁，網(wǎng)頁0101.html瀏覽效果如圖1-22所示。222．瀏覽網(wǎng)頁23圖1-22網(wǎng)頁0101.html瀏覽效果23圖1-22網(wǎng)頁0101.html瀏覽效果243．保存網(wǎng)頁文檔保存網(wǎng)頁文檔的方法主要有三種：方法一：單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕或者【全部保存】按鈕。方法二：在DreamweaverCC主窗口的選擇命令【文件】→【保存】或者【保存全部】。方法三：按組合鍵“Ctrl+S”。243．保存網(wǎng)頁文檔254．關(guān)閉網(wǎng)頁文檔在DreamweaverCC主窗口中，如果需要關(guān)閉打開的網(wǎng)頁文檔，選擇命令【文件】→【關(guān)閉】或者【全部關(guān)閉】即可。如果頁面尚未保存，則會(huì)彈出一個(gè)對(duì)話框，確認(rèn)是否保存。254．關(guān)閉網(wǎng)頁文檔26【任務(wù)描述】【任務(wù)1-1-4】在瀏覽器中瀏覽網(wǎng)頁

0101.html（1）認(rèn)識(shí)瀏覽器窗口的基本組成。（2）認(rèn)識(shí)網(wǎng)頁的基本組成元素。（3）認(rèn)識(shí)網(wǎng)頁的布局結(jié)構(gòu)。26【任務(wù)描述】【任務(wù)1-1-4】在瀏覽器中瀏覽網(wǎng)頁（1）認(rèn)27【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html在DreamweaverCC主窗口中，選擇菜單命令【文件】→【打開】，彈出【打開】對(duì)話框，在【打開】對(duì)話框中選擇文件夾“task01-1”中需要打開的網(wǎng)頁文檔0101.html，然后單擊【打開】按鈕即可。27【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html281．認(rèn)識(shí)瀏覽器窗口的基本組成瀏覽器是用戶瀏覽網(wǎng)頁的軟件，支持多種具有交互性的網(wǎng)絡(luò)服務(wù)，可以顯示和播放從Web服務(wù)器中獲取網(wǎng)頁中的多種信息，是人們通過網(wǎng)絡(luò)進(jìn)行交流的主要工具。瀏覽器窗口通常由網(wǎng)頁標(biāo)題、標(biāo)準(zhǔn)按鈕、地址欄、網(wǎng)頁和狀態(tài)欄等部分組成，如圖1-23所示。281．認(rèn)識(shí)瀏覽器窗口的基本組成29圖1-23瀏覽器窗口的組成29圖1-23瀏覽器窗口的組成302．認(rèn)識(shí)網(wǎng)頁的基本組成元素網(wǎng)頁中包含了多種形式的內(nèi)容，例如文本、圖像、動(dòng)畫、視頻等，如圖1-22所示。網(wǎng)頁的最終目的是給瀏覽者顯示有價(jià)值的信息，并留下深刻的印象。302．認(rèn)識(shí)網(wǎng)頁的基本組成元素31圖1-24網(wǎng)頁的組成元素31圖1-24網(wǎng)頁的組成元素32（1）文本文本是網(wǎng)頁傳遞信息的主要元素，不僅傳輸速度快，而且可以根據(jù)需要對(duì)其字體、大小、顏色、底紋、邊框等屬性進(jìn)行設(shè)置，設(shè)置得風(fēng)格獨(dú)特的網(wǎng)頁文本會(huì)給瀏覽者帶來賞心悅目的感受。32（1）文本33（2）圖像豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，用于網(wǎng)頁上的圖像一般為jpg格式和gif格式，即以jpg和gif為擴(kuò)展名的圖像文件。33（2）圖像34（3）動(dòng)畫動(dòng)畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出眾、制作精致的動(dòng)畫是吸引瀏覽者眼球有效方法之一，目前網(wǎng)頁中經(jīng)常使用SWF動(dòng)畫和GIF圖片。34（3）動(dòng)畫35（4）超級(jí)鏈接超級(jí)鏈接是Web網(wǎng)頁的主要特色，是指從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接。這個(gè)“目的端”通常是另一個(gè)網(wǎng)頁，但也可以下列情況之一：相同網(wǎng)頁上的不同位置、一個(gè)下載的文件、一幅圖片、一個(gè)E-mail地址等。超級(jí)鏈接可以是文本、按鈕或圖片，鼠標(biāo)指向超級(jí)鏈接位置時(shí)，其指針會(huì)變成小手形狀。35（4）超級(jí)鏈接36（5）導(dǎo)航欄導(dǎo)航欄是一組超鏈接的集合，用來指引用戶跳轉(zhuǎn)到某一頁面或內(nèi)容的鏈接入口，可以方便地瀏覽網(wǎng)頁。（6）表單表單是用來接收用戶在瀏覽器端輸入的信息，然后將這些信息發(fā)送到服務(wù)器端，服務(wù)器的程序?qū)?shù)據(jù)進(jìn)行加工處理，這樣可以實(shí)現(xiàn)一些交互作用的網(wǎng)頁。36（5）導(dǎo)航欄37（7）網(wǎng)站的LogoLogo是網(wǎng)站的標(biāo)志、名片，例如搜狐網(wǎng)站的狐貍標(biāo)志，如同商標(biāo)一樣，Logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。Logo標(biāo)志可以是中文、英文字母，也可以是符號(hào)、圖案，還可以是動(dòng)物或者人物等。37（7）網(wǎng)站的Logo38（8）視頻在網(wǎng)頁中插入視頻文件將會(huì)使網(wǎng)頁變得更加精彩而富有動(dòng)感。常用的視頻文件格式有flv、mp4等。（9）其他元素網(wǎng)頁中除了上述這些最基本的構(gòu)成元素，還包括廣告、計(jì)數(shù)器、音頻等其他元素，它們不僅能點(diǎn)綴網(wǎng)頁，而且在網(wǎng)頁中起到十分重要的作用。38（8）視頻快樂學(xué)習(xí)、高效學(xué)習(xí)快樂學(xué)習(xí)、高效學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程

（第3版）網(wǎng)頁設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)教程41單元1創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁【任務(wù)1-1】創(chuàng)建“單元1”站點(diǎn)并瀏覽網(wǎng)頁2單元1創(chuàng)建站點(diǎn)與瀏覽網(wǎng)頁【任務(wù)1-1】創(chuàng)建“單元1”站42【任務(wù)描述】【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)“單元1”創(chuàng)建一個(gè)名稱為“單元1”的本地站點(diǎn)，站點(diǎn)文件夾為“Unit01\task01-1”。3【任務(wù)描述】【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)“單元1”創(chuàng)建一43【任務(wù)實(shí)施】在DreamweaverCC的主界面中，單擊【站點(diǎn)】→【新建站點(diǎn)】菜單命令，打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框，如圖1-3所示。（1）打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框圖1-3【站點(diǎn)設(shè)置對(duì)象】對(duì)話框4【任務(wù)實(shí)施】在DreamweaverCC的主界面中，單擊44（2）在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中設(shè)置本地站點(diǎn)信息在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框的“站點(diǎn)名稱”文本框中輸入站點(diǎn)名稱“單元1”，在“本地站點(diǎn)文件夾”文本框中輸入完整的路徑名稱“D:\網(wǎng)頁設(shè)計(jì)與制作案例\Unit01\”。5（2）在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中設(shè)置本地站點(diǎn)信息45（3）保存創(chuàng)建的站點(diǎn)在【站點(diǎn)設(shè)置對(duì)象】對(duì)話框中單擊【保存】按鈕，保存創(chuàng)建的站點(diǎn)，更新站點(diǎn)緩存。此時(shí)在【文件】面板中可以看到新創(chuàng)建的本地站點(diǎn)“單元1”中的文件夾和文件，如圖1-5所示。圖1-5新創(chuàng)建的本地站點(diǎn)“單元1”中的文件夾和文件6（3）保存創(chuàng)建的站點(diǎn)圖1-5新創(chuàng)建的本地站點(diǎn)“單元1”46【任務(wù)描述】（1）熟悉DreamweaverCC工作界面的基本組成。（2）熟悉【文件】面板的組成。（3）了解DreamweaverCC工作界面各個(gè)組成部分的主要功能。【任務(wù)1-1-2】認(rèn)識(shí)DreamweaverCC

的工作界面7【任務(wù)描述】（1）熟悉DreamweaverCC工作界面47【任務(wù)實(shí)施】DreamweaverCC的工作界面如圖1-6所示。圖1-6DreamweaverCC的界面布局與組成8【任務(wù)實(shí)施】DreamweaverCC的工作界面如圖1-481．認(rèn)識(shí)DreamweaverCC的標(biāo)題欄標(biāo)題欄用于顯示網(wǎng)頁文檔的路徑和名稱。2．認(rèn)識(shí)DreamweaverCC的菜單欄DreamweaverCC的菜單欄包含10類菜單：【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點(diǎn)】、【窗口】和【幫助】，如圖1-6所示。91．認(rèn)識(shí)DreamweaverCC的標(biāo)題欄2．認(rèn)識(shí)Dre493．認(rèn)識(shí)DreamweaverCC的【文檔】工具欄【文檔】工具欄中包含用于切換文檔窗口視圖的【代碼】、【拆分】、【設(shè)計(jì)】、【實(shí)時(shí)視圖】按鈕和一些常用功能按鈕。103．認(rèn)識(shí)DreamweaverCC的【文檔】工具欄504．認(rèn)識(shí)DreamweaverCC的【標(biāo)準(zhǔn)】工具欄【標(biāo)準(zhǔn)】工具欄中包含網(wǎng)頁文檔的基本操作按鈕，例如【新建】、【打開】、【保存】、【剪切】、【復(fù)制】、【粘貼】等按鈕，如圖1-8所示。圖1-8【標(biāo)準(zhǔn)】工具欄114．認(rèn)識(shí)DreamweaverCC的【標(biāo)準(zhǔn)】工具欄圖1515．認(rèn)識(shí)DreamweaverCC的“文檔”窗口【文檔】窗口也稱為文檔編輯區(qū)，該窗口所顯示的內(nèi)容可以是代碼、網(wǎng)頁，或者兩者的共同體。125．認(rèn)識(shí)DreamweaverCC的“文檔”窗口526．認(rèn)識(shí)DreamweaverCC

的“插入”面板選擇【窗口】→【插入】命令，在DreamweaverCC的主界面的右側(cè)面板區(qū)域?qū)@示【插入】面板。通常情況下會(huì)顯示【插入】面板之“HTML”類型，如圖1-10所示。圖1-10【插入】面板136．認(rèn)識(shí)DreamweaverCC圖1-10【插入53在DreamweaverCC的【插入】面板中，單擊【插入】面板【模板】按鈕，即可展開“插入”工具類型列表，如圖1-11所示。圖1-11“插入”工具的類型14在DreamweaverCC的【插入】面板中，單擊【插547．認(rèn)識(shí)DreamweaverCC的【屬性】面板【屬性】面板用于查看和更改所選取的對(duì)象或文本的各種屬性，每個(gè)對(duì)象有不同的屬性?！緦傩浴棵姘灞容^靈活，它隨著選擇對(duì)象不同而改變，例如當(dāng)選擇一幅圖像，【屬性】面板上將出現(xiàn)該圖像的對(duì)應(yīng)屬性，如圖1-13所示。圖1-13【屬性】面板157．認(rèn)識(shí)DreamweaverCC的【屬性】面板圖1-55DreamweaverCC包括多個(gè)面板，這些面板都有不同的功能，將它們疊加在一起便形成了面板組。如圖1-15所示。面板組主要包括“插入”面板、“文件”面板、“CSS設(shè)計(jì)器”面板、“CSS過渡效果”面板等。8．認(rèn)識(shí)DreamweaverCC的面板組圖1-15面板組與【文件】面板16DreamweaverCC包括多個(gè)面板，這些面板都有不569．認(rèn)識(shí)DreamweaverCC的【文件】面板網(wǎng)站是多個(gè)網(wǎng)頁、圖像、動(dòng)畫、程序等文件有機(jī)聯(lián)系的整體，要有效地管理這些文件及其聯(lián)系，需要有一個(gè)有效的工具，【文件】面板便是這樣的工具。179．認(rèn)識(shí)DreamweaverCC的【文件】面板57圖1-18【文件】面板【文件】面板的組成如圖1-18所示，在該面板中顯示了當(dāng)前站點(diǎn)的內(nèi)容。18圖1-18【文件】面板【文件】面板的組成如圖1-185810．認(rèn)識(shí)DreamweaverCC的標(biāo)簽選擇器在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當(dāng)前選定內(nèi)容標(biāo)簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標(biāo)簽，可以選擇該標(biāo)簽及網(wǎng)頁中對(duì)應(yīng)的內(nèi)容。在標(biāo)簽選擇器還可以設(shè)置網(wǎng)頁的顯示比例。1910．認(rèn)識(shí)DreamweaverCC的標(biāo)簽選擇器59【任務(wù)描述】【任務(wù)1-1-3】打開與保存網(wǎng)頁文檔

0101.html（1）啟動(dòng)DreamweaverCC，打開一個(gè)網(wǎng)頁

文檔0101.html。（2）瀏覽網(wǎng)頁0101.html。（3）保存對(duì)網(wǎng)頁0101.html的修改。（4）關(guān)閉網(wǎng)頁0101.html。20【任務(wù)描述】【任務(wù)1-1-3】打開與保存網(wǎng)頁文檔（1）啟60【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html在DreamweaverCC主窗口中，選擇菜單命令【文件】→【打開】，彈出【打開】對(duì)話框，在【打開】對(duì)話框中選擇文件夾“task01-1”中需要打開的網(wǎng)頁文檔0101.html，然后單擊【打開】按鈕即可。21【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html612．瀏覽網(wǎng)頁在DreamweaverCC主窗口中瀏覽網(wǎng)頁的方法有2種：（1）選擇菜單【文件】→【在瀏覽器中預(yù)覽】→【GoogleChrome】。（2）按F12快捷鍵。按快捷鍵F12則以iexplore瀏覽方式瀏覽網(wǎng)頁，網(wǎng)頁0101.html瀏覽效果如圖1-22所示。222．瀏覽網(wǎng)頁62圖1-22網(wǎng)頁0101.html瀏覽效果23圖1-22網(wǎng)頁0101.html瀏覽效果633．保存網(wǎng)頁文檔保存網(wǎng)頁文檔的方法主要有三種：方法一：單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕或者【全部保存】按鈕。方法二：在DreamweaverCC主窗口的選擇命令【文件】→【保存】或者【保存全部】。方法三：按組合鍵“Ctrl+S”。243．保存網(wǎng)頁文檔644．關(guān)閉網(wǎng)頁文檔在DreamweaverCC主窗口中，如果需要關(guān)閉打開的網(wǎng)頁文檔，選擇命令【文件】→【關(guān)閉】或者【全部關(guān)閉】即可。如果頁面尚未保存，則會(huì)彈出一個(gè)對(duì)話框，確認(rèn)是否保存。254．關(guān)閉網(wǎng)頁文檔65【任務(wù)描述】【任務(wù)1-1-4】在瀏覽器中瀏覽網(wǎng)頁

0101.html（1）認(rèn)識(shí)瀏覽器窗口的基本組成。（2）認(rèn)識(shí)網(wǎng)頁的基本組成元素。（3）認(rèn)識(shí)網(wǎng)頁的布局結(jié)構(gòu)。26【任務(wù)描述】【任務(wù)1-1-4】在瀏覽器中瀏覽網(wǎng)頁（1）認(rèn)66【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html在DreamweaverCC主窗口中，選擇菜單命令【文件】→【打開】，彈出【打開】對(duì)話框，在【打開】對(duì)話框中選擇文件夾“task01-1”中需要打開的網(wǎng)頁文檔0101.html，然后單擊【打開】按鈕即可。27【任務(wù)實(shí)施】1．打開網(wǎng)頁文檔0101.html671．認(rèn)識(shí)瀏覽器窗口的基本組成瀏覽器是用戶瀏覽網(wǎng)頁的軟件，支持多種具有交互性的網(wǎng)絡(luò)服務(wù)，可以顯示和播放從Web服務(wù)器中獲取網(wǎng)頁中的多種信息，是人們通過網(wǎng)絡(luò)進(jìn)行交流的主要工具。瀏覽器窗口通常由網(wǎng)頁標(biāo)題、標(biāo)準(zhǔn)按鈕、地址欄、網(wǎng)頁和狀態(tài)欄等部分組成，如圖1-23所示。281．認(rèn)識(shí)瀏覽器窗口的基本組成68圖1-23瀏覽器窗口的組成29圖1-23瀏覽器窗口的組成692．認(rèn)識(shí)網(wǎng)頁的基本組成元素