User:Wini:Homepage

這裡是在記錄一些我在用純文字編輯器寫網頁時的一些小秘訣和心得用的地方。
共分為 HTML 和 CSS 兩大主題。
目前因為對標籤和元件的語詞用法有點問題，所以請先不要太在意用詞的部分。

Contents 1 前言 2 Stardard 3 Plan 3.1 Space 3.2 Directory 3.3 Point 3.4 Browser 3.5 Editor 4 HTML 5 CSS 6 Blind

[edit] 前言

首先我要說明的是，如果你只是想用 HTML 和 CSS 寫網頁的話，
只要記住基本的寫作格式和一些寫作上應該避免的不友善語法就好，
其它的資料都是可以直接在網站上查到資料的。
順帶一提 W3C協會 有提供該站的站內搜尋，
請多多利用。

[edit] Stardard

寫網頁時需要注意到哪些網頁標準？

• HTML 、 XHTML 、 XML 和 CSS - 可上 W3C協會 查詢。
• 支援所有瀏覽器 - 待查
• 親和力 - 待查
• JavaScript - 待查
• JAVA - 待查
• flash - 待查

[edit] Plan

網站該架在哪個空間？首頁該放在哪個路徑下？

[edit] Space

這兒只寫我用過的，基本上其它還有很多好用的，不必拘泥於這些也行。

• PCHome.com.tw - 台灣的。沒有 FTP 可用， Web 只容許 IE 上傳。有廣告。不過就國內來說算是不錯的空間了。
• GeoCities.jp - 日本的。有 FTP ，還有一堆其它功能可玩。有廣告。除了有時網路不順時會無法順利上傳外，實在沒啥好嫌的。

另外 Blog 跟 Wiki 這兩種新的網路族群也可以考慮一下。

• Blog 在很多地方都可以申請，這是種日誌型的網站這樣。
• Wiki 則是共同書寫系統，要使用前，請先確認該 Wiki 站的發展方向為何，寫沒用的資料可是會被討厭的哦～！（心虛）

當然有能力的話，還是建議各位自己架個站來玩啦。不過在台灣，除了學網的高上下傳頻寬能這樣玩外，商用線路根本就不適合讓各位玩，頂多架個沒有圖片的站而已。

• 架站的基本是 Apache ， Windows 跟 Linux 上都可以使用這一套軟體來建各式各樣的站。

[edit] Directory

首頁的擺放可是有學問的。（以下的 xxx 、 yyy 跟 zzz 都是可代入任意值的變數）

• 假設你申請了一個 xxx 的帳號，那麼你的網址就是「某網域/xxx/」的這種感覺。
• 接著你一定會迫不及待地直接在 xxx 底下直接建個 index.html 的首頁吧？那樣是不行的！請先思考一些事再說！
  1. 你希望你的網址能短些而又看起來有意義，這時也許放 xxx 下是不錯啦。
  2. 不過當你有一天，想把私人的文件上傳時，要是被別人發現這個 xxx 的站長原來就是你的話，你會不會不舒服呢？
• 所以，各位應該考慮在 xxx 的底下新增個 yyy 的資料夾，在那兒放你的首頁這樣。
• 然後，其它私人資料就在 xxx 底下另建個 zzz 來放，而 xxx 底下的 index.html 建議放空白頁就好。
• 不過我並不保證不會有人用搜尋引擎挖你的站出來看啦。

[edit] Point

寫網頁時要注意的事。

• 給誰看？給純文字瀏覽器看？給螢幕朗讀軟體看？給 IE 看？給 Firefox 看？給手機看？給印表機看？
• 字體要多大？對方沒有你所指定的字型時要不要用通用字型？
• 顏色要怎麼設？顏色的對比會不會太過強烈？有注意到色盲人士的閱讀狀況嗎？
• 滑鼠指標在點到超連結文字時會否跟其它一般的字搞混而不知道那是超連結？某些字有說明時滑鼠鼠標圖示 ICON 是否要跟著變動為 help 圖示？鼠標移動到超連結文字上時是否要用 pointer 圖示？
• 有沒有測試過各種不同螢幕解析度的電腦所顯示的畫面是否正常過？
• 是否太專注於上面那些事而忘了你網頁的內容了？

[edit] Browser

可以利用的瀏覽器 Browser 如下。

• lynx - 純文字瀏覽器，用這個看網頁才是王道！
  • lynx 官方的未編譯版本
  • lynx Japanese Win32 Version
• Mozilla - Mozilla 協會製作的瀏覽器。以下列的是台灣區的官網。
  • Mozilla Suite
  • Mozilla Firefox
• Opera -

[edit] Editor

可以利用的編輯器如下。

• 純文字編輯器
  • EmEditor
  • Crimson Editor
  • Notepad++
  • vim
  • UniRed
• 所見即所得編輯器
  • NVU
  • DreamWeaver
  • TopStyle
• BOM (Byte Order Mark) 的有無問題所導致的可能無法正常瀏覽文字問題，這時的建議是找能存成 UTF without BOM 格式的編輯器來用，不過有些在讀入時似乎沒法正確顯示無 BOM 的文件，可能要改些地方才行正常顯示吧。

[edit] HTML

• HTML 中的大部分的元件 element 大多是長成這樣子的：
  <元件(element) 屬性(attribute)="屬性(property)或值(value)">文字資料</元件>
  ，其中的「<元件>」和「</元件>」分別叫做「起始標籤 start tag」以及「結尾標籤 end tag」，差別只在於一個「/」而已，而前面我寫的元件中的中文後面接的小括弧跟英文是其原名，請別誤會了。以 meta 和 p 標籤為例：
  <meta name="author" content="某某人" />
  <p>文字資料</p>
  • 在這兒因為 meta 並沒有結尾標籤，所以請在它的起始標籤尾巴空一格寫入一個「/」來結束它的標籤宣告，這是 XHTML 的規格這樣。
  • meta |- 元件(element)。用來建立 Meta data profiles 用的元件的樣子。
  • name |- 屬性(attribute)。
  • author |- 屬性(property)，跟 attribute 同樣被稱作屬性是翻譯上的問題，不要太在意比較好。
  • content |- 屬性(attribute)。
  • 某某人 |- 值(value)，在這兒是做為 author 這個屬性(property)的值。
• 所有的標籤名稱除了 DOCTYPE 以外，其它全都要小寫。
• 以 id 代替 name 的好處在於，可以套用在絕大多數的標籤 tag 中。
• 利用空字元的 a 元件來當定錨點的好處，在於可以控制跳躍過去的目的地的位置。
• 要讓人寄信給你時，信箱位址的值是 mailto ，而信件標題的值則是 subject 。例：
  <a href="mailto:test@test.com?subject=test">test</a>
• 要設計一個超連結，讓 Firefox 或 Mozilla Suite 加入你的站台到來客的書籤中時的方法。（待補上）
• 使用純文字編輯器時需要注意的特殊標籤（W3C有關於此的文件待查中）
  •   |- 半形空格「 」。因為在 HTML 這類的文件中，不管空再多空格都只會被視為空一格而已，而且有很多地方就算你有空格也不一定有效，所以打這個最安定。
  • < |- 小於符號「<」。因為在 HTML 文件中「<」跟「>」是用來包住標籤用途的，所以不能直接在純文字編輯器中輸入「<」和「>」，如果你的用途並不是拿它來當包住標籤的話，這時請用「<」和「>」來表示。
  • > |- 大於符號「>」。其它說明同「<」。
  • & |- And 符號「&」。同樣地，因為「&」會被拿來作為這些特殊標籤的起始作用宣告字元，所以當只是要表示 And 符號「&」時是不能直接輸入「&」的。
  • ♥ |- 心型符號 ♥ http://forum.nifty.com/fhpg/utility/faq/0001.htm
  • 其它的（非UNICODE式的作法） http://www.kanzaka.net/htmljava/webdings.html
  • XD http://www.brainjar.com/css/cards/default2.asp
  • 日本 Mozilla 的標準化計畫 http://www.mozilla.gr.jp/standards/webtips0009.html
  • 補充 http://aor.ktplan.jp/hms/cer
  • 哼嗯…（頭痛中）看來八分休止符似乎還沒有unicode替代方案呀…♪ http://www.zukeran.org/shin/jdoc/ikenai-moji.html
  • 其它資源 - 特殊文字リファレンス
• 使用真正有用的字型效果標籤
  • W3C 中的參考文件
  • strong - 粗體
  • del - 刪除線
  • ins - 底線？
  • em - 斜體
  • code - ？？
  • cite - 引文
  • abbr - 縮寫
  • acronym - 頭文字語
• 哪些字需要用到 title 屬性來說明？
  • 使用了 acronym 標籤來包住的縮寫文字之類的，應該要在 title 中寫清楚全名，或者你也可以反過來在 acronym 的內容中寫全名，而 title 寫縮寫。
  • 圖片的 img 標籤，一定要用 alt 屬性加以說明，當然不需說明的也請用 alt="" 避免某些瀏覽器讀入不必要的資訊，這種圖片基本上是要看情況決定是否要加 title 的，不過以後會用的不是 img 而是 object 的樣子，總之原理應該是相同的啦。
  • 超連結文字的 a 標籤，你可以在超連結的說明不夠完整時加入這樣，但一般是希望你的超連結文字能夠寫得夠清楚明白比較好，如果是要做備註說明的話，可能用 summary 屬性會比較好，不過我對 summary 不熟就先跳過不談了。
  • abbr 是？？

[edit] CSS

• 要寫 CSS 請找 TopStyle 來用。
• font-size 用 xx-small x-small small large x-large xx-large pt px % 。 small 跟 large 的相對字型尺寸是在放大縮小字時比較不會看不清楚，至於 pt 跟 px 設定起來有點麻煩的感覺， % 則是不太建議使用，太麻煩了。（汗）
• position 用 em px % 。 1em 是指「一個全形字體」的大小，所以會隨字體放大縮小而變動，而 % 只有用在 width 等橫向定位時比較好用而已，縱向的請用 px 好好指定，或是利用 margin 跟 padding 來調整。
• color 用 #[00-ff][00-ff][00-ff] … 也就是 #ffffff 或是 #0acbd9 這類的 RRGGBB 16 進位法指定顔色啦，還有直接輸入顏色像 blue red 等的也行，另一個則是 #[0-f][0-f][0-f] 的 #fa7 這種的 RGB 指定法，數字越大的代表顏色越亮，反之越暗。 R=Red G=Green B=Blue 。
• align 有 left center right 而 vertical align 有 top middle bottom
• 除非必要，不然應該盡量避免使用 hover 。除非你有辦法做到讓鍵盤使用者也能在有樣式的時候看到所有資料。
• 可接在 CSS 中的 id name 和 class name 的…嗯…從屬控制？？
  • hover |- （滑鼠）鼠標移過
  • focus |- （鍵盤）游標移過、大多只能作用於 a 或 form 系的元件而已。
  • link |- 未去過的超連結文字。
  • visited |- 已參觀過的超連結文字。
  • active |- 不明。跟 focus 似乎是相像的東西的樣子。
  • after |- 在此元件後方…通常是拿來加入 content:"文字"; 時會用到的。在該元件的 after 的描述式中，繼續加入 font 等的，會影響的是 content 這樣。
  • before |- 在此元件前方…通常是拿來加入 content:"文字"; 時會用到的。在該元件的 after 的描述式中，繼續加入 font 等的，會影響的是 content 這樣。
• 可用的滑鼠指標樣式 http://www.w3.org/TR/CSS21/ui.html#propdef-cursor
• tag#name:hover:after 這樣子的用法似乎是 OK 的。意即滑鼠移過去時在其後方顯示東西。
• position:fixed; 屬性的元件，裡面有 <a id="xxx"> 時，若跳躍到該書籤，即 <a href="#xxx"> ，則切換上一頁下一頁時，不會自動切換畫面到該 id 處，簡單說 position:fixed; 並不算是個很完善地可以代替框架頁 frame 和內框架頁 iframe 的樣式，而且就算設計了 overflow:auto; 讓該元件在內部的資料超出設定的範圍，鍵盤也無法在其內上下拉動捲軸，一定得用滑鼠才行。所以除非必要，不然 position:fixed; 應盡量避免使用。（就親和力網站而言，不過如果能好好設計的話也是可以使用的。）

[edit] Blind

有關盲人瀏覽的資訊。

• telnet://bat.tkblind.tku.edu.tw
• http://www.batol.net/gm/