您的位置: 首頁 > 技術文檔 > 網站建設 > Div+CSS布局入門教程
有中國特色的“曲線域名” 回到列表 條件注釋理論及實踐
 Div+CSS布局入門教程

作者:aultoale 時間: 2006-06-10 文檔類型:原創 來自:藍色理想

第 1 頁 頁面布局與規劃
第 2 頁 寫入整體層結構與CSS
第 3 頁 页面顶部制作之一
第 4 頁 頁面頂部制作之二
第 5 頁 頁面制作-用好border和clear

在網頁制作中,有許多的術語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關于HTML的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。

所有的設計第一步就是構思,構思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來,以下是我構思好的界面布局圖。

下面,我們需要根據構思圖來規劃一下頁面的布局,仔細分析一下該圖,我們不難發現,圖片大致分為以下幾個部分:

  1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
  2、內容部分又可分為側邊欄、主體內容;
  3、底部,包括一些版權信息。
  有了以上的分析,我們就可以很容易的布局了,我們設計層如下圖:

根據上圖,我再畫了一個實際的頁面布局圖,說明一下層的嵌套關系,這樣理解起來就會更簡單了。

  DIV結構如下:
  │body {} /*這是一個HTML元素,具體我就不說明了*/
  └#Container {} /*頁面層容器*/
     ├#Header {} /*頁面頭部*/
     ├#PageBody {} /*頁面主體*/
     │ ├#Sidebar {} /*側邊欄*/
     │ └#MainBody {} /*主體內容*/
     └#Footer {} /*頁面底部*/

至此,頁面布局與規劃已經完成,接下來我們要做的就是開始書寫HTML代碼和CSS。

出處:藍色理想
責任編輯:moby

上一頁 下一頁 寫入整體層結構與CSS

◎進入論壇網站綜合網頁制作版塊參加討論

相關文章 更多相關鏈接
CSS條狀圖表:復合型
CSS條狀圖表:基本型
別開生面:純CSS實現相冊滑動瀏覽
CSS布局實戰系列:混沌初開
大家都對vertical-align的各說各話
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數據同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/51個記錄/頁 轉到 頁 共5個記錄 分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特