[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

最后编辑于 2020-05-22
407 33 535

每次在电脑内写个网页,改个小地方就要重新整理,真的很费时。如果可以直接在存档时,网页就重新整理,是不是很棒呢?[F5]这个工具刚好就符合我们所需,在撰写网页时,顺手按个存档快捷键,浏览器上的网页就会自动重新整理,是不是可以解省储存→重新整理→看网页这样繁琐的步骤呢?对于网页设计师来讲,这样的工具可以有效的缩短网页撰写时间。

虽然说写网页跟写软体相比,写网页确实门槛比较低、比较简单,也不需要使用compile(编译器)编译之后才可以看到成效,只要储存档案然后浏览器刷新,就可以看到成效了。但是网页写久了,其实会嫌弃这样的方式不够快,对于很多网页设计师来讲,每次都要多一个重新整理步骤真的很麻烦,有时候浏览器快取清理不乾净,也会很Orz。

以香肠自己来说,每次对网站改个HTML、CSS的小部分,就会存档然后网页重刷看看效果如何?说真的,这样的作业方式真的很没有效率,步骤也很多。为了解决这样的问题,大陆那边有一个很神奇的工具,可以把存档和重新整理这两个步骤结合的软体[F5]。这个软体架构是採用Adobe AIR技术,目前软体已经是可以开放免费下载,安装后只要把档案拖曳到框框内,根据下方的网址拜访档案位置,然后我们可以开着编辑器、浏览器,编写网页→存档→即可看画面。如果有双萤幕,更可以左边程式码,右边浏览器,完美搭配唷!

软体名称:F5软体性质:免费软体软体语言:简体中文官方网站:http://www.getf5.com/软体下载:按这里

第1步  如果电脑内没有安装Adobe AIR,可以先下载安装。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

第2步  如果电脑内本身已经有Adobe AIR,跟着软体进行更新即可。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

第3步  接着来到F5官方网站,点击﹝下载﹞,然后再点﹝点击开始安装[F5]﹞。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

第4步  安装时,请直接点﹝开启﹞。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

第5步  等待下载完成后,再点﹝安装﹞。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

如何使用[F5]来加速网页开发?

当我们安装好[F5]之后,请把想要修改的档案直接拖曳到软体框框之中,接着在框框中我们可以看到目前目录有哪些档案,最下方会有档案的本机伺服器环境的网址,请利用该网址拜访浏览器,通常网址都会是「http://127.0.0.1」,将网址丢到浏览器之后,我们可以看到网页目录(如果没有index.htm的话),点击该档案就可以开启画面预览。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

这时我们可以把浏览器和网页编辑器同时开启,这个软体不限制您所使用的开发软体或者是浏览器,而且还跨平台的支援。所以香肠使用Windows搭配Google Chrome浏览器以及NotePad++编辑器进行网页的撰写,下方是网页编辑器,上方是浏览器,当网页编辑器写好后,按下﹝Ctrl﹞+﹝S﹞时,神气的事情发生了,网页的内容被更改了?没错!别怀疑你的眼睛,因为这就是[F5]这软体的应用,储存即可预览,让你免去重新整理的麻烦,如果有双萤幕,撰写上应该会更方便。

[F5]撰写HTML+CSS的好工具,免重新整理直接预览网页

为什我的F5不能应用在PHP、WordPress或Discuz上?

一开始香肠也有相同的疑问,刚开始电脑开着TWMP的状况下时,[F5]分配给我的网址是使用81port,所以就猜想是不是这样和阿帕契没对到,所以我先开F5并把档案拖曳进去,然后再开阿帕契,结果依样没有效果。到了官方网站上一看,发现他都没有提到Apache、IIS这类的伺服器,又加上档案丢进去竟然可以自动变成本机电脑IP的路径,所以应该是软体目前不支援。

所以说,需要跑PHP的程式,或者是WordPress、Discuz等等,在本机上只要是非纯网页(HTML)的话,通通无法进行即时的预览效果,这是比较可惜的部分,未来若可以支援,那就很棒了。另外,关于储存档案网页就会自动重刷这部分,我发现到他似乎会有连线到「heapr.com」这部分,不知道这边的作用是什幺?还颇令人好奇的…



上一篇: 下一篇:
你可能还喜欢以下内容