1、Web代碼工具

　　網頁開發工具：HBuilderX、VSCode、SublimeText、Dreamweaver、WebStorm...

• HBuilderX —— 內置瀏覽器、app云打包

• VScode —— 豐富的快捷鍵、代碼整理方便

• SublimeText——文藝青年 輕量級，打開速度超快

• Dreamweaver——普通青年

• WebStorm

2、Emmet語法

　1- 快速生成HTML結構

　　1、生成標簽 — 直接輸入標簽名，按tab鍵即可：比如div+tab 鍵， 就可以生成 <div></div>

　　2、生成多個相同標簽,加 * 即可：比如 div * 3 就可以快速生成3個div

　　3、生成有父子級關系的標簽，可以用 > 即可，比如 ul > li 就可以了

　　4、生成有兄弟關系的標簽，用 + 即可，比如 div + p

　　5、生成帶有 類名 或者 id 名字的， 直接寫 .demo 或者 #two ，再tab 鍵

　　6、如果生成的div 類名是有順序的， 可以用 自增符號 $，.demo$*5

    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

　　7、如果想要在生成的標簽內部寫內容可以用 { } 表示, 如 div{ }

    <!-- .div{文字內容直接顯示} -->
    <div class="div">文字內容直接顯示</div>

    <!-- .div{文字內容直接顯示}*5 -->
    <div class="div">文字內容直接顯示</div>
    <div class="div">文字內容直接顯示</div>
    <div class="div">文字內容直接顯示</div>
    <div class="div">文字內容直接顯示</div>
    <div class="div">文字內容直接顯示</div>

　　8、同時生成五個超鏈接，并且內嵌文字：a{文字內容}*5；

　　然后按住shift和alt，滑鼠左鍵向下拖動，別松開，輸入#號，可同時設定5個；

　2- 快速生成CSS樣式語法

　　CSS 基本采取簡寫形式即可.

　　1、比如 w200 按tab 可以 生成 width: 200px;

　　2、比如 lh26px 按tab 可以生成 line-height: 26px;

3、VSCode快捷操作

輸入 ！再按 tab 鍵，生成 html5 架構；

Ctrl + x 剪切；

Ctrl + / 注釋；

Ctrl + h 查找替換；

Ctrl + S 自動調節格式保存； 

shift+alt+向下鍵 快速復制上一行； 

Ctrl + 加號鍵 ，Ctrl + 減號鍵 可以放大縮小視圖；

IDEA ctrl+d 復制上一行；ctrl+alt 多行選中； 

導航欄里 查看 選項里有 自動換行，可針對p標簽的文字內容自動調節；

4- VSCode插件

　　左側最后一個

　　1、cssrem插件：因為 cssrem 中css自動轉化為rem是參照默認插件的16轉換的所以需要自己配置；

　　　　　　　　　　右上角設定鍵，設定更多操作 首選項按鈕——打開setting. json——輸入cssroot——cssrem.cootFontSize:16px;——點擊左側編輯，復制修改，——重啟

　　2、快速格式化代碼配置：右鍵格式化代碼——ctrl+s 自動對齊；

　　步驟：

　　　　1、檔案——首選項——設定；

　　　　2、搜索 emmet.inlcude;

　　　　3、在 setting.json下的 【用戶】 中添加以下陳述句:

　　　　　　"editor.formatOnType":true,

　　　　　　"editor.formatOnSave":true

5、ps基本操作

　　因為網頁美工大部分效果圖都是利用ps 來做的，所以，以后我們大部分切圖作業都是在ps里面完成，

　1、ps快捷鍵

• 檔案--打開 -- 可以打開 我們要測量的圖片

• ctrl+r 可以打開標尺 或者 視圖 -- 標尺

• 右擊標尺， 把里面的單位改為 像素 （默認cm）

• ctrl+ 加號 鍵 可以 放大 視圖 ； ctrl+ 減號 縮小視圖

• 按住空格鍵， 滑鼠可以 變成小手 ，拖動 ps 視圖

• 用選區（矩形工具） 拖動 可以 測量 大小

• ctrl+ d 可以取消選區 或者旁邊空白處點擊一下也可以取消選區

1. ctrl + j 復制圖層

2. ctrl + g 合并圖層

3. ctrl + t 移動圖層

4. alt + 放大

5. ctrl + d 取消選區

6. shift + alt 以中心點向外畫圈

7. 前景色 填充：alt + delete

8. 背景色 填充： ctrl + delete

　2、套索工具

　　多邊形套索：有角度，用于形狀，選區之后按移動鍵，到新圖層；

　　磁性套索：自動吸附，用于人體描邊；

　　魔棒工具：根絕容差自動選擇顏色，容差越小越接近；

　　反選：魔棒選區的是顏色，我們要的是人，ctrl + shift +i；

　3、切圖

　　1、手動切圖

　　　　切圖——勾選——存盤為web所用格式——在頁面中選中切片——存盤式改為當前切片；

　　2、圖層切圖

　　3、基于參考線切圖——利用標尺基于參考線的切片——存盤為web格式

　　4、清除切片、視圖：

　　視圖——清除切片、輔助線

　4、PS切圖

　　4.1 常見的圖片格式

　　1. jpg影像格式：

　　　　JPEG（.JPG）對色彩的資訊保留較好，高清，顏色較多，我們產品類的圖片經常用jpg格式的

　　2. gif影像格式：

　　　　GIF格式最多只能儲存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景和影片效果

　　3. png影像格式

　　　　是一種新興的網路圖形格式，結合了GIF和JPEG的優點，具有存盤形式豐富的特點，能夠保持透明背景

　　4. PSD影像格式

　　　　PSD格式是Photoshop的專用格式，里面可以存放圖層、通道、遮罩等多種設計草稿，

　　4.2 PS切圖 可以 分為 利用切片工具切圖 以及 利用PS的插件快速切圖

　　1、圖層切圖：

　　　　移動工具，點擊圖層，右擊匯出png；

　　　　若需要選擇多個圖層，需要合并為一個圖層在匯出；shift+選中，ctrl+e合并為一個圖層，右鍵匯出；

　　2、PS切片工具

　　1). 用切片選中圖片

• 利用切片工具手動劃出

• 圖層選單---新建基于圖層的切片

• 利用輔助線 來切圖 -- 基于參考線的切片

　　2). 匯出切片

　　檔案選單 -- 存盤為web設備所用格式 ---- 選擇 我們要的圖片格式 ---- 點存盤 --- 別忘了選中的切片

　　3). 輔助線和切片使用及清除

　　視圖選單-- 清除 輔助線/ 清除切片

　　4.3、切圖插件

　　Cutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出， 以替代傳統的手工 "匯出web所用格式" 以及使用切片工具進行挨個切圖的繁瑣流程，

　　它支持各種各樣的圖片尺寸、格式、形態輸出，方便你在pc、ios、Android等端上使用， 它不需要你記住一堆的語法、規則，純點擊操作，方便、快捷，易于上手，

　　官網: http://www.cutterman.cn/zh/cutterman

　　注意： cutterman插件要求你的ps 必須是完整版，不能是綠色版，所以大家需要從新安裝完整版本，

　　視窗選單——擴展功能，能用就是完整版，安裝注冊完成后，擴展功能顯示；

標籤：Html/Css

上一篇：CSS快速入門

下一篇：幸福西餅：靜態頁面制作專案總結