编辑网页可以选择很多工具软件,如记事本、EditPlus、Dreamweaver、PHPStorm、HBuilder、Sublime等,本书的编辑环境采用Sublime。使用较多的Sublime版本是Text 2和Text 3,本书使用的是 Text 3英文版,打开 Sublime Text 3安装程序,按照默认方式安装即可。成功安装后打开Sublime,会看到Sublime的使用界面,包括常用的命令菜单和编辑区域,如图1-22所示。
图1-22 Sublime使用界面
安装好Sublime后,右键单击想要打开的各种文件格式(html、js、xml、txt等)都可以快速打开文件,如图1-23所示。
图1-23 使用Sublime打开文档
单击“文件”→“新建文件”菜单可以创建一个新文件,默认文件名为 untitled,注意此时文件是没有扩展名的,即没有指定文件类型,在保存此文件之前,需要给出该文件的扩展名,在Sublime编辑环境的右下角可以对文件类型进行选择,如图1-24所示,默认类型为Plain Text。选择文件类型后就可以将文件保存到指定路径下了。
图1-24 选择文件类型
一个网站即为www目录下的一个文件夹,比如我们的课程项目要求完成一个视频信息管理系统的网站,可以在 www 目录下创建一个目录作为网站的根目录,目录命名为 neuvideo,后面编写的所有页面都将存放于该目录下。建议在编辑网页的过程中打开neuvideo目录,这样就可见该目录下所有子目录及文件列表,编辑和维护都比较方便。单击“文件”→“打开文件夹”→“选择自己的工程”菜单,可以打开整个工程,这样就可以在整个工程里查看所有文件了,如图1-25所示。
图1-25 打开整个工程
选择需要注释的代码,多行或单行都可以,然后使用<Ctrl+/>组合键,或者使用<Ctrl+Shft+/>组合键即可快速注释。再次按一下组合键即可取消注释。
按住<Ctrl+F>组合键,即可进行快速搜索,在搜索框下面输入要找的变量名称或方法名等,定位很迅速,如图1-26所示。
图1-26 快速查找
使用<Ctrl+P>组合键可以快速打开文件,输入文件名称即可切换文件,我们一次打开的窗口可能比较多,<Ctrl+P>组合键可以快速地切换到相应的文件,如图1-27所示。
图1-27 快速打开文件
Emmet可以快速地编写HTML、CSS,以及实现其他的功能。在前端开发的过程中,一个最烦琐的工作就是写HTML、CSS代码,比如数量繁多的标签、属性、尖括号、标签闭合等。Emmet提供了一套非常简单的语法规则,书写起来非常快,只需要敲一个快捷键就立刻生成对应的HTML或CSS代码,极大提高了代码书写效率。Emmet的前身是Zen coding,它是一个编辑器插件,需要基于指定的编辑器使用,官方网站提供多编辑器支持,本书使用Sublime Text 3,下面就以Sublime Text 3插件为例,讲解Emmet的安装及基础语法。
目前,Emmet 已经可以通过 Package Control安装了。如果你的Sublime Text 3还没有安装Package Control组件,请参照以下方法安装,如果已安装请自行跳过本步骤。
使用<Ctrl+`>组合键打开控制台或通过“View”→“Show Console”菜单打开命令行,粘贴以下代码到底部命令行并按<Enter>键。
import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.Proxy Handler())); open (os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+ pf.replace (' ', '%20')).read())
重启Sublime Text 3,如果在“Perferences”→“Package Settings”中看到Package Control,则表示安装成功。
在“Package Control”中选择“lnstall package”或按<Ctrl+Shift+P>组合键,打开命令板,输入“pci”,然后选择“lnstall Package”,输入Emmet的搜索,找到Emmet Css Snippets,单击即可自动完成安装。
举个例子,如果编写下面这个HTML结构,你需要多长时间?
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>
其实,这一切你只需要编写下面这条按照Emmet语法写出来的语句,然后用Emmet编译一下(按下<TAB>键),就可以生成了!
#page>div.logo+ul#navigation>li*5>a
把上述代码复制到Sublime Text 3中已经打开的HTML文件中,这时候紧跟着敲击一下<TAB>键,仅仅写一行代码,就可以生成这个复杂的HTML结构,而且还可以生成对应的class、id和有序号的内容。
又如,快速编写HTML代码,HTML文档需要包含一些固定的标签,如doctype、html、head、body及meta等,现在你只需要1 s就可以输入这些标签。比如输入“!”或“html:5”,然后按<TAB>键,就可以得到如下代码。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> < title>Document</title> </head> <body> </body> </html>
这就是一个HTML5的标准结构,也是默认的HTML结构。
(1)生成带有id、class的HTML标签
Emmet默认的标签为div,如果不给出标签名称,则默认生成div标签。如果要生成id为page的div标签,则只需要编写以下指令。
div#page->tab键
或者使用默认标签的方式:
#page
如果编写一个class为content的p标签,只需要编写以下指令。
p.content->tab键
同时指定标签的id和class,如生成id为navigation、class为nav的ul标签,代码如下。
ul#navigation.nav
指定多个class,如上面还需要给ul指定一个class为dropdown。
ul#navigation.nav.dropdown->tab键
生成的HTML结构如下。
<ul id="navigation" class="nav dropdown"> </ul>
(2)兄弟标签:+
生成标签的兄弟标签,即平级元素,使用指令“+”,如下。
div+ul+bq->tab键
生成的HTML结构如下。
<div></div> <ul></ul> <blockquote></blockquote>
(3)后代:>
“>”表示后面要生成的内容是当前标签的后代。例如,要生成一个无序列表,而且被class为nav的div包裹,那么可以使用以下指令。
div.nav>ul>li->tab键
生成的HTML结构如下。
<div class="nav"> <ul> <li></li> </ul> </div>
(4)上级元素:^
上级(Climb-up)元素是什么意思呢?前面介绍了生成下级元素的符号“>”,在使用div>ul>li指令之后,再继续写下去,那么后续内容都是在li下级的。如果想编写一个与ul平级的span标签,那么需要先用“^”提升层次,如下。
div.nav>ul>li^span
生成的结构如下。
<div class="nav"> <ul> <li></li> </ul> <span></span> </div>
如果想相对于div生成一个平级元素,那么再上升一个层次,多用一个“^”符号。
div.nav>ul>li^^span
结果如下。
<div class="nav"> <ul> <li></li> </ul> </div> <span></span>
(5)重复多份:*
针对一个无序列表,ul下面的li必然不只是一份,通常要生成很多个li标签。那么可以直接在li后面的“*”之后加一些数字。
ul>li*5->tab键
这样就直接生成5个项目的无序列表了。如果想要生成多份其他结构,方法类似。
又如,要生成一个1行3列的表格,可以使用如下指令。
table>tr>td*3->tab键
生成的HTML结构如下。
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
(6)编号:$
例如,无序列表,想为5个li增加一个class属性值item1,然后依次递增从1到5,那么需要使用“$”符号。
ul>li.item$*5->tab键
结构如下。
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
“$”表示一位数字,如果只出现一个,就从1开始;如果出现多个,就从0开始。
如果要想生成3位数的序号,那么要写3个“$”。
ul>li.item$$$*5->tab键
输出如下。
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
单击菜单栏的首选项菜单“Preferences”,选择“Setting-User”项,然后在大括号内输入以下内容,设置完成后保存,再重启Sublime。
{ "auto_complete": true, "auto_match_enabled": true, "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme", "font_size": 21, "ignored_packages": [ "Vintage" ] }
例如,在PHP文件中输入php+Tab键,会自动补全PHP标签,如图1-28所示。在PHP标签中输入if,就可以自动加载if(){};在PHP标签中输入foreach,就可以自动加载for循环的结构foreach(){},如图1-29所示,可见,这种方式可以加快程序的开发速度。
图1-28 补全php标签
图1-29 补全流程结构