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