DIVCSS布局設(shè)計(jì)項(xiàng)目一.ppt

,布局之美,我的頁面我設(shè)計(jì),DIV+CSS布局設(shè)計(jì) 項(xiàng)目一,靜態(tài)網(wǎng)頁設(shè)計(jì)之,南京新華電腦專修學(xué)院 課件教改系列,PART/第一步,規(guī)劃網(wǎng)站,我的頁面我設(shè)計(jì),PART/01 規(guī)劃網(wǎng)站,色彩搭配,布局設(shè)計(jì),MAIN MENU主菜單 HEADER頭部 CONTENT主體內(nèi)容 SIDE BAR邊條 FOOTER腳部,功能使用,主頁菜單鏈接 工作介紹鏈接 公司簡(jiǎn)介鏈接 論壇社區(qū)鏈接 聯(lián)系方式鏈接,后續(xù)擴(kuò)展,動(dòng)態(tài)頁面擴(kuò)展 移動(dòng)設(shè)備擴(kuò)展,設(shè)計(jì)主色調(diào) 配色的數(shù)量 對(duì)比和調(diào)和 輕快到濃烈,南京新華電腦專修學(xué)院 課件教改系列,PART/02 圖例 學(xué)生分工圖,南京新華電腦專修學(xué)院 課件教改系列,MAIN MENU主菜單,40%,HEADER頭部,FOOTER腳部,CONTENT主體內(nèi)容,SIDE BAR邊條,60%,PART/01 圖例 時(shí)間分配圖,CONTENT 頁面主體 SIDE BAR 邊條部分,MAIN MENU 主菜單 HEADER 頭部對(duì)象 FOOTER 腳部對(duì)象,65%,35%,主體設(shè)計(jì),附屬設(shè)計(jì),南京新華電腦專修學(xué)院 課件教改系列,南京新華電腦專修學(xué)院 課件教改系列,PART/第二步,樣式設(shè)計(jì),PART/第二步,我的頁面我設(shè)計(jì),PART/02 創(chuàng)建模板及文件目錄,創(chuàng)建HTML模板,代碼如下：,南京新華電腦專修學(xué)院 課件教改系列,PART/02 創(chuàng)建模板及文件目錄,創(chuàng)建網(wǎng)站的大框，即建立一個(gè)寬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è)計(jì)布局,#bottom span 尾部字段,Left/main/right 主窗體設(shè)計(jì),#bottom 尾部設(shè)計(jì),#top 頭部導(dǎo)航設(shè)計(jì),南京新華電腦專修學(xué)院 課件教改系列,* 統(tǒng)一布局 margin:0px; border:0px; padding:0px;,BODY,*,fnot01,全局字體顏色,主體樣式,統(tǒng)一布局,PART/02 CSS外部文件詳細(xì)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外部文件詳細(xì)2,PART/02 CSS外部文件詳細(xì)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è)計(jì),我的頁面我設(shè)計(jì),PART/03 頁面設(shè)計(jì)剖析圖,整體設(shè)計(jì),尾部設(shè)計(jì),頭部設(shè)計(jì),邊條設(shè)計(jì),南京新華電腦專修學(xué)院 課件教改系列,主體設(shè)計(jì),頭部設(shè)計(jì),主體設(shè)計(jì),PART/03 頁面代碼分段設(shè)計(jì),頭部代碼設(shè)計(jì)片段：,主體代碼設(shè)計(jì)片段：,南京新華電腦專修學(xué)院 課件教改系列,PART/03 頁面代碼分段設(shè)計(jì),尾部設(shè)計(jì),邊條設(shè)計(jì),尾部代碼設(shè)計(jì)片段：,南京新華電腦專修學(xué)院 課件教改系列,其余各組評(píng)價(jià),頁面運(yùn)行正確性,頁面完