第十章：div+css網(wǎng)頁標(biāo)準(zhǔn)布局實例教程 二維碼
590
div+css網(wǎng)頁標(biāo)準(zhǔn)布局實例教程（一） 今天學(xué)習(xí)《十天學(xué)會web標(biāo)準(zhǔn)(div+css)》的最后一個章節(jié)，本章節(jié)把前面學(xué)習(xí)的零碎內(nèi)容串聯(lián)起來，組織成一個網(wǎng)站，將根據(jù)本人這些年來的從業(yè)經(jīng)驗，從建立站點到一個完整的div+css網(wǎng)頁的完成，整個流程下來，希望能對各位有所幫助。由于本節(jié)內(nèi)容較多，將分三部分來講解。
一、建立站點 前面的課程都是零碎講解一些相關(guān)知識，那么要做一個網(wǎng)站，首先需要建立一個站點。那么什么是站點，為什么要建立一個站點呢？因為網(wǎng)站不同于其它文件，比如一個圖片，放到哪個盤哪個目錄下都可以訪問。而網(wǎng)站是許多文件相互關(guān)聯(lián)的，所以要專門一個目錄把它們分門別類存放起來。如果搞過視頻編輯的朋友都知道，需要先建立一個工程，把原始的視頻文件、圖片素材分類放好，也是這個道理。下面以在D盤建立一個jiaocheng文件夾為例，在dreamweaver(簡稱DW)里創(chuàng)建一個站點指向這個文件夾，然后在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。 保存后，一個站點就建立起來了，我用的是DW cs5版本，不同版本界面有所不同。如果要連接FTP，需要設(shè)置服務(wù)器選項（后面會涉及到）。站點建立好后，我們先建立一個images和css文件夾，分別用來存放圖片和css文件。直接在windows的資源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目錄上點擊右鍵，選擇新建文件夾后更改名字即可。 二、結(jié)構(gòu)分析 創(chuàng)建完站點后，就需要對頁面結(jié)構(gòu)進行分析了，根據(jù)效果圖，分析頁面分為幾大塊，該怎么布局更合理。下面這個圖是我做的一個企業(yè)網(wǎng)站的模板，雖然不怎么好看，但目的是把前邊學(xué)的東西全都給串起來，讓大家掌握各種情況的處理方法，先看下效果圖及在網(wǎng)頁中顯示的樣式： 在瀏覽器中打開效果圖預(yù)覽 從圖中可以看出整個頁面分為頭部區(qū)域、導(dǎo)航區(qū)域、主體部分和底部，其中主體部分又分為左右兩列，整個頁面居中顯示，看明白了這點，下邊的框架就好搭建了。整體框架結(jié)果圖如下： 三、搭建框架 首先在dw里新建一個html文件： 點擊創(chuàng)建后會自動生成如下代碼的一個html文件，保存為index.html并把無標(biāo)題文檔改為：主頁。強調(diào)一點，許多同學(xué)喜歡把第一行代碼刪除掉，認(rèn)為沒用，其實這句話的作用大著呢，它標(biāo)明以何種形式解析文檔，如果刪除可能會引起樣式表失效或其它意想不到的問題。接下來需要插入以上各個塊的標(biāo)簽了，以插入header的標(biāo)簽為例，其它的插入方法類同。 <!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> 按照上圖的方法依次插入標(biāo)簽，或者直接在代碼視圖中手工輸入，代碼如下：（注意main和side在maincontent里包含著呢） <div id="header">此處顯示 id "header" 的內(nèi)容</div> <div id="nav">此處顯示 id "nav" 的內(nèi)容</div> <div id="maincontent"> <div id="main">此處顯示 id "main" 的內(nèi)容</div> <div id="side">此處顯示 id "side" 的內(nèi)容</div> </div> <div id="footer">此處顯示 id "footer" 的內(nèi)容</div> 從上邊的效果圖分析得知，整個網(wǎng)頁是居中瀏覽器顯示的，按照這樣的寫法需要把以上的header、nav、maincontent、footer都設(shè)置寬度并居中，這樣做起來很麻煩，所以再在這些標(biāo)簽外增加一下父標(biāo)簽，設(shè)置這個父標(biāo)簽寬度并居中后，是不是所有的標(biāo)簽都居中了呢。增加后的代碼如下： <div id="container"> <div id="header">此處顯示 id "header" 的內(nèi)容</div> <div id="nav">此處顯示 id "nav" 的內(nèi)容</div> <div id="maincontent"> <div id="main">此處顯示 id "main" 的內(nèi)容</div> <div id="side">此處顯示 id "side" 的內(nèi)容</div> </div> <div id="footer">此處顯示 id "footer" 的內(nèi)容</div> </div> html框架代碼寫完后，下邊就需要設(shè)置css樣式表了。先測量下效果圖的整體寬度，然后設(shè)置container也是這個寬度并居中。說起測量效果圖寬度，方法有多種，可以直接查看圖片尺寸。如果測量其中某一塊的寬度，可以使用測量軟件，也可以在ps下測量。本人一般在ps下測量，因為效果圖在ps下制作的，所以用ps測量也比較方便。方法是首選項里把ps的單位改為像素，然后用選區(qū)選中要測量的部分，在信息面板中就顯示出當(dāng)前選區(qū)的寬高了（如果你實在不知道怎么改單位，怎么選區(qū)怎么查看的，就要補習(xí)一下ps啦）。  以信載商，良心建站。遨游始終秉承“一次建站、終身維護”的宗旨，竭誠為客戶提供最優(yōu)質(zhì)的互聯(lián)網(wǎng)服務(wù)。遨游建站率先植入seo優(yōu)化理念，讓你的網(wǎng)頁更利于搜索引擎抓取，關(guān)鍵詞排名更靠前。可仿站、可定制。無論是傳統(tǒng)型企業(yè)官網(wǎng)、集團型品牌官網(wǎng)，還是營銷型網(wǎng)站、電商型網(wǎng)站、定制型網(wǎng)站、特殊行業(yè)網(wǎng)站（醫(yī)療、教育），全部搞定。 公司：網(wǎng)站建設(shè)_小程序設(shè)計_競價托管代運營公司；郵箱：1013601535@qq.com 手機：17073547034；QQ： 1013601535 在線留言咨詢，24小時內(nèi)回復(fù)
我想咨詢 *
企業(yè)名稱
手機號碼 *
您的姓名
所在城市 提交 |
網(wǎng)站建設(shè)問題
熱門標(biāo)簽
最新發(fā)布 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|