【網頁設計】想學寫網頁卻無從下手嗎?完整網頁開發教學(上)

【網頁設計】想學寫網頁卻無從下手嗎?完整網頁開發教學(上)

TC X 今日 商業職場合作文章

【推薦原因】

如果你想學習網頁設計,網上關於網頁設計的資料雖然很多,但就是資料太多,初學者根本無從入手。本系列將會分開9個章節,由基本概念架站方法編程學習路徑等。

內容濃縮至你真的需再知道才會講解,用最簡單易明的「人話」去說明各種概念,讓你打穩基礎,好好去學習網頁設計。如果你正在想學習網頁設計,看這篇文章就對了!


 

網頁設計1:基本概念

要編寫一個網頁,原來可以分為前台(Frontend)及後台(Backend)。

前台(Frontend)就是網頁的外觀。例如你看到的文字,圖片,美麗的排版等等,通通都是前台(Frontend),主要由3種編程語言組成:HTML、CSS、Javascript。

後台(Backend)就是網頁的功能。例如網站可以讓你註冊,提交數據等等,就是後台(Backend),可選擇使用的語言有很多,PHP, NodeJS, C, JAVA, RUBY, PHY, Python……我們只要選擇一種來用就可以。

 

網頁設計2: 內容管理系統(CMS)

CMS就是讓一個不懂編程的人,也能夠更新網頁的內容。

如果網頁沒有CMS,你不懂編程的話,是不能夠更新網頁內容的!有了一個CMS後,你便可以像更新Facebook一樣,輕易地更新網頁內容。

像Wordpress,Drupal等等,我們稱之為「開源」的CMS。意思是它們的源代碼是公開的,全世界的編程員也可以一起維護,開發這些源代碼。你可以免費,合法地使用它去為你或你的客人建立網站。

 

網頁設計3:響應式設計(Responsive)

響應式設計(Responsive)就是使用同一堆源碼,讓你的網站在桌面,Tablet或手機上都可以美觀地呈現。

TC編備註:響應式網頁設計(Responsive Web Design)簡稱RWD

讓我們看看例子吧:burdstrom.com在桌面上是這樣的

網頁設計

網頁設計

在手機上則是這樣的。

網頁設計

網頁設計

你會看到,透過一些外觀的小改動,在桌面或手機也可以美麗地呈現網頁。我們通常會利用CSS,及少許Javascript做到Responsive的效果。

 

文章由【鬍子科技學院】授權提供TC使用,原文文章標題為【學寫網頁教學2019 – 9個課程】,版權歸【鬍子科技學院】所有,欲轉載請聯繫原發布單位,經TC彙集整理,部分內容為TC創作,未經授權不得轉載。首圖來源:pexels


TC Summary

基本概念:網頁分前端(Frontend)負責網頁的外觀、後端(Backend)負責網頁的功能。

內容管理系統(CMS):讓一個不懂編程的人,也能夠更新網頁的內容的系統。

響應式設計(Responsive):讓網站在電腦&行動載具上都能美美的呈現。

 

《延伸閱讀》

 

[台中實習] TC學期實習

要如何在短時間內提升自己的軟/硬實力呢?答案是大量且有規劃性的實作。

【網頁設計】想學寫網頁卻無從下手嗎?完整網頁開發教學(上)

【網頁設計】想學寫網頁卻無從下手嗎?完整網頁開發教學(上)

軟體開發、網頁製作、社群品牌操作、SEO數位行銷、人資助理、商業執行助理、客戶規劃助理,七個實習職缺,最多11位實習生可參與TC完整的培訓課程,學期實習結束後,你會獲得:

  1.  實際參與整個大型專案開發的經驗
  2.  你所產出的東西都會被客戶使用/看見
  3.  豐富的作品集充實自己的履歷

想成為數位/行銷的人才嗎,TC實習讓你在實作中學習,學習中成長,還不快加入!

前往申請:https://pse.is/tcintern9

  

觀看更多關於今日訊息精華文章:

今日工具箱輔助工具,如office系列模板、製圖教學、PS/AI小技巧等工具彙整,幫助你有效學習及應用。
今日態度精選各國不同風格的穿搭,透過達人們分享的穿搭態度,讓你也可以照著自己想法,碰撞出一個屬於自己的獨特風格。
今日成長各種領域的學習資源,不論職場、語言、設計等技巧,讓你在工作之餘,能從今日成長中找到想學會的教學懶人包,透過文章來提升自己
今日打卡旅遊美食專欄,整理台灣最好的美食及旅遊去處,讓喜歡趴趴造的大學生及背包客們能更輕易的感受台灣風情。
今日規劃關於理財的懶人包,包含財經趨勢、理財課程資訊、理財心法等資料總整理。