iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

用敏捷管理我跟 HTML&CSS 的 30 天親密接觸系列 第 3

|Day 03|新手安裝 Sublime

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20190916/20120833GhLz5HjKiG.jpg

網頁起步走

剛剛前面介紹了何謂 HTML 和 CSS,你可能會很困惑,當你想要開始替網頁做設計時,HTML 和 CSS 要寫在哪裡呢?通常會下載 Sublime,它的執行速度非常快,也支援多種程式語言使用!

若想要認識 Sublime,提供維基百科連結的簡介給你,如果想要直接安裝,不妨跟著我以下的步驟,逐步設定好!
完成後,就可以開始寫 HTML 了:)

Sublime 其實是一套跨平台和程式的編輯器,操作介面非常簡單,你可以透過安裝外掛,來讓這套軟體能更有效率地被使用。

那現在我們就開始進行 Sublime 的安裝教學了,希望以下文字可以讓新手一次搞定,老鳥覺得寫得正確有邏輯!

  • 第一步:下載 Sublime 後,你會出現以下畫面:
    https://ithelp.ithome.com.tw/upload/images/20190916/20120833VYZnrH2RZY.png

  • 第二步:接下來一定要安裝超級好用的 Package Control ,畫面如下圖,它可以幫你的 Sublime 安裝更多好用的套件。

https://ithelp.ithome.com.tw/upload/images/20190915/20120833qZPBo74HO4.png

  • 第三步:按下 install 後,請把以下文字複製起來

https://ithelp.ithome.com.tw/upload/images/20190915/201208337Px0jEsBU5.png

  • 第四步:在 Sublime 上進到 View 的導覽列 -> Show Console

https://ithelp.ithome.com.tw/upload/images/20190915/20120833JheDIYGG6Q.png

  • 第五步:然後把剛剛複製的文字貼到你的 Sublime 下方的白欄位:

https://ithelp.ithome.com.tw/upload/images/20190915/2012083387zADVklv3.png

  • 第六步:接著到 Sublime Text 的導覽列上找 Preference -> Package Control 啟用這個套件。

https://ithelp.ithome.com.tw/upload/images/20190915/201208330hryS5kXH7.png

  • 第七步:你就要安裝 emmet 套件,未來可以幫助你大幅減少寫 HTML 和 CSS 的時間!

幫大家先整理出 emmet 的安裝步驟:
- Preference -> Package Control
- 在 Package Control 輸入:emmet 

https://ithelp.ithome.com.tw/upload/images/20190915/20120833rqBt45n8k4.png

以上步驟都已完成後,開個新檔案,並在右下角的地方選擇 HTML 的格式。

https://ithelp.ithome.com.tw/upload/images/20190915/20120833132JxBqJt6.png

選好之後回到主畫面,並輸入 > !

https://ithelp.ithome.com.tw/upload/images/20190915/20120833XP1wtn4mZc.png

並按下 tab 鍵,即會出現可以寫 HTML 的標籤。

https://ithelp.ithome.com.tw/upload/images/20190915/20120833CSex0AQkKY.png

安裝好了之後,下一回就來了解,怎麼樣開始寫 HTML 吧:)


上一篇
|Day 02|HTML 和 CSS 間的合作關係
下一篇
|Day 04|寫在開始寫網頁之前
系列文
用敏捷管理我跟 HTML&CSS 的 30 天親密接觸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言