簡(jiǎn)單的單頁網(wǎng)站布局簡(jiǎn)約而不失創(chuàng)意，同時(shí)使用簡(jiǎn)單方便。div+css布局已經(jīng)成為當(dāng)前網(wǎng)頁布局的潮流，通過盒子模型和浮動(dòng)、定位來控制頁面布局比以前的表格布局容易控制多了。如何用dreamweaver實(shí)現(xiàn)div+css網(wǎng)頁布局呢。小編為你分享我的經(jīng)驗(yàn)。

網(wǎng)頁布局——新穎的網(wǎng)頁布局設(shè)計(jì)

beurre&sel

這個(gè)網(wǎng)站實(shí)在漂亮。背景為自動(dòng)播放的幻燈片，主導(dǎo)航欄位于頁面頂部。隨著鼠標(biāo)向下滾動(dòng)，導(dǎo)航欄會(huì)縮小但仍然固定在頁面頂部。在其下方是五彩繽紛的公司自產(chǎn)餅干清單，同時(shí)也是子菜單中的按鈕。隨便點(diǎn)擊一種口味的餅干，就會(huì)有相關(guān)信息覆蓋子菜單，以便用戶點(diǎn)擊瀏覽各種口味。頂部的導(dǎo)航欄和子菜單固定在頁面三欄網(wǎng)格內(nèi)的中間一欄，可以保證用戶的注意力始終集中在中心位置。

hackery,maths&design

在頁面加載的同時(shí)，會(huì)有一個(gè)有趣的3d線性動(dòng)畫填充屏幕。箭頭代表著動(dòng)感與流暢，并可鼓勵(lì)用戶向下方內(nèi)容滾動(dòng)鼠標(biāo)。下方的內(nèi)容分布在三欄網(wǎng)格中，其中兩欄為主要內(nèi)容，另有一個(gè)較小的側(cè)邊欄。但是這種布局并不會(huì)讓產(chǎn)生局限感，相反帶來比較開放的感覺，其原因是使用了寬敞的空間和圓角。這個(gè)網(wǎng)站的布局讓用戶感到非常舒服。

thedrawingroom

個(gè)人非常喜歡這個(gè)布局，簡(jiǎn)單但又不失有趣。這家工作室將自己的作品以大小不同，相互堆砌的菱形展示于頁面之上。最中央的菱形為公司標(biāo)志，表現(xiàn)并不突兀，不會(huì)分散對(duì)作品的注意力。把鼠標(biāo)懸停在任意一個(gè)菱形上時(shí)，其中會(huì)顯示該作品的說明介紹。這個(gè)簡(jiǎn)單的單頁網(wǎng)站布局簡(jiǎn)約而不失創(chuàng)意，同時(shí)使用簡(jiǎn)單方便。

welovenoise

lukefinch的作品集具有有趣且友善的布局。這一網(wǎng)站看似凌亂四散，但卻打破了過于簡(jiǎn)潔沒有新意的局面。過渡效果可以讓你對(duì)其項(xiàng)目有所簡(jiǎn)單了解，另外還可以使用箭頭進(jìn)行導(dǎo)航。左上角的心形是整個(gè)網(wǎng)站的導(dǎo)航中心，其可在主頁上旋轉(zhuǎn)變成一個(gè)“i”。在瀏覽網(wǎng)站時(shí)，可以在心形上懸停鼠標(biāo)退出。

css在網(wǎng)頁布局時(shí)好處與壞處比拼

一、使頁面載入得更快

由于將大部分頁面代碼寫在了css當(dāng)中，使得頁面體積容量變得更小。相對(duì)于表格嵌套的方式，div+css將頁面獨(dú)立成更多的區(qū)域，在打開頁面的時(shí)候，逐層加載。而不像表格嵌套那樣將整個(gè)頁面圈在一個(gè)大表格里，使得加載速度很慢。

二、降低流量費(fèi)用

頁面體積變小，瀏覽速度變快，這就使得對(duì)于某些控制主機(jī)流量的網(wǎng)站來說是最大的優(yōu)勢(shì)了。

三、修改設(shè)計(jì)時(shí)更有效率

由于使用了div+css制作方法，在修改頁面的時(shí)候更加容易省時(shí)。根據(jù)區(qū)域內(nèi)容標(biāo)記，到css里找到相應(yīng)的id，使得修改頁面的時(shí)候更加方便，也不會(huì)破壞頁面其他部分的布局樣式。

如何更有效、更合理的運(yùn)用web2.0設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長(zhǎng)時(shí)間的學(xué)習(xí)和鍛煉。而如何將div+css運(yùn)用的更好，我覺得這需要通過不斷的實(shí)踐和體檢，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù)。如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們文軍營(yíng)銷的官網(wǎng)。

推薦閱讀