[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]
[color=#663300]一、Div標籤與CSS[/color]
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以
Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以
HTML為架構設定,CSS為風格設定,一個建築網頁架構,一個塑造網頁美感。
傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/
[color=#663300]二、單欄版型的範例[/color]
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。
[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]
[color=#663300]三、DIV架構與尺寸分析[/color]
1.以DIV建構網頁基本架構
以下為最基本的網站排版架構
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]
利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]
2.尺寸規劃設定
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]
利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]
[color=#663300]四、以單純的HTML與CSS架構的方法[/color]
以上的DIV架構,直接以HTML的語法可寫成以下語法
步驟如下:
[步驟1] 建立新的html檔,命名為 index.html 並加入下面內容: