萌小志
文章15
标签14
分类4
【學習歷程】關於電競比賽申請網頁製作的個人心得及反思

【學習歷程】關於電競比賽申請網頁製作的個人心得及反思

關於電競比賽申請網頁製作的個人心得及反思

學生:劉訊志
課程:電競商務與行銷
網站地址:https://cyvs.galigali.club

製作契機

老師佈置這次作業的本意是希望我們我們可以使用Google Site嘗試製作自己的電競比賽的網頁,但由於我認為Google Site局限性太高不具備完成的我想法的能力。同時我曾自學了一些html,css等網頁設計的能力,平時也有在寫網頁,所以我的作業形式採用了不同的方式完成。

工具:
Visual Studio Code——用於編碼
Hugo——靜態網頁框架,是我不擅長的,我比較擅長Hexo加ejs編寫
Hugo Scroll——Hugo的模版,我修改了部分細節
GitHub——用於存放網頁源碼,網頁展示,及版本控制
Google form——用於製作申請表單,並使用iframe加入進網頁
語言:
Hugo——Hugo內使用的模板語言
Markdown——輕量文本標記語言
Html——描述超文件的註記語言
Css——為結構化文件添加樣式的語言

個人目標

  1. 趁著這次作業的契機,去嘗試自己未嘗試的東西,例如Hugo。
  2. 鍛鍊自己尋找素材的能力,之前從來沒做過電競主題的網頁,對於使用素材來說較沒有經驗。
  3. 學會制訂自己的節奏,因為我本身的性格使我急於完成一件事,常常只要做到後就草草了事。

個人心得及反思

因為本次是抱著實驗和學習的心態去完成的作業,所以製作的過程中遇到了許多的困難。例如不熟悉Hugo的文件結構,導致剛開始製作的時候使我一頭霧水。不清楚Markdown和模板應該放置的位置,且由於Hugo本身使用的模板語言是直接寫在html中的,剛開始我甚至找不到我熟悉的ejs。

所以我選擇先使用別人的模板慢慢修改來讓自己熟悉這個開發工具,我使用的是Hugo Scroll這個模板,我認為這個模板在修改後可以很好的去適配我想要的電競比賽的申請網頁的主題,同時這個模板也較為簡單,適合學習使用。

在成功讓網站跑起來後就是去修改原本模板的css樣式了,本次作業的主題是傳說對決,所以我先是從Google上試圖尋找我想要的素材,但是都不符合我的要求,隨後我則直接到傳說對決的官網抓素材,並且也參考了傳說對決官網的各類css樣式,發現其實很多效果不必用寫的,可以直接使用background屬性放圖片來達到“電競”網頁的效果。在製作的過程中我還更改許多字體的css屬性(例如添加shadown)使其更具有電競遊戲的感覺。

本次是我第一次不是單純為了個人興趣去製作網站,所以製作網站的主題肯定也是我不曾想過嘗試的。同時由於本身對於電競項目的不了解,所以在編寫css當中也參考了許多遊戲的官網,發現其實遊戲的網頁設計和傳統的網頁設計上其實有許多的不同點。

現代的網頁設計講究講究扁平乾淨的同時,添加華而不實的動畫,特效等增加用戶的體驗,同時會儘量減少不必要的資源量費,所以不會經常使用到圖片當作背景。但是電競的網頁為了營造遊戲的氛圍,所以會大量使用到圖片來點綴,同時增加許多效果。這樣做的優點是對於前端工程師來說及其簡單方便,只要使用圖片即可,同時對於喜歡遊戲的用戶來說,會有十分的親切感。但缺點也有為明顯,就是因為需要加載大量的圖片、特效使帶寬成本大大的提高,對於伺服器和用戶的網路帶寬來說有一定的要求。

資料下載區(原始PDF檔案下載)

Github下载

本文作者:萌小志
本文链接:https://mengxiaozhi.galigali.club/post/3472144883/
版权声明:本文采用 CC BY-NC-SA 3.0 协议进行许可
×