前端界流傳的神奇招式
TRANSCRIPT
前端界流傳的神奇招式
LESSON 2
前端界流傳的神奇招式
LESSON 2
1. 分享建置網站Q&A
2. 安裝Sublime Text 3
3. 練習實用技巧
Q1: 想要了解設計師、前端、後端的關係鏈
Q3: 想要了解自己該如何組織網站架構？
Q4: Javascript 學習應該如何開始？
Q4: Javascript 學習應該如何開始？
Q5: 希望知道一些網路自學的方法？
Q5: 希望知道一些網路自學的方法？
• 官方文件
• 官方論壇
• 付費教學
• 追蹤高手動態
Q6: 如何套用或修改已有的library
第五堂課將會分享Bootstrap的實務教學
Q7: 如何寫css動畫？
Q7: 如何寫css動畫？
Q8: 想要學習版本控制，可否教學？
第六堂課將會分享GIT的基本觀念
Q9: 希望Anna能分享成為前端工程師的過程
一開始也許沒這麼順利
但
遇見妳想要守護的夢想
妳會變得更強！！
Q10: 想要建造一個網頁，可以放很多照片、互動留
言區、使用者個別記錄等的網站，也希望它能容易被
搜尋，未來可以加裝資料庫跟金流，那要怎麼學習？
前端界流傳的神奇招式
LESSON 2
1. 分享建置網站Q&A
2. 安裝Sublime Text 3
3. 練習實用技巧
Sublime Text 3 簡介
Sublime Text是一個文字編輯器軟體，
這個軟體可以透過下載各種插件來增強功能。
Sublime Text 3 安裝
1. 首先到Sublime Text 3官方網站下載軟體
2. Package Control 安裝
3. 套件安裝/移除
付費版和免費版有什麼不同？
Package Control 安裝
1. 首先到Sublime Text 3官方網站下載軟體
2. Package Control 安裝
3. 套件安裝/移除
Package Control 安裝
安裝步驟：
1. 透過快捷鍵 ctrl+` 開啟主控台命令列
2. 輸入左方代碼
Package Control是插件的管理員
①
②
Package Control 安裝
將代碼複製到主控台命令列按下Enter即可完成Package Control 安裝。
Package Control 安裝
1. 首先到Sublime Text 3官方網站下載軟體
2. Package Control 安裝
3. 安裝/移除套件
安裝套件
Package Control安裝完成後，
我們使用
Preferences->Package Control
或快速鍵
Ctrl + shift + P (Mac: Command ⌘ + shift + P)
來開啟 Package Control ，
接著輸入 install ，在你輸入的同時就會顯示相關的項目了。
移除套件
Package Control安裝完成後，
我們使用
Preferences->Package Control
或快速鍵
Ctrl + shift + P (Mac: Command ⌘ + shift + P)
來開啟 Package Control ，
接著輸入 remove 即可
我們先來介紹建置基本網站的架構吧！
下載DEMO檔案
Help to show content in browsers
Help to style the content Help to interact with content
我們先來了解建立基本網站的架構吧！
index.html
index.html-載入CSS
CSS 的載入方法
1. 利用style標籤，將css內嵌在 HTML 文件
<head>
<style type="text/css">
div {
background-color:red;
}
</style>
</head>
CSS 的載入方法
2. 使用link標籤載入外部 CSS 檔案
3. 使用style屬性，對標籤添加樣式
3. 在css檔案內使用!import 方法來匯入其他樣式
<link href=“路徑/檔名.css" rel="stylesheet" type="text/css" />
<div style="CSS屬性名:屬性值;">任意內容</div>
@import url(檔名.css);
index.html-載入CSS
Javascript 的載入方法
1. 內嵌在 HTML 文件
2. 載入外部 JavaScript 檔案
<script language="JavaScript">
JavaScript 程式碼</script>
<script src="檔名.js"></script>
index.html-載入Javascript
前端界流傳的神奇招式
LESSON 2
1. 分享建置網站Q&A
2. 安裝Sublime Text 3
3. 練習Sublime Text實用技巧
安裝好用的套件
Package Control安裝完成後，
我們使用
Preferences->Package Control
或快速鍵
Ctrl + shift + P (Mac: Command ⌘ + shift + P)
來開啟 Package Control ，
接著輸入 install ，在你輸入的同時就會顯示相關的項目了。
Emmet (Zen Coding)
再按下TAB
輸入div>(header>ul>li*2>a)+footer>p
Emmet (Zen Coding)
結果
Emmet (Zen Coding)
結果再試著輸入p*2>lorem
AutoFileName
Sublime Text plugin that autocompletes filenames
DocBlockr
Simplifies writing DocBlock comments in Javascript, PHP,
CoffeeScript, Action script, C & C++
Pressing enter or tab after /**
Color Highlighter
ColorPicker
Linux: ctrl+shift+c
Windows: ctrl+shift+c
OS X: cmd+shift+c
A multi-platform color picker plugin
前端界流傳的神奇招式
本次課程
1. 分享建置網站Q&A
2. 安裝Sublime Text 3
3. 練習實用技巧
搭載網頁核心的基本架構
下次課程
HTML基礎教學
分享結束，很高興認識大家，謝謝：）