|
|
| Line 7: |
Line 7: |
| [[Computer: Event: 200408]] | | [[Computer: Event: 200408]] |
|
| |
|
| 民國９３年８月
| | [[Computer: Event: 200409]] |
|
| |
|
| 本月是網頁的標記語言（Markup Laguage）相關資料的教學資源
| | 民國９３年９月 |
| | |
| | 嗯…本月嗎…自由軟體思想洗腦月？？（主題未定） |
|
| |
|
| ---- | | ---- |
|
| |
| = 發佈網頁標記語言的機構 =
| |
|
| |
| World Wide Web Consortium (W3C)<br>
| |
| http://www.w3.org/
| |
|
| |
|
| |
|
| |
| = 依循W3C標準的標記語言教學網路資源 =
| |
|
| |
| 朱孝國的筆記本 Peter Ju's Notebook<br>
| |
| http://www2.cyut.edu.tw/~s9154610/
| |
|
| |
| 周明網頁製作系列<br>
| |
| http://www.tssh.tpc.edu.tw/bcc/BooksExample/HTML401/index.htm
| |
|
| |
| 李正國<br>
| |
| http://www.csie.nctu.edu.tw/~jglee/
| |
|
| |
| 網頁寫作心得分享<br>
| |
| Hemiola的網頁 http://hemiolapei.free.fr/<br>
| |
| http://hemiolapei.free.fr/divers/web/web.html
| |
|
| |
| = 含有非依循W3C標準的標記語言教學網路資源 =
| |
|
| |
| 傲楓小築網頁教學<br>
| |
| http://htms.cjb.net/
| |
|
| |
| 網站建置百寶箱<br>
| |
| http://dob.tnc.edu.tw/
| |
|
| |
|
| |
|
| |
| = 最爛網頁實例（笑） =
| |
|
| |
| World's Worst Website<br>
| |
| 一看就知道是故意寫的，這個網站會指出許多新手編寫網頁時的錯誤。（註：這是我在某 BLOG 上看到的文章）<br>
| |
| http://www.angelfire.com/super/badwebs/main.htm
| |
|
| |
| winiAlienHacker<br>
| |
| 站長長期放置一堆錯誤不管，現在已經變成完全無法維護的網站了，我看可能要從頭重寫才修得好這個網站的問題吧。<br>
| |
| http://home.pchome.com.tw/young/kouyu/winiAlienHacker/
| |
|
| |
|
| |
|
| |
| = W3C 提供的驗證器 =
| |
|
| |
| HTML<br>
| |
| http://validator.w3.org/
| |
|
| |
| CSS<br>
| |
| http://jigsaw.w3.org/css-validator/
| |
|
| |
|
| |
|
| |
| = -------------------------------- =
| |
|
| |
| 一看就知道是分隔線
| |
|
| |
|
| |
|
| |
| = CSS樣式表專區 =
| |
|
| |
| W3C<br>
| |
| http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm
| |
|
| |
| meyerweb.com<br>
| |
| http://www.meyerweb.com/
| |
|
| |
| css Zen Garden: The Beauty in CSS Design<br>
| |
| http://www.csszengarden.com/
| |
|
| |
| 利用切換 CSS 來改變網頁造型的站。<br>
| |
| outsider reflex - http://white.sakura.ne.jp/~piro/<br>
| |
| CyberJos is Blogging - http://blog.cyberjos.idv.tw/space/start
| |
|
| |
| CSS 語法參考辭典<br>
| |
| http://www.cis.nctu.edu.tw/~is91056/css.htm<br>
| |
| 來源 http://www.cis.nctu.edu.tw/~is91056/index.php
| |
|
| |
| 樣式表的 CLASS 與 ID 宣告寫法：<br>
| |
| *CLASS
| |
| *Tag:action.ClassName {} -> Ex:) a:hover.list { color:red; }
| |
| *.ClassName tag:action {} -> Ex:) td img {display: block;}
| |
| **下面那個似乎是指定在該 Tag 底下的 Tag 用的樣子。
| |
| *ID
| |
| *<nowiki>#IDName {}</nowiki> -> Ex:) #test { color:#ff0000; }
| |
| **ID 比 CLASS 缺少的地方就是可以指定 Tag 的功能，另外同一個 <nowiki><TAG></nowiki> 亦即「標籤」之內，可以同時使用 CLASS 和 ID 各一個。
| |
|
| |
| = Javascript =
| |
|
| |
| 徵求資料中，徵求能把 MS Javascript 轉成 NetScape/Sun Javascript 的程式中。
| |
|
| |
| javascript 是由 Netscape 和 Sun 公司合作開發出的網頁語法，不過這開放的標準最後被微軟拿去搞了個 MS jscript 的封閉格式了就是。
| |
|
| |
| 朱孝國的筆記本 Peter Ju's Notebook<br>
| |
| http://www2.cyut.edu.tw/~s9154610/
| |
|
| |
| Foundamental JavaScript course<br>
| |
| http://www.takka.com.hk/jstutor/index.htm
| |
|
| |
| = XML和XHTML專區 =
| |
|
| |
| W3C-HTML/XHTML（右上有各版本別）<br>
| |
| http://www.w3.org/MarkUp/
| |
|
| |
| W3C-XML<br>
| |
| http://www.w3.org/XML/
| |
|
| |
| XML台灣資訊網<br>
| |
| http://www.xml.org.tw/Default.asp
| |
|
| |
| = Perl =
| |
|
| |
| 傲爾網<br>
| |
| http://www.ourinet.com/
| |
|
| |
|
| |
|
| |
| = -------------------------------- =
| |
|
| |
| 一看就知道是分隔線
| |
|
| |
|
| |
|
| |
| = Unicode Support =
| |
|
| |
| 個人覺得文件存在 UTF-8 等的比較保險這樣。
| |
|
| |
| Unicode Home Page<br>
| |
| 推廣 Unicode based 的系統的組織？？<br>
| |
| http://www.unicode.org/
| |
|
| |
| Unicode Support in Your Browser<br>
| |
| 一堆英文，看都沒懂。<br>
| |
| http://home.att.net/~jameskass/index.htm
| |
|
| |
| Unicode 補完計畫<br>
| |
| 讓中文使用者可以使用 Unicode 這種字庫的對照工具，詳情請看官網。<br>
| |
| http://cpatch.org/unicode/
| |
|
| |
| Unicode 補完計畫問卷調查<br>
| |
| 在策劃要開發 3.0 時所做的問卷，好像已經擺一年了，也許已經沒有用了吧？（汗）<br>
| |
| http://ericlin.cabin.idv.tw/~but/cgi-bin/anket/benquete.cgi
| |
|
| |
| Unicode 補完計畫 - 更新字型的方法<br>
| |
| Win9x 使用 2.x 版時更換 2000/XP 字型的白痴用教學。（其實用這個比較簡單啦）也不用進 DOS 就是了<br>
| |
| http://cpatch.org/witchfive/pastepic/newttf/newttf.html
| |
|
| |
| HTML文件外字相容轉換器<br>
| |
| 詳細說明如該頁內文這樣。本頁面是由 Unicode補完計畫 所提供的頁面，你也可以下載補完計畫，安裝完後也會有這玩意，總之台灣連個標準標碼都沒有呀，只有企業規格的廢廢 BIG5 呀～<br>
| |
| http://cpatch.org/unicode/tool/converter.html
| |
|
| |
| = 各類編輯器 =
| |
|
| |
| 『純文字編輯器』永遠是你最好的朋友。（汗）
| |
|
| |
| Crimson Editor<br>
| |
| 很遺憾的是這款似乎不支持 Unicode 呀…<br>
| |
| http://www.crimsoneditor.com/
| |
|
| |
| NOTEPAD.EXE<br>
| |
| Windows 內附的筆記本，適合追求「輕巧便是優勢，只有你看得懂自己在寫啥。」的這種人。
| |
|
| |
| Mozilla Composer<br>
| |
| 安裝 Mozilla 的 Browser 時會「強迫」附送的玩意，目前正在找如何單獨使用該套件的方法中。畢竟免費又支援各平台，又支援文件字型編碼的編輯器蠻少的呀。（根本懶得找倒是）
| |
|
| |
| OpenOffice.org<br>
| |
| 沒在用它來編輯 HTML 的呀…
| |
|
| |
| DreamWeaver<br>
| |
| 頗受好評的編輯器。沒用過不清楚倒是。
| |
|
| |
| = 免費的網頁空間 =
| |
|
| |
| PCHome<br>
| |
| http://www.pchome.com.tw/
| |
|
| |
| FREE ProHosting<br>
| |
| http://free.prohosting.com/<br>
| |
| http://home.pchome.com.tw/web/kikilala77/kill/tProHosting.htm
| |
|
| |
|
| |
|
| |
| = 免費的貼圖區或網路硬碟 =
| |
|
| |
| 2cha<br>
| |
| http://2cha.omoe.net/
| |
|
| |
|
| |
|
| |
| = 寫作重點 =
| |
|
| |
| 字型及字型大小設定技巧：<br>
| |
| font-size<br>
| |
| 即字型大小，使用百分比時， 100% 即是你瀏覽器的預設大小。<br>
| |
| font-family<br>
| |
| 即字型，各指定如下，不建議使用字型名稱，建議讓系統自己找適合的字型。<br>
| |
| 亦即使用「generic-family」的方式指定字型。<br>
| |
| W3C相關資料 http://www.w3.org/TR/REC-CSS2/fonts.html<br>
| |
| 以下來源 http://www.cis.nctu.edu.tw/~is91056/css_2.htm<br>
| |
| serif (新細明體或Times等)<br>
| |
| sans-serif (Helvetica等)<br>
| |
| cursive (筆記體的字型)<br>
| |
| fantasy (裝飾為主的字型)<br>
| |
| monospace (等寬的字型)<br>
| |
| 另外在 <nowiki><pre> </pre></nowiki> 中間的文字不會有變化倒是。還有表格 table 也是。<br>
| |
|
| |
| Mozilla 網站設計常見問題（中譯版）<br>
| |
| 詳見 [http://moztw.org/forum/printview.php?start=0&t=1974 Mozilla@Taiwan] （老是用別人的連結真是越用越不好意思了呀…）
| |
|
| |
| 利用 CSS 闖過三大難關！（專有名詞請參閱『Mozilla 網站設計常見問題（中譯版）』）<br>
| |
| 一、Inline屬性的文字等物件置中<br>
| |
| 二、Block屬性的區塊等物件置中<br>
| |
| 三、連結的可選取區加大<br>
| |
| 源碼如下，請自己複製下來試試。（因為wiki上不接受該標籤的作用的關係）<br>
| |
| <font color="green"><nowiki><a href="index.html" style="display:block;width:100%;text-align:center;margin-left:auto;margin-right:auto;">test一二三四</a></nowiki></font>
| |
|
| |
| <nowiki><p> </p></nowiki> 的中間不要放入 <nowiki><div> </div></nowiki> 。
| |
|
| |
| 其它的一些實例可參考 [[Computer: Makeuper]] 。
| |
|
| |
| *續‧字型大小：
| |
| *px
| |
| **像素(pixel)，亦即螢幕解析度，800x600、1024x768這類的。
| |
| **用這個的話會顧人怨這樣，它可以說是絕對大小這樣。（死）
| |
| **一般來說設 16px 以上比較好，算是比較不吃力的閱讀大小。
| |
| *pt
| |
| **不熟。（汗）這是依DPI而變的，在桌面空白處按右鍵，
| |
| **到「內容 → 設定值 → 進階」中看看，
| |
| **我想應該就是指「Npt x XXDPI = 你看到的字型大小」吧。
| |
| **也就是相對大小。
| |
| *%
| |
| **百分比大小(percent)，依你的瀏覽器而定。
| |
| **Mozilla/Firefox 可以設定字型大小，
| |
| **所以用 100% 就是該使用者覺得最舒服的大小，
| |
| **不過相對來說網頁編寫者會比較難控制顯示結果，
| |
| **除非把圖片、框架、區塊等的全跟字型一起用百分比來處理啦。
| |
| **至於 IE 的話…完全搞不懂它是怎麼運作的，
| |
| **要請教專人才行。縮放時用 80% 120% 這樣子就行了。
| |
|
| |
|
| <hr color="#dd7777" width="90%" align="left" size="1px"> | | <hr color="#dd7777" width="90%" align="left" size="1px"> |