靜態(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過電子琴，上初中后父母認為學(xué)業(yè)更加要緊，于是所有與音樂有關(guān)的東西通通不被再提起。但是自己還是仍舊喜歡著音樂。上大學(xué)之后，自己終于可以重新“正大光明”地重新提起音樂了，于是想制作一個音樂網(wǎng)站的念頭就在自己的腦海中閃現(xiàn)著。

我一直比較喜歡的華語男歌手是周杰倫，在上大一的那個10月份，周杰倫照例出著專輯，專輯的名字卻很讓人耐人尋味，《跨時代》，這我才突然意識到，從小學(xué)開始，周杰倫出道10年的十張專輯整整陪我走過了小學(xué)、中學(xué)的時光。于是在這次比賽中想制作一個關(guān)于周杰倫出道十年紀念的這樣一個音樂網(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)友們懷著輕松愉悅而不是嚴肅的心情來看我的這個網(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)頁看起來不死板，嚴肅而不失華麗。

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

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

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

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

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

第二個模塊“杰倫影音”，左方和下方附著的是杰倫專輯和演唱會上的精彩照片，在模塊的右前方，則簡要介紹了周杰倫出道十年來所發(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)頁的全部文字都在詳細介紹網(wǎng)站的主人公周杰倫。

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

在“資源”鏈接中插入的視頻是我在周杰倫《201*超時代世界巡回演唱會》上截取的，我個人認為這段視頻能夠生動記錄著周杰倫出道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)讓我懂得了，為人做事一定要謹慎細心。同時老師們傳授給我們知識時的耐心也值得我學(xué)習(xí)。我相信這次實訓(xùn)會為我以后的工作和學(xué)習(xí)奠定良好的基礎(chǔ)。最后，真心地說一句：“老師，您辛苦了~�。　�

擴展閱讀：

友情提示：本文中關(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.hmlawpc.com/gongwen/673107.html

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