網(wǎng)頁(yè)設(shè)計(jì)入門(mén)——HTML5+CSS3+JavaScript

時(shí)間：2023-10-15 07:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-15 07:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì)入門(mén)——HTML5+CSS3+JavaScript：

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

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和普及，網(wǎng)絡(luò)與現(xiàn)實(shí)生活的結(jié)合越來(lái)越緊密，網(wǎng)站代表了企業(yè)和個(gè)人的形象，網(wǎng)頁(yè)如同個(gè)人的社交名片，不可或缺。越來(lái)越多的人開(kāi)始學(xué)習(xí)和制作網(wǎng)頁(yè)，更多的企業(yè)和個(gè)人把自己的“家”搬到網(wǎng)上。

應(yīng)該說(shuō)，設(shè)計(jì)精美的頁(yè)面效果，需要用戶(hù)掌握一定的技術(shù)，了解相關(guān)的知識(shí)，初步積累網(wǎng)頁(yè)設(shè)計(jì)素養(yǎng)，同時(shí)還應(yīng)該熟悉網(wǎng)站開(kāi)發(fā)的流程。

熟悉網(wǎng)頁(yè)設(shè)計(jì)概念

網(wǎng)站是互聯(lián)網(wǎng)上一個(gè)信息小站，網(wǎng)頁(yè)是互聯(lián)網(wǎng)上顯示的信息頁(yè)面，如果說(shuō)網(wǎng)站是一本書(shū)，那么網(wǎng)頁(yè)就是生活中的一頁(yè)書(shū)，是展示信息的最小單元。在網(wǎng)頁(yè)中包含文字、圖像、多媒體等內(nèi)容，通過(guò)這些內(nèi)容向?yàn)g覽者傳達(dá)一定的信息。

網(wǎng)頁(yè)和網(wǎng)站

網(wǎng)站就是由網(wǎng)頁(yè)組成的，網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種應(yīng)用的平臺(tái)。一個(gè)網(wǎng)站如果沒(méi)有網(wǎng)頁(yè)，將是一個(gè)空站，如果只有域名和虛擬主機(jī)而沒(méi)有制作任何網(wǎng)頁(yè)的話，任何人都無(wú)法訪問(wèn)網(wǎng)站。

網(wǎng)頁(yè)類(lèi)型

網(wǎng)頁(yè)可以分為多種類(lèi)型，但是由于分類(lèi)方法不同，也會(huì)有不同的類(lèi)型，根據(jù)是否使用了服務(wù)器技術(shù)，人們把網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。

網(wǎng)頁(yè)構(gòu)成

網(wǎng)頁(yè)內(nèi)可以包含很多內(nèi)容，如文本、圖像、動(dòng)畫(huà)等內(nèi)容，這些信息構(gòu)成了網(wǎng)頁(yè)的基本內(nèi)容，如圖1.4所示。實(shí)際上網(wǎng)頁(yè)包含的元素是很多的，有些元素可以直觀地看到，而有的元素可能看不到，只有通過(guò)代碼才能夠看到。

HTML

HTML是一種語(yǔ)言，全稱(chēng)為Hypertext Markup Language，即超文本標(biāo)識(shí)語(yǔ)言，是用于描述網(wǎng)頁(yè)文檔的一種工具。由HTML語(yǔ)言編寫(xiě)的文檔，就是網(wǎng)頁(yè)文檔，這種文檔可以被網(wǎng)頁(yè)瀏覽器識(shí)別并解析，然后把網(wǎng)頁(yè)效果呈現(xiàn)出來(lái)。如果沒(méi)有瀏覽器的解析，我們所看到的網(wǎng)頁(yè)文檔由大量的HTML標(biāo)簽和文本信息組成，

學(xué)習(xí)DIV結(jié)構(gòu)

DIV是<div>標(biāo)簽的習(xí)慣性稱(chēng)呼，因?yàn)樵O(shè)計(jì)師主要使用<div>標(biāo)簽構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)，使用CSS設(shè)計(jì)網(wǎng)頁(yè)樣式，故把網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)稱(chēng)為DIV+CSS布局。

在HTML文檔中，頁(yè)面會(huì)被劃分為很多區(qū)域，不同區(qū)域顯示不同的內(nèi)容，如標(biāo)題欄、廣告位、導(dǎo)航條、新聞列表、正文顯示區(qū)域、版權(quán)信息區(qū)域等。

學(xué)習(xí)CSS

有了網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，還需要CSS來(lái)美化。CSS是一種語(yǔ)言，與HTML一樣，是一種描述性語(yǔ)言，全稱(chēng)Cascading Style Sheet，可譯為層疊樣式表或級(jí)聯(lián)樣式表，它定義如何顯示HTML標(biāo)簽，用于控制網(wǎng)頁(yè)外觀布局和樣式設(shè)計(jì)。當(dāng)網(wǎng)頁(yè)缺少CSS時(shí)，是非常丑陋的，也不適合閱讀和欣賞，

學(xué)習(xí)JavaScript

網(wǎng)頁(yè)設(shè)計(jì)的動(dòng)態(tài)化和智能化是一種大趨勢(shì)，而如果要趕上這個(gè)趨勢(shì)，JavaScript是一種腳本語(yǔ)言，但是它包含編程語(yǔ)言的大部分特性和功能，掌握J(rèn)avaScript編程，你就能夠駕馭網(wǎng)頁(yè)動(dòng)態(tài)特效的設(shè)計(jì)，就能夠把網(wǎng)頁(yè)設(shè)計(jì)得更聰明、更富有人性化。

JavaScript在頁(yè)面特效中的應(yīng)用

與HTML、CSS學(xué)習(xí)相比，JavaScript學(xué)習(xí)難度要大很多，當(dāng)然一旦當(dāng)你掌握了JavaScript，網(wǎng)頁(yè)設(shè)計(jì)水平會(huì)達(dá)到一個(gè)新的高度，此時(shí)自己就不是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)師，而應(yīng)該是一個(gè)前端開(kāi)發(fā)工程師的高級(jí)技術(shù)師。

網(wǎng)頁(yè)設(shè)計(jì)任務(wù)

成功的設(shè)計(jì)作品一般都很藝術(shù)化。但藝術(shù)只是設(shè)計(jì)的手段，而并非設(shè)計(jì)的任務(wù)。設(shè)計(jì)的任務(wù)是要實(shí)現(xiàn)設(shè)計(jì)者的意圖，而并非創(chuàng)造美。

網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)，是指設(shè)計(jì)者要表現(xiàn)的主題和實(shí)現(xiàn)的功能。站點(diǎn)的性質(zhì)不同，設(shè)計(jì)的任務(wù)也不同。根據(jù)網(wǎng)站性質(zhì)，可以把網(wǎng)頁(yè)設(shè)計(jì)任務(wù)分為3類(lèi)：

　資訊類(lèi)網(wǎng)站，這類(lèi)網(wǎng)站以?xún)?nèi)容為主，提供大量的信息，因此網(wǎng)頁(yè)設(shè)計(jì)就需要注意頁(yè)面的分割、結(jié)構(gòu)的合理、頁(yè)面的優(yōu)化、網(wǎng)頁(yè)的親和力等問(wèn)題。

　形象類(lèi)網(wǎng)站，這類(lèi)網(wǎng)站以宣傳為主，網(wǎng)站規(guī)模較小，頁(yè)面少，信息少，功能也較為簡(jiǎn)單，網(wǎng)頁(yè)設(shè)計(jì)的主要任務(wù)是突出企業(yè)形象。因此對(duì)設(shè)計(jì)者的美工水平要求較高。

　應(yīng)用類(lèi)網(wǎng)站，這類(lèi)網(wǎng)站在設(shè)計(jì)上要求較高，網(wǎng)頁(yè)信息不求大而全，但是頁(yè)面設(shè)計(jì)追求簡(jiǎn)潔、精致、大方，既要保證網(wǎng)站的可操作性，同時(shí)還要保證應(yīng)用的靈活性，突出鮮明的應(yīng)用特性。

網(wǎng)頁(yè)設(shè)計(jì)原則

網(wǎng)頁(yè)設(shè)計(jì)是有原則的，無(wú)論使用什么方法對(duì)網(wǎng)頁(yè)元素進(jìn)行組合，都必須要遵循基本原則，

　統(tǒng)一原則：就是指設(shè)計(jì)作品的整體性、一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要的，在設(shè)計(jì)中切勿將各組成部分孤立分散，那樣會(huì)使畫(huà)面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。

　連貫原則：就是指要注意頁(yè)面的相互關(guān)系。設(shè)計(jì)中應(yīng)利用各組成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng)，并注意整個(gè)頁(yè)面設(shè)計(jì)風(fēng)格的一致性，實(shí)現(xiàn)視覺(jué)上和心理上的連貫，使整個(gè)頁(yè)面設(shè)計(jì)的各個(gè)部分極為融洽，猶如一氣呵成。

　分割原則：就是指將頁(yè)面分成若干小塊，小塊之間有視覺(jué)上的不同，這樣可以使觀者一目了然。在信息量很多時(shí)為使觀者能夠看清楚，就要注意到將畫(huà)面進(jìn)行有效的分割。分割不僅是表現(xiàn)形式的需要。換個(gè)角度來(lái)講，分割也可以被視為對(duì)于頁(yè)面內(nèi)容的一種分類(lèi)歸納。

　對(duì)比原則：就是通過(guò)矛盾和沖突，使設(shè)計(jì)更加富有生氣。對(duì)比手法很多，例如，多與少、曲與直、強(qiáng)與弱、長(zhǎng)與短、粗與細(xì)、疏與密、虛與實(shí)、主與次、黑與白、動(dòng)與靜、美與丑、聚與散等。在使用對(duì)比的時(shí)候應(yīng)慎重，對(duì)比過(guò)強(qiáng)容易破壞美感，影響統(tǒng)一。

　和諧原則：就是指整個(gè)頁(yè)面符合美的法則，渾然一體。如果一件設(shè)計(jì)作品僅僅是色彩、形狀、線條等的隨意混合，那么作品將不但沒(méi)有“生命感”，而且也根本無(wú)法實(shí)現(xiàn)視覺(jué)設(shè)計(jì)的傳達(dá)功能。和諧不僅要看結(jié)構(gòu)形式，而且要看作品所形成的視覺(jué)效果能否與人的視覺(jué)感受形成一種溝通，產(chǎn)生心靈的共鳴。這是設(shè)計(jì)能否成功的關(guān)鍵。