網(wǎng)頁制作課程設(shè)計

1、網(wǎng)頁制作課程設(shè)計設(shè)計題目：職業(yè)技術(shù)學(xué)院學(xué)生會系另比職業(yè)技術(shù)學(xué)院班級：09計網(wǎng)學(xué)號:092114010028姓名:譙輝指導(dǎo)教師：徐老師董老師2011.7.4 、八 前言都是可以通過網(wǎng)絡(luò)來獲得。 但是什么為這所有的一切提供平臺的呢。 我們又 是通過什么來獲取這些消息的呢對就是網(wǎng)頁。 現(xiàn)如今，數(shù)以萬計的網(wǎng)站以網(wǎng) 頁的方式提供了豐富、 精彩的信息。 在人類社會進入信息時代的時候， 在網(wǎng)絡(luò)成 為通信的主要手段的時候， 在計算機網(wǎng)絡(luò)普及的今天， 網(wǎng)頁也在它自己的崗位對 于現(xiàn)在的社會， 科技的飛速發(fā)展已經(jīng)成為社會發(fā)展的標(biāo)志。 其中計算機的發(fā)展可 謂快中之快， 而在計算機的發(fā)展中計算機網(wǎng)絡(luò)的發(fā)展又是首當(dāng)其沖的

2、。 計算機網(wǎng) 絡(luò)從為我們所知， 到現(xiàn)在才經(jīng)歷的短短的幾年時間， 在這幾年中隨著計算機網(wǎng)絡(luò) 的廣泛應(yīng)用，特別是 Internet 的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手 段。不論是最新的新聞信息、新產(chǎn)品的出臺、新游戲的發(fā)布、最新的各種 IT 動 態(tài)，包括等候就業(yè)人才的個人簡歷， 我們上做出了突出的貢獻。 網(wǎng)頁是我們在網(wǎng) 絡(luò)上的“代言人”。我們將什么樣的信息傳達給瀏覽者，要講述什么樣的事情， 網(wǎng)頁在這里起著重要的作用。企業(yè)網(wǎng)站在企業(yè)的網(wǎng)絡(luò)營銷當(dāng)中占有及其重要的地位， 只要是涉及網(wǎng)絡(luò)宣傳 的企業(yè)，都應(yīng)該建立屬于自己的個性企業(yè)網(wǎng)站。 他不僅能夠讓企業(yè)在網(wǎng)絡(luò)上展示 自己的產(chǎn)品， 促進實際銷售的增長

3、， 更能夠通過一根網(wǎng)線， 向目標(biāo)客戶展示企業(yè) 自身的形象。對于企業(yè)網(wǎng)站設(shè)計的觀點， 偏重網(wǎng)站的形象設(shè)計， 即在功能務(wù)實、 體系 完善的情況下，重點結(jié)合企業(yè)理念打造網(wǎng)站的形象。 Logo 就能很好的表現(xiàn)企業(yè) 的形象。企業(yè)標(biāo)志(Logo)是指用于代表企業(yè)形象的獨特的、有意義的圖案，是企 業(yè)形象識別當(dāng)中最核心的環(huán)節(jié)， 可用于與企業(yè)形象相關(guān)的所有環(huán)節(jié)。 由于企業(yè)標(biāo) 志所處的特殊地位， 決定了其不能夠隨意更換， 因此能否設(shè)計一個有內(nèi)涵、 有文 化、便于識別的標(biāo)志，并建立相關(guān)的應(yīng)用系統(tǒng)，關(guān)乎到企業(yè)長遠的發(fā)展，不容小 視。建設(shè)網(wǎng)站的一般過程包括： 前期內(nèi)容確立、 網(wǎng)站架構(gòu)搭建、創(chuàng)意策劃、設(shè)計、 網(wǎng)站建設(shè)。網(wǎng)

4、站的功能版塊一般分為首頁（含引導(dǎo)頁） 、新聞部分、產(chǎn)品部分、 信息交流部分、定制系統(tǒng)、零散頁面等。根據(jù)不同的企業(yè)需求，各網(wǎng)站的功能版 塊數(shù)量、布局、結(jié)構(gòu)各異。要做一個有特色的網(wǎng)站，我們首先要熟練的掌握 Dreamweave、r Photoshop 和 flash 等多種制作網(wǎng)頁的工具，我們在掌握它的基礎(chǔ)上要善于合理的利用這些 工具，這樣我們相才能做出一個讓人看了后感到舒服的網(wǎng)頁。目錄一、實訓(xùn)任務(wù) 二、實習(xí)題目 三、實訓(xùn)目的 四、實訓(xùn)的要求 五、實訓(xùn)內(nèi)容 （一）選題的基本原則（二）效果圖 六、設(shè)計方案 七、網(wǎng)頁模版設(shè)計 九、分組實習(xí) 十、實習(xí)課時安排 十一、實習(xí)日志 總結(jié) 附錄 1.1.1.1.

5、2.2.3.3.5.5.5.6.8.9.、實訓(xùn)任務(wù)針對計算機各專業(yè)崗位技能要求， 進行網(wǎng)頁設(shè)計與制作項目工作， 培養(yǎng)學(xué)生計算機操作 的能力和用計算機設(shè)計網(wǎng)站的基本技能， 使學(xué)生具備分析問題、 用編程思維解決問題的能力， 達到計算機初級網(wǎng)頁設(shè)計員的水平， 使學(xué)生養(yǎng)成既善于獨立思考， 又樂于與人溝通、 具備團 隊合作意識的職業(yè)素質(zhì)。二、實習(xí)題目職業(yè)技術(shù)學(xué)院學(xué)生會三、實訓(xùn)目的課程設(shè)計總的目的在于加深對網(wǎng)頁設(shè)計與制作的基本知識的理解， 網(wǎng)頁設(shè)計與制作技能 綜合運用和提高， 通過真實工作任務(wù)， 是學(xué)生能設(shè)計出有一定水平的網(wǎng)頁并解決培養(yǎng)解決實 際問題的能力，掌握實際網(wǎng)頁設(shè)計與制作開發(fā)流程和開發(fā)方法。具體的

6、課程設(shè)計應(yīng)達到以下目的： 1提高學(xué)生在實際操作中收集信息，對信息進行價值判斷，進行信息整理、加工的能 力。2在實際的項目任務(wù)中培養(yǎng)網(wǎng)頁設(shè)計方面的素養(yǎng)。3在實際的項目任務(wù)中使學(xué)生網(wǎng)頁編程和制作的能力得到提高。4培養(yǎng)學(xué)生團隊協(xié)作和人際交往方面的能力。5. 培養(yǎng)相關(guān)知識和技能的綜合應(yīng)用能力。四、實訓(xùn)的要求網(wǎng)頁設(shè)計與制作 的課程設(shè)計課題選擇應(yīng)從專業(yè)網(wǎng)站建設(shè)的實際出發(fā)。 具體要求如下：1. 網(wǎng)站的選題可以是教師的項目，也可以是自選項目。2. 學(xué)生是課程設(shè)計環(huán)節(jié)的主體，教師只起輔助引導(dǎo)、協(xié)調(diào)作用。3. 站點設(shè)計合理、管理有序、無多余文件和文件夾、大小合適。首頁命名要規(guī)范，存放位置要正確，不可以是zhuye

7、.htm、main.htm、我的主頁.htm等。主頁文件名應(yīng)該使用 index 或 default 等。其他文件或文件名命名也要規(guī)范，不使用漢字或帶有空格的名稱。最好是符 合各種系統(tǒng)命名規(guī)則。4. 站點至少要有三層結(jié)構(gòu)，頁面數(shù)不得少于 8 頁；5. 自選主題，主題內(nèi)容要合法、健康、實用。6. 網(wǎng)頁要有版權(quán)說明；7. 要仔細考慮網(wǎng)站定位。分析面向的潛在訪客群體的需求特點，選擇內(nèi)容和版式。8. 網(wǎng)站主題突出、內(nèi)容豐富；9. 網(wǎng)站與網(wǎng)頁風(fēng)格應(yīng)該協(xié)調(diào)一致，網(wǎng)站結(jié)構(gòu)應(yīng)層次分明，內(nèi)容重點突出，頁面設(shè)計要 符合追求色彩的搭配、布局和合理性，以及要有一定的創(chuàng)意。10. 各頁面設(shè)計合理、美觀，有創(chuàng)意。不要太花哨

8、或太孩子氣。要有網(wǎng)頁平面設(shè)計過程，不要只是各種元素的隨意拼湊。 圖片動畫選用要適合主題， 不要在網(wǎng)頁中插入不相干的 圖片。 適用于各種顯示器的分辨率和顏色。 不要太寬， 否則顯示器分辨率小時會出現(xiàn)水平滾 動條。11. 各個頁面之間的鏈接要合理有效，路徑要正確（相對路徑）；12. 注意網(wǎng)站的大小，圖片保存格式和圖片大小要合適；13. 代碼結(jié)構(gòu)清晰，無垃圾代碼五、實訓(xùn)內(nèi)容（一）選題的基本原則（1）選題應(yīng)反映本專業(yè)的培養(yǎng)目標(biāo)，符合專業(yè)綜合訓(xùn)練的要求。（2）選題要有利于深化所學(xué)的專業(yè)知識和拓展所學(xué)的知識面。（3）選題的難易程度和工作量要適當(dāng)，保證在規(guī)定的時間內(nèi)，在教師的指導(dǎo)下，經(jīng)過 努力能夠完成。二）

9、效果圖成員介紹活動記實六、設(shè)計方案1. 該網(wǎng)站是一個關(guān)于學(xué)生會的網(wǎng)站， 版式主要為“頂部框架” 和“頂部和嵌套的左側(cè)框架” 該網(wǎng)站主要介紹學(xué)生會相關(guān)簡介、活動記實、光榮榜、部門簡介等內(nèi)容。2. 站點目錄結(jié)構(gòu)圖如下：3. 設(shè)計分工：黃婷婷：主頁設(shè)計、留言板設(shè)計、總體排版、協(xié)助所以組員完成素材收集處理及設(shè)計。 張清合：子網(wǎng)頁一和子網(wǎng)頁二設(shè)計及相關(guān)資料收集處理。陳偉：子網(wǎng)頁三設(shè)計及素材收集整理。譙輝：子網(wǎng)頁四和子網(wǎng)頁五設(shè)計及協(xié)助素材收集整理。建站成員黃婷婷(092114010015)組長)陳偉(092114010003)張清合(092114010051)譙輝(09211401002七、網(wǎng)頁模版設(shè)計(

10、1) 重要信息盡可能出現(xiàn)在用戶最關(guān)注的位置；(2) 網(wǎng)頁寬度定位適應(yīng)當(dāng)前主流屏幕分辨率模式；(3 )保持整站CSS風(fēng)格一致；( 4 )超級鏈接有下劃線或顏色的明顯指示；( 5)整個網(wǎng)站中在新窗口打開或原窗口打開網(wǎng)頁的規(guī)則一致；( 6 )網(wǎng)站首頁字節(jié)數(shù)不宜過大；八、必須克服的問題( 1 )網(wǎng)站規(guī)劃和欄目設(shè)置要合理：主要表現(xiàn)在欄目設(shè)置不應(yīng)有重疊、交叉、或者欄目名稱 意義不明確，容易造成混淆，使得用戶難以發(fā)現(xiàn)需要的信息，避免欄目過于繁多和雜 亂、網(wǎng)站導(dǎo)航系統(tǒng)混亂；( 2)網(wǎng)頁信息量足夠：包括兩種情況：一種頁面上的內(nèi)容，或者將本來一個網(wǎng)頁可以發(fā)布 的內(nèi)容不可分為多個網(wǎng)頁，而且各網(wǎng)頁之間必須有相互鏈接，

11、不需要再次點擊主頁； 另一方面是盡管內(nèi)容總量不少，但有用的信息少，籠統(tǒng)介紹的內(nèi)容多；( 3)欄目層次過深。重要的信息應(yīng)該出現(xiàn)在最容易被用戶發(fā)現(xiàn)的位置，應(yīng)盡可能縮短信息 傳遞的渠道，以使企業(yè)信息更加有效地傳遞給用戶；( 4 )網(wǎng)站有利于促銷：通過網(wǎng)站向訪問者展示產(chǎn)品、對銷售提供支持，有多種具體表現(xiàn)方 式，如主要頁面的產(chǎn)品圖片、介紹、通過頁面廣告較好體現(xiàn)出企 業(yè)形象或者新產(chǎn)品 信息、列出銷售機構(gòu)聯(lián)系方式、銷售網(wǎng)店信息等，或者具有積累內(nèi)部網(wǎng)絡(luò)營銷資源和 拓展外部網(wǎng)絡(luò)營銷資源的作用 。九、分組實習(xí)1) 以小組為單位完成， 1 個主頁面，至少 7 個子頁面2) 每個小組所有同學(xué)討論后，推薦一名同學(xué)為該組

12、組長3) 組長職責(zé)：僅在本次設(shè)計過程中起組織、統(tǒng)領(lǐng)、協(xié)調(diào)作業(yè)4) 書寫完成計劃書由組長牽頭，根據(jù)本組同學(xué)的情況進行合理的分工十、實習(xí)課時安排1. 設(shè)計方案：(從第一天到第二天，最后一節(jié)課驗收)(1) 潛在訪客群體的需求特點：版式和內(nèi)容的需求；(2) 站點目錄結(jié)構(gòu)圖：(3) 色彩方案：主色調(diào)、次色調(diào)；(4) 布局方案：導(dǎo)航和其他網(wǎng)頁內(nèi)容的位置；(5) 平面設(shè)計圖：使用 Fireworks 繪制網(wǎng)頁平面設(shè)計圖；2. 制作網(wǎng)頁主頁： (從第三天到第四天，最后一節(jié)課驗收，可以提前驗收)(1) 切割圖片；(2) 制作動畫；(3) 錄入文字；(4) 制作網(wǎng)頁；3. 制作其他頁，完善優(yōu)化網(wǎng)站： (第五天，最

13、后一節(jié)課驗收，可以提前驗收)(1) 優(yōu)化代碼(2) 優(yōu)化圖片(3) 制作留言板(4) 鏈接各網(wǎng)頁4. 完善優(yōu)化網(wǎng)站： (第六天，最后一節(jié)課驗收，可以提前驗收)(1) 測試網(wǎng)站(2) 優(yōu)化網(wǎng)站(3) 制作動態(tài)效果5. 撰寫課實習(xí)報告。 (第 10 天，最后一節(jié)課驗收)實習(xí)報告必須認真撰寫并打印成稿，每人一份，嚴格按規(guī)范要求，電子檔要交。一、實習(xí)日志7月 4 日 星期一 今天是第一天實習(xí)，這個星期的任務(wù)是制作網(wǎng)頁。制作網(wǎng)頁是這個學(xué)期才新開設(shè)的課 程，雖然不是很陌生，但是對于整個網(wǎng)站的設(shè)計， 很多網(wǎng)頁中的技巧和特效還是很陌生。我 們才走入這門課， 需要更多的時間去查閱知識和積累網(wǎng)頁的感想。 今天的任

14、務(wù)就是分組， 然 后大家團結(jié)合作制做出精美的網(wǎng)站頁面。 在分組的問題上有些困難是大家自由組合， 弄了半 天才找到合適的組員。 我們不僅要自己做自己的網(wǎng)頁， 還得尋找合適的項目， 制定詳細的計 劃實施。 在分工上我們也很快達到了一致， 分配好了每個人的任務(wù)。 然后就開始出去尋找需 要的素材，并且拍攝回來制作。7月 5 日 星期二今天是實習(xí)的第二天， 今天我們的任務(wù)就是學(xué)整個實習(xí)計劃， 然后把實行計劃交給老師， 然后收集素材，整理素材。7月 6 日 星期三 我在網(wǎng)上參考別人的網(wǎng)站，感覺好美。但是自己無能為力的樣子，比如 Photoshop 來PS圖片真的很美，用flash來制作動畫也真的很好看，用

15、代碼來編寫網(wǎng)頁等等，我都無能為 力。因為我不會這些，感覺真的有些失落的樣子。是自己學(xué)的太少了，只是初步的學(xué)者，如 果自己想做出漂亮的網(wǎng)頁出來， 還得多了解了解， 多學(xué)習(xí)不是壞事。 我的網(wǎng)頁都還沒著手做 呢，但是內(nèi)容還是收好了些。7月 7 日 星期四今天， 我萬分焦急， 因為時間已經(jīng)過去了好幾天， 我的網(wǎng)頁還沒有開始做， 最后總結(jié)也雖然感覺不的不開始做了，在我不斷的努力下，我花了一天的時間，把關(guān)于我們做出來了， 很累，但是成功后的感覺又讓我十分高興，一天又這樣過去了。7月 8 日 星期五今天又是美好的一天，我今天的任務(wù)就是，修改關(guān)于我們和活動記實的構(gòu)思和做一部分 活動記實，一天就這樣過去了。7

16、月 11 星期一今天我依舊按時來到機房， 我又開始了我一天的忙碌， 在我堅持了一天后， 我做的活動記實終于做玩了，做完后我心里十分的高興。7 月 12 星期二今天我們的實習(xí)已經(jīng)是倒記實了， 我今天的任務(wù)主要是寫實習(xí)報告， 通過我一天的奮斗的我實習(xí)報告終于做完了，終于我們的實習(xí)已經(jīng)大功告成了。7月 13 星期三呵呵，今天是最后一天了，就是叫實習(xí)報告了?？偨Y(jié)通過本次實訓(xùn)，我收獲頗豐，學(xué)到了很多知識，特別是提高了綜合分析應(yīng)用的能力。實訓(xùn)過程是繁瑣的， 但同學(xué)們都表現(xiàn)得很積極，不怕課程難， 相互幫助一起分析。 很多 同學(xué)甚至吃了飯就一頭扎在實訓(xùn)中。 任課老師也非常認真負責(zé)， 細心指導(dǎo)， 一點一點解答同

17、 學(xué)們的疑惑，直到同學(xué)們理解了為止。在實訓(xùn)中，分析、討論、演算，機房里充滿了濃濃的 學(xué)習(xí)氣氛。此次實訓(xùn)培養(yǎng)了同學(xué)們耐心的工作作風(fēng)， 增強了同學(xué)們的合作意識， 提高了大家的應(yīng)用 分析能力。按照實訓(xùn)計劃安排與目的要求， Dreamweaver 與 Photoshop 我還欠缺的技能與方法， 而 且，在今后的生活中我更需要努力練習(xí)學(xué)習(xí)使自己趨于完善。與平時上課相比， 我認為本次實訓(xùn)我老師與同學(xué)真正融合在一起， 同學(xué)們不懂就問， 老 師也耐心講解， 實在讓我感動。 通過本次實訓(xùn)，我使自己許多不足之處得到了彌補，真正收 獲到了自己想要學(xué)習(xí)的東西?？偨Y(jié)這次實訓(xùn)， 這次我們組職業(yè)技術(shù)學(xué)院學(xué)生會網(wǎng)頁能這么順利

18、的完成， 離不開老師的 幫助和小組成員的努力。 雖然這次實訓(xùn)我們小組只有 4 人，但是我們是一個有效率、 有組織、 有團隊精神的小組， 有效率在于小組制作網(wǎng)頁中分工明確、 討論有目的； 有組織在于小組成 員能按時、 有質(zhì)量的完成自己的分工任務(wù)， 值得一提的是這次網(wǎng)頁開發(fā)的大部分時間在實訓(xùn) 教室而我們小組成員還從未擅自曠課、 上課遲到、 早退等違紀行為； 有團隊精神在于我們小 組實訓(xùn)過程中的共進退， 從不因為自己分工任務(wù)提前完成而拉下其他組員， 我們意識到小組 是一個有組織、 有記錄、 有共同目的的集體而不是一個由分散的個人組成的團體， 在這次實 訓(xùn)中之所以提出小組分工這是鍛煉小組組員的個人能力培養(yǎng)， 而幫助有困難的組員這充分培 養(yǎng)了組員之間的默契和團隊協(xié)作能力。我相信在今后的學(xué)習(xí)與生活中， 我們會做的更好。 還有對于一直陪伴我們的老師， 我問 一些最基本的常識題， 他不但沒有小看我， 反而耐心為我講解， 我對老師的崇敬之情難于言 表。我會繼續(xù)努力，相信一定我們的未來會更好。這次是我們這學(xué)期的第二個實訓(xùn)， 也是自己做投入、 最用心的一次實訓(xùn)。 此次網(wǎng)頁實訓(xùn) 是以掌握制作網(wǎng)頁技能實訓(xùn)技能為