網(wǎng)頁(yè)布局基礎(chǔ)和常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)布局分析實(shí)例
網(wǎng)頁(yè)布局基礎(chǔ)
網(wǎng)頁(yè)布局參照三個(gè)方面：
標(biāo)準(zhǔn)文檔流
float
position
1、標(biāo)準(zhǔn)文檔流
塊級(jí)元素
層級(jí)元素
Note：兩個(gè)元素都屬于 盒子模型
2、float
left
right
none
Note：設(shè)置浮動(dòng)后，脫離標(biāo)準(zhǔn)文檔流；但不脫離標(biāo)準(zhǔn)文本流 ；
當(dāng)元素設(shè)置浮動(dòng)屬性后，會(huì)對(duì)相鄰的元素產(chǎn)生影響，相鄰元素指的是緊鄰后面的元素。消除影響方法：width:100%;overflow:hidden（包含元素有影響時(shí)） 或clear:both（后 面元素有影響時(shí)）
對(duì)文檔流，文本流的理解
對(duì)設(shè)置浮動(dòng)后的標(biāo)簽，如果是文檔流里的會(huì)直接占據(jù)它的位置，文本（<p>）會(huì)在其周?chē)@示
與position:absolute對(duì)比：position:absolute會(huì)脫離標(biāo)準(zhǔn)文檔流和標(biāo)準(zhǔn)文本流
3、position
相對(duì)定位：相對(duì)于自身原有位置進(jìn)行位移，仍處于標(biāo)準(zhǔn)文檔流中。
絕對(duì)定位：建立了以包含塊為基準(zhǔn)的定位，完全脫離標(biāo)準(zhǔn)文檔流。隨即擁有偏移屬性和z-index屬性
包含塊：離它最近的，設(shè)置了position的祖先元素
兩種情況：
未設(shè)置偏移量：無(wú)論是否存在已定位祖先元素，都保持在元素初始位置
設(shè)置偏移量：無(wú)已定位祖先元素，以<html>為偏移參照標(biāo)準(zhǔn)
有已定位祖先元素，以距其最近的已定位祖先元素為偏移參照標(biāo)準(zhǔn)
Note：對(duì)于未設(shè)置width的元素
默認(rèn) 100%
但是加上position:absolute之后，按包含元素width來(lái)算。
常用的網(wǎng)頁(yè)設(shè)計(jì)布局
即便我們看到了很多風(fēng)格獨(dú)特、造型時(shí)尚的網(wǎng)站，實(shí)際上他們的布局在大體上還是有一定規(guī)律的，這也就是所謂的常用網(wǎng)頁(yè)布局。什么事網(wǎng)頁(yè)設(shè)計(jì)布局？其實(shí)就是網(wǎng)頁(yè)設(shè)計(jì)中每一元素分布的位置、占據(jù)的空間與板面的劃分，選擇一個(gè)正確的網(wǎng)頁(yè)布局對(duì)網(wǎng)站的整體建設(shè)有著舉足輕重的作用。常用的網(wǎng)頁(yè)布局一般分為以下三種：通欄式、左中右式和F式。三種布局分別適用不同類(lèi)型的企業(yè)，下面為你一一講述，這三種布局的主要特點(diǎn)與選擇前提。
一、通欄式
通欄式是現(xiàn)今為流行的布局，所謂的通欄式就是不需要將頁(yè)面進(jìn)行縱向的切割，直接橫向地展示網(wǎng)頁(yè)的圖文內(nèi)容。這類(lèi)型的布局為靈活，而且不受邊框的限制，在Banner的制作上，則更顯得大氣非凡。我們?cè)诳春芏喔呖萍碱?lèi)企業(yè)的產(chǎn)品展示頁(yè)都是采用這種現(xiàn)代色彩濃厚的布局，更顯其高端大氣派。雖然這種類(lèi)型的布局對(duì)企業(yè)的限制要求并不多，但相對(duì)于那些信息量巨大的網(wǎng)站而言，這一類(lèi)布局卻是非常不合適，其主要原因就在于通欄式的承載信息量小，無(wú)法承擔(dān)大量的信息負(fù)荷。
二、左中右式
典型的例子就是各大門(mén)戶網(wǎng)站，這類(lèi)布局的主要特點(diǎn)就在于頁(yè)面可以靈活地進(jìn)行切割，Banner只占其中的一小部分，但整個(gè)頁(yè)面所承載的信息量相對(duì)而言是很多的。這類(lèi)的布局當(dāng)然是適合那些信息豐富的網(wǎng)站選擇，但有一點(diǎn)要注意的是，盡管信息豐富，也一定要做到排版整潔，富有邏輯性，否則頁(yè)面反而會(huì)顯得雜亂無(wú)章。
三、F式
所謂的F式是一種形象比喻的說(shuō)法，就是網(wǎng)頁(yè)將重點(diǎn)的內(nèi)容放在左側(cè)，然后遵循用戶瀏覽軌跡的原理，從左上角開(kāi)始沿左邊順勢(shì)而下。一般而言都是重要產(chǎn)品與服務(wù)信息、網(wǎng)頁(yè)導(dǎo)航分類(lèi)欄等主要元素才會(huì)被放置在這一位置。典型的例子就是個(gè)大電子商務(wù)平臺(tái)，如淘寶、京東等都是選擇了F式。當(dāng)然這一布局的限制相對(duì)而言較多，因?yàn)椴皇撬械钠髽I(yè)都可以選擇，而是那些信息量更為豐富，而且是有著巨大樹(shù)形結(jié)構(gòu)的網(wǎng)站才會(huì)選擇這種類(lèi)型的布局。
企業(yè)網(wǎng)站應(yīng)該怎么進(jìn)行頁(yè)面的布局
分享到:
對(duì)于網(wǎng)站建設(shè)的工作人員來(lái)說(shuō)，網(wǎng)站頁(yè)面布局的重要性比什么都重要。一個(gè)合理的網(wǎng)頁(yè)布局不僅會(huì)受到百度搜索引擎的青睞，更重要的作用是，可以提高用戶對(duì)網(wǎng)站的體驗(yàn)。用戶的體驗(yàn)度提高了，對(duì)網(wǎng)站的推廣也有一定的好處，對(duì)網(wǎng)站推廣人員來(lái)說(shuō)，比較輕松?，F(xiàn)在網(wǎng)頁(yè)制作大多都是營(yíng)銷(xiāo)類(lèi)型的網(wǎng)站，企業(yè)網(wǎng)站建設(shè)已經(jīng)不是以前只為打廣告而建設(shè)的了，企業(yè)想要從網(wǎng)站中獲取更多的經(jīng)濟(jì)利益。網(wǎng)站用戶的高體驗(yàn)度會(huì)給網(wǎng)站帶來(lái)高的轉(zhuǎn)化率。所以當(dāng)談及如何建立網(wǎng)站的時(shí)候，企業(yè)往往都會(huì)在網(wǎng)站布局的建設(shè)上都愿意花很大的工夫。
根據(jù)不同的優(yōu)秀網(wǎng)站進(jìn)行總結(jié)，今天凡科網(wǎng)站建設(shè)就來(lái)分享一些網(wǎng)站建設(shè)在布局上需要注意的問(wèn)題。
靠前、網(wǎng)站的布局要優(yōu)先考慮目標(biāo)用戶的體驗(yàn)
不少站長(zhǎng)為了能夠突出企業(yè)的特色，在網(wǎng)站顯眼的地方會(huì)設(shè)置公司的廣告或者是企業(yè)的一些介紹，聯(lián)系方式等等。這樣的設(shè)計(jì)，只是方便了外行的用戶，對(duì)他們而言感覺(jué)確實(shí)良好。這樣企業(yè)就會(huì)認(rèn)為建站公司在網(wǎng)頁(yè)制作的時(shí)候考慮到了企業(yè)的利益。但是卻忽略了一個(gè)問(wèn)題，網(wǎng)站的目標(biāo)用戶訪問(wèn)網(wǎng)站時(shí)的體驗(yàn)，很多用戶對(duì)這樣設(shè)置非常反感。因?yàn)橛脩粝肓私獾氖瞧髽I(yè)產(chǎn)品或者能提供什么服務(wù)。而且這樣設(shè)置很浪費(fèi)網(wǎng)站的資源。用戶都是通過(guò)對(duì)產(chǎn)品的了解，然后才決定與企業(yè)合作的。而網(wǎng)站顯眼的地方卻不是這些，用戶體驗(yàn)自然就不好了，網(wǎng)站也談不上什么轉(zhuǎn)化率了。所以網(wǎng)站的布局要注意三個(gè)方面：1、網(wǎng)頁(yè)靠前的位置要設(shè)置對(duì)用戶有價(jià)值的內(nèi)容；2、用吸引眼球的標(biāo)題以及描述展示網(wǎng)站；3、要考慮搜索引擎的搜索習(xí)慣，代碼要在靠前的位置。
第二、網(wǎng)站的布局可以采用分類(lèi)分局，保持網(wǎng)頁(yè)的秩序
互聯(lián)網(wǎng)中有很多分類(lèi)網(wǎng)站，這樣可以彌補(bǔ)大型網(wǎng)站的一些不足。大型網(wǎng)站的信息非常多，用戶很難找到對(duì)自己有用的信息，所以分類(lèi)網(wǎng)站就開(kāi)始產(chǎn)生了。作為一個(gè)企業(yè)，建設(shè)一個(gè)大型網(wǎng)站是比較困難的，所以我們可以參考分類(lèi)信息網(wǎng)站的網(wǎng)頁(yè)制作方式。將網(wǎng)站所有的內(nèi)容進(jìn)行分類(lèi)，這樣不僅方便了用戶的瀏覽，信息的查找，在網(wǎng)站的后期發(fā)展中，也方便了網(wǎng)站的推廣。企業(yè)網(wǎng)站可以按照價(jià)格、產(chǎn)品的類(lèi)型、行業(yè)、時(shí)間等方式進(jìn)行分類(lèi)。
第三、簡(jiǎn)單清晰的網(wǎng)站布局內(nèi)容
不少網(wǎng)站都有一個(gè)習(xí)慣，推廣人員為了能夠在短時(shí)間內(nèi)將網(wǎng)站推廣出去，增加搜索引擎對(duì)網(wǎng)站的收錄，會(huì)大量添加網(wǎng)站的信息內(nèi)容。雖然在短時(shí)間內(nèi)可以起到優(yōu)化的作用，但是對(duì)網(wǎng)站的長(zhǎng)期發(fā)展就不利了。所以網(wǎng)站的布局內(nèi)容，一定要簡(jiǎn)單明了，不要添加與行業(yè)無(wú)關(guān)的內(nèi)容。這樣既能讓網(wǎng)頁(yè)制作變得更加簡(jiǎn)約，同時(shí)用戶對(duì)網(wǎng)站的體驗(yàn)也比較好。
信息化時(shí)代不斷在變化，網(wǎng)站建設(shè)的根本也要不斷變化。網(wǎng)站建設(shè)不僅要考慮到搜索引擎的需求，更重要的是網(wǎng)站建設(shè)能夠?yàn)槠髽I(yè)帶來(lái)高效益，因此，網(wǎng)站建設(shè)要從用戶體驗(yàn)出發(fā)。
網(wǎng)頁(yè)布局與樣式
1、布局
不要使用<table>進(jìn)行布局，因?yàn)椋簍able可能會(huì)在所有tr、td加載完成以后才顯示，所以加載完成之前界面是一片空白；用table布局會(huì)將布局方式寫(xiě)在html中，違反了“語(yǔ)義性”原則；用table會(huì)影響搜索引擎的抓取，不利于SEO。因此Table用來(lái)表達(dá)真是表格狀數(shù)據(jù)的東西，布局用Div(層)+Css來(lái)做,Div用來(lái)圈定元素，CSS用來(lái)定義元素的位置。
Div+CSS就是將要布局的內(nèi)容用<div>切成塊，然后使用css描述每個(gè)塊的大小、位置等。
2、樣式
ldisplay：元素是否顯示，可選值none（不顯示）、block （顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。）、inline（顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符 ）等。
lcursor，鼠標(biāo)在元素上時(shí)顯示的光標(biāo)圖標(biāo)，可選值：cursor（默認(rèn)光標(biāo)）、pointer（超鏈接上的手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。
lLI不顯示圓點(diǎn)：LIST-STYLE-TYPE: none;一般設(shè)在li或者ul上。
l應(yīng)用：圖片：不顯示邊框，見(jiàn)備注。
3、CSS浮動(dòng)
l浮動(dòng)
?在使用div布局的時(shí)候，發(fā)現(xiàn)每個(gè)div都是按照塊的方式出來(lái)的，不利于頁(yè)面的布局，所以CSS就提出元素的浮動(dòng)技術(shù)，可以使得塊元素在浮動(dòng)的情況下在同一行中出現(xiàn)。
l特點(diǎn)
?元素在浮動(dòng)的時(shí)候遇到父容器的邊框就會(huì)卡住
?如果子元素和父元素同時(shí)向相反的方向浮動(dòng)，那么先浮動(dòng)父元素，然后子元素在父親元素的內(nèi)部浮動(dòng)
?如果父元素沒(méi)有浮動(dòng)而且包含了浮動(dòng)的子元素，那么浮動(dòng)的元素就會(huì)脫離文檔流(重點(diǎn))
4、lz-index
? CSS 中的 z-index 屬性用于設(shè)置節(jié)點(diǎn)的堆疊順序, 擁有更高堆疊順序的節(jié)點(diǎn)將顯示在堆疊順序較低的節(jié)點(diǎn)前面, 這是我們對(duì)z-index 屬性普遍的認(rèn)識(shí).
l注意
?z-index只能作用在已經(jīng)定位的元素對(duì)象上。
?使用javascript控制這種使用”-”作為連接符的樣式屬性時(shí)必須使用駝峰的命名方式：
var element = document.getElementById(”box”);
element.style.position = “relative”;
element.style.zIndex = “9999″;
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
