web開發(fā)技術(shù)課程設(shè)計(jì)報(bào)告

1、滿南儀申泉城學(xué)院web系統(tǒng)設(shè)計(jì)課程設(shè)計(jì)學(xué)院：工學(xué)院專業(yè)：網(wǎng)絡(luò)工程班級：1401姓名：王樂學(xué)號：70指導(dǎo)教師：姬廣永張珊珊2016年7月1日工學(xué)院課程設(shè)計(jì)評審表學(xué)生姓名王樂專業(yè)網(wǎng)絡(luò)工程年級2014學(xué)號70設(shè)計(jì)題目響應(yīng)式網(wǎng)站項(xiàng)目（遼寧陸海石油響應(yīng)式網(wǎng)站）評價內(nèi)容評價指標(biāo)評分權(quán)值評士7E成績業(yè)務(wù)水平（含答辯）有扎實(shí)的基礎(chǔ)理論知識和專業(yè)技能；能夠綜合運(yùn)用所學(xué)的HTMLCSSJavaScript等知識和HBuilder開發(fā)工具進(jìn)行WEB占點(diǎn)的規(guī)劃、設(shè)計(jì)與制作；能夠根據(jù)網(wǎng)站規(guī)劃，搜集、整理相關(guān)素材；獨(dú)立進(jìn)行實(shí)驗(yàn)工作，學(xué)會調(diào)試、發(fā)布、管理網(wǎng)站，并能運(yùn)用所學(xué)知識和技能去發(fā)現(xiàn)與解決實(shí)際問題；主頁版面內(nèi)容、結(jié)構(gòu)和

2、鏈接設(shè)計(jì)清晰合理；考慮頁面整體布局、視覺效果、頁面尺寸和框架等因素，保持網(wǎng)站的整體設(shè)計(jì)風(fēng)格一致。40課程設(shè)計(jì)報(bào)告（設(shè)計(jì)說明書）質(zhì)量綜述簡練完整；結(jié)論嚴(yán)謹(jǐn)合理；實(shí)驗(yàn)正確，分析處理科學(xué)；文字通順，技術(shù)用語準(zhǔn)確，符號統(tǒng)一，編號齊全，書寫工整規(guī)范，圖表完備、整潔、止確；結(jié)果有應(yīng)用價值；工作中有創(chuàng)新意識；對前人工作有改進(jìn)或突破，或有獨(dú)特見解。30工作量、工作態(tài)度按期完成規(guī)定的任務(wù)，工作量飽滿，難度較大；工作努力，遵守紀(jì)律；工作作風(fēng)嚴(yán)謹(jǐn)務(wù)實(shí)30合計(jì)100指導(dǎo)教師評語設(shè)計(jì)題目：響應(yīng)式網(wǎng)站項(xiàng)目（遼寧陸海石油響應(yīng)式網(wǎng)站）姬廣永王樂，牟敦現(xiàn)，常發(fā)博，陳兵，王守棟綜合運(yùn)用所學(xué)的HTM及CSSJavaScript等知

3、識，使用WEB開發(fā)工具編輯網(wǎng)頁，Photoshop或FireWorks處理圖形，制作出主題鮮明、結(jié)構(gòu)清晰、圖文并茂、具有專業(yè)水平的網(wǎng)站。1、確定所要制作網(wǎng)站的類型、主題、規(guī)模以及要使用的技術(shù)。2、規(guī)劃網(wǎng)站的欄目、風(fēng)格，畫出站點(diǎn)規(guī)劃層次圖，建立站點(diǎn)目錄。3、根據(jù)網(wǎng)站規(guī)劃，搜集、整理相關(guān)素材。4、對網(wǎng)站用到的文本、圖片、動畫等多媒體素材進(jìn)行處理。5、主頁版面內(nèi)容、結(jié)構(gòu)和鏈接設(shè)計(jì)要清晰，醒目。6、考慮頁面整體布局、視覺效果、頁面尺寸和框架等因素，保持網(wǎng)站的整體設(shè)計(jì)風(fēng)格一致。7、網(wǎng)站調(diào)試：網(wǎng)站各個頁面完成后，對站點(diǎn)進(jìn)行調(diào)試。8、網(wǎng)站發(fā)布：網(wǎng)站建設(shè)好后，發(fā)布到網(wǎng)站服務(wù)器。設(shè)計(jì)要求分組：每三至五人一組，自

4、由組合；項(xiàng)目演示：以小組為單位，逐一演示本小組成員所做項(xiàng)目，并進(jìn)行項(xiàng)目講解；多人進(jìn)行共同合作開發(fā)，在項(xiàng)目答辯的過程中要明確解說每個人的分工任務(wù)，并且課程設(shè)計(jì)才艮告主要介紹自己所做內(nèi)容，要求實(shí)訓(xùn)中制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在70必上，以完成各個方面的的訓(xùn)練。web開發(fā)技術(shù)課程設(shè)計(jì)任務(wù)書目錄遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計(jì)設(shè)計(jì)目的設(shè)計(jì)要求網(wǎng)站整體規(guī)劃遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計(jì)錯誤 ! 未定義書簽。錯誤 ! 未定義書簽。錯誤 ! 未定義書簽。錯誤 ! 未定義書簽。網(wǎng)站詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)錯誤 ! 未定義書簽。負(fù)責(zé)區(qū)域 .錯誤 ! 未定義書簽。負(fù)責(zé)區(qū)域網(wǎng)頁代碼錯誤 ! 未定義書簽。錯誤 ! 未定義書簽。負(fù)責(zé)區(qū)

5、域CSS弋碼1 設(shè)計(jì)目的熟悉和掌握計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)的基本技巧及網(wǎng)頁制作相關(guān)工具軟件等內(nèi)容。培養(yǎng)我們利用計(jì)算機(jī)進(jìn)行商務(wù)網(wǎng)頁設(shè)計(jì)的基本思路和應(yīng)用開發(fā)能力，提高我們的計(jì)算機(jī)文化素質(zhì)。網(wǎng)頁是世界上最有價值的不動產(chǎn)之一。人們在這個不足平米的空間內(nèi)投資達(dá)數(shù)百萬美元。網(wǎng)頁對公司的影響比簡單的電子商務(wù)增收方法大得多；網(wǎng)頁也是公司對外的臉面。WEB占點(diǎn)就像一棟房子，它的每一個窗口都可以看成一扇門，人們可以沿著搜索引擎其他WEB占點(diǎn)的鏈接，繞過主頁而進(jìn)入WEB勺深層。2 設(shè)計(jì)要求1. 站點(diǎn)命名與結(jié)構(gòu)站點(diǎn)文件夾為遼寧陸海。站點(diǎn)文件夾中所包含文件夾：img（Images,存放圖片文件），CSS（存放各部分的css文件）

6、。站點(diǎn)文件夾中所包含文件：（首頁）2. 網(wǎng)站制作網(wǎng)站技術(shù)要求頁面布局合理，色彩和諧，鏈接正確，圖文并茂，制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在70%以上，以完成各個方面的的訓(xùn)練。3. 合作開發(fā)分為3到5人的小組，多人進(jìn)行共同合作來完成此次實(shí)訓(xùn)的任務(wù)。小組內(nèi)部分工合作，每個人都要有自己負(fù)責(zé)的板塊。在競爭與合作中完成此次實(shí)訓(xùn)的任務(wù)。3網(wǎng)站整體規(guī)劃1. 討論網(wǎng)站主題頁，其中的各種動畫、過渡等都需要做出來。2. 確定欄目和板塊1 ）首先要考慮整個網(wǎng)頁的長和寬，以及長度和寬度之間的比例。2 ）其次就應(yīng)該考慮導(dǎo)航條的設(shè)置了。3）正文的框架設(shè)置（橫向因素和縱向因素交錯）在仔細(xì)研究過原版之后，再結(jié)合我們自己的想法，在草

7、紙上畫出了大體的欄目和板塊。3. 小組分工合作將整個頁面分為三部分，分別是頭部（一人負(fù)責(zé)）、尾部（一人負(fù)責(zé)）和主體內(nèi)容（三人負(fù)責(zé)）。我主要負(fù)責(zé)的是主題內(nèi)容中最新動態(tài)區(qū)域。4. 使用的工具HTM編輯軟件：主要是HBuilder,DreamWeave作輔助。瀏覽器：以使用谷歌瀏覽器Chrome瀏覽為主。輔助工具：屏幕截圖工具FSCapture,CSSw3c標(biāo)準(zhǔn)html5手冊5.網(wǎng)站整體布局框圖如下:4網(wǎng)站詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)負(fù)責(zé)區(qū)域代碼HTML代碼<sectionclass="news"><divclass="xin1">最新動態(tài)</

8、div><divclass="xin2">News</div><divclass="dong"><ul><liclass="kuai"><divclass="pic"><imgsrc="img/"/></div>vh4X尹朗石油公司代表前來我院參觀洽談</h4><pstyle="text-indent:2em;">今日，伊朗石油公司的客人來到我院進(jìn)行石

9、油項(xiàng)目的洽談合作，院長戴克文熱情的接見v/p><divclass="read">ReadMore</div></li><liclass="kuai"style="margin:03%;"><divclass="pic"><imgsrc="img/"/></div>vh4>第三套甲板吊機(jī)完成起吊試驗(yàn)v/h4><pstyle="text-indent:2em;">20

10、16年3月10日，雖然寒潮再度來襲，但依舊沒有阻擋我院工作人員完成第三套甲板</p><divclass="read">ReadMore</div></li><liclass="kuai"><divclass="pic"><imgsrc="img/"/></div><h4>第三套甲板吊機(jī)排線布繩工作順利完成</h4><pstyle="text-indent:2em;">

11、;2016年3月3日，第三套甲班吊機(jī)在總工程師張曉軍的帶領(lǐng)下，上午順利完成拼稀</p><divclass="read">ReadMore</div></li></ul></div></section>負(fù)責(zé)區(qū)域CSS弋碼.newswidth:100%;height:550px;.news.xin1width:136px;height:50px;font-size:32px;font-weight:900;position:relative;top:45px;left:50%;margin-le

12、ft:-78px;.news.xin2color:#2A7EDA;width:70px;height:15px;color:#1EA8EA;font-size:28px;position:relative;left:50%;top:30px;margin-left:-35px;.news.dongmargin:0auto;position:relative;top:40px;.news>ul>liwidth:100%;height:200px;overflow:hidden;/*display:block;*/.news>ul>lilist-style:none;flo

13、at:left;.news.dong.kuaiwidth:28%;height:350px;border:1pxsolid#C3C3C3;padding:10px;.news.dong.kuai.picwidth:100%;height:50%;overflow:hidden;.news.dong.picimgwidth:100%;height:100%;transition:all2sease;.news.dongli:hoverimgtransform:scale;.readwidth:38%;height:10%;margin:0auto;color:#F86C0F;border:2pxsolid#F86C0F;font-size:16px;text-align:center、padding-top:4%;background-color:#F86C0F;color:white;.news.dongli:hovercursor:pointer;color:#2A7EDA;網(wǎng)頁效果圖5設(shè)計(jì)總結(jié)1設(shè)計(jì)目的（一級標(biāo)題：黑體小三，倍行距，段后1行）XXXXXXXXXX（正文：段落起始空兩個字符，宋體，小四（英文、數(shù)字：TimesNewRomap小四），倍行距）2設(shè)計(jì)要求XXXXXXXXXXXXXXXXXXXXX（正文：段落起始空兩個字符，宋體，小四（