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

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

實訓(xùn)報告

這一周我們進(jì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)站，模塊與模塊之間湊得很緊，我嘗試了下自由、隨機(jī)的排放。因為我做的是一個音樂兼娛樂的網(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進(jìn)行視頻編輯和合成。

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

第一個模塊“杰迷必知”，左邊是杰倫的兩張圖片，一張是杰倫正面拍攝，另外一張是背面拍攝。兩張圖片之間的轉(zhuǎn)換運(yù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)站，每日資訊便是必不可少的一個模塊。為了使資訊看起來方便，于是便運(yùn)用了層，然后調(diào)出時間軸，簡單的做了一個文字向上運(yùn)動的一個動畫。

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

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

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

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

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

在“資源”鏈接中插入的視頻是我在周杰倫《201*超時代世界巡回演唱會》上截取的，我個人認(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ǔ)。最后，真心地說一句：“老師，您辛苦了~��！”

擴(kuò)展閱讀：

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

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

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

• 上一篇：Web程序設(shè)計實驗報告
• 下一篇：web程序設(shè)計_實驗報告模板