发表日期:2016-07 文章编辑:小灯 浏览次数:1096
接下来的学习中,我们将使用 HTML 与 CSS 进行网页开发,首先要做的就是选择开发工具。
在一些教程中,主张初学者使用 Windows 自带的记事本编写代码。这里笔者个人是非常非常的反对的,徒手写代码不仅仅不会提高编程水平,反而变相的加大了编程难度,降低了学习者的编程兴趣。一个好的开发工具,会使编程具有乐趣,使编程简单快捷。
这里笔者就推荐几款网页开发的工具,供大家选择。个人认为比较好的有:Sublime Text,Atom,Visual Studio Code,EditPlus,Nodepad++,WebStorm,DreamWeaver。其中,前面5款是轻量级的,只有几M大小,后面两款是IDE级的。
在所有上面的开发工具中,如果只能装一款,首推 Sublime Text。它不限于网页的开发,在后面学习 Python 和 JavaScript 的编程中也会使用到它。
Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。
最最关键的是,它是免费的!而且拥有强大的插件库。
Sublime Text下载地址:https://www.sublimetext.com/3
这一项是可选的,只是为了让读者了解配置文件的内容。
在菜单栏选择 Sublime Text->Preferences->Setting-User
,注意其中Setting-Default
是默认的系统配置,是不可修改的。通过修改用户设置会覆盖系统对应的默认配置,下面是笔者的配置,加了注释。
{ "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主题设置, 这是下载主题后, 自动生成的, 也可以手动配置 "font_size": 15, #设置字体大小, 我比较喜欢大一点的字体 "ignored_packages":#设置忽略文件类型, 第二个是默认忽略的, 第一个markdown文件我使用另一种文件打开, ["Markdown","Vintage" ], "create_window_at_startup": false, #取消启动时,自动打开新窗口的设置, 这个设置很恶心, 每次启动后会自动生成一个空白窗口 "open_files_in_new_window": false, #取消打开文件时会新生成一个窗口, 默认设置每次打开一个项目会重新生成一个窗口 "highlight_line": true, #高亮当前编辑行, 其实高亮的不明显 "highlight_modified_tabs": true, #设置文件修改时, 标签高亮提示, 这样可以提示保存 "show_encoding": true, #在窗口右下角显示打开文件的编码 "original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主题设置 "translate_tabs_to_spaces": true #将tab键的形式改为四个空格 }
因为我们需要进行网页开发,而 Sublime Text 的编译(Build)选项默认不带有HTML。这里我们让它能够Build HTML的代码,使用自定义的浏览器打开。
打开该路径:Preference - Key Bindings-User
在" ] "前输入以下代码:
{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }
这样一来,按下ctrl+shift+enter
,就可以使用系统默认浏览器打开代码了。
Sublime Text 如果离开了 Package Control 就基本废掉了大半,Package Control 提供给了 Sublime Text 强大的插件库,同时使得用户很方便的去下载使用它们。
打开 Sublime Text 3 并且按下 ctrl + ` 或者选择 View > Show Console
打开控制台,然后将下面的代码复制进控制台后按回车即可。
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
还有很多可用的插件,这里就不一一推荐的,个人可根据喜好选择性的进行安装和使用。下面给出的资源有很多快捷键的技巧、使用的经验、插件的推荐,请读者们简单的浏览一下。
Sublime Text 有哪些使用技巧? - 知乎
正如同官网所说的那样——“Sublime Text: The text editor you'll fall in love with”,它确实是一款令人着迷的可爱的编辑器。
Sublime Text在代码编辑器、文本编辑器领域,有着不少的「神器」级的产品,如历史悠久的 VIM、Emacs 以及如今当红的 Sublime Text。另外还有 VSC、EditPlus、NotePad++、UltraEdit 等一大堆流行的利器,可谓百家争鸣。
然而,作为目前全球范围内影响力最大的代码仓库/开源社区,GitHub 的程序员们并不满足于此。他们使用目前最先进流行的技术重新打造了一款称为“属于21世纪”的代码编辑器—— Atom, 它开源免费跨平台,并且整合 GIT 并提供类似 Sublime Text 的包管理功能,支持插件扩展,可配置性非常高……
AtomAtom 代码编辑器支持 Windows、Mac、Linux 三大桌面平台,完全免费,并且已经在 GitHub 上开放了全部的源代码。在经过一段长时间的迭代开发和不断改进后,Atom 终于从早期的测试版达到了正式版了!相比之前的版本,在性能和稳定性方面都有着显著的改善。
那么,我们关心的是,Atom 与主流的编辑器对比会怎么样?其实,在我看来, Atom 目前还不太适合用做主力编辑器,虽然它的功能与 Sublime Text 较为接近,但现在的它和 Sublime Text 相比还是稚嫩了一点,毕竟现在 Sublime Text 已经非常成熟了,后者有很全面的内置功能,也有非常丰富的插件包和活跃的社区,而 Atom 则还需给予时间让其发展。因为其内置了 Chrome 的缘故,安装包可达近100MB,相对 Sublime Text 厚重的可不是一星半点的了。目前仍然没有取代Sublime Text成为主流的主要原因还是因为性能问题,其启动时间可达 4-15 秒,而且比较吃内存,性能不够强大的计算机在使用的时候也会感到编码不流畅,甚至会因为 Atom 导致卡死。
不过由于 Atom 是由 Github 维护的,它拥有非常强大的后台。并且那里有着大量极为优秀的编程爱好者,也是极客们的聚集地,相信在不久的将来Atom 一定也会拥有不少新的插件包,而性能方面的缺点迟早也会被解决掉。
下载地址:https://atom.io
EditPlus 是一款由韩国出品的小巧但是功能强大的可处理文本、HTML 和程序语言的 Windows 编辑器,你甚至可以通过设置用户工具将其作为C,Java,PHP等等语言的一个简单的IDE。
官方试用版下载地址:https://www.editplus.com/download.html
Notepad++是 Windows操作系统下的一套文本编辑器,有完整的中文化接口及支持多国语言编写的功能。
Notepad++功能比 Windows 中的 Notepad(记事本)强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组。
下载地址:https://notepad-plus-plus.org/download/
两者都不可以做为编程的主力工具,只是在没有其他编辑器情况下的一个备选项。另外,Editplus是收费的,Nodepad++是免费的。
WebStorm,跨平台IDE,为WEB开发项目提供更好的开发支持,专门针对JavaScript、CSS、HTML及各种Script设计。它是一个轻量级但功能强大的集成开发环境,完全具备了与复杂的客户端开发和服务器端开发。毫不夸张的说,它是Web前端开发、JS开发的首选IDE,其强大之处不可理喻,被誉为Web开发神器。
WebStorm简单列举一下优点:
具体强大之处可以看一下这篇博文:WebStorm:令人眼前一亮的一款前端开发IDE | 安·记,也可以不看,反正只要知道它是神器一般的存在就足够了。
WebStorm官方试用版下载地址:https://www.jetbrains.com/webstorm/
官方下载之后可以试用30天,本文不提供破解教程,破解的话网上一搜一大把,但是还是建议读者们有条件的话请使用正版(原价¥600)。
CSDN软件商城正版购买:http://mall.csdn.net/product/627
DreamWeaver 是 Adobe 旗下的极具竞争力的一款网页开发工具,它的特点是可视化开发,即所见即所得,很适合初学者使用。所以在很多网页开发的新手教程中,都会推荐使用 DreamWeaver。
DreamWeaverDreamWeaver 也是一款商业软件,故此处不提供下载地址。较于 WebStorm,它的可视化开发确实会提供一些便利,但是总体上仍然与WebStorm 有很大差距,就像美图秀秀与 Photoshop 的差距一样。另外,编程熟练之后,完全不需要可视化,所谓的所见即所得也会显得很多余累赘。
原文:《选择兵器》(From 《Before Coding》)
日期:2019-09 浏览次数:6073
日期:2019-09 浏览次数:4085
日期:2019-09 浏览次数:4889
日期:2019-09 浏览次数:9889
日期:2019-09 浏览次数:10029
日期:2019-09 浏览次数:3872
日期:2019-09 浏览次数:3488
日期:2019-09 浏览次数:3250
日期:2019-09 浏览次数:2967
日期:2019-09 浏览次数:3393
日期:2019-09 浏览次数:6694
日期:2019-09 浏览次数:3101
日期:2019-09 浏览次数:3588
日期:2019-09 浏览次数:3224
日期:2019-09 浏览次数:3280
日期:2019-09 浏览次数:3534
日期:2019-09 浏览次数:5146
日期:2019-09 浏览次数:2836
日期:2019-09 浏览次数:3902
日期:2019-09 浏览次数:3331
日期:2019-09 浏览次数:3532
日期:2019-09 浏览次数:3553
日期:2019-09 浏览次数:3059
日期:2019-09 浏览次数:3848
日期:2019-09 浏览次数:4949
日期:2019-09 浏览次数:4783
日期:2019-09 浏览次数:2995
日期:2019-09 浏览次数:8338
日期:2019-09 浏览次数:4094
日期:2019-09 浏览次数:3333
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.