您現在的位置: 网站首頁 / 網站建設 / 正文

div+css網頁標准布局實例教程-Web標准(div+css)教程

作者: admin 发布: 2015-1-26 22:35:14 分类: 網站建設 閱讀: 次 查看評論

  div+css網頁標准布局實例教程(一)

  今天學習《十天學會web標准(div+css)》的最後一個章節,本章節把前面學習的零碎內容串聯起來,組織成一個網站,將根據本人這些年來的從業經驗,從建立站點到一個完整的div+css網頁的完成,整個流程下來,希望能對各位有所幫助。由于本節內容較多,將分三部分來講解。

  一、 建立站点

  二、結構分析

  三、搭建框架

  四、切割效果圖

  五、布局頁面——頭部和導航

  六、布局頁面——側邊欄

  七、布局頁面——主體部分

  八、底部和細節調整

  九、相對路徑和相對于根目錄路徑

  十、創建服務器環境

  十一、建立數據庫

  十二、本地和遠程服務器連接

  十三、php讀取數據

  十四、頁面調試及浏覽器兼容

  一、建立站點

  前面的課程都是零碎講解一些相關知識,那麽要做一個網站,首先需要建立一個站點。那麽什麽是站點,爲什麽要建立一個站點呢?因爲網站不同于其它文件,比如一個圖片,放到哪個盤哪個目錄下都可以訪問。而網站是許多文件相互關聯的,所以要專門一個目錄把它們分門別類存放起來。如果搞過視頻編輯的朋友都知道,需要先建立一個工程,把原始的視頻文件、圖片素材分類放好,也是這個道理。下面以在D盤建立一個jiaocheng文件夾爲例,在dreamweaver(簡稱DW)裏創建一個站點指向這個文件夾,然後在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。

  

  

  保存后,一个站点就建立起来了,我用的是DW cs5版本,不同版本界面有所不同。如果要连接FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。

  

  二、結構分析

  創建完站點後,就需要對頁面結構進行分析了,根據效果圖,分析頁面分爲幾大塊,該怎麽布局更合理。下面這個圖是我做的一個企業網站的模板,雖然不怎麽好看,但目的是把前邊學的東西全都給串起來,讓大家掌握各種情況的處理方法,先看下效果圖及在網頁中顯示的樣式:

  

  在浏覽器中打開效果圖預覽

  從圖中可以看出整個頁面分爲頭部區域、導航區域、主體部分和底部,其中主體部分又分爲左右兩列,整個頁面居中顯示,看明白了這點,下邊的框架就好搭建了。整體框架結果圖如下:

  

  三、搭建框架

  首先在dw裏新建一個html文件:

  

  點擊創建後會自動生成如下代碼的一個html文件,保存爲index.html並把無標題文檔改爲:主頁。強調一點,許多同學喜歡把第一行代碼刪除掉,認爲沒用,其實這句話的作用大著呢,它標明以何種形式解析文檔,如果刪除可能會引起樣式表失效或其它意想不到的問題。接下來需要插入以上各個塊的標簽了,以插入header的標簽爲例,其它的插入方法類同。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>主頁</title>

  </head>

  <body>

  </body>

  </html>

  

  按照上圖的方法依次插入標簽,或者直接在代碼視圖中手工輸入,代碼如下:(注意main和side在maincontent裏包含著呢)

  <div id="header">此处显示 id "header" 的内容</div>

  <div id="nav">此处显示 id "nav" 的内容</div>

  <div id="maincontent">

  <div id="main">此处显示 id "main" 的内容</div>

  <div id="side">此处显示 id "side" 的内容</div>

  </div>

  <div id="footer">此处显示 id "footer" 的内容</div>

  從上邊的效果圖分析得知,整個網頁是居中浏覽器顯示的,按照這樣的寫法需要把以上的header、nav、maincontent、footer都設置寬度並居中,這樣做起來很麻煩,所以再在這些標簽外增加一下父標簽,設置這個父標簽寬度並居中後,是不是所有的標簽都居中了呢。增加後的代碼如下:

  <div id="container">

  <div id="header">此处显示 id "header" 的内容</div>

  <div id="nav">此处显示 id "nav" 的内容</div>

  <div id="maincontent">

  <div id="main">此处显示 id "main" 的内容</div>

  <div id="side">此处显示 id "side" 的内容</div>

  </div>

  <div id="footer">此处显示 id "footer" 的内容</div>

  </div>

  html框架代碼寫完後,下邊就需要設置css樣式表了。先測量下效果圖的整體寬度,然後設置container也是這個寬度並居中。說起測量效果圖寬度,方法有多種,可以直接查看圖片尺寸。如果測量其中某一塊的寬度,可以使用測量軟件,也可以在ps下測量。本人一般在ps下測量,因爲效果圖在ps下制作的,所以用ps測量也比較方便。方法是首選項裏把ps的單位改爲像素,然後用選區選中要測量的部分,在信息面板中就顯示出當前選區的寬高了(如果你實在不知道怎麽改單位,怎麽選區怎麽查看的,就要補習一下ps啦)。

  

  測量後得知:整體寬度爲900px,main部的寬度爲664px,side寬度爲228px。把這三個基本的寬度測量後,下面就可以寫css代碼了。由于本實例是按照實際當中應用來做的,所以css樣式表就最好寫在單獨文件裏了,不要再寫在文件內部了,這樣可以利用代碼的重用性,減少很多勞動強度。下面就新建一個css樣式表文件:在DW文件菜單選擇新建,然後在打開的窗口頁面類型中選擇css,創建後保存在css文件夾中並命名爲layout.css

  

  

  保存後先設置全局的樣式,而後寫每一塊單獨的樣式,全局樣式如下:

  body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}

  ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

  ul { list-style:none;}

  img { border:0px;}

  a { color:#05a; text-decoration:none;}

  a:hover { color:#f00;}

  全局的樣式定義完後,下面定義以上幾大塊的樣式,先設置下#containerr的樣式如下:

  #container { width:900px; margin:0 auto;}

  預覽下index.html,發現並沒有改變,這是爲什麽呢?因爲剛定義的樣式表沒有和html文件關聯,所以設置的樣式當然不能對它生效了,還記得第一天課時講的幾種樣式並聯方式嗎?下面我操作一遍:在css面板中點擊附加樣式表按鈕,然後在彈出的窗口中選擇剛才創建的樣式表文件,確定,ok了,預覽一下,是不是整體已經居中了呢。

  

  

  如果已經是寬度爲900px並居中,說明樣式和文件關聯好了。這就是爲什麽要定義一個站點了,因爲許多文件要關聯在一起才能構成一個完整的網頁,所以要把它們放在一起,才能讓這個頁面找到和它相關的文件在哪裏。下面設置內部幾大塊的樣式,爲了便于觀察,我們把部分塊設置了背景色。代碼如下:

  /*body*/

  #container { width:900px; margin:0 auto;}

  /*header*/

  #header { height:70px; background:#CCFFCC; margin-bottom:8px;}

  #nav { height:30px; background:#CCFFCC; margin-bottom:8px;}

  /*main*/

  #maincontent { margin-bottom:8px;}

  #main { float:left; width:664px; height:500px; background:#FFFF99;}

  #side { float:right; width:228px; height:500px; background:#FFCC99;}

  /*footer*/

  #footer { height:70px; background:#CCFFCC;}

  现在预览一下:在IE6下#maincontent的底部外边距并没有生效,而在IE8下,#footer干脆跑到#maincontent的下边了,这又是怎么回事呢?如果前边几天你都认真学的话,那么这个问题已经不是问题了。这就是之前我们讲的,如果一个容器内的元素都浮动的话,那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加 overflow:autol; zoom:1;,这样就可以让它自动适应内部元素的高度了。

  現在再預覽一下,是不是都正常了。爲了更加保險,建議在header、nav、maincontent、footer之間增加如下一句代碼並設置css樣式如下,它的作用是清除浮動。

  <div></div>

  .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>主頁</title>

  <link href="http://www.aa25.cn/upload/2010-09/16/layout.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

  <div id="container">

  <div id="header">此处显示 id "header" 的内容</div>

  <div></div>

  <div id="nav">此处显示 id "nav" 的内容</div>

  <div></div>

  <div id="maincontent">

  <div id="main">此处显示 id "main" 的内容</div>

  <div id="side">此处显示 id "side" 的内容</div>

  </div>

  <div></div>

  <div id="footer">此处显示 id "footer" 的内容</div>

  </div>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  四、切割效果圖

  基本框架搭建完畢後,下一步就是要分析每一塊該怎麽切圖了。切圖方法有多種,可以使用ps或fireworks自帶的切片工具,也可以用QQ的截屏或者創建新文件,把需要的部分複制過來保存都可以,關鍵看個人喜好了。

  

  用ps的切片工具的話,把需要切割的區域用切片工具切分,如果要設置圖片的名稱,請使用切片選擇工具,然後在切片上雙擊,會彈出如下窗口,填寫名字後確定即可。

  

  切割完後,需要保存圖片了,選擇文件——存儲爲web和設備所用格式,在彈出的窗口中點擊選中切片,然後在右側可以設置當前切片的圖片格式。這裏有個技巧,一般小型色彩單一的圖片,采用gif格式,照片類大型圖片采用jpg,這樣生成的圖片既能保證質量,圖片體積又小,

  

  

  設置完圖片的格式後,就可以存儲了,這裏選擇到images的上一級目錄就行了,ps會自動創建images目錄並把圖片文件放入,如果已存在,直接放入。在格式處選擇僅限圖像,如果選擇html和圖像,ps會自動生成一個表格式的網頁,這個頁面不是我們需要的,就不讓它生成了;還有一個需要注意的地方就是選擇所有用戶切片,這樣只把我們手動切割的圖片保存下來,其它的就不保存了。保存後的圖片如下所示,其中hot_bg.gif這張圖片切割時沒有隱藏上邊的文字,一會兒在ps裏再處理一下把文字抹掉。

  

  

  目前所切的圖片只是一部分,並沒有把整個頁面所需的圖片全都切割下來,比如導航部分所用背景圖片可以放到一張圖片上,下面就用新建文件,然後用QQ截屏,粘貼過去的方法來創建。

  

  分析一下上圖的導航部分:1、兩端的圓角;2、鼠標劃過狀態和當前欄目狀態寬度應該隨著字數的多少而改變;3、二級導航有鼠標劃過時的狀態。分析完之後,就需要把需要的圖片整合到一張圖片上了,整合的結果如下圖,這個根據自己的需要進行整合。其實完全可以把其它一些小圖標都整合在一張,但那樣操作起來比較麻煩,所以我們還是歸一下類,把相關的圖標整合到一起。

  

  接下來整合側邊欄的背景圖片,分析發現側邊欄應用同樣的樣式,只不過高度有所不同,而且是四角都是圓角,所以只用一個通用的就可以滿足所有側邊欄塊的需求了。那麽怎麽制作這個通用的背景呢?從下圖我們發現,標題的高度都是一樣的,只不過是下邊的內容高度不同而已,那麽我們把下邊內容的背景制作的足夠長,超過可能出現的最大高度就可以滿足需求了。

  

  

  整合後的效果如上圖,如果你現在還不明白爲什麽要這麽做,那麽一會兒寫完樣式表你就明白了。下面把三個圖標也給切出來,如下圖:

  

  這些完事後,還有聯系我們的圖片和修飾小圖標了。聯系我們的圖片如下,這裏的圖片和小圖標要背景透明,這樣才不會遮蓋下面的背景。

  

  

  (接下一篇)

  div+css網頁標准布局實例教程(二)

  (接上一篇,本節教程文字較多,比較枯燥,如果前邊知識學習牢固,可以直接下載源代碼查看,哪個地方不明白,再回過頭來看哪一部分)

  五、布局頁面——頭部和導航

  有了上邊的基礎,下面的任務就是要利用html和css制作完成一個完整的網頁了。先從頭部開始,第三小節時我們已經把整體框架給搭建好了,就像蓋房子一樣,整體結構已經出來了,下面就需要填磚分割空間了。先分析下頭部:分爲兩部分,一個是logo靠左側顯示,一個是搜索靠右側顯示,那麽布局時插入兩個div,一個向左浮動,一個向右浮動的方式來完成。另外還有很多種實現方法,比如logo用h1標簽,搜索用span,或者把logo做爲背景圖片也是可以的,不管采用哪種方法,要根據頁面的需求選用一種最合理的方法。如果要在logo加上鏈接的話,那麽就不能用背景圖片的方法了。

  <div id="header">

  <div id="logo">此处显示 id "logo" 的内容</div>

  <div id="search">此处显示 id "search" 的内容</div>

  </div>

  先在header裏插入以上兩塊元素。然後分別插入相應的內容,在logo裏插入我們事先切割好的logo圖片,在search裏插入一個表單,一個文本框和一個按鈕,插入後如下:

  <div id="header">

  <div id="logo"><img src="images/logo.gif" width="181" height="45" /></div>

  <div id="search">

  <form id="form1" name="form1" method="post" action="">

  搜索産品

  <input type="text" name="textfield" id="textfield" />

  <input type="submit" name="button" id="button" value="查询" />

  </form>

  </div>

  </div>

  接下來定義css吧,在ps裏測量,頭部的高度是71px,logo距頂部18px,搜索産品距頂部30px,下面在css裏把這些參數都給定義上,看顯示的效果和效果圖中的效果是不是一樣呢?

  #logo { float:left; margin-top:18px;}

  #search { float:right; margin-top:30px;}

  這兩項的位置已經差不多了。預覽你會發現,搜索框和按鈕跟效果圖中的不一樣,這是因爲我們還沒對它設置樣式,接下來把文本框增加一個class爲inp_srh樣式,按鈕增加btn_srh的樣式,然後定義這兩個樣式的屬性。

  #search { float:right; height:24px; margin-top:30px; color:#444;}

  .inp_srh { width:140px; height:17px; padding-left:20px; background:url(?/post/../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}

  .btn_srh { width:58px; height:23px; background:url(?/post/../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}

  #search * { vertical-align:middle;}

  我们给search增加了高度和文字颜色,这点不用多解释,但高度为什么是24px,是为了照顾 IE6,大家去掉测试下就知道了;

  inp_srh的寬度和高度並不是實際效果圖中的寬高,是因爲默認情況下文本框帶有內邊距造成的。另外就是padding的值也會算到總寬度上的;

  btn_srh就是應用背景圖像來實現的,說明一點這裏的border的值爲none指的是無邊框,cursor定義鼠標樣式爲手形,之前許多朋友用hand,但這個通不過w3c認證。text-indent:-999em這個屬性許多朋友可能不理解是幹什麽用的了,它的作用相當于word中的首行縮進,這裏設置成-999,意思是向左側縮進-999em,這樣是不是就看不到文字啦,所以它的作用是將按鈕上的文字隱藏,當然也可以在html代碼中插入空格代替文字,但這樣做有點不太好,在不支持css的設備上查看時,用戶不知道這個按鈕是幹什麽的了。所以建議采用這種形式;

  有必要解释下最后一行,它的特殊之处在样式名和大括号之间加了一个*号,这里兼容所用的,属于css hack部分内容,是定义这些元素都垂直居中对齐。css hack本身就是无意思的东西,所以不做过多解释,知道当需要垂直居中对齐时就采用这种写法就行了,但是一定不要滥用,这个属性也是有缺陷的,当有英文和中文同时出现时,英文会靠上显示的。有关css hack更多的内容,请参考http://www.aa25.cn/special/css_hack/index.shtml

  這些設置完後,把最初搭建框架時設置的header的背景色和底部外邊距給去掉吧。

  #header { height:71px;}

  至此,頭部的樣式就完成了,下邊該制作導航了。分析一下,導航分爲一級導航和二級導航,所以我需要在nav下再插入nav_main和nav_son兩個塊元素。

  <div id="nav">

  <div id="nav_l"></div>

  <div id="nav_r"></div>

  <div>

  <ul>

  <li><a href="#"><span>首頁</span></a></li>

  <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>

  <li><a href="#"><span>企业简介</span></a></li>

  <li><a href="#"><span>产品展厅</span></a></li>

  <li><a href="#"><span>企业历史</span></a></li>

  <li><a href="#"><span>招商加盟</span></a></li>

  <li><a href="#"><span>网上下单</span></a></li>

  <li><a href="#"><span>联系我们</span></a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><a href="#">企业动态</a></li>

  <li><a href="#">领导活动</a></li>

  <li><a href="#">产品资讯</a></li>

  <li><a href="#">通知公告</a></li>

  </ul>

  </div>

  </div>

  先設置nav的高度及背景圖片樣式。

  #nav { height:66px; background:url(?/post/../images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;}

  完了之後該一級菜單和二級菜單的樣式了

  .nav_main { height:36px; overflow:hidden;}

  .nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}

  .nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}

  .nav_main ul li a span { display:block; padding-right:20px;}

  .nav_main ul li a:hover { background:url(?/post/../images/nav_bg.gif) 0 -163px no-repeat;}

  .nav_main ul li a:hover span { background:url(?/post/../images/nav_bg.gif) right -163px no-repeat;}

  .nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(?/post/../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}

  .nav_main ul li a#nav_current span { height:31px; background:url(?/post/../images/nav_bg.gif) right -132px no-repeat;}

  .nav_son { height:30px;}

  .nav_son ul li { float:left; margin-top:4px;}

  .nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;}

  .nav_son ul li a:hover { background:url(?/post/../images/nav_bg.gif) 0 -198px no-repeat;}

  這些樣式的作用就不多講了,以前的課程當中已詳細講解過了,只不過本例使用了雙導航菜單而已。現在在浏覽器下預覽一下吧,看看效果怎麽樣,是不是和效果圖差不多了,但還有最後一步就是兩端的圓角沒實現,實現圓角的方法也不複雜,只需再增加兩行代碼和兩個樣式即可。在nav下nav_main之前增加如下兩行代碼:

  <div id="nav_l"></div>

  <div id="nav_r"></div>

  然後用樣式表定義一個左側的圓角,一個右側的圓角。css樣式如下:

  #nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(?/post/../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;}

  #nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(?/post/../images/nav_bg.gif) -5px -66px no-repeat;}

  預覽一下吧,看看頭部和導航是不是和效果圖中的一樣呢

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>主頁</title>

  <link href="http://www.aa25.cn/upload/2010-09/21/css/layout1.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

  <div id="container">

  <div id="header">

  <div id="logo"><img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" width="181" height="45" /></div>

  <div id="search">

  <form id="form1" name="form1" method="post" action="">

  搜索産品

  <input type="text" name="textfield" id="textfield" />

  <input type="submit" name="button" id="button" value="查询" />

  </form>

  </div>

  </div>

  <div></div>

  <div id="nav">

  <div id="nav_l"></div>

  <div id="nav_r"></div>

  <div>

  <ul>

  <li><a href="#"><span>首頁</span></a></li>

  <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>

  <li><a href="#"><span>企业简介</span></a></li>

  <li><a href="#"><span>产品展厅</span></a></li>

  <li><a href="#"><span>企业历史</span></a></li>

  <li><a href="#"><span>招商加盟</span></a></li>

  <li><a href="#"><span>网上下单</span></a></li>

  <li><a href="#"><span>联系我们</span></a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><a href="#">企业动态</a></li>

  <li><a href="#">领导活动</a></li>

  <li><a href="#">产品资讯</a></li>

  <li><a href="#">通知公告</a></li>

  </ul>

  </div>

  </div>

  <div></div>

  <div id="maincontent">

  <div id="main">此处显示 id "main" 的内容</div>

  <div id="side">此处显示 id "side" 的内容</div>

  </div>

  <div></div>

  <div id="footer">此处显示 id "footer" 的内容</div>

  </div>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  六、布局頁面——側邊欄

  主體部分涉及side和main兩部分,的內容比較多,但都不難,本節教程沒有增加什麽新的知識點,學起來並不吃力。主體部分先從側邊欄說起,講解如何切圖時已經說過,側邊欄可以共用一個樣式,下面就先做一個通用的,插入如下html代碼

  <div>

  <h2><strong>産品</strong>導購</h2>

  <div>此处显示 class "side_con" 的内容</div>

  </div>

  這裏的標題采用h2標簽,沒必要再用個div,還有“産品導購”中“産品”二字是紅色字體,這裏用strong標簽,這樣可以省去很多沒必要的定義,所以在頁面布局當中一定要合理利用每一個標簽。講到這裏,有必要說一下第一節教程中講的爲什麽不能叫div+css而應該叫xhtml+css了,因爲div只是xhtml中的一個標簽,叫div+css會讓許多朋友誤認爲遇到塊級元素就得用div,造成了div的濫用,而合理利用每個標簽,才是web標准設計的一個准則。回過頭來定義側邊欄的樣式如下:

  #side { float:right; width:228px;}

  .side_box { margin-bottom:8px;}

  .side_box h2 { height:25px; padding:6px 10px 0 10px; background:url(?/post/../images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;}

  .side_box h2 strong { color:#f30;}

  .side_con { padding:10px; background:url(?/post/../images/side_bg.gif) 0 bottom no-repeat;}

  預覽一下效果吧,是不是整體效果出來了,下邊就需要定義裏邊各個部分了。

  

  先看下産品導購部分,內容分爲三部分,可以用ul、li列表的形式實現,前邊的圖標用背景圖片來實現,可以在li上設置背景圖片,但這樣麻煩一點,每個都需要設置,而且還得定位,有個更簡便的方法是定義ul的背景圖片,因爲在切圖標時,每個圖標之間的間距是按照效果圖的間距來切的。

  <div>

  <h2><strong>産品</strong>導購</h2>

  <div class="side_con product">

  <ul>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  </ul>

  </div>

  </div>

  細心的用戶已發現,這裏的class後跟了兩個樣式名稱,說明一個元素是可以定義多個樣式的,中間用空格分開。也可以把product樣式定義在ul上。

  說到可以定義多個樣式,強調一點:許多新手朋友常常大量使用,如一個塊元素需要設置邊框,綠色文字和灰色背景所以就在css裏定義:

  .border { border:1px solid #f60;}

  .color { color:#080;}

  .bg { background:#ccc;}

  然後在塊元素上增加:

  <div class="border color bg">此处显示新 Div 标签的内容</div>

  其實這是一個非常不好的寫法,這樣表面看似達到了代碼重用性,但實際當中,當需要把其中一個元素的的邊框改爲2px,怎麽改?如果把.border的邊框改了,那麽所有應用這一樣式的元素都改了。如果再在代碼中增加一個樣式,那麽又得去改html代碼,和代碼和結構分離的理念相違背了。一個好的代碼布局,不管以後怎麽改風格,只用改樣式表,而不用去改html代碼,這才真正做到兩者分離了。

  扯遠了,不過這點很重要,新手很容易犯這個毛病。回到剛才的問題上,給第三個li定義了一個product3樣式,然後在樣式表中定義它的底部邊框爲無,因爲前邊定義li的底邊框爲1px的虛線,而最後一個不需要,所以單獨定義個樣式把它取消掉,這裏的product根據需要自己定義的名稱,一般用能表達這塊內容意思的簡潔英文來表示,或者用拼音。有關樣式命名上請參考:http://www.aa25.cn/web_w3c/248.shtml。“産品導購”的樣式定義如下:

  .product { padding:0px 10px;}

  .product ul { background:url(?/post/../images/icon2.gif) 5px 12px no-repeat;}

  .product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;}

  .product ul li strong { display:block; height:24px; color:#333;}

  .product ul li a { color:#777;}

  .product ul li a:hover { text-decoration:underline;}

  .product ul li.product3 { border-bottom:none;}

  “産品導購”完成後,下邊該“使用問答”了。“使用問答”部分都是一問一答的形式,問答各采用不同的圖標,而且問的文字加粗了。所以這部分采用dl、dt、dd的形式來完成。

  <div class="side_con ask">

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了許多,使用方法更加簡便...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了許多,使用方法更加簡便...</dd>

  </dl>

  </div>

  .ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;}

  .ask dl dt { height:22px; overflow:hidden; font-weight:bold; background:url(?/post/../images/icon.gif) 0 -149px no-repeat; padding-left:20px;}

  .ask dl dt a { color:#666;}

  .ask dl dd { color:#666; background:url(?/post/../images/icon.gif) 0 -198px no-repeat; padding-left:20px;}

  “使用問答”完成後,側邊欄就剩下“聯系我們”了,這個更簡單,直接插入圖片就行了,然後調整一下位置就可以了。

  <div>

  <h2><strong>聯系</strong>我們</h2>

  <div class="side_con contact"><a href="#"><img src="images/tel.gif" width="222" height="112" /></a></div>

  </div>

  .contact { padding:2px;}

  七、布局頁面——主體部分

  主體部分可以分三大部分,頂部是幻燈和熱點新聞,中間是圖片列表,下邊是左右兩塊,先來布局主體部分的頂部。頂部實際上還是個左右兩列布局,沒什麽複雜之處,就不再貼代碼了,本節結尾會提供實例的源代碼。講解一點:熱點新聞列表中的日期,是用一個span標簽寫在了內容的前邊,然後把span向右浮動就實現了,“個人登錄”和“商戶登錄”的實現方法也是如此。

  之前許多朋友問,像標准之路主頁的幻燈是怎麽實現的?其實實很簡單,只要你動動手,就知道怎麽做的了。但許多同學遇到個問題不去考慮靠自己能力能否解決,而是上來就問,這是一個很不好的學習態度?先找找辦法,如果實在解決不了,再來問也不遲。方法是查看標准之路主頁源代碼,找到幻燈部分,你會發現有如下一段js代碼,而且代碼中有幾個設置參數的地方,那麽要想在自己網站實現這樣的功能,直接把這部分代碼插入到自己網站相應位置,修改參數中的大小爲自己的大小、圖片地址爲自己的圖片地址,還有就是下載swf文件,並改爲相應正確的地址。如果你有html基礎的話,這些一點都不難,還是那句話,一定要多動手,多動腦。

  

  把如上一段代碼拷貝到本例的幻燈圖片位置,下載實現幻燈的swf文件到本地images文件夾下,地址爲:http://www.aa25.cn/v3/images/indexpic.swf,接下來修改/v3/images/indexpic.swf爲images/indexpic.swf;修改swf_width和swf_height的值爲269和210;files的值爲圖片路徑,links爲圖片的鏈接地址,texts爲標題名稱,中間也是用|分隔,這樣就實現了幻燈圖片展示了。

  幻燈實現後,接下來該中間部分圖片列表了,和第六天學習的橫向圖文列表是一樣的。唯一區別就是多了一個標題。在index_top下插入如下代碼:

  <div id="index_pic">

  <h2><span></span></h2>

  <ul>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="images/pic4.gif" width="107" height="87" />产品名称</a></li>

  </ul>

  </div>

  #index_pic { border:1px solid #dbdbdb; margin-bottom:8px;}

  #index_pic h2 { height:28px; background:url(?/post/../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;}

  #index_pic h2 span { display:block; height:25px; background:url(?/post/../images/rmcp.gif) 12px 6px no-repeat;}

  #index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;}

  #index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;}

  #index_pic ul li a { display:block;}

  #index_pic ul li img { margin-bottom:3px;}

  這次沒做鼠標劃過時邊框效果,相對之前的簡單一點,需要了解鼠標劃過改變邊框效果的請學習http://www.aa25.cn/div_css/907.shtml。本例中“熱門産品”的圖標采用了背景圖片,也可以采用一個圖片直接插入,但從用戶體驗的角度來講,這些圖片還是以背景圖片插入爲好,因爲背景圖片在整個頁面加載過程中後來加載的。

  圖片列表完了之後,主體部分就剩下“企業曆史”和“招商加盟”兩塊了。這兩塊也是應用左右浮動的方式實現。這兩塊的代碼就不貼出來了,一會兒看實例。強調一點是這裏的more:hover的寫法,因爲more直接加在a上,所以鼠標進過的樣式就不用再寫a了,或者寫成a.more:hover。

  八、底部和細節調整

  底部比較簡單,灰色背景部分可以用h類標簽完成,也可以用dl、dt、dd來完成,再或者其它標簽也可以,其它的就不再贅述。

  底部完成後,最後的步驟是要做一些細節調整,比如該對齊的地方是否對齊,圖片的alt屬性是否都加上了,在各種浏覽器下是否顯示一樣等等。至此整個前台頁面算制作完成了下面的任務就是該用程序來讀取數據庫裏的內容了,來完成整個站點的制作。

  浏览器兼容问题一直是让新手朋友头疼的地方,其实只要掌握几个常用浏览器的特性后,不需要过多的css hack就可以解决问题的。本例中使用的css hack大致有:

  zoom=1:用來解決自適應高度時IE6的兼容問題(這個屬性通不過w3c認證);

  display:inline:解決IE6雙倍邊距bug問題;

  *:在樣式名和屬性中間加*,這個常用在需要垂直居中時使用;

  IE6 3像素bug:在布局时采用左右都浮动的办法避免了这个问题;

  另外还有一些做法也是为了解决兼容问题而写的,比如固定高度,就是因为各浏览器之间解释差异,为了使显示效果尽可能一样而采用的折中办法。总之遵循一点,css hack能少用尽量少用,这样便于以后维护。

  完成這樣一個布局方法有多種,本例中所講解的方法,只是本人的觀點,不一定是最好的方法,希望大家通過本本例的學習能做到舉一反三,掌握更多的方法。

  本側是左寬右窄型的布局,如果想把兩個調換個位置,太簡單不過了,只需把#main和#side的向左向右浮動調換一下就實現,這是表格布局所不及的。所以不管#main和#side在html代碼中是誰先誰後,而讓它們顯示在哪裏完全是css來完成的。這裏建議#main的代碼寫在#side前邊,因爲這要在頁面加載的過程中會先加載main部分,用戶首先看到的是主要內容,搜索引擎收錄時也會先找到main部分的內容。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <title>主頁</title>

  <link href="http://www.aa25.cn/upload/2010-09/21/css/layout.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

  <div id="container">

  <div id="header">

  <div id="logo"><img src="http://www.aa25.cn/upload/2010-09/21/images/logo.gif" alt="企业名称" width="181" height="45" /></div>

  <div id="search">

  <form id="form1" name="form1" method="post" action="">

  搜索産品

  <input type="text" name="textfield" id="textfield" />

  <input type="submit" name="button" id="button" value="查询" />

  </form>

  </div>

  </div>

  <div></div>

  <div id="nav">

  <div id="nav_l"></div>

  <div id="nav_r"></div>

  <div>

  <ul>

  <li><a href="#"><span>首頁</span></a></li>

  <li><a href="#" id="nav_current"><span>企业新闻</span></a></li>

  <li><a href="#"><span>企业简介</span></a></li>

  <li><a href="#"><span>产品展厅</span></a></li>

  <li><a href="#"><span>企业历史</span></a></li>

  <li><a href="#"><span>招商加盟</span></a></li>

  <li><a href="#"><span>网上下单</span></a></li>

  <li><a href="#"><span>联系我们</span></a></li>

  </ul>

  </div>

  <div>

  <ul>

  <li><a href="#">企业动态</a></li>

  <li><a href="#">领导活动</a></li>

  <li><a href="#">产品资讯</a></li>

  <li><a href="#">通知公告</a></li>

  </ul>

  </div>

  </div>

  <div></div>

  <div id="maincontent">

  <div id="main">

  <div id="index_top">

  <div id="pic">

  <script language='javascript' type="text/javascript">

  linkarr = new Array();

  picarr = new Array();

  textarr = new Array();

  var swf_width=269;

  var swf_height=210;

  var files = "http://www.aa25.cn/upload/2010-09/21/images/pic.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic1.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic2.jpg|http://www.aa25.cn/upload/2010-09/21/images/pic3.jpg";

  var links = "#|#|#|#";

  var texts = "";

  for(i=1;i<picarr.length;i++){

  if(files=="") files = picarr[i];

  else files += "|"+picarr[i];

  }

  for(i=1;i<linkarr.length;i++){

  if(links=="") links = linkarr[i];

  else links += "|"+linkarr[i];

  }

  for(i=1;i<textarr.length;i++){

  if(texts=="") texts = textarr[i];

  else texts += "|"+textarr[i];

  }

  document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');

  document.write('<param name="movie" value="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf"><param name="quality" value="high">');

  document.write('<param name="menu" value="false"><param name=wmode value="opaque">');

  document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');

  document.write('<embed src="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');

  </script>

  <div id="login"><span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login1.gif" alt="个人用户登录" width="131" height="39" /></a></span><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/btn_login.gif" alt="经销商登录" width="131" height="39" /></a></div>

  </div>

  <div id="hot_news">

  <div id="news_top">

  <h1>苹果iphone 4手机将于9月25日在中国上市</h1>

  <p>日前中國聯通正式宣布將于9月25日9時在中國大陸市場全面推出iPhone4,並爲iPhone4用戶量身定制了合約計劃。</p>

  </div>

  <div id="news_list">

  <ul>

  <li><span>9-22</span><a href="#">纯CSS实现三列DIV等高布局</a></li>

  <li><span>9-22</span><a href="#">HTML元素的ID和Name属性的区别</a></li>

  <li><span>9-22</span><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

  <li><span>9-22</span><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

  <li><span>9-22</span><a href="#">javascript为FF设置首頁</a></li>

  <li><span>9-22</span><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

  </ul>

  </div>

  </div>

  </div>

  <div id="index_pic">

  <h2><span></span></h2>

  <ul>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  <li><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic4.gif" alt="产品名称" width="107" height="87" />产品名称</a></li>

  </ul>

  </div>

  <div id="index_box">

  <div>

  <h2><a href="#">更多..</a><span>企业历史</span></h2>

  <div>

  <dl>

  <dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>

  <dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a>

  導言:北京時間9月2日淩晨1點蘋果在舊金山舉行新品發布會,數碼特派記者在美國現場直播&hellip;</dd>

  </dl>

  <ul>

  <li><a href="#">纯CSS实现三列DIV等高布局</a></li>

  <li><a href="#">HTML元素的ID和Name属性的区别</a></li>

  <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

  <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

  <li><a href="#">javascript为FF设置首頁</a></li>

  <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

  <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

  </ul>

  </div>

  </div>

  <div class="box box1">

  <h2><a href="#">更多..</a><span>企业历史</span></h2>

  <div>

  <dl>

  <dt><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/pic5.gif" alt="多角度对比 苹果iPod系列真机" width="91" height="70" /></a></dt>

  <dd><a href="#"><strong>多角度对比 苹果iPod系列真机</strong></a>

  導言:北京時間9月2日淩晨1點蘋果在舊金山舉行新品發布會,數碼特派記者在美國現場直播&hellip;</dd>

  </dl>

  <ul>

  <li><a href="#">纯CSS实现三列DIV等高布局</a></li>

  <li><a href="#">HTML元素的ID和Name属性的区别</a></li>

  <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>

  <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

  <li><a href="#">javascript为FF设置首頁</a></li>

  <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>

  <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>

  </ul>

  </div>

  </div>

  </div>

  </div>

  <div id="side">

  <div>

  <h2><strong>産品</strong>導購</h2>

  <div class="side_con product">

  <ul>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  <li><strong>语音业务:</strong><a href="#">普通电话</a> | <a href="#">语音数字中继</a></li>

  </ul>

  </div>

  </div>

  <div>

  <h2><strong>使用</strong>問答</h2>

  <div class="side_con ask">

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了許多,使用方法更加簡便...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強...</dd>

  </dl>

  <dl>

  <dt><a href="#">最新出的这个产品如何使用?</a></dt>

  <dd>該産品采用全新的技術,較上一産品有質的飛躍,功能上增強了許多,使用方法更加簡便...</dd>

  </dl>

  </div>

  </div>

  <div>

  <h2><strong>聯系</strong>我們</h2>

  <div class="side_con contact"><a href="#"><img src="http://www.aa25.cn/upload/2010-09/21/images/tel.gif" alt="联系我们" width="222" height="112" /></a></div>

  </div>

  </div>

  </div>

  <div></div>

  <div id="footer">

  <dl>

  <dt><a href="#">关于我们</a> || <a href="#">产品目录</a> || <a href="#">联系我们</a> || <a href="#">友情链接</a> || <a href="#">反馈问题</a> || <a href="#">广告合作</a></dt>

  <dd>Copyright &copy; 2007 - 2010 aa25.cn All Rights Reserved<br />

  标准之路 版权所有 京ICP备10007159号</dd>

  </dl>

  </div>

  </div>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  點擊此處下載實例源代碼及psd源文件

  九、相對路徑和相對于根目錄路徑

  上邊的例子學完後,你會發現在html中插入的圖片路徑是images/pic4.gif,而在css中插入的圖片路徑是這樣的?/post/../images/nav_bg.gif,後者比前者多出了../,這是什麽意思呢?

  這就是相對路徑和絕對路徑,../表示返回上一級,因爲css文件在css文件夾裏,圖片在images文件夾下,那麽layout.css就需要返回上一級找到images文件夾才能找到相應的圖片。直接文件夾名或是./開頭表示和當前平級,因爲index.html和images文件夾平級。不管是帶../還是不帶,這種寫法都叫相對路徑;另一種叫相對于根目錄路徑,它的寫法必須以/開始,意思是從根目錄開始一級一級向下查找,不管在哪裏,要使用pic4.gif這個圖片,路徑都必須是/images/pic4.gif;還有一種寫法叫絕對路徑,是以http://加域名開始的,這個不多多說了。

  使用相對路徑時,當根目錄放到一個二級目錄下時,文件仍然可以正常訪問,而使用相對于根目錄路徑時,其中一個頁面放到其它位置時,照樣能關聯麽相關的圖片和其它文件,比如:本例如果用相對于根目錄路徑的話,把index.html放到一個文件夾下後,還是可以正常訪問的。總之兩種方法各有優劣,根據你的需要采用一種合適的方法。相對路徑和相對于根目錄路徑是可以相互更改的,在站點管理——編輯——高級設置的本地信息裏有鏈接相對于,如下圖,默認爲文檔(就是所說的相對路徑),也可以改爲站點根目錄,相對路徑一般爲直接目錄名,需要返回上級時用../,向上返回兩級時用../../;相對于根目錄路徑始終以/開頭,不管該文件現在在哪一級,它都是以根目錄開始向下找。

  

  div+css網頁標准布局實例教程(三)

  前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了。为什么说是基本完成呢?因为要做的工作还很多,不但要把首頁做出来,其它的列表页详细页等页面也得做。还要配合程序员把整个网站完成,这样才能呈现给用户。应部分同学的要求,讲解一下程序怎么添加的,这样和程序员配合起来也更默契,还有怎么连接FTP上传下载,后期出现问题怎么调试等等。添加程序部分只需要了解就行了,连接ftp上传下载,页面调试查找问题这部分一定要掌握哟。

  § 创建服务器环境

  § 建立数据库

  § 本地和远程服务器连接

  § php读取数据

  § 页面调试及浏览器兼容

  一、創建服務器環境

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

  

  点击下载:WampServer 5 集成环境

  下载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列表改爲如下形式:

  <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>

  第一句是創建一個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中的背景图片,具体使用教程请参看:http://www.aa25.cn/div_css/255.shtml

  

  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的几个版本集成到一块,专门供测试兼容使用。大家可以下载安装一下,测试下页面在各个浏览器下的显示效果。

  

  文章出处:标准之路 编辑:杨雨晨思

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表