1、項(xiàng)目1 學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)項(xiàng)目1 學(xué)習(xí)網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 【項(xiàng)目目標(biāo)】 熟悉網(wǎng)頁(yè)制作常用術(shù)語(yǔ)； 了解網(wǎng)頁(yè)的基本元素； 了解網(wǎng)頁(yè)制作工具； 了解網(wǎng)頁(yè)布局類型； 掌握網(wǎng)站建設(shè)流程。任務(wù)1 常用術(shù)語(yǔ)學(xué)習(xí)【任務(wù)說明】 小蕾帶著學(xué)習(xí)筆記和網(wǎng)頁(yè)制作教程回到家，立即開始閱讀網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)，希望全面了解書上的專業(yè)術(shù)語(yǔ)。閱讀資料時(shí)，她發(fā)現(xiàn)有的專業(yè)名詞以前也曾聽到過，但是不知道它們的具體含義更不知道和網(wǎng)頁(yè)制作的關(guān)系。 【任務(wù)分析】 幫助在學(xué)習(xí)任務(wù)中，需要熟悉一些網(wǎng)頁(yè)制作的常用術(shù)語(yǔ)，記住這些術(shù)語(yǔ)的全稱和中文意思會(huì)對(duì)后續(xù)工作有較大的幫助作用。具體學(xué)習(xí)過程中會(huì)涉及以下三類內(nèi)容： 網(wǎng)絡(luò)基礎(chǔ)知識(shí)術(shù)語(yǔ) 網(wǎng)頁(yè)結(jié)構(gòu)術(shù)語(yǔ) 網(wǎng)頁(yè)制

2、作術(shù)語(yǔ) 第一步：學(xué)習(xí)網(wǎng)絡(luò)基礎(chǔ)術(shù)語(yǔ)1.WWW WWW 是World Wide Web（全球信息網(wǎng)）的縮寫，中文名字為“萬(wàn)維網(wǎng)”。WWW是Internet上那些支持W3C協(xié)議和超文本傳輸協(xié)議HTTP（Hypertext Transfer Protocol）的客戶機(jī)與服務(wù)器的集合。2. Internet Internet，中文正式譯名為因特網(wǎng)，又叫做國(guó)際互聯(lián)網(wǎng)，是指全球范圍內(nèi)的計(jì)算機(jī)系統(tǒng)互聯(lián)網(wǎng)。它是世界上最大的計(jì)算機(jī)網(wǎng)絡(luò)，是一個(gè)將全球成千上萬(wàn)的計(jì)算機(jī)網(wǎng)絡(luò)連接起來(lái)而形成的全球性計(jì)算機(jī)網(wǎng)絡(luò)系統(tǒng)。它使各網(wǎng)絡(luò)之間可以交換信息和共享資源。3. Intranet Intranet又稱為企業(yè)內(nèi)部網(wǎng)，是Intern

3、et技術(shù)在企業(yè)內(nèi)部的應(yīng)用。它實(shí)際上是采用Internet技術(shù)建立的企業(yè)內(nèi)部網(wǎng)絡(luò)，它的核心技術(shù)基于Web。通常Intranet是利用防火墻把內(nèi)部網(wǎng)和Internet分開，當(dāng)然Intranet并非一定要和Internet連接在一起，它完全可以自成一體作為一個(gè)獨(dú)立的網(wǎng)絡(luò)。 4.網(wǎng)站 網(wǎng)站是多個(gè)相關(guān)網(wǎng)頁(yè)的集合，也稱為站點(diǎn)，英文名稱為Web Site。網(wǎng)站中的網(wǎng)頁(yè)之間有一定的鏈接關(guān)系，可以通過點(diǎn)擊被設(shè)置為超鏈接的文字或?qū)ο髞?lái)跳轉(zhuǎn)到相關(guān)的網(wǎng)頁(yè)。第二步：學(xué)習(xí)網(wǎng)頁(yè)結(jié)構(gòu)術(shù)語(yǔ) 1. HTML 帶.htm、.html后綴的網(wǎng)頁(yè)簡(jiǎn)稱為HTML文件，是最常見的網(wǎng)頁(yè)類型。HTML的中文名稱為超文本標(biāo)記語(yǔ)言，是Hypert

4、ext Markup Language的縮寫，該語(yǔ)言主要利用標(biāo)記來(lái)描述網(wǎng)頁(yè)字體、大小、顏色及頁(yè)面布局。在DreamWeaver中，可以通過代碼編輯視圖來(lái)編輯HTML代碼以生成對(duì)應(yīng)的網(wǎng)頁(yè)。 2.超文本 WWW上的每個(gè)網(wǎng)頁(yè)都對(duì)應(yīng)一個(gè)文件。我們?yōu)g覽一個(gè)頁(yè)面，要先把頁(yè)面所對(duì)應(yīng)的文件從提供這個(gè)文件的計(jì)算機(jī)里，通過Internet傳送到我們自己的計(jì)算機(jī)中，再由WWW瀏覽器翻譯成為我們見到的有文字、有圖形甚至有聲音的頁(yè)面。3. FTP FTP 是File Transfer Protocol（文件傳輸協(xié)議）的英文簡(jiǎn)稱，而中文簡(jiǎn)稱為“文件傳協(xié)議”。用于Internet上控制文件的雙向傳輸。同時(shí)，它也是一個(gè)應(yīng)用程

5、序。用戶可以通過它把自己的PC機(jī)與世界各地所有運(yùn)行FTP協(xié)議的服務(wù)器相連，訪問服務(wù)器上的大量程序和信息。4. ISP ISP（Internet Service Provider），互聯(lián)網(wǎng)服務(wù)提供商，即向廣大用戶綜合提供互聯(lián)網(wǎng)接入業(yè)務(wù)、信息業(yè)務(wù)和增值業(yè)務(wù)的電信運(yùn)營(yíng)商。ISP是經(jīng)國(guó)家主管部門批準(zhǔn)的正式運(yùn)營(yíng)企業(yè)，享受國(guó)家法律保護(hù)。 5. URL URL（Uniform Resource Locator）譯為“統(tǒng)一資源定位符”是網(wǎng)頁(yè)的地址。 URL由三部分組成：協(xié)議類型，主機(jī)名和路徑及文件名。6. IP 為了區(qū)別各個(gè)站點(diǎn)，必須為每個(gè)站點(diǎn)分配一個(gè)唯一的地址，這個(gè)地址即稱為IP地址，IP地址由4個(gè)從0到2

6、55之間的數(shù)字組成，格式為xxx.xxx.xxx.xxx,由網(wǎng)絡(luò)解析這個(gè)地址，以確立每個(gè)用戶的身份。7.域名 IP 地址是數(shù)字化的，比較難記，所以有人發(fā)明了一種新方法來(lái)代替這種數(shù)字，即“域名”地址，域名由幾個(gè)英文單詞組成，如，其中cn代表中國(guó)（China），com代表商業(yè)網(wǎng)，sina代表新浪，www代表互聯(lián)網(wǎng)（或稱萬(wàn)維網(wǎng)World Wide Web），整個(gè)域名合起來(lái)就是新浪網(wǎng)站的地址。 第三步：學(xué)習(xí)學(xué)習(xí)網(wǎng)頁(yè)制作術(shù)語(yǔ) 1. VBScript和JavaScript VBScript和 JavaScript都是一種編程語(yǔ)言，通常將他們嵌入html網(wǎng)頁(yè)文件中使用，所以稱為腳本語(yǔ)言，所編寫的程序稱為腳本

7、程序。通過在html網(wǎng)頁(yè)文件中嵌入VBScript和JavaScript腳本程序，可以擴(kuò)展網(wǎng)頁(yè)文件的功能，使網(wǎng)頁(yè)文件能夠?qū)τ脩舻牟僮髯龀鱿鄳?yīng)，使靜態(tài)的html網(wǎng)頁(yè)成為動(dòng)態(tài)網(wǎng)頁(yè)。 2.動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè) 這里說的動(dòng)態(tài)網(wǎng)頁(yè)，與網(wǎng)頁(yè)上的各種動(dòng)畫、滾動(dòng)字幕等視覺上的“動(dòng)態(tài)效果”沒有直接關(guān)系，動(dòng)態(tài)網(wǎng)頁(yè)也可以是純文字內(nèi)容的，也可以是包含各種動(dòng)畫的內(nèi)容，這些只是網(wǎng)頁(yè)具體內(nèi)容的表現(xiàn)形式，無(wú)論網(wǎng)頁(yè)是否具有動(dòng)態(tài)效果，采用動(dòng)態(tài)網(wǎng)站技術(shù)生成的網(wǎng)頁(yè)都稱為動(dòng)態(tài)網(wǎng)頁(yè)。任務(wù)2 網(wǎng)頁(yè)元素學(xué)習(xí) 【任務(wù)說明】 小蕾知道構(gòu)成網(wǎng)頁(yè)最基本的元素是文字和圖片，有的網(wǎng)頁(yè)中還可能包含動(dòng)畫、影片、聲音以及其他多媒體內(nèi)容。但是，網(wǎng)頁(yè)究竟可以包含哪

8、些元素呢，可能許多人都不太清楚，因此了解相關(guān)內(nèi)容是制作網(wǎng)頁(yè)前需要解決的基本問題。 【任務(wù)分析】 在本任務(wù)的學(xué)習(xí)中，小蕾詳細(xì)了解了網(wǎng)頁(yè)中可能出現(xiàn)的每個(gè)對(duì)象的名稱、用法和使用效果，具體學(xué)習(xí)內(nèi)容被分解成以下過程： 認(rèn)識(shí)網(wǎng)頁(yè)基本元素 認(rèn)識(shí)網(wǎng)頁(yè)多媒體元素 認(rèn)識(shí)網(wǎng)頁(yè)鏈接和導(dǎo)航 認(rèn)識(shí)表單 第一步：認(rèn)識(shí)網(wǎng)頁(yè)基本元素 1.文本 網(wǎng)頁(yè)中的信息以文本為主，因?yàn)槲谋究梢詼?zhǔn)確地表達(dá)信息的內(nèi)容和含義，一直以來(lái)就是人類最重要的信息載體與交流工具。在網(wǎng)頁(yè)中使用文本時(shí)，可以設(shè)置文本的字體類型、大小、顏色和對(duì)齊等屬性，以達(dá)到美化頁(yè)面的要求。 2.圖像 使用圖像不但可以提供信息和裝飾網(wǎng)頁(yè)，還可以直觀地展示作品的外觀。通常用于網(wǎng)頁(yè)的

9、圖像有三種格式：即GIF、JPG和PNG。目前，GIF和JPG文件格式的圖像支持情況最好，大多數(shù)瀏覽器支持這兩種圖像格式。 第二步：認(rèn)識(shí)網(wǎng)頁(yè)多媒體元素 1.動(dòng)畫 在網(wǎng)頁(yè)中使用動(dòng)畫元素可以使網(wǎng)頁(yè)更生動(dòng)。常見的網(wǎng)頁(yè)動(dòng)畫有兩種：一種是GIF動(dòng)畫，另一種是Flash動(dòng)畫。GIF動(dòng)畫在早期的網(wǎng)頁(yè)中應(yīng)用相當(dāng)普遍，雖然它只能表現(xiàn)出256種顏色，但制作動(dòng)畫卻非常容易，常見的制作軟件有Fireworks等。Flash動(dòng)畫具有極好的顯示連貫性，可以加入聲音，而且體積較小，比較適合應(yīng)用于網(wǎng)頁(yè)，常見的制作軟件有Flash等。 2.音頻和視頻 網(wǎng)頁(yè)中的視頻和音頻都是通過在網(wǎng)頁(yè)中插入音頻、視頻插件來(lái)實(shí)現(xiàn)的。最流行的音頻、

10、視頻格式有兩種：一種是AVI，另一種是RM，兩種格式都使用了壓縮算法和流媒體技術(shù)進(jìn)行傳送。 第三步：認(rèn)識(shí)網(wǎng)頁(yè)鏈接和導(dǎo)航 1.超鏈接 超鏈接是在Internet上各網(wǎng)頁(yè)之間進(jìn)行跳轉(zhuǎn)的媒介。可以將一個(gè)網(wǎng)頁(yè)中的文本、圖像或按鈕等對(duì)象設(shè)置為超鏈接，并指向另一個(gè)網(wǎng)頁(yè)或某個(gè)文檔、圖像、多媒體文件、可下載軟件以及文檔內(nèi)任意位置的任何對(duì)象（包括標(biāo)題、列表、表、層或框架中的文本或圖像）、互聯(lián)網(wǎng)上的其他站點(diǎn)。當(dāng)把鼠標(biāo)指針放在超鏈接上時(shí)，指針形狀會(huì)變成小手狀，通過單擊超鏈接即可跳轉(zhuǎn)到目標(biāo)對(duì)象。 2.導(dǎo)航欄 導(dǎo)航欄的作用是引導(dǎo)訪問者瀏覽站點(diǎn)。導(dǎo)航欄實(shí)際上就是一組超鏈接，其鏈接目標(biāo)是本站點(diǎn)中的各個(gè)網(wǎng)頁(yè)。導(dǎo)航欄既可以是文

11、本鏈接，也可以是一些圖形按鈕。 第四步：認(rèn)識(shí)表單 表單是訪問者與網(wǎng)站交互的橋梁。網(wǎng)頁(yè)中的表單通常用來(lái)接收用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到用戶設(shè)置的目標(biāo)端，以實(shí)現(xiàn)收集瀏覽者信息并與其進(jìn)行交互的目的。任務(wù)3 了解網(wǎng)頁(yè)制作工具 【任務(wù)說明】 經(jīng)過前期學(xué)習(xí)，小蕾對(duì)網(wǎng)頁(yè)術(shù)語(yǔ)和組成元素有了初步了解，但還是不明白怎樣制作網(wǎng)頁(yè)，所以，小蕾開始了網(wǎng)頁(yè)制作工具的學(xué)習(xí)。 【任務(wù)分析】 在本學(xué)習(xí)任務(wù)中，小蕾需要認(rèn)識(shí)常用的幾種網(wǎng)頁(yè)制作和頁(yè)面美化工具，具體內(nèi)容被分解成以下兩項(xiàng)： 了解網(wǎng)頁(yè)編輯工具 了解頁(yè)面設(shè)計(jì)及美化工具 第一步：了解網(wǎng)頁(yè)編輯工具 1. FrontPage FrontPage是由Microsoft

12、公司推出的Web網(wǎng)頁(yè)制作工具。FrontPage使網(wǎng)頁(yè)制作者能夠方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁(yè)，具有直觀的網(wǎng)頁(yè)制作和管理方法，簡(jiǎn)化了網(wǎng)頁(yè)制作工作。FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來(lái)了極大的方便，Microsoft公司將FrontPage封裝入Office之中，成為Office家族的一員，使之功能更為強(qiáng)大。 2. DreamWeaver DreamWeaver是由Macromedia公司推出的一款在網(wǎng)頁(yè)制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁(yè)，不僅適合于專業(yè)網(wǎng)頁(yè)編輯人員的需要，同

13、時(shí)也容易被業(yè)余網(wǎng)友們所掌握。 第二步：了解網(wǎng)頁(yè)設(shè)計(jì)及美化工具 1. PhotoShop PhotoShop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，PhotoShop都是首選的平面制作工具。 2. Fireworks Fireworks是由Macromedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因?yàn)镕ireworks是第一套專門為制作網(wǎng)頁(yè)圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁(yè)圖形設(shè)計(jì)及制作的解決方案。作為一個(gè)圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入

14、多種格式的圖像進(jìn)行處理。Fireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等。 3. Flash Flash是美國(guó)Macromedia公司開發(fā)的矢量圖形編輯和動(dòng)畫創(chuàng)作的專業(yè)軟件，它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂、聲音、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域，功能十分強(qiáng)大和獨(dú)特，已成為交互式矢量動(dòng)畫的標(biāo)準(zhǔn)，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁(yè)動(dòng)畫制作、教學(xué)動(dòng)畫演示、在線游戲等的制作中。 任務(wù)4 了解網(wǎng)頁(yè)布局類型 【任務(wù)說明】 小蕾通過觀察發(fā)現(xiàn)，許多網(wǎng)頁(yè)的頁(yè)面結(jié)構(gòu)是不一樣的，于是詢問小瑩怎么

15、對(duì)網(wǎng)頁(yè)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)，小瑩向小蕾介紹了常見的“國(guó)”字型布局、“匡”字型布局、“三”字型布局、“川”字型布局等。 【任務(wù)分析】 本次任務(wù)中，小蕾將學(xué)習(xí)常見的國(guó)字型、匡字型、三字型、川字型等幾種網(wǎng)頁(yè)布局類型。 第一步：國(guó)字型圖1-4 “國(guó)”字型抽象圖 圖1-5 “國(guó)”字型結(jié)構(gòu)布局的網(wǎng)站 第二步：匡字型 圖1-6 “匡”字型抽象圖 圖1-7 “匡”字型結(jié)構(gòu)布局的網(wǎng)站 第三步：三字型圖1-8 “三”字型抽象圖 圖1-9“三”字型結(jié)構(gòu)布局的網(wǎng)站 第三步：川字型圖1-10“川”字型抽象圖 圖1-11“川”字型結(jié)構(gòu)布局的網(wǎng)站 第五步：其他類型 1. Flash布局 這種布局是指整個(gè)網(wǎng)頁(yè)就是一個(gè)Flash動(dòng)畫

16、，它本身就是動(dòng)態(tài)的，畫面一般比較絢麗、有趣，是一種比較新潮的布局方式。2.標(biāo)題文本型布局 標(biāo)題文本型布局是指頁(yè)面內(nèi)容以文本為主3.框架型布局 采用框架布局結(jié)構(gòu)，常見的有左右框架型、上下框架型和綜合框架型。4.綜合型布局 即上述幾種類型的結(jié)合與變化。 任務(wù)5 了解網(wǎng)站建設(shè)流程 【任務(wù)說明】 小瑩告訴小蕾，創(chuàng)建一個(gè)網(wǎng)站并不復(fù)雜，但要?jiǎng)?chuàng)建一個(gè)優(yōu)秀的網(wǎng)站并非易事。創(chuàng)建網(wǎng)站前了解一下網(wǎng)站建設(shè)的基本流程十分必要，因?yàn)榫W(wǎng)站建設(shè)流程中既涉及網(wǎng)站目標(biāo)和方向的規(guī)劃，也涉及網(wǎng)站結(jié)構(gòu)的設(shè)想，弄清相關(guān)問題再開始工作，會(huì)事半功倍。 【任務(wù)分析】 本次任務(wù)中，小蕾要學(xué)習(xí)網(wǎng)站建設(shè)的整個(gè)流程，并為自己的網(wǎng)站做好整體規(guī)劃，具體學(xué)習(xí)過程被分解成以下內(nèi)容： 前期策劃網(wǎng)站 網(wǎng)頁(yè)制作和美化 網(wǎng)發(fā)布和推廣 后期維護(hù)網(wǎng)站第一步：前期策劃網(wǎng)站 1.網(wǎng)頁(yè)內(nèi)容策劃 2.網(wǎng)站結(jié)構(gòu)的設(shè)計(jì)規(guī)劃 3.設(shè)計(jì)網(wǎng)站的版面布局 第二步：網(wǎng)頁(yè)制作和美化 1.網(wǎng)頁(yè)制作 （1）靜態(tài)網(wǎng)頁(yè)的設(shè)計(jì)與制作 （2）為網(wǎng)頁(yè)添加動(dòng)態(tài)效果 2.網(wǎng)頁(yè)美化 （1）色彩的運(yùn)用 （2）確定網(wǎng)站的主題色第三步：網(wǎng)站發(fā)布