菜鳥救星網頁設計教學:Google AMP新技術讓網頁開啟4倍快

圖片來源:截圖自AMP官方網站

文/圖、Andy老師

科技進步神速,現代人依賴手機的程度已無法想像,根據調查,40%的使用者會放棄一個載入速度超過3秒的網站,而且每增加1秒,使用者滿意度就會減少16%,所以,網頁開啟的速度變得非常重要。Google這次新推出的網頁技術AMP (Accelerated Mobile Pages),為的就是要增加手機讀取網頁速度。

情境:
當你正在等公車時,想要瀏覽的網頁卻還沒成功載入,等了許久,卻出現煩人的商品推銷廣告,而因此錯過公車……心裡是否無限ooxx。

閱讀全文 →

菜鳥救星網站企劃好文分享:4個Mockup網站,快速合成不失質感-上

文、G小編

在製做網站、簡報或是撰寫新聞稿時,常會需要示意圖合成,讓觀看者更明白。首先,打開Photoshop……有時候怎麼橋,角度就是抓不好,是否拉了老半天,角度還是怪怪的?我的老天鵝阿!現在就立刻推薦幾個Mockup高質感的網站,讓你製作合成圖不再費力。

什麼是Mockup呢?根據Wikipedia的說明是指,在製造及設計上,Mockup是一個設計或是設備的模型,用來教學、展示、設計評估、推廣或是其他用途,可以是比例模型或和實物一様大的模型。若Mockup已有系統一部份的功能,可以測試其設計,則稱為原型(prototype)。兩者的差異,簡單來說就是Mockup並不具備實際功能的原型。

閱讀全文→

菜鳥救星網頁設計小知識:為何不能使用中文命名檔案?

文、前端小編

在製做一個網站時,往往不單單只要有一個畫面那麼簡單,一個網站會包含了許多檔案:文字、圖片、程式碼、影音……等等。當你想要架設一個網站時。你需要將這些檔案在你的網站伺服器上一一的架構好,且分門別類的命名,以確保這些檔案們能夠互相溝通,讓你的網頁能夠正常顯示,網站才能正常上線。

閱讀全文 →

菜鳥救星網頁設計:純CSS手風琴效果

文、前端小編

剛接觸CSS的你,對於Javascript還尚未有深刻的認識,要怎麼做出下面如圖所示的手風琴效果呢?

這個使用範圍相當廣又簡單方便的效果:手風琴效果,一般網站可以用在選單、產品分類,或是新聞公告…等等,就看網站開發者要怎麼運用。現在就跟著我們一步一步來完成吧!

閱讀全文 →

菜鳥救星網頁設計教學:按鈕Hover效果(下)

文、前端小編

設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕hover效果不只會豐富你的網頁,還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧!

► 回顧 網頁設計教學:按鈕Hover效果(上)

閱讀全文 →

菜鳥救星網頁設計教學:按鈕Hover效果(上)

文、前端小編

設計網頁的時候要怎麼達到吸引使用者但又不太複雜的效果或特效呢?簡單的按鈕hover效果不只會豐富你的網頁,還會加強你的網頁設計感。下面就來一一介紹幾個簡單的按鈕hover效果吧!

在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo,且建立三個a標籤,並將其class命名為hover,在依序新增對應的data-hover屬性。

閱讀全文 →

菜鳥救星網頁設計教學:8個簡單的CSS Hover效果

文、前端小編

剛入門網頁的你時常苦惱網站一動也不動覺得很死板嗎?強大的CSS3提供了相當多的新功能,例如transition、transform、border-radius……等等,透過這些新功能,可以讓原本比較靜態的網頁,變成有許多動態繽紛的效果。現在就來看看適合前端入門的一些簡單又實用的CSS Hover效果吧!

在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo。

閱讀全文 →