目 錄
Namo WebEditor是一套功能極強的網頁編輯軟體，操作界面簡易、人性化，而且有完善的網站管理功能，兼具許多重量級軟體的優點(如FrontPage、Dreamwaver)，不管是初學者或是功力深厚的專業工作者，Namo
WebEditor都能帶來不少助益，將是您製作網頁與發展個人特色網站的好幫手。
學習Namo WebEditor是一件很愉快的事，剛開始時可以經由網站精靈使用內建豐富的網站模板，快速地產生基本的網站架構，再依需要修改成自己想要的樣子。隨著使用經驗日增，Namo
WebEditor將是您揮灑創意的最佳選擇。本書將依循上述的學習軌跡，從快速建好一個專業網站的架構開始，再依需要逐步修改，書中的內容大致上涵蓋Namo
WebEditor重要且較常使用的功能，希望大家在學習後都能有所收穫。
雖然巿面上已有數種Namo WebEditor書籍，惟本講義是當時為本校（高雄巿中山國中）的教師研習而作，心裏特別有感情，故幾經斟酌，還是將之補充了數個章節以求完整。
本講義將置於網路上，歡迎自由運用，如果它對您有所助益，麻煩您寫信告訴我，讓我分享您的喜悅。
李權哲 06/01/2002
Email:
ccl@mail.csjh.kh.edu.tw
“有點想法”網址：
http://163.18.161.5/ccl/
http://163.18.161.3/~ccl/
請將滑鼠指標移至Namo
WebEditor圖示上，輕按滑鼠左鍵兩下即可。
或者您也可以從【開始】->【程式集】->【Namo WebEditor 4】->【Namo WebEditor
4】執行，您會發現在Namo WebEditor群組中還包含了其他的工具程式，如螢幕捕捉（Namo
Capture）、動畫製作（Namo GIF Animator）工具等。
 |
步驟一：從功能表列中選取【檔案】->【專案】->【網站精靈】。
 |
步驟二：從網站模板中選擇適當的模板加以套用，建議使用【班級首頁】這個模板，選定後按【下一步】。
 |
步驟三：輸入網站資訊，包括網站或組織名稱、電子郵件地址以及版權資訊。輸入的網站名稱將用來作為索引頁的主標題，輸入的電子郵件地址將自動插入專案中每一份文件底部。輸入完後後按【下一步】。
 |
步驟四：選定佈景主題。佈景主題是網站風格的表現，不同的佈景主題有不同的色系編排、背景圖片、按鈕造型、文字選項等，可依自己的喜好來選擇。【檢視佈景主題】可讓您先預覽該主題的內容。選定後請按【下一步】。
 |
步驟五：輸入儲存網站資料的資料夾，可以直接輸入，也可以【瀏覽】來點選，但如果該資料尚未建立，就只能直接輸入了。
 |
步驟六：輸入完後請按【完成】，如您所輸入的資料夾並不存在，會出現對話框，詢問是否要建立該資料夾，請按【是】。經由這幾個步驟，網站的架構就產生完成了。
 |
執行Namo WebEditor後，會有兩個工具程式執行著，一是網頁編輯工具，另一則是網站管理者，可以從桌面的工作列看到這兩個工具程式。在製作網頁時，我們會交互利用這兩個工具程式，隨時掌握網站的狀態，讓工作順利進行。
編頁編輯工具負責網頁的設計與編寫，除了基本的網頁要素元件可供選擇外，包括很多的靜態、動態的效果及資料庫聯結功能，網頁的修改也都是要用到它。編頁編輯工具有三種工作模式：【編輯】、【HTML】及【預覽】，分述如下：
【編輯】：提供視覺化的編排環境，一般都是在此狀態下工作。
【HTML】：可以看到網頁的HTML原始碼，如果您想加入特殊的程式碼，可以切換到此模式。
【預覽】：切換到此模式可以預覽成果，一如使用瀏覽器觀看。
網站管理者主要負責網站狀態與架構的呈現，有五種工作模式：【專案】、【清單】、【結構】、【連結】及【發佈】，分述如下：
【專案】：顯示目前專案網站的資料來及主要檔案的狀態。
【清單】：顯示目前專案網站的所有檔案的狀態。
【結構】：呈現目前專案網站的結構，最上方的是專案名稱，接著則是首頁，再來就是導覽列。導覽列是分層級的，如第一層、第二層等，原則是進網站後最先看到的導覽列(有超連結的文字、按鈕或圖示)位於第一層，從第一層連結進去才出現的導覽列是第二層，依此類推。除了呈現結構外，如果您要增刪、修改導覽列，也可以在此模式下進行，等一下我們立刻會用到。當然導覽列實質上都是以檔案的型態來存在的，只是從視覺上的結構來說，Namo WebEditor稱之為導覽列，因此，您想編輯哪個檔案，只要直接在該檔案快按滑鼠左鍵兩下，就會將該檔案切換至編輯工具即可編輯。
【連結】：呈現單一檔案與其他檔案的連結關係？
【發佈】：將網頁上傳至網路主機上，在此之前您必須先知道您網頁所在主機的位址與您個人的帳號和密碼。
大致上Namo WebEditor主要環境就是如此，接下來我們就開始著手修改剛剛利用網站精靈建好的網站成我們想要的模樣。
我們利用班級網頁所產生的網站，從結構上來看包括【簡介】、【新聞】、【校友資訊】、【家長資訊】、【圖書館】及【酷站】，這些從導覽列的位階上來看都是位於第一層。其中【簡介】又包括【學生】和【教職員】第二層導覽列，【圖書館】則包括【主旨1】、【主旨2】及【主旨3】等第二層導覽列。從實務上而言，【圖書館】的第二層導覽列特性是很有用的，這也是我們建議選擇班級模板的原因。
 |
假設現在我們想網站的結構調整為【簡介】、【教學資訊】、【教材資源】、【作品集】、【專案計劃】及【酷站】等，其中【簡介】將包括【網站簡介】及【個人簡介】，【教材資源】、【作品集】及【專案計劃】我們希望都能像【圖書館】般的第二層導覽列以方便我們分間別類整理資訊。我們開始著手進行吧!
步驟一：將【簡介】的第二層導覽列改成【網站簡介】及【個人簡介】，方法是在【教職員】上按滑鼠右鍵，選擇【內容】。
 |
步驟二：在【標題】中輸入網站簡介，同時請注意【導覽名稱】也會跟著變成【網站簡介】，改完後按【確定】。
 |
步驟三：依此方式將【學生】改成【個人簡介】，改完後按功能表列中的【專案】->【儲存專案】，就可以編頁編輯工具中的預覽模式看到最新的成果。
 |
步驟四：將【新聞】改成【教學資訊】。
步驟五：因為【校友資訊】及【家長資訊】用不到，所以我們要將它們移除，方法在【校友資訊】及【家長資訊】上按滑鼠右鍵，選擇【從導覽樹移除】。
此時專案結構變成為以下的樣子：
步驟六：接著我們希望能產生如【圖書館】般具備第二層導覽列的【教材資源】，方法是直接從【圖書館】複製。請在【圖書館】上按滑鼠右鍵，選擇【複製】，再到專案首頁上按滑鼠右鍵選擇【貼上】，就會在專案結構的最後新增一個【圖書館】圖示。
步驟七：將新增的【圖書館】改成【教材資源】。
步驟八：接著我們要為【教材資源】新增第二層導覽列，方法是請在【圖書館】下的【主旨1】上按滑鼠右鍵，選擇【複製】，再到【教材資源】上按滑鼠右鍵選擇【貼上】就新增一個【主旨1】的圖示，每按一下就會新增一個【主旨1】的圖示，假設我們目前需要四個。新增完成後，專案結構如下圖所示。
步驟九：將【教材資源】的【主旨1】依序改為【教材資源1】~【教材資源4】，或者是其他您希望的名稱，就新增完成【教材資源】。
步驟十：接著依步驟六至步驟九的方式完成【作品集】及【專案計劃】的新增動作，網站結構的修改就告一段落了。專案結構中導覽列各圖示項目的次序由左至右排列，在實際網頁瀏覽時是由上至下排列，如果您對導覽列各圖示項目的先後次序覺得不滿意，可以用滑鼠拖曳的功能將該圖示移至某一圖示的左邊或右邊加以調整。對有第二層導覽列的圖示而言，在它的右上角會有個+號或-號，您可以按+號或-號將第二層導覽列展開或收起來。調整後的專案結構如下圖所示(次序調整好了，第二層導覽列也都收起來了)：
 |
步驟十一：按功能表列中的【專案】->【儲存專案】，往後只要專案內容有所修改，最後一個步驟都是儲存專案。切換至編頁編輯工具中的預覽模式看看辛苦的成果，其實有點複雜但又不會太複雜，不是嗎?
完成結構的修改後，接下來我們就要開始編輯各網頁中的內容了，一邊編輯內容，一邊也要開始學習各項Namo WebEditor的各項工具，相信大家會更能體會它強大的功能。
在編頁編輯工具中有兩種方法可以增加新檔案：
(一)、按工具列上的
圖示，可以增加一個空白的檔案。
(二)、選取功能表上的【檔案】->【開新檔案】，可進入新建檔案的視窗。
 |
在新建檔案的視窗中，計有文件、頁框組、元件、表格及賀卡等不同用途的檔案模板可供選擇，選擇適當的檔案模板後，按【確定】。
 |
在增加新的檔案後，為了美觀，我們會希望為檔案增加背景。設定背景主要是以顏色或圖片，設定背景的步驟如下：
步驟一：在功能表上選取【插入】->【影像】->【背景影像】，即會背景的設定對話框。
步驟二：背景圖片的來源有三，可以從圖片檔、美工檔案或專案圖檔，為了考慮整體的一致性，我們選擇專案圖檔，將背景圖片設定成和專案中的網頁一樣，所以在【文件背景影像】對話框中，我們選取【專案】。
 |
步驟三：進入【從專案選取檔案】的對話框後，找到名為…._bg.gif的圖檔，它就是專案中所用的背景圖，選取後按【選取】，會回到剛才【文件背景影像】的對話框。
 |
步驟四：此時【文件背景影像】的對話框中已顯示該圖檔的完整名稱，按【確定】後就大功告成了。
 |
開啟專案中的網頁進行編輯，讓網頁的內容愈來愈充實，是件令人很喜悅的事。修改專案中的檔案，步驟如下：
步驟一：目前為止，我們一直都是在開啟專案的狀態。如果專案尚未開啟，請在編輯工具中，按功能表上的【專案】->【開啟專案】。
 |
步驟二：從開啟舊檔的對話框中切換到專案所在的資料夾，點選專案檔後按【開啟舊檔】。
 |
步驟三：開啟專案檔後，畫面會切換到網站管理者，請按【結構】標籤。
 |
步驟四：在網站姞構圖中，找到您要開啟的網頁，在讓網頁圖示上快按滑鼠左鍵兩下，就可以開啟該網頁，同時畫面也會切換到編頁編輯工具。
 |
步驟五：編輯完網頁後，記得要按網頁編輯工具功能表【檔案】->【儲存檔案】，將網頁的最新狀態儲存起來。
 |
步驟一：選取所要改變字體型式大小的文字。
步驟二：根據用途按格式工具列上
箭頭，於選單中點選適當的字型。
 |
步驟一：選取所要改變字體的文字。
步驟二：按格式工具列上
箭頭，於選單中點選適當的字型。
 |
步驟一：選取所要改變字型的文字。
步驟二：按格式工具列上
箭頭，於選單中點選適當的字型大小，單位是點。
 |
除了調整字型大小和字體外，格式工具列上另外還有一些和字型格式有關的按鈕，如：
：設定粗體。
：設定斜體。
：加底線。
使用的方式都是先選所要改變字型的文字，再按相關的按鈕。
步驟一：選取所要改變顏色的文字。
步驟二：按格式工具列上
箭頭，於選單中點選適當的顏色。
 |
步驟一：選取所要改變顏色的文字。
步驟二：按格式工具列上
箭頭，於選單中點選適當的顏色。
 |
此功能是用來調整段落（或圖形）的位置，包括：
：靠左對齊。
：置中對齊。
：靠右對齊。
使用步驟如下：
步驟一：將文字游標移至所要調整的段落，若是要調整圖片，則要先選取圖片。
步驟二：按下所要的功能鈕。
有兩種清單可供選擇，一種是編號了的清單，另一種則是不編號的項目符號清單。
: ：編號的清單。
：：項目符號清單。
設成清單後，文字會自動內縮，使用的方式是將文字游標置於要改變的段落上，(也可以一次選擇數個段落)，再按相關的按鈕。
除了上述從格式工具列設定字型、字元和段落樣式外，還可以從功能表中的【格式】中來設定。以字型為例：
步驟一：選取要設定的文字。
步驟二：按功能表上的【格式】->【字型】，進入【字元樣式】對話框。從對話框中可以看到先前提到的設定項及更多的設定項。
 |
步驟三：如要更多的設定項，可以按【擴充樣式】標籤。
 |
步驟四：設定完後按【確定】即可。
有兩種方式，一是直接按ENTER鍵，另外則是按功能表上的【插入】->【拆行】->【一般】。
步驟一：按功能表上的【插入】->【水平線】。
步驟二：在水平線上快按滑鼠左鍵兩下，進入【水平線內容】對話框，對水平線進行修改。
步驟三：修改完後按【確定】即可。
 |
註解是安插在檔案中的一段文字，用途是作為網頁設計人員的備忘或說明之用，平常瀏覽是看不見的。插入註解的步驟如下：
步驟一：按功能表上的【插入】->【註解】。
步驟二：進入【註解】對話框中，輸入註解再按【確定】，即會在文字游標處加入註解。
 |
此功能可以讓我們加入一些鍵盤打不出來的特殊符號。
步驟一：按功能表上的【插入】->【符號】。
步驟二：進入【符號】對話框中，選取所要的符號，左下角的空格中會將您所選取的符號顯示出來。
步驟二：先按【插入】再按【關閉】，即會在文字游標處加入該符號。
如果您的網頁中會用到方程式符號，Namo WebEditor就可助您一臂之力了。
在這裏以輸入
為例作說明：
步驟一：按功能表上的【插入】->【方程式】。
步驟二：進入【方程式】對話框中，先按 圖示。
 |
步驟三：再按
圖示。
 |
步驟四：輸入3，再按鍵盤的向下移動按鍵，輸入5，最後按【確定】即可。
 |
網頁少不了要使用超連結，不管是文字或影像都可以設定超結。
設定超連結的步驟如下：
步驟一：選取所要設定的文字或影像，如”數位博物館”這幾個字。
步驟二：按功能表上的【插入】->【超連結】，進入【建立超連結】對話框。
步驟三：在【URL】中輸入超連結，如http://dlm.ntu.edu.tw/dlm。
步驟四：在【目標頁框】選擇連結出現的視窗，如_blank（開啟新視窗）。
步驟五：按【確定】。
 |
常用超連結的型態大致有以下幾種：
|
常用的超連結型態 |
說 明 |
|
http://www.hinet.net |
超連結至某一網站 |
|
mailto:ccl@mail.csjh.kh.edu.tw |
寄信給某個人(會帶出寫信的程式) |
|
hobby.html |
超連結至某一檔案 |
|
#booklist |
超連結至檔案中的書籤 |
如果網頁內容很多，我們可以在適當的地方（如段落、章節）加入書籤，再配合超連結的動作，以方便讀者閱讀。
步驟一：將文字游標移至所要設定書籤的位置。
步驟二：於功能選單上按【插入】à【書籤】。
步驟三：於【書籤】對話框的【書籤名稱】輸入名稱，再按【新增】。
 |
步驟四：【書籤清單】中出現該書籤名稱後，按【關閉檔案】。
 |
設定好書籤後，就可以結合超連結了，步驟如下：
步驟一：如上述超連結中所說的選取要設定的文字或影像。
步驟二：按功能表上的【插入】->【超連結】，進入【建立超連結】對話框。
步驟三：在【書籤】中選取所要的書籤名稱。
 |
步驟四：按【確定】。
智慧按鈕是用來編輯按鈕和主標題的工具，按鈕建立之後，可以用來建立超連結，比文字的超連結更生動美觀。在此我們以建立
為例：
步驟一：按功能表上的【插入】->【佈景主題元件】->【智慧按鈕】，進入【智慧按鈕】對話框。
步驟二：點選【按鈕】，於右邊圖示區找到所要的按鈕，按【下一步】。
 |
步驟三：於按鈕上點選按鈕標簽等字，以進行文字修改。
 |
步驟四：此時會出現細部修整的畫面，因為我們要修改文字，請按【文字】標籤，並在文字區中輸入”寫信給我”等字。
 |
步驟五：結束前順便調整一下陰影，請按【陰影】標籤，在【樣式】中選取放置陰影。
 |
插入導覽列
步驟六：按【完成】就成功地製作了一個按鈕，製作好的按鈕可以像調整一般影像般的調整位置與大小。
常在瀏覽網站時會發現有的網站會顯示當時的日期或日間，Namo WebEditor也可以讓我們很方便地作到，步驟如下：
步驟一：按功能表上的【Script】->【Script精靈】，進入【選取Script】對話框。
步驟二：選取【時鐘】，按【下一步】。
 |
步驟三：選擇您所要的時間顯示型式，按【完成】。
 |
步驟四：回到編輯工具的畫面後，時鐘會暫時以一長條空格顯現，按一下該長條空格，會出現八個如調整影像大小的控點，可直接調整大小。
步驟五：按【預覽】即可在預覽畫面中看到時間是不是正確的顯示。
在Namo WebEditor中變更佈景主題是很方便的，您可以依不同的心情、季節選擇不同的佈景主題，讓拜訪您網站的訪永遠有份驚奇與期待。
步驟一：首先要開啟專案中的任一網頁。
步驟二：按功能表中的【格式】->【變更佈景主題】。
 |
步驟三：在佈景主題陳列區的對話框中，選取一個佈景主題，按【套用】。
 |
步驟四：此時會出現套用佈景主題範圍的對話框，選取【專案中的全部檔案】，按【確定】。
 |
步驟五：最後別忘了儲存，按功能上的【檔案】->【專案】->【儲存專案】，變更佈景主題就完成了!
Namo WebEditor包含了許多常用的影像處理功能，可以作為影像的修整、變化，讓影像更符合網站的風格。現在我們就來練習看看。
要將影像加入網頁中，步驟如下：
步驟一：選取功能表中的【插入】->【影像】，如要加入的是影像檔就選取【從檔案】，如要加入的是美工圖案就選取【美工圖案】。在這裏我們以【從檔案】為例。
 |
步驟二：在【影像內容】對話框中的影像路徑，選取瀏覽圖示。
 |
步驟三：找到欲開啟的檔案後，按【開啟舊檔】。找尋檔案時，可以從預覽圖示判斷是不是您要的檔案。
 |
步驟四：輸入提示文字後，按【確定】即可將影像加入網頁中。
 |
步驟五：加入影像後，當您對網頁作存檔案的動作時，Namo WebEditor 會提示您將影像檔複製到網頁所在的資料夾中。如果影像檔原本並不存於在專案網站的資料夾中，就讓【儲存】項中打勾再按【確定】，讓 Namo WebEditor 複製影像到專案網站的資料夾。
 |
影像加入網頁後，預設都是靠左對齊，如果想調整影像的位置可以按一般工具中的段落對齊圖示。
：靠左對齊。
：置中對齊。
：靠右對齊。
調整影像大小的步驟如下：
步驟一：選取影像，此時影像周圍會出現八個控點。
 |
步驟二：將滑鼠指像控點，以拖曳的方式即可調整大小。
圖型替換是蠻有趣的作法，原來的影像當滑鼠移到上面時，會改成另一張影像，讓網頁更生動並增加趣味性。
步驟：步驟一：選取功能表中的【插入】->【影像】，如要加入的是影像檔就選取【從檔案】，如要加入的是美工圖案就選取【美工圖案】。在這裏我們以【從檔案】為例。
步驟二：在【影像內容】對話框中的影像路徑，選取瀏覽圖示，找到所要的第一個影像檔，順便也輸入一下提示文字。
步驟三：按【建立圖型替換】。
 |
步驟四：在【圖型替換效果】的對話框中，【名稱】讓你為這個效果取個易記的名稱，（不要用中文命名，而且必須以字母作開始）。
步驟五：找到第二個影像檔路徑後按【完成】。
 |
步驟六：回到【影像內容】對話框中，先按【套用】，再按【確定】就可以了。預覽檢視看看，是不是很有趣呢？
 |
滑鼠移過去前
 |
滑鼠移過去後
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
 |
步驟二：按【亮度/對比】標籤。
 |
步驟三：拖曳亮度滑桿，讓影像變亮或變暗，也可以直接在文字框中輸入百分比值。從右邊的預覽區中可以看到調整的結果。
步驟四：拖曳滑桿，讓影像的對比變大或變小，也可以直接在文字框中輸入百分比值。
步驟五：調整後請按【確定】，進入儲存檔案的對話框，按【確定】即可將修改後的影像儲存起來。不管進行何種影像效果的處理，最後一個步驟都是到儲存檔案的對話框。
 |
在這有幾點說明：
所有影像處理的效果是具累積性的，就是說我們對影像作調整亮度、對比、特效、陰影與加入文字等等，最後再將之作儲存即可。
在儲存檔案的對話框中若直接按【確定】將要覆寫原本的檔案，無法復原，如果您不想蓋掉原本的檔案，請按【瀏覽】指定存檔的資料夾和檔名。
在儲存檔案的對話框中有三種儲存格式供選擇，三種格式的差異大致如下：
GIF：最多到256色，用以製作簡單的圖檔還可以，但對諸如相片或具漸層效果、陰影效果的影像較不適用。
JPG：可達百萬種顏色，但因為是屬於破壞性壓縮的圖檔格式，影像會有部份失真。
PNG：也是支援到256色，但不是所有的瀏覽器都支援PNG格式，使用的限制和GIF格式一樣。
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
步驟二：按【旋轉影像】標籤。
 |
步驟三：有三種旋轉效果和二種翻轉效果，直接選取按鈕就可從右邊的預覽區中可以看到調整的結果。
 |
步驟四：調整後按【確定】，進入儲存檔案的對話框將修改後的影像儲存起來。
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
步驟二：按【效果】標籤。
 |
步驟三：有多種旋轉效果供選，直接勾選(可複選)就可從右邊的預覽區中可以看到調整的結果。
步驟四：調整後按【確定】，進入儲存檔案的對話框將修改後的影像儲存起來。
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
步驟二：按【斜率】標籤。
步驟三：設定漸層的方向和長度，方法是在預覽畫面中從所要開始的點按住滑鼠左鍵，拖曳到所要結束的點再放開，。若沒有特別的指定，範圍就是整個影像。
步驟四：選擇樣式，有線型、放射狀、圓錐狀及圓柱狀等。
 |
步驟五：設定色彩和強度。
步驟六：調整後按【確定】，進入儲存檔案的對話框將修改後的影像儲存起來。
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
步驟二：按【加入陰影】標籤。
步驟三：選擇陰影的位置，有右下、左下、右上、左下及全部等。
步驟四：設定位移值和模糊半徑，單位都是像素。位移值表示陰影像延伸的距離，模糊半徑是陰影朦朧的程度。
步驟五：設定陰影顏色和背景顏色，如果沒有您想要的顏色，可按【自訂】作細部顏色的挑選。
 |
步驟六：儘可能將背景顏色設成和您網頁的顏色相近，這樣看起來較不覺得突兀。
 |
步驟七：調整後按【確定】，進入儲存檔案的對話框將修改後的影像儲存起來。
步驟一：選取影像，選取功能表中的【插入】->【影像】->【影像效果】以開啟影像效果的對話框。
步驟二：按【新增文字】標籤。
步驟三：在文字欄中輸入想要的文字。
 |
步驟四：設定文字大小、顏色、字型及樣式。
步驟五：在預覽圖示中直接將文字拖曳到想要的位置。
 |
步驟六：調整後按【確定】，進入儲存檔案的對話框將修改後的影像儲存起來。
有的美工圖案背景是白的或其他顏色，將之加入網頁時會和網頁背景顏色格格不入，最好的方式是將其背景設成透明，瀏覽時讓它看不見，不過儲檔時圖案的格式必須設成GIF才可以。
步驟一：按功能表【插入】->【影像】->【美工圖案】。
步驟二：選取所要的影像後按【插入】。
 |
步驟四：選取影像，讓影像出現八個控制點。
步驟五：按功能表【插入】->【影像】->【設定透明顏色】。
 |
步驟六：此時會出現【影像工具列】，選取【設定透明顏色】圖示。
步驟七：在圖案的背景處點一下，會出現儲存影像對話框。因為使用的美工圖案不存在於我們專案資料夾中，所以我們按【瀏覽】將它另外儲存。
 |
步驟八：找到專案所在的資料夾，建議將之儲存於images資料夾，以方便日後管理。切換到images資料夾後，按【存檔】。
 |
步驟九：最後按【確定】即可。
 |
如果您有許多照片影像檔，Namo WebEditor的影像展示區可以幫您很快地建立相片簿來管理您的照片。照片影像檔的來源可能是一般的相片經過掃瞄機掃瞄後存檔，也可能是原先就是以數位相機拍攝而成，影像經數位化後有很多優點，譬如可以經影像處理軟體修整、美化，變得更生動亮麗，另外整理上也較為方便。
假設您的照片影像檔置放於電腦C碟中的photo資料夾，（不在專案所在的資料夾中），步驟如下：
步驟一：從功能表上選取【插入】－＞【影像】－＞【影像展示區】。
 |
步驟二：在【選取影像】的對話框中，按【新增資料夾】。
 |
步驟三：在【瀏覽資料夾】的對話框中，找到C碟的photo資料，按【確定】。
 |
步驟四：在【選取影像】的對話框中，您可以檢視預覽該影像檔是否是您所要的，不是的話，可以在選取該影像檔後，按【從清單移除】。全部都確定好了後，按【下一步】。
 |
步驟五：接著會出現【影像大小】的對話框，所謂的影像大小，是指展示區中影像預覽展示的大小。為了顧及網頁顯示的速率及流暢性，我們會希望訪客先看到預覽的小圖，經由點選後才出現原圖，在這種考慮下，Namo WebEditor會貼心地為每個影像檔建立縮圖作為預覽展示，您可以指定縮圖實際的大小（單位是像素），也可以指定縮小的百分比。假設我們使用縮小的百分比來建立縮圖，縮小比例為18%。按【下一步】。
 |
步驟六：在【佈置】的對話框中，您要考慮要不要使用表格來排列預覽縮圖，以及訪客在點選預覽後，原圖出現的方式。此例我們假設要使用欄數為四的表格，而且在新視窗中來問啟每個影像。按【下一步】。
 |
步驟七：因為我們原先的照片影像檔並不存在於我們的專案資料夾中，在【儲存選項】的對話框中，我們要選取【在指定的目錄中儲存複本或縮圖】，並按【瀏覽】選取專案所在的資料夾，再於文字列中輸入放置影像和縮圖的子資料夾名稱，（假設為photo），最後按【完成】即可。
 |
步驟八：瀏覽一下成果，是不是覺得很有成就感呢？
 |
小區塊是Namo WebEditor中一項蠻強的功能，多數的動態效果都必須經由它來達成。小區塊中可以輸入文字，也可以插入影像。小區塊可以存在於網頁中的任何位置，因此我們可以用它來放置影像，而且高興將它放哪就放哪，不會像以往加入影像時只能靠左、靠右或置中。
步驟一：按功能表【插入】->【小區塊】，此時游標會停置於小區塊中。
步驟二：假設我們要插入美工圖案，按功能表【插入】->【影像】->【美工圖案】。
步驟三：選取所要的影像後按【插入】。
 |
步驟五：插入圖案後，如果點選圖案，圖案會出現八個控制點，可用來調整大小。請調整圖案大小。
 |
步驟六：小區塊左上方有個控制區，點選控制區，小區塊也會出現八個控制點，可用來調整小區塊大小。請調整小區塊大小。
 |
步驟七：滑鼠在控制區上會變成手掌的型狀，可以拖曳的方式移動小區塊。將小區塊移至適當的位置即可。
 |
動畫效果有直線、曲線及螺旋線三種，設定過桯都一樣，在此以小區塊中的影像表現螺旋線效果為例：
步驟一：插入一小區塊，並在小區塊中加入影像或美工圖案。
步驟二：按一下小區塊的控制區以選取小區塊。
步驟三：按功能表上【插入】->【Script】->【Script精靈】。
 |
步驟四：在選取Script對話框中選取【動畫效果】，按【下一步】。
 |
步驟五：在動畫效果對話框中，【追蹤類型】設為螺旋線，並設定好【起啟位置】，按【完成】。
 |
滑動效果是指影像或文字會先隱藏，待指標指到小區塊所在的區域時，影像或文字才會出現。
步驟一：插入一小區塊，並在小區塊中加入影像或美工圖案。
步驟二：按一下小區塊的控制區以選取小區塊。
步驟三：按功能表上【插入】->【Script】->【Script精靈】。
步驟四：在選取Script對話框中選取【滑動小區塊】，按【下一步】。
 |
步驟五：在滑動小區塊對話框中，指定【滑動小區塊到】為靠左，再按【完成】。
 |
浮動效果是指不管畫面如何捲動，影像或文字會固定停在畫面某一個位置，很適合用作廣告。
步驟一：插入一小區塊，並在小區塊中加入影像或美工圖案。
步驟二：按一下小區塊的控制區以選取小區塊。
步驟三：按功能表上【插入】->【Script】->【Script精靈】。
步驟四：在選取Script對話框中選取【浮動的小區塊】，按【下一步】。
 |
步驟五：在浮動小區塊對話框中將【視窗位置上的浮動小區塊】設成底部右邊，按【完成】。
 |
走馬燈對網頁來說是不可或缺的效果，配合小區塊我們可以很簡單地來設定走馬燈。
步驟一：插入一小區塊，並在小區塊輸入想要的文字，並為文字加上設定字型、字體大小、顏色及背景顏色。
步驟二：將小區塊移至預定擺放的位置。
步驟三：按一下小區塊的控制區以選取小區塊。
步驟四：按功能表上【插入】->【Script】->【Script精靈】。
步驟五：在選取Script對話框中選取【走馬燈】，按【下一步】。
 |
步驟六：在走馬燈對話框中設定【捲動方向】、【行為】（單向、雙向或順序）及【可見長度等】，按【完成】。
 |
時間軸是Namo WebEditor具特色的工具的工具，利用時間軸我們可以設定小區塊在時間序列的位置，稍加變化就可以製作簡易的動畫。我們先以讓圖形直線移動為例：
步驟一：插入一小區塊，並在小區塊中加入影像或美工圖案。
步驟二：將小區塊移至預定出現的最初位置。
步驟三：按功能表上【視窗】->【時間軸】。
步驟四：在小區塊的控制區上按下滑鼠左鍵，將小區塊拖入時間軸中，此時時間軸中會出現以小區塊名稱（如layer1）為名含起點與終點（都以圓圈來表示）的動作線。
 |
步驟五：點選動作線終點，並將【自動起始】和【重複】打勾。
 |
步驟六：移動小區塊到預定出現的最後位置。
 |
步驟七：關閉時間軸視窗就完成了。
您可以預覽看看是不是很有趣呢？除了直接移動外，也可以讓它作不規則的曲線移動，接下來就試看看吧!
我們直接就說步驟了：
步驟一：插入一小區塊，並在小區塊中加入影像或美工圖案。
步驟二：將小區塊移至預定出現的最初位置。
步驟三：按功能表上【視窗】->【時間軸】。
步驟四：在小區塊的控制區上按下滑鼠左鍵，將小區塊拖入時間軸中，此時時間軸中會出現以小區塊名稱（如layer1、layer2）為名含起點與終點（都以圓圈來表示）的動作線。
步驟五：將【自動起始】和【重複】打勾，接著在時間軸的動作線上按下滑鼠右鍵，會拉出一個功能表，選取【記錄小區塊的路徑】。
 |
步驟六：從小區塊預計預定出現的最初位置開始按下滑鼠左鍵不放，一直到小區塊預定出現的最後位置才放開滑鼠左鍵，此時會看到小區塊移動的軌跡。
 |
步驟七：關閉時間軸視窗就完成了。
在瀏覽別人的網站時，有時我們會看到一些不錯的功能，心裏可能會想到如果自己的網站也能加上這些功能，那可真是美事一件。不過要將那些功能往往都是以程式碼的型式存在，想將之加入自己的網頁，就必須學會如何為網頁加入程式碼。幸好Namo WebEditor很容易可以幫助我們達成這項目的，以下就以加入一段在方便訪客直接在網頁寫信的程式碼為例：
步驟一：首先當然是要有這些程式碼，請到筆者的網站【有點想法】->【NAMO研習】->【加入程式碼】。
步驟二：選取程式碼並複製下來。
步驟三：以Namo WebEditor網頁編輯工具開啟您要加入程式碼的網頁。
步驟四：將游標停在您要加入程式碼的位置。
步驟五：按【HTML】標籤，切換到HTML程式碼的編輯模式。
 |
步驟六：按功能表上的【編輯】->【貼上】就可以將程式碼加到網頁上。
步驟七：部份程式碼加入後還必須進行一些修改才能正確使用，本程式碼就是一例，請將程式碼中收信人本來是筆者的名字改成您的大名。還有<INPUT type="hidden" name="rcpt" value="ccl@mail.csjh.kh.edu.tw">框起來的地方改成您的Email地址。
步驟八：改完後按【預覽】標籤就可以試用看看了（當然要確定您是處於網路連線的狀態）。
成功的話就恭喜您了!
在資料的呈現上，適當地運用表格是很重要的，千言萬語的描述有時還比不上一張表格的說明給人印象深刻。Namo WebEditor對表格的支援很完整，除了一般文書處程式有的功能外，還可以進一步製作成圖表。
步驟一：選取功能表【表格】->【新建表格】。
 |
步驟二：在【表格內容】的對話框中，指定所要表格的列數與欄數。【寬度】選擇”100%”的話，表格將佔滿您預備置放表格的範圍。【對齊】方式選”置中”，表格將位於您預備置放表格的範圍的中間。
 |
步驟三：按【確定】。
步驟一：依上述新建表格的方式建立表格，進入【表格內容】對話框。如果是要對已有的表格進行修改的話，請將游標停留在表格中，選取功能表【表格】->【表格內容】，即可進入【表格內容】對話框。
 |
在框線的設定中有幾點說明如下：
1.【類型】有一般、薄、厚及隱藏等四種。除了”隱藏”外，其餘類型都可設定厚度及顏色。
2.【色彩】指的是表格邊框的顏色。
3.【淡色邊框】指的是表格邊框頂端和左邊的顏色。
4.【深色邊框】指的是表格邊框底部和右邊的顏色。
接下來我們繼續進行設定。
步驟二： 以本例，將【類型】設為一般，厚度為3，表格邊框的色彩為藍色，淡色邊框設為黃色，深色邊框設為粉紅。
 |
步驟三：按【套用】可立即看到設定後的情形，滿意的話按【確定】。
有時我們只是利用表格將一些文字、圖片作整合，為了美觀因素等，可能會不希望有框線出現，這時就可以將框線隱藏起來。要將框線隱藏起來的作法很簡單，只要在【表格內容】對話框中，將框線類型設為隱藏就可以了。
步驟一：在【表格內容】對話框中的背景設定中，從【色彩】中選取所要的顏色。
 |
步驟二：按【套用】可立即看到設定後的情形，滿意的話按【確定】。
步驟一：在【表格內容】對話框中的背景設定中，從【影像】中選取所要的背景影像。如同插入影像一般，可以從硬碟、美工圖案和專案中來選取影像。
 |
步驟二：按【套用】可立即看到設定後的情形，滿意的話按【確定】。
建立好表格後，如果要調整欄寬與列高，方法如下：
步驟一：將滑鼠移至所要調整欄寬的格線上，待滑鼠指標變成左右兩箭頭形狀時，即可以拖曳的方式調整欄寬。
 |
步驟二：將滑鼠移至所要調整列高的格線上，待滑鼠指標變成上下兩箭頭形狀時，即可以拖曳的方式調整列高。
 |
步驟一：將游標移至所在插入欄的位置（新欄所在的左方或右方）。
步驟二：選取功能表【表格】->【插入列或欄】
 |
步驟三：在【插入列或欄】的對話框中，選取”插入欄”，並指定要插入的欄數及插入位置，按【確定】。
 |
步驟一：將游標移至所在插入欄的位置（新列所在的上方或下方）。
步驟二：選取功能表【表格】->【插入列或欄】。
步驟三：在【插入列或欄】的對話框中，選取”插入欄”，並指定要插入的欄數及插入位置，按【確定】。
 |
步驟一：將滑鼠指標移至表格上方框線處，待滑鼠指標呈向下箭頭形狀時即可以拖曳的方式將欲刪除的欄位選取起來。
 |
步驟二：按鍵盤上的【Delete】鍵，即可將欄位刪去。
步驟一：將滑鼠指標移至表格左方框線處，待滑鼠指標呈向右箭頭形狀時即可以拖曳的方式將欲刪除的列選取起來。
 |
步驟二：按鍵盤上的【Delete】鍵，即可將列刪去。
為表格加上一個標題，有助於讓讀者留下清晰的印象。
步驟一：請將游標停留在表格中，選取功能表【表格】->【標題】->【插入標題】，即會出現標題輸入列。
 |
步驟二：在輸入列中輸入標題名稱，並可作字型、字體大小及顏色等設定。
 |
實際應用表格時，會對表格作許多調整，除了上述所提的列高、欄寬、增刪欄/列等，可能還會合併儲存格或將一個儲存格分成二個以上的儲存格等，這時表格工具列就派上用場了。
步驟一：選取功能表【表格】->【繪製表格】。
 |
步驟二：出現表格工具列後，將之置放於適當的位置，或直接置入功能表中。
 |
註：如果會常到表格工具列的話，可以選取功能表【檢視】->【工具列】，將【表格】項勾選，如此表格工具列即會在執行Namo WebEditor時，自動出現於功能表中。
步驟一：選取表格工具列中的【表格鉛筆】。
 |
步驟二：在所要分割的儲存格中，以拖曳的方式劃線，劃線的位置會呈現虛線。
 |
步驟三： 劃至適當的位置放開滑鼠左鍵即可。水平的分割亦然。
 |
步驟一：選取表格工具列中的【表格橡皮擦】。
 |
步驟二：在所要合併的儲存格中，以拖曳的方式劃線，劃線的位置會呈現紅線。擦拭時，水平的方向要在線的上方，垂直的方向要在線的左方。
 |
 |
步驟三： 擦拭至適當的位置放開滑鼠左鍵即可。
 |
圖表是Namo WebEditor另一項貼心的功能，讓我們不必借助Excel之類的軟體，就能產生統計圖表。Namo WebEditor所包含的圖表類型有直線圖、圓形圖、折線圖、趨勢圖等，接下來就以常用的直線圖和圓形圖為例。
假設有一個班級成績統計表如下，我們經由它來產生直線圖：
 |
步驟一：將游標停留在表格內，然後選取功能表的【插入】->【進階】->【圖表】。
 |
步驟二：進入【圖表精靈】的對話框，選取左上角圖表類型為直線圖（預設值），另將【使用3D效果】取消，如此圖面較清爽。按【下一步】。
 |
步驟三：按【下一步】。
 |
步驟四：輸入圖表標題、X軸標題及Y軸標題，按【完成】。
 |
如此就產生漂亮的圖表了，不錯吧!
 |
圓形圖表示的比例的關係，假設有一公司的出貨統計表如下，我們幫它產生圓形圖來說明近四年來出貨的情形：
 |
步驟一：將游標停留在表格內，然後選取功能表的【插入】->【進階】->【圖表】。
步驟二：進入【圖表精靈】的對話框，選取圖表類型為圓形圖，勾選【使用3D效果】，按【下一步】。
 |
步驟三：按【下一步】。
 |
步驟四：輸入圖表標題，按【完成】。
 |
完成的圓形圖如下，可看出各年度的出貨所佔的比例接近，出貨量蠻穩定的。
 |
一張生動亮麗的影像永遠是勝過千言萬語的。之前我們曾介紹過如何將在圖形、相片等影像檔上建立超連結，不過當時介紹的只是建立單一的超連結。可不可以在同一張影像上建立一個以上的超連結呢?答案是可以的，影像地圖(ImageMap)可以讓我們在同一張影像中建立多個超連結，分別連結到不同的網址或文件。
具體而言，影像地圖的製作方法是使用影像地圖繪製工具在影像中區分出矩形、圓形或多邊形等不同的區域，(這些區域稱為感應區)，每一個感應區就都可以作為一個超連結來連結到不同的網址或文件。
什麼時候會利用到影像地圖呢?譬如說，您們班上的每個同學都有自己的個人網頁，而您恰好有一張全班的團體照，此時您就可以將相片掃瞄進電腦成影像檔，再利用影像地圖的製作方法將團體照的影像檔製作成影像地圖，如此一來，點選每個同學的頭頭(或其他部份也行)，就可以連結到該同學的個人網頁，較之用名字來連結會有趣多了!
步驟一：準備好您預備使用作為影像地圖的影像檔。
步驟二：選取功能表中[檢視]- > [工具列]- >[影像]，此時會出現 影像工具列，將它拖曳您比較方便工作的位置即可。
 |
影像工具列中各圖示的功能如下：
：插入美工圖案。
：從檔案插入影像。
：插入影像展示區。
：插入智慧按鈕。
：設定透明的顏色。
 |
：插入影像效果。
：選取或編輯感應區。
：繪製矩形感應區。
：繪製圓形感應區。
：繪製多角形感應區。
其實只有最後四項才是繪製影像地圖所獨有的功能，其餘的功能在之前與影像相關的章節中都已介紹過，但因為在繪製影像地圖免不了會應用到許多影像的功能，所以也將之列在影像工具列中以方便工作。
步驟一：插入所需的影像檔或美工圖案等。以在影像中加入文字的下圖為例，我們預備在”蕃薯藤”文字上建立矩形感應區，在”教育部”文字上建立圓形感應區，在”中山國中”文字上則建立不規則形的感應區。
 |
步驟二：點選影像並選取影像工具列上的 圖示。
步驟三：自”蕃薯藤”文字左上方拖曳至右下方。
 |
步驟四：放開滑鼠左鍵後，會出現【建立超連結】對話框。在【URL】中輸入欲連結的網址http://www.yam.com.tw/ ，在【目標頁框】中選取_blank。
步驟五：最後按【確定】即可。
 |
步驟一：插入所需的影像檔或美工圖案等。
步驟二：點選影像並選取影像工具列上的 圖示。
步驟三：在影像目標區塊中，(如”教育部”等文字)，自左上方拖曳至右下方。
步驟四：放開滑鼠左鍵後，會出現【建立超連結】對話框。在【URL】中輸入欲連結的網址如http://www.edu.tw/ ，在【目標頁框】中選取_blank。
步驟五：最後按【確定】即可。
步驟一：插入所需的影像檔或美工圖案等。
 |
步驟二：點選影像並選取影像工具列上的 圖示。
步驟三：在影像目標區塊中，(如”中山國中”等文字)，自左上方沿著文字外圍按滑鼠左鍵，將目標區塊框起來。
步驟四：放開滑鼠左鍵後，會出現【建立超連結】對話框。在【URL】中輸入欲連結的網址如http://www.csjh.kh.edu.tw/ ，在【目標頁框】中選取_blank。
步驟五：最後按【確定】即可。
步驟一：點選影像，此時影像中會出現所有建立的感應區。
 |
 |
步驟二：選取影像工具列上的 圖示。
步驟三：移動滑鼠至感應區上方，指標會變成手掌狀，以拖曳的方式即可移動感應區。
 |
步驟一：點選影像，此時影像中會出現所有建立的感應區。
 |
步驟二：選取影像工具列上的 圖示。
步驟三：點選感應區，此時感應區周圍會出現數個控制點，以拖曳的方式調整控制點即可改變感應區的大小。
 |
步驟一：點選影像，此時影像中會出現所有建立的感應區。
 |
步驟二：選取影像工具列上的 圖示。
步驟三：在欲變更超連結的感應區上快速按滑鼠左鍵兩下，即會出現【建立超連結】對話框。在【URL】中重新輸入欲連結的新網址，最後再按【確定】即可。
步驟一：點選影像，此時影像中會出現所有建立的感應區。
 |
步驟二：選取影像工具列上的 圖示。
步驟三：點選欲刪除的感應區，此時感應區周圍會出現數個控制點，直接按鍵盤上的【Delete】按鍵，即可刪除該感應區。
Namo WebEditor有不錯的線上說明系統，可以多加利用，相信在學習上會有很大的幫助。以下示範如何運用該系統：
步驟一：按功能表【說明】->【Namo WebEditor 說明】，即會看到該線上說明系統。
步驟二：按系統上的【索引】標籤，左邊會出現許多主題關鍵字，您可以直接在關鍵字上按滑鼠左鍵兩下，就可以在右邊的視窗中看到說明內容。
步驟三：也可以按系統上的【搜尋】標籤，在文字區塊輸入您想要查詢的關鍵字，如”小區塊”，再按【列出主題】，即可看到與小區塊相關的主題關鍵字。直接在關鍵字上按滑鼠左鍵兩下，就可以在右邊的視窗中看到說明內容。
 |
或許因為Namo WebEditor是韓國人的作品，說明檔經過二手翻譯後，有的地方還真不易讀懂，要花一點眼力和心力。告訴各位一個更快的方法，如果您在使用上遇到任何疑難雜症，可以直撥手機號碼０９１５３３８３７５找簡良諭老師，相信一定可以獲得滿意的答覆。祝各位使用上順利、愉快!
製作好網站後，最後一個步驟就是將網頁上傳到網路主機，並公告周知，歡迎大家常來拜訪參觀。至於上傳到哪裏呢？我們要上傳的地點是163.18.161.5。在163.18.161.5這台主機上，各位有一個合法的使用帳號和密碼，並擁有獨自的硬碟空間，每個人要將首頁相關的檔案上傳到自己所屬空間中
Namo WebEditor的網站管理者就具有將網頁上傳的功能，稱之為”發佈”，使用上蠻方便的。此外，因為上傳網頁是經由檔案傳輸協定(File Transprot
Protocol, 簡稱為FTP)，所以我們也可以利用一般具備FTP檔案傳輸功能的程式，（如WS_FTP95），來上傳網頁。
這兩種方式，在本章中都將介紹。
步驟一：切換到網站管理者，按功能表上【專案】->【儲存專案】，先將專案儲存起來。
步驟二：按【發佈】標籤，切換到發佈的工作模式。
 |
步驟三：按
，進入網站清單對話框，按【新增】來增加我們要上傳網站主機的資訊。
 |
步驟四：在網站設定對話框中，設定好網站名稱(您的專案名稱)、主機(163.18.161.5)、使用者名稱(帳號)、密碼及所要上傳目錄後，按【確定】。如您所要上傳的目錄是某個子目錄(如www)，則在【目錄】中須填上該子目錄名稱。
 |
步驟五：回到網站清單對話框，按【關閉檔案】。，
 |
步驟六：回到發佈工作模式的畫面後，按【網站】點選方才設定的網站名稱。
步驟七：按
就可連接到主機，畫面如下。
 |
步驟八：按
選最所有的檔案。
步驟九：按
即可將網頁上傳。
步驟十：上傳完畢後，會看到網站順利發佈的畫面。
 |
步驟十一：按
即可切斷和主機的連結。
使用WS_FTP95來上傳網頁和使用發佈功能差不多，都是先設好好主機位址、帳號及密碼等資料，然後連結主機、上傳、離線。
步驟一：執行WS_FTP95（從光碟…）。
步驟二：設定主機位址、帳號及密碼等資料，按【確定】。
 |
步驟三：連結到主機的畫面如下，左側是您所使用的電腦，右側是主機。
 |
步驟四：切換到您專案所在的資料夾，如您所要上傳的目錄是某個子目錄(如www)，則亦須切換到該子目錄。
 |
步驟五：選取所有的資料夾、檔案（配合SHIFT鍵），按【->】鍵將網頁上傳，此時會出現詢問的對話框，請按【是】。
 |
步驟六：網頁上傳完畢後，先按【Close】，再按【Exit】，結束和主機的連結。