網頁設計大作業湖南涉外經濟學院《網頁設計》期末大作業設計題目：致我們終將逝去的青春學號：37姓名：全新華院系：文法學院專業班級：漢語言文學1301班指導老師：蔣桂蓮網頁設計大作業全文共10頁，當前為第1頁。日期：2016年7月1日網頁設計大作業全文共10頁，當前為第1頁。頁面設計分析我設計的這個網頁主要介紹的是我個人在大學生活的一個狀態，作為一名大三學生，我想我們每個人都希望做這么一份個人網頁，所以借著我們學習的這個機會，給老師同時也是給自己交一份滿意的答卷，我相信這一份個人網頁會成為我很珍貴的一份紀念。作為一個網站的首頁，其頁面應需要簡單，明了，給人清晰的感覺。頂頭部分主要放置網頁主題、導航菜單和網站的LOGO信息等，其logo可以是一張圖片或者文本信息等；頁面主體分為兩個部分，頁面主體左側是個人網站介紹并配有自己的照片以及自我對個人青春的總結；其中相冊、美食、明星、故事、個人、聯系等7個頁面都設置了二級頁面，都是自己青春的積累。頁面主體右側是個人信息以及閨蜜朋友的簡單介紹，這些可通過頁面頂部導航進入相應頁面介紹，底部設有“友情鏈接”，鏈接了“百度”、“湖南涉外經濟學院”、“360”等。。。。。。。。。。。。。2、開發環境及軟件Windows10，MacromediaDreamweaver6，美圖秀秀等3、系統結構功能圖、頁面結構草圖3.1系統結構功能圖那些年我們一起瘋狂的照片（二級頁面）那些年我們一起過的明星（二級頁面）致我們終將逝去的青春那些年我們一起吃過的美食（二級頁面）（一級頁面）網頁設計大作業全文共10頁，當前為第2頁。那些年我們一起見證的青澀女孩（二級頁面）網頁設計大作業全文共10頁，當前為第2頁。那些年我們一起擁有的青春故事（二級頁面）那些年我們一起追的狗血?。ǘ夗撁妫┞撓怠韱危ǘ夗撁妫?.2頁面結構草圖整個設計過程中都用的了css+div布局，整體為1400寬，600高，用頭部、左側，內容，底部的制作；如下圖所示：圖1css+div設計截圖4、頁面制作過程；4.1主要界面網頁設計大作業全文共10頁，當前為第3頁。主頁網頁設計大作業全文共10頁，當前為第3頁。圖2主頁截圖給出頁面(body)的部分CSS代碼如下：body{ margin:0; padding:0; background:#1B3266; font-family:Arial,Helvetica,sans-serif; font-size:14px; color:#181B20;}h1,h2,h3{ margin:0;網頁設計大作業全文共10頁，當前為第4頁。 padding:0;網頁設計大作業全文共10頁，當前為第4頁。 text-transform:uppercase; font-family:'Oswald',sans-serif; font-weight:normal; color:#2483A6;}h1{font-size:2em;}h2{font-size:2.4em;}h3{font-size:1.6em;}p,ul,ol{ margin-top:0; line-height:180%;}ul,ol{}a{text-decoration:none; color:#2483A6;}a:hover{text-decoration:underline;}img.border{ border:6pxsolid#EEE7DF;}img.alignleft{ float:left; margin-right:25px;}img.alignright{ float:right;}img.aligncenter{ margin:0pxauto;}#wrapper{ margin:0auto; padding:0;}網頁設計大作業全文共10頁，當前為第5頁。子頁面或二級頁面網頁設計大作業全文共10頁，當前為第5頁。網頁設計大作業全文共10頁，當前為第6頁。網頁設計大作業全文共10頁，當前為第6頁。4.2頁面頂部的制作；頂部沒有采用插入圖片做背景，而是選擇直接在div中加入純色背景色，并配置“綠舍園藝”字樣。設計簡單、大方。4.3頁面導航區域的制作；圖4導航條截圖24.4左側（右側）區域的制作；網頁設計大作業全文共10頁，當前為第7頁。網頁設計大作業全文共10頁，當前為第7頁。4.5主體內容區域的制作；4.7源代碼頁頭部分：<divid="wrapper"><divid="header-wrapper"><divid="header"><divid="logo"><h1>綠舍園藝</h1><p>lvsheyuanyi</p></div></div></div>網頁設計大作業全文共10頁，當前為第8頁。<!--end#header-->網頁設計大作業全文共10頁，當前為第8頁。<divid="menu-wrapper"><divid="menu"><ul><liclass="current_page_item"><ahref="#">首頁界面</a></li> <li><ahref="#">公司簡介</a></li> <li><ahref="#">經營范圍</a></li> <li><ahref="#">植物養護</a></li> <li><ahref="#">聯系我們</a></li> <li></li></ul></div></div><!--end#menu--><divid="page"><divid="bgtop"><divid="bgbtm"><divid="content"><divid="content"><divclass="post"><h2class="title"><ahref="#">公司簡介</a></h2><pclass="meta">內街二樓248號</p>網頁設計大作業全文共10頁，當前為第9頁。<divclass="entry">網頁設計大作業全文共10頁，當前為第9頁。5、設計總結期末網頁設計經過在每天的奮戰終于完成了。剛開始做的時候，真的什么都感覺不知道，還記得那天晚上剛做的時候，都想哭了，怎么會這么難做呢，后來在室友的指導下自己慢慢的一步步做，感覺有了一點頭緒，也才感覺其實自己也可以做好的，這份作業包含了我所有的心血與感情，是我自己特別想做的，覺得會是自己一份很好的留念，也想把自己的成果展示給老師看。真的，通過這次作業我才明白學習是一個長期積累的過程，要不是認真的聽老師講課，這份作業可能真的無法入手。在此要感謝我的指導老師蔣桂蓮老師對我悉心的指導，感謝老師給我的幫助。每次課上都會尋求老師的指導幫助，真的特別感謝老師每次能夠不厭其煩的指導，教我怎樣才能做得更好。同時在設計過程中，我與同學交流經驗和自學，并向老師請教和看書本等方式，使自己學到了不少知識，培養了我獨立工作的能力，樹立了對自己工作能力的信心，相信會對今后