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