優品推薦

本文出自:http://tw.myblog.yahoo.com/jw!JQ3OWTGfEQ7iz1M_k99W/article?mid=1099＆prev=1100＆next=1098＆l=a＆fid=7 網絡轉發,如有侵權,敬請告知刪除!
楊冪腳臭門公館襪子專賣店冬天腳臭
CSS-利用文件創造報紙風格的版面設計
利用文件創造報紙風格的版面設計文件 4 欄排版 float
CSS 版本 CSS 2.1
支援瀏覽器 IE 6 ○
IE 7 ○
Opera ○
Firefox ○
Safari ○
本範例是試做報社新聞網站的首頁版行, 首先映入眼簾的是一覽無遺的設計。儘管目前XGA 的主流尺寸已在 ( 1027 × 768 pixel )以上, 但若瀏覽者無法在瀏覽器視窗中看到完整的資訊顯示時, 資訊的傳達效果還是會有所欠缺。3 欄式、4 欄式的版面設計是目前此類網站設計的主流, 多欄式的優點是同時也能保有較大的廣告空間。此範例採用報紙格式的標準版面編排, 也就是透過「 float 屬性」來進行版面編排設計。1.文件的結構化
首先讓我們來進行文字部份格式的結構化吧。由於我們採用的是模仿報紙格式的設計, 因此以段落為主的編排結構來設計；分為「頁首」、「內容」、「頁尾」三項, 再用 id 命名為「 building 」的 %26lt;div%26gt; 全部群組起來。再將「內容」中分設導覽和四個內容區塊： local-navigation , 主要內容, 次內容, 廣告。最後再依照這四個區塊來編制段落。
首先將文字內容用XHTML結構化%26lt;div id="building"%26gt;
%26lt;div id="header"%26gt;
%26lt;h1%26gt;大標題?%26lt;/h1%26gt;
%26lt;h2%26gt;中標題?%26lt;/h2%26gt;
%26lt;h3%26gt;小標題?%26lt;/h3%26gt;
%26lt;/div%26gt;
%26lt;div id="contents"%26gt;
%26lt;div id="navigation"%26gt;???????%26lt;/div%26gt;
%26lt;hr /%26gt;
%26lt;div id="local-navi"%26gt;???????????%26lt;/div%26gt;
%26lt;div id="main-contents"%26gt;???????? %26lt;/div%26gt;
%26lt;div id="sub-contents"%26gt;???????%26lt;/div%26gt;
%26lt;div id="advertisement"%26gt;?告%26lt;/div%26gt;
%26lt;hr /%26gt;
%26lt;/div%26gt;
%26lt;div id="footer"%26gt;?????%26lt;/div%26gt;
%26lt;/div%26gt;
2.設定置中對齊
接著我們將頁面中的內容配置於瀏覽器的中央。在將所有元素群組化的「 building 」設定中, 我們將它設定為「 width:960 px ; ( 寬度960px )」。置中的部份則以「 margin:0 auto; 」來執行。「 margin: 上下設為 0、左右設為 auto (自動)」, 在這裡表示置中對齊。此外, 若擔心在 IE 5 及 5.5 裡無法順利呈現置中對齊的效果, 則可在 body 中加入「 text-align:center; 」、#building 中設定「 text-align:left; 」的語法來處理以上問題。 IE 6 以上的版本則不需進行此相容性的設定。
body {
text-align:center; /* IE 5.x bug fix */
}
#building {
width:960px;
margin:0 auto;
padding:0;
text-align:left; /* IE 5.x bug fix */
border:1px solid #666;
}
3.導覽列的指定
本範例中的導覽列並非位在頁首區塊, 而是被包含在內容區塊中。要將導覽項目進一步做視覺化處理, 必須在被定義為清單的條列式項目上套用 CSS 設定。在此選擇使用 ul、il 元素這種最常見的手法來定義清單項目。我們把清單元素的各項目使用 div 元素加以群組化, 加上 id 名為「 navigation 」。接著在 ul 設定「左側的留白 ( padding-left )」、「字型大小 ( font-size)」、「不顯示項目符號 ( list-style:none )」、「文字間隔 ( letterspacing)」。對 li 設定「 float:left; 」讓各個清單項目水平排列。對 a則設定「 display:block; 」以確保滑鼠指標的反應區塊。
%26lt;div id="navigation"%26gt;
%26lt;ul%26gt;
%26lt;li%26gt;%26lt;a href="http://admn.net/"%26gt;ARTS%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://admn.net/"%26gt;BUSINESS%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://admn.net/"%26gt;TECHNOLOGY%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://admn.net/"%26gt;STYLE%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;li%26gt;%26lt;a href="http://admn.net/"%26gt;HEALTH%26lt;/a%26gt;%26lt;/li%26gt;
%26lt;/ul%26gt;
%26lt;/div%26gt;

#navigation {
float:left;
width:100%;
margin:0;
border:solid #ddd;
border-width:1px 0;
}

#navigation ul {
padding-left:16px;
font-size:0.8em;
list-style:none;
letter-spacing: 0.1em;
text-transform:lowercase;
}

#navigation li {
float:left;
margin:0;
padding:0;
line-height:normal;
text-indent:0;
}

#navigation a {
display:block;
margin:0;
padding:4px 10px;
border:solid #ddd;
border-width:0 1px 0 0;
text-decoration:none;
white-space:nowrap;
}

4.欄編制的表現
內容區塊 4 欄的編制作業, 主要就是決定各區塊的寬度、再使用 float 屬性予以浮動化設定。將內容區塊分為局部導覽、主要內容、次要內容、廣告四個種類, 最後分別加上「 local-navi 」、「 main-contents」、「 sub-contents 」、「 advertisement 」 id 名。區塊的寬度, 由左開始設定為 164、424、164、144 px 。 4個元素全部以「 float:left; 」語法表示, 從左開始按順序做橫向版面的編排。若使用 float 做區塊編排, 可能會對後續元素產生排版上的影響。通常我們會利用 clear 語法來解除 float的效果。在這個範例中, 則是對清單的 hr 元素加入「 clear:both 」設定。這邊的 %26lt;hr%26gt; 元素, 我們捨棄瀏覽器預設的功用 (水平線), 而是拿來當做選單導覽列和內容間區塊之間的隱形「分隔線」；所以利用 CSS 設定為不顯示、並用來清除 float 屬性 ( visibility:hidden; clear:both; )。
%26lt;div id="contents"%26gt;
%26lt;div id="navigation"%26gt;???????%26lt;/div%26gt;
%26lt;hr /%26gt;
%26lt;div id="local-navi"%26gt;???????????%26lt;/div%26gt;
%26lt;div id="main-contents"%26gt;????????%26lt;/div%26gt;
%26lt;div id="sub-contents"%26gt;???????%26lt;/div%26gt;
%26lt;div id="advertisement"%26gt;?告%26lt;/div%26gt;
%26lt;hr /%26gt;
%26lt;/div%26gt;

#main-contents {
width:424px;
float:left;
}

#local-navi, #sub-contents {
width:164px;
float:left;
}

#advertisement {
width:144px;
float:left;
}

/* float clear */
#contents hr {
clear:both;
visibility:hidden;
display:none;
height:0;
margin:0;
padding:0;
border:0;
}

技法特點此範例採取最為簡易的方法, 也就是 %26lt;hr%26gt; 來執行清除 float 的工作, 雖然不是很高明的方法, 但卻是最輕鬆的處理方式。在 Web 頁面的原型製作 (prototype) 上, 反覆嘗試這種方式是很有用的。像這種多欄式的版面設計, 現在仍有不少人使用 %26lt;t a b l e%26gt; 來拉Layout；但就工作流程 (視覺設計和程式人員的協同作業) 上和可存取性上的考量, 若改使用 CSS 效益會更大。剛開始製作的速度雖緩慢, 但應用 CSS 取代表格式的版面設計仍是未來的趨勢, 因此積極地開始練習接觸 XHTML CSS , 對設計師來說是好事一椿。　
5.確認網頁構造
為了表現報章風格的美觀, 我們將內文區塊分為四部分以水平方式並排, 呈現出「4 欄」的設計。在這裡, 我們再一次來確認此版型的構造。首先, 我們將條列項目以「 float:left: 」清單化, 在 hr 元素中進行 float 設定的解除。其下的四個區塊同樣也利用「 float:left: 」段落來進行編排, 同樣也在 hr 元素中進行float 設定的解除。只要把握這樣的構造原理, 在變更導覽項目或在調整段落樣式時也能輕鬆地進行處理。
參考CSS版面設計的程式庫 (Library)
CSS 2 並沒有多欄位版面設計的「段落編制」功能屬性(新版本的 CSS 3 正考慮加入)。但以 float 屬性中設定區塊浮動化向左右對齊, 這種類似段落編制功用則已包含其中。CSS 版面設計, 基本上是建立在格子與線條基礎上的。若是想直接參考他人的版面設計, 不妨試試 Yahoo！UI Library 所提供的「 CSS Grid Builder 」Yahoo! UI Library : Grids CSS
http://developer.yahoo.com/yui/grids/CSS Grid Builder 的版面設計編輯畫面