正文

網(wǎng)頁布局結構有哪些（網(wǎng)頁布局結構有哪些）

發(fā)布時間：2023-04-19 04:02:49 稿源：創(chuàng)意嶺閱讀： 127

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于網(wǎng)頁布局結構有哪些的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關鍵詞，就能返回你想要的內(nèi)容，越精準，寫出的就越詳細，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解SEO相關業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、網(wǎng)頁制作的結構布局有哪些
2、網(wǎng)站的結構一般有哪些？
3、網(wǎng)頁布局的方法。
4、網(wǎng)頁設計的布局有哪幾種

網(wǎng)頁布局結構有哪些（網(wǎng)頁布局結構有哪些）

一、網(wǎng)頁制作的結構布局有哪些

學習前端第一步：劃分網(wǎng)頁結構，網(wǎng)頁的結構的劃分應該遵循哪些原則，如何去劃分網(wǎng)頁的結構呢？

對于一個前端初學者，第一步就是要學會如何劃分一個網(wǎng)頁的結構。當設計師給到你一張設計圖，你需要根據(jù)這張圖做出一個符合標準的頁面，這里所說的標準，即w3c標準，參考w3school在線教程。那么做出一個完整的符合標準的網(wǎng)頁第一步就是要劃分網(wǎng)頁的結構。一般來講，網(wǎng)頁結構的劃分需要遵循幾個原則：

一、自上而下原則

因為瀏覽器在渲染一個網(wǎng)頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉(zhuǎn)換為頁面顯示內(nèi)容的過程。瀏覽器會自上而下讀取你寫的代碼并自上而下的顯示。

二、從左至右原則

在自上而下的同時，同一行的內(nèi)容是從左至右渲染，所以在劃分結構的時候有從左至右的順序。

三、一像素原則

這個原則對于初學者來說必須堅持，但也并不是說無論什么時候都得死認這個道理。前期我們在劃分網(wǎng)頁的時候一定要劃分準確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，里面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那么必然第二個盒子會換到下一行進行顯示。

在說完上述三個原則過后有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我截取這個網(wǎng)頁的一部分，圖片和文字其實是屬于一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內(nèi)容，水平分為四部分：

我們說一般網(wǎng)頁有header（頭部區(qū)）、banner（廣告橫幅區(qū)）、main（主體內(nèi)容區(qū)）、footer（底部區(qū)），單頁并非所有網(wǎng)頁都是這樣，有些網(wǎng)頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner，有些網(wǎng)頁除了這幾部分還會有比如icon等區(qū)域由喜歡將他們劃分到main中去。

說到main區(qū)，這個結構劃分就多種多樣了。有些網(wǎng)頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，里面再嵌套一個inner盒，給可視區(qū)域的固定寬度并居中。如果沒有通欄的背景那么這個時候是不需要給通欄的盒子，直接main區(qū)給固定寬度居中就好了。

那么在結構劃分的時候有些盒子區(qū)域之間的空隙怎么去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候并不會造成影響，因為空白區(qū)域在都可以用代碼來實現(xiàn)。不過一些文字區(qū)域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。

另外，有些地方可能會有一部分小圖片或者一部分內(nèi)容覆蓋在外面大盒子上，這部分在劃分結構的時候可以不用管，因為后期在代碼實現(xiàn)的時候我們可以利用定位技術實現(xiàn)。

二、網(wǎng)站的結構一般有哪些？

網(wǎng)站的目錄結構

網(wǎng)站的目錄是指在創(chuàng)建網(wǎng)站時建立的目錄，我們要根據(jù)網(wǎng)站的主題和內(nèi)容來分類規(guī)劃，不同的欄目要對應不同的目錄，在各個欄目目錄下我們也要根據(jù)內(nèi)容的不同對其劃分不同的分目錄，比如說頁面圖片放到images目錄下，新聞放到news目錄下，數(shù)據(jù)庫放到database目錄下等等。同時要注意目錄的的層次不宜太深，一般不要超過三層，另外給目錄起名的時候要盡量使用能表達目錄內(nèi)容的英文或漢語拼音，這樣會更加方便日后的管理維護。

網(wǎng)頁的構成和布局

不同主題的網(wǎng)站對網(wǎng)頁內(nèi)容的安排會有所不同，但大多數(shù)網(wǎng)站首頁的頁面結構都會包括頁面標題、網(wǎng)站LOGO、導航欄、登錄區(qū)、搜索區(qū)、熱點推薦區(qū)、主內(nèi)容區(qū)和頁腳區(qū)(如圖)，其他頁面不需要設置如此復雜了，一般由頁面標題、網(wǎng)站LOGO、導航欄、主內(nèi)容區(qū)和頁腳區(qū)等構成。

搞網(wǎng)站設計不是把所有內(nèi)容放置到網(wǎng)頁中就行了，還需要我們把網(wǎng)頁內(nèi)容進行合理的排版布局，以給瀏覽者賞心悅目的感覺，增強網(wǎng)站的吸引力。在設計布局的時候我們要注意把文字、圖片在網(wǎng)頁空間上均勻分布并且不同形狀、色彩的網(wǎng)頁元素要相互對比，以形成鮮明的視覺效果。我們常見的布局結構有 “同”字形布局、“國”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局等。

1. “同”字形布局：所謂“同”字形結構，就是整個頁面布局類似“同”字，頁面頂部是主導航欄，下面左右兩側是二級導航條、登錄區(qū)、搜索區(qū)等，中間是主內(nèi)容區(qū)，如http://www.china-channel.com。

2. “國”字形布局：它是在“同”字形布局上演化而來的，它在保留“同”字形的同時，在頁面的下方增加一橫條狀的菜單或廣告，如http://www.yesky.com。

3. “匡”字形布局：這種布局結構去掉了“國”字形布局的右邊的邊框部分，給主內(nèi)容區(qū)釋放了更多空間，內(nèi)容雖看起來比較多，但布局整齊又不過于擁擠，適合一些下載類和賀卡類站點使用，如http://nj.onlinedown.net。

4. “三”字形布局：一般應用在簡潔明快的藝術性網(wǎng)頁布局，這種布局一般采用簡單的圖片和線條代替擁擠的文字，給瀏覽者以強烈的視覺沖擊，如http://www.cphoto.com.cn。

5. “川”字形布局：整個頁面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中，最大限度地突出主頁的索引功能，一般適用在欄目較多的網(wǎng)站里，如http://www.ezIT.com.cn。

三、網(wǎng)頁布局的方法。

網(wǎng)頁布局方法很多,根據(jù)各人不同的喜好布局也不同:通常的布局方法有以下幾種:

一.通過表格來布局

表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響

二.通過層疊樣式表來布局

CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS對于初學者來說顯得有點復雜，但它的確是一個好的布局方法。你曾經(jīng)無法實現(xiàn)的想法利用CSS都能實現(xiàn)

三.通過框架來布局