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

1、使用表格布局頁(yè)面

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

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

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

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

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

(1)“國(guó)”字型布局

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

(2)“廠”字型布局

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

(3)“框架”型布局

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

新建的框架網(wǎng)頁(yè),實(shí)際上是生成一段包含不同網(wǎng)頁(yè)的框架代碼。框架只是將網(wǎng)頁(yè)分割為幾個(gè)不同的區(qū)域,每個(gè)區(qū)域裝入不同的網(wǎng)頁(yè)。與其他網(wǎng)頁(yè)布局不同的是,其他的網(wǎng)頁(yè)布局都是在一個(gè)網(wǎng)頁(yè)上實(shí)現(xiàn)的,而框架布局是在幾個(gè)不同的網(wǎng)頁(yè)上實(shí)現(xiàn)的。

(4)“封面”型布局

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

(5)Flash型布局

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

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

(6)頁(yè)面排版布局趨勢(shì)

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

當(dāng)前文章：網(wǎng)頁(yè)設(shè)計(jì)：網(wǎng)頁(yè)排版的方法
標(biāo)題網(wǎng)址：http://jinyejixie.com/news7/222007.html

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

廣告

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