專題講座網(wǎng)頁設(shè)計與構(gòu)圖(1)-網(wǎng)頁的構(gòu)圖(編輯修改稿)
2025-10-08 14:06 本頁面
【文章內(nèi)容簡介】 夠在視屏范圍。 在網(wǎng)頁設(shè)計中，我們可在 HTML 語言里控制當(dāng)前頁面內(nèi)所有對象距離頁面左邊框的距離，在默認(rèn)的狀態(tài)下，頁面中的所有對象都距邊框 10 像素。 如圖： 所以現(xiàn)在頁面的安全寬度應(yīng)該是 760 像素。 而當(dāng)我們更改了這一默認(rèn)值以后，把左邊距改為 0的時候， HTML 語法： body bgcolor=FFFFFF text=000000 leftmargin=0 /body 效果如圖： 那么這個時候的頁面安全寬度應(yīng)該就是 780 像素了。 一般來說，我們在設(shè)計頁面的時候是要避免在瀏覽器的窗口下方出現(xiàn)水平滾動條的，這樣訪問者必須拖拽水平滾動條才能瀏覽到 網(wǎng)頁的全部內(nèi)容，那么這張網(wǎng)頁設(shè)計的并不成功，且不管它是多么的漂亮。 專題講座：網(wǎng)頁設(shè)計與構(gòu)圖 (4)網(wǎng)頁中最常見的構(gòu)圖布局 網(wǎng)校教師：劉濤 網(wǎng)頁的構(gòu)圖布局與平面構(gòu)圖布局有著很大的相似之處，但是因?yàn)榧夹g(shù)的局限，網(wǎng)頁構(gòu)圖遠(yuǎn)不如平面設(shè)計那樣揮灑自如。接觸過平面設(shè)計的朋友應(yīng)該知道，我們在平面設(shè)計中想把某一對象放置到某一位置的時候只需要簡單的拖拽就可以完成。但是在網(wǎng)頁設(shè)計中我們想對某一對象進(jìn)行定位的話就不是這么簡單的了，必須有 HTML 語言的支持才行。所以在進(jìn)行網(wǎng)頁設(shè)計的時候，除了要有好的創(chuàng)意，還應(yīng)該考慮到技術(shù)上 的可行性。 常見的網(wǎng)頁布局有以下幾種：左右對稱結(jié)構(gòu)布局、 “ 同 ” 字型結(jié)構(gòu)布局、“ 回 ” 字行結(jié)構(gòu)布局、 “ 匡 ” 字行結(jié)構(gòu)布局、 “ 廠 ” 字行結(jié)構(gòu)布局、自由式結(jié)構(gòu)布局、 “ 另類 ” 結(jié)構(gòu)布局等，這些只是我個人的總結(jié)，還有待進(jìn)一步完善。 A、 左右對稱結(jié)構(gòu)布局 這類布局是采用分割屏幕的方式實(shí)現(xiàn)的，是網(wǎng)頁布局結(jié)構(gòu)中最為簡單的構(gòu)圖。一般來講，頁面的左半部設(shè)置欄目導(dǎo)航，而右半部分則列舉多篇重要內(nèi)容的概要或者一整篇詳細(xì)內(nèi)容，這有利于訪問者直觀另類，盡管是被動接受，但頁面的信息含量較低，不適合大型專業(yè)化的網(wǎng)站。 見下圖 B、 “ 同 ” 字型結(jié)構(gòu)布局 從 “ 同 ” 字字體形狀上也可以直接看出該類頁面的布局是以頁面頂部為主導(dǎo)航條（主菜單），頁面的左右兩側(cè)分別列出二級欄目條或綜合性熱點(diǎn)區(qū)（如廣告條、搜索引擎、友情鏈界、登錄面板、注冊按鈕等）。這種是互連網(wǎng)上常見的布局，其優(yōu)點(diǎn)是直觀、條理、均衡。缺陷是版式呆板、僵化。在采用這種布局時要注意色彩的和諧搭配，通過巧妙的用色，能夠調(diào)節(jié)頁面的整體韻律。 C、回字型結(jié)構(gòu)布局 所謂 “ 回 ” 字型結(jié)構(gòu)，就是指以 “ 同 ” 字型結(jié)構(gòu)布局為基礎(chǔ)，又在頁面的底部增加了一條橫向的菜單（或廣告條、或本站的另一大版塊的超鏈接區(qū)）。 這樣做的目的是為了充分利用有限的頁面空間，增大主頁面的信息量，縮短了和正文鏈接的路徑。使訪問者比較便捷、直觀地瀏覽所需要的信息，少走彎路。其缺點(diǎn)是頁面擁 擠、四面封閉。這種頁面布局在我過網(wǎng)站中出現(xiàn)的較多，這大概是受 “ 四合院文化 ” 的影響吧。 D、 “ 匡 ” 字型結(jié)構(gòu) “ 匡 ” 字型結(jié)構(gòu)布局其實(shí)是 “ 同 ” 字型結(jié)構(gòu)布局的變形，將 “ 同 ” 字型結(jié)構(gòu)逆時針旋轉(zhuǎn) 90 度，就是這種布局?；蛘哒f是把 “ 回 ” 字型結(jié)構(gòu)布局的頁面上的右邊的欄目條刪除后所得到的一種結(jié)構(gòu)布局。這種布局結(jié)構(gòu)克服了 “ 回 ” 字型結(jié)構(gòu)封閉的缺陷，所列信息量和 “ 同 ” 字型結(jié)構(gòu)大體相同。
高考資料相關(guān)推薦
鄂ICP備17016276號-1