<nav id="b4a3u"><p id="b4a3u"></p></nav>

<menuitem id="b4a3u"><button id="b4a3u"></button></menuitem>

<meter id="b4a3u"><u id="b4a3u"></u></meter>
<thead id="b4a3u"><dl id="b4a3u"></dl></thead>
            想自學教程的朋友,就來教程巴巴。
            教程巴巴
            當前位置: 主頁 > 圖文 > 網頁制作教程 >

            十天學會DIV+CSS第十天 div+css網頁標準布局實例教程(一)

            發布時間:2011-04-07 16:10 點擊:
            分享到:
            【評論本教程】 【挑錯本教程】
            ------分隔線----------------------------

            今天學習《十天學會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>

            按照上圖的方法依次插入標簽,或者直接在代碼視圖中手工輸入,代碼如下:(注意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都設置寬度并居中,這樣做起來很麻煩,所以再在這些標簽外增加一下父標簽,設置這個父標簽寬度并居中后,是不是所有的標簽都居中了呢。增加后的代碼如下:

            黄色高清