網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件本章學(xué)習(xí)要點(diǎn)：8了解網(wǎng)頁(yè)制作常識(shí)對(duì)網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)有一定的見(jiàn)解熟悉網(wǎng)頁(yè)制作與網(wǎng)站開(kāi)發(fā)的流程了解網(wǎng)頁(yè)設(shè)計(jì)的各種應(yīng)用技術(shù)以及相關(guān)軟件配置網(wǎng)站服務(wù)器管理Dreamweaver站點(diǎn)配置遠(yuǎn)端服務(wù)器本章學(xué)習(xí)要點(diǎn)：8了解網(wǎng)頁(yè)制作常識(shí)1

.1網(wǎng)頁(yè)制作常識(shí)

9

網(wǎng)頁(yè)的設(shè)計(jì)是一種綜合能力的體現(xiàn)，其考驗(yàn)到網(wǎng)頁(yè)設(shè)計(jì)師在多種領(lǐng)域中的能力，包括網(wǎng)絡(luò)技術(shù)、圖像設(shè)計(jì)藝術(shù)、網(wǎng)頁(yè)設(shè)計(jì)軟件操作、瀏覽器兼容性知識(shí)以及程序開(kāi)發(fā)能力等。在網(wǎng)頁(yè)設(shè)計(jì)之前，應(yīng)首先了解一些基礎(chǔ)知識(shí)。1

.1網(wǎng)頁(yè)制作常識(shí)

9網(wǎng)頁(yè)的設(shè)計(jì)是一1.1.1網(wǎng)絡(luò)技術(shù)基礎(chǔ)10

計(jì)算機(jī)網(wǎng)絡(luò)是由無(wú)數(shù)的計(jì)算機(jī)以及各種相關(guān)的數(shù)碼設(shè)備，根據(jù)有線或無(wú)線設(shè)備連接而成的網(wǎng)絡(luò)。網(wǎng)頁(yè)（Web頁(yè)）則是基于這種網(wǎng)絡(luò)的一種超文本（HyperText）的多媒體交互平臺(tái)。在設(shè)計(jì)網(wǎng)頁(yè)之前，有必要對(duì)網(wǎng)絡(luò)技術(shù)進(jìn)行一些簡(jiǎn)單的了解。1.1.1網(wǎng)絡(luò)技術(shù)基礎(chǔ)10計(jì)算機(jī)網(wǎng)絡(luò)是由111．互聯(lián)網(wǎng)協(xié)議

互聯(lián)網(wǎng)是由各種計(jì)算機(jī)和數(shù)碼設(shè)備連接而成的通信網(wǎng)絡(luò)，在各種設(shè)備進(jìn)行數(shù)據(jù)傳輸和交換時(shí)，必然要遵循統(tǒng)一的標(biāo)準(zhǔn)，以實(shí)現(xiàn)互聯(lián)互通。2．服務(wù)器與客戶機(jī)

服務(wù)器的作用是管理大量的資源，并為多種用戶提供相關(guān)的服務(wù)?？蛻魴C(jī)是相對(duì)于服務(wù)器的概念，即服務(wù)于本地計(jì)算機(jī)用戶，調(diào)用服務(wù)器服務(wù)的計(jì)算機(jī)。3．超鏈接與URL路徑URL（Uniform/UniversalResourceLocator，統(tǒng)一資源定位符）路徑是一種互聯(lián)網(wǎng)中標(biāo)準(zhǔn)的資源位置標(biāo)識(shí)方式。111．互聯(lián)網(wǎng)協(xié)議互聯(lián)網(wǎng)是由各種計(jì)算機(jī)和數(shù)碼/XNML/01/MYhomepage.htmlhttp://localhost/XNML/01/MYhomepage.htmllocalhost指你所在的計(jì)算機(jī)本身。在windows系統(tǒng)它成了的別名，一定程序上使用localhost比要快一些。/XNML/01/MYhom1.1.2Web瀏覽器13Web瀏覽器是一種用于瀏覽網(wǎng)頁(yè)的軟件，其可以從互聯(lián)網(wǎng)中獲得網(wǎng)頁(yè)文檔及相關(guān)的文檔，并將其展示給用戶。1．InternetExplorerInternetExplorer（簡(jiǎn)稱IE）是目前全世界最流行的網(wǎng)頁(yè)瀏覽器。2．MozzillaFirefoxMozzillaFirefox瀏覽器是由Mozzilla基金會(huì)與開(kāi)源社區(qū)共同開(kāi)發(fā)的一種免費(fèi)開(kāi)源的Web瀏覽器，是在全世界范圍內(nèi)市場(chǎng)占有率僅次于IE的Web瀏覽器。3．OperaOpera是挪威出品的一款老牌Web瀏覽器。1.1.2Web瀏覽器13Web瀏覽器是1.1.3IDC技術(shù)基礎(chǔ)IDC（InternetDataCenter，互聯(lián)網(wǎng)數(shù)據(jù)中心，又稱服務(wù)器農(nóng)場(chǎng)），是用戶存放計(jì)算機(jī)服務(wù)器設(shè)備，并為其提供各種電力保障、網(wǎng)絡(luò)通信、環(huán)境控制的設(shè)備或設(shè)備集群。通常意義上講，IDC技術(shù)涵蓋了網(wǎng)絡(luò)服務(wù)器運(yùn)營(yíng)的整個(gè)體系，是互聯(lián)網(wǎng)中Web或其他服務(wù)發(fā)布的基礎(chǔ)。典型的IDC體系包括四個(gè)主要部分。141．服務(wù)器系統(tǒng)2．電力保障系統(tǒng)3．?dāng)?shù)據(jù)傳輸保障系統(tǒng)4．環(huán)境控制系統(tǒng)1.1.3IDC技術(shù)基礎(chǔ)IDC（1.2網(wǎng)頁(yè)設(shè)計(jì)理論

網(wǎng)頁(yè)的設(shè)計(jì)是一種藝術(shù)性的創(chuàng)作，設(shè)計(jì)出的網(wǎng)頁(yè)需要符合絕大多數(shù)用戶的審美觀念，同時(shí)又需要有一定的獨(dú)創(chuàng)性內(nèi)容?？偟恼f(shuō)，設(shè)計(jì)網(wǎng)頁(yè)時(shí)最難掌握的兩個(gè)要點(diǎn)就是網(wǎng)頁(yè)的色彩搭配藝術(shù)和內(nèi)容布局藝術(shù)。151.2網(wǎng)頁(yè)設(shè)計(jì)理論

網(wǎng)頁(yè)的設(shè)計(jì)是1.2.1網(wǎng)頁(yè)配色藝術(shù)

網(wǎng)頁(yè)設(shè)計(jì)是一種特殊的視覺(jué)設(shè)計(jì)，是平面設(shè)計(jì)的一個(gè)分支，和其他平面設(shè)計(jì)類(lèi)似，對(duì)色彩都有較大的依賴性。色彩設(shè)計(jì)同時(shí)還是網(wǎng)站風(fēng)格設(shè)計(jì)的決定性因素之一，是網(wǎng)頁(yè)上“看的見(jiàn)”的視覺(jué)元素。161．三原色的概念2．色彩的屬性3．色彩模式4．216網(wǎng)頁(yè)安全色5．網(wǎng)頁(yè)配色方法1.2.1網(wǎng)頁(yè)配色藝術(shù)網(wǎng)頁(yè)設(shè)計(jì)是一種特殊顏色的使用在網(wǎng)頁(yè)制作中起著非常關(guān)鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過(guò)目不忘。但是對(duì)于剛開(kāi)始學(xué)習(xí)制作網(wǎng)頁(yè)的人來(lái)說(shuō)，往往不容易駕馭好網(wǎng)頁(yè)的顏色搭配.顏色的使用在網(wǎng)頁(yè)制作中起著非常關(guān)鍵的作用，有網(wǎng)頁(yè)顏色原理和象征意義我們所有網(wǎng)頁(yè)上顏色，在HTML下看到的是以顏色英文單詞或者十六進(jìn)制的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺(jué)和聯(lián)想。

紅色：熱情、奔放、喜悅、莊嚴(yán)黃色：高貴、富有、燦爛、活潑黑色：嚴(yán)肅、夜晚、沉著白色：純潔、簡(jiǎn)單、潔凈

藍(lán)色：天空、清爽、科技

綠色：植物、生命、生機(jī)灰色：莊重、沉穩(wěn)

紫色：浪漫、富貴棕色：大地、厚樸網(wǎng)頁(yè)顏色原理和象征意義我們所有網(wǎng)頁(yè)上顏色，在網(wǎng)頁(yè)顏色的使用風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)格，也有著自己不同的顏色。網(wǎng)站使用顏色大概分為幾種類(lèi)型：

1、公司色在現(xiàn)在企業(yè)中，公司的CI形象顯得尤其重要，每一個(gè)公司的CI設(shè)計(jì)必然要有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色，同時(shí)形象宣傳、海報(bào)、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國(guó)富投資公司的主色調(diào)是C：100%，M：60%，Y：0%，K：0%。這樣的顏色使用到網(wǎng)站上顯得色調(diào)自然、底蘊(yùn)深厚。網(wǎng)頁(yè)顏色的使用風(fēng)格不同的網(wǎng)站有著自己不同的風(fēng)網(wǎng)頁(yè)顏色的使用風(fēng)格2、風(fēng)格色許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍(lán)色的較多……這些都是在突出自己的風(fēng)格。

3、習(xí)慣色這些網(wǎng)站的顏色使用很大一部分是憑自己的個(gè)人愛(ài)好，以個(gè)人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時(shí)候就傾向于這種顏色。每一個(gè)人都有自己喜歡的顏色，因此這種類(lèi)型稱為習(xí)慣色。網(wǎng)頁(yè)顏色的使用風(fēng)格2、風(fēng)格色設(shè)計(jì)用色十例以下我將分別介紹十個(gè)配色較好的網(wǎng)站，大家可以學(xué)習(xí)和借鑒一下，培養(yǎng)對(duì)色彩的敏感以及獨(dú)到的審美能力。設(shè)計(jì)用色十例以下我將分別介紹十個(gè)配色較好的網(wǎng)站，大家可以學(xué)習(xí)1）這是個(gè)大型的NBA網(wǎng)站。通常我們經(jīng)常看到的此類(lèi)網(wǎng)站以白色為背景，但是這個(gè)網(wǎng)站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用RGB表示），文章標(biāo)題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這樣的配色可以顯示獨(dú)特的個(gè)性，又不失大型網(wǎng)站的風(fēng)采。如圖11）這是個(gè)大型的NBA網(wǎng)站。通常我們經(jīng)?？吹降拇祟?lèi)網(wǎng)站以白色網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件2）下面是一個(gè)娛樂(lè)類(lèi)的綜合性網(wǎng)站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套R(shí)GB（0，0，82），字體白色RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍(lán)為主色調(diào)，但是配以漂亮的圖片，給人的感覺(jué)是生機(jī)盎然，充滿了互動(dòng)色彩和青春氣息。如圖2。2）下面是一個(gè)娛樂(lè)類(lèi)的綜合性網(wǎng)站UGO，他的配色方案是背景色3）下面的這個(gè)網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做的好，連網(wǎng)頁(yè)制作也是世界一流。他的每一個(gè)網(wǎng)頁(yè)都是制作的樣板。從網(wǎng)頁(yè)我們就可以看出微軟公司的風(fēng)格、作風(fēng)，以及雄厚的實(shí)力。背景顏色使用藍(lán)色RGB為（0，151，254），菜單為黑色RGB（0，0，11），菜單為灰色RGB（200，200，200），字體為黑色RGB（0，0，0），如圖3。3）下面的這個(gè)網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做的4)現(xiàn)在介紹的網(wǎng)站相對(duì)簡(jiǎn)單，但是她的用色也別具匠心，現(xiàn)在我們來(lái)看一看，整體上使用的是白色RGB（255，255，255），輔助色為RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡(jiǎn)單，但顏色搭配非常的科學(xué)合理。如圖4

4)現(xiàn)在介紹的網(wǎng)站相對(duì)簡(jiǎn)單，但是她的用色也別具匠心，現(xiàn)在我們5）下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個(gè)性，現(xiàn)在我們就來(lái)看一看她的顏色搭配。主色調(diào)為黃色RGB為（255，199，48/#FFC730），輔助色調(diào)為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個(gè)性十足但又不單調(diào)。如圖55）下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個(gè)性，現(xiàn)在我們就來(lái)6）橘紅色如果運(yùn)用得當(dāng)?shù)脑捠且环N非常使用于網(wǎng)頁(yè)上的顏色。下面的這個(gè)網(wǎng)站就是一個(gè)非常著名的例子。他的主色調(diào)為RGB（255，151，0）輔助色調(diào)為RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的震懾力較強(qiáng)。如圖66）橘紅色如果運(yùn)用得當(dāng)?shù)脑捠且环N非常使用于網(wǎng)頁(yè)上的顏色。下面7）鮮紅色也是一種震撼感很強(qiáng)的顏色，如果搭配不當(dāng)，也可能使網(wǎng)站沒(méi)有風(fēng)格和特點(diǎn)。下面的這個(gè)網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來(lái)看看他的顏色搭配。他使用的主色調(diào)是RGB（200，9，0），配以抽象的圖形，文字使用的是RGB（213，229，167）顯得美觀而不失獨(dú)特，大氣而不逼人。如圖77）鮮紅色也是一種震撼感很強(qiáng)的顏色，如果搭配不當(dāng)，也可能使網(wǎng)8）下面介紹的這種色調(diào)是我們制作網(wǎng)頁(yè)的時(shí)候不會(huì)經(jīng)常用到的顏色，如果使用到你的網(wǎng)頁(yè)中，肯定會(huì)給人耳目一新的感覺(jué)。他的主色調(diào)為RGB（144，151，97）輔助色調(diào)為RGB（173，168，112）邊飾為黑色RGB（0，0，0）字體為黑色RGB（0，0，0）。這樣的搭配顯得風(fēng)格獨(dú)特，顏色和諧而莊重。如圖88）下面介紹的這種色調(diào)是我們制作網(wǎng)頁(yè)的時(shí)候不會(huì)經(jīng)常用到的顏色9）下面的設(shè)計(jì)更加的簡(jiǎn)單化，但是顏色的使用使網(wǎng)頁(yè)并不呆板，反而讓人感覺(jué)到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛(ài)中。他的主體是由兩種顏色構(gòu)成，分別是RGB（239，200，161）和RGB（201，254，200）。如此簡(jiǎn)單，但是卻栩栩如生，躍然網(wǎng)上。如圖99）下面的設(shè)計(jì)更加的簡(jiǎn)單化，但是顏色的使用使網(wǎng)頁(yè)并不呆板，反10）下面舉出這個(gè)例子是想證明一個(gè)道理——只要你有足夠的想象力，你就能夠設(shè)計(jì)出漂亮的網(wǎng)頁(yè)。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁(yè)的搭配不要超過(guò)四種主要顏色，否則就有雜亂之感。下面的這個(gè)網(wǎng)站遠(yuǎn)遠(yuǎn)的超過(guò)了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個(gè)例子的菜單就使用了7種顏色，但是我們看到的網(wǎng)頁(yè)并不雜亂，相反感覺(jué)作者很有創(chuàng)意。如圖1010）下面舉出這個(gè)例子是想證明一個(gè)道理——只要你有足夠的想象1.2.2網(wǎng)頁(yè)布局藝術(shù)

網(wǎng)頁(yè)元素是網(wǎng)頁(yè)最基本的組成部分，這些網(wǎng)頁(yè)元素如何在網(wǎng)頁(yè)中組合，將直接影響到網(wǎng)頁(yè)設(shè)計(jì)方案的優(yōu)劣。因此，掌握網(wǎng)頁(yè)布局藝術(shù)對(duì)于一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師而言是不可缺少的技能。網(wǎng)頁(yè)布局可以從兩方面理解，一種是結(jié)構(gòu)布局，另一種是藝術(shù)布局。331．結(jié)構(gòu)布局

網(wǎng)頁(yè)結(jié)構(gòu)布局是根據(jù)網(wǎng)頁(yè)中各種元素的位置結(jié)構(gòu)劃分來(lái)設(shè)計(jì)的，最常見(jiàn)到的結(jié)構(gòu)布局方式包括國(guó)字型、拐角型、上下框架和左右框架等類(lèi)型。1.2.2網(wǎng)頁(yè)布局藝術(shù)網(wǎng)頁(yè)元素是網(wǎng)頁(yè)最基342．藝術(shù)布局

在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，往往還廣泛地應(yīng)用了平面構(gòu)成的原理。通過(guò)平面構(gòu)成原理，可以使網(wǎng)頁(yè)更富有藝術(shù)氣息，更加吸引用戶的注意力。342．藝術(shù)布局1.3網(wǎng)頁(yè)標(biāo)準(zhǔn)化技術(shù)

網(wǎng)頁(yè)是一種承載多媒體數(shù)據(jù)信息的、跨平臺(tái)的媒體。在制作這種媒體時(shí)，必須依照統(tǒng)一的技術(shù)標(biāo)準(zhǔn)，遵循嚴(yán)格的技術(shù)規(guī)范。目前網(wǎng)頁(yè)的技術(shù)規(guī)范主要包括三種，即XHTML語(yǔ)言、CSS樣式表以及ECMAScript腳本語(yǔ)言。這三種技術(shù)規(guī)范分別實(shí)現(xiàn)了網(wǎng)頁(yè)的標(biāo)準(zhǔn)化結(jié)構(gòu)、標(biāo)準(zhǔn)化表現(xiàn)以及標(biāo)準(zhǔn)化的行為，形成了三位一體的網(wǎng)頁(yè)標(biāo)準(zhǔn)化體系。351.3網(wǎng)頁(yè)標(biāo)準(zhǔn)化技術(shù)

網(wǎng)頁(yè)是一種承載多1.3.1XHTML語(yǔ)言XHTML（eXtensibleHyperTextMarkupLanguage，可擴(kuò)展的超文本標(biāo)記語(yǔ)言）是一種基于XML（eXtensibleMarkupLanguage，可擴(kuò)展的標(biāo)記語(yǔ)言）與HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）的新型標(biāo)記語(yǔ)言和結(jié)構(gòu)語(yǔ)言。361．XHTML語(yǔ)言簡(jiǎn)介2．結(jié)構(gòu)與表現(xiàn)的分離3．XHTML文檔類(lèi)型1.3.1XHTML語(yǔ)言XHTML（eX1.3.2CSS樣式表

CSS（CascadingStyleSheets，層疊樣式表）是一種由W3C定義的數(shù)據(jù)表格式，其作用是為XML、HTML以及XHTML等結(jié)構(gòu)化的文檔添加樣式描述，從而實(shí)現(xiàn)對(duì)文檔中內(nèi)容的排版和美化。

在傳統(tǒng)的網(wǎng)頁(yè)文檔中，HTML語(yǔ)言以混合結(jié)構(gòu)與表現(xiàn)的方式顯示內(nèi)容，由于沒(méi)有統(tǒng)一的樣式管理，每個(gè)頁(yè)面即使是相同的標(biāo)記都必須一一進(jìn)行更改，從而大大增加了維護(hù)的時(shí)間、成本及效率。隨著網(wǎng)站內(nèi)頁(yè)面的不斷更新、擴(kuò)展，需要一種技術(shù)對(duì)頁(yè)面布局、字體、顏色、背景和其它圖文效果的實(shí)現(xiàn)提供更加精確的控制，這種技術(shù)就是CSS。371.3.2CSS樣式表CSS（Casca1.3.3ECMAScript腳本語(yǔ)言ECMAScript腳本語(yǔ)言是由NetScape（網(wǎng)景）公司和Sun（升陽(yáng)）公司開(kāi)發(fā)，最終由ECMA（EuropeanComputerManufacturersAssociation，歐洲計(jì)算機(jī)制造商協(xié)會(huì)）國(guó)際（一個(gè)國(guó)際性信息和電信標(biāo)準(zhǔn)組織）進(jìn)行標(biāo)準(zhǔn)化完善而成的、面向?qū)ο缶幊痰哪_本程序設(shè)計(jì)語(yǔ)言標(biāo)準(zhǔn)。ECMAScript并非具體的腳本編程語(yǔ)言，而是吸收多種腳本語(yǔ)言的特點(diǎn)和規(guī)范，制訂的一種標(biāo)準(zhǔn)。符合該標(biāo)準(zhǔn)的腳本編程語(yǔ)言都可被稱作ECMAScript。例如，由MozillaFireFox瀏覽器支持的JavaScript和微軟InternetExplorer支持的Jscript等，都是符合ECMAScript的子集、具體實(shí)現(xiàn)或擴(kuò)展。381.3.3ECMAScript腳本語(yǔ)言E1.4動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)的本質(zhì)，就是通過(guò)編程語(yǔ)言編寫(xiě)的程序與用戶進(jìn)行交互，并將交互所需的數(shù)據(jù)以及反饋的結(jié)果存儲(chǔ)到數(shù)據(jù)庫(kù)中。動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)與一般用于網(wǎng)頁(yè)特效的腳本語(yǔ)言最大的區(qū)別在于，腳本語(yǔ)言所反饋的信息是固定的，基于網(wǎng)頁(yè)本身的。而動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)反饋的信息則是從數(shù)據(jù)庫(kù)中調(diào)用的。391.4動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)技1.4.1ASP技術(shù)ASP（ActiveServerPages，動(dòng)態(tài)服務(wù)網(wǎng)頁(yè)）是微軟公司開(kāi)發(fā)的一種由VBScript腳本語(yǔ)言或JavaScript腳本語(yǔ)言調(diào)用FSO（FileSystemObject，文件系統(tǒng)對(duì)象）組件實(shí)現(xiàn)的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。ASP技術(shù)必須通過(guò)Windows的ODBC與后臺(tái)數(shù)據(jù)庫(kù)通信，因此只能應(yīng)用于Windows服務(wù)器中。ASP技術(shù)的解釋程序包括兩種，即Windows9X系統(tǒng)的PWS和WindowsNT系統(tǒng)的IIS。在Windows系統(tǒng)中，必須安裝其中一種解釋程序，才能使用ASP技術(shù)。401.4.1ASP技術(shù)ASP（Active1.4.2ASP.net技術(shù)ASP.NET是一種已經(jīng)編譯的、基于.NET的環(huán)境，可以使用任何與.NET兼容的語(yǔ)言（例如C#、VB.NET等）構(gòu)造Web應(yīng)用程序。ASP.NET可以很好地與HTML編輯器和VS.NET編程語(yǔ)言一起工作。ASP.NET也是微軟公司提供的開(kāi)發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。ASP.NET相對(duì)于ASP是一個(gè)革命性的創(chuàng)新。從運(yùn)行機(jī)制上來(lái)說(shuō)：ASP屬于解釋型的編程框架，它的核心是VBScript和JavaScript腳本語(yǔ)言，這兩種腳本語(yǔ)言決定了ASP的先天不足，這兩種腳本語(yǔ)言無(wú)法像傳統(tǒng)的編程語(yǔ)言那樣進(jìn)行底層操作，所以有時(shí)不得不借助于其他語(yǔ)言編寫(xiě)的組件。而ASP.NET是一種編譯型的編程框架，它的核心是.NETFramework。它可以運(yùn)用VS.NET編程序語(yǔ)言開(kāi)發(fā)，這樣它就不需要借助于其他的組件來(lái)完成底層操作。411.4.2ASP.net技術(shù)ASP.NE1.4.3PHP技術(shù)PHP（PersonalHomePages）是一種在服務(wù)器端運(yùn)行的，HTML文檔中嵌入的腳本語(yǔ)言。它借鑒C語(yǔ)言、Java語(yǔ)言和Perl語(yǔ)言的語(yǔ)法，同時(shí)具有自己獨(dú)特的語(yǔ)法，可以運(yùn)行于多種平臺(tái)。這種語(yǔ)言的目的是讓W(xué)EB開(kāi)發(fā)人員能夠快速高效地寫(xiě)出動(dòng)態(tài)生成的頁(yè)面。PHP是嵌入到HTML語(yǔ)言中的腳本語(yǔ)言，能夠執(zhí)行一定的功能。如果要將嵌入在HTML文檔中的PHP腳本程序與其他語(yǔ)言區(qū)分開(kāi)，如CSS，JavaScript等，就要把嵌入的PHP腳本語(yǔ)言放置到特定的并且成對(duì)的標(biāo)記內(nèi)。這樣當(dāng)解析一個(gè)PHP文件時(shí)，會(huì)尋找相應(yīng)的開(kāi)始和結(jié)束標(biāo)記，這些標(biāo)記告訴PHP解析器開(kāi)始和停止的位置。此種解析方式可以使PHP嵌入到各種不同的文檔中。在一對(duì)開(kāi)始和結(jié)束標(biāo)記之外的內(nèi)容會(huì)被PHP解析器忽略。421.4.3PHP技術(shù)PHP（Person1.4.4JSP技術(shù)JSP是一種專門(mén)用于在服務(wù)器端編譯、執(zhí)行的Web技術(shù)，實(shí)現(xiàn)普通靜態(tài)HTML和動(dòng)態(tài)頁(yè)面輸出混合編碼的技術(shù)，其腳本語(yǔ)言采用Java語(yǔ)言。借助內(nèi)容和外觀表現(xiàn)的分離，Web頁(yè)面制作的任務(wù)可以方便地劃分給頁(yè)面設(shè)計(jì)人員和程序員，并方便地通過(guò)JSP來(lái)合成。相比ASP和PHP，JSP具有支持線程、安全、高效等性能。431.4.4JSP技術(shù)JSP是一種專門(mén)用于1.5網(wǎng)頁(yè)設(shè)計(jì)軟件

網(wǎng)頁(yè)的設(shè)計(jì)并非簡(jiǎn)單輸入文本的過(guò)程，而是一個(gè)從處理圖像、制作動(dòng)畫(huà)到編寫(xiě)網(wǎng)頁(yè)代碼和腳本的完整過(guò)程。在這一過(guò)程的各種階段中，需要使用不同類(lèi)型的軟件。這些軟件可以極大地提高網(wǎng)頁(yè)設(shè)計(jì)的效率。本節(jié)將介紹網(wǎng)頁(yè)設(shè)計(jì)時(shí)使用的3種主要軟件，又被稱作網(wǎng)頁(yè)三劍客的Fireworks、Flash以及Dreamweaver。441.5網(wǎng)頁(yè)設(shè)計(jì)軟件

網(wǎng)頁(yè)的設(shè)計(jì)并非簡(jiǎn)單輸1.5.1FireworksCS4

在各種圖像處理軟件中，F(xiàn)ireworks是最貼近網(wǎng)頁(yè)設(shè)計(jì)需求的圖像處理軟件之一。目前Fireworks的最新版本為CS4（10.0.3）版本，在該版本中，采用了全新的界面，并增強(qiáng)了與Flash、Dreamweaver等軟件的集成性能，并提供了基于CSS的布局，允許用戶設(shè)計(jì)圖像并導(dǎo)出以XHTML文檔和CSS樣式結(jié)合的網(wǎng)頁(yè)，支持將圖像導(dǎo)出為PDF，并新增了動(dòng)態(tài)樣式等功能。451.5.1FireworksCS4在各1.5.2FlashCS4Flash是目前應(yīng)用最廣泛的網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)工具。其具備了從動(dòng)畫(huà)的繪制、動(dòng)作的實(shí)現(xiàn)、編程控制以及最后動(dòng)畫(huà)的輸出等一整套實(shí)用的功能，可以完全滿足用戶的動(dòng)畫(huà)創(chuàng)意、動(dòng)畫(huà)設(shè)計(jì)、動(dòng)畫(huà)制作以及動(dòng)畫(huà)發(fā)布所有的要求。使用FlashCS4，不僅可以快速地制作各種網(wǎng)頁(yè)動(dòng)畫(huà)，還可以編輯一些專業(yè)的動(dòng)漫作品，甚至開(kāi)發(fā)基于互聯(lián)網(wǎng)的跨平臺(tái)應(yīng)用程序。461.5.2FlashCS4Flash是1.5.3DreamweaverCS4Dreamweaver是目前最流行的網(wǎng)頁(yè)設(shè)計(jì)工具。其既具有所見(jiàn)即所得的網(wǎng)頁(yè)設(shè)計(jì)界面，同時(shí)也具有強(qiáng)大的代碼編寫(xiě)功能。無(wú)論初學(xué)者，還是自身的網(wǎng)頁(yè)程序員，都可以使用Dreamweaver制作出精美的網(wǎng)頁(yè)，甚至編寫(xiě)出各種復(fù)雜的網(wǎng)頁(yè)應(yīng)用程序。471.5.3DreamweaverCS41.6網(wǎng)站建設(shè)流程

隨著網(wǎng)站建設(shè)的分工越來(lái)越細(xì)，網(wǎng)站的制作逐漸發(fā)展成為一個(gè)由網(wǎng)頁(yè)界面設(shè)計(jì)、網(wǎng)頁(yè)制作、數(shù)據(jù)庫(kù)開(kāi)發(fā)和動(dòng)態(tài)應(yīng)用程序編寫(xiě)等一系列工作集成的系統(tǒng)工程。同時(shí)，建設(shè)一個(gè)網(wǎng)站投入的各種前期和后期工作也越來(lái)越繁重。了解網(wǎng)站建設(shè)的流程，可以有效地進(jìn)行網(wǎng)站建設(shè)的規(guī)劃，提高網(wǎng)站建設(shè)的效率。481.6網(wǎng)站建設(shè)流程

隨著網(wǎng)站建設(shè)的分工越1.6.1網(wǎng)站策劃49

在網(wǎng)站的建設(shè)工作進(jìn)行之前，首先要對(duì)網(wǎng)站所采用的內(nèi)容、提供的服務(wù)等重要的信息進(jìn)行策劃，為網(wǎng)站中頁(yè)面設(shè)計(jì)提供必要的前期數(shù)據(jù)和參考，提高網(wǎng)站在建設(shè)完成后的用戶任何程度。策劃是一個(gè)重要的步驟，直接關(guān)系到網(wǎng)站的運(yùn)營(yíng)成果。1.6.1網(wǎng)站策劃49在網(wǎng)站的建設(shè)工作進(jìn)1.6.2方案實(shí)施50

方案實(shí)施是網(wǎng)站具體建設(shè)的過(guò)程。在方案實(shí)施過(guò)程中，需要根據(jù)網(wǎng)站策劃步驟中中得到的各種數(shù)據(jù)，規(guī)劃網(wǎng)站的欄目和版塊，同時(shí)確定網(wǎng)站所使用的各種技術(shù)。最后，在根據(jù)這些技術(shù)和內(nèi)容，設(shè)計(jì)和制作網(wǎng)站。1.6.2方案實(shí)施50方案實(shí)施是網(wǎng)站具體1.6.3后期維護(hù)工作51

后期維護(hù)工作是在網(wǎng)站建設(shè)完成后必須進(jìn)行的工作。一個(gè)網(wǎng)站后期工作進(jìn)行的順利與否，直接影響到網(wǎng)站的點(diǎn)擊率、贏利以及網(wǎng)站的生存。后期維護(hù)工作包括網(wǎng)站的測(cè)試、發(fā)布、推廣以及維護(hù)等工作1.6.3后期維護(hù)工作51后期維護(hù)工作是說(shuō)明：IIS運(yùn)行環(huán)境 IIS是微軟公司的專業(yè)Web服務(wù)器。Windows2000捆綁了IIS5.0，WindowsXP捆綁了IIS5.1，而對(duì)于WindowsNTServer，則可以單獨(dú)下載。下面我們將介紹在WindowsXP環(huán)境下設(shè)置ASP運(yùn)行環(huán)境的方法和步驟。說(shuō)明：IIS運(yùn)行環(huán)境 IIS是微軟公司的專業(yè)Web服務(wù)器。W說(shuō)明：IIS運(yùn)行環(huán)境 1）安裝IIS5.1“控制面板”

→

“添加或刪除程序”→

“Windows組件向?qū)?”對(duì)話框

→選中“Inernet信息服務(wù)(IIS)”復(fù)選框……2）測(cè)試IIS5.1打開(kāi)瀏覽器，在地址欄中輸入http://localhost或http://ComputerName；如果IIS5.1安裝成功，就可以打開(kāi)IIS5.1的默認(rèn)站點(diǎn)中的默認(rèn)頁(yè)面“l(fā)ocalstart.asp”

http://localhost/localstart.asp說(shuō)明：IIS運(yùn)行環(huán)境 1）安裝IIS5.1http://網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課件說(shuō)明：IIS運(yùn)行環(huán)境 3）主目錄

什么是“主目錄”？

每個(gè)Web站點(diǎn)都有一個(gè)唯一的主目錄。主目錄是Web站點(diǎn)上發(fā)布文件的中心位置，也是訪問(wèn)者的起始點(diǎn)，主目錄及其子目錄中的所有文件將自動(dòng)對(duì)訪問(wèn)者可用。默認(rèn)Web站點(diǎn)的默認(rèn)主目錄是C:\InetPub\wwwroot。

“主目錄”與域名之間的關(guān)系

主目錄與網(wǎng)站的域名/服務(wù)器名存在一一對(duì)應(yīng)的映射關(guān)系。說(shuō)明：IIS運(yùn)行環(huán)境 3）主目錄說(shuō)明：IIS運(yùn)行環(huán)境 3）主目錄設(shè)置“主目錄”？“控制面板”→管理工具→

Internet信息服務(wù)”→右擊“默認(rèn)網(wǎng)站”→單擊“屬性”→“默認(rèn)站點(diǎn)屬性”對(duì)話框。→選中“主目錄”選項(xiàng)卡……說(shuō)明：IIS運(yùn)行環(huán)境 3）主