web開發(fā)技術課程設計報告.doc

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

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

3、務書設計題目：響應式網站項目（遼寧陸海石油響應式網站）指導參加姬廣永王樂，牟敦現(xiàn)，常發(fā)博，陳兵，王守棟老師學生綜合運用所學的HTML 及 CSS、JavaScript 等知識，使用WEB 開發(fā)工具編輯網設計頁， Photoshop 或 FireWorks 處理圖形，制作出主題鮮明、結構清晰、圖文并茂、具目的有專業(yè)水平的網站。1、確定所要制作網站的類型、主題、規(guī)模以及要使用的技術。2、規(guī)劃網站的欄目、風格，畫出站點規(guī)劃層次圖，建立站點目錄。3、根據(jù)網站規(guī)劃，搜集、整理相關素材。設計4、對網站用到的文本、圖片、動畫等多媒體素材進行處理。內容5、主頁版面內容、結構和鏈接設計要清晰，醒目。設計要求6、

4、考慮頁面整體布局、視覺效果、頁面尺寸和框架等因素，保持網站的整體設計風格一致。7、網站調試：網站各個頁面完成后，對站點進行調試。8、網站發(fā)布：網站建設好后，發(fā)布到網站服務器。分組：每三至五人一組，自由組合；項目演示：以小組為單位，逐一演示本小組成員所做項目，并進行項目講解；多人進行共同合作開發(fā)，在項目答辯的過程中要明確解說每個人的分工任務，并且課程設計報告主要介紹自己所做內容，要求實訓中制作的網站和目標網站相似度在 70%以上，以完成各個方面的的訓練。頁眉內容共享知識分享快樂遼寧陸海石油響應式網站的設計目錄遼寧陸海石油響應式網站的設計. 21設計目的 .32設計要求 .43網站整體規(guī)劃 .54

5、網站詳細設計及實現(xiàn) .64.1負責區(qū)域 .錯誤！未定義書簽。4.2負責區(qū)域網頁代碼 .64.3負責區(qū)域 CSS代碼 .7頁眉內容共享知識分享快樂1 設計目的熟悉和掌握計算機網頁設計的基本技巧及網頁制作相關工具軟件等內容。培養(yǎng)我們利用計算機進行商務網頁設計的基本思路和應用開發(fā)能力，提高我們的計算機文化素質。網頁是世界上最有價值的不動產之一。人們在這個不足0.1 平米的空間內投資達數(shù)百萬美元。網頁對公司的影響比簡單的電子商務增收方法大得多；網頁也是公司對 外的臉面。 WEB 站點就像一棟房子，它的每一個窗口都可以看成一扇門，人們可以沿著搜索引擎其他 WEB 站點的鏈接，繞過主頁而進入WEB 的深層

6、。頁眉內容共享知識分享快樂2 設計要求1站點命名與結構站點文件夾為遼寧陸海。站點文件夾中所包含文件夾： img（ Images，存放圖片文件）， CSS（存放各部分的 css 文件）。站點文件夾中所包含文件：index.html（首頁）2. 網站制作網站技術要求頁面布局合理，色彩和諧，鏈接正確，圖文并茂，制作的網站和目標網站相似度在70% 以上，以完成各個方面的的訓練。3. 合作開發(fā)分為 3 到 5 人的小組，多人進行共同合作來完成此次實訓的任務。小組內部分工合作，每個人都要有自己負責的板塊。在競爭與合作中完成此次實訓的任務。頁眉內容共享知識分享快樂3 網站整體規(guī)劃1. 討論網站主題本次實訓要

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

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

9、d More第三套甲板吊機排線布繩工作順利完成2016年 3 月 3 日，第三套甲班吊機在總工程師張曉軍的帶領下，上午順利完成拼稀Read More頁眉內容共享知識分享快樂4.1.2 負責區(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;頁眉內容共享知識分享快樂.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;頁眉內容共享知識分享快樂.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;頁眉內容共享知識分享快樂4.2 網頁效果圖頁眉內容共享知識分享快樂5 設計總結1 設計目的（一級標題：黑體小三，1.5 倍行距，段后1 行） Times New Roman1.252 設計要求 Times New Roman1.253 網站整體規(guī)劃 Times New Roman1.254 網