在定位網(wǎng)站布局時,需要考慮到這些布局的實現(xiàn)方法。網(wǎng)頁的布局要有利于網(wǎng)頁設(shè)計時的實際操作,有些布局是很不容易實現(xiàn)的。在實際操作中,常常是使用層或表格來實現(xiàn)網(wǎng)頁的布局,這樣的方式只能實現(xiàn)網(wǎng)頁以一種區(qū)域劃分的方式布局。假如在布局時,設(shè)計了一種圓形排列的布局,這是不容易實現(xiàn)的,不利于布局的實際制作完成。

1、使用表格布局頁面

使用表格實現(xiàn)網(wǎng)頁布局是最常用的布局實現(xiàn)方式。表格可以方便地實現(xiàn)網(wǎng)頁區(qū)域的劃分。用表格嵌套的方法,可以方便地實現(xiàn)網(wǎng)頁區(qū)域的分割與組合。表格容易用邊框?qū)崿F(xiàn)很多種邊框效果,操方便。布局就是使用表格實現(xiàn)的布局。這些內(nèi)容在以后的章節(jié)中將會講解

2、使用層結(jié)構(gòu)布局

層是另一種網(wǎng)頁布局方式,與表格布局的主要優(yōu)點是可以方便地實現(xiàn)網(wǎng)頁區(qū)域的定位使用多個層,每個層固定一個區(qū)域。通過對層的位置設(shè)置實現(xiàn)網(wǎng)頁的布局表格是需要以一定的方式排列的,不同的表格與表格單元格之間存在著布局上的聯(lián)系,但是層的操作是互相獨立的。層可以更靈活地實現(xiàn)網(wǎng)頁區(qū)域的定位,不同層的位置可以互不影響地調(diào)整。需要絕對定位一個網(wǎng)頁區(qū)域時,常常使用一個層來實現(xiàn)。以后的章節(jié)將會講解層布局的內(nèi)容

3、常見的網(wǎng)頁結(jié)構(gòu)類型

在網(wǎng)頁布局設(shè)計中,根據(jù)用戶的使用習慣與設(shè)計經(jīng)驗,已經(jīng)形成了一些比較認同的布局方式。網(wǎng)頁的布局方式主要從用戶使用的方便性、界面大方美觀、網(wǎng)頁特色等方面考慮

(1)“國”字型布局

國”字型布局是一種常見的網(wǎng)頁布局。這是一個象形的說法,就是網(wǎng)頁上一般上下各有一個通幅廣告條,左面是主菜單或?qū)Ш綏l,右面放友情鏈接或其他鏈接的內(nèi)容,中間是網(wǎng)頁的主要內(nèi)容。這樣布局可以充分利用網(wǎng)頁的版面,信息量很大。一般的“國”字型網(wǎng)頁的主要布局.

(2)“廠”字型布局

廠”字型布局是將網(wǎng)頁的上部放置Logo與 Banner,在網(wǎng)站的左邊放置導(dǎo)航條與其他鏈接,在網(wǎng)站的右下方布局網(wǎng)頁的主要內(nèi)容.這種布局的好處是網(wǎng)頁的各個部分布局非常集中,可以在一個區(qū)域突出網(wǎng)頁的重點內(nèi)容,網(wǎng)頁中的內(nèi)容主次分明,很有層次感。

(3)“框架”型布局

框架”型布局是指以框架網(wǎng)頁的形式實現(xiàn)網(wǎng)頁的布局框架是在一個網(wǎng)頁中的不同區(qū)域打開幾個不同網(wǎng)頁的方法。在一個包括有框架的網(wǎng)頁中,框架會在每一個框架中打開不同的網(wǎng)頁,這樣框架就可以實現(xiàn)網(wǎng)頁的布局.框架網(wǎng)頁可以使用 Dreamweaver自動生成。如圖7-5所示,在 Dreamweaver的新建網(wǎng)頁窗口中選擇“示例中的頁”選項,并在后面的“示例文件夾”列表中選擇“框架頁”選項,即可在“示例頁列表中選擇自己所需要的框架網(wǎng)頁。

新建的框架網(wǎng)頁,實際上是生成一段包含不同網(wǎng)頁的框架代碼?？蚣苤皇菍⒕W(wǎng)頁分割為幾個不同的區(qū)域,每個區(qū)域裝入不同的網(wǎng)頁。與其他網(wǎng)頁布局不同的是,其他的網(wǎng)頁布局都是在一個網(wǎng)頁上實現(xiàn)的,而框架布局是在幾個不同的網(wǎng)頁上實現(xiàn)的。

(4)“封面”型布局

對于資料類或閱讀類、專輯類的網(wǎng)頁,常使用“封面”型布局。封面型的網(wǎng)頁常有一個精美的封面。封面使用較好效果的平面設(shè)計,并有幾個鏈接或是只有一個“進入”鏈接。用戶單擊鏈接以后可進入網(wǎng)頁的內(nèi)容封面”型網(wǎng)頁布局的網(wǎng)頁結(jié)構(gòu)常常很簡單,需要使用精美的封面效果來體現(xiàn)網(wǎng)頁的內(nèi)容。

(5)Flash型布局

Flash動畫有非常好的視覺效果,可以給用戶帶來很深的視覺印象。有些網(wǎng)站需要以一段 Flash來表現(xiàn)網(wǎng)站的內(nèi)容,可以使用Fash布局網(wǎng)頁的Fash布局常是在網(wǎng)頁的首頁放置一個較大的 Flash動畫,動畫播放完成以后,用戶單擊進入或重放動畫。用戶也可以直接跳過動畫進入網(wǎng)頁的內(nèi)容。

Flash播放完以后,常會停止在一個提示界面上,需要用戶選擇“重新播放”動畫還是“進入網(wǎng)頁用戶也可以直接單擊進入網(wǎng)頁的鏈接跳過動畫。

(6)頁面排版布局趨勢

web20是一個新興的網(wǎng)站設(shè)計技術(shù)概念。Web20的網(wǎng)頁一般使用CSS+DIV實現(xiàn)網(wǎng)頁的布局使用Ajax和XML與服務(wù)器進行數(shù)據(jù)交互。Web20網(wǎng)頁的布局更加強調(diào)網(wǎng)站的專業(yè)性與網(wǎng)站的交互性。網(wǎng)站可以體現(xiàn)出強大的功能,網(wǎng)頁在簡單的布局中也可以體現(xiàn)出強大的功能。例如,“谷歌”與“百度”就是Web2.0網(wǎng)站優(yōu)秀布局方式的代表,在一個簡單的網(wǎng)頁輸入框中可以查詢到所需要的知識。同時,在查詢結(jié)果的網(wǎng)頁中,高效地布局出用戶所需要的內(nèi)容。Google網(wǎng)站的首頁和搜索結(jié)果頁面,這種網(wǎng)頁布局是web2.0網(wǎng)頁布局的代表。網(wǎng)頁的色彩和布局非常簡潔,但可以體現(xiàn)出強大的網(wǎng)站功能和豐富的網(wǎng)站內(nèi)容。

當前文章：網(wǎng)頁設(shè)計：網(wǎng)頁排版的方法
標題網(wǎng)址：http://www.rwnh.cn/news7/222007.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、面包屑導(dǎo)航、網(wǎng)站策劃、微信公眾號、用戶體驗、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)