網(wǎng)頁設(shè)計(jì)4實(shí)驗(yàn)報(bào)告_第1頁
網(wǎng)頁設(shè)計(jì)4實(shí)驗(yàn)報(bào)告_第2頁
網(wǎng)頁設(shè)計(jì)4實(shí)驗(yàn)報(bào)告_第3頁
網(wǎng)頁設(shè)計(jì)4實(shí)驗(yàn)報(bào)告_第4頁
網(wǎng)頁設(shè)計(jì)4實(shí)驗(yàn)報(bào)告_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

實(shí)驗(yàn)四實(shí)驗(yàn)內(nèi)容還原示范頁面實(shí)驗(yàn)?zāi)康倪M(jìn)一步熟悉網(wǎng)頁布局的原理進(jìn)一步熟悉基于div+css的布局方法具體要求，將cosmofarmer（）首頁還原。頁面要求頁面寬度760像素頁面居左頁面的左邊距和上邊距為0兩欄式布局左邊欄的寬度583右欄寬度760-583=177頂部logo導(dǎo)航欄高度126像素步驟1劃分邏輯區(qū)域<divid="wrapper"><divid="banner"></div><divid="main"></div><divid="announce"></div><divid="copyright"></div></div>步驟二 完成頁面基本設(shè)置body{ font-family:"CenturyGothic","GillSans",Arial,sans-serif; margin:0;}#wrapper{ width:759px; border-right-width:1px; border-right-style:solid; border-right-color:#999999;}步驟三 細(xì)化各個(gè)區(qū)域，以banner為例，html代碼示例如下<divid="banner"><divid="background"><imgsrc="images/logo.gif"alt="CosmoFarmer2.0"width="553"height="70"/><ul><li><ahref="/features/index.html">Features</a></li><li><ahref="/experts/index.html">Experts</a></li><li><ahref="/quiz/index.html">Quiz</a></li><li><ahref="/projects/index.html">Projects</a></li><li><ahref="/horoscopes/index.html">Horoscopes</a></li></ul><divclass="clear"></div></div><!--endbackground--></div><!--endbanner-->實(shí)驗(yàn)報(bào)告提交要求，重要！提供的頁面瀏覽效果截圖提供所完成頁面的html源代碼，包括css代碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標(biāo)題文檔</title><styletype="text/css"><!--body{ font-family:"CenturyGothic","GillSans",Arial,sans-serif; margin:0;}#Contain{ width:759px; border-right-width:1px; border-right-style:solid; border-right-color:#999999;}#folwer{ background-image:url(file:///D|/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/index/shuiguo/banner_flower.jpg); background-repeat:no-repeat; background-position:righttop;}p,h1,h2,h3,h4,h5,h5,ol,ul{ margin:0px; padding:0px;}#navli{ display:inline; list-style-type:none; padding:0px; margin:0;}#top{ background-image:url(file:///D|/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/index/shuiguo/banner_bg.jpg); background-repeat:repeat-x; background-position:lefttop; width:759px; border-bottom:1pxsolid#999999;}#nava{ display:block; float:left; font-size:11px; color:#D6ECAE; text-decoration:none; background-color:#294E56; padding:2px2px2px3px; width:8em; margin-left:2px; border-right:1pxsolid#73AFB7; border-bottom:1pxsolid#73AFB7; margin-bottom:2px; font-weight:bold;}#subNav{ width:175px; float:left;}#nava:hover{ background:#73AFB7; border-right:1pxsolid#14556B; border-bottom:1pxsolid#14556B; color:#FBEF99;}#nav{ margin-top:10px;}br.clear{ height:1px; clear:both;}#main{ border-right:1pxsolid#999999; border-left:1pxsolid#999999; padding:3px; float:left; margin-right:2px;}#home#main{ margin-left:0; width:577px;}#aside{ float:left; width:168px; border-top:10pxsolid#294E56; margin-top:2px; margin-right:2px; margin-left:2px; background:url(images/bg/announce_bg.jpg)repeat-xlefttop;}#copyright{ clear:both; margin-left:175px; border:1pxsolid#999999; border-right:none; font-size:12px;}#mainh1#lead{ color:#FBEF99; padding-top:130px; padding-left:25px; padding-bottom:25px; background-image:url(file:///D|/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81/index/shuiguo/tomato.jpg); background-repeat:no-repeat; background-position:righttop;}.section{ display:block; font-weight:normal; color:#D6ECAE;}#home#footer{ margin-left:0; padding:3px03px30px;}#mainh1{ color:#5F9794; font:bold24px"CenturyGothic","GillSans",Arial,sans-serif;}.photo{ margin-left:27px; padding-top:0px; border-top:10pxsolid#FDD041; clear:right; float:right; width:550px; margin-top:10px;}.photoh2{ font-size:18px; color:#294E56;}.photoimg{ float:right; clear:right; margin-left:10px; border-right:10pxsolid#FDD041; border-bottom:10pxsolid#FDD041; border-left:10pxsolid#FDD041;}.photo2img{ border-color:#73AFB7;}.photo3img{ border-color:#FBEF99;}.photo4img{ border-color:#CBD893;}.photo2{ border-color:#73AFB7;}.photo3{ border-color:#FBEF99; margin-bottom:10px;}.feature4{ border-color:#CBD893;}.featurep.fLinka{ font-weight:bold; text-decoration:none; color:#102536; font-size:11px; text-transform:uppercase; background:#D6ECAEurl(images/arrow.gif)no-repeatrightcenter; padding:1px15px2px5px;}.featurep.fLink{ margin-top:4px;}.featurep.fLinka:hover{ color:#FDD041; background-color:#294E56;}#asideh2{ font-size:14px;}#asidea{ font-size:12px; display:block; text-decoration:none; color:#102536; padding:3px5px; border-bottom:1pxsolid#14556B;}#aside.title{ font-weight:bold; display:block;}#asidea:hover{ background:#5F9794; color:#FBEF99;}--></style></head><bodyid="home"><divid="Contain"><divid="top"><divid="folwer"><imgsrc="file:///D|/網(wǎng)頁代碼/index/shuiguo/logo.gif"width="553"height="70"/><divid="nav"><ul><li><ahref="/features/index.html">Features</a></li><li><ahref="/experts/index.html">Experts</a></li><li><ahref="/quiz/index.html">Quiz</a></li><li><ahref="/projects/index.html">Projects</a></li><li><ahref="/horoscopes/index.html">Horoscopes</a></li></ul><brclass="clear"/></div><!--endnav--></div><!--endflower--></div><!--endtop--><divid="main"><h1id="lead"><spanclass="section">Feature:</span>BathtubHydroponics</h1><divclass="photo"><imgsrc="file:///D|/網(wǎng)頁代碼/index/shuiguo/cactus.jpg"width="80"height="80"/><h2>8SaucySucculentstoSpiceUpYourBedroom</h2><p>Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismod.</p><pclass="fLink"><ahref="#">Readthestory</a></p></div><divclass="photophoto2"><imgsrc="file:///D|/網(wǎng)頁代碼/index/shuiguo/mower.jpg"width="80"height="80"/><h2>Review:IndoorMowersCompared</h2><p>Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntut.</p><pclass="fLink"><ahref="#">Readthestory</a></p></div><divclass="photophoto3"><imgsrc="file:///D|/網(wǎng)頁代碼/index/shuiguo/bed.gif"width="80"height="84"/><h2>HighRiseProject:RaisedBedGardening</h2><p>Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.</p><pclass="fLink"><ahref="#">Readthestory</a></p></div></div><!--endmain--><divid="aside"><ahref="#"><spanclass="title">Virgo:It'sYourMonth</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">YourFeedback</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">ThisMonth'sSurvey</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Indoorlawns:sodorseed?</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">LoremIpsum</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Dolorsiteamet</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Adipiscingelit</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Euismodtincidunt</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Dolorsiteamet</span>Loremipsumdolorsiteamet.</a><ahref="#"><spanclass="title">Dolorsiteamet</span>Loremipsumdolorsiteamet.</a></div><divid="footer">Copyright2005,CosmoF</div><!--endaside--></div><!--endContain--></body></html>提供300字左右實(shí)驗(yàn)總結(jié)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)需要耐心，如果沒有耐心，就學(xué)不好網(wǎng)頁設(shè)計(jì)，應(yīng)為當(dāng)你碰到一個(gè)問題時(shí)，如果不能立刻得到問題的答案，你可能需要很長時(shí)間去解決，我就碰到過一個(gè)問題，用了很長時(shí)間才解決。制作過程中，才發(fā)現(xiàn)，原來自己懂的太少了，好多不知道的地方，才趕緊查書，開始的時(shí)候只是會(huì)

溫馨提示

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

評(píng)論

0/150

提交評(píng)論