方便直觀的編輯環(huán)境進(jìn)階頁面建立課件

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

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

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

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

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

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