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

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

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

3、指導(dǎo)教師評(píng)語(yǔ).專業(yè) .整理 .下載可編輯設(shè)計(jì)題目 ：響應(yīng)式網(wǎng)站項(xiàng)目 （遼寧陸海石油響應(yīng)式網(wǎng)站）指導(dǎo)參加王樂(lè)，牟敦現(xiàn) ，常發(fā)博 ，陳兵 ，王守姬廣永老師學(xué)生棟綜合運(yùn)用所學(xué)的HTML 及 CSS、 JavaScript 等知識(shí) ，使用 WEB 開(kāi)發(fā)工具編輯網(wǎng)設(shè)計(jì)頁(yè)， Photoshop或 FireWorks 處理圖形 ，制作出主題鮮明、結(jié)構(gòu)清晰 、圖文并茂 、目的具有專業(yè)水平的網(wǎng)站。1、確定所要制作網(wǎng)站的類型、主題、規(guī)模以及要使用的技術(shù)。2、規(guī)劃網(wǎng)站的欄目、風(fēng)格 ，畫(huà)出站點(diǎn)規(guī)劃層次圖，建立站點(diǎn)目錄。3、根據(jù)網(wǎng)站規(guī)劃，搜集 、整理相關(guān)素材。4、對(duì)網(wǎng)站用到的文本、圖片 、動(dòng)畫(huà)等多媒體素材進(jìn)行處理。設(shè)計(jì)

4、5、主頁(yè)版面內(nèi)容、結(jié)構(gòu)和鏈接設(shè)計(jì)要清晰，醒目 。內(nèi)容6、考慮頁(yè)面整體布局、視覺(jué)效果 、頁(yè)面尺寸和框架等因素，保持網(wǎng)站的整體設(shè)計(jì)風(fēng)格一致 。7、網(wǎng)站調(diào)試 ：網(wǎng)站各個(gè)頁(yè)面完成后，對(duì)站點(diǎn)進(jìn)行調(diào)試。8、網(wǎng)站發(fā)布 ：網(wǎng)站建設(shè)好后，發(fā)布到網(wǎng)站服務(wù)器。分組 ：每三至五人一組，自由組合 ；設(shè)計(jì)項(xiàng)目演示 ：以小組為單位，逐一演示本小組成員所做項(xiàng)目，并進(jìn)行項(xiàng)目講解；要求多人進(jìn)行共同合作開(kāi)發(fā)，在項(xiàng)目答辯的過(guò)程中要明確解說(shuō)每個(gè)人的分工任務(wù)，.專業(yè) .整理 .下載可編輯并且課程設(shè)計(jì)報(bào)告主要介紹自己所做內(nèi)容，要求實(shí)訓(xùn)中制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在 70% 以上 ，以完成各個(gè)方面的的訓(xùn)練。web 開(kāi)發(fā)技術(shù) 課程設(shè)計(jì)任務(wù)書(shū).

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

6、大得多；網(wǎng)頁(yè)也是公司對(duì)外的臉面 。WEB 站點(diǎn)就像一棟房子 ，它的每一個(gè)窗口都可以看成一扇門，人們可以沿著搜索引擎其他WEB 站點(diǎn)的鏈接 ，繞過(guò)主頁(yè)而進(jìn)入WEB 的深層 。.專業(yè) .整理 .下載可編輯2 設(shè)計(jì)要求1站點(diǎn)命名與結(jié)構(gòu)站點(diǎn)文件夾為遼寧陸海 。站點(diǎn)文件夾中所包含文件夾：img （Images ，存放圖片文件 ）， CSS（存放各部分的 css 文件）。站點(diǎn)文件夾中所包含文件： index.html （首頁(yè)）2. 網(wǎng)站制作網(wǎng)站技術(shù)要求頁(yè)面布局合理，色彩和諧 ，鏈接正確 ，圖文并茂 ，制作的網(wǎng)站和目標(biāo)網(wǎng)站相似度在70% 以上，以完成各個(gè)方面的的訓(xùn)練。3. 合作開(kāi)發(fā)分為 3 到 5 人的小組

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

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

9、代表前來(lái)我院參觀洽談今日，伊朗石油公司的客人來(lái)到我院進(jìn)行石油項(xiàng)目的洽談合作，院長(zhǎng)戴克文熱情的接見(jiàn)Read More.專業(yè) .整理 .下載可編輯 第三套甲板吊機(jī)完成起吊試驗(yàn)2016年 3 月 10 日，雖然寒潮再度來(lái)襲，但依舊沒(méi)有阻擋我院工作人員完成第三套甲板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è)效果圖.專業(yè) .整理 .下載可編輯5 設(shè)計(jì)總結(jié)1 設(shè)計(jì)目的 （一級(jí)標(biāo)題 ：黑體小三 ，1.5 倍行距 ，段后 1 行） ：段落起始空兩個(gè)字符，宋體，小四（英文、數(shù)字：Times New Roman ，小四）， 1.25 倍行距）2 設(shè)計(jì)要求 ，宋體，小四（英文、數(shù)字： Times New Roman ，小四）， 1.25 倍行距）3 網(wǎng)站整體規(guī)劃 ：段落起始空兩個(gè)字符，宋體，小四（英文、數(shù)字：TimesNew Roman ，小四）， 1.