網(wǎng)站建設(shè)行業(yè)優(yōu)質(zhì)供應(yīng)商
網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識
發(fā)布時(shí)間：2021-07-15 22:07:46 閱讀： 作者：本站網(wǎng)站作為新媒體，具有很多與傳統(tǒng)媒體不同的特征與特性，在開始制作網(wǎng)頁之前，需要對網(wǎng)站的設(shè)計(jì)有全面的了解和認(rèn)識。這一章首先介紹網(wǎng)頁的基本概念及構(gòu)成要素，幫助大家理解網(wǎng)頁的特點(diǎn)與結(jié)構(gòu)；接下來學(xué)習(xí)網(wǎng)站建設(shè)的基本流程，了解網(wǎng)站是如何從無到有的；此外，網(wǎng)頁版式與風(fēng)格設(shè)計(jì)是建設(shè)一個(gè)成功網(wǎng)站的關(guān)鍵，學(xué)習(xí)基本的規(guī)律有助于設(shè)計(jì)出更美觀、實(shí)用的網(wǎng)站。
認(rèn)識網(wǎng)頁與網(wǎng)站
網(wǎng)頁（Web Page）實(shí)際上是一個(gè)文件，網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取。當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或單擊某個(gè)鏈接，在瀏覽器中顯示出來的就是一個(gè)網(wǎng)頁。
網(wǎng)站（Web Site）是各種各樣網(wǎng)頁的集合，有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門戶網(wǎng)站；有個(gè)網(wǎng)站只有幾個(gè)頁面，如個(gè)人網(wǎng)站。在構(gòu)成網(wǎng)站的眾多網(wǎng)頁中，有一個(gè)頁面比較特殊，稱為首頁（Home Page）。例如，當(dāng)瀏覽者輸入搜狐網(wǎng)站地址“www.sohu.com”后出現(xiàn)在第一個(gè)頁面，即sohu網(wǎng)站的首頁，如圖1.1所示。瀏覽者可以根據(jù)首頁的導(dǎo)航進(jìn)入其他頁面，了解更多內(nèi)容。
網(wǎng)頁的基本構(gòu)成要素
雖然網(wǎng)頁種類繁多，形式內(nèi)容各有不同。但網(wǎng)頁的基本構(gòu)成要素大體相同，包括標(biāo)題（Logo）、導(dǎo)航、文本、圖片、動(dòng)畫、超鏈接、表單、音視頻等，如圖所示。網(wǎng)頁設(shè)計(jì)就是要將上述構(gòu)成要素有機(jī)整合，表達(dá)出美與和諧。
網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識
規(guī)范的網(wǎng)站建設(shè)應(yīng)遵循一定的流程，主要由規(guī)劃設(shè)計(jì)階段、實(shí)施發(fā)布階段、評價(jià)階段組成，各個(gè)階段的具體環(huán)節(jié)如圖所示。
網(wǎng)頁版式設(shè)計(jì)
網(wǎng)頁的版式設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)的核心，主要內(nèi)容包括網(wǎng)頁整體布局設(shè)計(jì)和導(dǎo)航樣式的設(shè)計(jì)。本節(jié)將介紹常見的幾種網(wǎng)頁布局，以及網(wǎng)頁導(dǎo)航設(shè)計(jì)應(yīng)遵循的原則。
網(wǎng)頁布局
網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，目前網(wǎng)頁的布局主要可歸為三大類型：分欄式結(jié)構(gòu)、區(qū)塊分布式結(jié)構(gòu)、無框架局限式結(jié)構(gòu)。
1．分欄式結(jié)構(gòu)
2．區(qū)域分布式結(jié)構(gòu)
3．無框架局限式結(jié)構(gòu)
導(dǎo)航設(shè)計(jì)
導(dǎo)航是網(wǎng)頁設(shè)計(jì)中不可或缺的基礎(chǔ)元素之一。導(dǎo)航就如同一個(gè)網(wǎng)站的路標(biāo)，有了它就不會(huì)在瀏覽網(wǎng)站時(shí)“迷路”。導(dǎo)航鏈接著各個(gè)頁面，只要單擊導(dǎo)航中的超級鏈接就能進(jìn)入相應(yīng)的頁面。
導(dǎo)航設(shè)計(jì)的好壞，決定著用戶是否能很方便地使用網(wǎng)站。導(dǎo)航設(shè)計(jì)應(yīng)直觀明確，最大限度地為用戶使用考慮，盡可能使網(wǎng)頁切換更便捷。導(dǎo)航的設(shè)計(jì)要符合整個(gè)網(wǎng)站的風(fēng)格和要求，不同的網(wǎng)站會(huì)采用不同的導(dǎo)航方式。一般來說，在網(wǎng)頁的上端或左側(cè)設(shè)置導(dǎo)航欄是比較普遍的方式，如圖1.9所示。網(wǎng)站采用上端文字作為一級導(dǎo)航，左側(cè)樹狀結(jié)構(gòu)菜單作為二級導(dǎo)航。
導(dǎo)航設(shè)計(jì)應(yīng)遵循以下原則：
讓用戶能根據(jù)走過的路徑，確定下一步的前進(jìn)方向和路徑；
不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡捷地找到所需的信息，并以最佳的路徑到達(dá)這些信息；
讓用戶使用網(wǎng)站遇到困難時(shí)，能尋求到解決困難的方法，找到最佳路徑；
讓用戶清楚地了解整個(gè)網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體性感知；
對使用頻率不同的信息作有序處理
網(wǎng)頁風(fēng)格設(shè)計(jì)
同樣的版式設(shè)計(jì)，配色不同，文字樣式不同，也可以呈現(xiàn)出多種不同的網(wǎng)頁風(fēng)格。本節(jié)將結(jié)合實(shí)例從網(wǎng)頁配色、文字藝術(shù)兩個(gè)方面對網(wǎng)頁風(fēng)格設(shè)計(jì)進(jìn)行具體分析。
網(wǎng)頁配色
設(shè)計(jì)精美的網(wǎng)站都有其色調(diào)構(gòu)成的總體傾向。以一種或幾種臨近顏色為主導(dǎo)，使網(wǎng)頁全局呈現(xiàn)某種和諧、統(tǒng)一的色彩傾向。下面介紹一些網(wǎng)頁配色的具體經(jīng)驗(yàn)。
運(yùn)用色系。先根據(jù)網(wǎng)頁主題，選定一種主色，然后調(diào)整透明度或飽和度，也就是將色彩變淺或加深，調(diào)配出新的色彩。這樣的頁面看起來色彩一致，有層次感，如圖1.10所示。IBM網(wǎng)站運(yùn)用藍(lán)色系營造出藍(lán)色海洋的感覺。
使用對比色?？梢猿浞掷脤Ρ壬M(jìn)行設(shè)計(jì)，同時(shí)注意使用灰色調(diào)進(jìn)行調(diào)和。這樣的作品頁面色彩豐富，
文字藝術(shù)
文字在版面中一般占有絕大部分空間，是網(wǎng)頁信息的主要載體。處理好文字關(guān)系到網(wǎng)頁設(shè)計(jì)的成敗。字體的選擇、字號的大小、文字的顏色、行與行的距離、段落與段落的安排，都需要認(rèn)真考慮。好的文字設(shè)計(jì)會(huì)給網(wǎng)頁增色不少
實(shí)例分析
1．網(wǎng)站描述
這是一家航空公司的網(wǎng)站首頁。界面設(shè)計(jì)給人現(xiàn)代、驛動(dòng)的感覺，這與公司的風(fēng)格相一致。導(dǎo)航設(shè)計(jì)簡潔利落，很值得學(xué)習(xí)借鑒，
2．布局
網(wǎng)頁布局采用的是比較常見的分欄式結(jié)構(gòu)，如圖1.15所示。A為網(wǎng)站的Logo所在的區(qū)域；B為網(wǎng)站主菜單所在的區(qū)域；C為搜索與其他公共功能所在的區(qū)域；D為網(wǎng)站的內(nèi)容區(qū)域，主要由文字和圖片組成；E為版權(quán)信息所在的區(qū)域。
3．配色
網(wǎng)頁選用藍(lán)色系，象征天空，與網(wǎng)站主題一致。網(wǎng)頁主要運(yùn)用了兩種藍(lán)色除此之外，網(wǎng)頁文字的配色主要以白色和藍(lán)色為主。
認(rèn)識網(wǎng)頁與網(wǎng)站
網(wǎng)頁（Web Page）實(shí)際上是一個(gè)文件，網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取。當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或單擊某個(gè)鏈接，在瀏覽器中顯示出來的就是一個(gè)網(wǎng)頁。
網(wǎng)站（Web Site）是各種各樣網(wǎng)頁的集合，有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門戶網(wǎng)站；有個(gè)網(wǎng)站只有幾個(gè)頁面，如個(gè)人網(wǎng)站。在構(gòu)成網(wǎng)站的眾多網(wǎng)頁中，有一個(gè)頁面比較特殊，稱為首頁（Home Page）。例如，當(dāng)瀏覽者輸入搜狐網(wǎng)站地址“www.sohu.com”后出現(xiàn)在第一個(gè)頁面，即sohu網(wǎng)站的首頁，如圖1.1所示。瀏覽者可以根據(jù)首頁的導(dǎo)航進(jìn)入其他頁面，了解更多內(nèi)容。
網(wǎng)頁的基本構(gòu)成要素
雖然網(wǎng)頁種類繁多，形式內(nèi)容各有不同。但網(wǎng)頁的基本構(gòu)成要素大體相同，包括標(biāo)題（Logo）、導(dǎo)航、文本、圖片、動(dòng)畫、超鏈接、表單、音視頻等，如圖所示。網(wǎng)頁設(shè)計(jì)就是要將上述構(gòu)成要素有機(jī)整合，表達(dá)出美與和諧。
網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識
規(guī)范的網(wǎng)站建設(shè)應(yīng)遵循一定的流程，主要由規(guī)劃設(shè)計(jì)階段、實(shí)施發(fā)布階段、評價(jià)階段組成，各個(gè)階段的具體環(huán)節(jié)如圖所示。
網(wǎng)頁版式設(shè)計(jì)
網(wǎng)頁的版式設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)的核心，主要內(nèi)容包括網(wǎng)頁整體布局設(shè)計(jì)和導(dǎo)航樣式的設(shè)計(jì)。本節(jié)將介紹常見的幾種網(wǎng)頁布局，以及網(wǎng)頁導(dǎo)航設(shè)計(jì)應(yīng)遵循的原則。
網(wǎng)頁布局
網(wǎng)頁布局是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，目前網(wǎng)頁的布局主要可歸為三大類型：分欄式結(jié)構(gòu)、區(qū)塊分布式結(jié)構(gòu)、無框架局限式結(jié)構(gòu)。
1．分欄式結(jié)構(gòu)
2．區(qū)域分布式結(jié)構(gòu)
3．無框架局限式結(jié)構(gòu)
導(dǎo)航設(shè)計(jì)
導(dǎo)航是網(wǎng)頁設(shè)計(jì)中不可或缺的基礎(chǔ)元素之一。導(dǎo)航就如同一個(gè)網(wǎng)站的路標(biāo)，有了它就不會(huì)在瀏覽網(wǎng)站時(shí)“迷路”。導(dǎo)航鏈接著各個(gè)頁面，只要單擊導(dǎo)航中的超級鏈接就能進(jìn)入相應(yīng)的頁面。
導(dǎo)航設(shè)計(jì)的好壞，決定著用戶是否能很方便地使用網(wǎng)站。導(dǎo)航設(shè)計(jì)應(yīng)直觀明確，最大限度地為用戶使用考慮，盡可能使網(wǎng)頁切換更便捷。導(dǎo)航的設(shè)計(jì)要符合整個(gè)網(wǎng)站的風(fēng)格和要求，不同的網(wǎng)站會(huì)采用不同的導(dǎo)航方式。一般來說，在網(wǎng)頁的上端或左側(cè)設(shè)置導(dǎo)航欄是比較普遍的方式，如圖1.9所示。網(wǎng)站采用上端文字作為一級導(dǎo)航，左側(cè)樹狀結(jié)構(gòu)菜單作為二級導(dǎo)航。
導(dǎo)航設(shè)計(jì)應(yīng)遵循以下原則：
讓用戶能根據(jù)走過的路徑，確定下一步的前進(jìn)方向和路徑；
不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡捷地找到所需的信息，并以最佳的路徑到達(dá)這些信息；
讓用戶使用網(wǎng)站遇到困難時(shí)，能尋求到解決困難的方法，找到最佳路徑；
讓用戶清楚地了解整個(gè)網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體性感知；
對使用頻率不同的信息作有序處理
網(wǎng)頁風(fēng)格設(shè)計(jì)
同樣的版式設(shè)計(jì)，配色不同，文字樣式不同，也可以呈現(xiàn)出多種不同的網(wǎng)頁風(fēng)格。本節(jié)將結(jié)合實(shí)例從網(wǎng)頁配色、文字藝術(shù)兩個(gè)方面對網(wǎng)頁風(fēng)格設(shè)計(jì)進(jìn)行具體分析。
網(wǎng)頁配色
設(shè)計(jì)精美的網(wǎng)站都有其色調(diào)構(gòu)成的總體傾向。以一種或幾種臨近顏色為主導(dǎo)，使網(wǎng)頁全局呈現(xiàn)某種和諧、統(tǒng)一的色彩傾向。下面介紹一些網(wǎng)頁配色的具體經(jīng)驗(yàn)。
運(yùn)用色系。先根據(jù)網(wǎng)頁主題，選定一種主色，然后調(diào)整透明度或飽和度，也就是將色彩變淺或加深，調(diào)配出新的色彩。這樣的頁面看起來色彩一致，有層次感，如圖1.10所示。IBM網(wǎng)站運(yùn)用藍(lán)色系營造出藍(lán)色海洋的感覺。
使用對比色?？梢猿浞掷脤Ρ壬M(jìn)行設(shè)計(jì)，同時(shí)注意使用灰色調(diào)進(jìn)行調(diào)和。這樣的作品頁面色彩豐富，
文字藝術(shù)
文字在版面中一般占有絕大部分空間，是網(wǎng)頁信息的主要載體。處理好文字關(guān)系到網(wǎng)頁設(shè)計(jì)的成敗。字體的選擇、字號的大小、文字的顏色、行與行的距離、段落與段落的安排，都需要認(rèn)真考慮。好的文字設(shè)計(jì)會(huì)給網(wǎng)頁增色不少
實(shí)例分析
1．網(wǎng)站描述
這是一家航空公司的網(wǎng)站首頁。界面設(shè)計(jì)給人現(xiàn)代、驛動(dòng)的感覺，這與公司的風(fēng)格相一致。導(dǎo)航設(shè)計(jì)簡潔利落，很值得學(xué)習(xí)借鑒，
2．布局
網(wǎng)頁布局采用的是比較常見的分欄式結(jié)構(gòu)，如圖1.15所示。A為網(wǎng)站的Logo所在的區(qū)域；B為網(wǎng)站主菜單所在的區(qū)域；C為搜索與其他公共功能所在的區(qū)域；D為網(wǎng)站的內(nèi)容區(qū)域，主要由文字和圖片組成；E為版權(quán)信息所在的區(qū)域。
3．配色
網(wǎng)頁選用藍(lán)色系，象征天空，與網(wǎng)站主題一致。網(wǎng)頁主要運(yùn)用了兩種藍(lán)色除此之外，網(wǎng)頁文字的配色主要以白色和藍(lán)色為主。
QQ客服
劉先生
