方便直观的编辑环境进阶页面建立课件

1、Namo WebEditor 研習講義長榮大學 師資培育中心 邱才銘 助理教授第1页，共23页。Namo WebEditor是一套功能極強的網頁編輯軟體，操作界面簡易、人性化，而且有完善的網站管理功能，兼具許多重量級軟體的優點(如FrontPage、Dreamwaver)，不管是初學者或專業工作者，Namo 都能帶來不少助益，發展個人特色網站的好幫手。第2页，共23页。方便直觀的編輯環境Namo提供方便直觀的工作環境。 浮動、可銜接的內容檢查員視窗，可及時存取各種頁面元素經常修改的屬性。利用WYSIWYG(what you see is what you get)編輯環境，輕鬆地建立動態網站，

2、收到事半功倍的效果。 第3页，共23页。壹、執行Namo至桌面Namo WebEditor圖示上，輕按滑鼠左鍵兩下即可。也可從【開始】-【程式集】-【Namo WebEditor 5.5】-【Namo WebEditor 5.5】第4页，共23页。編輯視窗模式標籤狀態列功能表列文件標籤文字工具列標準工具列第5页，共23页。檢查員 可輕鬆地檢視和修改Web網頁文件中各種元素的主要內容。它的內容隨著選擇不同的網頁元素而不斷變化。受支援的網頁元素包括表格、表格儲存格、表格列、影像、圖層及其他通用元素和文件本身。它可在主視窗的任何邊，或浮於其他視窗的頂部。第6页，共23页。貳、快速建立網站的架構步驟一

3、：從功能表列中選取【檔案】-【專案】-【網站精靈】。第7页，共23页。 網站精靈選擇網站範本和佈景主題幾秒鐘即可生成一個完整的網站。共有 200 個預設好的佈景主題可供使用另外也可以透過編輯現有佈景主題來建立新的佈景主題。網站精靈可以新增、移動或移除網站元素，或新增文件。 第8页，共23页。步驟二：從網站精靈-範本選擇所需套用:使用【教育網站】這個範本，選定後按【下一步】。第9页，共23页。範本 提供各種預先設計好的文件、區段、網站等範本，使用這些範本可快速輕鬆地建立專業網站。 第10页，共23页。第11页，共23页。步驟三：從網站精靈-結構複製重新命名上移 下移升級 降級第12页，共23页。

4、佈景主題 佈景主題是可編輯的設計範本，可將其套用至網站中的所有或部分網頁。在 200 個佈景主題，透過修改現有佈景主題來建立您自己的佈景主題。佈景主題元件包括按鈕、橫幅、文字樣式、連結色彩、背景色彩及其他屬性。 第13页，共23页。步驟四：選定佈景主題佈景主題是網站風格的表現，不同的佈景主題有不同的色系編排、背景圖片、按鈕造型、文字選項等，可依自己的喜好來選擇。【檢視佈景主題】可讓您先預覽該主題的內容。選定後請按【下一步】。第14页，共23页。步驟五：輸入網站資訊標題(網站名) 、作者、電子郵件地址以及著作權資訊。輸入的網站名稱將用來作為索引頁的主標題，輸入的電子郵件地址將自動插入專案中每一份

5、文件底部。輸入後按【下一步】。第15页，共23页。步驟六：發佈網站知道網頁伺服器就新增,與修改按【完成】。第16页，共23页。參、認識Namo 的環境：執行Namo WebEditor後，會有兩個工具程式執行著，一是網頁編輯工具，另一則是網站管理者。在製作網頁時，我們交互利用這兩個工具程式，隨時掌握網站的狀態，讓工作順利進行。編頁編輯工具負責網頁的設計與編寫，除了基本的網頁要素元件可供選擇外，包括很多的靜態、動態的效果及資料庫聯結功能，網頁的修改也都是要用到它。第17页，共23页。編頁編輯工具有三種工作模式：【編輯】：提供視覺化的編排環境，一般都是在此狀態下工作。【HTML】：可看到網頁的HT

6、ML原始碼，如果您想加入特殊的程式碼，可以用F6切換到此模式。【預覽】：此模式可以預覽成果，一如使用瀏覽器觀看。第18页，共23页。網站管理者有三種工作模式：主要負責網站狀態與架構的呈現：【網站】：呈現樹狀結構，目前專案網站的結構，最上方的是專案名稱，接著則是首頁，再來就是導覽列。導覽列是分層級的，如第一層、第二層等，原則是進網站後最先看到的導覽列(有超連結的文字、按鈕或圖示)位於第一層，從第一層連結進去才出現的導覽列是第二層，依此類推。除了呈現結構外，如果要增刪、修改導覽列，也可以在此模式下進行，等一下會用到。第19页，共23页。【報告】：顯示目前專案網站的所有檔案的狀態 【發佈】：將網頁上傳至網路主機上，在此之前您必須先知道您網頁所在主機的位址與您個人的帳號和密碼。第20页，共23页。肆、修改網站的架構例:班級網頁網站，從結構上來看包括【簡介】、【新聞】、【校友資訊】、【家長資訊】、【圖書館】及【酷站】，這些從導覽列的位階上來看都是位於第一層。其中【簡介】又包括【學生】和【教職員】第二層導覽列，【圖書館】則包括【主旨1】、【主旨2】及【主旨3】等第二層導覽列。 第21页，共23页。第