HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版）-教案 第15章 網(wǎng)頁布局綜合案例BABY HOUSING網(wǎng)上商店_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號11授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第13章綜合實(shí)訓(xùn)：開發(fā)視頻網(wǎng)頁課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論網(wǎng)上商店的設(shè)計(jì)，交互方式等相關(guān)知識，通過查詢了解當(dāng)前流行的網(wǎng)上商店網(wǎng)頁布局風(fēng)格并以PPT的形式記錄下來。教學(xué)目標(biāo)：知識目標(biāo)掌握HTM+CSS布局。掌握J(rèn)avaScript語言滾動(dòng)事件。能力目標(biāo)能夠獨(dú)立實(shí)現(xiàn)網(wǎng)上商店的靜態(tài)布局；能夠獨(dú)立實(shí)現(xiàn)網(wǎng)上商店的各項(xiàng)動(dòng)態(tài)交互效果。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握HTML+CSS+JavaScript動(dòng)態(tài)網(wǎng)頁編寫技能，理解并應(yīng)用專業(yè)知識。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：網(wǎng)上商店靜態(tài)網(wǎng)頁布局解決方法：通過知識點(diǎn)講解+課堂在線展示相結(jié)合的方法，教師講解通過HTML+CSS實(shí)現(xiàn)網(wǎng)上商店布局，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時(shí)通過課堂在線展示，使學(xué)生可以更直觀的了解網(wǎng)頁編寫過程中可能遇到的問題以及解決方法；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點(diǎn)：網(wǎng)上商店的動(dòng)態(tài)交互效果解決方法：通過代碼講解+在線演示的的方式教學(xué)，細(xì)致講解網(wǎng)頁中各種動(dòng)態(tài)效果是如何通過JavaScript代碼實(shí)現(xiàn)的。幫助學(xué)生掌握J(rèn)avaScript代碼對網(wǎng)頁動(dòng)態(tài)交互效果的實(shí)現(xiàn)方法和技巧。從實(shí)用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計(jì)算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評價(jià)方式：對理論知識學(xué)習(xí)效果評價(jià)：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對技能的評價(jià)：教師對學(xué)生上交網(wǎng)頁作品按制作要求進(jìn)行綜合性評價(jià)；對職業(yè)素養(yǎng)的評價(jià)：采用學(xué)生自評、小組內(nèi)評價(jià)和教師評價(jià)相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過程時(shí)間分配方法及手段1.案例分析BABYHOUSING網(wǎng)站首頁在垂直方向分為上、中、下3部分。其中，上、下兩部分的背景會自動(dòng)延伸；中間的內(nèi)容區(qū)域分為左、右兩列，左欄為主要內(nèi)容，右欄由若干圓角框構(gòu)成。網(wǎng)站首頁效果如圖15.1所示。圖15.1網(wǎng)站首頁效果此外，這個(gè)頁面具有很好的交互提示功能。例如，頁頭部分的導(dǎo)航菜單具有鼠標(biāo)指針經(jīng)過時(shí)發(fā)生變化的效果，如圖15.2所示。圖15.2具有鼠標(biāo)指針經(jīng)過時(shí)效果的導(dǎo)航菜單2.內(nèi)容分析在設(shè)計(jì)網(wǎng)頁之前，首先要明確網(wǎng)站的內(nèi)容，即通過網(wǎng)頁要傳達(dá)給訪問者什么信息，這些信息中哪些是最重要的、哪些是相對重要的，以及這些信息應(yīng)該如何組織。現(xiàn)以BABYHOUSING網(wǎng)上商店的首頁為例進(jìn)行說明。首先，要有明確的網(wǎng)站名稱和標(biāo)志。此外，要給訪問者方便地了解網(wǎng)站所有者自身信息的途徑，包括指向關(guān)于我們、聯(lián)系方式等內(nèi)容的鏈接。接下來，網(wǎng)站的根本目的是銷售商品，因此必須有清晰的商品分類，以及合理的導(dǎo)航欄。網(wǎng)上商店的商品通常都是以類別組織的，首頁上通常會展示最受歡迎的和重點(diǎn)推薦的商品，因?yàn)槭醉摰脑L問量明顯比其他頁面大得多，這相當(dāng)于做廣告了。網(wǎng)站首頁要展示的內(nèi)容大致包括以下幾種：標(biāo)題、標(biāo)志、主導(dǎo)航欄、關(guān)于我們、登錄賬號、購物車、今日推薦、最受歡迎、分類推薦、搜索商品框、商品分類、特別提示、版權(quán)信息。3.原型設(shè)計(jì)分析完網(wǎng)頁內(nèi)容后，還要對網(wǎng)站的完整功能和內(nèi)容進(jìn)行全面分析。如果有條件，應(yīng)該制作出線框圖，這個(gè)過程專業(yè)上稱為“原型設(shè)計(jì)”。例如，在具體制作網(wǎng)頁之前，就可以先設(shè)計(jì)圖15.3所示的網(wǎng)站首頁原型線框圖。網(wǎng)頁原型設(shè)計(jì)也是分步驟完成的。例如，首先要考慮把一個(gè)頁面從上至下依次分為3部分，如圖15.4所示。然后將每個(gè)部分逐漸細(xì)化，例如，頁頭部分可以細(xì)化為圖15.5所示的效果。 圖15.4首頁分成3部分的效果 圖15.5頁頭部分結(jié)構(gòu)圖中間內(nèi)容部分分為左、右兩欄，如圖15.6所示，再進(jìn)一步細(xì)化為圖15.7所示的效果。 頁腳部分比較簡單，這里不再闡述。這時(shí)將這3部分組合起來，就形成了圖15.3所示的效果。 圖15.6中間內(nèi)容部分結(jié)構(gòu)圖 圖15.7對內(nèi)容部分進(jìn)行細(xì)化4.布局設(shè)計(jì)下面可以根據(jù)原型設(shè)計(jì)圖來設(shè)計(jì)網(wǎng)頁。先設(shè)計(jì)整體樣式，然后設(shè)計(jì)頁頭部分、中間內(nèi)容部分和頁腳部分。【整體樣式設(shè)計(jì)】首先對整個(gè)頁面進(jìn)行整體設(shè)計(jì)，以下是根據(jù)圖15.3編寫的頁面基本結(jié)構(gòu)代碼。代碼分為3部分：頁頭部分、中間內(nèi)容部分和頁腳部分，每部分用一個(gè)div元素劃分。<body><divclass="header"> <!--頁頭部分-->頁頭內(nèi)容</div><divclass="content"> <!--中間內(nèi)容部分-->詳細(xì)內(nèi)容</div><divclass="footer"> <!--頁腳部分-->頁腳內(nèi)容</div></body>然后使用CSS設(shè)置整個(gè)頁面的共有屬性。例如，對font、margin、padding等屬性進(jìn)行初始設(shè)置，這些屬性在后面的設(shè)計(jì)中用來保證這些內(nèi)容在各個(gè)瀏覽器中有相同表現(xiàn)。CSS代碼如下。body{margin:0;padding:0;background:whiteurl('images/header-background.png')repeat-x;font:12px/1.6arial;}ul{margin:0;padding:0;list-style:none;}a{text-decoration:none;color:#3D81B4;}p{text-indent:2em;}使用CSS在body中設(shè)置水平背景圖像，并使這個(gè)背景圖像在水平方向平鋪，即可產(chǎn)生寬度方向自動(dòng)延伸的背景效果?！卷擃^部分】下面介紹頁頭部分的設(shè)計(jì)。根據(jù)圖15.5設(shè)定的頁頭各部分來編寫HTML代碼，代碼如下。<divclass="header"><h1><span>BABYHOUSING</span></h1> <!--網(wǎng)站名稱--><divclass="logo"><imgsrc="images/logo.gif"/></div> <!--網(wǎng)站Logo--><ulclass="mainNavigation"> <!--主導(dǎo)航欄--><liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li><li><ahref="#"><strong>商品介紹</strong></a></li><li><ahref="#"><strong>信息</strong></a></li><li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul><ulclass="topNavigation"> <!--頂部導(dǎo)航--><li><ahref="#"><span>關(guān)于我們</span></a></li><li><ahref="#"><span>聯(lián)系方式</span></a></li><li><ahref="#"><span>意見建議</span></a></li><ul><ulclass="accountBox"> <!--登錄賬號與購物車--><li><ahref="#"class="login"><span>登錄賬號</span></a></li><li><ahref="#"class="cart"><span>購物車</span></a></li></ul></div>在以上代碼中進(jìn)行了如下設(shè)置。將整個(gè)頁頭部分放入一個(gè)div元素中，為該div設(shè)置類別名稱為header。將網(wǎng)站Logo圖像放在一個(gè)嵌套的div元素中，為該div設(shè)置類別名稱為logo。將主導(dǎo)航欄、頂部導(dǎo)航、登錄賬號與購物車分別放在不同的ul元素中，并在li元素中定義主導(dǎo)航欄、頂部導(dǎo)航、登錄賬號與購物車的詳細(xì)內(nèi)容，這里的內(nèi)容都設(shè)置為超鏈接。為主導(dǎo)航欄的列表設(shè)置類別名稱為mainNavigation。為主導(dǎo)航欄的第一個(gè)項(xiàng)目（也就是“網(wǎng)站首頁”）設(shè)置類別名稱為current。為公司介紹的鏈接列表（也就是頂部導(dǎo)航）設(shè)置類別名稱為topNavigation。為登錄賬號和購物車鏈接列表設(shè)置類別名稱為accountBox。當(dāng)然僅僅增加這些div和設(shè)置類別名稱還不能真正起到效果，還必須設(shè)置相應(yīng)的CSS樣式。1．設(shè)置頭部樣式為整個(gè)頭部設(shè)置樣式，代碼如下。.header{position:relative;width:760px;height:138px;margin:0auto;font:15px/1.6arial;}在header部分的代碼中，將position屬性設(shè)置為relative，目的是使后面的子元素使用絕對定位時(shí)，以頁頭而不是瀏覽器窗口為定位基準(zhǔn)。然后設(shè)置寬度、高度、水平居中對齊方式和字體樣式。2．設(shè)置h1標(biāo)題樣式設(shè)置h1標(biāo)題的HTML代碼如下。<h1><span>BABYHOUSING</span></h1>本網(wǎng)站的h1標(biāo)題是插入了title.png圖片，并設(shè)置圖片不平鋪。將margin屬性設(shè)置為0，避免干擾其他元素的定位，CSS代碼如下。.headerh1{background:transparenturl('images/title.png')no-repeatbottomleft;height:63px;margin:0;margin-left:40px;}圖15.8h1標(biāo)題效果設(shè)置完成后的效果如圖15.8所示。圖15.8h1標(biāo)題效果3．設(shè)置網(wǎng)站Logo樣式設(shè)置網(wǎng)站Logo的HTML代碼如下。<divclass="logo"><imgsrc="images/logo.gif"/></div>在CSS中將Logo圖片所在的div設(shè)置為絕對定位，并設(shè)置它的位置，代碼如下。.header.logo{position:absolute;top:10px;left:0px;}圖15.9網(wǎng)站Logo效果網(wǎng)站圖15.9網(wǎng)站Logo效果4．設(shè)置頂部導(dǎo)航欄樣式設(shè)置頂部導(dǎo)航欄的HTML代碼如下。<ulclass="topNavigation"> <!--頂部導(dǎo)航--><li><ahref="#"><span>關(guān)于我們</span></a></li><li><ahref="#"><span>聯(lián)系方式</span></a></li><li><ahref="#"><span>意見建議</span></a></li><ul>在CSS中，將頂部導(dǎo)航欄的列表設(shè)置為絕對定位，右上角對齊到header的右上角，代碼如下。.header.topNavigation{position:absolute;top:0;right:0;}將頂部導(dǎo)航欄的列表項(xiàng)目li元素設(shè)置為左浮動(dòng)，且使它們水平排列，并使項(xiàng)目之間有一定的間隔，代碼如下。.header.topNavigationli{float:left;padding:02px;}設(shè)置頂部導(dǎo)航欄中的鏈接樣式a元素，代碼如下。.header.topNavigationa{display:block;line-height:25px;padding:00015px;background:transparenturl('images/top-navi-white.gif')no-repeat;}.header.topNavigationaspan{display:block;padding:015px00;background:transparenturl('images/top-navi-white.gif')no-repeatright;}上段代碼是將a元素由行內(nèi)元素變?yōu)閴K級元素，設(shè)置行高的目的是使文字能在垂直方向居中顯示。將已經(jīng)設(shè)置好的圖片設(shè)置為a元素的背景圖像，這樣鏈接樣式就成了圓角的樣式。頂部導(dǎo)航欄設(shè)置完成的效果如圖15.10所示。圖15.10頂部導(dǎo)航欄效果5．設(shè)置主導(dǎo)航欄樣式圖15.10頂部導(dǎo)航欄效果設(shè)置主導(dǎo)航欄的HTML代碼如下。<ulclass="mainNavigation"> <!--主導(dǎo)航欄--><liclass="current"><ahref="#"><strong>網(wǎng)站首頁</strong></a></li><li><ahref="#"><strong>商品介紹</strong></a></li><li><ahref="#"><strong>信息</strong></a></li><li><ahref="#"><strong>暢銷排行榜</strong></a></li></ul>在CSS中使用同樣的方法，將主導(dǎo)航欄的列表設(shè)置為絕對定位，并定位到適當(dāng)?shù)奈恢?，代碼如下。.header.mainNavigation{position:absolute;color:white;font-weight:bold;top:88px;left:0;}將主導(dǎo)航欄的列表項(xiàng)目li元素設(shè)置為左浮動(dòng)，且使它們水平排列，并使項(xiàng)目之間有一定的間隔。代碼如下。.header.mainNavigationli{float:left;padding:5px;}對主導(dǎo)航欄中的a元素進(jìn)行設(shè)置，其設(shè)置方法和頂部導(dǎo)航欄的設(shè)置方法基本一樣，代碼如下。.header.mainNavigationa{display:block;line-height:25px;text-decoration:none;padding:00015px;color:white;}.header.mainNavigationastrong{display:block;padding:015px00;}與頂部導(dǎo)航欄不同的是，這里希望只有當(dāng)前頁的菜單項(xiàng)有圓角背景，其他菜單項(xiàng)沒有背景圖像。因此，可以針對類別名稱為current的項(xiàng)目進(jìn)行設(shè)置，也就是設(shè)置“網(wǎng)站首頁”的樣式。這里分別設(shè)置current類別的li中的a元素和strong元素的圓角背景圖像，代碼如下。.header.mainNavigation.currenta{color:white;background:transparenturl('images/main-navi.gif')no-repeat;}.header.mainNavigation.currentastrong{color:white;background:transparenturl('images/main-navi.gif')no-repeatright;}至此，主導(dǎo)航欄就設(shè)置完成了，效果如圖15.11所示。圖15.11主導(dǎo)航欄效果圖15.11主導(dǎo)航欄效果設(shè)置登錄賬號與購物車的HTML代碼如下。<ulclass="accountBox"> <!--登錄賬號與購物車--><li><ahref="#"class="login"><span>登錄賬號</span></a></li><li><ahref="#"class="cart"><span>購物車</span></a></li></ul>在CSS中，將登錄賬號與購物車所在的div的列表設(shè)置為絕對定位，并放到右側(cè)的適當(dāng)位置，代碼如下。.header.accountBox{position:absolute;top:44px;right:10px;}同樣地，將登錄賬號與購物車所在的div的列表項(xiàng)目li元素設(shè)置為左浮動(dòng)，且使它們水平排列，并使項(xiàng)目之間有一定的間隔，代碼如下。.header.accountBoxli{float:left;top:0;right:0;width:93px;height:110px;text-align:center;}設(shè)置鏈接a元素。設(shè)置鏈接的display屬性值為block，即將鏈接由行內(nèi)元素變?yōu)閴K級元素，以使鼠標(biāo)指針進(jìn)入圖像范圍即可觸發(fā)鏈接，代碼如下。.header.accountBoxa{display:block;height:110px;width:93px;}最后分別設(shè)置登錄賬號和購物車各自的背景圖像，代碼如下。.header.accountBox.login{background:transparenturl('images/account-left.jpg')no-repeat;}.header.accountBox.cart{background:transparenturl('images/account-right.jpg')no-repeat;}登錄賬號與購物車效果如圖15.12所示。至此，網(wǎng)頁頁頭部分設(shè)計(jì)完成，頁頭部分整體效果如圖15.13所示。 圖15.12登錄賬號與購物車效果 圖15.13頁頭部分整體效果【中間內(nèi)容部分】下面開始設(shè)計(jì)網(wǎng)頁的中間內(nèi)容部分。根據(jù)15.6，將中間內(nèi)容部分分為“主要內(nèi)容”和“側(cè)邊欄”兩部分，每部分用div元素進(jìn)行劃分，然后在每個(gè)div元素中分別設(shè)置里面的詳細(xì)內(nèi)容。1．主要內(nèi)容（1）HTML設(shè)置部分在“今日推薦”中，首先使用<h2></h2>標(biāo)簽設(shè)置標(biāo)題，然后設(shè)置一個(gè)圖片鏈接，最后使用p元素來顯示“今日推薦”的文本內(nèi)容。設(shè)置“今日推薦”的HTML代碼如下。<divclass="mainContent"><divclass="recommendationimg-left"><h2>今日推薦</h2><ahref="#"><imgid="binner1"src="images/ex4.jpg"width="210"height="150"/></a><p>環(huán)保印花件套，采用超柔和進(jìn)口面料，手感極其柔軟、舒適。采用高支高密精梳純棉織物作為面料，手感柔軟舒適，經(jīng)久耐用，多款圖案風(fēng)格能夠與不同家居設(shè)計(jì)完美搭配。</p><p></p></div></div>“最受歡迎”和“分類推薦”的設(shè)置方法與“今日推薦”的設(shè)置方法一樣，設(shè)置“最受歡迎”和“分類推薦”的HTML代碼如下所示。<divclass="recommendation"><h2>最受歡迎</h2><divclass="img-right"><ahref="#"><imgsrc="images/ex5.jpg"width="210"height="150"/></a></div><p>九孔棉冬被選用優(yōu)質(zhì)滌綸面料，手感柔軟、花型獨(dú)特，填充料采用高科技的聚酯螺旋纖維精制而成，該纖維細(xì)如發(fā)，彈性極強(qiáng)，且飽含空氣，恒溫性強(qiáng)，使您倍感輕軟舒適。經(jīng)特殊工藝加工后，長期保持松軟如新，為您提供健康舒適的睡眠體驗(yàn)。</p></div><divclass="recommendationmultiColumn"><h2>分類推薦</h2><ul><p>休閑款式，柔軟富有彈性。舒服自然，飄逸聰穎。</p></li><p>小兔子披肩，柔軟富有彈性。舒服自然，飄逸聰穎。</p></li><li><ahref="#"><imgsrc="images/ex3.jpg"width="120"height="120"/></a><p>精梳棉材質(zhì)，不起球、不變形、更透氣。</p></li></ul></div>至此，“主要內(nèi)容”的HTML設(shè)置就完成了。（2）CSS樣式設(shè)置部分接下來設(shè)置“主要內(nèi)容”部分的CSS樣式。首先設(shè)置“主要內(nèi)容”的寬度并設(shè)置圖像為左浮動(dòng)，代碼如下。.mainContent{float:left;width:540px;}然后為“主要內(nèi)容”中展示的圖像設(shè)置邊框樣式，這樣可以使圖像看起來更精致，代碼如下。.contentaimg{padding:5px;background:#BDD6E8;border:1px#DEAF50solid;}這時(shí)，“主要內(nèi)容”部分中的圖像增加了一個(gè)邊框，如圖15.14所示。圖15.14給圖像設(shè)置邊框接著，設(shè)置“今日推薦”的樣式?？梢钥闯觯敖袢胀扑]”中的圖像是在文本的左邊。這里要使圖像向左浮動(dòng)，并使圖像與文本間隔10px，代碼如下。.img-leftimg{float:left;margin-right:10px;}再設(shè)置“最受歡迎”的樣式。要使圖像向右浮動(dòng)，并使圖像與文本間隔10px，代碼如下。.img-right{float:right;margin-left:10px;}設(shè)置“分類推薦”的樣式是先將其分為3列的欄目，并設(shè)置每個(gè)列表項(xiàng)目的固定高度，然后設(shè)置使用浮動(dòng)方式排列，代碼如下。.multiColumnli{float:left;width:160px;margin:010px;text-align:center;}接下來，對“主要內(nèi)容”中的<h2></h2>中標(biāo)題樣式做一些CSS樣式設(shè)置，使其效果更精致。本例設(shè)置了標(biāo)題的字體、顏色、下畫線，以及在標(biāo)題的最右端插入一個(gè)裝飾花的圖片，代碼如下。.recommendationh2{padding-top:20px;color:#069;border-bottom:1px#DEAF50solid;font:bold22px/24px楷體_GB2312;background:transparenturl('images/rose.png')no-repeatbottomright;}至此，“主要內(nèi)容”設(shè)計(jì)完成，效果如圖15.15所示。2．側(cè)邊欄設(shè)計(jì)中間內(nèi)容部分的“側(cè)邊欄”，仍然使用div元素將“側(cè)邊欄”部分劃分為“搜索商品框”“商品分類”“特別提示”3部分。（1）HTML設(shè)置部分在“搜索商品框”部分，插入一個(gè)表單form元素，然后在form元素中添加一個(gè)文本框和一個(gè)顯示“查詢商品”的按鈕，用以搜索商品。“搜索商品框”部分的HTML代碼如下。<divclass="searchBox"><span><form><inputname=""type="text"/><inputname=""type="submit"value="查詢商品"/></form></span></div>在“商品分類”部分，插入一個(gè)表示標(biāo)題的h2元素和一個(gè)顯示“商品分類”內(nèi)容的ul元素。“商品分類”部分的HTML代碼如下。<divclass="menuBox"><span><h2>商品分類</h2><ul><li><ahref="#">新生兒必備</a></li><li><ahref="#">喂養(yǎng)用品</a></li><li><ahref="#">嬰兒車</a></li><li><ahref="#">玩具</a></li><li><ahref="#">育兒書籍</a></li><li><ahref="#">嬰幼兒食品</a></li></ul></span></div>在“特別提示”部分，插入一個(gè)表示標(biāo)題的h2元素和一個(gè)顯示“特別提示”內(nèi)容的p元素。“特別提示”部分的HTML代碼如下。<divclass="extraBox"><span><h2>特別提示</h2><p>新品每周三8.8折優(yōu)惠，兩件8.5折優(yōu)惠</p></span></div>（2）CSS樣式設(shè)置部分下面設(shè)置“側(cè)邊欄”的CSS樣式。首先設(shè)置“側(cè)邊欄”的整體樣式，代碼如下。.sideBar{float:right;width:186px;margin-right:10px;margin-top:20px;display:inline;/*IE6瀏覽器不兼容*/}.sideBardiv{margin-top:20px;background:transparenturl('images/sidebox-bottom.png')no-repeatbottom;width:100%;}.sideBardivspan{display:block;background:transparenturl('images/sidebox-top.png')no-repeat;padding:10px;}上面的代碼其實(shí)很簡單，就是為div元素和span元素分別設(shè)置一個(gè)背景元素。這里div元素使用的是高的背景圖像，span元素使用的是矮的背景圖像，因?yàn)閟pan元素在div元素中，所以span元素的背景圖像div元素的背景圖像上，它遮蓋住了頂部，從而實(shí)現(xiàn)圓角框的效果，如圖15.16所示。接下來，具體設(shè)置圓角框中的樣式。（1）對“側(cè)邊欄”中的<h2></h2>中標(biāo)題進(jìn)行統(tǒng)一設(shè)置，包括邊距、字體、顏色和居中顯示，CSS代碼如下。.sideBarh2{margin:0px;font:bold22px/24px楷體_GB2312;color:#069;text-align:center;}（2）設(shè)置“搜索商品框”的樣式，使文本輸入框和按鈕都居中對齊，并設(shè)置間距，代碼如下。.sideBar.searchBox{text-align:center;}.sideBarinput{margin:5px0;}（3）設(shè)置“商品分類”的列表樣式，包括列表的字體、高度、各行高和上邊框的樣式，然后設(shè)置列表中鏈接a元素的樣式，在每個(gè)鏈接前面插入一張蝴蝶形狀的裝飾圖，代碼如下。.sideBar.menuBoxlia{display:block;padding-left:35px;background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter;height:25px;}至此，“側(cè)邊欄”設(shè)計(jì)完成，效果如圖15.17所示。 圖15.16“側(cè)邊欄”設(shè)置圓角框后的效果 圖15.17“側(cè)邊欄”設(shè)計(jì)效果【頁腳部分】頁腳部分的設(shè)置非常簡單，就是在div元素中添加兩個(gè)p元素，用以顯示鏈接和版權(quán)信息。頁腳部分的HTML代碼如下。<divclass="footer"><pclass="p1"><ahref="#">網(wǎng)站首頁</a>|<ahref="#">商品介紹</a>|<ahref="#">信息</a>|<ahref="#">暢銷排行榜</a></p><pclass="p2">版權(quán)屬于前沿科技</p></div>頁腳部分的CSS樣式設(shè)計(jì)也非常簡單。在頁腳部分插入一張背景圖像，設(shè)置頁腳部分的文字顏色為白色，并設(shè)置行高和邊距，CSS代碼如下。.footer{clear:both;height:53px;margin:0;background:transparenturl('images/footer-background.png')repeat-x;text-indent:0px;text-align:center;}.footerp{margin:0px;}.footera{color:white;}.footer.p1{line-height:23px;}.footer.p2{line-height:30px;}上面代碼中的clear屬性用來保證頁腳內(nèi)容在頁面的最下端顯示。頁腳部分的設(shè)計(jì)效果如圖15.18所示。圖15.18頁腳部分的設(shè)計(jì)效果至此，整個(gè)網(wǎng)站首頁的視覺設(shè)計(jì)就完成了，效果如圖15.1所示。在網(wǎng)站首頁制作過程中，讀者可以發(fā)現(xiàn)反復(fù)運(yùn)用了一些元素，如列表、超鏈接等，只是它們在不同的地方產(chǎn)生了不同的效果。因此，建議讀者一定要熟練掌握一些基本的方法，這樣才能將其靈活運(yùn)用在各個(gè)需要的地方。5.交互效果設(shè)計(jì)本節(jié)進(jìn)行一些交互效果的設(shè)計(jì)，主要是為網(wǎng)頁元素增加鼠標(biāo)指針經(jīng)過時(shí)的效果。當(dāng)鼠標(biāo)指針經(jīng)過主導(dǎo)航欄、頂部導(dǎo)航欄、登錄賬號與購物車圖像時(shí)，會有不同的效果。這一設(shè)計(jì)效果是為了提示用戶所進(jìn)行的選擇，以提升用戶體驗(yàn)。【頂部導(dǎo)航欄】為頂部導(dǎo)航欄增加鼠標(biāo)指針經(jīng)過時(shí)的效果，首先準(zhǔn)備一個(gè)與原有背景圖像的形狀相同，但是顏色不同的新圖像top-navi-hover.gif，如圖15.19所示。為頂部導(dǎo)航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時(shí)更換“:hover”包含的span元素的背景圖像，并適當(dāng)修改文字的顏色，代碼如下。.header.topNavigationa:hover{color:white;background:transparenturl('images/top-navi-hover.gif')no-repeat;}.header.topNavigationa:hoverspan{background:transparenturl('images/top-navi-hover.gif')no-repeatright;}設(shè)置完成后，鼠標(biāo)指針經(jīng)過頂部導(dǎo)航欄時(shí)的效果如圖15.20所示。【主導(dǎo)航欄】主導(dǎo)航欄的設(shè)置方法與頂部導(dǎo)航欄的設(shè)置方法一樣，準(zhǔn)備背景圖像main-navi-hover.gif，如圖15.21所示。為主導(dǎo)航欄中的鏈接元素增加“:hover”偽類，在其中更換背景圖像，同時(shí)更換“:hover”包含的span元素的背景圖像，并適當(dāng)修改文字的顏色，代碼如下。.header.mainNavigationa:hover{color:white;background:transparenturl('images/main-navi-hover.gif')no-repeat;}.header.mainNavigationa:hoverstrong{background:transparenturl('images/main-navi-hover.gif')no-repeatright;color:#3D81B4;}設(shè)置完成后，鼠標(biāo)指針經(jīng)過主導(dǎo)航欄時(shí)的效果如圖15.22所示。 【登錄賬號和購物車】本小節(jié)實(shí)現(xiàn)“登錄賬號”和“購物車”圖像的鼠標(biāo)指針經(jīng)過時(shí)的效果。實(shí)際上，這里同樣是更換背景圖像，不過會介紹一種略有變化的方法。這種方法就是把鼠標(biāo)指針經(jīng)過前和鼠標(biāo)指針經(jīng)過時(shí)的兩張圖片用同一張圖片表示，只是在鼠標(biāo)指針經(jīng)過時(shí)，通過改變背景圖像的位置來實(shí)現(xiàn)交互效果。例如，將原來的圖片分別修改為圖15.23所示的樣子。每一張圖像的上半部分和下半部分完全一樣，區(qū)別就在于下半部分的顏色比上半部分淺一些。這樣，當(dāng)鼠標(biāo)指針沒有經(jīng)過時(shí)顯示的是上半部分，當(dāng)鼠標(biāo)指針經(jīng)過時(shí)更換為顯示下半部分。分別對兩個(gè)鏈接元素的“:hover”偽類進(jìn)行如下設(shè)置。.header.accountBox.login:hover{}.header.accountBox.cart:hover{}從上面代碼可以看到，圖像文件名和鼠標(biāo)指針未經(jīng)過時(shí)的文件名是一樣的，而區(qū)別是最后的bottom。bottom表示從底端開始顯示，而在默認(rèn)情況下是從上端開始顯示的，這樣就實(shí)現(xiàn)了所需要的效果，如圖15.23所示。購物車部分的設(shè)置與登錄賬號部分的設(shè)置類似，這里不再詳述?！緢D像邊框】接下來實(shí)現(xiàn)鼠標(biāo)指針經(jīng)過某個(gè)展示的圖片時(shí)，邊框發(fā)生變化的效果，如圖15.24所示。以看到，鼠標(biāo)指針經(jīng)過“最受歡迎”商品圖片時(shí)，圖像的邊框顏色發(fā)生了變化，由黃色變?yōu)樗{(lán)色，背景色由淺藍(lán)色變?yōu)樯钏{(lán)色。要實(shí)現(xiàn)這種效果，對推薦區(qū)域中鏈接的“:hover”偽類進(jìn)行如下設(shè)置即可。.contenta:hoverimg{padding:5px;background:#3D81B4;border:1px#3D81B4solid;}【商品分類】本小節(jié)實(shí)現(xiàn)“側(cè)邊欄”中“商品分類”列表的鼠標(biāo)指針經(jīng)過時(shí)的效果，如圖15.25所示。實(shí)現(xiàn)圖15.25所示效果的代碼如下。.sideBar.menuBoxlia{display:block;padding-left:35px;background:transparenturl('images/menu-bullet.png')no-repeat10pxcenter;height:25px;}.sideBar.menuBoxlia:hover{display:block;color:#069;background:whiteurl('images/menu-bullet.png')no-repeat10pxcenter;}6.Banner自動(dòng)輪播效果本節(jié)將通過JavaScript語言實(shí)現(xiàn)Banner的自動(dòng)輪播效果，以及使用鼠標(biāo)控制Banner停止輪播和繼續(xù)輪播的效果。當(dāng)打開網(wǎng)頁之后，“今日推薦”中的Banner會自動(dòng)輪播5張圖片。例如，輪播到第2張圖片時(shí)的效果如圖15.26所示。當(dāng)鼠標(biāo)指針移動(dòng)

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論