Div+CSS佈局入門教程 |
發佈日期:2008-05-08 |
本文出處:藍色理想 在網頁製作中,有許多的術語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關於HTML的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁佈局設計吧。 所有的設計第一步就是構思,構思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要製作的界面佈局簡單的構畫出來,以下是我構思好的界面佈局圖。 下面,我們需要根據構思圖來規劃一下頁面的佈局,仔細分析一下該圖,我們不難發現,圖片大致分爲以下幾個部分: 1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片; 根據上圖,我再畫了一個實際的頁面佈局圖,說明一下層的嵌套關係,這樣理解起來就會更簡單了。 DIV結構如下: 至此,頁面佈局與規劃已經完成,接下來我們要做的就是開始書寫HTML代碼和CSS。 接下來我們在桌面新建一個文件夾,命名爲“DIV+CSS佈局練習”,在文件夾下新建兩個空的記事本文檔,輸入以下內容:
這是XHTML的基本結構,將其命名爲index.htm,另一個記事本文檔則命名爲css.css。 下面,我們在<body></body>標籤對中寫入DIV的基本結構,代碼如下: <div id="container">[color=#aaaaaa]<!--頁面層容器-->[/color] 爲了使以後閱讀代碼更簡易,我們應該添加相關注釋,接下來打開css.css文件,寫入CSS信息,代碼如下:
/*基本信息*/ /*頁面層容器*/ /*頁面頭部*/ /*頁面主體*/ /*頁面底部*/
把以上文件保存,用瀏覽器打開,這時我們已經可以看到基礎結構了,這個就是頁面的框架了。 關於以上CSS的說明(詳細請參考CSS2.0中文手冊,網上有下載): 1、請養成良好的註釋習慣,這是非常重要的; 2、body是一個HTML元素,頁面中所有的內容都應該寫在這標籤對之內,我就不多說了; 3、講解一些常用的CSS代碼的含義: font:12px Tahoma; margin:0px; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 順序是 上 / 右 / 下 / 左,你也可以書寫爲margin:0(縮寫); 另外還有以下幾種寫法: text-align:center background:#FFF height / width / color 4、如何使頁面居中? 大家將代碼保存後可以看到,整個頁面是居中顯示的,那麼究竟是什麼原因使得頁面居中顯示呢? 5、這裏我只介紹這些常用的CSS屬性了,其他的請參看CSS2.0中文手冊。 當我們寫好了頁面大致的DIV結構後,我們就可以開始細緻地對每一個部分進行製作了。 在上一章中我們寫入了一些樣式,那些樣式是爲了預覽結構而寫入的,我們把css.css中的樣式全部清除掉,重新寫入以下樣式代碼:
樣式說明: a:link,a:visited {font-size:12px;text-decoration:none;} 這兩項分別是控制頁面中超鏈接的樣式,具體我就不說明了,請大家參閱手冊。 #container {width:800px;margin:10px auto} 指定整個頁面的顯示區域。 接下來,我們開始製作TOP部分,TOP部分包括了LOGO、菜單和Banner,首先我們要做的就是對設計好的圖片進行切片,以下是在FW下完成的切片: 我將TOP部分切片爲兩部分,第一部分包括了LOGO和一條橫線。由於LOGO圖片並沒有太多的顏色,這裏我於是將這一部分保存爲GIF格式,調色板選擇爲精確,選擇Alpha透明度,色版爲白色(此處顏色應與背景色相同),導出爲logo.gif,圖像寬度爲800px。 到這裏,有的朋友就說了,* 爲什麼要使用GIF格式?使用JPEG不是更好嗎? * 接下來的Banner部分還能使用GIF格式嗎? * 合理的切片是非常之重要的,因爲切片的方法正確與否決定了CSS書寫的簡易程度以及頁面載入速度。 切好片後,我們還需要對TOP部分進行分析並將DIV結構寫入Header中代碼如下: <div id="menu"> 爲什麼要這麼寫呢,因爲對菜單使用列表<li>形式,可以在以後方便對菜單定製樣式。 而爲什麼要添加以下代碼呢? 然後我們在css.css中再寫入以下樣式: /*頁面頭部*/ 樣式說明: 這裏,我們沒有指定header層的高度,爲什麼不指定呢? 因爲header層中還有菜單和banner項,所以層的高度暫時是未知的,而層的屬性又可以讓層根據內容自動設定調整,因此我們並不需要指定高度。 使用列表<li>製作菜單 開始此節的學習前,請確認你已經參照之前的幾節內容寫入了DIV、CSS到index.htm和css.css文件中。 這一節我將告訴大家如何用列表<li>來製作菜單。 <div id="menu"> 以上是這部分的結構,有關於<ul></ul>、<li></li>這兩個HTML元素大家自己去參考相關的內容吧,它們最主要的作用就是在HTML中以列表的形式來顯示一些信息。 還有一點需要大家一定要分清楚的,當在HTML中定義爲id="divID"時,在CSS對應的設置語法則是#divID{} ,如果在HTML中定義爲class="divID"時,則在CSS中對應的設置語法是.divID。 如果id="divID"這個層中包括了一個<img></img>,則這個img在CSS中對應的設置語法應該是#divID img {},同樣,如果是包含在class="divID"這個層中時,則設置語法應該是.divID img {},這一點希望大家要分清楚了。 另外,HTML中的一切元素都是可以定義的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中設置它們,則直接寫入元素的名稱加上一對大括號{}就可以了。所有的CSS代碼都應該寫在大括號{}中。 按照上面的介紹,我們先在css.css中寫入以下代碼: #menu ul {list-style:none;margin:0px;} 解釋一下: #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 到這一步,建議大家先保存預覽一下效果,我們再添加下面的內容,效果如下: 這時,列表內容是排列在一行,我們在#menu ul li {}再加入代碼margin:0 10px #menu ul {list-style:none;margin:0px;} margin:0 10px的作用就是讓列表內容之間產生一個20像素的距離(左:10px,右:10px),預覽的效果如下: 現在,雛形已經出來了,我們再來固定菜單的位置,把代碼改成如下: #menu {padding:20px 20px 0 0} 這時,位置已經確定了,可是構思圖中,菜單選項之間還有一條豎線,怎麼辦呢? .menuDiv {width:1px;height:28px;background:#999} 保存預覽一下,豎線是否已經出來了?關於這段代碼就不多講了,應該是很容易理解的。 不過,菜單選項的文字卻在頂部,我們再修改成以下代碼: #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 關於display:block;line-height:28px大家可以去參閱一下手冊,我就不多講了。 效果基本上已經實現了,剩下的就是修改菜單的超鏈接樣式,在css.css中添加以下代碼: #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} 這個也不多說了,沒什麼好說的了,最後的效果如下: 這一節到這裏就完畢了,順便把素材提供給大家:
/*基本信息*/ /*頁面層容器*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body> |
Div+CSS佈局入門教程
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.