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

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

.1網(wǎng)頁制作常識

9

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

.1網(wǎng)頁制作常識

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)頁的設(shè)計并非簡單輸1.5.1FireworksCS4

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

隨著網(wǎng)站建設(shè)的分工越來越細(xì)，網(wǎng)站的制作逐漸發(fā)展成為一個由網(wǎng)頁界面設(shè)計、網(wǎng)頁制作、數(shù)據(jù)庫開發(fā)和動態(tài)應(yīng)用程序編寫等一系列工作集成的系統(tǒng)工程。同時，建設(shè)一個網(wǎng)站投入的各種前期和后期工作也越來越繁重。了解網(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)行之前，首先要對網(wǎng)站所采用的內(nèi)容、提供的服務(wù)等重要的信息進(jìn)行策劃，為網(wǎng)站中頁面設(shè)計提供必要的前期數(shù)據(jù)和參考，提高網(wǎng)站在建設(shè)完成后的用戶任何程度。策劃是一個重要的步驟，直接關(guān)系到網(wǎng)站的運(yùn)營成果。1.6.1網(wǎng)站策劃49在網(wǎng)站的建設(shè)工作進(jìn)1.6.2方案實(shí)施50

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

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

→

“添加或刪除程序”→

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

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

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

什么是“主目錄”？

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

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

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

Internet信息服務(wù)”→右擊“默認(rèn)網(wǎng)站”→單擊“屬性”→“默認(rèn)站點(diǎn)屬性”對話框?！x中“主目錄”選項(xiàng)卡……說明：IIS運(yùn)行環(huán)境 3）主目錄說明：IIS運(yùn)行環(huán)境 4）虛擬目錄什么是“虛擬目錄”？

虛擬目錄是物理上未包含在主目錄中的目錄，但瀏覽器卻認(rèn)為該目錄包含在主目錄中，一個網(wǎng)站中可以有若干個虛擬目錄。瀏覽虛擬目錄？

虛擬目錄具有別名，瀏覽器可以使用虛擬目錄的別名來訪問該目錄。說明：IIS運(yùn)行環(huán)境 4）虛擬目錄例如如果服務(wù)器域名：localhost主目錄：C:\InetPub\wwwroot虛擬目錄的物理位置：F:\XNML別名：XNML

瀏覽器將用URL地址：

http://localhost/XNML

來訪問“F:\XNML”中的文件。例如說明：IIS運(yùn)行環(huán)境 4）虛擬目錄使用虛擬目錄的優(yōu)勢？

可在一個站點(diǎn)下瀏覽多個文件夾中的文件。設(shè)置“虛擬目錄”

“Internet信息服務(wù)”對話框→右擊待創(chuàng)建虛擬目錄的Web站點(diǎn)→“新建”菜單→“虛擬目錄”命令→虛擬目錄創(chuàng)建向?qū)?/p>

……說明：IIS運(yùn)行環(huán)境 4）虛擬目錄說明：IIS運(yùn)行環(huán)境 5）默認(rèn)文檔什么是“默認(rèn)文檔”？

默認(rèn)文檔是指站點(diǎn)訪問者請求中沒有指定，但服務(wù)器自動執(zhí)行的Web文檔。例如，當(dāng)訪問者在瀏覽器中輸入“”時，盡管沒有輸入文件名，但也會打開Microsoft主頁“index.asp”，這是因?yàn)閃eb服務(wù)器對于所有不包含文件名的請求都用默認(rèn)文檔作響應(yīng)。最常用的默認(rèn)文檔名稱是index.htm、index.asp、default.htm和default.asp等。說明：IIS運(yùn)行環(huán)境 5）默認(rèn)文檔說明：IIS運(yùn)行環(huán)境 5）默認(rèn)文檔設(shè)置“默認(rèn)文檔”“Internet信息服務(wù)”對話框→右擊“默認(rèn)網(wǎng)站”→選擇“屬性”命令→“默認(rèn)網(wǎng)站屬性”對話框→選中“文檔”標(biāo)簽→選中“啟用默認(rèn)文檔”復(fù)選框→單擊“添加”按鈕→“添加默認(rèn)文檔”對話框→輸入要添加文件名→單擊“確定”按鈕

說明：IIS運(yùn)行環(huán)境 5）默認(rèn)文檔虛擬目錄與站點(diǎn)的區(qū)別？

虛擬目錄就是你在IE地址欄里面看到的路徑所指向的目錄。而你站點(diǎn)實(shí)際目錄就是你本地電腦的路徑目錄。訪問者通過虛擬目錄經(jīng)由服務(wù)器的轉(zhuǎn)換再找到你的實(shí)際目錄來進(jìn)行訪問。（為了安全）虛擬目錄與站點(diǎn)的區(qū)別？本章結(jié)束謝謝!!本章結(jié)束網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件網(wǎng)頁設(shè)計基礎(chǔ)課件本章學(xué)習(xí)要點(diǎn)：72了解網(wǎng)頁制作常識對網(wǎng)頁藝術(shù)設(shè)計有一定的見解熟悉網(wǎng)頁制作與網(wǎng)站開發(fā)的流程了解網(wǎng)頁設(shè)計的各種應(yīng)用技術(shù)以及相關(guān)軟件配置網(wǎng)站服務(wù)器管理Dreamweaver站點(diǎn)配置遠(yuǎn)端服務(wù)器本章學(xué)習(xí)要點(diǎn)：8了解網(wǎng)頁制作常識1

.1網(wǎng)頁制作常識

73

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

.1網(wǎng)頁制作常識

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)頁的設(shè)計并非簡單輸1.5.1FireworksCS4

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

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

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

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