版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
第八章設(shè)置DIV+CSS布局
隨著Web
2.0網(wǎng)站的盛行,符合Web標(biāo)準(zhǔn)的設(shè)計成為目前網(wǎng)站設(shè)計所要遵循的首要原則。而基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計其核心在于實(shí)現(xiàn)內(nèi)容與表現(xiàn)相分離,DIV+CSS恰恰是目前比較主流的一種網(wǎng)頁布局方法,它有別于傳統(tǒng)的表格布局模式,可以真正實(shí)現(xiàn)這一核心標(biāo)準(zhǔn)。本章即是基于“DIV+CSS”技術(shù),使用Dreamweaver來實(shí)現(xiàn)“個人網(wǎng)站”的設(shè)計與制作。知識目標(biāo)(1)掌握Web的標(biāo)準(zhǔn)。(2)了解XHTML的基礎(chǔ)。(3)掌握DIV的概念。(4)掌握CSS語法規(guī)則。(5)了解模板和庫的概念和應(yīng)用。學(xué)習(xí)完本章后,學(xué)生應(yīng)當(dāng)能夠依據(jù)前期的網(wǎng)站策劃及效果圖完成個人網(wǎng)站的DIV+CSS布局,包括:(1)學(xué)會利用“DIV+CSS”完成頁面的布局,靈活運(yùn)用該技術(shù)的布局思路及方法。(2)學(xué)會使用“模板和庫”進(jìn)行網(wǎng)頁的布局。第一節(jié)個人網(wǎng)站首頁的制作本節(jié)的目標(biāo)是依據(jù)“個人網(wǎng)站”的首頁效果圖,使用DIV+CSS技術(shù),完成網(wǎng)站首頁的制作一、繪制首頁結(jié)構(gòu)布局草圖根據(jù)首頁效果圖,利用Photoshop軟件繪制首頁的結(jié)構(gòu)布局草圖,效果如圖8-2所示。對照布局草圖,首頁中各個版塊的內(nèi)容如下:(1)top,主要放置LOGO或者配套文字。(2)lan,設(shè)置歡迎語樣式。(3)leftblank,設(shè)置區(qū)塊樣式。(4)pic,主要放置個人相冊圖片展示。(5)rightdiv,放置常用的鏈接文字及首頁導(dǎo)航條。(6)midmainleft,放置美文欣賞及一些標(biāo)簽文字鏈接。(7)xian,放置版塊分割線。(8)rightcontent,放置音樂推薦及圈子好友推薦。(9)bottom,放置網(wǎng)頁的版權(quán)信息。二、新建站點(diǎn)新建個人網(wǎng)站的站點(diǎn)“gerenwangzhan”,創(chuàng)建好的站點(diǎn)效果如圖8-3所示。三、制作頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中設(shè)置頁面類型為“CSS”,點(diǎn)擊“創(chuàng)建”按鈕,如圖8-4所示。(2)打開文件“Default.html”,切換到“代碼”視圖,在<head>和</head>之間輸入代碼:<link
href=″css/Default.css″
rel=″stylesheet″
type=″text/css″/>用于實(shí)現(xiàn)將CSS樣式文件鏈接到當(dāng)前的網(wǎng)頁。(3)在新建的CSS文件中輸入代碼:(4)切換到“Default.html”的代碼視圖,在<body>和</body>之間添加div,代碼如下:(5)切換到CSS文件,繼續(xù)添加CSS樣式,代碼如下:(6)繼續(xù)在網(wǎng)頁的代碼視圖下添加代碼,具體如下:<div
class=″leftblank″></div><div
class=″pic″><a
href=″#″><img
src=″images/001.jpg″
border=″0″></a></div><div
class=″rightdiv″><ul><li
onmouseover=″this.style.background='url(imageslanli.jpg)
no-repeat'″onmouseout=″this.style.background
='url(images/linews
jpg)
no-repeat'″><a
href=″#″>圈子好友</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)no-repeat'″><a
href=″#″>美文欣賞</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews.jpg)
no-repeat'″><a
href=″#″>個人相冊</a></li><li
onmouseover=″this.style.background='url(images/anli.jpg)
no-repeat'″onmouseout=″this.style.background='url(images/linews
jpg)
no-repeat'″><a
href=″#″>音樂推薦</a></li></ul></div>(7)切換到CSS文件,新建自定義樣式“.leftblank”“.pic”“.rightdiv”“.rightdiv
li”,代碼如下:.leftblank{
width:36px;/*設(shè)置區(qū)塊的寬度*/
height:169px;/*設(shè)置區(qū)塊的高度*/
float:left;/*設(shè)置區(qū)塊浮動方向?yàn)樽?/
background:#000;
/*設(shè)置區(qū)塊背景色*/}.pic{
padding-left:70px;/*設(shè)置區(qū)塊左邊距為70像素*/
float:left;
width:542px;
height:169px;}.rightdiv{padding-top:7px;
padding-left:l0px;
width:245px;
height:162px;
float:left;
background:#cac75e;
}
.rightdiv
li{
font-family:″黑體″;/*設(shè)置字體*/
padding-top:3px;/*設(shè)置上邊距為3像素*/
font-size:15px;/*設(shè)置字號*/
font-weight:bold;/*設(shè)置字體加粗*/
line-height:
31px;
padding-left:50px;
padding-bottom:5px;
background:url(images/linews.jpg)
no-repeat;/*設(shè)置背景色為圖片,其相對路
徑為images/linews
jpg*/
width:188px;
height:31px;第二節(jié)
個人網(wǎng)站子頁面的制作一、創(chuàng)建網(wǎng)站與頁面模板(1)打開網(wǎng)站的首頁文件“Default.html”,執(zhí)行“文件|另存為模板”命令,將網(wǎng)站保存為模板文件Default.dwt,如圖8-12所示。(2)刪除并調(diào)整模板文件中的Flash動畫所在的div中的部分代碼,修改后的代碼如圖8-13所示。(3)將光標(biāo)定位在“<td></td>”中間,在菜單欄選擇“插入”→“模板對象”→“可編輯區(qū)域”,在彈出的對話框中點(diǎn)擊“確定”按鈕,即可插入可編輯區(qū)域,名稱為EditRegion3,二、通過模板生成“店鋪公告”頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中選擇“模板中的頁”選項(xiàng),然后在站點(diǎn)列表中選擇站點(diǎn)“gerenwangzhan”,接著選擇模板文件“Default”,點(diǎn)擊“創(chuàng)建”按鈕即可基于模板創(chuàng)建網(wǎng)頁,并將頁面保存為mwxs.html,(2)將光標(biāo)定位至網(wǎng)頁文件“mwxs.html”的可編輯區(qū)域中,輸入如下代碼:<div
class=″middl″>
<div
class=″woman″>治愈系圖片欣賞</div>
<div
class=″contentl″></div></div><div
class=″xianl″></div><div
class=″rightct″><div
class=″rightcontenttitle″>查看更多美文</div><div
class=″rightlist″></div>打開樣式表文件“Default.css”,添加樣式文件,具體代碼如下:.xianl{
background:
url(images/rightbian.jpg);
width:22px;
float:left;
height:
300px;
}.rightct{
padding-left:15px;
width:310px;
float:left;
height:300px;
}.middl{
width:521px;
height:300px;
float:left;
padding-left:106px;}</div>.contentl{
line-height:18px;
float:left;
height:146px;
width:518px;
padding-left:0px;
}.litlepicl{
width:124px;
height:124px;
float:left;
border:0px;
margin-left:
2px;
border:1px
#000
solid;
}(3)切換到網(wǎng)頁文件的代碼窗口,在“<div
class=″contentl″></div>”之間嵌套代碼,具體如下:<div
class=″litlepicl″><a
href=″#″><img
src=″images/010.jpg″border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″images/007.jpg″
border=″0″></a></div><div
class=″litlepicl″><a
href=″#″><img
src=″im
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 高端私人飛機(jī)航線申請與全球旅行定制服務(wù)合同
- 房產(chǎn)處分權(quán)與抵押權(quán)解除及清償協(xié)議
- 外貿(mào)企業(yè)單證處理外包派遣及培訓(xùn)合同
- 跨國房地產(chǎn)投資運(yùn)營管理合同
- 肺癌新輔助治療進(jìn)展與臨床實(shí)踐
- 災(zāi)害救援私人直升機(jī)航拍空域申請及影像記錄合同
- 建筑幕墻膠縫更換與節(jié)能效果評估協(xié)議
- 數(shù)據(jù)庫資源運(yùn)營權(quán)授權(quán)與市場推廣合同
- 婦科手術(shù)護(hù)理操作規(guī)范
- Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 5.1.13任務(wù)操作視頻
- 五年級數(shù)學(xué)競賽試題原創(chuàng)
- 教師聽課評價記錄表
- 十字頭夾具設(shè)計說明書
- 物理高考最后一課課件
- 04S202 室內(nèi)消火栓安裝
- 電解質(zhì)紊亂的心電圖表現(xiàn)
- 2022年修改后的銀行業(yè)G32表填報說明
- 巨量-信息流（初級）認(rèn)證考試（重點(diǎn)）題庫（含答案）
- 三年級硬筆書法課課件
- 佳發(fā)教育考試網(wǎng)上巡查系統(tǒng)(標(biāo)準(zhǔn)版)
- 投融資部面試題本
評論
0/150
提交評論