第一篇：靜態(tài)網(wǎng)頁實訓(xùn)報告

計算機軟件學(xué)院

實訓(xùn)報告

——Web靜態(tài)主題網(wǎng)站設(shè)計

姓名：夏前偉胡維國海繼昌陳佑宏 學(xué)號：09

04

03

02 專業(yè)：電子商務(wù) 班級：電商1413 時間：2016.6.20 任課教師：梁菊華

目錄

前言..................................................................................................................................................2 實訓(xùn)意義...........................................................................................................................................3

本實訓(xùn)目的：...........................................................................................................................3 綜合實訓(xùn)的目的：...................................................................................................................3 對個人的要求...................................................................................................................................4

具體要求如下：.......................................................................................................................4 內(nèi)容的設(shè)計及制作...........................................................................................................................5

一、策劃階段：.......................................................................................................................5

二、設(shè)計階段網(wǎng)站形象設(shè)計：...............................................................................................5 清晰性：...................................................................................................................................5 創(chuàng)造性：...................................................................................................................................5 網(wǎng)站技術(shù)因素考慮：...............................................................................................................5 頁面設(shè)計...........................................................................................................................................6

頁面的平鋪展示：...................................................................................................................6 LOGO：.....................................................................................................................................6 字體圖片背景的搭配：...........................................................................................................6 導(dǎo)航：.......................................................................................................................................6 其他：.......................................................................................................................................6 主頁和部分頁面展示.......................................................................................................................7 部分代碼.........................................................................................................................................12 要求................................................................................................................................................14 主頁的要求.............................................................................................................................14 PRODCT的要求......................................................................................................................14 ABOUT ME的要求..................................................................................................................14 測試站點.........................................................................................................................................15 后期維護：.............................................................................................................................15 功能模塊：.............................................................................................................................15 參考文獻.........................................................................................................................................16 個人小結(jié).........................................................................................................................................17 夏前偉.....................................................................................................................................19 胡維國.....................................................................................................................................22 海繼昌.....................................................................................................................................24 陳佑宏.....................................................................................................................................27

前言

隨著時代的發(fā)展，網(wǎng)站建設(shè)越來越接近于一門藝術(shù)而不僅僅是一項技術(shù)。網(wǎng)頁的藝術(shù)設(shè)計，日益被網(wǎng)站建設(shè)者所注重。在目前國內(nèi)對此領(lǐng)域研究甚少的情況下，將網(wǎng)頁藝術(shù)設(shè)計與其他藝術(shù)設(shè)計形式進行比較，嘗試從網(wǎng)頁藝術(shù)設(shè)計的內(nèi)容、原則和特點等三個方面，對這個新的藝術(shù)設(shè)計領(lǐng)域進行初步的歸納總結(jié)和理論探討。作者認(rèn)為網(wǎng)頁藝術(shù)設(shè)計是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)頁藝術(shù)設(shè)計包含視聽元素與版式設(shè)計兩項內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強調(diào)整體為設(shè)計原則；具有交互性與持續(xù)性、多維性、綜合性、版式的不可控性、藝術(shù)與技術(shù)結(jié)合的緊密性等五個特點。在明確了網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達網(wǎng)站主題這一觀點。網(wǎng)頁藝術(shù)設(shè)計是伴隨著計算機互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽設(shè)計新課題，是網(wǎng)頁設(shè)計者以所處時代所能獲取的技術(shù)和藝術(shù)經(jīng)驗為基礎(chǔ)，依照設(shè)計目的和要求自覺地對網(wǎng)頁的構(gòu)成元素進行藝術(shù)規(guī)劃的創(chuàng)造性思維活動，必然要成為設(shè)計藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過是關(guān)于網(wǎng)頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術(shù)

實訓(xùn)意義

本實訓(xùn)目的：

通過本次實習(xí)對自主網(wǎng)站的設(shè)計，使我們熟練應(yīng)用HTML標(biāo)記語言設(shè)計制作網(wǎng)頁、熟練應(yīng)用Dreamveaver網(wǎng)頁設(shè)計軟件，使我們對html5+css3所學(xué)的內(nèi)容有一個系統(tǒng)的理解和掌握。在制作過程中，主要掌握對網(wǎng)頁的布局、色彩的搭配、框架的應(yīng)用、層的運用、行為的實現(xiàn)、表單的使用、模板和庫的應(yīng)用等，完成作品。

綜合實訓(xùn)的目的：

《Web靜態(tài)主題網(wǎng)站設(shè)計》主要目的是讓我們通過這門實踐課程的學(xué)習(xí)了解和掌握網(wǎng)頁設(shè)計的基本方法，通過不斷上機實習(xí)訓(xùn)練達到解決實際的問題。因此，在本學(xué)期特設(shè)置此課程設(shè)計，集中一段時間使學(xué)生綜合運用所學(xué)習(xí)的網(wǎng)頁制作知識及以前所學(xué)習(xí)的計算機方面的知識，按照網(wǎng)站制作的流程，完成一個相對具體、綜合的網(wǎng)站，全面鞏固學(xué)生的知識，培養(yǎng)學(xué)生解決實際問題的能力，從而達到學(xué)以致用的。

對個人的要求

我們每個人都應(yīng)通過本次實訓(xùn)項目課程的學(xué)習(xí)，培養(yǎng)自己系統(tǒng)、完整、具體地完成網(wǎng)站設(shè)計所需的工作能力，通過信息收集處理、方案決策、制定行動計劃、實施計劃任務(wù)和自我檢查評價的能力訓(xùn)練，鍛煉學(xué)生在職場應(yīng)有的工作能力。每個學(xué)生經(jīng)歷完整個網(wǎng)站設(shè)計開發(fā)的訓(xùn)練，將掌握完成實際網(wǎng)站設(shè)計應(yīng)具備的核心能力和關(guān)鍵能力。

具體要求如下：

1.充分了解本指導(dǎo)手冊規(guī)定擬填寫的各項網(wǎng)站設(shè)計各階段的作業(yè)文件與作業(yè)記錄。

2.充分了解自己的學(xué)習(xí)能力，針對擬完成網(wǎng)站的設(shè)計功能要求與規(guī)范，查閱資料，了解相關(guān)網(wǎng)站設(shè)計的技術(shù)情況。

3.在學(xué)習(xí)過程中，認(rèn)真負(fù)責(zé)，在關(guān)鍵問題與環(huán)節(jié)上下功夫，充分發(fā)揮自己的主動性、創(chuàng)造性來解決技術(shù)上與工作中的問題。4.認(rèn)真填寫與撰寫從資訊、方案、計劃、檢查到評估各階段按規(guī)范要求完成的相關(guān)作業(yè)文件與工作記錄，并學(xué)會根據(jù)學(xué)習(xí)與工作過程的作業(yè)文件和記錄及時反省與總結(jié)。

內(nèi)容的設(shè)計及制作

一、策劃階段：

一階段的主要任務(wù)是收集、研究和分析用戶需求，討論Web內(nèi)容，制定計劃。

二、設(shè)計階段網(wǎng)站形象設(shè)計：

主要包括設(shè)計網(wǎng)站的標(biāo)志（logo），設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩，設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體。網(wǎng)站主題及風(fēng)格設(shè)計，從主題策劃到網(wǎng)站風(fēng)格創(chuàng)意等內(nèi)容。

網(wǎng)站內(nèi)容設(shè)計：

清晰性：網(wǎng)站內(nèi)容必須簡潔明了，直奔主題，非常有效地講清楚你想說的內(nèi)容。

創(chuàng)造性：網(wǎng)站觀點會使訪問者產(chǎn)生共鳴，發(fā)出認(rèn)同嗎？這可以是訪問者判斷一個公司是否有實力，從而影響到購買動機的重要因素。突出三個重點：突出你的產(chǎn)品的優(yōu)點和與眾不同的特色；突出幫助訪問者辨別、判斷同類產(chǎn)品優(yōu)劣方面的內(nèi)容，出內(nèi)容的無庸置疑的正確性。

網(wǎng)站技術(shù)因素考慮：

瀏覽器腳本兼容性。面對屏幕分辨率的適應(yīng)。網(wǎng)是否需要交互操作。

頁面設(shè)計

頁面的平鋪展示：

主要的物件有：導(dǎo)航欄、LOGO、Banner、按鈕、圖片、文字。

LOGO：

logo是每個網(wǎng)站多要有的，他是網(wǎng)站為了給大家一個比較直觀的信息的表達工具。

LOGO的位置通常在頁面的左上角。這個地方最明顯和直觀，可以第一時間給人于默化的效果。

字體圖片背景的搭配：

體圖片的搭配要直觀，盡量不要撞色太嚴(yán)重，要考慮字跡清楚，色彩簡單一些，不要超過四種。頁面的分割要顯見。

導(dǎo)航：

此次選用的是簡單直觀的靜態(tài)導(dǎo)航，HOME，PRODUCT，SERVE，ABOUT ME。子網(wǎng)頁的設(shè)計：為了保證頁面的統(tǒng)一性和美觀，子網(wǎng)頁的統(tǒng)一性也是很有必要的，簡單的布局就是內(nèi)容的明了直接的展示。

其他：

1.有共性，才有統(tǒng)一，有細(xì)節(jié)區(qū)別，就有層次。

2.防止設(shè)計與實現(xiàn)過程中的偏差，不要定死具體要放多少條信息。3.設(shè)計的各部分，要配合整體風(fēng)格，夸張一點好像。4.不僅頁面上各項設(shè)計要統(tǒng)一，而且網(wǎng)站的各級別頁面也要統(tǒng)一。5.保持頁面的透氣性。6.符合人類的審美設(shè)計！

主頁和部分頁面展示

主頁我們采用的是簡約商務(wù)的風(fēng)格。

讓人一看就很有質(zhì)感的，交代了網(wǎng)頁的大概內(nèi)容以及整體風(fēng)格還有網(wǎng)站的名字，讓人一眼明了。

導(dǎo)航欄采用文字及背景的漸變，簡約大氣不失風(fēng)格。

PRODUCT頁面的整體布局采用橫向排序，為了方便以后增加產(chǎn)品而留有增加的空間，簡約的Flash動畫也進一步體現(xiàn)出網(wǎng)站整體的品味！

簡單的一個小動畫起到了裝飾頁面和分割頁面的作用。

為了保證每個字頁面的統(tǒng)一性，而特意設(shè)計的頁面，文字的清晰介紹以及高清的圖片查看功能，而取消返回首頁這個選項而設(shè)置在巧妙的位置也是一成功力做！

SERVE頁面提供所需的一些服務(wù)，一些需要的資源，以及售后的聯(lián)系，還有物流的查詢。

ABOUT ME頁面介紹了我們是一個怎樣的團隊，不做沒理想的咸魚，這藝網(wǎng)是一個藝術(shù)與交流的聚集地，論壇功能正在籌建中，你可以在下方選擇加入我們這個有理想的團隊，來一起質(zhì)疑那些嘲笑的眼光。

這是藝術(shù)！

部分代碼

不是每朵花都可以綻放！

頁面布局采用css樣式表的類樣式和ID樣式，方便以后的更改以及養(yǎng)成自己的一個習(xí)慣。

Flash插入的代碼。

字體的整體美觀度，以及排版的統(tǒng)一要求。

整個網(wǎng)站唯一的一處表格和層的布局。

要求

主頁的要求

對于商務(wù)方面，系統(tǒng)要求運行的工作環(huán)境穩(wěn)定，易于操作，界面美觀大方，對于前臺展示界面要求系統(tǒng)便于維護，安全可靠，對于廣大客戶所要執(zhí)行的操作簡單易懂，遠(yuǎn)程訪問速度較快，界面友好美觀，有基本的錯誤提醒功能，遠(yuǎn)程操作數(shù)據(jù)庫正確，要求和客戶有一定的互動性，在主頁上直觀的就可以查看瀏覽者所想要了解的東西。

PRODCT的要求

簡單明了直觀 獨特的見解 色彩的搭配

ABOUT ME的要求

清晰的介紹自己的團隊，團隊的風(fēng)格以及網(wǎng)站的規(guī)劃和要求。

測試站點

站點各個方面無問題，經(jīng)測試上傳到網(wǎng)頁，網(wǎng)址為left887.ihttpd.com 后期維護：

布局的要求完全為了考慮后期的增刪改查。

功能模塊：

后期可以實現(xiàn)數(shù)據(jù)庫的鏈接一些交互式的功能。

參考文獻

百度文庫文獻系列

個人小結(jié)

在這次實訓(xùn)中我學(xué)會了網(wǎng)頁設(shè)計的一般步驟以及所需的軟件和一些沒有實踐過的知識，開闊了自己的見解，這對以后的設(shè)計生涯是絕對有幫助的，以后想到當(dāng)時自己的無從下手到最后的相互討論得出一個讓人滿意的布局，這個過程是值得記住的。

因特網(wǎng)上的網(wǎng)頁主體不勝枚舉。主題的選擇取決于網(wǎng)頁的內(nèi)容，人們一般不會去選擇自己感到陌生的主題，而是選擇某一個自己最感興趣，或者是非常熟悉的內(nèi)容來作為網(wǎng)頁的主題，當(dāng)然專業(yè)的網(wǎng)頁制作公司除外。所以我們決定制作一個簡單的商務(wù)類型的網(wǎng)站，麻雀雖小五臟俱全，布局充分考慮了以后的天劫和修改。

制作一個網(wǎng)站的開始就是站點站點的結(jié)構(gòu)好比是建造高樓大廈之前的圖紙設(shè)計。規(guī)劃占點就是將站點中每一個網(wǎng)頁用樹型結(jié)構(gòu)列出來，網(wǎng)頁的內(nèi)容可以省略，只要大體說明其要展示的內(nèi)胎即可。

規(guī)劃好站點的總體結(jié)構(gòu)以后，還應(yīng)該對站點中每一頁的欄目、布局等作更進一步的設(shè)計。

收集和加工素材

如果說站點是一棟高樓大廈，那么素材就是建造大廈的材料。建造大廈的材料有些可以直接拿來用，而有些材料需要經(jīng)過加工或者整合以后才能使用。同樣道理，為制作網(wǎng)頁而收集的素材有些可以直接使用有些卻要借助其他軟件加工處理后才能適合網(wǎng)頁內(nèi)容的需要。

素才的內(nèi)容主要有文字、圖片、動畫、聲音、視頻、程序等。江

收集到的素材分門別類存放起來，需要時可以很快找到。

制作網(wǎng)頁

在完成了設(shè)計后，實際上，制作網(wǎng)頁就是將收集和加工后的素材添加到事先規(guī)劃設(shè)計好的網(wǎng)頁中去，或者說制作網(wǎng)頁就是將文字、圖片、動畫、聲音、視頻、程序等素材按照設(shè)計的要求合成起來。在原有的設(shè)計基礎(chǔ)上可以進行增刪改（以不破壞為原則），更好的應(yīng)用布局和所學(xué)工具對頁面的優(yōu)化。

制作完網(wǎng)頁階段之后，應(yīng)該對網(wǎng)頁做全面的檢測，包括檢查網(wǎng)頁內(nèi)容的科學(xué)性、版面編排的合理性、超鏈接的正確性以及對網(wǎng)頁的內(nèi)容作適當(dāng)?shù)脑鰷p等。一個有錯誤內(nèi)容的網(wǎng)頁時瀏覽者所不能容忍的，一個編排布局混亂的網(wǎng)頁不會引起瀏覽者多大的興趣，一個有超鏈接錯誤的網(wǎng)頁則會給瀏覽者帶來很多麻煩。

制作網(wǎng)頁的目的是要將網(wǎng)頁發(fā)布到網(wǎng)上，讓更多的瀏覽者來訪問發(fā)布的站點，因此發(fā)布網(wǎng)頁這一環(huán)節(jié)必不可少，否則失去了制作網(wǎng)頁的意義。

綜上所述，要制作出富于創(chuàng)意的網(wǎng)頁，設(shè)計階段非常重要。事實上，一個網(wǎng)站從設(shè)計到制作，再到發(fā)布的整個過程中，大部分的精力和時間花在設(shè)計階段。即使在制作階段，很多時候也會根據(jù)實際需要對原有的設(shè)計做一些修改但是如果說是對設(shè)計有什么不滿的地方那就只可以說道不同。

我覺得實訓(xùn)就是對所學(xué)知識的一種檢驗，網(wǎng)頁設(shè)計所檢驗的并不只是工具的應(yīng)用更多的是自己的想法獨特的想法，如果停留在那些四四方方的布局毫無新意的頁面就失去了該有的意義！

夏前偉

1402713109

通過這次實訓(xùn)，我收獲了很多，一方面學(xué)習(xí)到了許多以前沒學(xué)過的專業(yè)知識與知識的應(yīng)用，另一方面還提高了自己動手做項目的能力。本次實訓(xùn)，是對我能力的進一步鍛煉，也是一種考驗。從中獲得的諸多收獲，也是很可貴的，是非常有意義的。

在實訓(xùn)中我學(xué)到了許多新的知識。是一個讓我把書本上的理論知識運用于實踐中的好機會，原來，學(xué)的時候感嘆學(xué)的內(nèi)容太難懂，現(xiàn)在想來，有些其實并不難，關(guān)鍵在于理解。

在這次實訓(xùn)中還鍛煉了我其他方面的能力，提高了我的綜合素質(zhì)。首先，它鍛煉了我做項目的能力，提高了獨立思考問題、自己動手操作的能力，在工作的過程中，復(fù)習(xí)了以前學(xué)習(xí)過的知識，并掌握了一些應(yīng)用知識的技巧等。其次，實訓(xùn)中的項目作業(yè)也使我更加有團隊精神。

從那里，我學(xué)會了下面幾點找工作的心態(tài)：

一、繼續(xù)學(xué)習(xí)，不斷提升理論涵養(yǎng)。

在信息時代，學(xué)習(xí)是不斷地汲取新信息，獲得事業(yè)進步的動力。作為一名青年學(xué)子更應(yīng)該把學(xué)習(xí)作為保持工作積極性的重要途徑。走上工作崗位后，我會積極響應(yīng)單位號召，結(jié)合工作實際，不斷學(xué)習(xí)理論、業(yè)務(wù)知識和社會知識，用先進的理論武裝頭腦，用精良的業(yè)務(wù)知識提升能力，以廣博的社會知識拓展視野。

二、努力實踐，自覺進行角色轉(zhuǎn)化。

只有將理論付諸于實踐才能實現(xiàn)理論自身的價值，也只有將理論

付諸于實踐才能使理論得以檢驗。同樣，一個人的價值也是通過實踐活動來實現(xiàn)的，也只有通過實踐才能鍛煉人的品質(zhì)，彰顯人的意志。必須在實際的工作和生活中潛心體會，并自覺的進行這種角色的轉(zhuǎn)換。

三、提高工作積極性和主動性

實習(xí)，是開端也是結(jié)束。展現(xiàn)在自己面前的是一片任自己馳騁的沃土，也分明感受到了沉甸甸的責(zé)任。在今后的工作和生活中，我將繼續(xù)學(xué)習(xí)，深入實踐，不斷提升自我，努力創(chuàng)造業(yè)績，繼續(xù)創(chuàng)造更多的價值。

我認(rèn)為大學(xué)生實習(xí)難，就業(yè)難，除非你有關(guān)系，能給你輕松找到工作，否則就難逃市場選擇的厄運。我在該公司實習(xí)總結(jié)了五個攻略，只能智勇雙全，才能在這個社會中出人頭地。

首先確定主題，找對目標(biāo)。

實訓(xùn)的第一節(jié)課先設(shè)計好網(wǎng)站的類型規(guī)則，我們設(shè)計的是一款關(guān)于旅行方面的物品的網(wǎng)站，對待這個問題要快、準(zhǔn)、狠，不要拖拖拉拉，猶豫不決。確定好主題以后該思考要在網(wǎng)站上面上架那些物品，這個需要先調(diào)查一下現(xiàn)在主流的旅行物品的需求量，通過互聯(lián)網(wǎng)和身邊的調(diào)查然后在做決定。

構(gòu)造結(jié)構(gòu)框架。

規(guī)劃好網(wǎng)站是做什么的就好辦了，接下來這一步師非常關(guān)鍵的一步，因為一個好的網(wǎng)站無論是網(wǎng)站的布局和色彩以及總體都對用戶訪

問這個網(wǎng)站起著至關(guān)重要的一個決定，所以在這方面我們選擇了反其道而行之的簡約界面，我們的這個界面不同那些普遍的大網(wǎng)站一樣，他們內(nèi)容很多，很復(fù)雜，連接幾百個甚至更多更多，畫面也花花綠綠的，但是我們覺得這樣的網(wǎng)站反而顯得太亂，于是我們決定好了結(jié)構(gòu)框架。

后臺數(shù)據(jù)處理。

基本界面已經(jīng)設(shè)計好了，接下來就是見證奇跡的時刻了，在網(wǎng)站中我們看到的甚少甚少，最厲害的還是那些我們看不到的后臺數(shù)據(jù)，那些雖然我們看不到但是反而更加復(fù)雜難以理解，這一步也至關(guān)重要，設(shè)計好每一步的連接數(shù)據(jù)，每個圖片的跳轉(zhuǎn)，窗口的彈出關(guān)閉等，這樣一個基本的網(wǎng)站已經(jīng)成型了，最后就是看看哪里不好修改修改，然后就可以完成了。

We Are A Team!

胡維國

1402713104

我在這次實訓(xùn)中擔(dān)任的是圖片處理和flash動畫制作以及子網(wǎng)頁的制作工作，運用ps對需要用到的圖片進行相應(yīng)的效果處理，保存在相應(yīng)的圖片文件夾內(nèi)，在制作flash動畫的時候出現(xiàn)了一些小的問題，我保存flash動畫文件的時候名字做成了默認(rèn)的文件名，結(jié)果在插入動畫的時候在瀏覽器中預(yù)覽不出來，最后通過查閱資料把這個問題給解決了，我用css樣式進行了自己的子網(wǎng)頁頁面布局，以及對圖像的插入，通過類樣式對產(chǎn)品進行文字說明，并且插入相應(yīng)的鼠標(biāo)特效，來吸引眼球。

通過這次實訓(xùn)對這門課程的學(xué)習(xí)，做好主頁，并不是一件容易的事，它包括個人主頁的選題、內(nèi)容采集整理、圖片的處理、頁面的排版設(shè)置、背景及其整套網(wǎng)頁的色調(diào)等很多東西。所以我得出一下總結(jié)：

一、準(zhǔn)備資料和挑選符合目的主題的合適素材

做主頁當(dāng)然要收集、準(zhǔn)備資料。在網(wǎng)上多轉(zhuǎn)轉(zhuǎn)，看到什么漂亮的網(wǎng)頁，把它保存起來，作為以后自己設(shè)計主頁時的參考。另外，還包括搜集美化主頁可能要用到的各種材料，如背景、小動畫圖標(biāo)等等。你可以在硬盤上建一個文件夾，下分“圖片、聲音、動畫”等文件夾，養(yǎng)成上網(wǎng)時看到有創(chuàng)意、新鮮的圖像，就按鼠標(biāo)右鍵存入你硬盤相應(yīng)文件夾的習(xí)慣，時間一長你就有擁有了一個可觀的圖庫，等做主頁時隨手拈來或加以修改就成你自己的東西了。

二、規(guī)劃好整個網(wǎng)站

主頁的設(shè)計應(yīng)以醒目優(yōu)先，應(yīng)該令人一目了然，切勿堆砌太多不

必要的細(xì)節(jié)，或使畫面過于復(fù)雜。切記，頁面給人的第一觀感最為重要！在網(wǎng)上到處瀏覽網(wǎng)站的人很多，如果你的主頁給人的第一印像沒有吸引力，很難令他們深入觀賞，而且他們恐怕再也不會訪問你的網(wǎng)站了。

三、善用圖片，增強藝術(shù)效果

我記得老師說過網(wǎng)頁的迷人之處之一，要算它上面能點綴許多漂亮的圖片。精美的圖片設(shè)計，可以使自己的網(wǎng)頁增輝不少，令人過目不忘。圖片的內(nèi)容應(yīng)有一定的實際作用，切忌虛飾浮夸，同時還要注意與文字的顏色搭配。最佳的圖像集美觀與資訊于一身。

四、要多次使用不同的瀏覽器進行預(yù)覽

在做品完成之后，要多次對自己的網(wǎng)站進行測試，在不同的瀏覽器中進行嘗試效果，以達到手機和電腦上不同的瀏覽器中都能完整的體現(xiàn)出網(wǎng)站的內(nèi)容。

海繼昌

1402713103

這次實訓(xùn)我們主要是練習(xí)網(wǎng)頁制作及網(wǎng)站發(fā)布的各種知識。Dreamweaver工具為我們實現(xiàn)這些提供了便利，下面我將網(wǎng)頁制作和網(wǎng)站發(fā)布的知識總結(jié)如下：

（1）網(wǎng)頁制作的前期工作是搜集大量的素材，我們的網(wǎng)頁只有是實用的才會是大眾喜歡的，搜集素材以充實我們的網(wǎng)頁。當(dāng)然我們也應(yīng)該在此時定下網(wǎng)站的方向是什么，剩下的就是靠Dreamweaver進行編輯。

（2）網(wǎng)頁的版式設(shè)計，版式設(shè)計時我們應(yīng)該有重點，把重要的內(nèi)容新聞放在醒目的位置上。規(guī)劃各元素在網(wǎng)頁中的位置關(guān)系和表現(xiàn)方法，合理安排圖像、文本等元素，使網(wǎng)頁布局合理、美觀大方。

（3）文本編寫，我們的網(wǎng)頁中需要大量的文字材料，這就要在網(wǎng)頁編輯器中用HTML語言中的標(biāo)簽編寫。也可以利用網(wǎng)頁編輯工具的“所見即所得”功能，直接寫入文字。在瀏覽器中運行時出現(xiàn)冗余代碼時返回代碼頁面重新進行查看修改。

（4）處理網(wǎng)頁之間的關(guān)聯(lián)，這主要是建立合理、高效的網(wǎng)頁導(dǎo)航系統(tǒng)；

（5）網(wǎng)頁發(fā)布過程，主要是將建設(shè)好的網(wǎng)頁上傳到服務(wù)器中供用戶瀏覽。

存在的問題及解決思路

(1)在Dreamweaver基礎(chǔ)方面：制作網(wǎng)頁時如何實現(xiàn)網(wǎng)頁不跳轉(zhuǎn)就可以出現(xiàn)新的內(nèi)容，實現(xiàn)頁面內(nèi)的鏈接；用代碼編寫網(wǎng)頁上的按鈕，25 實現(xiàn)按鈕的各種功能，如刷新，重置，確定操作。Css樣式表的概念模糊。

（2）網(wǎng)站風(fēng)格方面：一個網(wǎng)站的各個頁面之間風(fēng)格應(yīng)該是統(tǒng)一的，只有圍繞一個風(fēng)格才會成功。

（3）網(wǎng)站的內(nèi)容方面：在制作網(wǎng)站時內(nèi)容之間應(yīng)該是相關(guān)的，在制作時我們不能追求面面俱到，只能做到精益求精。雜亂無章的網(wǎng)站是不會有大的發(fā)展的。

網(wǎng)頁設(shè)計實訓(xùn)就快結(jié)束了，在這短短的三周里，我學(xué)會了很多新的知識，更掌握了新的技能，讓我覺得受益匪淺。在這一周的時間里，我一心只做網(wǎng)頁，做自己喜歡的風(fēng)格的網(wǎng)頁。經(jīng)歷了一次充實而有愉快的實訓(xùn)，我學(xué)會了制作框架、使用錨點、給網(wǎng)頁網(wǎng)頁插入背景音樂、表格、視頻、flash、導(dǎo)航條等更深層次的掌握了它們的用法，現(xiàn)在整個網(wǎng)頁也已經(jīng)大體竣工，我感到很開心，經(jīng)過這三周不斷探索，我喜歡上了這門課程，感覺很有意思。或許實訓(xùn)的結(jié)束代表一段新生活的開始，但是我認(rèn)為它不但是一門課，需要我們?nèi)フ莆?，同時還可以鍛煉我們的邏輯思維能力和思維的嚴(yán)密性，還有就是在制作網(wǎng)頁的過程中，更需要有不錯的藝術(shù)審美觀，這樣，你做出的網(wǎng)頁才會賞心悅目，讓人眼前一亮，也就是從此刻起，我決心好好鉆研這門課，力求這方面的技能達到頂級。雖然網(wǎng)頁已經(jīng)完成，可這并不是一件輕而易舉的事情，在此過程中遇到了許多以前不曾遇到的問題，多的情況都是自己解決，萬不得已之際，我會主動問老師和同學(xué)，直到弄懂為止！

讓我更加清楚地明白老師平日里的良苦用心，也更加清楚地明白了自己以后應(yīng)該怎樣去做事。

陳佑宏

1402713102

第二篇：靜態(tài)網(wǎng)頁設(shè)計與制作 實訓(xùn)報告

靜態(tài)網(wǎng)頁設(shè)計與制作

實訓(xùn)報告

這一周我們進行了為期一周的靜態(tài)網(wǎng)頁設(shè)計與制作的實訓(xùn)。在這一個星期中我感觸很多，無論是從網(wǎng)站的剛開始的主題的確定設(shè)計還是后期的網(wǎng)站的發(fā)布與測試。感覺又學(xué)到了很多新的東西。

從小到大，在自己的心底就有個音樂夢想。我喜歡唱歌，喜歡跳舞，小的時候?qū)W過電子琴，上初中后父母認(rèn)為學(xué)業(yè)更加要緊，于是所有與音樂有關(guān)的東西通通不被再提起。但是自己還是仍舊喜歡著音樂。上大學(xué)之后，自己終于可以重新“正大光明”地重新提起音樂了，于是想制作一個音樂網(wǎng)站的念頭就在自己的腦海中閃現(xiàn)著。

我一直比較喜歡的華語男歌手是周杰倫，在上大一的那個10月份，周杰倫照例出著專輯，專輯的名字卻很讓人耐人尋味，《跨時代》，這我才突然意識到，從小學(xué)開始，周杰倫出道10年的十張專輯整整陪我走過了小學(xué)、中學(xué)的時光。于是在這次比賽中想制作一個關(guān)于周杰倫出道十年紀(jì)念的這樣一個音樂網(wǎng)站。下面就讓闡述下我制作這個網(wǎng)站的整體構(gòu)思和具體設(shè)計方案。

關(guān)于網(wǎng)站的框架結(jié)構(gòu)：

在制作之前，我在網(wǎng)上搜索過許多周杰倫的官方網(wǎng)站，例如周杰倫中文網(wǎng)，周杰倫中文音樂網(wǎng)之類的。我發(fā)現(xiàn)他們制作時框架緊湊明晰，同時也包括了幾個音樂網(wǎng)站必須具有的模塊。于是，得到借鑒，我在我的主頁上面也就添加了“杰

迷必知”、“杰倫貼圖”、“杰倫影音”、“每日杰訊”、“歌迷會通道”這樣五個模塊。在添加這五個模塊的時候，我不像一些很正式的網(wǎng)站，模塊與模塊之間湊得很緊，我嘗試了下自由、隨機的排放。因為我做的是一個音樂兼娛樂的網(wǎng)站，想讓網(wǎng)友們懷著輕松愉悅而不是嚴(yán)肅的心情來看我的這個網(wǎng)站。

關(guān)于網(wǎng)站的色彩搭配：

這次制作的網(wǎng)頁是主要關(guān)乎于歌手周杰倫，訪問的人群絕大多數(shù)會是周杰倫的粉絲，也絕對是時尚范兒，因此網(wǎng)頁的主色調(diào)我采用了永不衰竭的經(jīng)典黑白色調(diào)，再者黑白搭配這種反差很大的撞色能夠給人很大的視覺沖擊力。中間一些板塊的邊框我選擇了用玫紅色，玫紅色可以提升整個網(wǎng)頁的活潑，使黑白色調(diào)的網(wǎng)頁看起來不死板，嚴(yán)肅而不失華麗。

關(guān)于網(wǎng)站的圖片：

網(wǎng)頁的logo我分為了兩個部分，一面是白色背景的10th周年紀(jì)念logo，另一面是周杰倫彈著貝斯轉(zhuǎn)動的畫面，這個畫面是周杰倫超時代世界巡回演唱會的開場秀，超時代演唱會是對杰倫出道十年來的一個總結(jié)，因此我認(rèn)為這個畫面做為紀(jì)念杰倫出道十年網(wǎng)站的logo是很不錯的。

網(wǎng)站的所有的圖片處理在互聯(lián)網(wǎng)上下載的以外，還有相當(dāng)大的一部分是下載下來以后處理過的。我處理圖片的時候不僅用了firework8，還用了photoshop和美圖秀秀。在插視頻的時候由于只能插flv格式的，因此還下載了轉(zhuǎn)碼器。插

入視頻時老師說過時間不宜太長，否則不利于網(wǎng)頁打開的速度，于是就用了會聲會影x2進行視頻編輯和合成。

正文主體部分分為5個模塊

第一個模塊“杰迷必知”，左邊是杰倫的兩張圖片，一張是杰倫正面拍攝，另外一張是背面拍攝。兩張圖片之間的轉(zhuǎn)換運用了“鼠標(biāo)經(jīng)過圖像”這一基本技術(shù)，是網(wǎng)友們在視覺上全方位了解他。圖片的右邊附著杰倫的簡介，在右下角可以點擊“更多”來查看杰倫更多的詳細(xì)資料。

第二個模塊“杰倫影音”，左方和下方附著的是杰倫專輯和演唱會上的精彩照片，在模塊的右前方，則簡要介紹了周杰倫出道十年來所發(fā)行的所有音樂專輯，所舉辦的所有演唱會和所有所參加拍攝的或者自己導(dǎo)演的所有電影的名字。使網(wǎng)友們更加有興趣深入了解。

第三個模塊“杰倫貼圖”，我之所以把這兩個模塊放在一起，是因為它們之間的聯(lián)系比起其他模塊更加緊密。因為杰倫的貼圖不僅僅是周杰倫的個人寫真，更多的是他專輯封面，演唱會現(xiàn)場照和電影劇照。因此在這一模塊左邊，我選擇了一張動態(tài)的圖片。這張動態(tài)的圖片是由10張小圖片組成的，每一張小圖片都是他出道10年來那10張專輯的封面圖的頭像。在這張動態(tài)的圖片中，歌迷們看到的是10年前的周杰倫從一個青澀的大男孩長成了一個成熟的男人。而用音樂專輯封面頭像則更加體現(xiàn)出這個成功的創(chuàng)作型音樂人本質(zhì)的回歸。

第四個模塊“每日杰訊”，歌迷們想知道更多關(guān)于杰倫的最新資訊，想與他拉近距離，那么作為音樂網(wǎng)站，每日資訊便是必不可少的一個模塊。為了使資訊看起

來方便，于是便運用了層，然后調(diào)出時間軸，簡單的做了一個文字向上運動的一個動畫。

第五個模塊“歌迷會通道”，看了每日杰訊的歌迷們知道了周杰倫的近期活動安排行程，想?yún)⒓右恍┖徒軅愑嘘P(guān)的活動，那么進入歌迷會將會是一個不錯的選擇。歌迷會通道提供了全國以及海外共32個通道，歌迷們可以看自己的地理情況就近參加，這也給歌迷和杰倫互動中間架起了一座橋梁。模塊的右邊用的是杰倫高清寫真，圖片充分的體現(xiàn)出杰倫深愛著他的歌迷。還未加入歌迷會的粉絲們也可以點擊右下角的“加入我們”加入歌迷會。

關(guān)于網(wǎng)站鏈接

這個星期我又重新整理了自己的網(wǎng)站，將它更加美化。

現(xiàn)在網(wǎng)站一共五個頁面，分別是“新聞”“資料”“圖片”“資源”和“電子雜志”等。在“資料”鏈接的頁面中，網(wǎng)頁的上一部分用大圖和文字采用圖文混排的方式，下部分將層嵌入到圖片中加入文字做了個簡單的文字向上運動的效果。網(wǎng)頁的全部文字都在詳細(xì)介紹網(wǎng)站的主人公周杰倫。

在“圖片”鏈接的頁面中，主要就貼一些周杰倫的各種圖片。第一部分用了代碼marquee，使四張圖片從左到右運動。中間有一張大圖片是周杰倫各個鏡頭的頭像照。緊接著是周杰倫新專輯的照片和鏡頭。最后一個頭部分是杰迷會的會服的照片和介紹，網(wǎng)站正式做成以后可以鏈接至淘寶。

在“資源”鏈接中插入的視頻是我在周杰倫《2011超時代世界巡回演唱會》上截取的，我個人認(rèn)為這段視頻能夠生動記錄著周杰倫出道10年來給歌迷朋友們

帶來的巨大的視聽盛宴，無論是在專輯，電影還是演唱會上。我的不少朋友看到我截的這段視頻都說深有感觸，甚至有點小感動，原來杰倫的歌已經(jīng)默默陪我們走過十年。我期待他的歌能夠陪伴我們走過下個十年，下下個十年……

最后一個鏈接頁面是“電子雜志”。這個頁面主要講周杰倫最近推出的新專輯。整個頁面用了圖文混排的方式對外展示新專輯的熱賣點，并且有預(yù)購的系統(tǒng)，這樣可以幫助網(wǎng)站盈利。

心得體會

經(jīng)過一周的靜態(tài)網(wǎng)頁設(shè)計與制作的實訓(xùn)，讓我懂得了很多。首先是做什么事情之前腦袋里面都要想好，都要出現(xiàn)大致的輪廓。在開始制作網(wǎng)站之前最重要的是網(wǎng)站的設(shè)計，大到網(wǎng)站的整體構(gòu)思整個框架設(shè)計，小到一張圖片的和一段文字的擺放位置。

接下來是自己對顏色和美的感知。互聯(lián)網(wǎng)上發(fā)布的的網(wǎng)站總是讓人看起來很舒服。不僅是顏色搭配還有布局還有動態(tài)效果和靜態(tài)的結(jié)合。這總是在提醒我，制作網(wǎng)頁絕對不是一項閉門造車的活動。平時和自己的好朋友多討論，讓很多人來給你的網(wǎng)站給些建議和意見都是不錯的。除了這些之外，自己也要多看書，多看些和自己要制作的網(wǎng)站主題相關(guān)的資訊，多了解時下最流行的時尚元素。

網(wǎng)站的最終目的是為了盈利，因此我在建立網(wǎng)站制作網(wǎng)頁的時候，也專門有訂購周杰倫最新專輯和周杰倫國際后援會的會服的通道。這些直接鏈接到淘寶，然后開始從事電子商務(wù)活動。

最后，通過一周的實訓(xùn)讓我懂得了，為人做事一定要謹(jǐn)慎細(xì)心。同時老師們

傳授給我們知識時的耐心也值得我學(xué)習(xí)。我相信這次實訓(xùn)會為我以后的工作和學(xué)習(xí)奠定良好的基礎(chǔ)。最后，真心地說一句：“老師，您辛苦了~！”

第三篇：《靜態(tài)網(wǎng)頁制作與素材加工實訓(xùn)報告》

山西工程職業(yè)技術(shù)學(xué)院 《靜態(tài)網(wǎng)頁制作》 實訓(xùn)報告書

系別：計算機工程系 專業(yè)：計算機網(wǎng)絡(luò) 設(shè)計班級：網(wǎng)14班 姓名：張靜龍

指導(dǎo)教師：喬文彪常娟

2012年12月27日

一、指導(dǎo)教師

喬文彪常娟

二、設(shè)計目的與要求

此次的網(wǎng)站設(shè)計使我們必須具備有：

（1）色彩構(gòu)成、（2）圖形、圖像素材的獲取與編輯處理、（3）音頻、視頻、動畫素材的獲取和處理、（4）簡單數(shù)據(jù)庫設(shè)計、（5）Dreamweaver軟件的應(yīng)用等相關(guān)知識。

本次《靜態(tài)網(wǎng)頁制作》《網(wǎng)頁制作》設(shè)計可以培養(yǎng)我們的創(chuàng)新能力，把所學(xué)理論與實際操作緊密結(jié)合起來，提高其獨立解決問題的能力。

三、設(shè)計內(nèi)容、過程以及設(shè)計效果

1、設(shè)計內(nèi)容：

我此次設(shè)計的網(wǎng)站主題是教育類網(wǎng)站，名為《思科網(wǎng)絡(luò)學(xué)院》，設(shè)計中包含了4個導(dǎo)航信息，多個二級頁面以及少許的三級頁面，題型資料可供下載使用。

在此次期間主要是通過在網(wǎng)上搜集了相關(guān)的素材（題庫以及各種頁面效果的代碼等）以及從圖書館借閱相關(guān)的書籍來進行對個人站點效果的設(shè)計。本次設(shè)計的網(wǎng)站主要是用來幫助大家快速了解思科網(wǎng)絡(luò)學(xué)院的最新動態(tài)以及學(xué)習(xí)到思科網(wǎng)絡(luò)知識，由于站點的容量有限，在這里我總結(jié)了幾種學(xué)習(xí)思科網(wǎng)絡(luò)的方式方法和經(jīng)典題型。網(wǎng)站的設(shè)計來源主要是參考《思科網(wǎng)絡(luò)學(xué)院》和《思科網(wǎng)絡(luò)學(xué)習(xí)空間》兩大網(wǎng)站，其中包含思科各種教程以及題庫，在我的網(wǎng)站設(shè)計中也對這兩個網(wǎng)站

進行了鏈接。

2、設(shè)計過程：

1、首先分析站點的設(shè)計思路及方法。

首先確定了自己的設(shè)計思路是思科網(wǎng)絡(luò)學(xué)院，為了完成本次設(shè)計會用到相應(yīng)的資料和素材，而網(wǎng)絡(luò)和圖書館為我們提供了信息來源。

2、網(wǎng)站架構(gòu)的確定以及目錄鏈接的確定 架構(gòu)的設(shè)計用到了word，網(wǎng)站的目錄確定為 首頁、概述、課程介紹、工具和資源、思科網(wǎng)絡(luò)學(xué)院在中國5個導(dǎo)航信息欄，以及設(shè)計了各級頁面中的導(dǎo)航信息。

鏈接則是由大量的二級頁面，少量的三級頁面，文本文檔以及各種外部鏈接組成。

3、配置服務(wù)器及站點建立 開始進行配置服務(wù)器及站點的建立。本次建立的站點名為cisco，為防止站點目錄下出現(xiàn)解析讀取錯誤，所有目錄下的所有文件均采用英文名字命名。

4、網(wǎng)站各級頁面的設(shè)計 本次設(shè)計使用的是PS 7.0 專業(yè)繪圖軟件，通過使用PS的各項功能來設(shè)計網(wǎng)站的各級頁面（一級頁面，二級頁面）。

5、網(wǎng)站各種標(biāo)志的設(shè)計 此次網(wǎng)站logo的設(shè)計主要是模仿官方logo，然后再加以修飾。

6、網(wǎng)站導(dǎo)航及板塊設(shè)計、版權(quán)信息設(shè)計 導(dǎo)航欄的設(shè)計主要用到的技術(shù)是PS中圓角矩形框工具以及文字工具進行設(shè)計，版權(quán)信息則是參考教材中的格式進行設(shè)計。

7、切片制作及各級頁面的實現(xiàn) 通過PS的切片功能對設(shè)計好的全圖像頁面進行切片，然后通

過存儲為Web格式來生成html格式的網(wǎng)頁。

8、首頁動態(tài)展示欄以及時鐘的設(shè)計

完成上面的全圖像頁面設(shè)計后，就開始用Dreamweaver軟件對首頁進行動態(tài)設(shè)計。首先是從網(wǎng)上搜索到代碼用以實現(xiàn)動態(tài)圖片展示欄和時鐘的效果。之前切片切好的頁面用來做插入時鐘代碼的時候，結(jié)果造成網(wǎng)頁擁擠，后來又重新進行切片，插入背景，然后再放入時鐘代碼，效果就做好了。

9、網(wǎng)頁元素添加及格式設(shè)置

然后對首頁中的圖片滾動進行設(shè)計，在這里用到了書上相應(yīng)的代碼，至此一個網(wǎng)站的首頁就完成了。在二級頁面則是用到了大量的嵌入式框架，來對文字進行編輯。在其中一個二級頁面（思科網(wǎng)院在中國）中用到了彈出式信息欄來顯示各省思科網(wǎng)院的情況。

10、站點各級頁面的鏈接添加及測試

對做好的各級頁面進行鏈接，在這里可以用到庫，避免了繁瑣的步驟，最后測試網(wǎng)站。

3、設(shè)計效果：

在此次設(shè)計中使用的效果有：

Dreamweaver：動態(tài)信息展示欄、Flase動畫、多次使用嵌入式框架、時鐘、動態(tài)滾動圖片、鏈接、彈出式信息欄、插入表格、背景，PS：切片工具、插入圓角矩形框、橫排文字工具、魔棒、插入圖片，漸變工具等。

四、設(shè)計地點與時間安排：

時間：第17-18教學(xué)周地點：實訓(xùn)樓

第四篇：網(wǎng)頁實訓(xùn)報告

靜態(tài)網(wǎng)站實訓(xùn)

姓 名：XXX 學(xué) 號：XXXXXXXXXXX 班 級：XXXXX 指導(dǎo)教師：XXX 提交日期：2012年3月21日

南京工業(yè)職業(yè)技術(shù)學(xué)院項目技術(shù)報告

概 要

本實訓(xùn)報告主要介紹并總結(jié)了兩周實訓(xùn)以來靜態(tài)網(wǎng)頁設(shè)計主題的定位、內(nèi)容結(jié)構(gòu)、素材的下載、版式設(shè)計、色彩設(shè)計、導(dǎo)航、功能設(shè)計、網(wǎng)頁的風(fēng)格設(shè)計、Flash的應(yīng)用、圖片動態(tài)效果的使用以及DIV的套用、層、行為等方面的設(shè)計。南京工業(yè)職業(yè)技術(shù)學(xué)院項目技術(shù)報告

目錄

前言..................................................................................................................................................4

一、實訓(xùn)意義：...............................................................................................................................5

二、實訓(xùn)目的:.................................................................................................................................5

三、實驗步驟:.................................................................................................................................6

1.確定網(wǎng)站主題...................................................................................................................6 2.收集材料...........................................................................................................................7 3.網(wǎng)站規(guī)劃...........................................................................................................................7 4.網(wǎng)站的制作工具...............................................................................................................8

四、總體功能介紹...........................................................................................................................8

五、總體框架結(jié)構(gòu)設(shè)計...................................................................................................................9

5.1制作網(wǎng)站的網(wǎng)頁.........................................................................................................9 5.1.1首頁：..............................................................................................................................9 5.1.2個人資料：....................................................................................................................15 5.1.3演員、導(dǎo)演姜文............................................................................................................17 5.1.4個人寫真........................................................................................................................19 5.1.5獎項榮譽........................................................................................................................24 5.1.6感情生活........................................................................................................................25 5.1.7最新資訊........................................................................................................................27 5.1.8讓子彈飛FLASH游戲.................................................................................................27

六、總體調(diào)試與分析.....................................................................................................................29 6.1上傳測試網(wǎng)站...................................................................................................................29

七、設(shè)計特色.................................................................................................................................29 結(jié)論................................................................................................................................................30 結(jié)束語............................................................................................................................................30

南京工業(yè)職業(yè)技術(shù)學(xué)院項目技術(shù)報告

前言

在互聯(lián)網(wǎng)時代的今天,不同于我們所熟悉和習(xí)慣的農(nóng)業(yè)社會和工業(yè)社會,它有著較快的發(fā)展速度和極高的淘汰率,不僅挑戰(zhàn)著我們學(xué)習(xí)的勇氣,更挑戰(zhàn)著我們的方法和技巧.為此對有效掌握所需要的知識方面,我們進行了一系列的探索.在今天網(wǎng)絡(luò)已經(jīng)成為各級單位,企業(yè)和個人的一張名片,一個精美而又獨特的網(wǎng)絡(luò)主頁,不僅為商家吸引更多的客戶和投資,更能為我們一個人帶來更多的機遇和更大的發(fā)展空間,對于部分人來說,它所帶來的網(wǎng)絡(luò)生活遠(yuǎn)比現(xiàn)實生活更有魅力,更富有激情.今天internet發(fā)展非?？?，已經(jīng)成為整個世界的一個主要通信網(wǎng)絡(luò)標(biāo)準(zhǔn)。接入internet網(wǎng)，瀏覽1/DTD/xhtml1-transitional.dtd“> （這里是插入背景音樂的代碼）