web开发-tools

  • A+
所属分类：Web前端
摘要

 　　网页开发工具：HBuilderX、VSCode、SublimeText、Dreamweaver、WebStorm…  VScode —— 丰富的快捷键、代码整理方便
便宜好用的国外VPS推荐

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插件


　　左侧最后一个






插件
作用






chinese（simplified）
汉化语言包




open in browser
右键点击浏览器打开html文件




auto rename tag
自动重命名配对的html标签




css peek
追踪至样式




easy less
less转css文件（rem+less+媒体查询）




cssrem
px转rem插件（rem+flexible）




terminal
控制台调试






　　


　　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. 

  2. 

    ctrl + g 合并图层
    

    3. 

  3. 

    ctrl + t 移动图层
    

    4. 

  4. 

    alt + 放大
    

    5. 

  5. 

    ctrl + d 取消选区
    

    6. 

  6. 

    shift + alt 以中心点向外画圈
    

    7. 

  7. 

    前景色 填充：alt + delete
    

    8. 

  8. 

    背景色 填充： ctrl + delete
    

    9. 



 


　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 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。


 　　窗口菜单——扩展功能，能用就是完整版，安装注册完成后，扩展功能显示；


 

			


						
									
						
				
									

				
							
便宜好用的国外VPS推荐