網頁設計4實驗報告_第1頁
網頁設計4實驗報告_第2頁
網頁設計4實驗報告_第3頁
網頁設計4實驗報告_第4頁
網頁設計4實驗報告_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

實驗四實驗內容還原示范頁面實驗目的進一步熟悉網頁布局的原理進一步熟悉基于div+css的布局方法具體要求，將cosmofarmer（）首頁還原。頁面要求頁面寬度760像素頁面居左頁面的左邊距和上邊距為0兩欄式布局左邊欄的寬度583右欄寬度760-583=177頂部logo導航欄高度126像素步驟1劃分邏輯區(qū)域<divid="wrapper"><divid="banner"></div><divid="main"></div><divid="announce"></div><divid="copyright"></div></div>步驟二 完成頁面基本設置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;}步驟三 細化各個區(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-->實驗報告提交要求，重要！提供的頁面瀏覽效果截圖提供所完成頁面的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>無標題文檔</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|/網頁代碼/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|/網頁代碼/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|/網頁代碼/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|/網頁代碼/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字左右實驗總結學習網頁設計需要耐心，如果沒有耐心，就學不好網頁設計，應為當你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了很長時間才解決。制作過程中，才發(fā)現，原來自己懂的太少了，好多不知道的地方，才趕緊查書，開始的時候只是會

溫馨提示

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

評論

0/150

提交評論