2015年7月23日 星期四

網頁設計&程式語言入門教學大推薦、專為不會寫程式的你和妳

不會寫程式的你除了Google blogger以及痞客邦外還有什麼選擇?相信大家想要的不只是網誌而已,而是能夠更加隨心所欲表現自己,真正屬於自己的網站─ Wix.com可以滿足你的夢想。


圖片引用自網站

最近接觸一些網頁設計的基礎後才瞭解到,從無到有要建立一個網頁和想像的完全不一樣,光鮮亮麗的外表下都埋葬著不知多少新鮮工程師的肝臟呢(笑)。

但 Wix.com的出現讓想玩網頁的業餘者不必面對背後的辛酸了!你可以繼續輕鬆地待在光鮮亮麗的舞台上,盡情的創造自己的網頁



過程中的每一步網站都有提供相當清楚的影片解說,甚至網站還提供了電話諮詢的服務呢(別亂打!公司在美國...)。台灣也已經有玩家分享了圖文並茂的使用教學,大家也可以參考看看噢,盡情玩樂就是了~

雖然像 Wix.com幫你把事情都處理好了,但肥鰻覺得如果能瞭解一些基礎的 html&css語法會對於網頁有更正確的認識,也更能掌握自己網頁的狀況。

圖片引用自網站

對於從沒寫過程式或是有些基礎的人,想學習 html&css或是 Python, Ruby, JaveScript等等熱門程式語言,肥鰻極度極度推薦 Codeacademy這個網站。

不需要任何背景,基本上只要看得懂簡單的英文一定能從無到有一步步教會你的。

有了 html&css的基礎後你應該會發現要獨立建起一棟大樓不是想像中的那麼輕鬆對吧?其實網路上有許多網站提供相當不錯的 framwork(骨架)可以使用哦,肥鰻這邊介紹其中比較具有知名度的兩個網站給大家:

圖片引用自網站

介紹:Bootstrap提供非常多炫麗的特效,但由於檔案較大,當網站成長至瀏覽數較高時的網站需注意流量問題。

圖片引用自網站

介紹:Pure一如其名,單純、簡潔,提供基本的架構,檔案非常地小。

這兩個網站跟 Wix.com的性質是大不相同的。Wix.com直接提供接近成品的網頁 template(模板),並且將背後需要寫程式的地方都用直覺式的操作方式解決掉了;

後者則是提供了許多網頁中常會使用的工具和特效的程式碼給大家,取向於要自己建構整個網站的人,因此必須要有 html&css的基礎才會看得懂在做什麼。

在這邊肥鰻問問大家一個可能看似理所當然的問題,大家有注意到同一個網站在電腦、平板以及手機上看起來的樣子卻不太一樣嗎?



圖片引用自網站

這其實是利用到網站設計中稱作 responsive web(自適應)的概念,隨著螢幕大小的變化,包含將網頁視窗拉大拉小網頁都會隨之改變。


上述兩個網站提供的 framwork都已經內建自適應的設計了哦!現在的網頁中這個概念已經相當廣泛,而設計的好壞甚至會影響在Google上被搜尋的排序呢。

有天身邊專攻平面設計的朋友介紹了許多國外網頁創作的新概念,肥鰻當下真的是眼界大開,完全感受到了前所未有的網站體驗。以下舉個例子:


"指讓通過鼠標實現網頁多層背景以不同的速度移動,從而形成立體的運動效果,帶來非常出色的視覺和交互體驗。" (文字引用自網站,想看更多例子可以點引用的網站哦!)

相較起來臺灣的網站真的算是相當保守,建議大家多看看這些跳脫固有網頁框架的新設計,讓自己看待網頁的眼光改頭換面一番。

肥鰻覺得這一篇的密度有點高...但在電腦相關的世界中,新知識就是這樣不斷不斷地以爆炸的形式呈現出來,唯有透過不斷的學習才能存活下去...一起學習吧!

喜歡這篇文章的話請不要忘了點個
關鍵字:網頁設計, 網頁製作, 網頁開發, html教學, css教學, 自適應網站, RWD, python教學, Ruby教學, JavaScript教學, 視差滾動

沒有留言 :

張貼留言