ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)

上傳人：1*** IP屬地：河北上傳時間：2023-07-06 格式：DOC 頁數(shù)：26 大?。?002KB 積分：15 舉報 版權申訴

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)_第2頁

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)_第3頁

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)_第4頁

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)_第5頁

已閱讀5頁，還剩21頁未讀，繼續(xù)免費閱讀

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

文檔簡介

1鄭州輕工業(yè)學院課程設計任務書題目個人網(wǎng)站的設計與實現(xiàn)主要內容：利用所學內容，設計個人網(wǎng)站基本要求：本系統(tǒng)制作一個個人網(wǎng)站，要求個人網(wǎng)站主題設計思想明確、思路清晰、顏色選擇恰當、布局合理；多媒體（圖像、音樂、滾動字幕）運用適當；Flash、框架運用合適；適當使用樣式頁（CSS）等。主要參考資料等：《Web設計基礎》李開榮高等教育出版社2008《網(wǎng)站規(guī)劃與網(wǎng)頁設計》張兵義電子工業(yè)出版社2008《Web編程技術》歷小軍機械工業(yè)出版社2009完成期限：一周指導教師簽名：課程負責人簽名：2010年5月日目錄TOC\o"1-2"\h\z\u一、引言 11.1課題的背景 11.2可行性研究 1二、需求分析 12.1系統(tǒng)概述： 12.2功能要求： 1三、總體設計 23.1功能設計 33.2界面設計 4四．詳細設計與實現(xiàn) 5六、結語 24個人網(wǎng)頁設計和實現(xiàn)引言課題的背景經(jīng)過本學期對web設計基礎這門課程的學習，對web的設計以及相關代碼的使用有了深入的了解，在學期末制作主題為個人主頁的網(wǎng)頁，對其設計并實現(xiàn)?？尚行匝芯拷?jīng)過考慮對制作工具的篩選，決定用Dreamweaver做個人網(wǎng)頁，Photoshop為輔助工具，設計和制作圖片、頁面及圖標等。本網(wǎng)站是以靜態(tài)網(wǎng)頁為基礎，以Dreamweaver為制作軟件、以Photoshop為設計軟件而成的。通過這個學期對網(wǎng)頁制作代碼相關的學習以及之前對這些軟件的了解，制作出相對簡單的個人網(wǎng)頁，展示自己相關的一些東西；本網(wǎng)站內容充實，在主頁的設計上運用了模板，框架等。分頁面上運用了導航條。插入了動態(tài)圖片以及視頻等給網(wǎng)增加了美觀度，在首頁的設計上本著簡單易懂的原則，用戶只要點擊鏈接就能看到自己想看到的連接內容。網(wǎng)站的首頁設置了背景音樂，使訪問者在瀏覽的同時還能欣賞到悠揚的旋律。需求分析系統(tǒng)概述一個具有個性的個人網(wǎng)站，是讓別人對你進行了解，與別人溝通的更好途徑，本文研究的是這次個人網(wǎng)站的設計與實現(xiàn)。能讓人通過本網(wǎng)站可以清晰地了解到我的一些信息。運用WindowsXP+Dreamweaver8+PS的網(wǎng)站設計制作環(huán)境，設計出神秘、活力的暗色與絢麗特效的網(wǎng)頁特色。功能要求實現(xiàn)鏈接、滾動字幕或圖片、插入音頻、視頻等插件的功能；總體設計運用Dreamweaver的框架功能；圍繞關于我自己的一些相關信息進行分類，實現(xiàn)分類的鏈接進行制作；并且要注重網(wǎng)頁的一體化，美感，還有色彩的搭配，音樂的選取等；3.1功能設計：利用框架（選取了左右下的框架結構）設置基本模樣。左邊框架作為導航欄，下邊的部分作為滾動圖片欄；右上方一大部分作為各個子網(wǎng)頁的瀏覽區(qū)；在導航欄插入了音樂，以便放入的音樂不會隨著鏈接的進入而消失，增添了網(wǎng)頁的趣味性；導航欄包括共：我的檔案，我的日志，我的班級，我的寵物，視頻欣賞五項，分別鏈接到各個子頁面；在導航區(qū)的最下方還設置有返回歡迎頁面的鏈接；并且設置導航區(qū)的背景、顏色、插入動態(tài)圖片等。3.2界面設計：本網(wǎng)頁頁面風格為暗色系，以黑色為主色其他色系進行搭配進行制作。index_myweb：主模塊（右上層模塊）添加制作的動態(tài)歡迎圖片：歡迎來到小小寒的主頁（動態(tài)）；左側導航欄目分布了各個子頁面的鏈接，點擊即可進入各個子頁面；右下方的模塊放置我的圖片，并且運動代碼實現(xiàn)滾動功能；由導航欄分別可以進入以下子頁面：我的檔案：主要介紹了我的一些基本情況，愛好及性格特征等等；我的日志：選了一篇自己喜歡的寫過的文章供大家閱讀；我的寵物：展示了我的寵物小狗貝貝的一些東西，我養(yǎng)狗的一些感受等；我的班級：介紹了我的班級的基本情況；視頻欣賞：摘選了一個搞笑flash給大家娛樂；以上五個分頁面風格與整體保持一致，莊重而不失色彩；詳細設計與實現(xiàn)1、創(chuàng)建網(wǎng)頁頁面：（1）新建站點：如圖建立新站點，設置好各個選項，一般靜態(tài)網(wǎng)頁不用連接到網(wǎng)絡，設置不用做太多修改，只需要設定好名稱及文件夾位置即可。（2）新建網(wǎng)頁：如圖，選擇創(chuàng)建新項目的HTML，或者選擇模板建立；創(chuàng)建好六個頁面，分別保存名稱為：index，我的檔案，我的日志，我的班級，我的寵物，視頻欣賞；2、打開頁面，選擇布局模式，使用左右下模板，保存主頁面標題為index.html,標題改為“我的主頁”；試運行，保存兩個框架；在左層模塊添加插件音樂，并縮小插件；（如圖1）設置導航欄，為每個分類的文字添加鏈接，將文字添加鏈接到“我的檔案”等各個子分頁，并且分頁鏈接目標選擇mainframe（如圖2）：圖1：圖2：在mainframe中插入自己在Photoshop中制作的動態(tài)歡迎圖片，添加到layer1中可以調試位置；在下方框架中插入各種照片，運動滾動效果的代碼實現(xiàn)其功能；為了美化在各個模塊中背景插入了相框，條紋等動態(tài)閃動圖片；讓視覺效果更震撼；圖一頁面代碼如下：<html><head><title>myweb</title><styletype="text/css"></style></head><body><palign="center"class="STYLE1"> </p><divid="Layer2"><spanclass="STYLE1"><embedsrc="music/英格瑪-謎-慢嗨.mp3"width="16"height="8"></embed></span></div><palign="center"class="STYLE1"><ahref="我的資料.html"target="mainFrame">我的檔案</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE2"><ahref="我的日志.html"target="mainFrame">我的日志</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的班級.html"target="mainFrame">我的班級</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的寵物.html"target="mainFrame">我的寵物</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的朋友.html"target="mainFrame">視頻欣賞</a></p><p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">┭<ahref="index_myweb.html"target="mainFram">返回主頁</a></p></body></html><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</title><styletype="text/css"></style></head><body><divid="Layer3"><imgsrc="image/11.gif"width="1078"height="407"/><divid="Layer4"><imgsrc="image/welcome.gif"width="923"height="338"/></div></div></body></html><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>無標題文檔</title><styletype="text/css"></style></head><body><palign="center"class="STYLE1"> </p><divid="Layer2"><spanclass="STYLE1"><embedsrc="music/英格瑪-謎-慢嗨.mp3"width="16"height="8"></embed></span></div><palign="center"class="STYLE1"><ahref="我的資料.html"target="mainFrame">我的檔案</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE2"><ahref="我的日志.html"target="mainFrame">我的日志</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的班級.html"target="mainFrame">我的班級</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的寵物.html"target="mainFrame">我的寵物</a></p><palign="center"class="STYLE1"> </p><palign="center"class="STYLE1"><ahref="我的朋友.html"target="mainFrame">視頻欣賞</a></p><p> </p><p> <imgsrc="image/13294029.gif"width="80"height="130"/></p><palign="center">┭<ahref="index_myweb.html"target="mainFram">返回主頁</a></p></body></html><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>小小寒的主頁</title><styletype="text/css"></style></head><body><DIVid=demoleftstyle="OVERFLOW:hidden;WIDTH:1100px;COLOR:#ffffff"><TABLEborder=0cellPadding=0cellSpacing=0cellspace="0"><TBODY><TR><TDid=demo1leftvAlign=topalign=middle><TABLEcellSpacing=0cellPadding=2border=0><TBODY><TRalign=middle><TD><divid="Layer2"><imgsrc="image/121444306241.gif"width="1100"height="159"/></div><imgsrc="image/SP_A1431.jpg"width="143"height="115"/></TD><TD><imgsrc="image/SP_A2839.jpg"width="153"height="115"/></TD><TD><imgsrc="image/SP_A3198.jpg"width="162"height="116"/></TD><TD><imgsrc="image/SP_A3517.jpg"width="156"height="117"/></TD><TD><imgsrc="image/SP_A28621.jpg"width="165"height="119"/></TD><TD><imgsrc="image/xiangxin11.jpg"width="169"height="123"/></TD><TD><imgsrc="image/圖像007(2)副本.jpg"width="99"height="124"/></TD></TR></TBODY></TABLE></TD><TDid=demo2leftvAlign=top></TD></TR></TBODY></TABLE></DIV><SCRIPT>varspeed=8//速度數(shù)值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTMLfunctionMarquee(){if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其實demo.scrollLeft是有最大值的，和demo0.width,引用的圖片的width有關系。demo過了一半（每半內容一樣的），重新開始循環(huán)demoleft.scrollLeft-=demo1left.offsetWidthelse{demoleft.scrollLeft++//不斷的增加，相當于父容器的滾動條不斷是縮??；但由于OVERFLOW:hidden;（滾動條不可見）}}varMyMarleft=setInterval(Marquee,speed)demoleft.onmouseover=function(){clearInterval(MyMarleft)}demoleft.onmouseout=function(){MyMarleft=setInterval(Marquee,speed)}</SCRIPT></BODY></HTML>3、在Photoshop中設計自己的子頁面效果：(1)找到自己喜愛的圖片最為背景，定義圖片添加到填充背景圖案中；(2)新建文件我的導航，填充背景，加入導航字，設置字體，橢圓邊框；(3)找到自己的一張照片摳出需要的部分粘貼在我的導航中，各個字體設置好，頁面調整到最佳，使用切片工具把需要添加鏈接的部分切好；保存為網(wǎng)頁模式；以我的檔案為例如圖：代碼：<html"><head><title>無標題文檔</title><styletype="text/css"></style></head><body><p> </p><p> </p><p> </p><p> </p><p> </p></body></html>其他各個子頁面效果如下：我的日志：代碼：<html><head><title>無標題文檔</title><styletype="text/css"></style></head><body></body></html>我的班級：代碼：<html><head><title>無標題文檔</title><styletype="text/css"></style></head><body></body></html>我的寵物：代碼：<html><head><title>無標題文檔</title><styletype="text/css"></style></head><body></body></html>視頻欣賞：代碼：<html><head><title>無標題文檔</title><title>無標題文檔</title><styletype="text/css"></style></head><body><divid="Layer3"><divid="Layer4"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="410"height="322"title="搞笑flash"><paramname="movie"value="music/a.swf"/><paramname="quality"value="high"/><paramname="PLAY"value="ture"/><paramname="LOOP"value="false"/><embedsrc="music/a.swf"width="410"height="322"loop="false"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"play="false"></embed></object></div></div></body></html>結語通過本次網(wǎng)頁的制作過程，我學習到了很多實用的東西，也充分了解了Dreamweaver這個軟件的強大，對學習了一個學期的課程也有了更深入的解，由于有了多媒體和網(wǎng)頁設計課程作基礎，因此在制作網(wǎng)頁的過程中諸如制作首頁，頁面鏈接等步驟進行的還是比較順利的，經(jīng)過最近每天晚上的辛苦努力，終于完成了我的主頁的制作。在這段時間里，一方面，我嘗試著將課本上所學的知識運用到制作中，另一方面，我又時刻在網(wǎng)上學習自己需要的知識，學習到了很多有用的東西，在這過程中，我對網(wǎng)頁的設計上有了更深的體會，對于這一領域，學到的知識多了，反而發(fā)現(xiàn)自己所了解的少了。遺憾的是，自己不會做動態(tài)網(wǎng)頁，否則我相信會更成功，慶幸的是，整個設計過程都很順利，錯誤也修改成功了不少，也可以安慰一下自己了。最終看到了自己親手做出來的網(wǎng)站，心里有了收獲般的欣喜，這讓我從心底里感謝這次實踐的機會，感謝老師給了我們一次自己動手的機會，在設計的過程中，同學們互相討論，這也增強了同學之間的交流。雖然網(wǎng)頁設計完成了，但欠缺之處尚存，希望可以得到老師的指點，使設計更加完善。目錄TOC\o"1-3"\u第一章項目摘要 31.1項目基本情況 31.2建設目標 31.3建設內容及規(guī)模 41.4產(chǎn)品及去向 41.5效益分析 4第二章項目建設的可行性和必要性 52.1建設的必要性 52.2建設的可行性 52.3編制依據(jù) 62.4編制原則 9第三章項目建設的基礎條件 93.1建設單位的基本情況 93.2項目的原料供應情況 103.3地址選擇分析 10第四章產(chǎn)品 114.1沼氣 114.2沼氣產(chǎn)量確定 124.3有機肥 134.4產(chǎn)品去向 13第五章沼氣工程工藝設計 145.1工藝參數(shù) 145.2處理工藝選擇 145.3工藝流程的組成 155.4厭氧處理工藝選擇與比較 155.5沼氣存儲和凈化工藝 165.6工藝流程 185.7沼氣輸配設施 195.8沼氣計量設施 19第六章總體設計 196.1站內總體設計 196.2站外配套設計 19第七章土建設計 207.1建筑設計 207.2結構設計 20第八章電氣設計 218.1設計依據(jù) 218.2設計規(guī)范 228.3設計說明 228.4控制與保護 228.5防雷與接地 228.6配電系統(tǒng) 238.7防雷與接地 238.8防爆設計 238.9供電負荷 23第九章安全、節(jié)能及消防

人人文庫> 全部分類> 辦公材料 > 辦公文檔

溫馨提示

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

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)

文檔簡介

溫馨提示

最新文檔

評論

ewb設計基礎報告?zhèn)€人網(wǎng)頁設計和實現(xiàn)

文檔簡介

溫馨提示

最新文檔

評論

相關文檔