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

下載本文檔

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

文檔簡介

Web程序設(shè)計(jì)基礎(chǔ)學(xué)號:201108936姓名:王向東專業(yè):自動控制1103班

一:設(shè)計(jì)思路21世紀(jì)是一個(gè)信息時(shí)代，Internet已經(jīng)進(jìn)入人們生活與工作的各方面，而網(wǎng)頁作為Internet信息傳遞的重要載體，其重要也日趨突出。所以實(shí)訓(xùn)的目的就是要我們更好的掌握好這一學(xué)期的網(wǎng)頁知識和提高自己的動手能力，并且上傳到網(wǎng)上去，讓更多人認(rèn)識我，更好的宣傳自己。通過一個(gè)學(xué)期的web網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)，我終于明白我們?yōu)g覽的每個(gè)漂亮的網(wǎng)頁是怎么做出來的，我也想自己親手來做自己的個(gè)人網(wǎng)站。在做個(gè)人網(wǎng)站之前，我做以下準(zhǔn)備：理清自己的思緒，想清楚自己的網(wǎng)站設(shè)計(jì)，做模板，找素材，進(jìn)行站點(diǎn)的規(guī)劃和素材、資料的收集，要按照制作網(wǎng)站的步驟一步一步來完成。網(wǎng)站的布局其實(shí)很簡單，主要是做好一個(gè)模版，模版做好框架了，那網(wǎng)站就初步形成了，雖然主要框架做好了，但是你也要想清楚怎樣把整個(gè)界面搭配得更具有個(gè)性化。首先，在框架的最top要插入一個(gè)能體現(xiàn)你個(gè)人網(wǎng)站的主圖。然后在主圖的下面插入按鈕導(dǎo)航條，之后下面就插入自己想要的風(fēng)格，雖然用模版做出來的風(fēng)格都非常相似，但是各個(gè)頁面都具有各自的特色，讓我們感受到自己的空間的個(gè)性。我設(shè)計(jì)的是仿照阿里云郵箱登陸窗口界面而設(shè)計(jì)的，雖然是一個(gè)簡單的登陸窗口，但是讓我學(xué)到了不少的東西，阿里云郵是一個(gè)支持多運(yùn)營商的郵件平臺，源于分布式系統(tǒng)，高效大規(guī)模數(shù)據(jù)處理與存儲，利用云計(jì)算平臺優(yōu)勢實(shí)現(xiàn)大規(guī)模、低成本、高效率應(yīng)用平臺?；诎⒗镌破脚_，可以提供不局限于郵件的信息傳遞、存儲的解決方案。分布式集群替代昂貴設(shè)備、不同交換機(jī)下的5份存儲，數(shù)據(jù)安全可靠；分布式并行處理，收發(fā)快速實(shí)時(shí)。分布式OS與HA設(shè)計(jì)，系統(tǒng)穩(wěn)定可靠。二:網(wǎng)頁界面將自己所做的網(wǎng)頁截圖如下圖所示。圖一圖二圖三圖四三:網(wǎng)頁源代碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標(biāo)題文檔</title><styletype="text/css"><!--#container{ position:relative; height:500px; width:85%; margin:auto;}#top{ height:120px; width:100%;}#center{ margin:auto; height:90px; width:100%; left:53px; top:1px;}#container#top#centerh2strong{ color:#666;}#container#top#centerh2span{ font-size:14px;}#container#top#centerh2span{ font-weight:bold;}#container#top#centerh2span{ font-weight:normal;}.left{ height:360px; width:530px; left:70px; top:142px; float:left;}.right{ position:absolute; left:613px; height:300px; width:350px; top:155px; border:1pxsolid#999;}#container#leftp{ font-weight:bold;}#container#leftp{ font-weight:normal;}#banner{ background-color:#CCC; position:absolute; height:100px; width:100%;}.banner{ background-color:#999;}#c{ position:absolute; height:30px; width:400px; right:10%; top:57px;}a:link{ color:#333; text-decoration:none;} a:hover{ color:#333; text-decoration:underline;}--></style><scripttype="text/javascript"><!--functionMM_swapImgRestore(){//v3.0vari,x,a=document.MM_sr;for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;}functionMM_preloadImages(){//v3.0vard=document;if(d.images){if(!d.MM_p)d.MM_p=newArray();vari,j=d.MM_p.length,a=MM_preloadImages.arguments;for(i=0;i<a.length;i++)if(a[i].indexOf("#")!=0){d.MM_p[j]=newImage;d.MM_p[j++].src=a[i];}}}functionMM_findObj(n,d){//v4.01varp,i,x;if(!d)d=document;if((p=n.indexOf("?"))>0&&parent.frames.length){d=parent.frames[n.substring(p+1)].document;n=n.substring(0,p);}if(!(x=d[n])&&d.all)x=d.all[n];for(i=0;!x&&i<d.forms.length;i++)x=d.forms[i][n];for(i=0;!x&&d.layers&&i<d.layers.length;i++)x=MM_findObj(n,d.layers[i].document);if(!x&&d.getElementById)x=d.getElementById(n);returnx;}functionMM_swapImage(){//v3.0vari,j=0,x,a=MM_swapImage.arguments;document.MM_sr=newArray;for(i=0;i<(a.length-2);i+=3)if((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;if(!x.oSrc)x.oSrc=x.src;x.src=a[i+2];}}//--></script></head><bodyonload="MM_preloadImages('image/360截圖20130624091314659.jpg')"><divid="container"><divid="top"><divid="center"><h2align="left"><ahref="#"><imgsrc="image/360截圖20130624091204195.jpg"width="184"height="73"align="left"/></a><strong>   </strong></h2><h2align="left"><strong> 賬號登錄</strong></h2><divid="c"><divalign="right"><ahref="#">阿里云首頁</a> | <ahref="#">萬網(wǎng)首頁</a> | <ahref="#">服務(wù)中心</a> | <ahref="#">提建議</a></div></div><hr/></div></div><divclass="left"><ahref="#"onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image2','','image/360截圖20130624091314659.jpg',1)"><ahref="#"onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image2','','image/360截圖20130624091314659.jpg',1)"><imgsrc="image/dh.gif"name="Image2"width="530"height="360"border="0"id="Image2"/></a></a></div><divclass="right"><p>      登錄名：</p><formid="form1"name="form1"method="post"action=""><label>      <inputtype="text"name="textfield"id="textfield"/></label>@</form><p>      登錄密碼：     <ahref="#">忘記登錄名密碼</a></p><formid="form2"name="form2"method="post"action=""><label>      <inputtype="text"name="textfield2"id="textfield2"/></label></form><formid="form3"name="form3"method="post"action=""><label>      <inputtype="radio"name="radio"id="radio"value="radio"/></label>十天內(nèi)免登錄</form><p> </

溫馨提示

  • 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

提交評論