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

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

2、答辯）決實(shí)際問題；主頁版面內(nèi)容、結(jié)構(gòu)和鏈接設(shè)計(jì)清晰合理；考慮頁面整體布局、視覺效果、頁面尺寸和框架等因素，保持網(wǎng)站的整體設(shè)計(jì)風(fēng)格一致。2014011070評分評定權(quán)值成績40課程設(shè)計(jì)報(bào)告 (設(shè)計(jì)說明書 )質(zhì)量工作量、工作態(tài)度指導(dǎo)教師評語綜述簡練完整；結(jié)論嚴(yán)謹(jǐn)合理；實(shí)驗(yàn)正確，分析處理科學(xué)；文字通順，技術(shù)用語準(zhǔn)確， 符號統(tǒng)一， 編號齊全， 書寫工整規(guī)范， 圖表完備、 整潔、30正確；結(jié)果有應(yīng)用價(jià)值； 工作中有創(chuàng)新意識； 對前人工作有改進(jìn)或突破，或有獨(dú)特見解。按期完成規(guī)定的任務(wù)，工作量飽滿，難度較大；工作努力，遵守紀(jì)律；30工作作風(fēng)嚴(yán)謹(jǐn)務(wù)實(shí)合計(jì)100頁眉內(nèi)容共享知識分享快樂web 開發(fā)技術(shù)課程設(shè)計(jì)任

3、務(wù)書設(shè)計(jì)題目：響應(yīng)式網(wǎng)站項(xiàng)目（遼寧陸海石油響應(yīng)式網(wǎng)站）指導(dǎo)參加姬廣永王樂，牟敦現(xiàn)，常發(fā)博，陳兵，王守棟老師學(xué)生綜合運(yùn)用所學(xué)的HTML 及 CSS、JavaScript 等知識，使用WEB 開發(fā)工具編輯網(wǎng)設(shè)計(jì)頁， 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)素材。設(shè)計(jì)4、對網(wǎng)站用到的文本、圖片、動畫等多媒體素材進(jìn)行處理。內(nèi)容5、主頁版面內(nèi)容、結(jié)構(gòu)和鏈接設(shè)計(jì)要清晰，醒目。設(shè)計(jì)要求6、

4、考慮頁面整體布局、視覺效果、頁面尺寸和框架等因素，保持網(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ù)器。分組：每三至五人一組，自由組合；項(xiàng)目演示：以小組為單位，逐一演示本小組成員所做項(xiàng)目，并進(jìn)行項(xiàng)目講解；多人進(jìn)行共同合作開發(fā)，在項(xiàng)目答辯的過程中要明確解說每個人的分工任務(wù)，并且課程設(shè)計(jì)報(bào)告主要介紹自己所做內(nèi)容，要求實(shí)訓(xùn)中制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在 70%以上，以完成各個方面的的訓(xùn)練。頁眉內(nèi)容共享知識分享快樂遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計(jì)目錄遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計(jì). 21設(shè)計(jì)目的 .32設(shè)計(jì)要求 .43網(wǎng)站整體規(guī)劃 .54

5、網(wǎng)站詳細(xì)設(shè)計(jì)及實(shí)現(xiàn) .64.1負(fù)責(zé)區(qū)域 .錯誤！未定義書簽。4.2負(fù)責(zé)區(qū)域網(wǎng)頁代碼 .64.3負(fù)責(zé)區(qū)域 CSS代碼 .7頁眉內(nèi)容共享知識分享快樂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)頁是世界上最有價(jià)值的不動產(chǎn)之一。人們在這個不足0.1 平米的空間內(nèi)投資達(dá)數(shù)百萬美元。網(wǎng)頁對公司的影響比簡單的電子商務(wù)增收方法大得多；網(wǎng)頁也是公司對 外的臉面。 WEB 站點(diǎn)就像一棟房子，它的每一個窗口都可以看成一扇門，人們可以沿著搜索引擎其他 WEB 站點(diǎn)的鏈接，繞過主頁而進(jìn)入WEB 的深層

6、。頁眉內(nèi)容共享知識分享快樂2 設(shè)計(jì)要求1站點(diǎn)命名與結(jié)構(gòu)站點(diǎn)文件夾為遼寧陸海。站點(diǎn)文件夾中所包含文件夾： img（ Images，存放圖片文件）， CSS（存放各部分的 css 文件）。站點(diǎn)文件夾中所包含文件：index.html（首頁）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ù)。頁眉內(nèi)容共享知識分享快樂3 網(wǎng)站整體規(guī)劃1. 討論網(wǎng)站主題本次實(shí)訓(xùn)要

7、做的網(wǎng)站是遼寧陸海石油裝備研究院有限公司的首頁，其中的各種動畫、過渡等都需要做出來。2. 確定欄目和板塊1 ）首先要考慮整個網(wǎng)頁的長和寬，以及長度和寬度之間的比例。2 ）其次就應(yīng)該考慮導(dǎo)航條的設(shè)置了。3）正文的框架設(shè)置（橫向因素和縱向因素交錯）在仔細(xì)研究過原版之后，再結(jié)合我們自己的想法，在草紙上畫出了大體的欄目和板塊。3. 小組分工合作將整個頁面分為三部分，分別是頭部（一人負(fù)責(zé)） 、尾部（一人負(fù)責(zé)）和主體內(nèi)容（三人負(fù)責(zé)）。我主要負(fù)責(zé)的是主題內(nèi)容中最新動態(tài)區(qū)域。4. 使用的工具HTML 編輯軟件：主要是 HBuilder ，DreamWeaver作輔助。瀏覽器：以使用谷歌瀏覽器 Chrome 瀏

8、覽為主。輔助工具：屏幕截圖工具 FSCapture， CSS、w3c 標(biāo)準(zhǔn) html5 手冊5. 網(wǎng)站整體布局框圖如下：首頁頭部產(chǎn)品服成功案最新動尾部header務(wù)例態(tài)footerheader搜導(dǎo)橫變定蒙定放定信版索航幅換位版位大位息權(quán)框頁眉內(nèi)容共享知識分享快樂4 網(wǎng)站詳細(xì)設(shè)計(jì)及實(shí)現(xiàn)4.1 負(fù)責(zé)區(qū)域代碼4.1.1 HTML 代碼 最新動態(tài) News伊朗石油公司代表前來我院參觀洽談 今日，伊朗石油公司的客人來到我院進(jìn)行石油項(xiàng)目的洽談合作，院長戴克文熱情的接見Read More 第三套甲板吊機(jī)完成起吊試驗(yàn)2016年 3 月 10 日，雖然寒潮再度來襲，但依舊沒有阻擋我院工作人員完成第三套甲板Rea

9、d More第三套甲板吊機(jī)排線布繩工作順利完成2016年 3 月 3 日，第三套甲班吊機(jī)在總工程師張曉軍的帶領(lǐng)下，上午順利完成拼稀Read More頁眉內(nèi)容共享知識分享快樂4.1.2 負(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-left: -78px;.news .xin2color: #2A7EDA;width: 70px;h

10、eight: 15px;color:#1EA8EA;font-size: 28px;position: relative;left:50%;top: 30px;margin-left: -35px;頁眉內(nèi)容共享知識分享快樂.news .dongmargin: 0 auto;position: relative;top: 40px;.news ul liwidth:100%;height: 200px;overflow: hidden;/*display: block;*/.news ul lilist-style: none;float: left;.news .dong .kuaiwidth

11、: 28%;height: 350px;border: 1px solid #C3C3C3;padding: 10px;.news .dong.kuai .picwidth: 100%;height: 50%;overflow: hidden;頁眉內(nèi)容共享知識分享快樂.news .dong .pic imgwidth: 100%;height: 100%;transition: all2s ease;.news .dongli:hover imgtransform: scale(1.3);.readwidth:38% ;height: 10%;margin: 0 auto;color: #F8

12、6C0F;border: 2px solid #F86C0F;font-size: 16px;text-align: center 、padding-top: 4%;.news .dongli:hover .readbackground-color:#F86C0F;color: white;.news .dongli:hovercursor: pointer;color: #2A7EDA;頁眉內(nèi)容共享知識分享快樂4.2 網(wǎng)頁效果圖頁眉內(nèi)容共享知識分享快樂5 設(shè)計(jì)總結(jié)1 設(shè)計(jì)目的（一級標(biāo)題：黑體小三，1.5 倍行距，段后1 行） Times New Roman1.252 設(shè)計(jì)要求 Times New Roman1.253 網(wǎng)站整體規(guī)劃 Times New Roman1.254 網(wǎng)