通知：因為有了網頁編輯器 匠工具，本頁將不再提供網頁模板下載。
網頁編輯說明
按照以下步驟，可以建立符合本站規格的網頁：
- 下載本站網頁
最新樣板(已不再提供) 並解壓縮。 - 使用支援 UTF-8 編碼的文字編輯器開啟檔案，例如 Windows 的記事本。
- 修改網頁標題，即文件第 8 行的 <title>忍道之友</title> 中間的字。
- 參考標籤定義表，修改本文，即文件第 66 行的 編輯區 部分。
- 也可以參考測試方法，看看效果。
- 其他地方請不要修改，完成後存檔為 .html 即可。
- 將檔案放上網路，網址送到 The W3C Markup Validation Service 驗證，修正直到符合網路標準。
標籤定義表
不知如何下手的話，可以先將 編輯區 改為下記最基本的形式：
若要加上特定的 HTML 元素，請參考下表：
最後的 div 與 span 標籤可用於套用樣式，例如 <span class="outset_text">突起文字</span>
的顯示效果即為突起文字。
本站已將樣式定義於 CSS 檔案中，
可套用的樣式如下表：
<div class="topic">
<big>網頁編輯說明</big>
<div class="summary">
內文就寫在這裡。
</div>
</div>
若要加上特定的 HTML 元素，請參考下表：
| 標籤名稱 | 用途 | 使用方式 |
|---|---|---|
| br | 換行 | <br /> |
| a | 連結 |
<a title="提示文字" href="網址 (也可以使用相對位置)">連結文字</a> |
| a | 連結錨點 (本頁連結用) |
<a title="提示文字" name="連結名稱">連結文字</a> |
| a | 連結 (連到本頁) |
<a title="提示文字" href="#連結名稱 (見上述)">連結文字</a> |
| b | 粗體 |
<b>文字</b> |
| i | 斜體 |
<i>文字</i> |
| big | 大字 (本站常用於標題) | <big>文字</big> |
| small | 小字 (本站常用於註解) | <small>文字</small> |
| sub | 寫在下方 (例如化學式) | <sub>文字</sub> |
| sup | 寫在上方 (例如平方) | <sup>文字</sup> |
| abbr | 縮寫 (讀作一個詞) | <abbr title="原來的寫法">NASA</abbr> |
| acronym | 縮寫 (讀作各個字母) | <acronym title="原來的寫法">BBS</acronym> |
| del | 刪除的文字 |
<del>文字</del> |
| img | 圖片 | <img alt="替代文字" title="提示文字" src="圖片網址" /> |
| h1 | 標題 (一級) | <h1>標題是一種行要素</h1> |
| p | 段落 | <p>一段文章</p> |
| hr | 分隔線 | <hr /> |
| address | 聯絡資訊 | <address>信箱、留言板等的連結</address> |
| q | 引用文字 (單行) | <q cite="引用來源">文字</q> |
| blockquote | 引用文字 (區塊) | <blockquote cite="引用來源">文字</blockquote> |
| ul | 列表 |
<ul> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> |
| ol | 列表 (有編號) |
<ol> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> |
| li | 列表中的項目 | 如上述兩項 |
| table | 表格 |
<table> <tbody> <tr> <td>第一列第一欄</td><td>第一列第二欄</td> </tr> <tr> <td>第二列第一欄</td><td>第二列第二欄</td> </tr> </tbody> </table> |
| tbody | 表格的身體 | 如上述 |
| tr | 表格的一列 | 如上述 |
| td | 表格的一欄 | 如上述 |
| thead | 表格的頭 |
<table> <thead> <tr> <th>第一欄欄名</th><th>第二欄欄名</th> </tr> </thead> <tbody> <tr> <td>第一列第一欄</td><td>第一列第二欄</td> </tr> </tbody> </table> |
| th | 表格的欄名 | 如上述 |
| caption | 表格的標題 |
<table> <caption>表格名稱</caption> <tbody> <tr> <td>第一列第一欄</td><td>第一列第二欄</td> </tr> </tbody> </table> |
| div | 包裝 (區塊要素) | <div>各種區塊要素</div> |
| span | 包裝 (行要素) | <span>各種行要素</span> |
最後的 div 與 span 標籤可用於套用樣式，例如 <span class="outset_text">突起文字</span>
的顯示效果即為突起文字。
本站已將樣式定義於 CSS 檔案中，
可套用的樣式如下表：
| 樣式名稱 | 用途 | 使用方式 |
|---|---|---|
| .topic | 用於框住整個文章區塊 | <div class="topic">文字等</div> |
| .summary | 常用於縮排 | <div class="summary">文字等</div> |
| .outset_text | 突起文字，用於強調 | <span class="outset_text">突起文字</span> |
| .inner_block | 凹陷的區塊，常用於貼大量枯燥文字時 | <div class="inner_block">文字等</div> |
| .sub_topic | 置中對齊的 topic, 可讓其下的 big 置中 | <div class="sub_topic">文字等</div> |
| .p_formal | 更正式的段落，用於醒目的大字 | <p class="p_formal">一段文章</p> |
| .nav | 連結列，其下的 ul 會變成選單 | <div class="nav">...(ul 等)</div> |
| .snap | 擷圖可套用此樣式 | <img class="snap" alt="圖" src="ima.png" /> |
| .mass | 套用於龐大的 ul 或 ol, 列高會變大而清楚 | <ul class="mass">...(li 等)</ul> |
| .copytop | 用於標示文章授權 | <div class="copytop">文章授權</div> |
測試方法
按照以下步驟測試：
- 下載本站
所有網頁(已不再提供)，解壓縮後請保持原來結構。 - 將製作中的網頁放到妳想放的資料夾中，例如角色資料就應該放到 character 資料夾中。
- 以瀏覽器開啟網頁便能預覽了，最好能換個樣式試試看。
其他參考‧有用的連結
-
HTMLクイックリファレンス
HTML, CSS 用法的快速查詢，不過這是日文網站...
-
slayeroffice
內有不少 bookmarklet, 其中 MODI 可以讓滑鼠移到的地方，自動顯示其 HTML 或 CSS 屬性，對寫網頁者非常方便。 不會用嗎？把 MODI 加到瀏覽器的書籤 (我的最愛) 然後要用的時候選一下就行了。
MODI 可以按 esc 把它取消，更多功能請自己翻說明 (英文... 我也不曾用到) -
NVU 正體中文版
免費的網頁編輯器，以 Mozilla 為核心，現在已有正體中文版。
- 請使用適當的縮排，以後要改比較方便。