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

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

工欲善其事必先利其器 

我先来讲一下工具的选用吧,个人认为可选择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键也可以

喜欢不要忘记点一个赞哟

  • 28
    点赞
  • 75
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: DreamweaverVSCode都是常用的网页开发工具,但它们有一些不同之处。 Dreamweaver是一款商业软件,由Adobe公司开发。它是一款功能强大的网页开发工具,可以用于设计、编写和管理网站。它具有可视化编辑器、代码编辑器、代码提示、代码折叠、代码高亮等功能,适合初学者和专业开发人员使用VSCode是一款免费的开源代码编辑器,由微软公司开发。它具有强大的代码编辑功能,支持多种编程语言,包括HTML、CSS、JavaScript等。它还支持代码提示、代码折叠、代码高亮、调试等功能,适合开发人员使用。 总的来说,Dreamweaver适合初学者和专业开发人员使用,而VSCode则更适合开发人员使用。 ### 回答2: DreamweaverVSCode都是网页开发中比较流行的编辑器,它们各有优缺点。Dreamweaver是由Adobe公司开发的一款综合性网页编辑器。VSCode是由微软开发的一款轻量级的代码编辑器。 首先,Dreamweaver提供了比VSCode更多的功能,例如可视化设计功能、网站管理功能、FTP上传功能等。这些功能让初学者能够更轻松地创建并管理网站。而VSCode则更注重代码编辑方面的优化,例如语法高亮、代码自动完成以及快速跳转等,有利于提高开发效率。VSCode也提供了丰富的扩展插件,可以更灵活地配置对应开发环境。 其次,Dreamweaver是一个商业软件,需要购买授权才能使用。而VSCode是免费的,并且有着广泛的社区支持,其生态系统极其丰富,可以更容易地找到适合自己的插件。 最后,Dreamweaver更适合处理较为复杂的项目,例如大型企业级网站。而VSCode更适合小型的项目,例如个人博客或小型网站。VSCode支持各种语言的编写,包括HTML、CSS、JavaScript等,还支持主流的框架和库。 总之,DreamweaverVSCode均有其适用场景。对于初学者来说,Dreamweaver更容易上手,但相对需要更多的费用;而对于专业的开发人员,VSCode则更适合。因此,用户应根据自己的具体需求和技术水平选择合适的编辑器。 ### 回答3: Dreamweaver是一款功能强大的网页编辑器,它能够帮助开发人员快速地创建和编辑网页,并且支持多种语言和标准。它的优点在于可视化编辑界面,拖拽式设计,代码自动补全,代码风格检查等等功能,这使得其非常适合初学者使用。同时,Dreamweaver也支持多种服务器端语言,比如PHP和ASP.net等,这可以使得它成为建立动态网站的理想工具。 VS Code是由微软开发的一款轻量级的代码编辑器,其最大的优点就是速度快、功能丰富,轻量化支持插件和扩展。它具有强大的代码自动补全和语法高亮等功能,能够高效地帮助开发人员完成代码编写。由于VS Code的内存占用较小,同时还支持快速打开和运行代码等高级功能,这也使得其非常适合用作轻量级的代码编辑器。使用VS Code需要一定的技术基础,对于初学编程的人来说可能会有些难度。 综上所述,Dreamweaver和VS Code都有各自的优点和适用范围。如果你是一个初学者,需要一个可视化编辑环境来快速创建和编辑网页,应首选Dreamweaver。而如果你是一个有经验的程序员,需要支持多种语言和插件以更高效地完成工作,则应选择VS Code。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值