網(wǎng)頁設(shè)計的學(xué)習(xí)與實踐

【摘 要】現(xiàn)代互聯(lián)網(wǎng)社會中，人們對網(wǎng)頁設(shè)計技術(shù)的要求越來越多，有專門的網(wǎng)頁設(shè)計軟件和編程語言，網(wǎng)頁設(shè)計技術(shù)與我們?nèi)粘Ｉ畹穆?lián)系越來越緊密，本文對網(wǎng)絡(luò)制作軟件進(jìn)行了簡單的介紹。

【關(guān)鍵詞】網(wǎng)頁設(shè)計 主頁 網(wǎng)站

【中圖分類號】TP393 【文獻(xiàn)標(biāo)識碼】A 【文章編號】1674-4810（2013）19-0179-02

現(xiàn)今計算機與互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)絡(luò)已成為人們?nèi)粘Ｉ钪械闹匾糠帧；ヂ?lián)網(wǎng)的廣泛應(yīng)用，使計算機網(wǎng)頁設(shè)計技術(shù)成為當(dāng)今信息社會最熱門的技術(shù)之一，也是現(xiàn)今職業(yè)教育中的一門重要的計算機技術(shù)應(yīng)用類課程。同時也因網(wǎng)頁設(shè)計與社會緊密的聯(lián)系，它獲得了大多數(shù)學(xué)生的歡迎。本文就網(wǎng)頁設(shè)計學(xué)習(xí)中的實踐與思考進(jìn)行簡單的分析。

一 網(wǎng)站站點的創(chuàng)建

要學(xué)習(xí)制作網(wǎng)站，首先要選擇一款好的網(wǎng)頁設(shè)計軟件。現(xiàn)在人們經(jīng)常使用的網(wǎng)頁設(shè)計軟件中Dreamweaver因其功能強大、學(xué)習(xí)方便、界面簡單而得到廣泛使用。它采用即做即用的方式來制作網(wǎng)頁，利用這個軟件人們可以輕松制作自己的網(wǎng)頁并將其發(fā)布到網(wǎng)絡(luò)上，而且在發(fā)布之后還能對其進(jìn)行日常維護(hù)。設(shè)計軟件準(zhǔn)備好了以后，再根據(jù)各人需要的主題來選擇一些素材，如圖像、文字、視頻等。一切準(zhǔn)備工作完成后，我們就可以從第一步建立自己的站點來實施我們創(chuàng)建網(wǎng)站的過程。計算機網(wǎng)絡(luò)就是由許許多多、大大小小的網(wǎng)站組成的，而這些網(wǎng)站又是由多個不同標(biāo)題的網(wǎng)頁組成的。用Dreamweaver創(chuàng)建一個簡單的網(wǎng)點是很容易的。首先我們啟動Dreamweaver，選擇“站點”菜單的“新建站點”選項，這時新建站點對話框就彈出來了。我們要為自己的站點取個名，再確定這個站點根文件夾的位置，然后，一個嶄新的站點就創(chuàng)建完成了。站點創(chuàng)建好了以后，下面就可以往站點內(nèi)添加自己喜歡的網(wǎng)頁了。網(wǎng)頁的個數(shù)是任意的，有的只有幾個，有的有幾十個，但在所有的網(wǎng)頁中有一個最重要的頁面，我們把它稱之為主頁，它是進(jìn)入網(wǎng)站的大門，是需要我們精心設(shè)計的最美好的一個頁面。主頁的設(shè)計是一個網(wǎng)站成功與否的關(guān)鍵。人們往往第一眼看到主頁時，就對你的網(wǎng)站有一個初步的印象。能否使訪問者繼續(xù)進(jìn)入后面的網(wǎng)頁，吸引訪問者留在我們的網(wǎng)站上，很大程度上取決于主頁設(shè)計的質(zhì)量。一個網(wǎng)站的好壞，也很大程度上取決于這個網(wǎng)站的主頁。所以，主頁的設(shè)計和制作尤為重要，應(yīng)引起人們重視。

二 主頁版面的設(shè)計

我們在設(shè)計主頁時，應(yīng)首先對主頁進(jìn)行布局，用粗略的線條在大腦里勾畫出主頁的大致輪廓：如網(wǎng)站標(biāo)志的設(shè)計、位置的擺放，導(dǎo)航條采用什么形式、放什么位置，主頁里內(nèi)容的安排等。在我們的大腦里形成一定的輪廓后，就可進(jìn)入到圖像設(shè)計的布局階段，圖像設(shè)計軟件設(shè)計好網(wǎng)站的Logo、橫幅和導(dǎo)航后，并切成圖片以備用。圖像素材準(zhǔn)備好后，就可到網(wǎng)頁設(shè)計軟件中進(jìn)行操作了。現(xiàn)在使用最多的主頁版面布局有：（1）“國”字型布局：指在網(wǎng)頁最上面一般是網(wǎng)站的標(biāo)志、圖像、導(dǎo)航等內(nèi)容。之后是主頁的主要內(nèi)容區(qū)，左右兩邊分別列出重要標(biāo)題或欄目，中間是主體文字內(nèi)容，最下面是網(wǎng)站的一些版權(quán)信息等。“國”字型布局的優(yōu)點是充分利用版面，信息量大，不足之處是頁面比較擁擠，不夠簡單靈活。（2）“廠”字型布局：指在其最上部為橫幅，作為網(wǎng)站的標(biāo)志和廣告條等。橫幅下方的左邊為導(dǎo)航主菜單，右邊顯示主頁的主體內(nèi)容，整體布局效果類似“廠”字。這種布局的優(yōu)點是主頁結(jié)構(gòu)比較清晰、主次分明，是剛?cè)腴T的學(xué)習(xí)者最容易學(xué)會的布局方法。（3）“封面”型布局：“封面”型布局主要采用Fireworks、Flash、Photoshop等圖像、動畫軟件，以精美的圖片加上簡單的視頻動畫布局版面。通過主頁上面的文字、圖片或視頻動畫鏈接到站點中的其他頁面上。“封面”型布局多用于展示型網(wǎng)站或個人的個性化網(wǎng)站上。

三 主頁色彩的搭配

主頁中的色彩是訪問者對網(wǎng)站最直觀的印象，是樹立網(wǎng)站形象的關(guān)鍵因素之一。一個網(wǎng)站設(shè)計得成功與否，在一定程度上取決于主頁色彩的運用和搭配。主頁面的基調(diào)和風(fēng)格代表著整個網(wǎng)站的風(fēng)格，也就是在很大程度上決定了網(wǎng)站中子頁面的風(fēng)格。主頁面的色彩搭配也決定著其他子頁在的色彩搭配。下面就讓我們來了解一些色彩的基礎(chǔ)知識。（1）色彩的分類。色彩可粗分為有彩和無彩。無彩色是指黑色、白色，以及黑白兩色之間過渡的深淺不等的灰色系列。與無彩色對應(yīng)的是有彩色，有彩色是指可見光譜中的紅、橙、黃、綠、青、藍(lán)、紫七種基本色彩以及它們的混合色。（2）色彩的三要素：明度、色相、純度。明度表示色彩的明暗程度，明度越大，色彩越亮，讓人感覺絢麗多彩，充滿生機和活力，這一類色彩多用于兒童類網(wǎng)站和一些購物類網(wǎng)站。明度越底，色彩越暗，這一類多用于一些游戲類網(wǎng)站，色彩的暗度可以使網(wǎng)站充滿神秘感，還有一些個人網(wǎng)站，為了體現(xiàn)個性，也往往用暗色調(diào)來體現(xiàn)孤芳自賞的特質(zhì)。色相是指不同波長的光反射給人的不同色彩感受，如紅、橙、黃、綠、青、藍(lán)、紫各代表一類具體的色相。純度是指色彩的鮮亮與純凈的程度，表明顏色中是否含有灰的成分。如色彩中不含有灰的成分，即純度最高，反之，含有灰的成分越高，其純度就越低。不同的色相，明度不同，純度也不同。純度高的網(wǎng)頁，顯得鮮活、明快，純度低的主頁，顯得暗淡、朦朧。

綜上所述，主頁色彩搭配得好，可以起到意想不到的效

果。主頁的色彩搭配一般要根據(jù)主頁的主題來確定，不同的主題選擇不同的色彩搭配，如藍(lán)色多用于科技型主題網(wǎng)站，粉色多用于女性主題和化妝品類型的網(wǎng)站，綠色多用食品類和植物類主題的網(wǎng)站。主頁色彩的搭配會直接影響到訪問者的心情，合理的色彩搭配會給瀏覽者帶來強烈的視覺沖擊力。主頁的色彩搭配一般有6個原則：（1）同種色彩搭配，同種色彩搭配是指我們要先選定一種基本顏色，然后通過不斷調(diào)整其自身的透明度和飽和度將色彩變淡或加深，從而產(chǎn)生新的色彩。采用同種色彩搭配的頁面看起來色調(diào)非常統(tǒng)一，具有一定的層次感。（2）對比色彩搭配，對比色彩可以突出顏色，產(chǎn)生很強的視覺效果。合理的使用色彩對比，能使網(wǎng)站設(shè)計的特點比較突出，重點顯現(xiàn)比較明顯。在進(jìn)行設(shè)計時，通常以一種顏色作為主色調(diào)，所對比色彩作為輔助，可以達(dá)到畫龍點睛的效果。（3）暖色色彩搭配，暖色色彩搭配是指用紅色、橙色、黃色等色彩進(jìn)行搭配，這種色彩的搭配運用可為網(wǎng)頁營造出熱情、溫馨、和諧的氛圍。（4）冷色色彩搭配，冷色色彩搭配是指使用綠色、藍(lán)色及紫色等色彩進(jìn)行搭配，這種色彩的搭配運用可為網(wǎng)頁營造出清涼、寧靜和高雅的氛圍。（5）冷色調(diào)色彩和白色進(jìn)行搭配，能產(chǎn)生很好的視覺效果，不失為一種百搭的色彩搭配。（6）色彩面積的對比，是指網(wǎng)頁中各種色彩在面積上運用的大小差別，它在某種程度上決定著頁面內(nèi)容的主次關(guān)系，隨著色彩面積的不同而產(chǎn)生不同的對比效果。

四 使用模板快速制作網(wǎng)頁

設(shè)計好主頁的結(jié)構(gòu)與色彩后，整個網(wǎng)站的大致風(fēng)格也就基本確定了。網(wǎng)站的頁面由多級頁面組成，每一級也由多個子頁面組成。眾多的子頁面之間互相聯(lián)系又相互區(qū)別，它們跟主頁都具有統(tǒng)一的結(jié)構(gòu)和風(fēng)格，如果我們一開始對每一個子頁面都去建立的話，就要做許多重復(fù)工作。這時，我們就可以使用相應(yīng)網(wǎng)頁模板來建立統(tǒng)一的網(wǎng)頁。模板的作用就好像在工業(yè)設(shè)計中用的統(tǒng)一模具一樣，它能使我們不必每次建立網(wǎng)頁時都要從頭開始。模板就是網(wǎng)頁的樣板，它有可編輯區(qū)域和不可編輯區(qū)域之分。不可編輯區(qū)的內(nèi)容是在子頁面中不可以改變的，只有在網(wǎng)頁模板中進(jìn)行修改，通常為網(wǎng)站標(biāo)志、橫幅、導(dǎo)航、版本信息等所有網(wǎng)頁中統(tǒng)一不變的內(nèi)容。可編輯區(qū)的內(nèi)容是可以在子頁面中修改的，是每個子頁面自己單獨擁有的內(nèi)容，通常為該網(wǎng)頁的主體文字、圖片等內(nèi)容。運用模板可以批量創(chuàng)建網(wǎng)頁，而且用同一個模板所建立的網(wǎng)頁，在修改和更新時，也可以通過修改模板而一次性的完成。模板大大地提高了網(wǎng)頁設(shè)計的速度，也使網(wǎng)站具有很好的統(tǒng)一風(fēng)格。通過上面的具體步驟，一個小型的站點就創(chuàng)建好了。

總之，網(wǎng)頁設(shè)計是一門實踐性和操作性都很強的科目，在學(xué)習(xí)過程中一定要勤學(xué)、多問、多練。學(xué)習(xí)網(wǎng)頁設(shè)計時，首先要接觸一些理論性的知識，對于這些理論知識，我們只要進(jìn)行一些簡單的了解，不需要把理論知識背熟，而是從具體的實踐操作開始。當(dāng)然這里不是說理論不重要，而是切入的時機要掌握好，如果理論知識切入的時機不對，就會使學(xué)習(xí)者失去學(xué)習(xí)的興趣。對于理論知識的學(xué)習(xí)，可以根據(jù)學(xué)習(xí)的實際情況，合理調(diào)整學(xué)習(xí)順序和重點。對涉及的理論知識，可以盡量在實際操作中逐步掌握。在學(xué)習(xí)了一個階段后，再回過頭來重新重點學(xué)習(xí)這方面知識。網(wǎng)頁學(xué)習(xí)是一個螺旋式、循序漸進(jìn)的過程，只要我們積極主動的去學(xué)習(xí)，就一定能取得好成績。

〔責(zé)任編輯：肖薇〕