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

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

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

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

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

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

下面就讓闡述下我制作這個(gè)網(wǎng)站的整體構(gòu)思和具體設(shè)計(jì)方案。

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

在制作之前，我在網(wǎng)上搜索過許多周杰倫的官方網(wǎng)站，例如周杰倫中文網(wǎng)，周杰倫中文音樂網(wǎng)之類的。我發(fā)現(xiàn)他們制作時(shí)框架緊湊明晰，同時(shí)也包括了幾個(gè)音樂網(wǎng)站必須具有的模塊。于是，得到借鑒，我在我的主頁上面也就添加了“杰迷必知”、“杰倫貼圖”、“杰倫影音”、“每日杰訊”、“歌迷會(huì)通道”這樣五個(gè)模塊。在添加這五個(gè)模塊的時(shí)候，我不像一些很正式的網(wǎng)站，模塊與模塊之間湊得很緊，我嘗試了下自由、隨機(jī)的排放。因?yàn)槲易龅氖且粋�(gè)音樂兼娛樂的網(wǎng)站，想讓網(wǎng)友們懷著輕松愉悅而不是嚴(yán)肅的心情來看我的這個(gè)網(wǎng)站。

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

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

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

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

網(wǎng)站的所有的圖片處理在互聯(lián)網(wǎng)上下載的以外，還有相當(dāng)大的一部分是下載下來以后處理過的。我處理圖片的時(shí)候不僅用了firework8，還用了photoshop和美圖秀秀。在插視頻的時(shí)候由于只能插flv格式的，因此還下載了轉(zhuǎn)碼器。插入視頻時(shí)老師說過時(shí)間不宜太長(zhǎng)，否則不利于網(wǎng)頁打開的速度，于是就用了會(huì)聲會(huì)影x2進(jìn)行視頻編輯和合成。

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

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

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

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

第四個(gè)模塊“每日杰訊”，歌迷們想知道更多關(guān)于杰倫的最新資訊，想與他拉近距離，那么作為音樂網(wǎng)站，每日資訊便是必不可少的一個(gè)模塊。為了使資訊看起來方便，于是便運(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)出杰倫深愛著他的歌迷。還未加入歌迷會(huì)的粉絲們也可以點(diǎn)擊右下角的“加入我們”加入歌迷會(huì)。

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

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

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

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

在“資源”鏈接中插入的視頻是我在周杰倫《201*超時(shí)代世界巡回演唱會(huì)》上截取的，我個(gè)人認(rèn)為這段視頻能夠生動(dòng)記錄著周杰倫出道10年來給歌迷朋友們帶來的巨大的視聽盛宴，無論是在專輯，電影還是演唱會(huì)上。我的不少朋友看到我截的這段視頻都說深有感觸，甚至有點(diǎn)小感動(dòng)，原來杰倫的歌已經(jīng)默默陪我們走過十年。我期待他的歌能夠陪伴我們走過下個(gè)十年，下下個(gè)十年……

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

心得體會(huì)

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

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

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

最后，通過一周的實(shí)訓(xùn)讓我懂得了，為人做事一定要謹(jǐn)慎細(xì)心。同時(shí)老師們傳授給我們知識(shí)時(shí)的耐心也值得我學(xué)習(xí)。我相信這次實(shí)訓(xùn)會(huì)為我以后的工作和學(xué)習(xí)奠定良好的基礎(chǔ)。最后，真心地說一句：“老師，您辛苦了~！！”

擴(kuò)展閱讀：

友情提示：本文中關(guān)于《靜態(tài)網(wǎng)頁設(shè)計(jì)與制作 實(shí)訓(xùn)報(bào)告》給出的范例僅供您參考拓展思維使用，靜態(tài)網(wǎng)頁設(shè)計(jì)與制作 實(shí)訓(xùn)報(bào)告：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《靜態(tài)網(wǎng)頁設(shè)計(jì)與制作 實(shí)訓(xùn)報(bào)告》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.7334dd.com/gongwen/673107.html

• 上一篇：Web程序設(shè)計(jì)實(shí)驗(yàn)報(bào)告
• 下一篇：web程序設(shè)計(jì)_實(shí)驗(yàn)報(bào)告模板