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

1、網(wǎng)頁設(shè)計與制作任務(wù)驅(qū)動教程 （第3版）2單元1 創(chuàng)建站點與瀏覽網(wǎng)頁【任務(wù)1-1】創(chuàng)建“單元1”站點并瀏覽網(wǎng)頁3【任務(wù)描述】【任務(wù)1-1-1】創(chuàng)建本地站點“單元1”創(chuàng)建一個名稱為“單元1”的本地站點，站點文件夾為“Unit01task01-1”。4【任務(wù)實施】在Dreamweaver CC的主界面中，單擊【站點】【新建站點】菜單命令，打開【站點設(shè)置對象】對話框，如圖1-3所示。（1）打開【站點設(shè)置對象】對話框圖1-3 【站點設(shè)置對象】對話框5（2）在【站點設(shè)置對象】對話框中設(shè)置本地站點信息在【站點設(shè)置對象】對話框的“站點名稱”文本框中輸入站點名稱“單元1”，在“本地站點文件夾”文本框中輸入完整的

2、路徑名稱“D:網(wǎng)頁設(shè)計與制作案例Unit01”。6（3）保存創(chuàng)建的站點在【站點設(shè)置對象】對話框中單擊【保存】按鈕，保存創(chuàng)建的站點，更新站點緩存。此時在【文件】面板中可以看到新創(chuàng)建的本地站點“單元1”中的文件夾和文件，如圖1-5所示。圖1-5 新創(chuàng)建的本地站點“單元1”中的文件夾和文件7【任務(wù)描述】（1）熟悉Dreamweaver CC工作界面的基本組成。（2）熟悉【文件】面板的組成。（3）了解Dreamweaver CC工作界面各個組成部分的主要功能。【任務(wù)1-1-2】認(rèn)識Dreamweaver CC 的工作界面8【任務(wù)實施】Dreamweaver CC的工作界面如圖1-6所示。圖1-6 Dr

3、eamweaver CC的界面布局與組成91認(rèn)識Dreamweaver CC的標(biāo)題欄標(biāo)題欄用于顯示網(wǎng)頁文檔的路徑和名稱。2認(rèn)識Dreamweaver CC的菜單欄Dreamweaver CC的菜單欄包含10類菜單：【文件】、【編輯】、【查看】、【插入】、【修改】、【格式】、【命令】、【站點】、【窗口】和【幫助】，如圖1-6所示。103認(rèn)識Dreamweaver CC的【文檔】工具欄【文檔】工具欄中包含用于切換文檔窗口視圖的【代碼】、【拆分】、【設(shè)計】、【實時視圖】按鈕和一些常用功能按鈕。114認(rèn)識Dreamweaver CC的【標(biāo)準(zhǔn)】工具欄【標(biāo)準(zhǔn)】工具欄中包含網(wǎng)頁文檔的基本操作按鈕，例如【新建

4、】、【打開】、【保存】、【剪切】、【復(fù)制】、【粘貼】等按鈕，如圖1-8所示。圖1-8 【標(biāo)準(zhǔn)】工具欄125認(rèn)識Dreamweaver CC的“文檔”窗口【文檔】窗口也稱為文檔編輯區(qū)，該窗口所顯示的內(nèi)容可以是代碼、網(wǎng)頁，或者兩者的共同體。136認(rèn)識Dreamweaver CC 的“插入”面板選擇【窗口】【插入】命令，在Dreamweaver CC的主界面的右側(cè)面板區(qū)域?qū)@示【插入】面板。通常情況下會顯示【插入】面板之“HTML”類型，如圖1-10所示。圖1-10 【插入】面板14在Dreamweaver CC的【插入】面板中，單擊【插入】面板【模板】按鈕，即可展開“插入”工具類型列表，如圖1-1

5、1所示。圖1-11 “插入”工具的類型157認(rèn)識Dreamweaver CC的【屬性】面板【屬性】面板用于查看和更改所選取的對象或文本的各種屬性，每個對象有不同的屬性?！緦傩浴棵姘灞容^靈活，它隨著選擇對象不同而改變，例如當(dāng)選擇一幅圖像，【屬性】面板上將出現(xiàn)該圖像的對應(yīng)屬性，如圖1-13所示。圖1-13 【屬性】面板16Dreamweaver CC包括多個面板，這些面板都有不同的功能，將它們疊加在一起便形成了面板組。如圖1-15所示。面板組主要包括“插入”面板、“文件”面板、“CSS設(shè)計器”面板、“CSS過渡效果”面板等。8認(rèn)識Dreamweaver CC的面板組圖1-15 面板組與【文件】面板

6、179認(rèn)識Dreamweaver CC的【文件】面板網(wǎng)站是多個網(wǎng)頁、圖像、動畫、程序等文件有機聯(lián)系的整體，要有效地管理這些文件及其聯(lián)系，需要有一個有效的工具，【文件】面板便是這樣的工具。18圖1-18 【文件】面板【文件】面板的組成如圖1-18所示，在該面板中顯示了當(dāng)前站點的內(nèi)容。1910認(rèn)識Dreamweaver CC的標(biāo)簽選擇器在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當(dāng)前選定內(nèi)容標(biāo)簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標(biāo)簽，可以選擇該標(biāo)簽及網(wǎng)頁中對應(yīng)的內(nèi)容。在標(biāo)簽選擇器還可以設(shè)置網(wǎng)頁的顯示比例。20【任務(wù)描述】【任務(wù)1-1-3】打開與保存網(wǎng)頁文檔 0101.html（1）啟動Dreamweaver

7、 CC，打開一個網(wǎng)頁 文檔0101.html。（2）瀏覽網(wǎng)頁0101.html。（3）保存對網(wǎng)頁0101.html的修改。（4）關(guān)閉網(wǎng)頁0101.html。21【任務(wù)實施】1打開網(wǎng)頁文檔0101.html在Dreamweaver CC主窗口中，選擇菜單命令【文件】【打開】，彈出【打開】對話框，在【打開】對話框中選擇文件夾“task01-1”中需要打開的網(wǎng)頁文檔0101.html，然后單擊【打開】按鈕即可。222瀏覽網(wǎng)頁在Dreamweaver CC主窗口中瀏覽網(wǎng)頁的方法有2種：（1）選擇菜單【文件】【在瀏覽器中預(yù)覽】【Google Chrome】。（2）按F12快捷鍵。按快捷鍵F12則以iex

8、plore瀏覽方式瀏覽網(wǎng)頁，網(wǎng)頁0101.html瀏覽效果如圖1-22所示。23圖1-22 網(wǎng)頁0101.html瀏覽效果243保存網(wǎng)頁文檔保存網(wǎng)頁文檔的方法主要有三種：方法一：單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕或者【全部保存】按鈕。方法二：在Dreamweaver CC主窗口的選擇命令【文件】【保存】或者【保存全部】。方法三：按組合鍵“Ctrl+S”。254關(guān)閉網(wǎng)頁文檔在Dreamweaver CC主窗口中，如果需要關(guān)閉打開的網(wǎng)頁文檔，選擇命令【文件】【關(guān)閉】或者【全部關(guān)閉】即可。如果頁面尚未保存，則會彈出一個對話框，確認(rèn)是否保存。26【任務(wù)描述】【任務(wù)1-1-4】在瀏覽器中瀏覽網(wǎng)頁 010

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

10、-23所示。29圖1-23 瀏覽器窗口的組成302認(rèn)識網(wǎng)頁的基本組成元素網(wǎng)頁中包含了多種形式的內(nèi)容，例如文本、圖像、動畫、視頻等，如圖1-22所示。網(wǎng)頁的最終目的是給瀏覽者顯示有價值的信息，并留下深刻的印象。31圖1-24 網(wǎng)頁的組成元素32（1）文本文本是網(wǎng)頁傳遞信息的主要元素，不僅傳輸速度快，而且可以根據(jù)需要對其字體、大小、顏色、底紋、邊框等屬性進行設(shè)置，設(shè)置得風(fēng)格獨特的網(wǎng)頁文本會給瀏覽者帶來賞心悅目的感受。33（2）圖像豐富多彩的圖像是美化網(wǎng)頁必不可少的元素，用于網(wǎng)頁上的圖像一般為jpg格式和gif格式，即以jpg和gif為擴展名的圖像文件。34（3）動畫動畫是網(wǎng)頁中最活躍的元素，創(chuàng)意出

11、眾、制作精致的動畫是吸引瀏覽者眼球有效方法之一，目前網(wǎng)頁中經(jīng)常使用SWF動畫和GIF圖片。35（4）超級鏈接超級鏈接是Web網(wǎng)頁的主要特色，是指從一個網(wǎng)頁指向另一個目的端的鏈接。這個“目的端”通常是另一個網(wǎng)頁，但也可以下列情況之一：相同網(wǎng)頁上的不同位置、一個下載的文件、一幅圖片、一個E-mail地址等。超級鏈接可以是文本、按鈕或圖片，鼠標(biāo)指向超級鏈接位置時，其指針會變成小手形狀。36（5）導(dǎo)航欄導(dǎo)航欄是一組超鏈接的集合，用來指引用戶跳轉(zhuǎn)到某一頁面或內(nèi)容的鏈接入口，可以方便地瀏覽網(wǎng)頁。（6）表單表單是用來接收用戶在瀏覽器端輸入的信息，然后將這些信息發(fā)送到服務(wù)器端，服務(wù)器的程序?qū)?shù)據(jù)進行加工處理，這樣可以實現(xiàn)一些交互作用的網(wǎng)頁。37（7）網(wǎng)站的LogoLogo是網(wǎng)站的標(biāo)志、名片，例如搜狐網(wǎng)站的狐貍標(biāo)志，如同商標(biāo)一樣，Logo是網(wǎng)站特色和內(nèi)