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

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

beurre&sel

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

hackery,maths&design

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

thedrawingroom

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

welovenoise

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

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

一、使頁面載入得更快

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

二、降低流量費用

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

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

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

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

推薦閱讀