-
Notifications
You must be signed in to change notification settings - Fork 28
/
learn-vi-605-WebDesign-Firefox.html
45 lines (36 loc) · 6.2 KB
/
learn-vi-605-WebDesign-Firefox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="learn-vi.css" />
<title>VIM学习笔记 网页开发-Firefox浏览器</title>
</head>
<body>
<h1>VIM学习笔记 网页开发-Firefox浏览器</h1>
<p>在编写<a title="笔记列表" href="http://yyq123.github.com/learn-vim/learn-vi-00-00-TOC.html">VIM学习笔记</a>的过程中，我需要在Firefox中不断预览并验证手工编写的网页；同时也用于预览Markdown格式的<a href="http://yyq123.github.com/learn-vim/README.md" title="Readme">Readme</a>文档。</p>
<p>以下将介绍我常用的几款Firefox扩展。</p>
<h2 class="article"><a id="Firefox_Screenshots">Firefox Screenshots</a></h2>
<p>使用内置的<a href="https://screenshots.firefox.com/" title="Firefox Screenshots">Firefox Screenshots</a>，可以很方便地截取网页。通过鼠标拖拽，就能够滚动屏幕以截取超过当前屏显的较长网页。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_Screenshots.png" title="Firefox_Screenshots"><img src="https://yyq123.github.io/learn-vim/images/Firefox_Screenshots.png" alt="Firefox_Screenshots" width="550" height="255" /></a></p>
<h2 class="article"><a id="Hides_scrollbars">Hides scrollbars</a></h2>
<p>窗口的纵向和横向滚动条，除了占用屏幕空间之外，实在想不出还有什么用处？安装<a href="https://addons.mozilla.org/en-US/firefox/addon/hide-scrollbars/" title="Hides scrollbars">Hides scrollbars</a>之后，将自动隐藏滚动条。当然你也可以点击工具栏上的按钮，来重新显示滚动条。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_extension_HidesScrollbars.png" title="Firefox_extension_HidesScrollbars"><img src="https://yyq123.github.io/learn-vim/images/Firefox_extension_HidesScrollbars.png" alt="Firefox_extension_HidesScrollbars" /></a></p>
<h2 class="article"><a id="Scroll_Progress_New">Scroll Progress New</a></h2>
<p>在隐藏滚动条之后，如果你希望了解当前所处的网页位置，那么可以使用<a href="https://addons.mozilla.org/en-US/firefox/addon/scroll-progress-new/" title="Scroll Progress New">Scroll Progress New</a>扩展，在滚动屏幕时显示相对于完整网页的百分比。</p>
<p>相对于冰冷无趣的滚动条，数字化的标识显然更加清晰直观。而且你还可以自定义百分比的显示效果：比如屏幕位置、字体大小、字体颜色和透明度等。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_extension_ScrollProgress_Options.png" title="Firefox_extension_ScrollProgress_Options"><img src="https://yyq123.github.io/learn-vim/images/Firefox_extension_ScrollProgress_Options.png" alt="Firefox_extension_ScrollProgress_Options" width="550" height="204" /></a></p>
<h2 class="article"><a id="Web_Developer">Web Developer</a></h2>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web Developer">Web Developer</a>可以说是网页开发的瑞士军刀，其提供的辅助工具可以大大提高网页开发和调试的效率。其功能非常丰富，比如检视网页元素、调试CSS、清理Cookie和调整窗口尺寸等等。关于更多功能的介绍，请查看<a href="https://chrispederick.com/work/web-developer/" title="chrispederick.com">chrispederick.com</a>。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_extension_WebDeveloper.png" title="Firefox_extension_WebDeveloper"><img src="https://yyq123.github.io/learn-vim/images/Firefox_extension_WebDeveloper.png" alt="Firefox_extension_WebDeveloper" width="550" height="415" /></a></p>
<h2 class="article"><a id="Html_Validator">Html Validator</a></h2>
<p>符合<a href="https://www.webstandards.org/" title="Web Standards">标准</a>的网页开发，可谓是不作恶的底线了。通过生产具有可读性的高质量代码，促成在不同浏览器中达成一致的显示效果，并且关照不同用户群体的可访问性（accessibility）。</p>
<p><a href="https://addons.mozilla.org/en-US/firefox/addon/html-validator/" title="Html Validator">Html Validator</a>是基于<a href="http://www.html-tidy.org/">Tidy</a>和<a href="http://openjade.sourceforge.net/">OpenSP</a>开发的，用于在本地验证网页是否符合<a href="http://www.w3.org/TR">W3C标准</a>。</p>
<p>使用<kbd>CTRL+SHIFT+I</kbd>快捷键打开“Developer Tools”面板，然后点击“HTML Validator”页，将检查当前网页并显示存在的错误及原因。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_extension_HtmlValidator.png" title="Firefox_extension_HtmlValidator"><img src="https://yyq123.github.io/learn-vim/images/Firefox_extension_HtmlValidator.png" /></a></p>
<h2 class="article"><a id="GitLab_Markdown_Viewer">GitLab Markdown Viewer</a></h2>
<p>我不是Markdown的fans，我也不太明白：为什么有了HTML这样完整的标签体系，还需要再发明一个类似功能的子集。但是为了编写Readme文档，我还是需要利用<a href="https://addons.mozilla.org/en-US/firefox/addon/gitlab-markdown-viewer/" title="GitLab Markdown Viewer">GitLab Markdown Viewer</a>来预览Markdown格式的文档。</p>
<p><a href="https://yyq123.github.io/learn-vim/images/Firefox_extension_gitlab_markdown_viewer.png" title="Firefox_extension_gitlab_markdown_viewer"><img src="https://yyq123.github.io/learn-vim/images/Firefox_extension_gitlab_markdown_viewer.png" alt="Firefox_extension_gitlab_markdown_viewer" /></a></p>
<p style="border-top:1px solid lightgray"><span style="float:right">Ver: 2.0 | <a href="mailto:[email protected]">YYQ</a></span><span><<a title="屏幕截图(Toolkit-Screen)" href="http://yyq123.github.io/learn-vim/learn-vi-801-Toolkit-Screen.html">上一篇</a> |<a title="笔记列表" href="http://yyq123.github.com/learn-vim/learn-vi-00-00-TOC.html"> 目录 </a>| <a title="图表制作(Toolkit-Diagram" href="http://yyq123.github.io/learn-vim/learn-vi-802-Toolkit-Diagram.html">下一篇</a>></span></p>
</body>
</html>