iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
1
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 7

第七步 - 找尋到關鍵的密鑰(網頁設計前的方便軟體推薦)

大家早安,我是喵橘,今天是炎熱的星期日,來寫點文章消消暑,微笑。

撰寫程式推薦的編輯器

在撰寫網頁相關的程式碼,需要有一個編輯器來協助你,HTML是一個純文字格式檔案,副檔名為 .html.htm,以下為常見的文字編輯器:

  1. 記事本:在 Wondow中內建的記事本,是每個人喜歡隨筆筆記的方便文字編輯器,除了不用再另外花時間安裝,記事本功能簡單易懂,推薦對於熟悉程式語法或想要記得架構的的朋友們使用。

https://ithelp.ithome.com.tw/upload/images/20190908/20117282mqwVBIYpOW.png

  1. Notepad++ :是一款功能相當完整的純文字編輯器,以GNU形式發佈的自由軟體,是喵橘我在研究所時期陪伴我的萬能編輯器。並且,有完整的中文化介面及支援多國語言撰寫的功能(採用UTF-8編碼),可完美地取代微軟視窗的記事本。

    官網網址:https://notepad-plus-plus.org/zh/

https://ithelp.ithome.com.tw/upload/images/20190908/20117282USxlgxZ9h4.png

  1. Sublime Text :是一款跨平台的程式編輯工具,可以藉由套件的安裝,來擴充不同領域的強大功能,方便每一個操作者選擇適合自己專屬的套件。大多數的套件使用自由軟體授權釋出,並由社群建置維護。

    官網網址:https://www.sublimetext.com/

    https://ithelp.ithome.com.tw/upload/images/20190908/201172829w7ffFiyqo.png

  2. Atom : 是一款GitHub開發的自由及開放原始碼的文字與程式碼編輯器。支援 Window、Mac OS 以及 Linux 系統。它背後支持它的社群網站發佈了許多佈景主題與套件工具。

    官網網址:https://atom.io/

    https://ithelp.ithome.com.tw/upload/images/20190908/201172822PXHTATssY.png

  3. Vistual Studio Code :是一個由微軟所開發的文字編輯器。不僅免費、跨平台和開放原始碼,內建了 Git 版本控制功能,同時也具有開發環境功能,還提供完整的除錯工具。

    官網網址:https://code.visualstudio.com/

    https://ithelp.ithome.com.tw/upload/images/20190908/20117282v87E5Tx8B6.png

推薦書籍

選擇到一個適合自己的工具書,喵橘我就推薦自己覺得幾本不錯的工具書,如下所顯示:

  1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

    網址 : https://www.books.com.tw/products/0010812394

  2. HTML&CSS:網站設計建置優化之道

    網址 :https://www.books.com.tw/products/0010546014

  3. HTML5‧CSS3 最強圖解實戰講座

    網址 :https://www.books.com.tw/products/0010722359

  4. 最潮 HTML5+CSS3 網頁版型設計:Standard Layout‧Grid Layout‧Single Page Layout

    網址 :https://www.books.com.tw/products/0010731482

  5. JavaScript大全(第六版)

    網址:https://www.books.com.tw/products/0010542183

  6. 網頁設計職人必修:網頁設計鐵則&問題對策 84

    網址:https://www.books.com.tw/products/0010751432

  7. 好設計の配色圖鑑:即翻即用,色彩搭配靈感見本帳!

    網址:https://www.books.com.tw/products/0010818128

推薦網頁

喵橘推薦自己網路上常用的一些網頁,可以搭配自己的工具書,得到一舉兩得的功效。

  1. W3CSchool

    網址:https://www.w3school.com.cn/

  2. MDN web docs

    網址:https://developer.mozilla.org/zh-TW/docs/Learn

  3. LearnCode.academy

    網址: https://www.youtube.com/watchv=tq7dqdHCc7U&feature=youtu.be&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc

  4. Introduction to Web Development

    網址:
    https://frontendmasters.com/courses/web-development/?u=a7359ff0e18cf1c378d554df4893bf4368a6d33b

  5. 學習 CSS 版面配置

    網址:http://zh-tw.learnlayout.com/

明天預告


今天講解 網頁設計前的方便軟體推薦,明天會講解 設計框架相關注意事項,感恩大家的靜靜的聆聽。


上一篇
第六步 - 第一站,顏色萬花筒,七彩村(顏色配置相關基礎)
下一篇
第八步 - 了解密鑰使用方法(設計框架所會遇到的常見問題)
系列文
一步一腳印,探索網頁前端設計之美33

1 則留言

0

我要留言

立即登入留言