《電子商務(wù)網(wǎng)頁設(shè)計與制作》課件第八章_第1頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》課件第八章_第2頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》課件第八章_第3頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》課件第八章_第4頁
《電子商務(wù)網(wǎng)頁設(shè)計與制作》課件第八章_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第八章設(shè)置DIV+CSS布局

隨著Web

2.0網(wǎng)站的盛行,符合Web標準的設(shè)計成為目前網(wǎng)站設(shè)計所要遵循的首要原則。而基于Web標準的網(wǎng)站設(shè)計其核心在于實現(xiàn)內(nèi)容與表現(xiàn)相分離,DIV+CSS恰恰是目前比較主流的一種網(wǎng)頁布局方法,它有別于傳統(tǒng)的表格布局模式,可以真正實現(xiàn)這一核心標準。本章即是基于“DIV+CSS”技術(shù),使用Dreamweaver來實現(xiàn)“個人網(wǎng)站”的設(shè)計與制作。知識目標(1)掌握Web的標準。(2)了解XHTML的基礎(chǔ)。(3)掌握DIV的概念。(4)掌握CSS語法規(guī)則。(5)了解模板和庫的概念和應(yīng)用。學(xué)習完本章后,學(xué)生應(yīng)當能夠依據(jù)前期的網(wǎng)站策劃及效果圖完成個人網(wǎng)站的DIV+CSS布局,包括:(1)學(xué)會利用“DIV+CSS”完成頁面的布局,靈活運用該技術(shù)的布局思路及方法。(2)學(xué)會使用“模板和庫”進行網(wǎng)頁的布局。第一節(jié)個人網(wǎng)站首頁的制作本節(jié)的目標是依據(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,放置美文欣賞及一些標簽文字鏈接。(7)xian,放置版塊分割線。(8)rightcontent,放置音樂推薦及圈子好友推薦。(9)bottom,放置網(wǎng)頁的版權(quán)信息。二、新建站點新建個人網(wǎng)站的站點“gerenwangzhan”,創(chuàng)建好的站點效果如圖8-3所示。三、制作頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中設(shè)置頁面類型為“CSS”,點擊“創(chuàng)建”按鈕,如圖8-4所示。(2)打開文件“Default.html”,切換到“代碼”視圖,在<head>和</head>之間輸入代碼:<link

href=″css/Default.css″

rel=″stylesheet″

type=″text/css″/>用于實現(xiàn)將CSS樣式文件鏈接到當前的網(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ū)塊浮動方向為左*/

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)將光標定位在“<td></td>”中間,在菜單欄選擇“插入”→“模板對象”→“可編輯區(qū)域”,在彈出的對話框中點擊“確定”按鈕,即可插入可編輯區(qū)域,名稱為EditRegion3,二、通過模板生成“店鋪公告”頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中選擇“模板中的頁”選項,然后在站點列表中選擇站點“gerenwangzhan”,接著選擇模板文件“Default”,點擊“創(chuàng)建”按鈕即可基于模板創(chuàng)建網(wǎng)頁,并將頁面保存為mwxs.html,(2)將光標定位至網(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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論