web開發(fā)技術(shù)課程設(shè)計報告

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

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

3、指導(dǎo)教師評語.專業(yè) .整理 .下載可編輯設(shè)計題目 ：響應(yīng)式網(wǎng)站項目 （遼寧陸海石油響應(yīng)式網(wǎng)站）指導(dǎo)參加王樂，牟敦現(xiàn) ，常發(fā)博 ，陳兵 ，王守姬廣永老師學(xué)生棟綜合運(yùn)用所學(xué)的HTML 及 CSS、 JavaScript 等知識 ，使用 WEB 開發(fā)工具編輯網(wǎng)設(shè)計頁， 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)行處理。設(shè)計

4、5、主頁版面內(nèi)容、結(jié)構(gòu)和鏈接設(shè)計要清晰，醒目 。內(nèi)容6、考慮頁面整體布局、視覺效果 、頁面尺寸和框架等因素，保持網(wǎng)站的整體設(shè)計風(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ìn)行項目講解；要求多人進(jìn)行共同合作開發(fā)，在項目答辯的過程中要明確解說每個人的分工任務(wù)，.專業(yè) .整理 .下載可編輯并且課程設(shè)計報告主要介紹自己所做內(nèi)容，要求實(shí)訓(xùn)中制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在 70% 以上 ，以完成各個方面的的訓(xùn)練。web 開發(fā)技術(shù) 課程設(shè)計任務(wù)書.

5、專業(yè) .整理 .下載可編輯遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計目錄遼寧陸海石油響應(yīng)式網(wǎng)站的設(shè)計31 設(shè)計目的42 設(shè)計要求63 網(wǎng)站整體規(guī)劃74 網(wǎng)站詳細(xì)設(shè)計及實(shí)現(xiàn)94.1 負(fù)責(zé)區(qū)域 .錯誤！未定義書簽。4.2 負(fù)責(zé)區(qū)域網(wǎng)頁代碼94.3 負(fù)責(zé)區(qū)域 CSS代碼10.專業(yè) .整理 .下載可編輯1 設(shè)計目的熟悉和掌握計算機(jī)網(wǎng)頁設(shè)計的基本技巧及網(wǎng)頁制作相關(guān)工具軟件等內(nèi)容。培養(yǎng)我們利用計算機(jī)進(jìn)行商務(wù)網(wǎng)頁設(shè)計的基本思路和應(yīng)用開發(fā)能力，提高我們的計算機(jī)文化.專業(yè) .整理 .下載可編輯素質(zhì)。網(wǎng)頁是世界上最有價值的不動產(chǎn)之一。人們在這個不足0.1 平米的空間內(nèi)投資達(dá)數(shù)百萬美元 。網(wǎng)頁對公司的影響比簡單的電子商務(wù)增收方法

6、大得多；網(wǎng)頁也是公司對外的臉面 。WEB 站點(diǎn)就像一棟房子 ，它的每一個窗口都可以看成一扇門，人們可以沿著搜索引擎其他WEB 站點(diǎn)的鏈接 ，繞過主頁而進(jìn)入WEB 的深層 。.專業(yè) .整理 .下載可編輯2 設(shè)計要求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 人的小組

7、 ，多人進(jìn)行共同合作來完成此次實(shí)訓(xùn)的任務(wù)。小組內(nèi)部分工合作 ，每個人都要有自己負(fù)責(zé)的板塊。在競爭與合作中完成此次實(shí)訓(xùn)的任務(wù)。.專業(yè) .整理 .下載可編輯3 網(wǎng)站整體規(guī)劃1. 討論網(wǎng)站主題本次實(shí)訓(xùn)要做的網(wǎng)站是遼寧陸海石油裝備研究院有限公司的首頁，其中的各種動畫 、過渡等都需要做出來 。2. 確定欄目和板塊1）首先要考慮整個網(wǎng)頁的長和寬 ，以及長度和寬度之間的比例 。2）其次就應(yīng)該考慮導(dǎo)航條的設(shè)置了 。.專業(yè) .整理 .下載可編輯3）正文的框架設(shè)置（橫向因素和縱向因素交錯）在仔細(xì)研究過原版之后 ，再結(jié)合我們自己的想法，在草紙上畫出了大體的欄目和板塊 。3. 小組分工合作將整個頁面分為三部分 ，分別

8、是頭部 （一人負(fù)責(zé) ）、尾部（一人負(fù)責(zé) ）和主體內(nèi)容 （三人負(fù)責(zé) ）。我主要負(fù)責(zé)的是主題內(nèi)容中最新動態(tài)區(qū)域。4. 使用的工具HTML 編輯軟件 ：主要是 HBuilder ，DreamWeaver 作輔助 。瀏覽器：以使用谷歌瀏覽器 Chrome 瀏覽為主 。輔助工具 ：屏幕截圖工具 FSCapture，CSS、 w3c 標(biāo)準(zhǔn) html5 手冊5. 網(wǎng)站整體布局框圖如下 ：首頁頭部產(chǎn)品服成功案最新動尾部header務(wù)例態(tài)footerheader搜導(dǎo)橫變定蒙定放定信版索航幅換位版位大位息權(quán)框.專業(yè) .整理 .下載可編輯4 網(wǎng)站詳細(xì)設(shè)計及實(shí)現(xiàn)4.1 負(fù)責(zé)區(qū)域代碼代碼最新動態(tài) News 伊朗石油公司

9、代表前來我院參觀洽談今日，伊朗石油公司的客人來到我院進(jìn)行石油項目的洽談合作，院長戴克文熱情的接見Read More.專業(yè) .整理 .下載可編輯 第三套甲板吊機(jī)完成起吊試驗2016年 3 月 10 日，雖然寒潮再度來襲，但依舊沒有阻擋我院工作人員完成第三套甲板Read More 第三套甲板吊機(jī)排線布繩工作順利完成2016年 3 月 3 日，第三套甲班吊機(jī)在總工程師張曉軍的帶領(lǐng)下，上午順利完成拼稀Read More負(fù)責(zé)區(qū)域 CSS代碼.news.專業(yè) .整理 .下載可編輯width: 100%;height: 550px;.news .xin1width: 136px;height: 50px;f

10、ont-size: 32px;font-weight: 900;position: relative;top: 45px;left: 50%;margin-left: -78px;.news .xin2color: #2A7EDA;width: 70px;height: 15px;color:#1EA8EA;font-size: 28px;position: relative;left:50%;top: 30px;.專業(yè) .整理 .下載可編輯margin-left: -35px;.news .dongmargin: 0 auto;position: relative;top: 40px;.ne

11、ws ul liwidth:100%;height: 200px;overflow: hidden;/*display: block;*/.news ul lilist-style: none;float: left;.news .dong .kuaiwidth: 28%;height: 350px;.專業(yè) .整理 .下載可編輯border: 1px solid #C3C3C3;padding: 10px;.news .dong.kuai .picwidth: 100%;height: 50%;overflow: hidden;.news .dong .pic imgwidth: 100%;h

12、eight: 100%;transition: all2s ease;.news .dongli:hover imgtransform: scale(1.3);.readwidth:38% ;height: 10%;margin: 0 auto;color: #F86C0F;.專業(yè) .整理 .下載可編輯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;.專業(yè) .整理 .下載可編輯4.2 網(wǎng)頁效果圖.專業(yè) .整理 .下載可編輯5 設(shè)計總結(jié)1 設(shè)計目的 （一級標(biāo)題 ：黑體小三 ，1.5 倍行距 ，段后 1 行） ：段落起始空兩個字符，宋體，小四（英文、數(shù)字：Times New Roman ，小四）， 1.25 倍行距）2 設(shè)計要求 ，宋體，小四（英文、數(shù)字： Times New Roman ，小四）， 1.25 倍行距）3 網(wǎng)站整體規(guī)劃 ：段落起始空兩個字符，宋體，小四（英文、數(shù)字：TimesNew Roman ，小四）， 1.