第十章：div+css網頁標準布局實例教程

　　完了之后打開瀏覽器，在地址欄中輸入http://localhost/index.html，就可以訪問，或者直接在dw中點擊地球圖標，也可以直接打開瀏覽器預覽。如果能正常打開頁面，說明本地和服務器連接成功，修改完文件后，把文件上傳到服務器上就可以了。如果是協(xié)同辦公，修改文件之前一定要先下載，這樣才能保證本地的文件為最新，如果你上次修改完之后，別人又修改了，你沒下載，直接修改本地的文件又上傳了，那么別人的修改將被覆蓋掉，所以一定要養(yǎng)成好習慣，修改前先下載。

　　四、php讀取數據

　　以上的工作都完成后，下面就該用程序讀取數據了。首先需要創(chuàng)建一個數據庫連接文件，讓php程序可以訪問數據庫，這樣才能讀取里邊的數據，在根目錄下創(chuàng)建一個inc文件夾，并創(chuàng)建一個conn.php文件，然后打開文件，在源代碼里插入如下代碼：

　　<?

　　$conn = mysql_connect ("localhost","root","") or die ("數據庫連接出錯" . mysql_error());

　　mysql_select_db ("jiaocheng",$conn);

　　mysql_query("set names 'gbk'");

　　?>

　　之所以單獨創(chuàng)建一下文件，是因為后邊很多頁面都要用，這樣只需包含這個頁面即可，不用每個頁面再寫這段代碼了。數據庫連接文件創(chuàng)建好后，下面就該在index.html調用了。注意：這里要將后綴改為php才行，如果還是html的話，那么它將直接輸出，不會經過服務器加工。接下來打開index.php，在源代碼的最頂部插入如下代碼，把conn.php文件包含進來：

　　<?

　　include("inc/conn.php");

　　?>

　　記得要把inc文件夾上傳到服務器上喲。下面就先做“熱門新聞”列表吧，把原來做的#news_list下的ul列表改為如下形式：

　　<ul>

　　<?

　　$sql="select * from news order by id desc limit 0,6";

　　$query=mysql_query($sql);

　　while($row=mysql_fetch_array($query)){

　　?>

　　<li><span><?=$row['add_time']?></span><a href="#"><?=$row['title']?></a></li>

　　<? }?>

　　</ul>

　　第一句是創(chuàng)建一個sql查詢語句，表示查詢news表以id的倒序排列且只查詢前6條，接下來循環(huán)讀取出來。上傳預覽一下吧，是不是變形了，一方面標題太長了，另一方面日期應該只顯示月和日，日期通過程序只取月日兩位，處理標題有兩種方法，一種是用程序截取，一種是css超出隱藏。下面先把日期給改了，把<?=$row['add_time']?>替換為：<?=date('m-d',strtotime($row['add_time']))?>

　　把日期改短后，顯示正常了，但為了防止以后出現長標題把頁面撐亂，讓程序員注意截取一下標題或者你用css來實現，css超出隱藏的話可以給li定義高度和overflow:hidden屬性。得了，從數據庫中讀取數據出來，就這么簡單，下面說一下幻燈部分的實現吧。

　　和上邊的讀取方法一樣，只不過用if判斷一下$pic是否為空，來解決開頭沒有|的問題。上傳上再預覽一下吧，看看是不是顯示出來了呢？是吧，已經顯示出來了，打開源代碼看看，剛才我們添加的程序部分并沒有顯示出來，取而代之的是數據庫中的數據，這就是程序的奇妙之處。

　　好了，有關程序部分就講這么多了，相信你也該明白是怎么回事了，剩下的你可以自己對照著制作個試試，如果你想學習程序的話，給大家推薦以前我學過的教程，asp的話可以學習fif小組的asp視頻教程，在百度里搜索：fif asp，就出來了，第一個結果便是網易學院的fif視頻教程；如果你對php感興趣的話，建議去php100中文網，聽聽張恩民老師講解的php系列教程，相信很快你也會成為一個程序高手的。

　　五、頁面調試及瀏覽器兼容

　　在和程序員配合完成網站的過程中或網站上線后，常常會出現一些小問題，比如頁面撐開，顯示錯亂等，這時候就需要查找問題出在哪里了。查找這些問題，希望大家裝上火狐瀏覽器（因為它是相對標準的瀏覽器，這樣顯得你更專業(yè)一些，嘿嘿，最主要是有調試用的插件），裝上之后還需要裝兩個插件：web developer，firebug

　　插件的下載請點擊上圖中的獲取附加組件，然后輸入關鍵字搜索到后下載安裝即可。

　　web developer作用很強大，如下圖所示可以查看當前頁面所用到的圖片，包括css中的背景圖片，具體使用教程請參看：http://www.aa25.cn/div_css/255.shtml

　　firebug這是個更好的一個插件，使用時點擊瀏覽器右下角的螢火蟲圖標或者按F12，會啟用這個插件，如需查看某一部分代碼，點擊插件上的查看頁面元素按鈕后，鼠標移到網頁上，會出現一個相應的框，當框選中需要查看源代碼的元素后點擊，在插件區(qū)域就顯示出當前區(qū)域的代碼及樣式了，可以禁用某些樣式，還可以添加新的樣式來查找問題所在。

　　如上圖，先點1中的查看頁面元素按鈕，然后鼠標移動到2的地方，將會出現圖中所示的藍色線框，然后點擊鼠標，會在插件中選中3位置的代碼并在4位置出現對該區(qū)域生效的所有樣式，即是上邊框選部分的代碼和樣式，當鼠標移動到圈4位置時，會出現一個禁止圖標，點擊后禁用當前樣式，這樣便于查找問題所在，另外還可以在后邊雙擊插入新的樣式。

　　另外，如果你裝的是IE8瀏覽器，同樣具備類似的功能，打開瀏覽器后，按F12鍵，即可打開該功能，使用方法和火狐的firebug類似。

　　希望大家多多研究，對查找問題能起到事半功倍的效果。不過這些修改只停留在瀏覽器層面，不會對你本地和服務器上的文件做任何改動，查找到哪里出問題后，及時在dw里將出錯的地方改過來。

　　學會了怎么調試頁面后，兼容問題也是一個不容忽視的問題，現在瀏覽器市場魚龍混雜，別的不說，IE的6/7/8版本兼容就夠讓人頭疼了，現在又出了個IE9，還有火狐、chome、opera、Safari等等，而且標準不統(tǒng)一，一片混亂的狀況。從下圖中標準之路網站的訪問情況來看，目前IE6仍然占最大比重，而IE6恰恰也是讓設計者最為頭疼的瀏覽器，bug太多了。鑒于這種混亂情況，目前只用考慮兼容最常用的IE6/7/8和firefox就可以了，其它使用人數很少的瀏覽器可以暫不考慮。只要我們掌握了各個瀏覽器的特性，避免一些使它解析錯誤的寫法，還是不用太多的css hack就可以使頁面在各個瀏覽器下顯示基本一致，所以這個需要大家的多觀察，多實踐，多總結。

　　因IE瀏覽器的特殊性，一臺電腦同時只能裝一個版本的IE瀏覽器，不過呢有高人提供了IE Tester，把IE的幾個版本集成到一塊，專門供測試兼容使用。大家可以下載安裝一下，測試下頁面在各個瀏覽器下的顯示效果。