dreamweaver網(wǎng)頁設(shè)計項目一

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

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

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

4、成千上萬個網(wǎng)頁。1主頁打開某個網(wǎng)站時顯示的第一個網(wǎng)頁被稱為網(wǎng)站的主頁（或首頁）。一般來說，主頁是一個網(wǎng)站中最重要的網(wǎng)頁，也是訪問最頻繁的網(wǎng)頁。它是一個網(wǎng)站的標(biāo)志，體現(xiàn)了整個網(wǎng)站的制作風(fēng)格和性質(zhì)，主頁上通常會有整個網(wǎng)站的導(dǎo)航目錄，所以主頁也是一個網(wǎng)站的起點(diǎn)或者說主目錄。網(wǎng)站的更新內(nèi)容一般都會在主頁上突出顯示。2網(wǎng)站互聯(lián)網(wǎng)起源于美國國防部高級研究計劃管理局建立的阿帕網(wǎng)。網(wǎng)站（Website）最初是指在因特網(wǎng)上，根據(jù)一定規(guī)則，使用HTML等語言制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。3網(wǎng)頁的構(gòu)成元素我們可以將網(wǎng)頁中的元素按功能分為站標(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)。它一般會出現(xiàn)在網(wǎng)站的每一個頁面上，是網(wǎng)站給人的第一印象。網(wǎng)站的標(biāo)志就如同商標(biāo)一樣，其作用是使人看見它就能夠聯(lián)想到網(wǎng)站和企業(yè)。因此，網(wǎng)站Logo通常采用企業(yè)的Logo。（2）網(wǎng)站導(dǎo)航導(dǎo)航欄是一組鏈接到網(wǎng)站內(nèi)主要頁面的超鏈接組合，一般由多個按鈕或者多個文本超鏈接組成，通過單擊這些超鏈接可以輕松打開網(wǎng)站中的各個頁面。常見的網(wǎng)站導(dǎo)航有橫排導(dǎo)航、豎排導(dǎo)航、下拉菜單式導(dǎo)航等。（3）廣告條廣告條又稱Banner，其功能是宣傳網(wǎng)站或?yàn)槠渌唐纷鰪V告。在制作Banner時，有以下幾點(diǎn)需要注意。Banner可以是靜態(tài)的，也可以是動態(tài)的。Banner的體

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

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

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

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

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

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

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

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