9項(xiàng)目九 應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站_第1頁(yè)
9項(xiàng)目九 應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站_第2頁(yè)
9項(xiàng)目九 應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站_第3頁(yè)
9項(xiàng)目九 應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站_第4頁(yè)
9項(xiàng)目九 應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站_第5頁(yè)
已閱讀5頁(yè)，還剩31頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與布局應(yīng)用DIV+CSS設(shè)計(jì)商業(yè)網(wǎng)站01

網(wǎng)上書(shū)城網(wǎng)站制作02

學(xué)習(xí)強(qiáng)國(guó)網(wǎng)站制作01.網(wǎng)上書(shū)城網(wǎng)站制作站點(diǎn)建立與結(jié)構(gòu)分析框架搭建和頁(yè)面布局網(wǎng)站頭部及導(dǎo)航制作網(wǎng)站主體制作網(wǎng)站底部制作相對(duì)路徑和相對(duì)與根目錄路徑9.1.1站點(diǎn)建立與結(jié)構(gòu)分析

要做一個(gè)網(wǎng)站，首先需要建立一個(gè)站點(diǎn)。那么什么是站點(diǎn)？為什么要建立一個(gè)站點(diǎn)呢？因?yàn)榫W(wǎng)站不同于其他文件，比如一個(gè)圖片，放到哪個(gè)盤(pán)哪個(gè)目錄下都可以訪問(wèn)，而網(wǎng)站是許多文件相互關(guān)聯(lián)的，所以需要專(zhuān)門(mén)建一個(gè)目錄把它們分門(mén)別類(lèi)存儲(chǔ)起來(lái)。下面我們選擇HBuilerX作為網(wǎng)站開(kāi)發(fā)工具為例，為網(wǎng)上書(shū)店創(chuàng)建一個(gè)站點(diǎn)，具體的操作步驟如下：【1】選擇菜單“文件--》新建--》項(xiàng)目”。站點(diǎn)建立與結(jié)構(gòu)分析【2】在彈出對(duì)話框中分別進(jìn)行項(xiàng)目類(lèi)型，項(xiàng)目名稱(chēng)，項(xiàng)目位置，項(xiàng)目模板的設(shè)置。9.1.1站點(diǎn)建立與結(jié)構(gòu)分析【3】點(diǎn)擊第二步中的創(chuàng)建按鈕，完成項(xiàng)目的創(chuàng)建，項(xiàng)目目錄如下：其中CSS文件夾存放樣式表文件，img文件夾存放圖片素材文件，js文件夾存放JavaScript文件，index.html文件為網(wǎng)站的首頁(yè)文件。9.1.1站點(diǎn)建立與結(jié)構(gòu)分析創(chuàng)建完成站點(diǎn)后，就需要對(duì)頁(yè)面結(jié)構(gòu)進(jìn)行分析了。根據(jù)效果圖，分析頁(yè)面分為幾個(gè)板塊，該怎么布局更加合理，下圖則是一個(gè)網(wǎng)上書(shū)店的首頁(yè)效果圖，我們可以通過(guò)此網(wǎng)上書(shū)店的效果圖來(lái)進(jìn)行分析。9.1.1站點(diǎn)建立與結(jié)構(gòu)分析從上圖進(jìn)行分析，可以看出整個(gè)頁(yè)面分為頭部區(qū)域、導(dǎo)航區(qū)域、Banner區(qū)域、新書(shū)上架區(qū)域，計(jì)算機(jī)與互聯(lián)網(wǎng)區(qū)域和底部區(qū)域，其中Banner區(qū)域又分為左中右區(qū)域，整個(gè)頁(yè)面居中顯示。如果按照上述的描述作為網(wǎng)頁(yè)的基本布局，整體效果如下：9.1.1框架搭建與頁(yè)面布局【1】將圖書(shū)配套資源文件夾中的圖片素材復(fù)制粘貼到相對(duì)應(yīng)的img文件夾中，將所有的圖書(shū)照片放置到新建的uploadfile文件夾中?！?】打開(kāi)項(xiàng)目根目錄中的index.html文件，代碼如下：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>網(wǎng)上書(shū)店首頁(yè)</title> </head> <body> </body></html>9.1.2框架搭建與頁(yè)面布局【3】按照分析的布局結(jié)構(gòu)，進(jìn)行盒子容器的設(shè)計(jì)。9.1.2<divid="topMember">

登錄注冊(cè)提示</div><divid="search">

頭部搜索框</div><divid="daohang">

導(dǎo)航部分</div><divid="bodyBanner"> <divid="slaeTop">banner左邊</div> <divid="adPPT">banner中間</div> <divid="discountTop">banner右邊</div></div><divid="newBook">

新書(shū)上架</div><divid="typeBook">

計(jì)算機(jī)與互聯(lián)網(wǎng)分類(lèi)書(shū)籍</div><divid="foot">

底部?jī)?nèi)容</div>框架搭建與頁(yè)面布局【4】HTML框架代碼寫(xiě)完后，就該設(shè)置CSS樣式表了，其中整個(gè)網(wǎng)頁(yè)的寬度為1200PX,并且是居中顯示的，BANNER部分分成左中右結(jié)構(gòu)，CSS樣式如下。定義全局樣式：#topMember{height:30px;background-color:#f9f9f9;border-bottom:solid1px#f2f2f2}定義頭部登錄注冊(cè)提示區(qū)域樣式：*{margin:0px;padding:0px;height:auto;list-style-type:none;font-size:12px;}定義頭部搜索框樣式：#search{width:1200px;margin:0pxauto;height:120px;}9.1.2框架搭建與頁(yè)面布局定義導(dǎo)航區(qū)域樣式：#daohang{width:1200px;margin:0pxauto;height:42px;}定義BANNER部分樣式：#bodyBanner{width:1200px;margin:6pxauto;clear:both;height:auto;overflow:hidden;}#slaeTop,#discountTop{width:230px;float:left;margin-right:5px;padding:5px;border:solid1px#eaeaea;}#adPPT{width:706px;height:304px;float:left;}定義新書(shū)上架和計(jì)算機(jī)和互聯(lián)網(wǎng)分類(lèi)書(shū)籍模塊樣式：#newBook,#typeBook{width:1200px;margin:10pxauto;clear:both;height:auto;overflow:hidden;}定義底部區(qū)域樣式#foot{margin-top:30px;}9.1.2框架搭建與頁(yè)面布局有了上面的基礎(chǔ)，下面的任務(wù)就是通過(guò)HTML和CSS制作一個(gè)完整的網(wǎng)頁(yè)。在本小節(jié)我們已經(jīng)把整體框架搭建好了，就像蓋房子一樣，整體結(jié)構(gòu)已經(jīng)出來(lái)了，下面就需要分割空間了。9.1.2網(wǎng)站頭部及導(dǎo)航制作先分析一下頭部:頭部分為兩部分，一個(gè)是登錄注冊(cè)提示部分，一個(gè)是條件搜索部分，一個(gè)是導(dǎo)航部分。其中登錄注冊(cè)提示部分為一個(gè)寬度全屏灰色區(qū)域，區(qū)域內(nèi)包含歡迎，登錄，注冊(cè)等歡迎信息，HTML結(jié)構(gòu)及CSS樣式如下：<divid="topMember"> <divid="topMemberInner"> <spanid="spanLogin"runat="server"runat="server">歡迎光臨書(shū)城,請(qǐng)<ahref="Login.html">登錄</a>成為會(huì)員</span> <span><ahref="Member/OrderList.html">我的書(shū)城</a></span> </div></div>#topMember{height:30px;background-color:#f9f9f9;border-bottom:solid1px#f2f2f2}#topMemberInner{height:30px;line-height:30px;width:1200px;margin:0pxauto;text-align:right;color:#646464;}#topMemberInnera{text-decoration:none;color:Red;}9.1.3網(wǎng)站頭部及導(dǎo)航制作其中條件搜索區(qū)域分為三個(gè)部分，為左中右結(jié)構(gòu)，分別用于顯示網(wǎng)站LOGO,網(wǎng)站條件搜索表單，網(wǎng)站購(gòu)物車(chē)和訂單的按鈕。

其中導(dǎo)航部分為橫向的超級(jí)鏈接，第一個(gè)超級(jí)鏈接為分類(lèi)鏈接，樣式和其他超級(jí)鏈接有所區(qū)別詳細(xì)代碼請(qǐng)參加代碼源文件9.1.3網(wǎng)站主體制作網(wǎng)站主體部分主要用列表形式進(jìn)行圖書(shū)信息的展示，主要分為三塊內(nèi)容，一塊是網(wǎng)站廣告，銷(xiāo)售排行及優(yōu)惠信息；一塊是新書(shū)上架；一塊是圖書(shū)分類(lèi)展示。其中第一塊內(nèi)容，主要分成左中右結(jié)構(gòu)，分別表示圖書(shū)銷(xiāo)售排行，圖書(shū)圖片廣告，及圖書(shū)的打折優(yōu)惠信息，其HTML基本結(jié)構(gòu)為一個(gè)DIV包含三個(gè)DIV，被包含的三個(gè)DIV進(jìn)行浮動(dòng)，HTML基本結(jié)構(gòu)代碼如下：<divid="bodyBanner"> <divid="slaeTop">銷(xiāo)售排行</div> <divid="adPPT">banner廣告</div> <divid="discountTop">打折優(yōu)惠</div></div>9.1.4網(wǎng)站主體制作其中銷(xiāo)售排行以圖片加文字混合的形式展示了銷(xiāo)售排行的前兩名。其中圖片廣告區(qū)域以圖片幻燈片播放的形式，進(jìn)行廣告的展示，如果沒(méi)有Js,Jquery基礎(chǔ)，此處可以用一個(gè)靜態(tài)的圖片進(jìn)行替換。打折優(yōu)惠信息模塊和銷(xiāo)售排行模塊非常相似，也是以圖片加文字混合的方式展示打折銷(xiāo)售的前兩本圖書(shū)信息。

新書(shū)上架部門(mén)由標(biāo)題和圖文列表組成。圖書(shū)分類(lèi)展示模塊與新書(shū)上架模塊類(lèi)似，由圖書(shū)類(lèi)型標(biāo)題和圖書(shū)信息列表組成詳細(xì)代碼請(qǐng)參加代碼源文件9.1.4網(wǎng)站底部制作此模塊分為兩個(gè)部分，即網(wǎng)站的底部和網(wǎng)站快捷操作部分，兩個(gè)模塊的HTML基本結(jié)構(gòu)代碼如下：<divid="bodyBanner"> <divid="slaeTop">銷(xiāo)售排行</div> <divid="adPPT">banner廣告</div> <divid="discountTop">打折優(yōu)惠</div></div>CSS代碼如下：#foot{margin-top:30px;}#footHr{height:2px;background-color:#ff2832;}#footImg{height:80px;background-color:#fafafa;border-bottom:solid1px#ebebeb;}#footLink{width:1200px;margin:0pxauto;margin-top:10px;}9.1.5網(wǎng)站底部制作其中網(wǎng)站底部由四塊區(qū)域組成，使用浮動(dòng)定位進(jìn)行橫向排列。其中網(wǎng)站快捷操作部分由一系列的超級(jí)鏈接經(jīng)過(guò)整齊的排列而成。詳細(xì)代碼請(qǐng)參加代碼源文件9.1.5相對(duì)路徑和相對(duì)于根目錄路徑在相對(duì)路徑和絕對(duì)路徑中，../表示返回上一級(jí)，因?yàn)閏ss文件在css文件夾里，圖片在img文件夾下，那么樣式表文件就需要返回上一級(jí)找到img文件夾才能找到相應(yīng)的圖片。直接文件夾名或是./開(kāi)頭表示和當(dāng)前平級(jí)。不管是帶../還是不帶，這種寫(xiě)法都叫相對(duì)路徑；另一種叫相對(duì)于根目錄路徑，它的寫(xiě)法必須以/開(kāi)始，意思是從根目錄開(kāi)始一級(jí)一級(jí)向下查找，不管在哪里，要使用x.png這個(gè)圖片，路徑都必須是/img/x.png；還有一種寫(xiě)法叫做絕對(duì)路徑，是以http://域名開(kāi)始的。兩種方法各有優(yōu)劣，可以根據(jù)需要采用一種合適的方法。9.1.602.學(xué)習(xí)強(qiáng)國(guó)網(wǎng)站制作站點(diǎn)建立與結(jié)構(gòu)分析框架搭建與頁(yè)面布局網(wǎng)站Banner與導(dǎo)航菜單網(wǎng)站專(zhuān)業(yè)查詢及圖片展示網(wǎng)站編輯推薦網(wǎng)站友情鏈接和底部站點(diǎn)建立與結(jié)構(gòu)分析建立站點(diǎn)的步驟和9.1項(xiàng)目中建立站點(diǎn)的步驟相同。下面我們選擇HBuilerX作為網(wǎng)站開(kāi)發(fā)工具為例，為學(xué)習(xí)強(qiáng)國(guó)網(wǎng)站創(chuàng)建一個(gè)站點(diǎn)，具體的操作步驟如下：【1】選擇菜單“文件--》新建--》項(xiàng)目”。9.2.1站點(diǎn)建立與結(jié)構(gòu)分析9.2.1【2】在彈出對(duì)話框中分別進(jìn)行項(xiàng)目類(lèi)型，項(xiàng)目名稱(chēng)，項(xiàng)目位置，項(xiàng)目模板的設(shè)置。站點(diǎn)建立與結(jié)構(gòu)分析9.2.1【3】點(diǎn)擊第二步中的創(chuàng)建按鈕，完成項(xiàng)目的創(chuàng)建，項(xiàng)目目錄如下：其中CSS文件夾存放樣式表文件，img文件夾存放圖片素材文件，js文件夾存放JavaScript文件，index.html文件為網(wǎng)站的首頁(yè)文件。站點(diǎn)建立與結(jié)構(gòu)分析9.2.1創(chuàng)建完成站點(diǎn)后，就需要對(duì)頁(yè)面結(jié)構(gòu)進(jìn)行分析了。根據(jù)效果圖，分析頁(yè)面分為幾個(gè)板塊，該怎么布局更加合理，下圖則是一個(gè)網(wǎng)上書(shū)店的首頁(yè)效果圖，我們可以通過(guò)此網(wǎng)上書(shū)店的效果圖來(lái)進(jìn)行分析。站點(diǎn)建立與結(jié)構(gòu)分析9.2.1從上圖進(jìn)行分析，可以看出整個(gè)頁(yè)面分為網(wǎng)站Banner、導(dǎo)航菜單、學(xué)科專(zhuān)業(yè)查詢、編輯推薦、友情鏈接和網(wǎng)頁(yè)底部，整個(gè)頁(yè)面banner部分和導(dǎo)航菜單部分為全屏效果，其余部分為固定寬度居中效果。如果按照上述的描述作為網(wǎng)頁(yè)的基本布局，整體效果如下：框架搭建與頁(yè)面布局【1】將圖書(shū)配套資源文件夾中的圖片素材復(fù)制粘貼到相對(duì)應(yīng)的img文件夾中。【2】打開(kāi)項(xiàng)目根目錄中的index.html文件，代碼如下：9.2.2<divid="bodyBanner"> <divid="slaeTop">銷(xiāo)售排行</div> <divid="adPPT">banner廣告</div> <divid="discountTop">打折優(yōu)惠</div></div>框架搭建與頁(yè)面布局【3】按照分析的布局結(jié)構(gòu)，進(jìn)行盒子容器的設(shè)計(jì)。9.2.2<divid="banner">banner部分</div><divid="menu">導(dǎo)航菜單</div><divid="container"> <divid="prosel"> <divid="prolist">學(xué)科門(mén)類(lèi)及專(zhuān)業(yè)查詢</div> <divid="proimg">圖片宣傳</div> </div> <divid="recommend">編輯推薦</div> <divid="friendlink">友情鏈接</div> <divid="foot"></div></div>框架搭建與頁(yè)面布局【4】HTML框架代碼寫(xiě)完后，就該設(shè)置CSS樣式表了，其中banner部分和導(dǎo)航菜單為全屏,其余部分使用container容器包裝，寬度為1000PX居中，并且學(xué)科專(zhuān)業(yè)查詢和圖片宣傳為左右結(jié)構(gòu)，CSS樣式如下。定義全局樣式：9.2.2*{margin:0px;padding:0px;height:auto;list-style-type:none;font-size:14px;}Container容器：#container{width:1000px;margin:10pxauto;overflow:hidden;}學(xué)科專(zhuān)業(yè)查詢和圖片宣傳：#prolist{width:320px;float:left;}#proimg{width:660px;float:left;}網(wǎng)站Banner與導(dǎo)航菜單網(wǎng)站最上面部分為網(wǎng)站banner部分及導(dǎo)航菜單部分，這兩部分的背景顏色都是全屏效果，但具體的網(wǎng)頁(yè)內(nèi)容為固定寬度居中效果，所以應(yīng)該為全屏DIV中嵌套固定寬度DIV來(lái)實(shí)現(xiàn)上述效果。其中網(wǎng)站banner部分的HTML結(jié)構(gòu)如下：9.2.3<divid="banner"> <divid="content"> </div></div>CSS樣式如下：#banner{height:250px;background-color:#d40202;}#banner#content{height:250px;width:1000px;margin:0pxauto;background-image:url(../img/banner.png);}網(wǎng)站Banner與導(dǎo)航菜單其中網(wǎng)站導(dǎo)航菜單部分的HTML結(jié)構(gòu)如下：9.2.3<divid="menu"> <divid="content"> <ul> <li><ahref="#">學(xué)習(xí)新思想</a></li> <li><ahref="#">十九大時(shí)間</a></li> …… <li><ahref="#"><imgsrc="img/search.png"/></

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論