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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第八章設置DIV+CSS布局

隨著Web

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

href=″css/Default.css″

rel=″stylesheet″

type=″text/css″/>用于實現將CSS樣式文件鏈接到當前的網頁。(3)在新建的CSS文件中輸入代碼:(4)切換到“Default.html”的代碼視圖,在<body>和</body>之間添加div,代碼如下:(5)切換到CSS文件,繼續(xù)添加CSS樣式,代碼如下:(6)繼續(xù)在網頁的代碼視圖下添加代碼,具體如下:<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;/*設置區(qū)塊的寬度*/

height:169px;/*設置區(qū)塊的高度*/

float:left;/*設置區(qū)塊浮動方向為左*/

background:#000;

/*設置區(qū)塊背景色*/}.pic{

padding-left:70px;/*設置區(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:″黑體″;/*設置字體*/

padding-top:3px;/*設置上邊距為3像素*/

font-size:15px;/*設置字號*/

font-weight:bold;/*設置字體加粗*/

line-height:

31px;

padding-left:50px;

padding-bottom:5px;

background:url(images/linews.jpg)

no-repeat;/*設置背景色為圖片,其相對路

徑為images/linews

jpg*/

width:188px;

height:31px;第二節(jié)

個人網站子頁面的制作一、創(chuàng)建網站與頁面模板(1)打開網站的首頁文件“Default.html”,執(zhí)行“文件|另存為模板”命令,將網站保存為模板文件Default.dwt,如圖8-12所示。(2)刪除并調整模板文件中的Flash動畫所在的div中的部分代碼,修改后的代碼如圖8-13所示。(3)將光標定位在“<td></td>”中間,在菜單欄選擇“插入”→“模板對象”→“可編輯區(qū)域”,在彈出的對話框中點擊“確定”按鈕,即可插入可編輯區(qū)域,名稱為EditRegion3,二、通過模板生成“店鋪公告”頁面(1)執(zhí)行“文件|新建”命令,在彈出的對話框中選擇“模板中的頁”選項,然后在站點列表中選擇站點“gerenwangzhan”,接著選擇模板文件“Default”,點擊“創(chuàng)建”按鈕即可基于模板創(chuàng)建網頁,并將頁面保存為mwxs.html,(2)將光標定位至網頁文件“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)切換到網頁文件的代碼窗口,在“<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)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論