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