第十章：div+css網(wǎng)頁標(biāo)準(zhǔn)布局實(shí)例教程

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

　　四、php讀取數(shù)據(jù)

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

　　<?

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

　　mysql_select_db ("jiaocheng",$conn);

　　mysql_query("set names 'gbk'");

　　?>

　　之所以單獨(dú)創(chuàng)建一下文件，是因?yàn)楹筮吅芏囗撁娑家茫@樣只需包含這個(gè)頁面即可，不用每個(gè)頁面再寫這段代碼了。數(shù)據(jù)庫連接文件創(chuàng)建好后，下面就該在index.html調(diào)用了。注意：這里要將后綴改為php才行，如果還是html的話，那么它將直接輸出，不會(huì)經(jīng)過服務(wù)器加工。接下來打開index.php，在源代碼的最頂部插入如下代碼，把conn.php文件包含進(jìn)來：

　　<?

　　include("inc/conn.php");

　　?>

　　記得要把inc文件夾上傳到服務(wù)器上喲。下面就先做“熱門新聞”列表吧，把原來做的#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)建一個(gè)sql查詢語句，表示查詢news表以id的倒序排列且只查詢前6條，接下來循環(huán)讀取出來。上傳預(yù)覽一下吧，是不是變形了，一方面標(biāo)題太長了，另一方面日期應(yīng)該只顯示月和日，日期通過程序只取月日兩位，處理標(biāo)題有兩種方法，一種是用程序截取，一種是css超出隱藏。下面先把日期給改了，把<?=$row['add_time']?>替換為：<?=date('m-d',strtotime($row['add_time']))?>

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

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

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

　　五、頁面調(diào)試及瀏覽器兼容

　　在和程序員配合完成網(wǎng)站的過程中或網(wǎng)站上線后，常常會(huì)出現(xiàn)一些小問題，比如頁面撐開，顯示錯(cuò)亂等，這時(shí)候就需要查找問題出在哪里了。查找這些問題，希望大家裝上火狐瀏覽器（因?yàn)樗窍鄬?duì)標(biāo)準(zhǔn)的瀏覽器，這樣顯得你更專業(yè)一些，嘿嘿，最主要是有調(diào)試用的插件），裝上之后還需要裝兩個(gè)插件：web developer，firebug

　　插件的下載請(qǐng)點(diǎn)擊上圖中的獲取附加組件，然后輸入關(guān)鍵字搜索到后下載安裝即可。

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

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

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

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

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

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

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