項(xiàng)目一網(wǎng)站欣賞任務(wù)一初識(shí)網(wǎng)頁任務(wù)二DreamWeaverCS3軟件入門任務(wù)一初識(shí)網(wǎng)頁

一、網(wǎng)頁基本概念

一般在瀏覽器中輸入網(wǎng)址后，打開的文件就是網(wǎng)頁，如圖1-1-1所示。多個(gè)網(wǎng)頁組成一個(gè)網(wǎng)站。網(wǎng)頁文件是通過超文本標(biāo)記語言HTML表示出來的，因此也稱為HTML文件。圖1-1-1在網(wǎng)站中默認(rèn)打開的頁面稱為主頁，也叫首頁。主頁是一個(gè)網(wǎng)站中最重要的網(wǎng)頁，通常包含最重要的信息以及指向其他網(wǎng)頁的超鏈接，通過單擊主頁上的超鏈接，可以打開其他的網(wǎng)頁。主頁在一個(gè)網(wǎng)站中處于中心地位，所以常常用主頁代稱網(wǎng)站。例如個(gè)人網(wǎng)站也經(jīng)常被稱為個(gè)人主頁。

網(wǎng)頁中的基本元素包括：文本、圖像、超級(jí)鏈接、表格、表單、多媒體、網(wǎng)頁特效等。二、網(wǎng)頁設(shè)計(jì)工具

網(wǎng)頁的設(shè)計(jì)制作一般分為三個(gè)階段：一是設(shè)計(jì)，二是布局，三是動(dòng)畫的添加。針對(duì)不同的階段，一個(gè)網(wǎng)頁的制作需要不同的網(wǎng)頁制作工具。

從設(shè)計(jì)角度來說，常用的工具有PhotoShop、FireWorks等專業(yè)的圖形圖像設(shè)計(jì)軟件。從目前的網(wǎng)頁設(shè)計(jì)領(lǐng)域來說，用PhotoShop和FireWorks來設(shè)計(jì)界面的均有，不過PhotoShop在平面設(shè)計(jì)方面的功能更強(qiáng)，而FireWorks則在網(wǎng)絡(luò)功能方面更強(qiáng)，如按鈕、彈出菜單和優(yōu)化圖像等。從布局角度來說，常用的工具有DreamWeaver、FrontPage等專業(yè)網(wǎng)頁制作軟件。由于DreamWeaver布局的靈活性，其使用范圍更為普遍。

從動(dòng)畫制作來說，網(wǎng)頁動(dòng)畫一般都是二維動(dòng)畫，因此常用的動(dòng)畫程序以Flash最為典型。當(dāng)然，在動(dòng)畫制作工具方面，有很多小型動(dòng)畫工具，可以快速制作出網(wǎng)頁中常用的動(dòng)畫效果，如Swish就是比較受歡迎的一個(gè)。三、常用的建站技術(shù)

下面介紹幾種常用的建站技術(shù)。

(1)?HTML(HyperTextMarkupLanguage)即超文本標(biāo)記語言。它是構(gòu)成網(wǎng)頁的最基本元素，也是制作靜態(tài)網(wǎng)頁的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖片、表格以及如何建立文件之間的鏈接等，HTML文檔的結(jié)構(gòu)主要包括HEAD(頭部)、BODY(主體)兩大部分，HEAD描述瀏覽器所需的基本信息，BODY則是網(wǎng)頁要說明的具體內(nèi)容。

(2)?ASP(ActiveServerPages)技術(shù)是在HTML頁面中加入JavaScript或VBScript代碼，服務(wù)器在給瀏覽者反饋網(wǎng)頁之前先執(zhí)行這些代碼，完成如查詢數(shù)據(jù)庫的任務(wù)，然后再將結(jié)果以HTML的形式返回到瀏覽器。ASP是目前利用率比較高的一種動(dòng)態(tài)建站語言，它通常運(yùn)行在微軟的IIS服務(wù)器平臺(tái)上。

(3)?PHP(PersonalHomePages)是一種跨平臺(tái)服務(wù)器解析執(zhí)行的腳本語言。與ASP類似，PHP也是基于服務(wù)器端，用于產(chǎn)生動(dòng)態(tài)網(wǎng)頁并且可以嵌入HTML中的動(dòng)態(tài)建站語言，可以運(yùn)行在UNIX/Linux和Windows等系統(tǒng)下。

(4)?JSP(JavaServerPages)是一種動(dòng)態(tài)建站技術(shù)，通過在傳統(tǒng)的HTML網(wǎng)頁中加入Java代碼和JSP標(biāo)記來生成JSP網(wǎng)頁文件。?它與ASP最大的不同就是跨平臺(tái)可移植性，利用Java語言的平臺(tái)無關(guān)性可以運(yùn)行在常見的幾乎所有操作系統(tǒng)上。四、網(wǎng)站制作流程

制作網(wǎng)站時(shí)，通常按照初期規(guī)劃、中期制作和后期維護(hù)三個(gè)階段進(jìn)行，如圖1-1-2所示。圖1-1-2

1．初期規(guī)劃

建立網(wǎng)站之前，要有明確的目的，即確定主題。在確定主題時(shí)一定要獨(dú)具創(chuàng)意，并遵循以下原則：

◆主題鮮明、短小精悍。網(wǎng)站必須有一個(gè)明確的主題，在主題范圍內(nèi)做到內(nèi)容大而全、精而深。

◆體現(xiàn)個(gè)性、展現(xiàn)特色。主題具有個(gè)性和特色的網(wǎng)站才會(huì)吸引人的注意力。

確定好主題后，就需要圍繞網(wǎng)站主題搜集大量的材料，搜集的材料越多，網(wǎng)站制作越容易，也更容易使網(wǎng)站內(nèi)容充實(shí)。在搜集材料時(shí)，還要注意，不要全是別人的東西，應(yīng)該多添加一些具有自己特色的東西，如自己寫的一些文章、創(chuàng)作的動(dòng)畫或圖像等。在規(guī)劃網(wǎng)站時(shí)，需要考慮到欄目設(shè)置、目錄結(jié)構(gòu)和站點(diǎn)風(fēng)格等。只有將這些內(nèi)容都考慮到位，制作的網(wǎng)頁才有個(gè)性、有特色和有吸引力，其中：

◆欄目設(shè)置：在不是太多的欄目中要突出主題，使瀏覽者能更快了解到站點(diǎn)所要傳達(dá)的信息內(nèi)容，還需要設(shè)計(jì)一個(gè)能夠讓瀏覽者方便地找到網(wǎng)站中最新內(nèi)容的欄目。

◆目錄結(jié)構(gòu)：在設(shè)計(jì)站點(diǎn)的目錄結(jié)構(gòu)時(shí)，要注意按不同的欄目建立不同的子目錄，而在不同的子目錄中最好建立圖像文件目錄，以免出現(xiàn)混亂，但是目錄層次盡量不要太深，而且不要使用中文作為目錄結(jié)構(gòu)?！粽军c(diǎn)風(fēng)格：在站點(diǎn)風(fēng)格上既要考慮顏色搭配，還要考慮版面布局。在顏色搭配上既要充分考慮網(wǎng)站主題及表現(xiàn)的內(nèi)容，還要考慮瀏覽者的心情、年齡結(jié)構(gòu)，總之要給人以美的感受。在版面布局上，要合理運(yùn)用控件，讓網(wǎng)頁井井有條。在布局時(shí)，一般要將網(wǎng)站標(biāo)志、網(wǎng)站導(dǎo)航等重要板塊放在最顯眼、最突出的位置，然后再排放次要模塊。還要注意子頁面與首頁之間的風(fēng)格要保持一致。

2．中期制作

開始制作網(wǎng)站時(shí)應(yīng)參照如下步驟實(shí)施：

◆首先創(chuàng)建一個(gè)本地站點(diǎn)，用于保存網(wǎng)頁及網(wǎng)站中用到的所有文件。

◆按照規(guī)劃材料在站點(diǎn)根目錄下創(chuàng)建相關(guān)子目錄，使站點(diǎn)結(jié)構(gòu)清晰，不至于出現(xiàn)混亂。

◆向站點(diǎn)各級(jí)目錄中添加所需要的空網(wǎng)頁，以便建立站點(diǎn)結(jié)構(gòu)圖?！粼O(shè)計(jì)網(wǎng)頁尺寸。為了讓各種顯示器都能正常瀏覽網(wǎng)頁，?頁面一般以800×600?px分辨率的顯示器為準(zhǔn)，但隨著經(jīng)濟(jì)的發(fā)展，現(xiàn)在越來越多的電腦用戶使用分辨率為1024×

768px或更大的顯示器，因此設(shè)計(jì)的頁面應(yīng)該更多考慮以1024×768px的顯示器為標(biāo)準(zhǔn)，頁面尺寸應(yīng)以800～1000?px的寬度為宜，高度原則上不超過3屏，但也有特例，例如搜狐網(wǎng)站主頁有五屏之多，這就應(yīng)該具體情況具體分析了。

◆設(shè)置網(wǎng)頁屬性，包括頁面標(biāo)題、文本大小、文本顏色、鏈接顏色、鏈接樣式、邊距等。

◆對(duì)頁面進(jìn)行布局，然后插入內(nèi)容。

3．后期維護(hù)

網(wǎng)站上傳到互聯(lián)網(wǎng)后，后期維護(hù)很重要。后期維護(hù)主要包括網(wǎng)站維護(hù)和網(wǎng)站推廣兩部分工作。網(wǎng)站維護(hù)主要針對(duì)網(wǎng)站內(nèi)容的維護(hù)，包括網(wǎng)站文件的定期備份、網(wǎng)站內(nèi)容的及時(shí)更新、網(wǎng)站功能的調(diào)整等。網(wǎng)站推廣的目的是為了讓更多的人知道你的網(wǎng)站，推廣的主要方法有搜索引擎推廣法、電子郵件推廣法、信息發(fā)布推廣法、快捷網(wǎng)址推廣法、論壇推廣法等。實(shí)施步驟

網(wǎng)站按照主體性質(zhì)不同可分為政府網(wǎng)站、企業(yè)網(wǎng)站、電子商務(wù)網(wǎng)站、教育科研機(jī)構(gòu)網(wǎng)站、個(gè)人網(wǎng)站、其他非盈利機(jī)構(gòu)網(wǎng)站等。

1．政府門戶網(wǎng)站

在瀏覽器的地址欄輸入網(wǎng)址，即可打開該網(wǎng)站的主頁，如圖1-1-3所示。該主頁在內(nèi)容安排上體現(xiàn)了實(shí)用、內(nèi)容豐富、重點(diǎn)突出的特征，在版面設(shè)計(jì)上，采用縱向分欄的方式，在版面編排上，圖片和文字嚴(yán)格按照比例進(jìn)行編排，給人以嚴(yán)謹(jǐn)、和諧、理性的感覺。圖1-1-3

2．企業(yè)網(wǎng)站

在瀏覽器的地址欄輸入網(wǎng)址，打開該網(wǎng)站的主頁，如圖1-1-4所示。該主頁包含的網(wǎng)頁元素有：圖像、文本、動(dòng)畫、網(wǎng)站標(biāo)志、表單、超級(jí)鏈接等。整個(gè)版面分為上下兩部分，上半部分放置多媒體動(dòng)畫，下半部分放置靜止的圖像和文字。這種版式中，動(dòng)畫部分顯得感性而有活力，而文字部分則顯得理性而靜止。圖1-1-4

3．電子商務(wù)網(wǎng)站

在瀏覽器的地址欄輸入網(wǎng)址，打開該網(wǎng)站的主頁，如圖1-1-5所示。該網(wǎng)站的特點(diǎn)是：結(jié)構(gòu)清晰并且便于使用，使用超文本鏈接或圖片鏈接，使人能夠在網(wǎng)站上自由前進(jìn)或后退，并且能夠通過網(wǎng)頁表單實(shí)現(xiàn)產(chǎn)品的快速搜索。圖1-1-5

4．教育機(jī)構(gòu)網(wǎng)站

在瀏覽器的地址欄輸入網(wǎng)址，打開該網(wǎng)站的主頁，如圖1-1-6所示。該主頁體現(xiàn)了簡潔、寧靜、樸素、重點(diǎn)突出的特征。圖1-1-6任務(wù)二DreamWeaverCS3軟件入門

相關(guān)知識(shí)

一、DreamWeaverCS3主界面

執(zhí)行【開始】→【所有程序】→【AdobeDreamWeaverCS3】命令，將啟動(dòng)DreamWeaverCS3窗口，啟動(dòng)后的界面如圖1-2-1所示。圖1-2-1二、管理網(wǎng)頁文檔

(一)新建網(wǎng)頁文件

新建網(wǎng)頁文件的操作步驟如下：

(1)執(zhí)行【文件】→【新建】菜單命令，打開如圖1-2-2所示的【新建文檔】對(duì)話框。新建文檔的方法有多種：如單擊開始頁【新建】項(xiàng)下的【HTML】選項(xiàng)；通過【文件】面板來創(chuàng)建；按Ctrl?+?N組合鍵來創(chuàng)鍵。

(2)設(shè)置網(wǎng)頁的默認(rèn)編碼。在圖1-2-2所示的對(duì)話框中選擇【首選參數(shù)】項(xiàng)，打開首選參數(shù)設(shè)置對(duì)話框，如圖1-2-3所示。單擊【默認(rèn)編碼】后的下拉列表，選擇網(wǎng)頁的編碼方式(通常設(shè)置為簡體中文GB2312)，然后單擊【確定】按鈕，設(shè)置完畢。操作技巧在首次使用DreamWeaverCS3創(chuàng)建網(wǎng)頁時(shí)，需要先設(shè)置【首選參數(shù)】，將編碼方式修改成網(wǎng)頁需要的編碼。設(shè)置網(wǎng)頁【默認(rèn)編碼】的方法有兩種：一是在新建文件的時(shí)候設(shè)置，如上面所述；另一種是執(zhí)行【編輯】→【首選參數(shù)】命令或執(zhí)行Ctrl?+?U組合鍵，打開【首選參數(shù)】對(duì)話框，單擊對(duì)話框左側(cè)的【新建文檔】，即可打開如圖1-2-3所示的對(duì)話框。首選參數(shù)的設(shè)置很重要，關(guān)于其他設(shè)置在后面還會(huì)有介紹。圖1-2-2圖1-2-3

(3)選擇所要?jiǎng)?chuàng)建的網(wǎng)頁類型。在圖1-2-2所示的對(duì)話框中選擇【空白頁】選項(xiàng)組中的【HTML】選項(xiàng)，然后單擊【創(chuàng)建】按鈕，在文檔窗口中會(huì)創(chuàng)建一個(gè)以Untitled-1為文件名的新文件，如圖1-2-4所示。圖1-2-4圖1-2-5

(二)保存網(wǎng)頁文件

若要保存網(wǎng)頁文件，可通過執(zhí)行【文件】→【保存】命令，或者按Ctrl?+?S組合鍵的方法來實(shí)現(xiàn)。文件首次保存時(shí)會(huì)彈出選擇保存路徑的對(duì)話框，如圖1-2-6所示。如果文件已經(jīng)保存過，再次執(zhí)行保存時(shí)，文件將自動(dòng)保存到曾保存的位置。圖1-2-6

(三)打開網(wǎng)頁文件

打開網(wǎng)頁文件的具體操作方法為：執(zhí)行【文件】→【打開】命令，彈出如圖1-2-7所示對(duì)話框，在對(duì)話框中選擇Untitled-1.html文件，然后單擊【打開】按鈕。圖1-2-7

(四)預(yù)覽網(wǎng)頁文件

預(yù)覽網(wǎng)頁文件的具體操作方法為：執(zhí)行【文件】→【在瀏覽器中預(yù)覽】→【IExplore】命令，或通過單擊【工具欄】上的視圖按鈕，或者通過按F12快捷鍵來實(shí)現(xiàn)。實(shí)施步驟

一、新建【我的第一個(gè)網(wǎng)頁】

新建【我的第一個(gè)網(wǎng)頁】的操作步驟如下：

(1)執(zhí)行【開始】→【程序】→【AdobeDreamWeaverCS3】菜單命令，啟動(dòng)DreamWeaverCS3窗口。

(2)按Ctrl?+?N組合鍵，彈出【新建文檔】對(duì)話框，如圖1-2-2所示。選擇【空白頁】選項(xiàng)組中的【HTML】項(xiàng)，然后單擊【創(chuàng)建】按鈕。

(3)在打開的文件設(shè)計(jì)窗口中的頁面編輯區(qū)輸入文本【歡迎您訪問我的第一個(gè)網(wǎng)頁】，在網(wǎng)頁【標(biāo)題】文本框中輸入【++我的第一個(gè)網(wǎng)頁++】，如圖1-2-8所示。圖1-2-8二、保存【我的第一個(gè)網(wǎng)頁】

保存【我的第