今天要分享的東西,也是網頁設計很基本的排版設計,以WORDPRESS來看,就是一塊header+content+sidebar+footer的一種排版方式居多,所以今天這裡要先介紹基本類似的兩欄式排版方式,先從基礎的學起,以後在用其它東西時,會比較得心應手,話不多說,馬上開始今天的排版教學!

CSS排版教學

CSS+DIV排版

首先我們來看我們想要達到的效果,這是預覽CHROME17的畫面,

HTML原始碼

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>無標題文件</title>
<link href="指定路徑位置/text.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="total">
<div id="header"> id “header" 的內容放在這裡</div>
<div id="content"> id “content" 的內容放在這裡</div>
<div id="sidebar"> id “sidebar" 的內容放在這裡</div>
<div id="footer"> id “footer" 的內容放在這裡</div>
</div>
</body>
</html>

這是HTML原始碼,你可以用DW或NOTEPAD做測試,上次有講到<head></head>這一塊是說明插入一些東西,這邊是連結CSS,因為是本地端,所以CSS那邊看你檔案位置在那邊,用上去即可以,<body></body>裡面就是打內容,我這邊全部打div的內容,外面會用一個total是控制整體的大小,等一下看CSS碼就知道!

text.css

body{ margin:0; padding:0; }
#total{ width: 980px; margin:0 auto; }
#header{ width: 980px; margin: 0px; background:#FFFF00; }
#content{ width:560px; height:380px; float: left; background-color: #0066FF; }
#sidebar{ width: 420px; height:380px; background:#F00000; float: right; }
#footer{ width: 980px; margin: 0px; background-color: #FF9933; clear:both; }

這一段是CSS部分,

首先講body部分,兩個值都用0是因為要貼緊整個瀏覽器視窗,所以都要用0這個,下次再分享一個整個更完整的語法解釋,如果不太清楚,我會下次分享整個常用CSS的語法部分,也可從網路上直接打CSS搜尋資料,

total這一區塊是表示控制整個DIV大小,

header這邊margin主要是貼緊整個視窗,

content這一塊有設一個FLOAT,表示要讓CONTENT這一個區塊靠左,

sidebar相對的就是靠右,

footer這一區塊有一個clear both,主要不要讓div整個浮動位置移上去,其它的東西比較基本,真得不懂再問吧!

最後分享兩張在其它瀏覽器測試畫面,分別是IE9和FIREFOX 10的畫面,

IE9

FIREFOX 10

今天沒有測試比較舊的瀏覽器,因為這是純粹文章教學,如果平常做網頁,記得連比較舊的瀏覽器都要做測試,所以其實做網頁是相當需要基本功和努力練習的,以上分享到這邊! 

熱門相關文章

網頁設計教學系列-從基本HTML語法開始!
最近我自己想了一下,因為自己平常都比較再研究HTML和WORDPRESS這一塊,加上時代的趨勢,HTML5的語法學會又是勢在必行,所以之後寫的文章會比較偏向網頁設計和一些網路行銷的東西,CHROME和FB社群教學有一些新的發現還是會陸續的寫,以及一些新的科技快訊等等的,畢竟我們要知道現在時代發生什麼事情,來看看今天最基本的教學。 HTML基本語法 今天分享的東西真得是網頁設計中基本的基本,但是就以網頁設計長久角度來講,這些基本功是要很紮實必須要會的,最後我也會分享一些基本HTML語法的網站,讓比較基礎者的人,可以更快的上手! HTML文件類型 首先我們看到這張圖, 最上面的文件類型宣告,也就是宣告這是什麼類型的網頁,像HTML就像圖片中的寫法一樣,分享一下HTML5的開頭是怎麼寫的,"<!DOCTYPE HTML>",相當簡短簡單,那你會問DOUBLE冠說,怎麼不分享HTML5語法開始,凡是有循序漸進,另一方面HTML都不懂得話,再學HTML5應該是完全看不懂,因為語法整體都不太一樣! <head></head>這一段就是要宣告一些動態變數,像有時候CSS也可以寫在這邊,或者是一些javascrip、jquery等等,都可以寫在這邊,之後再寫在<body></body>網頁內容部分去呼叫就可以,所以<body></body>就是指整體網頁呈現出來的感覺! CSS外部連結 上面這一張圖是WORDPRESS外部連結CSS,通常都是連結到style.css那邊,另外如果像DW用的本機端測試這些,它會像這張圖這樣, 基本語法測試 像我這邊在body裡面打一個<p>開始,如果你要打入一些字,在原始碼你必須打入在<p></p>的中間,或者是像<span></span>這種也可以,我這邊打一些字做測試, 呈現出來的效果就是這樣子, 如果你要讓它有顏色,原本是<p></p>,打成<p style="color:#000"></p>,中間再插入一些文字,文字顏色就會改變了, 呈現出來的效果, 如果最後你要讓它呈現在中間,<p style="text-align:center;color:#000"></p>中間再插入一些文字就可以了,   最後講到HTML語法是很基本的功夫,所以這邊我會分享幾個網站讓大家去自學一下,因為之後分享的文章對初學者來說,可能比較難懂,不過我還是會想辦法看怎麼呈現,會讓每一個人容易了解,因為自己現在也正在學,就順便分享給大家,也可以一起討論看有沒有什麼問題,以上的分享希望你會喜歡! HTML教學 HTML教學導覽:按這裡 飛肯設計:按這裡 HTML:按這裡
繼續閱讀
網頁設計教學系列-從基本HTML語法開始!

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 日期:2012/02/25

    隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本