• <td id="ueojn"></td>

      <blockquote id="ueojn"><ruby id="ueojn"></ruby></blockquote>
            <output id="ueojn"><ruby id="ueojn"><address id="ueojn"></address></ruby></output><code id="ueojn"></code>
            北京網站建設>前端開發>Css>

            Css

            【精編Css教程】13-div+css網頁標準布局實例教程(三)

            來源:未知 作者:admin 時間:2015-11-01 16:43 點擊:

            前邊兩節學完后,前臺工作基本上完成了,下邊的任務該程序員添加程序了。為什么說是基本完成呢?因為要做的工作還很多,不但要把首頁做出來,其它的列表頁詳細頁等頁面也得做。還要配合程序員把整個網站完成,這樣才能呈現給用戶。應部分同學的要求,講解一下程序怎么添加的,這樣和程序員配合起來也更默契,還有怎么連接FTP上傳下載,后期出現問題怎么調試等等。添加程序部分只需要了解就行了,連接ftp上傳下載,頁面調試查找問題這部分一定要掌握喲。

            創建服務器環境

            建立數據庫

            本地和遠程服務器連接

            php讀取數據

            頁面調試及瀏覽器兼容

            一、創建服務器環境

            程序語言有多種,常用的有asp、php、jsp等,之前做的html頁面,可以直接在瀏覽器上運行,因為html是客戶端語言,而這些是服務器端語言,也就說你所看到的頁面是經過服務器加工之后傳輸過來的,不管使用哪種語言環境,最終目的就是把數據庫的數據讀取出來展示到網頁上。不同的語言有不同的運行環境,要想運行這些語言,首先要創建一個適應他們的環境,下邊以php為例,講解一下php環境的搭建。

            下載wamp安裝完成后,php運行所需的 Apache、 MySQL、PHP 5等都具備了,安裝完成后需要啟動WampSeaver,啟動后會在托盤區顯示一圖標(如上圖),當它正常運行后,說明服務器環境已經創建成功了。接下來打開如上圖中的php.ini文件,找到short_open_tag,把值改為On,作用是開啟短標簽支持,以免后邊教程中使用短標簽時報錯。有關軟件的安裝,及服務器環境問題本站不做過多介紹,如想詳細了解,請百度相關文章,asp環境的搭建更簡單了,如想知道,也請百度。

            二、建立數據庫

            php的作用是從數據庫讀取數據,下面我們就先創建一個數據庫,并錄入部分數據。點擊如上圖的phpMyAdmin,然后會在瀏覽器中打開數據庫。創建一個名為:jiaocheng的數據庫和news的表

            設置表結構如下:

            注意將ID字段設置為主鍵并在額外中選擇auto_increment選項。表結構創建完后,選擇插入,插入一條數據:

            依次插入更多條數據,為后面程序調用做準備,選擇性將某些數據插入形象圖片,以便在幻燈處調用。

            三、本地和遠程服務器連接

            只有本地和遠程服務器連接后,才能把我們做的頁面上傳到服務器上來運行。連接的前提是你知道服務器的地址及網管給你分配的用戶名和密碼,有了這些后,在dw的站點——管理站點中,選中jiaocheng,然后編輯,在彈出的對話框中選擇服務器選項,然后填寫ftp地址,用戶名和密碼,如果一切正常應該可以順利連接了,點擊測試按鈕一下吧,如果無法連接,就需要查找問題了(下面的截圖是dw cs5的界面,其它版本略有不同)。

            剛才我們在自己電腦上創建了服務器環境,那么這里的連接就用本地網絡了。

            設置完后,在文件面板站點上點擊右鍵,選擇上傳,將文件上傳到服務器文件夾中。

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

            四、php讀取數據

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

            < ?

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

            mysql_select_db ("jiaocheng",$conn);

            mysql_query("set names 'gbk'");

            ? >

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

            < ?

            include("inc/conn.php");

            ? >

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

            < u l>

            < ?

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

            $query=mysql_query($sql);

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

            ? >

            < l i>< span>< ?=$row['add_time']? >< /sp an>< a hr ef="#">< ?=$row['title']? >< / a >< /l i>

            < ? }? >

            < / ul >

            第一句是創建一個sql查詢語句,表示查詢news表以id的倒序排列且只查詢前6條,接下來循環讀取出來。上傳預覽一下吧,是不是變形了,一方面標題太長了,另一方面日期應該只顯示月和日,日期通過程序只取月日兩位,處理標題有兩種方法,一種是用程序截取,一種是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系列教程,相信很快你也會成為一個程序高手的。

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

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

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

            web developer作用很強大,如下圖所示可以查看當前頁面所用到的圖片,包括css中的背景圖片。

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

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

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

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

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

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

            公司業務:北京網站建設刷百度下拉刷百度指數虛擬主機租用

            如轉載,請保留本文鏈接地址:http://www.ctex.tw/Style/Css/1777/

            Loading......
            工作時間:

            AM 09:00 ~ 12:00

            PM 14:00 ~ 18:00

            聯系方式:

            Tel 010-50933590

            Hp 18701620736

            設計優勢

            獨立的設計團隊 帶給您全新的視覺體驗

            功能開發

            強大的技術實力,完成您想要的任何功能

            售后服務

            完善的售后服務,解決您在使用過程中遇到的問題

            Copyright © 2010 - 2018 北京順晟科技發展有限公司 All Rights Reserved

            地址:北京市順義區南法信政府府前街16號 炫立方 | TEL:010-50933590

            北京網站建設 | 北京網站設計 | 北京SEO公司

            山东十一选五走势图