DIVCSS布局設(shè)計項目一.ppt

,布局之美,我的頁面我設(shè)計,DIV+CSS布局設(shè)計 項目一,靜態(tài)網(wǎng)頁設(shè)計之,南京新華電腦專修學(xué)院 課件教改系列,PART/第一步,規(guī)劃網(wǎng)站,我的頁面我設(shè)計,PART/01 規(guī)劃網(wǎng)站,色彩搭配,布局設(shè)計,MAIN MENU主菜單 HEADER頭部 CONTENT主體內(nèi)容 SIDE BAR邊條 FOOTER腳部,功能使用,主頁菜單鏈接 工作介紹鏈接 公司簡介鏈接 論壇社區(qū)鏈接 聯(lián)系方式鏈接,后續(xù)擴展,動態(tài)頁面擴展 移動設(shè)備擴展,設(shè)計主色調(diào) 配色的數(shù)量 對比和調(diào)和 輕快到濃烈,南京新華電腦專修學(xué)院 課件教改系列,PART/02 圖例 學(xué)生分工圖,南京新華電腦專修學(xué)院 課件教改系列,MAIN MENU主菜單,40%,HEADER頭部,FOOTER腳部,CONTENT主體內(nèi)容,SIDE BAR邊條,60%,PART/01 圖例 時間分配圖,CONTENT 頁面主體 SIDE BAR 邊條部分,MAIN MENU 主菜單 HEADER 頭部對象 FOOTER 腳部對象,65%,35%,主體設(shè)計,附屬設(shè)計,南京新華電腦專修學(xué)院 課件教改系列,南京新華電腦專修學(xué)院 課件教改系列,PART/第二步,樣式設(shè)計,PART/第二步,我的頁面我設(shè)計,PART/02 創(chuàng)建模板及文件目錄,創(chuàng)建HTML模板,代碼如下：,南京新華電腦專修學(xué)院 課件教改系列,PART/02 創(chuàng)建模板及文件目錄,創(chuàng)建網(wǎng)站的大框，即建立一個寬100%、高900px的盒子，它將包含網(wǎng)站的所有元素。,代碼如下：,在 #box width:100%; height:900px; background-image:url(/images/2401.jpg); background-repeat:no-repeat; ,南京新華電腦專修學(xué)院 課件教改系列,#box,#span,#top,#bottom,#main,# span,# top,# bottom,# main,PART/02 DIV設(shè)計布局,#bottom span 尾部字段,Left/main/right 主窗體設(shè)計,#bottom 尾部設(shè)計,#top 頭部導(dǎo)航設(shè)計,南京新華電腦專修學(xué)院 課件教改系列,* 統(tǒng)一布局 margin:0px; border:0px; padding:0px;,BODY,*,fnot01,全局字體顏色,主體樣式,統(tǒng)一布局,PART/02 CSS外部文件詳細1,Body 主體樣式 font-family:“宋體“; font-size:12px; color:#969696;,Fnot01 全局字體顏色 margin:0px; border:0px; padding:0px;,南京新華電腦專修學(xué)院 課件教改系列,#top padding-top: 10px; margin-left:283px; width:550px; height:20px; font-size:16px; font-family:“微軟雅黑“; color:#FFF; ,#box width:100%; height:900px; background-image:url(/images/2401.jpg); background-repeat:no-repeat; ,南京新華電腦專修學(xué)院 課件教改系列,PART/02 CSS外部文件詳細2,PART/02 CSS外部文件詳細2,#bottom width:100%; height:100px; background-image:url(/images/2406.png); background-repeat:repeat-x; color:#000; text-align:center; line-height:20px; ,#main width:830px; height:390px; margin-left:95px; ,南京新華電腦專修學(xué)院 課件教改系列,PART/第三步,頁面設(shè)計,我的頁面我設(shè)計,PART/03 頁面設(shè)計剖析圖,整體設(shè)計,尾部設(shè)計,頭部設(shè)計,邊條設(shè)計,南京新華電腦專修學(xué)院 課件教改系列,主體設(shè)計,頭部設(shè)計,主體設(shè)計,PART/03 頁面代碼分段設(shè)計,頭部代碼設(shè)計片段：,主體代碼設(shè)計片段：,南京新華電腦專修學(xué)院 課件教改系列,PART/03 頁面代碼分段設(shè)計,尾部設(shè)計,邊條設(shè)計,尾部代碼設(shè)計片段：,南京新華電腦專修學(xué)院 課件教改系列,其余各組評價,頁面運行正確性,頁面完