班級網(wǎng)站設(shè)計(jì)報(bào)告

第2頁共17頁湖南涉外經(jīng)濟(jì)學(xué)院課程設(shè)計(jì)報(bào)告課程名稱:報(bào)告題目:學(xué)生姓名:專業(yè)班級:所在學(xué)院:學(xué)生學(xué)號:指導(dǎo)老師:20年月日第11頁 摘要網(wǎng)頁已經(jīng)成為網(wǎng)上設(shè)計(jì)的常用設(shè)計(jì)之一，有它不可取代的地位，而最常用的是基本網(wǎng)頁布局，它在使用中要持久的維護(hù)，為了開發(fā)有維護(hù)，在使用時(shí)先由開發(fā)者在dreamweaver上開發(fā)網(wǎng)頁和調(diào)試。本課題要設(shè)計(jì)的是班級網(wǎng)頁，在設(shè)計(jì)中了解網(wǎng)頁設(shè)計(jì)的基本知識，設(shè)計(jì)出一個(gè)自己班的網(wǎng)頁，在以后的學(xué)習(xí)中更加有基本的理論知識和應(yīng)用經(jīng)驗(yàn)。在網(wǎng)頁的設(shè)計(jì)中分工設(shè)計(jì)和管理，網(wǎng)頁的基本布局，div+css的基本布局的把握，網(wǎng)頁樣式的持續(xù)利用性，使自己的班級網(wǎng)頁更加好管理.在設(shè)計(jì)好自己的網(wǎng)頁后，在不同的瀏覽器中打開看最終效果，因?yàn)闉g覽器的不同網(wǎng)頁顯示的效果也是有差別的。關(guān)鍵詞：班級網(wǎng)頁；div+css布局；html5；

目錄一、設(shè)計(jì)開發(fā)內(nèi)容 6二、設(shè)計(jì)網(wǎng)頁目的 6三、設(shè)計(jì)網(wǎng)頁的過程 7四、網(wǎng)頁的部分代碼 8五、結(jié)論與心得 11

設(shè)計(jì)開發(fā)內(nèi)容1)開發(fā)工具Addobe公司網(wǎng)頁開發(fā)軟件Dreamweavercs5.5：DreamweaverCS5.5提供HTML、CSS視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。視頻制作軟件Flash8和flash8播放器，flash8開發(fā)動畫軟件利于開發(fā)自己的動畫。網(wǎng)站圖片由photoshopcs5制作:Photoshop的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版等各方面都有涉及。網(wǎng)頁預(yù)覽在Firefox、IE9、360瀏覽器上通過,在不同的瀏覽器觀看不同的效果。網(wǎng)頁布局以div+css為主，加了一些簡單的javascript，認(rèn)網(wǎng)頁更加完美。2）設(shè)計(jì)背景在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，而人們在網(wǎng)上獲得知識大部分來自于網(wǎng)頁，所以網(wǎng)頁設(shè)計(jì)也變得很重要了，而我們已經(jīng)學(xué)了一期的網(wǎng)頁設(shè)計(jì)的基本知識，做這一次網(wǎng)頁設(shè)計(jì)是為了更好的把理論與實(shí)踐相結(jié)合。3)自己班級網(wǎng)站網(wǎng)站名字為我的班級，整個(gè)網(wǎng)站的色調(diào)定位為淺的綠色，包括背景、文字以及photoshop制作的圖片都是以藍(lán)色為主。整個(gè)頁面以簡潔為主要特色。簡潔的綠色風(fēng)情給人帶來好的心情，又使人的觀看不至于那么疲勞。讓人卸下一天的疲憊。讓人在自由隨性的環(huán)境下做自己愛做的事。給人帶來輕松愉快的心情來瀏覽網(wǎng)頁。在我的網(wǎng)站中能了解我們班的基本信息，和學(xué)校信息，在喔的網(wǎng)站中加了一些學(xué)校鏈接和百度等常用鏈接。網(wǎng)頁設(shè)計(jì)目的通過一個(gè)學(xué)期的網(wǎng)頁開發(fā)課程的學(xué)習(xí)。我們已經(jīng)具備應(yīng)用Dreamweaver開發(fā)簡單網(wǎng)頁的能力。在這次班級網(wǎng)頁設(shè)計(jì)中我的設(shè)計(jì)目的是：1)熟練掌握班級網(wǎng)站網(wǎng)頁設(shè)計(jì)的方法和流程；為以后的網(wǎng)頁設(shè)計(jì)打下良好的基礎(chǔ)，在以后的工作中，更能適應(yīng)大型網(wǎng)頁的開發(fā)。2)通過綜合運(yùn)用HTML5和CSS3的相關(guān)技術(shù)在加上自己的學(xué)習(xí)設(shè)計(jì)一個(gè)具有實(shí)際使用價(jià)值、風(fēng)格統(tǒng)一、大方美觀的網(wǎng)站；在其中領(lǐng)悟和琢磨我的課本html5,css3,javascript網(wǎng)頁設(shè)計(jì)，認(rèn)書本知識與實(shí)際相結(jié)合，提高實(shí)戰(zhàn)經(jīng)驗(yàn)。3)加強(qiáng)理論知識和技能綜合運(yùn)用能力的結(jié)合；在課堂上聽老師講的理論知識，在本次的網(wǎng)頁設(shè)計(jì)中得到了充分的應(yīng)用，有什么不懂的在課本上查找，在網(wǎng)上查閱，努力提高綜合技能。4)熟悉未來網(wǎng)站網(wǎng)頁的設(shè)計(jì)流程和注意事項(xiàng)；我們的課本都是最新版的跟上了時(shí)代的潮流，利于以后工作的開發(fā)，在網(wǎng)上看一些大型網(wǎng)頁時(shí)發(fā)現(xiàn)網(wǎng)頁設(shè)計(jì)的目的很明確，網(wǎng)頁要數(shù)的分工存儲，分工管理，為以后的開發(fā)提高了很大的效率。在自己以后的網(wǎng)頁開發(fā)中要把自己的網(wǎng)頁要數(shù)分好工，利于后期維護(hù)。5)設(shè)計(jì)總的目的在于讓自己加深對網(wǎng)頁制作的基本知識的理解，運(yùn)用和提高網(wǎng)頁制作的技能，通過真實(shí)的網(wǎng)頁設(shè)計(jì)工作任務(wù)，讓自己能設(shè)計(jì)出有一定水平的網(wǎng)頁并具有解決實(shí)際問題的能力，掌握實(shí)際的網(wǎng)頁制作開發(fā)流程和開發(fā)方法；在以后的開發(fā)中便于自己開發(fā)一個(gè)美觀的網(wǎng)頁。設(shè)計(jì)過程1）網(wǎng)站模塊班級首頁班級簡介最新動態(tài)教師介紹班級成員班級風(fēng)貌作者簡介班級首頁班級首頁暑假放假通知計(jì)算機(jī)繳費(fèi)本科評估英語學(xué)習(xí)風(fēng)采月班級風(fēng)貌班級簡介最新動態(tài)班級成員教師介紹2)網(wǎng)頁的頁面分析1,主頁：在主頁當(dāng)中把幾個(gè)分頁面的內(nèi)容用表的形式排列出來，在連接到各個(gè)分頁上去，本網(wǎng)站的才用文字與圖片來連接。2，分頁：每個(gè)分頁各有千秋，但總體上是啟用了主頁設(shè)置，認(rèn)頁面更加的統(tǒng)一。3，網(wǎng)站：在網(wǎng)站的建設(shè)當(dāng)中要考慮到建設(shè)網(wǎng)頁的需求，要適當(dāng)?shù)逆溄?。更加豐富自己的網(wǎng)站。3)網(wǎng)頁設(shè)計(jì)的基本內(nèi)容在使用dreamweaver編輯網(wǎng)頁的框架和主體內(nèi)容；主頁我使用使用DIV嵌套布局頁面。使用CSS3代碼來設(shè)計(jì)網(wǎng)頁的風(fēng)格，首頁風(fēng)格和分頁風(fēng)格,做到統(tǒng)一整個(gè)網(wǎng)頁的視覺效果,是自己的班級網(wǎng)頁有自己的網(wǎng)頁文化.在自己網(wǎng)站中自己設(shè)計(jì)站點(diǎn)合理、管理有序、大小也合適，首頁命名簡單明了，存放位置自己都有特定的位置；自己的網(wǎng)頁設(shè)計(jì)至少有三層結(jié)構(gòu)，總頁面數(shù)在10頁以上；網(wǎng)站中的超鏈接也較為合理,是用戶用起來更加的方便.自己在網(wǎng)頁中有版權(quán)說明；并且有版權(quán)標(biāo)記符號,使用戶能直觀的看到.網(wǎng)頁的部分代碼在網(wǎng)頁設(shè)計(jì)中重要的要數(shù)網(wǎng)頁代碼了,在自己的班級網(wǎng)頁中我利用很多的網(wǎng)頁代碼,在此我簡單的例句一些代碼如下:*{padding:0;margin:0;}body{font-size:13px;line-height:160%;color:#666;}a{text-decoration:none;color:#333;}h3{background:#666;color:#f6f6f6;padding:0px10px;font-size:13px;}p{text-indent:24px;}h2{font-size:18px;font-weight:bold;text-align:center;border-bottom:1px#cccsolid;}#outer{width:760px;margin:0auto;}#top{height:80px;}.top_nav{height:20px;text-align:right;line-height:20px;padding-right:5px;font-size:12px;}.logo{width:200px;float:left;}.logoa{width:200px;height:60px;display:block;}.banner{width:560px;float:right;text-align:right;}.bannerimg{width:560px;height:60px;border:none;}#nav{height:30px;margin-top:5px;}#navul{list-style-type:none;background:#333;color:#f6f6f6;}#navulli{float:left;width:100px;text-align:center;line-height:30px;height:30px;border-right:1pxsolid#555;}#navullia{display:block;width:100px;height:30px;color:#f6f6f6;}#navullia:hover{background:#666;color:#fff;font-weight:bold;}#content{margin-top:10px;}.left{width:220px;float:left;margin-right:10px;}.left_con{padding:10px;}.notice{}.index_con,.index_ad{border:1pxsolid#666;}.bzr,.bwcy,.new_article,.index_article,.link,.gbook{margin-top:10px;}.new_articleul{padding-left:15px;list-style-type:circle;}.new_articleulli{border-bottom:1pxdotted#ccc;}.bzrimg{width:130px;height:140px;}.right{width:530px;float:right;martin-bottom:10px;}.right_con{padding:10px;}.bwcy_gunimg{width:122px;height:120px;}.bwcy_gunul{list-style-type:none;}.bwcy_gunulli{float:left;margin:02px;}.index_articleul{list-style-type:none;padding-left:5px;}.index_articleulli{border-bottom:1pxdotted#ccc;}.index_article_l{width:260px;float:left;}.index_article_r{width:260px;float:right;}.dt_l{width:260px;float:left;}.dt_r{width:260px;float:right;}.dt_l,.dt_r{overflow:hidden;}.dt_lul,.dt_rul{list-style-type:none;padding-left:0px;}.dt_lulli,.dt_rulli{white-space:nowrap;border-bottom:1pxdotted#ccc;height:30px;line-height:30px;}.teacher_listul{list-style-type:none;}.teacher_listulli{float:left;margin:5px;}.teacher_listulliimg{border:none;width:115px;height:120px;}.bjfm{text-align:center;}.bjfmimg{width:450px;height:350px;border:none;padding:2px;}.articles{}.art_con{}#footer{padding:10px30px;margin:10px05px0;border-top:5pxsolid#333;text-align:center;}這一些是一些css樣式,我存儲在一個(gè)特定的文件夾下,便于管理,集中調(diào)用,易于后期修改.下面是一些網(wǎng)頁代碼,如html5等,代碼如下:<!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>班級簡介_我的班級網(wǎng)站</title><linkhref="css/style.css"type="text/css"rel="stylesheet"/></head><bodybgcolor="#CBE9EB"><divid="outer"> <divid="top"> <divclass="top_nav"> <ahref="#">設(shè)為首頁</a>|<ahref="#">收藏本站</a> </div> <divclass="logo"> <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="200"height="60"title="logo"><paramname="movie"value="flash/logo.swf"/><paramname="quality"value="high"/><paramname="vmode"value="transparent"/><embedsrc="flash/logo.swf"width="200"height="60"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"vmode="transparent"></embed> </object> </div> <divclass="banner"> <divstyle="width:468px;float:right"> </div> </div> <divstyle="clear:both;"></div> </div> <divstyle="clear:both;"></div> <divid="nav"> <ul> <listyle="background:#111;"><ahref="index.html">首頁</a></li> <li><ahref="about.html">班級簡介</a></li> <li><ahref="news.html">最新動態(tài)</a></li> <li><ahref="teachers.html">教師介紹</a></li> <li><ahref="classmates.html">班級成員</a></li> <li><ahref="photos.html">班級風(fēng)貌</a></li> <li><ahr