靜態(tài)網頁設計與制作 實訓報告

靜態(tài)網頁設計與制作

實訓報告

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

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

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

下面就讓闡述下我制作這個網站的整體構思和具體設計方案。

關于網站的框架結構：

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

關于網站的色彩搭配：

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

關于網站的圖片：

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

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

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

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

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

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

第四個模塊“每日杰訊”，歌迷們想知道更多關于杰倫的最新資訊，想與他拉近距離，那么作為音樂網站，每日資訊便是必不可少的一個模塊。為了使資訊看起來方便，于是便運用了層，然后調出時間軸，簡單的做了一個文字向上運動的一個動畫。

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

關于網站鏈接

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

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

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

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

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

心得體會

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

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

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

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

擴展閱讀：

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

來源：網絡整理 免責聲明：本文僅限學習分享，如產生版權問題，請聯系我們及時刪除。

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

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