第一篇：靜態(tài)網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告

計(jì)算機(jī)軟件學(xué)院

實(shí)訓(xùn)報(bào)告

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

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

04

03

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

目錄

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

本實(shí)訓(xùn)目的：...........................................................................................................................3 綜合實(shí)訓(xùn)的目的：...................................................................................................................3 對(duì)個(gè)人的要求...................................................................................................................................4

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

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

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

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

前言

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

實(shí)訓(xùn)意義

本實(shí)訓(xùn)目的：

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

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

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

對(duì)個(gè)人的要求

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

具體要求如下：

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

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

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

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

一、策劃階段：

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

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

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

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

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

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

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

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

頁(yè)面設(shè)計(jì)

頁(yè)面的平鋪展示：

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

LOGO：

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

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

字體圖片背景的搭配：

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

導(dǎo)航：

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

其他：

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

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

主頁(yè)和部分頁(yè)面展示

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

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

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

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

簡(jiǎn)單的一個(gè)小動(dòng)畫起到了裝飾頁(yè)面和分割頁(yè)面的作用。

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

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

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

這是藝術(shù)！

部分代碼

不是每朵花都可以綻放！

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

Flash插入的代碼。

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

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

要求

主頁(yè)的要求

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

PRODCT的要求

簡(jiǎn)單明了直觀 獨(dú)特的見(jiàn)解 色彩的搭配

ABOUT ME的要求

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

測(cè)試站點(diǎn)

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

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

功能模塊：

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

參考文獻(xiàn)

百度文庫(kù)文獻(xiàn)系列

個(gè)人小結(jié)

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

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

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

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

收集和加工素材

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

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

收集到的素材分門別類存放起來(lái)，需要時(shí)可以很快找到。

制作網(wǎng)頁(yè)

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

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

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

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

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

夏前偉

1402713109

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

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

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

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

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

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

二、努力實(shí)踐，自覺(jué)進(jìn)行角色轉(zhuǎn)化。

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

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

三、提高工作積極性和主動(dòng)性

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

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

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

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

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

規(guī)劃好網(wǎng)站是做什么的就好辦了，接下來(lái)這一步師非常關(guān)鍵的一步，因?yàn)橐粋€(gè)好的網(wǎng)站無(wú)論是網(wǎng)站的布局和色彩以及總體都對(duì)用戶訪

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

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

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

We Are A Team!

胡維國(guó)

1402713104

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

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

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

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

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

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

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

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

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

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

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

海繼昌

1402713103

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

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

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

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

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

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

存在的問(wèn)題及解決思路

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

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

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

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

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

陳佑宏

1402713102

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

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

實(shí)訓(xùn)報(bào)告

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

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

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

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

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

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

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

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

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

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

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

入視頻時(shí)老師說(shuō)過(guò)時(shí)間不宜太長(zhǎng)，否則不利于網(wǎng)頁(yè)打開(kāi)的速度，于是就用了會(huì)聲會(huì)影x2進(jìn)行視頻編輯和合成。

正文主體部分分為5個(gè)模塊

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

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

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

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

來(lái)方便，于是便運(yùn)用了層，然后調(diào)出時(shí)間軸，簡(jiǎn)單的做了一個(gè)文字向上運(yùn)動(dòng)的一個(gè)動(dòng)畫。

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

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

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

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

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

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

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

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

心得體會(huì)

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

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

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

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

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

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

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

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

指導(dǎo)教師：?jiǎn)涛谋氤＞?/p>

2012年12月27日

一、指導(dǎo)教師

喬文彪常娟

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

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

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

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

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

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

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

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

進(jìn)行了鏈接。

2、設(shè)計(jì)過(guò)程：

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

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

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

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

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

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

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

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

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

過(guò)存儲(chǔ)為Web格式來(lái)生成html格式的網(wǎng)頁(yè)。

8、首頁(yè)動(dòng)態(tài)展示欄以及時(shí)鐘的設(shè)計(jì)

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

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

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

10、站點(diǎn)各級(jí)頁(yè)面的鏈接添加及測(cè)試

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

3、設(shè)計(jì)效果：

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

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

四、設(shè)計(jì)地點(diǎn)與時(shí)間安排：

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

第四篇：網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告

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

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

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

概 要

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

目錄

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

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

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

三、實(shí)驗(yàn)步驟:.................................................................................................................................6

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

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

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

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

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

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

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

前言

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