發信人: wini (廢人), 信區: bwin
標 題: Re: 架設網頁
發信站: 淡江蝙蝠BBS資訊總站 (Wed Mar 8 09:35:43 2006), 轉信

前言：本文件目前正於以下討論串中尋求指正與協助，故暫時停筆。
viewtopic.php?p=68474#68474

我並不是盲人，所以大概不能提供如何用 Mail3 主機架站的方法。
不過我可以大致說一下要架站要怎麼做。

流程:
1. 找到網頁空間並申請帳號
2. 在本機或網頁空間提供的架站工具寫好網頁並上傳
3. 後續的維護

流程 1. - 找到網頁空間並申請帳號

目前可以利用的網頁空間很多，申請帳號也只要填些基本資料，
然後等認證信寄到你的電子郵件信箱中，再依指示完成註冊就好了。

網頁空間依費用可分成付費的、免費但有廣告的、供教育機關利用的、自行架設的。
依照你的需求，你可能只會需要一個支援一般圖片影音文字的網頁空間，
或者是有提供 CGI 、 ASP 、 ASPX 、 PHP 等的互動功能的。

不管是哪種，國外的服務通常比國內的還好，只不過需要懂點外文才能申請。
而想要自行架設站台的，一定要學會安裝控制流量的軟體，不然你的頻寬會被吃光，
還有很多安全性方面的問題要注意，這兒就先不提了。

關於空間，我只能提供我知道的和有用過的，要用哪個要自己去看該站的說明。
1. PCHome http://home.pchome.com.tw/
2. Geocities.jp http://geocities.yahoo.co.jp/
3. Brinkster http://www.brinkster.com/Default.aspx
4. PowWeb http://powweb.com/PowWeb/OnePlan/Detail

流程 2. - 在本機或網頁空間提供的架站工具寫好網頁並上傳

現在有蠻多的網頁空間都會提供架站工具了，這點你可以自行確認。

我現在要來說的是關於在自機編寫的方法。
要編輯網頁這種原始碼是純文字的文件，
只要有一個好用的純文字編輯器就好了，
其它也有把 HTML 標籤做成按鈕讓你直接點選的那種，
或是你寫的就直接是成品的所見即所得編輯器。
不過在此必須強調，不管用的是哪種，都該讓所有的瀏覽器能正常瀏覽，
就算不能正常瀏覽，也要有備用方案讓來訪者看見不能正常瀏覽的資料為何。

純文字編輯器，有相當多種類，從只是當筆記本等級的陽春編輯器，
到有語法變色標示，跟能編輯二進位碼，和可以直接編譯程式出來的都有。
但是你必須要注意的是它到底支援那些的文字儲存格式。
基本上 TXT, HTML, CSS, XML... 以及一些不特定副檔名的純文字檔都要能開，
而要能開這些純文字檔，該編輯器必須支援 DOS 及 Unix, MAC 格式的文件，
還有 Unicode 跟含 BOM (Byte Order Mark) 的 Unicode 文件。

可以直接點選 HTML 標籤來用的純文字編輯器我不熟，各位可以先記下來就好。

所見即所得的，跟純文字的比來是比較少，但是絕大多數人都是用這個的，
不過我必須在此提醒各位，這種東西畢竟是機器，所以錯誤是很多的。
Microsoft 出的 FrontPage 如果不注意的話，就會變成只有 IE 瀏覽器能看的網頁。
Macromedia 的 Dreamweaver 基本上也差不多會有這問題，
但是功能比起 FP 來說，使用上會更強而有力。
至於 Linspire 的 Nvu ，雖然寫出來的都是符合 W3C 所公開制訂的網頁標準規格，
但這並不保證該網頁的親和力能讓各位盲胞看得很舒服。

所以最後就是回到純文字編輯器了，基本上用 GNU/Linux 有著數不盡的工具可用，
不過我是用 Windows 的，但是我不用內建的記事本，雖然我一開始是用這寫的，
不過我現在用的是支援語法變色跟不同平台格式還有 Unicode 的文件的 SuperEdi 。

用純文字編輯器寫網頁，就一定會需要嘹解 HTML ，但是我可以告訴各位，
現在你學 HTML 只要十分鐘就好，因為大多數的都是複製貼上跟找資料就好，
你需要去修改跟去背下來的地方很少的，就算網頁有寫錯，
只要你丟給 W3C 的檢查工具，它就會跟你說哪一行有錯，並給你建議了。
關於網頁的檢錯，我是利用 Firefox 瀏覽器上的 WebDeveloper 擴充套件來協助的，
只要按按鍵盤組合鍵，就可以檢查本機或網頁的 HTML 是否有寫錯了。

總之我就先進入正題，告訴各位為何花十分鐘就能學會 HTML 吧，雖然說得有點誇大啦。

首先 HTML 有四個基本的專有名詞要記，就是元素、標籤、特徵、值。
元素就是構成網頁的元件，標籤則是用以標示元素的起始及結束範圍，
特徵則是該元素的特色，值則是用以描述該元素的特徵如何如何用的。
四者的英文依序是 element, tag, attribute, value.
以下以一個段落(p, paragraph)元素為例來說明:

<p class="example">這是範例</p>

上例中用 < 和 > 包起來的就是一個標籤，裡面包的就是元素、特徵跟值，
要注意的是起始標籤和結束標籤的格式是不同的，起始是 <元素> ，結束是 </元素> 。
而特徵跟值是只能寫在起始標籤中的，以上例來說，
在此所用到的特徵的名稱叫做 class ，也就是類別的意思，
而後面接的 example ，就是說這個 p 元素是屬於 example 這個 class 。
至於被起始和結束標籤包起來的，就是該元素所要表達的內容部分。

到此你已經學會了一個很有用的基本觀念了，不過這只是為了幫助各位理解 HTML ，
所做的一個基本說明，接下來我才正要進主題，來說明寫一份正確 HTML 的觀念。

還在編寫中。
筆記: 接下來要說明蜂巢式架構、元素的層級分為行內(inline)跟區塊(block)兩者，
以及 HTML 中的文件標頭(head)部分跟內容(body)部分。

可利用的網頁編輯器:
1. SuperEdi http://www.wolosoft.com/en/superedi/
2. DreamWeaver http://www.macromedia.com/go/gnavtray_dwmx_home
3. Nvu http://moztw.org/nvu/

HTML 和網頁編輯器的參考討論串跟文件:
viewtopic.php?t=3925
http://wiki.moztw.org/index.php/HTML_Gu ... 6%E9%A0%81

W3C ( World Wide Web Consortium ) 的網站:
首頁 http://www.w3.org/
HTML 檢錯工具 http://validator.w3.org/

流程 3. - 後續的維護

還在編寫中。

----
本文件以創意公用 Creative Commons 授權條款的
姓名標示-非商業性-相同方式分享 2.5
來發布，歡迎各位在遵行上述條款的情況下自由散布或修改使用。
該授權條款的說明網頁如下。
http://creativecommons.org/licenses/by- ... deed.zh_TW

--
※ 修改:‧wini 於 Mar 8 10:32:56 修改本文‧[FROM: 61-223-179-159.dynam]
※ 來源:‧淡江蝙蝠BBS資訊總站 bbs.batol.net‧[FROM: 61-223-179-159.dynam]

=自由開放的盲用網頁架設文件 二點五補充版(2006/03/12 17:30 台灣時區)=

本補充版只是把第二版時忘了寫上的東西，
還有不足的東西給補上用的，並不打算把原文件也寫進來。

補充項目
1. FTP 軟體
2. HTML 的補充
3. CSS 的補充
4. XML 的補充
5. RSS 的補充
6. 第二版的錯誤
7. 其它

補充項目 1 - FTP 軟體

首先是流程一，找到網頁空間後，
有些網頁空間會提供用 FTP 上下傳檔案的服務，
好讓你把流程二做好的檔案給上傳。
基本上我是很想說請各位自己看該網站的說明啦，
不過還是在此補充些 FTP 軟體好了。

首先是 FileZilla ，免安裝，自由使用，
開放程式原始碼，除了使用者端(Client)用的版本外，
還有架設 FTP 伺服器(Server)的版本。
真要說有啥缺點，就是對萬國碼 Unicode 的支援較差了點。
另外若是安裝時選擇將設定檔存成 XML 檔案，
該檔案會被放在 FileZilla 的安裝目錄下，
然後又因為這是免裝也能使用的，所以你裝到喜歡的目錄下，
以後備份該目錄的檔案就好了。
http://filezilla.sourceforge.net/

【待補充: FileZilla 的使用方法】

然後是 SmartFTP ，商業軟體，
不過學術使用是免費的，只是執行時會一直跳視窗出來煩你而已。
基本上這很棒，不過我很久沒用的，就暫時不提了。
http://www.smartftp.com/

補充項目 2 - HTML 的補充

之前忘了說一件很重要的事，就是 HTML 是靜態的網頁語法，
它只負責印出資料，還有連結不同的文件，送表單資料給後端資料庫，
以及標示出文件的條理，也就是標示出哪些是標題或段落還有表格這樣子，
單純一份純 HTML 的文件，
不會讓你的 Enter 鍵變成 Esc 鍵，這是 JavaScript 在做的；
它也不會告訴你的印表機要在哪兒換頁列印，這是 CSS 在做的，
它就只會做像你的作業系統的檔案管理員在做的事一樣，
表示出檔案，在你執行檔案時，讓相對應的程式去運作這樣子，
至於用 HTML 來播放背景音樂，
正確來說它只是可以直接叫 Windows Media Player 來播音樂而已，
並不是 HTML 在播放音樂的。
當然這些只是我個人對其用途的解釋，更詳細的要找 W3C 的官方文件了。

補充項目 6 - 第二版的錯誤

首先是在說明到 HTML 的巢狀階層架構時，所舉的表格 table 的例子。

04 <th>標題文字</th><!-- th 代表一橫列中的一格 -->
05 <th>標題文字</th><!-- th 亦用來表示標題文字 -->

這兒我當時為了字數上對齊，結果沒有解釋得很明白，現在我再重新說明一下。
th 是一橫列中的一個儲存格，然後它又是用來表示該儲存格是標題，
既然是標題，那麼它就會被放在第一直行或第一橫列的位置。
而我原本的說法，很有可能讓人誤以為 th 跟 h1 h2 等的用法一樣，
所以便在此進行了追加的說明。

補充項目 7 - 其它

未來本文件預定的變更:
1. 文件標題未來有打算改成別的
2. 補充上 W3C 相關文件的位置
3. 補充上 robots.txt 文件的寫法

天哪，我們只是想學寫個簡單的網頁，怎麼會給這麼複雜的範例呢！
各位，這就是我滿滿的愛呀，請利用之前教的觀念仔細分析一下吧。

謝謝分享 這個對我很有幫助。

看到這個:
我笑了 :lol:
滿滿的愛啊~
下次寫信給網頁管理員的時候可以

「您說這是什麼話呢。那是我的溫柔，是我的親切呀。請您不要再說些冷淡的話了呀。」

拜讀完畢，很棒的，看來這好像是給初學的視障人員「讀」的吧！你真是好人，做如此偉大的工作，值得鼓勵的。有小小的個人看法提供你一下：

1.attribute坊間幾乎習慣翻成「屬性」。不過不管怎麼翻譯，其實在不同的華語區域也可能很大的不一樣(像對岸)，永遠也不可能有一致的翻譯。所以，建議要另附一份專有名詞中英譯對照索引，這是國人大部份作者都忽略的部份，但是它卻是非常有幫助的。

2.既然是給盲者閱讀，像程式碼的行編號，其實是沒有很大作用，因為讀過不太可能記得，而在後面解說時提到如08行，那叫盲人去那找08行，向上「看」，不可能。所以，解說時例子應該要重列一次才恰當。