蔡逸竹

它是「所見即所得(WYSIWYG )」的網頁編輯器。不建議在<Nvu>上直接修改 HTML 原始碼， 不過也可以在狀態列上的標籤 (tag) 上點右鍵，修改標籤的屬性來達到手動修改的目的。
Nvu 目前雖已是 1.0版，但是在功能上，仍有很大的改進空間。
目前較大的問題是：1.「框架」的支援性很差；2.某些功能有問題：你修改，它不動如山。
Windows XP 與 Linux 皆可安裝，使用方法一致。





nvu簡介

跨平台：可以在MS-Window或是在Linux下執行

操作容易:Nvu是一個輕量級的開發工具，畫面操作簡單,親和力強

Nvu(讀作 N-view，是 New view 之意)是由Linspire主導的的開放原始碼軟體

Nvu 根基於 Mozilla 平台,所以類似於mozilla設計師

Nvu以 Gecko 模塑引擎為基礎

Nvu具有所件即所得功能

Nvu遵守重要的網頁設計規範來產生網頁，所以透過Nvu製作的網頁將會更符合網頁規範與標準



安裝nvu
step 1:下載軟體:
NVU 官方網訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
下載 NVU 1.0 中文版

• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
• 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
  for :MS-window:訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
  for Linux:訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
  
  step 2:更改語言介面:
  1.0 語言資源檔(各平台通用):訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
  語言資源檔可將已安裝的英文版轉換為中文，請將下載後的 en-US.jar 拿去蓋掉已安裝 NVU 目錄下 chrome 子目錄內的 en-US.jar 即可。
  
  Windows 版中文化：請把中文套件 en-US.jar ，直接覆蓋 C : Program filesNvuchrome/en-US.jar
  Linux 版中文化：請把中文套件 en-US.jar ，直接覆蓋 /path/to/your/nvu/chrome/en-US.jar
  
  step 3:修改偏好設定(工具/偏好)
  
  
  
  
  操作環境視窗
  
  
  網站管理：開關網站管理
  開啟方式:
  
  關閉方式:
  
  為什麼要網站管理?
  當網頁製作好後,上傳至某網站發佈,針對發佈網頁之個人網頁空間作管理,如檔案刪除、更名、 新增資料夾等工作為網站管理,nvu提供下列管理方式:  
  
  重整:對某一資料夾若有新檔案或變動時則須作重整
  
  建新的資料夾
  
  重新命名
  
  刪除
  
  停止：針對上傳動作
  
  
  網站設定
  
  
  新網站設定：填入上述資料→按新網站
  網站編輯：設定網站→選一網站編輯→修改資料
  網站刪除：設定網站→選一網站刪除→移除站台
  網站預設：設定網站→選一網站預設→存成預設值
  
  顯示設定
  
  
  全部檔案：顯示所有檔案
  HTML文件：顯示所有HTML網頁
  圖片檔：顯示所有圖片檔如JPG,TIF,GIF

[ 本帖最後由 蔡逸竹 於 2007-7-12 22:07 編輯 ]

蔡逸竹

開啟新檔案
開啟方式:開啟方式有下列兩種

檔案→開新檔案
在功能圖示選開新檔案

開啟模式:開啟方式有下列兩種

在新分頁開啟:同一視窗開啟不同分頁,在編輯視窗下新增一分頁 在新分頁開啟:開啟另一新視窗

開啟新文件開啟模式/更多選項)

空白文件：建立一新文件 根據樣板所建立新文件：套用樣板建立新文件 空白樣板：建立一新樣板文件 建立在：在何處建立一新樣板、文件

開啟檔案
開啟方式:開啟方式有下列兩種

檔案→開啟舊檔
在功能圖示選開啟

開啟後出現一對話方塊,選擇欲開啟檔案
開啟模式:開啟方式有下列三種

開啟舊檔：開啟本地檔案 開啟網路文件：開啟網站上檔案,需要輸入網址,
最近開啟的文件：開啟最近十筆文件(內定),開啟數量可以經由工具→偏好設定→一般作設定

蔡逸竹

關閉分頁
關閉：檔案→關閉,關閉目前分頁,或者在編輯視窗下點選如下所示


全部關閉：檔案→全部關閉,關閉所有分頁

儲存檔案
儲存方式:儲存方式有下列兩種

檔案→儲存/另存新檔
在功能圖示選開啟

儲存模式:開啟方式有下列二種

儲存：原檔名儲存 另存新檔：重新輸入存檔路徑與新檔名,第一次存檔會要求存入網頁標頭


儲存並改變字元編碼:儲存檔案編碼

網頁出版
出版方式:出版方式有下列兩種

檔案→發佈網頁
在功能圖示選開啟

出版設定發佈)

網站名稱：填入上傳網址,由右邊下拉式選單點選,若不在選單內可以點選新網站作設定 頁面標題:若是第一次新檔則需填入標題,否則原標題將會自動出現 檔名：若是第一次新檔則需填入檔名,否則原檔名將會自動出現 網站給本頁用子目錄：本頁上傳之目錄 使用本站子目錄：若圖片或是其他檔案存在本目錄下之子目錄則需在此設定,若沒有子目錄需建立,否則會出現上傳錯誤

出版設定設定)

網站相關設定
重新發佈：若原檔案內容修定則可直接作發佈  

頁面屬性
頁面屬性:包含頁面標題、作者、敘述‧‧‧
頁面屬性設定:格式→頁面標題及屬性

頁面標題:設定值將出現網頁title標籤內,方便辨識網頁用途,出現在編輯視窗內分頁標題上 作者：編這網頁作者 敘述：說明網頁內容用途以上內容出現於如下HTML語言 樣板：勾選此項，存檔時將存樣板格式 語系:設定瀏覽器開啟所用語系 文字方向:文字排列方向 字元編碼：設定瀏覽器開啟所用字元編碼注意：此與儲存設定編碼不同，這裡所設定是給瀏覽器用,相關設定出現在HTML語言

頁面背景語顏色設定

蔡逸竹

標題文字
說明：對一行(依斷行)採用h1...h6格式,套用範圍為整行
開啟說明：

Way1:格式→段落→產生一選單選取Heading1...Heading6，如下


Way2:

使用說明：
1.對已有文字作編修:圈選文字部份，再選標題文字，則該段文字套用標題文字格式
2.新增文字：選標題文字，填入文字，則該段文字套用標題文字格式
HTML說明：
＜Hn＞....＜/Hn＞n=1,2,3,4,5,6    * 控制文字大小,數字越大文字越小    * 屬性:設定排列方式      語法:＜Hn align=排列方式＞排列方式有下列三種:          o left-->靠左          o center-->置中          o right-->靠右 字體設定：僅針對所選取之文字
字體顏色設定：

開啟說明：

Way1:格式→文字顏色
Way2前/背景)

使用說明：

字體大小設定：

開啟說明：

1.以big標籤作為放大處理，格式→大小(縮小/放大) 2.以big標籤作為放大處理，在格式化圖示點選(縮小/放大)
3.以font size標籤作為放大處理，格式→大小(x-small...‧‧‧xx-large)

使用說明：
1.對已有文字作編修:圈選文字部份，再選文字，則該文字套用文字大小格式
2.新增文字：設定文字大小，填入文字，則該段文字套用文字大小格式
3.font size格式以medium為基準,『＋』表示放大，『—』表示縮小

字體字型設定：

開啟說明：格式→字型

HTML說明：
＜font face="字型" size="大小" color="顏色"＞....＜/font＞    * 此為作業系統所提供字型,若使用者系統不存在該字型,則以內定字型    * 屬性:      有下列三種:          o face-->選取字型          o size-->選取字型大小,有1...7,其中第7級為最大          o color-->選取字型顏色,格式(#RRGGBB),以RRGGBB16進位碼表示如(#FF00FF) 實體文字設定
開啟方式：

1.格式→文字格式 2.格式化圖示開啟(粗體、斜體、底線)

各種模式：

# 此為HTML所提供字型,不能設定文字大小,且無屬性 # 有下列七種

控制標籤	字型說明
＜B＞....＜/B＞	粗體字
＜I＞....＜/I＞	斜體字
＜U＞....＜/U＞	加底線
＜S＞....＜/S＞	加刪除線
＜TT＞....＜/TT＞	細小字
＜SUP＞....＜/SUP＞	上標字
＜SUB＞....＜/SUB＞	下標字

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。   邏輯字體設定
開啟方式：

1.格式→文字格式

各種模式：

# 此為HTML所提供字型,不能設定文字大小,且無屬性 # 有下列八種

控制標籤	字型說明
＜EM＞....＜/EM＞	強調
＜STRONG＞....＜/STRONG＞	更強調
＜CITE＞....＜/CITE＞	備註
＜ABBR＞....＜/ABBR＞	縮寫
＜ACRONYM＞....＜/ACRONYM＞	首字母略縮
＜CODE＞....＜/CODE＞	程式碼
＜SAMP＞....＜/SANMP＞	範例輸出
＜VAR＞....＜/VAR＞	變數輸出

[ 本帖最後由 蔡逸竹 於 2007-4-15 13:30 編輯 ]

蔡逸竹

插入特殊字元
開啟方式：

1.插入→特殊字元與符號

其他：

# ＜,＞,&,"因在瀏覽器有其特殊功用,故不能直接套用,需再做轉換 有下列四種

顯示符號	控制碼	說明[/td][tr]
＜	&ｌｔ；	控制標籤一部分[/td][tr]
＞	＆ｇｔ；	控制標籤一部分[/td][tr]
＆	＆ａｍｐ	代碼開頭[/td][tr]
”	＆ｑｕｏｔ	函蓋屬性值[/td][tr][/tr]

# 以&作為開頭 # 以;作為結束 在Nvu可以直接在編輯視窗直接輸入上述字元，Nvu會自動轉成控制碼

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


註解內容
為什麼要註解？

1.為了除錯(debug)

2.為了特殊需要

HTML語法：

＜！－－註解內容　－－＞
加入註解：

1.插入→評論
2.圈選文字後加入插入→評論,出現一對話方塊，填入註解文字，則該段文字後面出現一註解標籤，點選兩下該標籤進入註解對話方塊

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


雙引號標籤
說明:在此範圍中,會用雙引號將文字括起來

HTML語法:


＜q＞....＜/q＞
    * 此種方式可能會因不同瀏覽器而不同顯示

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

[ 本帖最後由 蔡逸竹 於 2007-4-15 13:29 編輯 ]

蔡逸竹

分段

開啟方式：

格式→段落→Paragraph

使用說明：
以〈br〉標籤作為段落分割依據,游標所在段落(〈br〉分割),其〈br〉標籤將轉成段落標籤〈p〉...〈/p〉，同時前後個空出一行。此標籤與＜br＞很相似,不同點是＜br＞不會前後空出一行
分段顯示：檢視→段落輪廓，將可出現如下虛框，表示該段文字式以＜P＞...＜/P＞標籤作為段落

HTML語法：
＜P align="屬性值" ＞....＜/P＞    * 屬性:      有下列三種:          o left-->靠左          o center-->置中          o right-->靠右

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


強迫斷行


使用說明：

在編輯視窗中,用一般模式下,按下Enter鍵
HTML語法：



＜br＞
    * 該文字會顯示在下一行


強迫不斷行


使用說明：

斷行顯示一般是由瀏覽器決定，除非用強迫斷行使其斷行，但有時為了閱讀完整性，一段文字不要隨瀏覽器斷行，此時需用強迫不斷行，在瀏覽器下方就會產生捲軸

開啟方式：
格式→文字格式→不斷行

HTML語法：

＜nobr＞

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


預先格式化

開啟方式：
格式→段落→依原格式呈現


使用說明：

預先格式化是指會將使用者格式源源本本忠實呈現出來 先將格式製作好後，圈選預先格式化區域，選擇預先格式化，Nvu會依＜br＞為分界，前後加入＜pre＞＜/pre＞

HTML語法：
＜PRE＞....＜/PRE＞    * 將一段文字以其原貌呈現出來    * 若其內有其他控制標籤一樣有作用

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

向右縮排

開啟方式：
Way1:格式→向右縮排
Way2:(縮排/還原)

使用說明：

每處理一次在每一列開頭與行尾會向中空出5個空格 先將格式製作好後，圈選區域，選擇向右縮排，Nvu會依＜br＞為分界，向右縮排

HTML語法：
＜BLOCKQUOTE＞....＜/BLOCKQUOTE＞

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


對齊

開啟方式：

Way1:格式→對齊

Way2:(靠左/靠右/置中/左右對齊)

使用說明：

對齊出現許多標籤之屬性如以align即是設定排列屬性
先將格式製作好後，圈選區域，選擇對齊方式，Nvu會依＜br＞為分界，作靠左/靠右/置中/左右對齊

HTML語法：
＜...align=屬性＞....＜/...＞

語法	說明
left	靠左
right	靠右
center	置中
justify	左右對齊

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

蔡逸竹

表格概說

表格架構:
＜TABEL border="n" cellspacing="n" cellpadding="n" height="n"
width="n" bordercolor="顏色" bgcolor="顏色" align="屬性值"＞表格開始
   ＜TR＞表格列開始
        ＜TH＞....＜/TH＞.....標題儲存格標籤,標籤含蓋文字為粗體,此標籤可有可無
        ＜TD＞....＜/TD＞.....儲存格標籤
        ........................
        ........................
   ＜/TR＞
   ＜TR＞..
        ＜TH＞....＜/TH＞.....
        ＜TD＞....＜/TD＞.....
        ........................
        ........................
   ＜/TR＞
＜/TABLE＞
表格結束

    * 表格屬性
    * border---框線厚度設定,n為一數值
    * cellspacing---儲存格至表格邊框距離,即為框線厚度,n為一數值
    * cellpadding---儲存格內文字邊緣至邊框距離,n為一數值
    * height---表格高度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言
    * width---表格寬度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言
    * bordercolor---表格邊框顏色
    * bgcolor---表格背景顏色
    * align---表格對齊方式，有left，right，center
    * vspace---表格與文字垂直距離
    * hspace---表格與文字水平距離


增刪表格
新增表格

開啟方式：
表格→插入→表格，出現一對話方塊，有三種模式可以選擇

快速設定：可以移動滑鼠,按確定，即可產生表格
詳細設定：自行設定列與欄、寬度、框線
儲存格設定：設定表格內整體儲存格文字對齊方式與框線大小、邊界距離

調整表格大小：
移動表格8個小方塊
表格背景色、位置、標題位置設定：表格→表格進階設定，將可出現如下

表格標題設定：
設定標題位置後,即可輸入
表格刪除：
選定表格後，表格→插入→表格
表格HTML語法：
表格標題標籤:   
* 語法:＜CAPTION align="屬性值"＞   
* 屬性值:    top---表格標題置於表格上方    bottom---表格標題置於表格下方    left---表格標題置於表格左方    right---表格標題置於表格右方＜TABEL border="n" cellspacing="n" cellpadding="n" height="n"width="n" bordercolor="顏色" bgcolor="顏色" align="屬性值"＞   
* 表格屬性    * border---框線厚度設定,n為一數值   
* cellspacing---儲存格至表格邊框距離,即為框線厚度,n為一數值   
* cellpadding---儲存格內文字邊緣至邊框距離,n為一數值   
* height---表格高度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言   
* width---表格寬度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言   
* bordercolor---表格邊框顏色   
* bgcolor---表格背景顏色   
* align---表格對齊方式   
* 設定:表格/插入/表格  


列/欄增刪

新增一筆列/欄
表格→插入→表格，
新增多筆列/欄
表格→表格進階設定，會在列與欄尾端新增筆數
刪除一筆列/欄：
表格→刪除→列/欄，將刪除所在列/欄
刪除多筆列/欄：
設定刪除多筆列/欄後,表格→刪除→列/欄，將刪除選取列/欄
列/欄背景色與其他屬性設定：
選定表格後，表格→表格進階設定，進入如左對話方塊選取列/欄，作整列/欄屬性設定

列/欄HTML語法：
列語法:＜TR  valign="屬性值"  height="n" bordercolor="顏色"bgcolor="顏色" align="屬性值"＞列開始＜/TR＞列結束# 列屬性# height---列高度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言# bordercolor---列外框顏色# bgcolor---列背景顏色# align---列內文字水平對齊方式# valign---列內文字垂直對齊方式   
* top----靠上對齊   
* middle----置中對齊   
* bottom----靠下對齊

蔡逸竹

儲存格增刪與分割合併
新增一個儲存格
表格→插入→在此儲存格之前/後，產生一在尾端新儲存格

分割/合併儲存格

分割儲存格：表格→分割儲存格，對游標所在儲存格進行分割
合併儲存格：表格→向右合併一個儲存格，對游標所在儲存格合併右邊儲存格

儲存格選取：(直接拖曳滑鼠)

單一儲存格選取：表格→選取→儲存格，選取游標所在儲存格
全部儲存格選取：表格→選取→所有儲存格，選取表格內所有儲存格
背選取儲存格則有棕色框

儲存格背景色設定：
表格→表格或儲存格背景色

儲存格背景色與其他屬性設定：
選定儲存格後，表格→表格進階設定，進入如左對話方塊選取儲存格，作儲存格屬性設定
儲存格類型設定：

一般儲存格為＜TD＞...＜/TD＞
標題儲存格為＜TH＞...＜/TH＞標題儲存格為粗斜體，文字置中

儲存格HTML語法：
儲存格語法:＜TD  valign="屬性值"  height="n" bordercolor="顏色" colspan="n" rowspan="n"bgcolor="顏色" align="屬性值"＞列開始＜/TD＞儲存格結束   
* 資料格屬性   
* height---列高度,n為一數值,可唯一數值px,或為百分比,百分比指相對瀏覽器而言   
* bordercolor---儲存格外框顏色   
* bgcolor---儲存格背景顏色   
* colspan---儲存格水平延伸(水平合併)   
* rowspan---儲存格垂直延伸(垂直合併)   
* width---儲存格寬度   
* align---儲存格內文字水平對齊方式   
* valign---儲存格內文字垂直對齊方式  
        o top----靠上對齊   
        o middle----置中對齊  
        o bottom----靠下對齊


文字轉表格
使用時機：
利用速算表轉成CVS檔(以逗點分格或是其他符號)，載入檔案後，轉成表格
使用方法：

1.表格→文字轉表格，出現如下對話方塊
2.選擇分格符號
3.勾選刪除分欄字元，將分隔符號刪除，按下確定

  

插入線條
使用方法：
插入→水平線
調整水平線屬性：
直接在水平線按兩下或是滑鼠移至水平線按右鍵，產生一屬性選單

水平線HTML語法：
線段設定:＜HR align="屬性值" size="n" width="n" noshade＞....＜/HR＞   
* 此為作業系統所提供字型,若使用者系統不存在該字型,則以內定字型   
* 屬性:      有下列三種:
         o align:設定排列位置                + left-->靠左                + center-->置中                + right-->靠右
         o size:線段粗細,n值越大,線段越粗,若無設定,則n=1
         o width:線段長度,設定方式有:                + 百分比:相對於瀏覽器                + 點數:實際PIX,換言之長度不會因瀏覽器而變
         o noshade:不產生陰影,即產生一實線
         o color:設定線條顏色,產生一實線(僅ie可用)

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。  


表格進階設定
表格邊框顯示方式
＜table frame="邊框顯示方式,如下"＞顯示方式

void	不顯示(預設)	above	顯示最上面框線
below	顯示最下面框線	lhs	顯示左邊框線
rhs	顯示右邊框線	hsides	顯示上下框線
vsides	顯示左右框線	box	顯示整個框線
border	顯示整個框線

使用方法：

表格→表格進階設定

HTML屬性→選取屬性→填入其值


表格內框線顯示方式
＜table rules="內框線顯示方式,如下"＞顯示方式

none	不顯示內框線(預設)	rows	顯示水平框內框線
cols	顯示垂直框內框線	groups	顯示thead、tbody、tfoot、colgroup、col等群組之間內框線
all	顯示所有內框線

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
列群組化：

＜ thead ＞~＜ /thead ＞：表頭
＜ tbody ＞~＜ /tbody ＞：資料內容
＜ tfoot ＞~＜ /tfoot ＞：表尾
thead:必須有tr標籤
tfoot:必須有tr標籤
tbody:必須有tr標籤
(1)只能設定一個thead、一個tfoot
(2)最好依thead、tfoot、tbody順序設定。

分割垂直欄群組化：

＜ colgroup span="欄數" width="寬度" class="樣式名"＞~＜ /colgroup ＞
colgroup:直欄群組分割，n表示以多少欄為一群組
colgroup可以重複設定
放在＜table＞與第一列＜tr＞間

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

蔡逸竹

編號清單
使用方法：

格式→清單→自動編號
在格式化圖示點選
編號區隔是以斷行(按Enter鍵)為準

進階設定:

格式→清單→清單進階設定

清除設定:
選取要清除範圍，在進階設定對話方塊中清單類型選【無】。
巢狀清單設定:
step1:選取範圍
step2:製作第一層格式
step3:選取第二層範圍，並將其內縮
step4:製作第二層格式
編號清單HTML語法：
＜OL start="n" type="p"＞        ＜li＞.....        ＜li＞.....        ＜li＞.....＜/OL＞   
* 每一項目以＜li＞為開頭   
* 屬性:
         o start:起始數設定
         o type:型態設定            屬性值        符號            TYPE=1        阿拉伯數字1,2,3...            TYPE=a        小寫英文數字a,b,c,...            TYPE=A        大寫英文數字A,B,C,...            TYPE=i        小寫羅馬數字i,ii,iii,...            TYPE=I        大寫羅馬數字I,II,III,...   
* 可以設定巢狀式

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。



項目符號清單
使用方法：

格式→清單→項目符號
在格式化圖示點選
項目符號區隔是以斷行(按Enter鍵)為準

進階設定:

格式→清單→清單進階設定

清除設定:

選取要清除範圍，在進階設定對話方塊中清單類型選【無】。

巢狀清單設定:

step1:選取範圍
step2:製作第一層格式
step3:選取第二層範圍，並將其內縮
step4:製作第二層格式

項目符號HTML語法：

＜UL  type="p"＞
        ＜li＞.....
        ＜li＞.....
        ＜li＞.....
＜/UL＞

    * 每一項目以＜li＞為開頭
    * 屬性:
          o type:型態設定
            屬性值        符號
            TYPE=circle        ○
            TYPE=disk        ●
            TYPE=square        ■
    * 可以設定巢狀式

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。


定義清單

# 這一類清單一般包含數個主題,而在每一主題又有敘述# 這一類清單以＜DL＞為開頭# 以＜DT＞為宣告主題# 以＜DD＞為宣告主題內容，內容會內縮5字元

使用方法：

產生＜DT＞宣告主題：格式→清單→Term
產生＜DD＞宣告主題內容：格式→清單→無符號清單

進階設定:

格式→清單→清單進階設定

定義清單HTML語法：

＜DL＞
   ＜DT＞主題.....＜/DT＞
   ＜DD＞內容.....＜/DD＞   
   ＜DD＞.....＜/DD＞
   ＜DT＞.....＜/DT＞   
   ＜DD＞.....＜/DD＞     
   ＜DD＞.....＜/DD＞
＜/DL＞

    * 每一項目以＜DL＞為開頭，為結束
    * 屬性:＜DT＞連接主題，為結束
              ＜DD＞連接內容，為結束     

     
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

蔡逸竹

超連結概述
超連結概述:
URL:主要功能是告訴瀏覽器以何種服務去連結指定電腦

格式如下:
scheme://host[:port]/path/filename

scheme:有ftp,http,mailto,telnet,gopher...
host:連結指定電腦IP或hostnameport:伺服器埠號path:路徑filename:連結檔案
    * 語法:
    * ＜a href="scheme://host[:port]/path/filename"＞.....＜/a＞
    * 連結時要注意相對路徑與絕對路徑

製作超連結

連結點：可以是文字或是圖片，當滑鼠移至連結點滑鼠變成手形 連結目標：即滑鼠移至連結點按下左鍵將前往何處

開啟連結方法
Way1:插入→超連結
Way2:
開啟一對話方塊



同目錄檔案/不同目錄檔案超連結

同目錄檔案連結:

＜a href="檔名"＞連結點名稱＜/a＞ 不同目錄檔案連結:
檔案相對位置:
/---/my---/aaa--now.file
        ├-/bbb--next.file
目前檔案為/my/aaa/now.file,欲連結檔案為/my/bbb/next.file
則＜a href="../bbb/next.file"＞連結點名稱＜/a＞
.---代表目前路徑
..---代表上一層路徑

文字連結點：
圖形連結點：選擇一圖形，在功能圖示選超連結

開啟一對話方塊



書籤超連結
連結到同一檔案中某一部份:     
* 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 語法:＜a name="標號名稱"＞連結點名稱＜/a＞   
* 再做連結語法:＜a href="#標號名稱"＞連結點名稱＜/a＞
連結到不同一檔案中某一部份︰(如:a.html欲連結至b.html某一部份)     
* 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 語法:＜a name="標號名稱"＞連結點名稱＜/a＞   
* 再做a.html檔案連結語法:＜a href="b.html#標號名稱"＞連結點名稱＜/a＞

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。  



連結顏色與快速鍵設定
連結顏色設定

設定方法：
套用至所有頁：工具→偏好設定→新頁設定
套用目前頁：格式→頁面顏色脊背景

HTML語法：
＜BODY LINK="顏色" VLINK="顏色" ALINK="顏色"＞.......＜/a＞   
* LINK--連結點尚未被點選過的顏色   
* VLINK--連結點已被點選過的顏色   
* ALINK--連結點被滑鼠按下,但尚未放開

快速鍵設定:
    * 快速鍵設定語法:＜a href="URL" accesskey="英文字母"＞連結點名稱＜/a＞   
    * 英文字母無大小寫之別
    * 可由連結之進階選項做設定



影像地圖(image_map)
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
何謂影像地圖：在一張圖片上，分割不同區塊，每個區塊連接至不同網頁
如何製作方法：

目前釵h影像處理軟體都有提供製作方法，茲以GIMP為例
step1:開啟一張圖檔，檔案→開啟
step2:濾鏡→網頁→image_map
step3:訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。

HTML語法：
# 影像地圖有兩種類型,1.Server Side 2.Client Side# 格式:＜MAP SRC="圖片檔" NAME="名稱" USEMAP="#MAP 名稱"＞＜MAP NAME="名稱"＞＜AREA SHAPE="形狀" COORDS="x,y座標" HREF="連結URL" ＞＜╱MAP＞   
* 形狀類型: rect(矩形)預設   
* circ(圓形)   
* poly(多邊形)   
* COORDS設定該區域位置及大小   
* rect(矩形)-(x1,y1,x2,y2)左上角與右下角   
* circ(圓形)-(x,y,r)x,y為圓心座標,r為半徑   
* poly(多邊形)-(x1,y1,x2,y2,x3,y3.....)各點座標   
* USEMAP:指定對照表

訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。  


移除超連結
選取連結點，格式→中斷超連結
移除書籤
選取書籤，格式→移除書籤