http://ciangbrides.myds.me/dw/!ghsrobert.tk/ 2026-04-08T06:04:36+00:00 http://ciangbrides.myds.me/dw/!ghsrobert.tk/ http://ciangbrides.myds.me/dw/!ghsrobert.tk/_media/wiki/favicon.ico text/html 2019-04-27T03:38:26+00:00 Anonymous (anonymous@undisclosed.example.com) http://ciangbrides.myds.me/dw/!ghsrobert.tk/it/diary/2019/04/27-html <h1 class="sectionedit1" id="網頁編輯器也能完成文書處理">網頁編輯器也能完成文書處理！</h1> <p> 說到文書處理，人們絕大多數都使用 MS Word 之類的軟體進行「所視即所得」（WYSIWYG）的編輯，而成品多半用於平面列印，或是傳輸給別人後，也是一定要用特定軟體來開啟。 </p> <p> 但是，如果透過功能完整的 <abbr title="What You See Is What You Get">WYSIWYG</abbr> <strong>網頁編輯器</strong>的話^{<a href="#fn__1" id="fnt__1" class="fn_top">1)</a>}，其實，不僅能撰寫樣式豐富的網頁，也能透過 <abbr title="HyperText Markup Language">HTML</abbr>+<abbr title="Cascading Style Sheets">CSS</abbr> 原本就提供的「樣式表切換」以及 @media 宣告，賦予列印的網頁不遜於文書處理軟體成品的輸出成果。換言之，同一個網頁，只要設定好不同的顯示/列印規則，就可以輕鬆輸出不同版本的成品。況且，只要把網頁文件放到自己的伺服器上，就能把 <abbr title="Uniform Resource Locator">URL</abbr> 分享給別人，讓大家都能在線上閱覽，又可隨時更新，非常簡便。^{<a href="#fn__2" id="fnt__2" class="fn_top">2)</a>} </p> <p> 我認為，基層資訊教育在直接教授 <abbr title="What You See Is What You Get">WYSIWYG</abbr> 文書處理應用之前，或許應該先從純文字的編輯，然後再進入 <abbr title="HyperText Markup Language">HTML</abbr>+<abbr title="Cascading Style Sheets">CSS</abbr> 的編輯，提供「內容與樣式分離」的思維（抽象 vs. 表象），再讓小朋友看到，HTML+<abbr title="Cascading Style Sheets">CSS</abbr> 能做到的 magic，其實比 <abbr title="What You See Is What You Get">WYSIWYG</abbr> 手動編輯，更簡潔、更不易出錯、效率更高_{（哈哈最後這一段就當作癡人說夢吧，我知道教起來並不容易啦……畢竟要用到一些英文、符號之類的）}。 </p> <p> #注意「網頁編輯器」≠「網頁瀏覽器」<br /> #推薦 <a href="http://bluegriffon.org/" class="urlextern" title="http://bluegriffon.org/" rel="ugc nofollow">BlueGriffon</a> </p> <div class="tags"><span> <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/%E8%B3%87%E8%A8%8A%E6%95%99%E8%82%B2?do=showtag&amp;tag=%E8%B3%87%E8%A8%8A%E6%95%99%E8%82%B2" class="wikilink1" title="tag:資訊教育" rel="tag">資訊教育</a>, <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/html?do=showtag&amp;tag=HTML" class="wikilink1" title="tag:html" rel="tag">HTML</a>, <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/css?do=showtag&amp;tag=CSS" class="wikilink1" title="tag:css" rel="tag">CSS</a>, <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/bluegriffon?do=showtag&amp;tag=BlueGriffon" class="wikilink1" title="tag:bluegriffon" rel="tag">BlueGriffon</a>, <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/wysiwyg?do=showtag&amp;tag=WYSIWYG" class="wikilink1" title="tag:wysiwyg" rel="tag">WYSIWYG</a>, <a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/tag/published?do=showtag&amp;tag=published" class="wikilink1" title="tag:published" rel="tag">published</a> </span></div> <div class="footnotes"> <div class="fn">^{<a href="#fnt__1" id="fn__1" class="fn_bot">1)</a>} <div class="content">推薦 <a href="http://bluegriffon.org/" class="urlextern" title="http://bluegriffon.org/" rel="ugc nofollow">BlueGriffon</a></div></div> <div class="fn">^{<a href="#fnt__2" id="fn__2" class="fn_bot">2)</a>} <div class="content"><span class="plugin-autotooltip_linked" onmouseover="autotooltip.show(event)" onmouseout="autotooltip.hide()" data-delay="0"><a href="http://ciangbrides.myds.me/dw/!ghsrobert.tk/me" class="wikilink1" data-wiki-id="me">我</a><span class="plugin-autotooltip-hidden-classes">plugin-autotooltip__default</span><!-- googleoff: all --><span class="plugin-autotooltip-hidden-tip">GHSRobert Ciang/MilchFlasche</span><!-- googleon: all --></span>今年這方面的初步成品，是教會主日禮拜歌手們用的歌詞單，初步分享是線上的網頁，然後可以切換不同的顯示樣式、列印樣式，出一版最乾淨沒有複雜註記的歌詞檔，給提詞人員去後製；出一版放大文字的，則可列印給長輩 <img src="http://ciangbrides.myds.me/dw/!ghsrobert.tk/lib/images/smileys/local/MSN/heart.gif" class="icon" alt="&lt;&lt;大心&gt;&gt;" /></div></div> </div>