【模仿訓(xùn)練】

任務(wù)1.1 創(chuàng)建北京大學(xué)網(wǎng)站站點(diǎn)并瀏覽網(wǎng)頁(yè)

本單元“模仿訓(xùn)練”的任務(wù)卡如表1.1所示。

本單元“模仿訓(xùn)練”的任務(wù)跟蹤卡如表1.2所示。

任務(wù)1.1.1 分析北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)

微課視頻

分析北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)

〖任務(wù)描述〗

（1）利用提供的資源，分析北京大學(xué)站點(diǎn)的目錄結(jié)構(gòu)和組成元素。

（2）了解網(wǎng)站與網(wǎng)頁(yè)的相關(guān)概念。

〖任務(wù)實(shí)施〗

如圖1-28所示。

任務(wù)1.1.2 賞析北京大學(xué)網(wǎng)站的首頁(yè)、列表頁(yè)和詳情頁(yè)

微課視頻

賞析北京大學(xué)網(wǎng)站的首頁(yè)、列表頁(yè)和詳情頁(yè)

（1）利用百度網(wǎng)站搜索“北京大學(xué)”及有關(guān)學(xué)校的網(wǎng)站，通過(guò)賞析這些頁(yè)站的首頁(yè)（index.html）、列表頁(yè)（list.html）、二級(jí)頁(yè)面和詳情頁(yè)（content.html）、三級(jí)頁(yè)面認(rèn)識(shí)瀏覽器窗口的基本組成，認(rèn)識(shí)網(wǎng)頁(yè)的基本組成元素，認(rèn)識(shí)網(wǎng)頁(yè)的布局結(jié)構(gòu)。

〖任務(wù)描述〗

（2）通過(guò)賞析經(jīng)典頁(yè)面，對(duì)網(wǎng)頁(yè)的構(gòu)成形成初步印象。

（3）通過(guò)分析網(wǎng)頁(yè)，了解網(wǎng)頁(yè)的相關(guān)概念和術(shù)語(yǔ)。

（4）從所瀏覽的網(wǎng)站中篩選出兩個(gè)優(yōu)秀的網(wǎng)站，書寫網(wǎng)頁(yè)賞析報(bào)告。

〖任務(wù)實(shí)施〗

如圖1-29～圖1-31所示。

任務(wù)1.1.3 創(chuàng)建北京大學(xué)網(wǎng)站的本地站點(diǎn)

微課視頻

創(chuàng)建北京大學(xué)網(wǎng)站的本地站點(diǎn)

〖任務(wù)描述〗

創(chuàng)建一個(gè)名為“北京大學(xué)”的本地站點(diǎn)，如圖1-32所示。

〖任務(wù)實(shí)施〗

任務(wù)實(shí)施步驟參見本單元【預(yù)備知識(shí)】中“使用Dreamweaver的向?qū)?chuàng)建本地站點(diǎn)”方法。

建議使用“記事本”手寫代碼的方法書寫網(wǎng)頁(yè)和創(chuàng)建站點(diǎn)。

【注意】 在實(shí)際工作中站點(diǎn)、文件夾和網(wǎng)頁(yè)文件名稱不能以中文命名。

任務(wù)1.1.4 認(rèn)識(shí)Dreamweaver的工作界面

微課視頻

認(rèn)識(shí)Dreamweaver的工作界面3

〖任務(wù)描述〗

（1）了解Dreamweaver工作界面的基本組成。

（2）了解【文件】面板的組成。

（3）了解Dreamweaver 工作界面各個(gè)組成部分的主要功能。

〖任務(wù)實(shí)施〗

如圖1-33所示。

1.認(rèn)識(shí)Dreamweaver 的標(biāo)題欄

標(biāo)題欄用于顯示網(wǎng)頁(yè)文檔的路徑和名稱。

2.認(rèn)識(shí)Dreamweaver的菜單欄

Dreamweaver 的菜單欄包含10類菜單：文件、編輯、查看、插入、修改、格式、命令、站點(diǎn)、窗口和幫助。

3.認(rèn)識(shí)Dreamweaver的【文檔】工具欄

【文檔】工具欄中包含用于切換文檔窗口視圖的“代碼”“拆分”“設(shè)計(jì)”“實(shí)時(shí)視圖”按鈕和一些常用功能按鈕。

4.認(rèn)識(shí)Dreamweaver的【標(biāo)準(zhǔn)】工具欄

【標(biāo)準(zhǔn)】工具欄中包含網(wǎng)頁(yè)文檔的基本操作按鈕，如新建、打開、保存、剪切、復(fù)制、粘貼等按鈕。

5.認(rèn)識(shí)Dreamweaver的“文檔”窗口

【文檔】窗口也稱為文檔編輯區(qū)，該窗口所顯示的內(nèi)容可以是代碼、網(wǎng)頁(yè)，或者兩者的共同體。用戶可以在文檔工具欄中單擊【代碼】【拆分】或者【設(shè)計(jì)】按鈕，切換窗口視圖。

6.認(rèn)識(shí)Dreamweaver的“插入”面板

利用“插入”工具欄可以快速插入多種網(wǎng)頁(yè)元素，例如圖像、動(dòng)畫、表格、DIV 標(biāo)簽、超級(jí)鏈接、表單和表單控件等。

7.認(rèn)識(shí)Dreamweaver的【屬性】面板

【屬性】面板用于查看和更改所選取的對(duì)象或文本的各種屬性，每個(gè)對(duì)象有不同的屬性。【屬性】面板比較靈活，它隨著選擇對(duì)象不同而改變，例如當(dāng)選擇一幅圖像，【屬性】面板上將出現(xiàn)該圖像的對(duì)應(yīng)屬性。如果選擇了表格則【屬性】面板會(huì)顯示對(duì)應(yīng)表格的相關(guān)屬性。

8.認(rèn)識(shí)Dreamweaver的面板組

Dreamweaver包括多個(gè)面板，這些面板都有不同的功能，將它們疊加在一起便形成了面板組。面板組主要包括【插入】面板、【CSS】面板、【AP元素】面板、【標(biāo)簽檢查器】面板、【文件】面板、【資源】面板和【代碼片斷】面板等。

9.認(rèn)識(shí)Dreamweaver的【文件】面板

網(wǎng)站是多個(gè)網(wǎng)頁(yè)、圖像、動(dòng)畫、程序等文件有機(jī)聯(lián)系的整體，要有效地管理這些文件及其聯(lián)系，需要有一個(gè)有效的工具，【文件】面板便是這樣的工具。

10.認(rèn)識(shí)Dreamweaver的標(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è)中對(duì)應(yīng)的內(nèi)容。

任務(wù)1.1.5 打開與保存網(wǎng)頁(yè)文檔index.html

微課視頻

打開與保存網(wǎng)頁(yè)文檔index

〖任務(wù)描述〗

（1）啟動(dòng)Dreamweaver，打開一個(gè)網(wǎng)頁(yè)文檔index.html。

（2）瀏覽網(wǎng)頁(yè)index.html。

（3）保存對(duì)網(wǎng)頁(yè)index.html的修改。

（4）關(guān)閉網(wǎng)頁(yè)index.html。

〖任務(wù)實(shí)施〗

1.打開網(wǎng)頁(yè)文檔index.html

2.瀏覽網(wǎng)頁(yè)

在Dreamweaver主窗口中瀏覽網(wǎng)頁(yè)的方法有以下3種。

（1）按＜F12＞快捷鍵。

（2）選擇菜單【文件】→【在瀏覽器中預(yù)覽】→【IExplore】。

（3）單擊【文檔】工具欄中【在瀏覽器中預(yù)覽/調(diào)試】按鈕，在彈出的快捷菜單中單擊【預(yù)覽在IExplore】按鈕。

3.保存網(wǎng)頁(yè)文檔

保存網(wǎng)頁(yè)文檔的方法主要有以下3種。

（1）單擊【標(biāo)準(zhǔn)】工具欄中的【保存】按鈕或者【全部保存】按鈕。

（2）在Dreamweaver主窗口的選擇命令【文件】→【保存】或者【保存全部】。

（3）按組合鍵＜Ctrl+S＞。

4.關(guān)閉網(wǎng)頁(yè)文檔

在 Dreamweaver 主窗口中，如果需要關(guān)閉打開的網(wǎng)頁(yè)文檔，選擇命令【文件】→【關(guān)閉】或者【全部關(guān)閉】即可。如果頁(yè)面尚未保存，則會(huì)彈出一個(gè)對(duì)話框，確認(rèn)是否保存。

任務(wù)1.1.6 在瀏覽器中瀏覽網(wǎng)頁(yè)index.html

微課視頻

在瀏覽器中瀏覽網(wǎng)頁(yè)index

〖任務(wù)描述〗

（1）認(rèn)識(shí)瀏覽器窗口的基本組成。

（2）認(rèn)識(shí)網(wǎng)頁(yè)的基本組成元素。

（3）認(rèn)識(shí)網(wǎng)頁(yè)的布局結(jié)構(gòu)。

〖任務(wù)實(shí)施〗

1.認(rèn)識(shí)瀏覽器窗口的基本組成

瀏覽器窗口由網(wǎng)頁(yè)標(biāo)題、標(biāo)準(zhǔn)按鈕、地址欄、網(wǎng)頁(yè)和狀態(tài)欄等部分組成。

2.認(rèn)識(shí)網(wǎng)頁(yè)的基本組成元素

（1）文本。

文本是網(wǎng)頁(yè)傳遞信息的主要元素，不僅傳輸速度快，而且可以根據(jù)需要對(duì)其字體、大小、顏色、底紋、邊框等屬性進(jìn)行設(shè)置，設(shè)置得風(fēng)格獨(dú)特的網(wǎng)頁(yè)文本會(huì)給瀏覽者帶來(lái)賞心悅目的感受。

（2）圖像。

豐富多彩的圖像是美化網(wǎng)頁(yè)必不可少的元素，用于網(wǎng)頁(yè)上的圖像一般為JPG格式和GIF格式，即以.jpg和.gif為擴(kuò)展名的圖像文件。

（3）動(dòng)畫。

動(dòng)畫是網(wǎng)頁(yè)中最活躍的元素，創(chuàng)意出眾、制作精致的動(dòng)畫是吸引瀏覽者眼球有效方法之一，目前網(wǎng)頁(yè)中經(jīng)常使用SWF動(dòng)畫和GIF圖片。

（4）超級(jí)鏈接。

超級(jí)鏈接是Web網(wǎng)頁(yè)的主要特色，是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接。

（5）導(dǎo)航欄。

導(dǎo)航欄是一組超鏈接的集合，用來(lái)指引用戶跳轉(zhuǎn)到某一頁(yè)面或內(nèi)容的鏈接入口，可方便地瀏覽網(wǎng)頁(yè)。

（6）表單。

表單是用來(lái)接收用戶在瀏覽器端輸入的信息，然后將這些信息發(fā)送到服務(wù)器端，服務(wù)器的程序?qū)?shù)據(jù)進(jìn)行加工處理，這樣可以實(shí)現(xiàn)一些交互作用的網(wǎng)頁(yè)。

（7）網(wǎng)站的Logo。

Logo是網(wǎng)站的標(biāo)志、名片，例如搜狐網(wǎng)站的狐貍標(biāo)志。如同商標(biāo)一樣，Logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。

（8）視頻。

在網(wǎng)頁(yè)中插入視頻文件將會(huì)使網(wǎng)頁(yè)變得更加精彩而富有動(dòng)感。常用的視頻文件格式有FLV、RM、AVI等。

（9）其他元素。

網(wǎng)頁(yè)中除了上述這些最基本的構(gòu)成元素，還包括橫幅廣告、字幕、計(jì)數(shù)器、音頻等其他元素，它們不僅能點(diǎn)綴網(wǎng)頁(yè)，而且在網(wǎng)頁(yè)中起到十分重要的作用。

3.認(rèn)識(shí)網(wǎng)頁(yè)的布局結(jié)構(gòu)

網(wǎng)站的布局實(shí)質(zhì)上也就是網(wǎng)站的版式，通常有上下型、上中下型、左右型、左中右型等幾種，中部通常分為左右區(qū)塊、左中右區(qū)塊等多種布局。

目前，大部分網(wǎng)站一般使用表格和DIV+CSS兩種方式進(jìn)行布局。