【编程工具】如何用Sublime Text3建立本地服务器和站点

不久前,我学习了使用DW(DreamWare CS6)这款软件来学习HTML和制作静态网页,但是总觉得这款图形化软件不太适合我这种喜欢写代码的码农,所以最终我使用的是Sublime Text3这款软件来作为我的学习工具。但是这款软件是如何创建站点和服务器的呢?创建站点便于自己学习资料的管理,所以在这里我给大家分享一下Sublime Text3是如何操作的:

站点创建(算是站点吧):

第一步:首先点击上方的 " Project(项目) ",选择 " Add Folder to Project(添加项目文件夹) "。

第二步:弹出对话框,自己随便选择一个文件夹或文件夹路径路径,然后点击选择选择文件夹,就样就添加完成了。

第三步:但是我们软件并没用显示出来,我们可以通过快捷键 " Ctrl+K+B " 打开侧边栏,是不是觉得发现了新世界?

这样就算是建立好了一个站点或者称之为工作区。同样的可以用相同的方法创建多个站点,如果想要删除站点,则只需要在侧边栏右击你要删除的站点名称,然后点击 " Remove Folder from Project(删除项目文件夹) " 就行了。

站点服务器创建(需要插件 SublimeServer):

这个过程比较复杂。前提条件是需要安装 " SideBarEnhancements " 侧边栏增强插件。

第一步:安装完 " SideBarEnhancements " 插件后,首先为 " SideBarEnhancements " 指定默认浏览器。打开 " Preference " -> " Package Settings " -> " Side Bar " -> " Settings User-User ",在打开的文件中添加如下代码:

{
"fefault_browser": "chrome" //aurora, canary, chromium, firefox, ie, opera, safari,
}

这里是选择默认浏览器,只要名称没问题就行。

第二步:打开侧边栏("Ctrl+K+B")任意文件/文件夹上点击鼠标右键,选择 " Project " -> " Edit Preview URLs " ,在打开的文件中添加如下代码:

{
"E:/Sublime Text3/test1/": {
"url_testing": "http://localhost:8080/test1/",
"url_production": "http://www.4399.com/"
}
}

代码解释:

1. " E:/Sublime Text3/test1/ ":是项目在磁盘中的路径,请改为你的项目地址。

2. " url_testing ":是你本地的 localhost 地址,如果不能打开,加上端口试下,如我这里设置的是8080端口。

3. " url_production ":是项目在线上服务器上的地址,别人可以通过这个地址查看你的网页,当然前提是你得要有服务器。我这个是随便写的。

提醒:请根据自己的情况一一进行修改。

为浏览器绑定热键:点击这里(查看方法二)

SublimeServer 插件使用方法:点击这里(在下面序号为24)

私货:

要制作一个能够被大家浏览的网站,首先需要在本地磁盘上制作这个网站,然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点,位于互联网web服务器里的网站被称为远程站点。

1、规划站点结构:

网站是多个网页的集合,其包括一个首页和若干个分页,这种集合不是简单的集合。为了达到最佳效果,在创建任何 Web 站点页面之前,要对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及各页是如何互相连接起来的。

2、创建站点:

在搭建站点前,我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。

3、搭建站点结构:

站点是文件与文件夹的集合,下面我们根据前面对xmweb网站的设计,来新建xmweb站点要设置的文件夹和文件。

新建文件夹,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件夹”项,然后给文件夹命名。这里我们创建新建8个文件夹,分别命名为:img、med、swf、txt、css、js、moan和fy。

创建页面,在文件面板的站点跟目录下单击鼠标右键,从弹出菜单中选择“新建文件”项,然后给文件命名。首先要添加首页,我们把首页命名为index.html,再分别新建01.html、02.html、03.html、04.html和05.html。

4、文件与文件夹的管理:

对建立的文件和文件夹,可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹,然后单击鼠标右键,再弹出菜单中选“编辑”项,即可进行相关操作。

私货来源:百度

上一篇:Sublime Text3工具的安装、破解、VIM功能vintage插件教程(已经实践、绝对可用)


下一篇:Sublime text3 JS语法检测工具安装及使用