dreamweaver網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目一

1、中文版Dreamweaver CS6 網(wǎng)頁(yè)制作案例教程江蘇大學(xué)出版社項(xiàng)目一 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)任務(wù)一 了解網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)任務(wù)二 創(chuàng)建“石市科干院”站點(diǎn)及歡迎首頁(yè)任務(wù)一 了解網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)任務(wù)描述隨著網(wǎng)絡(luò)的飛速發(fā)展，各類公司、企事業(yè)單位都相繼建立了自己的網(wǎng)站。本任務(wù)主要了解網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)并欣賞優(yōu)秀網(wǎng)站，從而為制作優(yōu)秀網(wǎng)頁(yè)打下堅(jiān)實(shí)的基礎(chǔ)。一、網(wǎng)站開(kāi)發(fā)基礎(chǔ)1InternetInternet，中文譯名為因特網(wǎng)，又叫國(guó)際互聯(lián)網(wǎng)，是由廣域網(wǎng)、城域網(wǎng)、局域網(wǎng)及單機(jī)按照一定通訊協(xié)議組成的國(guó)際計(jì)算機(jī)網(wǎng)絡(luò)。只要你的計(jì)算機(jī)連接到它的任何一個(gè)節(jié)點(diǎn)上，就意味著你可以通過(guò)網(wǎng)絡(luò)與遠(yuǎn)在千里之外同樣連入Internet的朋

2、友相互發(fā)送郵件、共同完成一項(xiàng)工作或共同娛樂(lè)。2TCP/IP協(xié)議TCP/IP（Transmission Control Protocol/Internet Protocol的簡(jiǎn)寫(xiě)），中文譯名為傳輸控制協(xié)議/因特網(wǎng)互聯(lián)協(xié)議，又叫網(wǎng)絡(luò)通訊協(xié)議，是Internet最基本的協(xié)議，也是國(guó)際互聯(lián)網(wǎng)絡(luò)的基礎(chǔ)。3IP地址所謂IP地址，就是為連接在Internet上的主機(jī)分配的一個(gè)網(wǎng)絡(luò)地址。按照TCP/IP協(xié)議規(guī)定，IP地址用32位二進(jìn)制數(shù)（也就是4個(gè)字節(jié)）表示。4域名由于IP地址在使用過(guò)程中難于記憶和書(shū)寫(xiě)，一種與IP地址對(duì)應(yīng)的字符應(yīng)運(yùn)而生，這就是域名（Domain Name）。每一個(gè)網(wǎng)站都有自己的域名，并且域名

3、是獨(dú)一無(wú)二的。5網(wǎng)址網(wǎng)址又叫URL，英文全稱是“Uniform Resource Locator”，即統(tǒng)一資源定位符。它是網(wǎng)絡(luò)上通用的一種地址格式，用于標(biāo)識(shí)網(wǎng)頁(yè)文件在網(wǎng)絡(luò)中的位置。一個(gè)完整的網(wǎng)址由通信協(xié)議名稱、域名或IP地址、網(wǎng)頁(yè)在服務(wù)器中的路徑和文件名4部分組成。6瀏覽器瀏覽器是安裝在計(jì)算機(jī)上的一種軟件，通過(guò)它可以方便地看到Internet上提供的各種信息和服務(wù)資源，瀏覽器種類很多，有IE、360、騰訊、搜狗、火狐等，目前國(guó)內(nèi)常用的有IE和搜狗。二、認(rèn)識(shí)網(wǎng)站和網(wǎng)頁(yè)網(wǎng)頁(yè)就是我們上網(wǎng)時(shí)在瀏覽器中打開(kāi)的一個(gè)個(gè)畫(huà)面，網(wǎng)站則是一組相關(guān)網(wǎng)頁(yè)的集合。一個(gè)小型網(wǎng)站可能只包含幾個(gè)網(wǎng)頁(yè)，而一個(gè)大型網(wǎng)站則可能包含

4、成千上萬(wàn)個(gè)網(wǎng)頁(yè)。1主頁(yè)打開(kāi)某個(gè)網(wǎng)站時(shí)顯示的第一個(gè)網(wǎng)頁(yè)被稱為網(wǎng)站的主頁(yè)（或首頁(yè)）。一般來(lái)說(shuō)，主頁(yè)是一個(gè)網(wǎng)站中最重要的網(wǎng)頁(yè)，也是訪問(wèn)最頻繁的網(wǎng)頁(yè)。它是一個(gè)網(wǎng)站的標(biāo)志，體現(xiàn)了整個(gè)網(wǎng)站的制作風(fēng)格和性質(zhì)，主頁(yè)上通常會(huì)有整個(gè)網(wǎng)站的導(dǎo)航目錄，所以主頁(yè)也是一個(gè)網(wǎng)站的起點(diǎn)或者說(shuō)主目錄。網(wǎng)站的更新內(nèi)容一般都會(huì)在主頁(yè)上突出顯示。2網(wǎng)站互聯(lián)網(wǎng)起源于美國(guó)國(guó)防部高級(jí)研究計(jì)劃管理局建立的阿帕網(wǎng)。網(wǎng)站（Website）最初是指在因特網(wǎng)上，根據(jù)一定規(guī)則，使用HTML等語(yǔ)言制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。3網(wǎng)頁(yè)的構(gòu)成元素我們可以將網(wǎng)頁(yè)中的元素按功能分為站標(biāo)、導(dǎo)航條、廣告條、標(biāo)題欄和按鈕等。站標(biāo)導(dǎo)航條廣告條標(biāo)題欄（1）站標(biāo)

5、站標(biāo)也叫Logo，是網(wǎng)站的標(biāo)志，也是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。它一般會(huì)出現(xiàn)在網(wǎng)站的每一個(gè)頁(yè)面上，是網(wǎng)站給人的第一印象。網(wǎng)站的標(biāo)志就如同商標(biāo)一樣，其作用是使人看見(jiàn)它就能夠聯(lián)想到網(wǎng)站和企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。（2）網(wǎng)站導(dǎo)航導(dǎo)航欄是一組鏈接到網(wǎng)站內(nèi)主要頁(yè)面的超鏈接組合，一般由多個(gè)按鈕或者多個(gè)文本超鏈接組成，通過(guò)單擊這些超鏈接可以輕松打開(kāi)網(wǎng)站中的各個(gè)頁(yè)面。常見(jiàn)的網(wǎng)站導(dǎo)航有橫排導(dǎo)航、豎排導(dǎo)航、下拉菜單式導(dǎo)航等。（3）廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或?yàn)槠渌唐纷鰪V告。在制作Banner時(shí)，有以下幾點(diǎn)需要注意。Banner可以是靜態(tài)的，也可以是動(dòng)態(tài)的。Banner的體

6、積不宜過(guò)大，盡量使用GIF格式圖片與動(dòng)畫(huà)或Flash動(dòng)畫(huà)。Banner中的文字不要太多，只要達(dá)到一定的提醒效果就可以。Banner中圖片的顏色不要太多，尤其是GIF格式的圖片或動(dòng)畫(huà)。（4）標(biāo)題欄此處的標(biāo)題欄不是指整個(gè)網(wǎng)頁(yè)的標(biāo)題欄，而是網(wǎng)頁(yè)上各版塊的標(biāo)題欄，是各版塊內(nèi)容的概括。它使得網(wǎng)頁(yè)內(nèi)容的分類更清晰、明了，大大地方便了瀏覽者。4網(wǎng)頁(yè)的本質(zhì)一般情況下，網(wǎng)頁(yè)中除了包含網(wǎng)頁(yè)文件（擴(kuò)展名為.html，.asp等）外，還要用到圖像文件（擴(kuò)展名為.jpg，.png，.gif等）、Flash動(dòng)畫(huà)文件（擴(kuò)展名為.swf）、腳本文件（擴(kuò)展名為.js）、樣式文件（擴(kuò)展名為.css）以及視頻文件（擴(kuò)展名為.avi

7、，.flv等）等。在瀏覽器中選擇“文件”“另存為”菜單，將網(wǎng)頁(yè)保存到磁盤(pán)中，便可看到網(wǎng)頁(yè)的組成文件。三、網(wǎng)頁(yè)配色基礎(chǔ)知識(shí)1色彩簡(jiǎn)介人們?nèi)庋鬯芸吹降乃蓄伾际怯杉t、黃、藍(lán)三種基本原色構(gòu)成的。基本原色也就是我們通常所說(shuō)的三原色。原色，又稱為基色，是用于調(diào)配其他色彩的基本色；將原色以不同比例混合，可以產(chǎn)生其他新顏色。原色的色純度最高、最純凈、最鮮艷，可以調(diào)配出絕大多數(shù)色彩，而其他顏色不能調(diào)配出三原色。2色彩特征從色彩的功能上來(lái)看，它具有以下基本特征。（1）色彩的冷暖（2）色彩的輕重（3）色彩的軟硬（4）色彩的縮擴(kuò)3網(wǎng)頁(yè)顏色的搭配設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可根據(jù)以下原則確定網(wǎng)頁(yè)的背景色和主色調(diào)，并進(jìn)行顏色搭配。

8、（1）網(wǎng)頁(yè)背景顏色最好選擇白色或黑色。（2）可根據(jù)網(wǎng)站的性質(zhì)確定網(wǎng)頁(yè)的主色調(diào)，并且該主色調(diào)應(yīng)貫穿于網(wǎng)站中的全部網(wǎng)頁(yè)。（3）設(shè)計(jì)網(wǎng)頁(yè)時(shí)恰當(dāng)利用同類色、鄰近色和對(duì)比色，可增強(qiáng)網(wǎng)頁(yè)的層次感、豐富網(wǎng)頁(yè)的色彩或突出某些重要內(nèi)容（如導(dǎo)航條或版塊標(biāo)題）。4網(wǎng)站配色技巧無(wú)論是平面設(shè)計(jì)，還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。在選擇網(wǎng)頁(yè)色彩時(shí)，可以遵循以下原則。（1）首先選擇標(biāo)準(zhǔn)顏色。標(biāo)準(zhǔn)顏色是指能夠體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的顏色，主要用在網(wǎng)站標(biāo)志和主菜單上，給人一種整體統(tǒng)一的感覺(jué)。（2）其他顏色。標(biāo)準(zhǔn)顏色定下來(lái)后，其他顏色也可以使用，但只能作為點(diǎn)綴和襯托，絕不能喧賓奪主。5網(wǎng)站配色的幾點(diǎn)建議（1）盡量使用網(wǎng)頁(yè)安全

9、色。（2）網(wǎng)頁(yè)背景顏色與文字對(duì)比度要高。（3）盡量避免藍(lán)色與紅色，藍(lán)色與黃色，綠色/藍(lán)色與紅色這幾類顏色同時(shí)出現(xiàn)。（4）盡量少用細(xì)小的字體或藍(lán)色表格。（5）有些顏色本身是很枯燥的，比如灰色，但配合一些橙色或亮色就會(huì)產(chǎn)生完全不同的感覺(jué)，可以嘗試一下。（6）可以利用留白來(lái)平衡網(wǎng)站中的顏色刺激。（7）要始終保持整個(gè)網(wǎng)站顏色的統(tǒng)一性。四、網(wǎng)站開(kāi)發(fā)流程網(wǎng)站開(kāi)發(fā)流程是指從企業(yè)計(jì)劃建設(shè)網(wǎng)站到網(wǎng)站建設(shè)完成的一套規(guī)范化運(yùn)作過(guò)程。簡(jiǎn)單來(lái)說(shuō)，可以把網(wǎng)站開(kāi)發(fā)流程歸納為以下三個(gè)階段：（1）規(guī)劃和準(zhǔn)備階段；（2）網(wǎng)頁(yè)設(shè)計(jì)與制作階段；（3）網(wǎng)站的發(fā)布、推廣和維護(hù)階段。五、網(wǎng)站管理與網(wǎng)頁(yè)制作相關(guān)軟件當(dāng)今時(shí)代，網(wǎng)絡(luò)成了最重要的

10、媒體和資源寶庫(kù)。制作網(wǎng)頁(yè)可以選擇用HTML代碼，也可以選擇用軟件編輯，最好是兩者兼用。在制作網(wǎng)頁(yè)時(shí)，除Dreamweaver外還需要用到Photoshop，F(xiàn)lash，F(xiàn)ireworks等輔助軟件。任務(wù)實(shí)施欣賞優(yōu)秀網(wǎng)站欣賞幾個(gè)網(wǎng)站，并注意觀察其顏色搭配和布局方式。任務(wù)二 創(chuàng)建“石市科干院”站點(diǎn)及歡迎首頁(yè)任務(wù)描述首先熟悉一下Dreamweaver CS6的工作環(huán)境，掌握利用Dreamweaver CS6創(chuàng)建和管理網(wǎng)站站點(diǎn)，以及創(chuàng)建、保存、打開(kāi)和關(guān)閉網(wǎng)頁(yè)文檔的操作，然后創(chuàng)建“石市科干院”網(wǎng)站站點(diǎn)，并制作網(wǎng)站歡迎首頁(yè)。一、Dreamweaver CS6簡(jiǎn)介Dreamweaver CS6是一個(gè)可視化網(wǎng)

11、頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，即使沒(méi)有任何網(wǎng)頁(yè)制作基礎(chǔ)，也能很輕松地利用它制作出漂亮的網(wǎng)頁(yè)，只要從菜單、面板中選擇選項(xiàng)就可以了。這免除了學(xué)習(xí)HTML語(yǔ)言的煩惱，也節(jié)省了很多編寫(xiě)源代碼的時(shí)間。二、啟動(dòng)Dreamweaver CS6啟動(dòng)Dreamweaver CS6的操作很簡(jiǎn)單，和其他軟件基本一致。三、Dreamweaver CS6工作環(huán)境簡(jiǎn)介Dreamweaver CS6的工作界面由菜單欄、文檔標(biāo)簽欄、文檔工具欄、文檔編輯區(qū)、標(biāo)簽選擇器、“屬性”面板、“文件”面板組等組成。四、網(wǎng)站站點(diǎn)相關(guān)操作1創(chuàng)建本地站點(diǎn)站點(diǎn)一般包括本地站點(diǎn)（本地計(jì)算機(jī)上的一組文件）和遠(yuǎn)程站點(diǎn)（遠(yuǎn)程Web服務(wù)器上的一組文件）。本節(jié)以本

12、地站點(diǎn)為例說(shuō)明創(chuàng)建過(guò)程。2打開(kāi)站點(diǎn)打開(kāi)站點(diǎn)的方法有兩種。方法1：在菜單欄中選擇“站點(diǎn)/管理站點(diǎn)”菜單命令，彈出“管理站點(diǎn)”對(duì)話框，選擇要打開(kāi)的站點(diǎn)，單擊“完成”按鈕即可。方法2：在“文件”面板的“站點(diǎn)”下拉列表中選擇已創(chuàng)建的某個(gè)站點(diǎn)。3編輯站點(diǎn)編輯站點(diǎn)的方法也有兩種。方法1：選擇“站點(diǎn)/管理站點(diǎn)”菜單命令，在“管理站點(diǎn)”對(duì)話框中雙擊要編輯的站點(diǎn)。方法2：在“文件”面板中選擇站點(diǎn)列表中的“管理站點(diǎn)”選項(xiàng)，也可打開(kāi)“管理站點(diǎn)”對(duì)話框。4復(fù)制站點(diǎn)首先在“管理站點(diǎn)”對(duì)話框中選擇要復(fù)制的站點(diǎn)，單擊“復(fù)制當(dāng)前選定的站點(diǎn)”按鈕，在站點(diǎn)列表中即增加了一個(gè)新的站點(diǎn)。雙擊復(fù)制產(chǎn)生的站點(diǎn)，可以對(duì)其進(jìn)行編輯操作，如改

13、變站名、改變存儲(chǔ)位置等。5刪除站點(diǎn)在“管理站點(diǎn)”對(duì)話框中單擊選中要?jiǎng)h除的站點(diǎn)名，單擊“刪除當(dāng)前選定的站點(diǎn)”按鈕 ，在彈出的對(duì)話框中單擊“是”按鈕確認(rèn)刪除，單擊“否”按鈕則取消刪除。6導(dǎo)入和導(dǎo)出站點(diǎn)在Dreamweaver CS6中，可以將現(xiàn)有站點(diǎn)導(dǎo)出為一個(gè)站點(diǎn)文件，也可以將站點(diǎn)文件導(dǎo)入為一個(gè)站點(diǎn)。導(dǎo)入、導(dǎo)出的作用在于保存及恢復(fù)站點(diǎn)和本地文件的鏈接關(guān)系。五、網(wǎng)頁(yè)文檔基本操作1新建網(wǎng)頁(yè)文檔和文件夾“文件”面板是管理網(wǎng)站的重要工具，通過(guò)它可以直觀地看到整個(gè)網(wǎng)站的結(jié)構(gòu)，也可以快速創(chuàng)建網(wǎng)頁(yè)文檔和文件夾。2打開(kāi)網(wǎng)頁(yè)文檔在Dreamweaver中打開(kāi)網(wǎng)頁(yè)文檔的方法有多種，下面分別介紹。方法1：?jiǎn)?dòng)Dreamweaver后，移動(dòng)鼠標(biāo)至歡迎屏幕上的“打開(kāi)最近項(xiàng)目”文件列表，單擊“打開(kāi)”選項(xiàng)，然后在“打開(kāi)”對(duì)話框中選擇要打開(kāi)的文檔。方法2：移動(dòng)鼠標(biāo)至菜單欄中的“文件”命令上單擊，然后在彈出的下拉菜單中選擇“打開(kāi)”命令。方法3：打開(kāi)“文件”面板后，移動(dòng)鼠標(biāo)至面板中的文件列表上，雙擊要打開(kāi)的文檔。3保存網(wǎng)頁(yè)文檔制作網(wǎng)頁(yè)時(shí)，應(yīng)及時(shí)將其