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