div+css網頁標準布局實例教程-Web標準(div+css)教程 二維碼
311
div+css網頁標準布局實例教程（一） 今天學習《十天學會web標準(div+css)》的最后一個章節，本章節把前面學習的零碎內容串聯起來，組織成一個網站，將根據本人這些年來的從業經驗，從建立站點到一個完整的div+css網頁的完成，整個流程下來，希望能對各位有所幫助。由于本節內容較多，將分三部分來講解。
一、建立站點 前面的課程都是零碎講解一些相關知識，那么要做一個網站，首先需要建立一個站點。那么什么是站點，為什么要建立一個站點呢？因為網站不同于其它文件，比如一個圖片，放到哪個盤哪個目錄下都可以訪問。而網站是許多文件相互關聯的，所以要專門一個目錄把它們分門別類存放起來。如果搞過視頻編輯的朋友都知道，需要先建立一個工程，把原始的視頻文件、圖片素材分類放好，也是這個道理。下面以在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>  以信載商，良心建站。遨游始終秉承“一次建站、終身維護”的宗旨，竭誠為客戶提供最優質的互聯網服務。遨游建站率先植入seo優化理念，讓你的網頁更利于搜索引擎抓取，關鍵詞排名更靠前。可仿站、可定制。無論是傳統型企業官網、集團型品牌官網，還是營銷型網站、電商型網站、定制型網站、特殊行業網站（醫療、教育），全部搞定。 公司：網站建設_小程序設計_競價托管代運營公司；郵箱：1013601535@qq.com 手機：17073547034；QQ： 1013601535 在線留言咨詢，24小時內回復
我想咨詢 *
企業名稱
手機號碼 *
您的姓名
所在城市 提交 |
網站建設問題
熱門標簽
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|