【模仿訓練】

任務1.1 創(chuàng)建北京大學網(wǎng)站站點并瀏覽網(wǎng)頁

本單元“模仿訓練”的任務卡如表1.1所示。

本單元“模仿訓練”的任務跟蹤卡如表1.2所示。

任務1.1.1 分析北京大學站點的目錄結(jié)構(gòu)

微課視頻

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

〖任務描述〗

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

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

〖任務實施〗

如圖1-28所示。

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

微課視頻

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

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

〖任務描述〗

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

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

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

〖任務實施〗

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

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

微課視頻

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

〖任務描述〗

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

〖任務實施〗

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

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

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

任務1.1.4 認識Dreamweaver的工作界面

微課視頻

認識Dreamweaver的工作界面3

〖任務描述〗

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

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

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

〖任務實施〗

如圖1-33所示。

1.認識Dreamweaver 的標題欄

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

2.認識Dreamweaver的菜單欄

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

3.認識Dreamweaver的【文檔】工具欄

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

4.認識Dreamweaver的【標準】工具欄

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

5.認識Dreamweaver的“文檔”窗口

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

6.認識Dreamweaver的“插入”面板

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

7.認識Dreamweaver的【屬性】面板

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

8.認識Dreamweaver的面板組

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

9.認識Dreamweaver的【文件】面板

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

10.認識Dreamweaver的標簽選擇器

在文檔窗口底部的狀態(tài)欄中，顯示環(huán)繞當前選定內(nèi)容標簽的層次結(jié)構(gòu)，單擊該層次結(jié)構(gòu)中的任何標簽，可以選擇該標簽及網(wǎng)頁中對應的內(nèi)容。

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

微課視頻

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

〖任務描述〗

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

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

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

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

〖任務實施〗

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

2.瀏覽網(wǎng)頁

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

（1）按＜F12＞快捷鍵。

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

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

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

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

（1）單擊【標準】工具欄中的【保存】按鈕或者【全部保存】按鈕。

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

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

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

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

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

微課視頻

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

〖任務描述〗

（1）認識瀏覽器窗口的基本組成。

（2）認識網(wǎng)頁的基本組成元素。

（3）認識網(wǎng)頁的布局結(jié)構(gòu)。

〖任務實施〗

1.認識瀏覽器窗口的基本組成

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

2.認識網(wǎng)頁的基本組成元素

（1）文本。

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

（2）圖像。

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

（3）動畫。

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

（4）超級鏈接。

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

（5）導航欄。

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

（6）表單。

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

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

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

（8）視頻。

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

（9）其他元素。

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

3.認識網(wǎng)頁的布局結(jié)構(gòu)

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

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