前端(web)的工具的使用(DreamWeaver,HBuilder ,VScode)小心得

  • Post author:
  • Post category:其他


我也刚开始学习前端,我想一步一步的记录下我的学习过程,今天是写博客的第一篇

工欲善其事必先利其器

我先来讲一下工具的选用吧,个人认为可选择3款软件比较好用


1 DreamWeaver

我觉得这个软件初学者可能比较适合,这个软件上手快,用起来比较简便,几乎不需要什么配置。

简单的说一下一下DreamWeaver的一些使用吧


1)用DreamWeaver创建一个web项目吧

首先就是我们要新建一个站点

点击新建点,然后选择一个本地的文件夹,然后新建的站点就在右边哟,你右击你新建的文件夹就可以开始新建你的html css js 等文建了


2)一些简单有用的操作

(1)编辑区

这3个按钮将会让你的工作区呈现不同的效果

实时视图可以看到自己的代码呈现的效果

(2)当你想换自己的浏览器的时候,你可以点击文件下面的实时预览的编辑浏览器列表,里面也可以看到用浏览器预览的快捷键,在里面你也可以找到字体的调整等等


3)我之前用DreamWeaverC6的时候它的网页预览的前缀是


ftp


,后面我用DrreamWeaverCC2018的时候它的前缀是


http


结果它就把我js代码给拦截了,js代码效果就出不来,一种处理方法就把js的onload去掉,并把js的引用写在body的后面,一种方法就是不用这个版本嘻嘻。这个错误让宝宝我找了好几天呢嘤嘤


2 HBuilder 做为快要入门的小白菜,我真的觉得这个软件好好用(我这个软件是在mac机上面用的,但是在windows上面应该是一样的)

1)

首先呢就是创建一个web项目啦,它创建web项目很简单的,胜是得我的心,

点击加号你点web项目就好了,它自动就帮你把html, css ,js给你创建好了,所以就特别方便,并且html的模板也给你了,是不是so cool


2)然后就是用浏览器浏览了,它没有像vscode那么麻烦,直接点击上面就有选项,宝宝我表示超喜欢


3)就是各种视图和快捷键,它就在右侧很方便就可以找到,超让人喜欢有木有


3 VSCode

对于我这样子的一个新手来说呢,虽然我是计算机专业,但是我觉vscode我现在刚开始用有很多的地方感觉不是那么顺手,因为它首先要安装很多的插件,并且我想换一个浏览器浏览还要去改代码。其中view in browser插件的快捷键我还用不了。是因为我道行太浅了,所以用vscode不顺手,很多的大佬都是用的vscode现在很多的公司也是用是vscode,并且我在网上查了一般大佬们都说vscode很好用,等我学深一点再来更新vscode的用法吧


1)vscode拿来写前端需要安装运行插件

,这个网站说得还是比较完整的

https://blog.csdn.net/shunfa888/article/details/79606277

(其他博主的网站)


2)vscode想要建一个web项目是这样子的

先在一个地方建一个空文件夹,然后点击文件,再点击文件下面打开文件夹,选择刚才建好的文件

点击文件

再点击左边的第一个就能看到你刚刚打开的文件夹,我的是myproject然后在 myproject那一行的右边有加号,点他就可以添加了后缀可以html或者css js,这样子我们的web工程就建好了


3)后面就是就是看效果的时候了

因为安装了插件 view in browser就可以用快捷键ctr+F1可是用快捷键的时候居然报错,错误 :Running the contributed command:’extension.viewInBrowser’ failed. 说我扩展有问题,于是我按照网上的办法先卸载了这个插件,再安装结果一样,后面还是用的右击html的方法点击第一个view in browser ,但是有一个小细节不要忽略了就是记得先ctr+s以后再在浏览器里面看不然什么效果也没有,并且也不像DR那样会提示你是否保存,也许你会和我一样刚开始找不出错误哟

4)

当你刚建立一个html文件的时候呢一定是空白的,让你去写那些开头什么可能是记不住也容易写错,所以在第一行输入一个!然后按tab键就出来啦或者输入html5按tab键也可以

喜欢不要忘记点一个赞哟



版权声明:本文为jiangyutongyangyi原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。