7網(wǎng)頁設(shè)計(jì)報(bào)告

存檔資料成績：華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告書所屬課程名稱網(wǎng)頁設(shè)計(jì)與制作題目設(shè)計(jì)一個(gè)首頁分院電信分院專業(yè)班級12級信管1班學(xué)號20120210450107學(xué)生姓名孫歡指導(dǎo)教師魏建紅2014年12華東交通大學(xué)理工學(xué)院課程設(shè)計(jì)報(bào)告-PAGE16-目錄TOC\o"1-2"\h\z\u第一章課程設(shè)計(jì)內(nèi)容及要求 3第二章設(shè)計(jì)思路與步驟 4第三章詳細(xì)設(shè)計(jì) 5第四章程序分析 15第五章課程設(shè)計(jì)心得 16第六章參考文獻(xiàn)（資料） 16第一章課程設(shè)計(jì)內(nèi)容及要求內(nèi)容有：1．建立站點(diǎn)；2．結(jié)構(gòu)分析；3．搭建框架；4．切割效果圖；5．布局頁面——頭部和導(dǎo)航；6．布局頁面——側(cè)邊欄；7．布局頁面——主體部分；8．底部和細(xì)節(jié)調(diào)整。要求：用DW進(jìn)行設(shè)計(jì)；第二章設(shè)計(jì)思路與步驟1、設(shè)計(jì)目的：本學(xué)期通過對《網(wǎng)頁設(shè)計(jì)與制作》的學(xué)習(xí)，讓我了解了如何設(shè)計(jì)網(wǎng)頁，以及一些基礎(chǔ)的網(wǎng)頁設(shè)計(jì)知識，運(yùn)用一些基本的網(wǎng)頁設(shè)計(jì)工具和原則制作和美觀網(wǎng)頁。比如背景圖片，文字，超鏈接，布局，框架，多媒體等等。通過這次設(shè)計(jì)，進(jìn)一步的提高了我的網(wǎng)站設(shè)計(jì)能力和動(dòng)手能力，更加全面的鞏固了我在課堂上學(xué)到的知識，熟練了網(wǎng)站設(shè)計(jì)的一些方法和步驟，了解了網(wǎng)站的基本結(jié)構(gòu)，熟悉了規(guī)范和標(biāo)準(zhǔn)。2、網(wǎng)頁的主題愛旅社首頁(在線旅游網(wǎng)頁)3、網(wǎng)站規(guī)劃通過借鑒一些旅游網(wǎng)頁，我主要是用div+css布局，背景圖片，然后再插入超鏈接等等布局，就形成了一個(gè)簡單的網(wǎng)站首頁布局。第三章網(wǎng)頁詳細(xì)設(shè)計(jì)3.1效果展示圖1、頭部分為兩個(gè)部分，一個(gè)是頭頂?shù)膱D片，一個(gè)是導(dǎo)航用如下代碼實(shí)現(xiàn)：<divstyle="margin-left:200px;"><imgsrc="image/top2.jpg"width="970px"height="200px"/></div><divid="nav"><ul><li><ahref="#">首頁</a></li><li><ahref="#">游記分享</a></li><li><ahref="#">旅行攻略</a></li><li><ahref="#">約伴出行</a></li><li><ahref="#">旅行線路</a></li><li><ahref="#">愛旅之家</a></li></ul></div><br><br><br><divid="twoa">當(dāng)前位置...>>首頁</div>ulli{ float:left; list-style:none; list-style:none; margin-left:80px; } #nav{ width:970px; height:50px; background-color:#1E90FF; margin-left:200px; float:left; } #twoa{ position:absolute;left:208px;top:260px; width:968px;height:30px; border:1pxsolid#0000E0; }2、左側(cè)欄通過div分成三塊：a.會(huì)員登錄界面：b.酒店安排：c.旅游指南：整體通過一些圖片的插入完善，就形成了一個(gè)簡單的左側(cè)欄：如下代碼實(shí)現(xiàn)：<divid="one"align="center"> <formaction="register.html"method="post"> <label>用戶名:</label><inputtype="text"name="usernamename"/><br><br> <label>密 碼:</label><inputtype="text"name="usernamename"/><br><br> <inputtype="submit"name="submit"value="登錄"/>   <inputtype="submit"name="submit"value="注冊"/> </form></div><divid="oneb"><imgsrc="image/top6.png"width="280px"height="150px"/></div><divid="three"align="center"> <form> <label>酒店查詢:</label><inputtype="text"name="usernamename"/><br><br><br> <label>入住時(shí)間:</label><inputtype="text"name="usernamename"/><br><br><br> <label>退房時(shí)間:</label><inputtype="text"name="usernamename"/><br><br><br> <inputtype="submit"name="submit"value="確定"/>   <inputtype="submit"name="submit"value="重置"/> </form></div><divid="onec"><imgsrc="image/top7.png"width="280px"height="150px"/></div> <divid="four"align="left"> <h4>旅游指南:</h4> <div><ahref="#"><p>江西旅游：<p>廬山  龍湖山  三清山  婺源  >>更多</a></div> <div><ahref="#"><p>國內(nèi)旅游：<p>北京  海南  麗江  新疆  >>更多</a></div> <div><ahref="#"><p>國外旅游：<p>巴黎  韓國  泰國  馬爾代夫  >>更多</a></div> <div><ahref="#"><p>自由行：<p>國內(nèi)自由行  出境自由行  >>更多</a></div></div><divid="onea"><imgsrc="image/top3.png"width="680px"height="150px"/></div>Css規(guī)定樣式： #three{ position:absolute;left:208px;top:570px; width:280px; height:260px;border:1pxsolid#008800;} #four{ position:absolute;left:208px;top:985px; width:280px; height:500px;border:1pxsolid#008800;} #oneb{ position:absolute; width:280px; height:150px; top:408px; margin-left:200px; } #onec{ position:absolute; width:280px; height:150px; top:835px; margin-left:200px; }3、右側(cè)欄通過div分成兩塊：如下代碼實(shí)現(xiàn)：<divid="onea"><imgsrc="image/top3.png"width="680px"height="150px"/></div>Css樣式： #onea{ position:absolute; width:670px; height:75px; top:295px; margin-left:482px; }如下代碼實(shí)現(xiàn)：#two{ position:absolute;left:220px;top:450px; }.A{ position:absolute;left:280px; width:200px; height:260px;border:1pxsolid#008800;}.B{ position:absolute;left:520px; width:200px; height:260px;border:1pxsolid#008800;}.C{ position:absolute;left:750px; width:200px; height:260px;border:1pxsolid#008800;}.D{ position:absolute;top:340px;left:280px; width:200px; height:260px;border:1pxsolid#008800;}.E{ position:absolute;top:340px;left:520px; width:150px; height:260px;border:1pxsolid#008800;}.F{ position:absolute;top:340px;left:750px; width:200px; height:260px;border:1pxsolid#008800;}.G{ position:absolute;left:280px;top:680px; width:200px; height:260px;border:1pxsolid#008800;}.H{position:absolute;left:520px;top:680px; width:200px; height:260px;border:1pxsolid#008800;}.I{position:absolute;top:680px;left:750px; width:200px; height:260px;border:1pxsolid#008800;}4、附加部分一個(gè)小廣告欄：如下代碼實(shí)現(xiàn)：<divclass="kefu"> <imgsrc="image/10.png""width="150px"height="200px"/></div>Css樣式：.kefu{position:fixed;top:200px;right:0px; width:150px; height:200px;border:1pxsolid#008800;}5、底部和細(xì)節(jié)調(diào)整 <divid="foot"> <ul> <li><ahref="#">幫助中心</a></li> <li><ahref="#">關(guān)于我們</a></li> <li><ahref="#">旅友分享記</a></li> <li><ahref="#">客服中心</a></li> <li><ahref="#">投訴</a></li> </ul> <br> <spanalign="center"> 江西省南昌市華東交通大學(xué)理工學(xué)院電信分院<br> 12級信息管理與信息系統(tǒng)1班孫歡<br> 愛旅社獨(dú)家設(shè)計(jì)©Copyrightbysunhuan2014/12/29</span> </div>Css樣式：#foot{ width:950px;height:80px;background:#7FFFD4;text-align:center;margin-top:1300px;}第四章程序?qū)崿F(xiàn)見Tour.text文檔第五章課程設(shè)計(jì)心得通過一學(xué)期的網(wǎng)頁設(shè)計(jì)學(xué)習(xí)，大概的了解了網(wǎng)頁設(shè)計(jì)的思路和原則的基本概念，但知識還沒有得到很好的消化。建一個(gè)比較完整比較完善的頁面對我來說，還是一個(gè)非常大的挑戰(zhàn)和困難。在課程設(shè)計(jì)中，我遇到了很多問題，最終還是通過查找相關(guān)資料解決了，也從另一