【正文】 規(guī)劃，統(tǒng)一風(fēng)格，讓瀏覽者體會(huì)到設(shè)計(jì)者完整的設(shè)計(jì)思想。從某種意義上講，強(qiáng)調(diào)網(wǎng)頁(yè)結(jié)構(gòu)形式的視覺整體性必然會(huì)犧牲靈活的多變性，“物極必反”就是這個(gè)道理。因此，在強(qiáng)調(diào)網(wǎng)頁(yè)整體性設(shè)計(jì)的同時(shí)必須注意：過于強(qiáng)調(diào)整體性可能會(huì)使網(wǎng)頁(yè)呆板、沉悶，以致影響訪問者的情趣和繼續(xù)瀏覽的欲望?！罢w”是“多變”基礎(chǔ)上的整體。網(wǎng)頁(yè)不同于傳統(tǒng)媒體之處，就在于信息的動(dòng)態(tài)更新和即時(shí)交互性。即時(shí)的交互性是Web成為熱點(diǎn)的主要原因，也是網(wǎng)頁(yè)設(shè)計(jì)時(shí)必須考慮的問題。傳統(tǒng)媒體（如廣播、電視節(jié)目、報(bào)刊雜志等）都以線性方式提供信息，即按照信息提供者的感覺、體驗(yàn)和事先確定的格式來傳播。而在Web環(huán)境下，人們不再是一個(gè)傳統(tǒng)媒體方式的被動(dòng)接受者，而是以一個(gè)主動(dòng)參與者的身份加入到信息的加工處理和發(fā)布之中。這種持續(xù)的交互，使網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)不像印刷品設(shè)計(jì)那樣，發(fā)表之后就意味著設(shè)計(jì)的結(jié)束。網(wǎng)頁(yè)設(shè)計(jì)人員必須根據(jù)網(wǎng)站各個(gè)階段的經(jīng)營(yíng)目標(biāo)，配合網(wǎng)站不同時(shí)期的經(jīng)營(yíng)策略，以及用戶的反饋信息，經(jīng)常地對(duì)網(wǎng)頁(yè)進(jìn)行調(diào)整和修改。例如，為了保持瀏覽者對(duì)網(wǎng)站的新鮮感，很多大型網(wǎng)站總是定期或不定期的進(jìn)行改版，這就需要設(shè)計(jì)者在保持網(wǎng)站視覺形象一貫性的基礎(chǔ)上，不斷創(chuàng)作出新的網(wǎng)頁(yè)設(shè)計(jì)作品。多維性源于超級(jí)鏈接，主要體現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中對(duì)導(dǎo)航的設(shè)計(jì)上。由于超級(jí)鏈接的出現(xiàn)，網(wǎng)頁(yè)的組織結(jié)構(gòu)更加豐富，瀏覽者可以在各種主題之間自由跳轉(zhuǎn)，從而打破了以前人們接收信息的線性方式。例如，可將頁(yè)面的組織結(jié)構(gòu)分為序列結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)、復(fù)合結(jié)構(gòu)等。但頁(yè)面之間的關(guān)系過于復(fù)雜，不僅使瀏覽者檢索和查找信息增加了難度，也給設(shè)計(jì)者帶來了更大的困難。為了讓瀏覽者在網(wǎng)頁(yè)上迅速找到所需的信息，設(shè)計(jì)者必須考慮快捷而完善的導(dǎo)航設(shè)計(jì)。印刷品中導(dǎo)航問題不是那么突出，如果一個(gè)句子在頁(yè)尾突然終止，讀者會(huì)很自然地翻到下一頁(yè)查找剩余部分，為了幫助讀者找到他們要找的信息，出版者提供了目錄、索引或腳注。如果文章從期刊中的一頁(yè)跳到后面的非順序頁(yè)時(shí)，讀者會(huì)看到類似于“續(xù)68頁(yè)”這樣的指引語句。然而，作為一名網(wǎng)頁(yè)設(shè)計(jì)者，你以前所學(xué)的導(dǎo)航技術(shù)沒有一種完全適合于網(wǎng)頁(yè)導(dǎo)航。在替瀏覽者考慮得很周到的網(wǎng)頁(yè)中，導(dǎo)航提供了足夠的、不同角度的鏈接，幫助讀者在網(wǎng)頁(yè)的各個(gè)部分之間跳轉(zhuǎn)，并告知瀏覽者現(xiàn)在所在的位置、當(dāng)前頁(yè)面和其他頁(yè)面之間的關(guān)系等。而且，每頁(yè)都有一個(gè)返回主頁(yè)的按鈕或鏈接，如果頁(yè)面是按層次結(jié)構(gòu)組織的，通常還有一個(gè)返回上級(jí)頁(yè)面的鏈接。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來說，面對(duì)的不是按順序排列的印刷頁(yè)面，而是自由分散的網(wǎng)頁(yè)，因此必須考慮更多的問題。如：怎樣構(gòu)建合理的頁(yè)面組織結(jié)構(gòu)，讓瀏覽者對(duì)你提供的巨量信息感到條理？怎樣建立包括站點(diǎn)索引、幫助、頁(yè)面、查詢功能在內(nèi)的導(dǎo)航系統(tǒng)？這一切從哪兒開始，到哪兒結(jié)束？目前網(wǎng)頁(yè)中使用的多媒體視聽元素主要有文字、圖像、聲音、視頻等，隨著網(wǎng)絡(luò)帶寬的增加、芯片處理速度的提高以及跨平臺(tái)的多媒體文件格式的推廣，必將促使設(shè)計(jì)者綜合運(yùn)用多種媒體元素來設(shè)計(jì)網(wǎng)頁(yè)，以滿足和豐富瀏覽者對(duì)網(wǎng)絡(luò)信息傳輸質(zhì)量提出的更高要求。目前國(guó)內(nèi)網(wǎng)頁(yè)已經(jīng)出現(xiàn)了模擬三維的操作界面，在數(shù)據(jù)壓縮技術(shù)的改進(jìn)和流（Stream）技術(shù)的推動(dòng)下，Internet網(wǎng)上出現(xiàn)實(shí)時(shí)的音頻和視頻服務(wù)，典型的有在線音樂、在線廣播、網(wǎng)上電影、網(wǎng)上直播等。因此，多種媒體的綜合運(yùn)用是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的特點(diǎn)之一，是未來的發(fā)展方向。網(wǎng)頁(yè)版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)有著極大的差異：(1) 印刷品設(shè)計(jì)者可以指定使用的紙張和油墨，而網(wǎng)頁(yè)設(shè)計(jì)者卻不能要求瀏覽者使用什么樣的電腦或?yàn)g覽器；(2)網(wǎng)絡(luò)正處于不斷發(fā)展之中，不象印刷那樣基本具備了成熟的印刷標(biāo)準(zhǔn)；(3) 網(wǎng)頁(yè)設(shè)計(jì)過程中有關(guān)Web的每一件事都可能隨時(shí)發(fā)生變化。這一切說明，網(wǎng)絡(luò)應(yīng)用尚處在發(fā)展之中，關(guān)于網(wǎng)絡(luò)應(yīng)用也很難在各個(gè)方面都制訂出統(tǒng)一的標(biāo)準(zhǔn)，這必然導(dǎo)致網(wǎng)頁(yè)版式設(shè)計(jì)的不可控制性。其具體表現(xiàn)為：(1) 網(wǎng)頁(yè)頁(yè)面會(huì)根據(jù)當(dāng)前瀏覽器窗口大小自動(dòng)格式化輸出；(2) 網(wǎng)頁(yè)的瀏覽者可以控制網(wǎng)頁(yè)頁(yè)面在瀏覽器中的顯示方式；(3) 不同種類、版本的瀏覽器觀察同一個(gè)網(wǎng)頁(yè)頁(yè)面，效果會(huì)有所不同；(4) 用戶的瀏覽器工作環(huán)境不同，顯示效果也會(huì)有所不同。把所有這些問題歸結(jié)為一點(diǎn)，即網(wǎng)頁(yè)設(shè)計(jì)者無法控制頁(yè)面在用戶端的最終顯示效果，但這也正是網(wǎng)頁(yè)設(shè)計(jì)的吸引人之處。設(shè)計(jì)是主觀和客觀共同作用的結(jié)果，是在自由和不自由之間進(jìn)行的，設(shè)計(jì)者不能超越自身已有經(jīng)驗(yàn)和所處環(huán)境提供的客觀條件限制，優(yōu)秀設(shè)計(jì)者正是在掌握客觀規(guī)律基礎(chǔ)上得到了完全的自由，一種想象和創(chuàng)造的自由。網(wǎng)絡(luò)技術(shù)主要表現(xiàn)為客觀因素，藝術(shù)創(chuàng)意主要表現(xiàn)為主觀因素，網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該積極主動(dòng)地掌握現(xiàn)有的各種網(wǎng)絡(luò)技術(shù)規(guī)律，注重技術(shù)和藝術(shù)緊密結(jié)合，這樣才能窮盡技術(shù)之長(zhǎng)，實(shí)現(xiàn)藝術(shù)想象，滿足瀏覽者對(duì)網(wǎng)頁(yè)信息的高質(zhì)量需求。例如，瀏覽者欣賞一段音樂或電影，以前必須先將這段音樂或電影下載回本地機(jī)器，然后使用相應(yīng)的程序來播放，由于音頻或視頻文件都比較大，需要較長(zhǎng)的下載時(shí)間。流（Stream）技術(shù)出現(xiàn)以后，網(wǎng)頁(yè)設(shè)計(jì)者充分、巧妙地應(yīng)用此技術(shù)，讓瀏覽者在下載過程中就可以欣賞這段音樂或電影，實(shí)現(xiàn)了實(shí)時(shí)的網(wǎng)上視頻直播服務(wù)和在線欣賞音樂服務(wù)，無疑增強(qiáng)了頁(yè)面?zhèn)鞑バ畔⒌谋憩F(xiàn)力和感染力。網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合，使網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)由平面設(shè)計(jì)擴(kuò)展到立體設(shè)計(jì)，由純粹的視覺藝術(shù)擴(kuò)展到空間聽覺藝術(shù)，網(wǎng)頁(yè)效果不再近似于書籍或報(bào)刊雜志等印刷媒體，而更接近于電影或電視的觀賞效果。技術(shù)發(fā)展促進(jìn)了技術(shù)與藝術(shù)的緊密結(jié)合，把瀏覽者帶入一個(gè)真正現(xiàn)實(shí)中的虛擬世界。 現(xiàn)在的WEB頁(yè)面能把文本、圖像、聲音、動(dòng)畫、視像等多媒體信息集于一體，不但使信息的顯示更加生動(dòng)，而且使信息的瀏覽更為方便，同時(shí)動(dòng)態(tài)的網(wǎng)頁(yè)能實(shí)現(xiàn)網(wǎng)上交易平臺(tái)、把個(gè)人信息反饋方便了朋友與網(wǎng)友之間信息交流。所以我這次所設(shè)計(jì)的網(wǎng)站為個(gè)人博客網(wǎng)站，即能提高自己的網(wǎng)站設(shè)計(jì)的技術(shù)，豐富自己的文化知識(shí)，在建設(shè)網(wǎng)站的過程中能學(xué)到實(shí)際的網(wǎng)絡(luò)知識(shí)；其次，對(duì)與即將畢業(yè)的學(xué)生，個(gè)人網(wǎng)站是一個(gè)很好的網(wǎng)絡(luò)身份證明，可以讓別人對(duì)自己有更好的了解。最后，有這么一個(gè)自己設(shè)計(jì)和制作的網(wǎng)站，可以證明用有了一定的計(jì)算機(jī)水平，對(duì)于以后的應(yīng)聘中能有個(gè)很好的籌碼，本人比較喜歡中國(guó)的古典文化，所以我所設(shè)計(jì)的網(wǎng)站頁(yè)面設(shè)計(jì)中 有很濃厚的中國(guó)水墨風(fēng)格。每個(gè)標(biāo)題下都設(shè)有鏈接，方便訪問者訪問其他頁(yè)面首先建立自己的網(wǎng)站站點(diǎn)，在站點(diǎn)shixun中我建立了幾個(gè)文件夾用于保存網(wǎng)站設(shè)計(jì)所需要的各種素材和網(wǎng)頁(yè)存根s，其中文件夾包括images、music、css、data、video、zhaopian等，images文件夾保存著我的個(gè)人網(wǎng)站設(shè)計(jì)中的導(dǎo)航等圖片，music文件夾保存著我的網(wǎng)站中的背景音樂及音樂下載文件，css文件夾中保存的是我的網(wǎng)站中涉及到的頁(yè)面格式，data文件夾中保存的是我的動(dòng)態(tài)網(wǎng)頁(yè)中所需要的數(shù)據(jù)庫(kù)文件，video文件夾中保存的是我的首頁(yè)flash動(dòng)畫，zhaopian文件夾中所保存的是我的相冊(cè)中所有的相片。每個(gè)網(wǎng)頁(yè)的文件都是保存在shixun站點(diǎn)下的文件夾中，包括留言板、個(gè)人心情等動(dòng)態(tài)網(wǎng)頁(yè)，使得我的個(gè)人博客網(wǎng)站的增加了很多的多變性，游人可以隨時(shí)瀏覽我的個(gè)人心情和留言等，增加了訪問者與被訪問者的互動(dòng)性，可以使得被訪者和訪問者能夠更好的溝通共同進(jìn)步。1．網(wǎng)頁(yè)的布局其實(shí)就是一個(gè)網(wǎng)頁(yè)的排版過程，只有你布局布的合理讓人一看就能明白你要表達(dá)的意思，這才是最重要的。成功的網(wǎng)頁(yè)中，一個(gè)共同的特點(diǎn)就是網(wǎng)頁(yè)的整體架構(gòu)十分的清晰明了，便于用戶瀏覽。我的個(gè)人網(wǎng)頁(yè)布局采用的是“三”字型的設(shè)計(jì)，就是最上方是體現(xiàn)個(gè)人網(wǎng)站風(fēng)格圖片和導(dǎo)航圖片，中間是各個(gè)網(wǎng)頁(yè)的主題的主打內(nèi)容，最下方是網(wǎng)站的結(jié)尾宣示版權(quán)所有及郵箱聯(lián)系方式等?？傮w布局來看比較整齊簡(jiǎn)潔和美觀。2．導(dǎo)航欄能讓我們?cè)跒g覽時(shí)會(huì)很容易的到達(dá)不同的網(wǎng)頁(yè)，是網(wǎng)頁(yè)元素中非常重要的部分，所以導(dǎo)航欄一定要清晰醒目，一般來講，導(dǎo)航欄要在“第一屏”能顯示出來，但是有時(shí)第一屏可能會(huì)小于435px，基于這點(diǎn)考慮，那種橫向放置的導(dǎo)航欄要優(yōu)于縱向的導(dǎo)航欄。我的導(dǎo)航欄基于以上想法制作的是橫向的導(dǎo)航欄，借用PS軟件制作出類似毛筆筆畫的導(dǎo)航，貼切與網(wǎng)頁(yè)的整體風(fēng)格。保證了網(wǎng)站統(tǒng)一的中國(guó)水墨風(fēng)格。首先要明確網(wǎng)站的目標(biāo)，網(wǎng)站要有明確的主題，體現(xiàn)自己的風(fēng)格，特別是對(duì)于個(gè)人網(wǎng)站，不可能像大型網(wǎng)站那樣做得內(nèi)容全面，所以必須要找準(zhǔn)一個(gè)自己感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給瀏覽者留下深刻的印象。 至于網(wǎng)站的內(nèi)容則沒有限制自己喜歡什么就弄什么，但是要主題鮮明，切合自己網(wǎng)站的名字。一個(gè)網(wǎng)站設(shè)計(jì)得是否成功，很大程度上決定于設(shè)計(jì)前的規(guī)劃。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有吸引力。網(wǎng)站的整體色調(diào)以黑白色為主，然后點(diǎn)綴其他不同的圖片進(jìn)行搭配，突出主題，顏色沒有過多，過雜，以免給人一種雜亂的感覺。版面設(shè)計(jì)十分靈活，根據(jù)各部分的內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用的是用CSS設(shè)定的樣式，以保證隨時(shí)，準(zhǔn)確的調(diào)用。網(wǎng)站中共分為10個(gè)頁(yè)面，包括了開場(chǎng)的flash動(dòng)畫，和留言板等頁(yè)面，頁(yè)面的風(fēng)格統(tǒng)一是中國(guó)水墨風(fēng)格，每頁(yè)分三部分，最上方是風(fēng)格圖片和導(dǎo)航圖片，中間是個(gè)網(wǎng)頁(yè)的主題內(nèi)容，最下方是網(wǎng)站的結(jié)尾宣示版權(quán)所有及郵箱聯(lián)系方式等。總體布局來看比較整齊簡(jiǎn)潔和美觀。1．網(wǎng)頁(yè)的排版與制作使用的是Adobe Dreamweaver cs3，是一款在網(wǎng)頁(yè)設(shè)計(jì)與制作中比較簡(jiǎn)單好用的軟件.2．用Photoshop制作和處理網(wǎng)頁(yè)中相關(guān)的圖片。例如：我的logo用的是ps軟件中的圖層蒙版工具，把風(fēng)格相同的圖片疊加在一起使用圖層蒙版，運(yùn)用畫筆工具是最下圖層突顯出來，最后剪切完成。如圖3圖32所示。我的banner制作是用ps軟件制作而成，因?yàn)橐N切去網(wǎng)站的整體風(fēng)格我選用的是字體是漢儀粗篆繁字體和經(jīng)典行書簡(jiǎn)字體。效果如圖33所示：圖33我的導(dǎo)航欄是用ps軟件中的畫筆工具和文字工具制作而成的，通過修改畫筆的各項(xiàng)數(shù)值，使畫筆畫出的感覺如同毛筆的感覺，在其上用文字工具打上導(dǎo)航文字。每個(gè)導(dǎo)航各制作了兩種不同顏色，在網(wǎng)頁(yè)效果中使用了鼠標(biāo)經(jīng)過圖片，效果如圖34所示：圖343．用flash軟件制作了網(wǎng)頁(yè)中的動(dòng)畫。（網(wǎng)頁(yè)中的開場(chǎng)動(dòng)畫效果為例）如圖35所示：本網(wǎng)站前臺(tái)包括首頁(yè)、日記、心情、照片、留言板等欄目，下面是對(duì)個(gè)欄目的簡(jiǎn)介：：開始是一個(gè)自制的flash歡迎動(dòng)畫，采用自動(dòng)跳轉(zhuǎn)動(dòng)作，自動(dòng)跳轉(zhuǎn)到包含個(gè)人資料、日記等欄目的頁(yè)面。：主要是作者的平時(shí)轉(zhuǎn)載的日記，及各種相關(guān)的知識(shí)存儲(chǔ)。：主要是作者平時(shí)的個(gè)人心情介紹。只有主人能夠通過密碼登錄修改心情。游人沒有權(quán)限去修改。：是作者相關(guān)的圖像資料。有人不需要登錄即可瀏覽觀看。：此欄目設(shè)立的主要目的是為了能夠和大家進(jìn)行交流。瀏覽者不需要登錄即可留言。：簡(jiǎn)單的羅列了主人個(gè)人資料的相關(guān)介紹。：是作者喜歡以及收藏的音樂,可以供游人下載。：是作者以前做過的flash、photograph作品的展示。：只有主人有權(quán)限去修改、添加、刪除信息。四、 網(wǎng)站的詳細(xì)設(shè)計(jì)與制作 啟用Dreamweaver CS3，點(diǎn)擊Dreamweaver 站點(diǎn)管理，建立一個(gè)站點(diǎn)。如圖442所示：圖41圖42在“站點(diǎn)定義”對(duì)話框的“高級(jí)”選項(xiàng)卡的“分類”欄中選擇“本地信息”，設(shè)置站點(diǎn)名稱，將“本地根文件夾”設(shè)置為“E：\shixun\”，本地信息設(shè)置結(jié)果如圖43所示：圖43選擇“測(cè)試服務(wù)器”,將服務(wù)器類模型設(shè)置為ASP JavaScript，如圖44所示：圖44設(shè)置完畢，單擊“確認(rèn)”按鈕返回到編輯站點(diǎn)對(duì)話框。在編輯站點(diǎn)對(duì)話框中，點(diǎn)擊“完成”按鈕。如圖45所示：在網(wǎng)站文件夾里面建立一些文件夾，包括“image” （存儲(chǔ)圖片）、“video（存儲(chǔ)fl ash)“data”(用于存儲(chǔ)數(shù)據(jù)庫(kù))、“music”（用于存儲(chǔ)背景音樂）等。如圖46所示： 圖46 選擇建立的站點(diǎn)文件夾，右鍵單擊該文件夾，在彈出的快捷菜單欄中選擇新建文件，，主要是我的一些個(gè)人日記。，是我的一些收藏。，是我以前的flash作品和ps作品展示。如圖448所示： 圖47 圖48單擊快捷工具欄中的apdiv標(biāo)簽繪制一個(gè)可調(diào)節(jié)大小的標(biāo)簽框，在其中插入單元格，并把用flash制作的歡迎動(dòng)畫插入進(jìn)來，如圖49所示：圖49打開主頁(yè)文件，單擊快捷工具欄中的apdiv標(biāo)簽繪制一個(gè)可調(diào)節(jié)大小的標(biāo)簽框，在其中插入單元格，并把用Photoshop制作的首頁(yè)圖片插入進(jìn)來，如圖410所示：圖410再次單擊快捷工具欄中的apdiv標(biāo)簽繪制一個(gè)可調(diào)節(jié)大小的標(biāo)簽框，在其中插入單元格，在單元格中插入ps制作的導(dǎo)航，制作成鼠標(biāo)經(jīng)過圖片，并全部選中水平（居中對(duì)齊）垂直（居中）。如圖411所示：再次單擊快捷工具欄中的apdiv標(biāo)簽繪制一個(gè)可調(diào)節(jié)大小的標(biāo)簽框，在其中插入單元格，在其中插入個(gè)人資料，日記，留言板，心情等。如圖412所示：圖412：圖413使用Access設(shè)計(jì)視圖設(shè)計(jì)表格如圖414所示：圖414建立三個(gè)表為xinqing（心情）、denglu（管理員賬號(hào)和密碼）、mytable（留言板）如圖415所示：圖415在dreamweaver軟件中的應(yīng)用程序綁定數(shù)據(jù)庫(kù)記錄集以及在網(wǎng)頁(yè)表格中添加服務(wù)器行為使其中能夠顯示留言及心情內(nèi)容等。如圖41圖417所示：3主要的數(shù)據(jù)表結(jié)構(gòu)，如圖418所示：：留言板頁(yè)面中可以看到有昵稱及內(nèi)容填選框，所有游客都可以留言并發(fā)表，該頁(yè)面在設(shè)計(jì)中如圖421所示：