NAMO網頁製作教學簡報 講師：李惠茹.

Presentation on theme: "NAMO網頁製作教學簡報 講師：李惠茹."— Presentation transcript:

1 NAMO網頁製作教學簡報 講師：李惠茹

2 網站架構快易通 @進入路徑 開始\程式集\namo webeditor4 \紅泥小瓦房 @設定捷徑 桌面 \紅泥小瓦房

3 尋找網頁精靈 1.開啟網站管理者 〔專案〕／〔網站精靈〕
@運用「網站精靈」就會產生整個 Web 專案：使用「網站精靈」之後，可以配合自己架構的內容來自訂專案，完成後將它發佈到網站。 @如何啟動「網站精靈」？ 步驟： 1.開啟網站管理者 〔專案〕／〔網站精靈〕

4 2.選擇一個網站模板

5 3.輸入網站資訊 輸入時，網站站名請勿以〝四〞〝會〞〝育〞作為開頭，namo本身因ascii code不接受。
除了伸張版權外，也可依版主需求另做說明。

6 佈景主題樣板選擇區 可以放大瀏覽 4.依喜好選擇 佈景主題

7 5.選擇一個資料夾進行存檔

8 恭喜您，完成初步架構 網頁編輯畫面 網站管理者 所點選之資料夾及檔案即為新網站的檔案，若出現以上的畫面，表示建立網站完成。

9 在專案的網站管理者中，從「結構」進入，可以為專案中的文件設定導覽樹。導覽樹負責定義專案中的文件與文件之間的關係。每一份文件至少都必須是另一份文件的母項、子項或手足。 

10 網站管理者--- 結構 的意義與用處 @切換到導覽樹的路徑： 開啟網站管理者\〔結構〕\出現網站的導覽樹 @設定導覽樹的主要目的： 在namo設定的專案文件中會 自動編輯動態導覽列。 動態導覽列中的超連結一律會連結到某些特定的文件集，因此當導覽數中的各網頁關係改變時，它們對內含導覽列的文件的關係也會重新指定。

11 結構樹的操作可以如下： 搬移頁面： 直接在欲搬移的頁面上按住左鍵搬移到想要放的位罝。 刪除頁面：點選頁面按下刪除鍵即可。
將 成績單 搬移到java script 旁邊 搬移時請注意的方向。 刪除頁面：點選頁面按下刪除鍵即可。

12 新增頁面：新增的種類分為下列數種----
只要在任一頁面上按右鍵找〔新增至導覽樹〕。 1.新增新文件：會插入一個空白頁面。 2.新增外部連結：輸入名稱及外部連結的網址。                    信箱表示法----- mailto：您的信箱 網頁表示法----http：//要連結的網址

13

14 變更佈景主題

15 步驟１ ：在網頁編輯畫面中，選取 〔格式〕／〔變更佈景主題〕
選取好佈景主題後，發現和原本的網站風格不符時，可以利用〔變更佈景主題〕，快速更換想要的佈景主題。 步驟１ ：在網頁編輯畫面中，選取 〔格式〕／〔變更佈景主題〕 步驟 2 ：Namo會要求先將目前的 專案儲存，以免遺失一些 檔案。

16 步驟 3：此時會出現和網站精靈中選擇佈景主題一樣的功能 畫面，只要選取喜歡的樣式按下套用鈕即可。

17 插入主標題及導覽列

18 當新增一個頁面，將這頁面也套用同樣的佈景主題，還要加上主標題及導覽列，才會和其他頁面一樣的版面.
插入主標題 開啟欲插入主標題的頁面 找〔插入〕／〔佈景主題元件〕／〔主標題〕 就可以插入和每個頁面一樣的主標題

19 導覽列就是在網頁上可以點選到其他頁面的目錄，在Namo稱之為導覽列。
插入導覽列 1.開啟欲插入導覽列的頁面 2.找〔插入〕／ 〔佈景主題元件〕／〔導覽列〕

20 選擇要插入的導覽列內容 1.導覽樹： 藍色框頁面表示所選要插入的導覽列項目， 紅色框表示目前開啟要插入導覽列的頁面。 2 1
2.導覽列類型： 表示要插入對目前這個頁面而言，是那幾個項目。 3.方向： 插入的導覽列方向。 4.外觀： 指秀出的導覽列是以文字或圖片方式呈現。 2 1 3 4

21 修改主標題

22 右方的主標題名稱為主旨１，現在要把它改成圖書館
如何修改主標題 一、修改文字內容： 右方的主標題名稱為主旨１，現在要把它改成圖書館                                  1.點選要修改的主標題後，按滑鼠右鍵  2.將標示內的文字，改成圖書館後按確定即可。

23 二、修改影像內容： 1. 點選要修改的主標題後按滑鼠右鍵／修改影像／修改影像形狀

24 2.選取形狀，可以就現有的圖形做修改或直接利用美工圖庫的主標題將整個圖形全部換掉。

25 3.編輯按鈕可修改文字的格式（顏色、字型、大小等）在左方的框中選點陣圖或是文字即對所選的內容進行修改，但這只是就現有的文字或圖片做變化。
若要新增文字或是圖片，請按編輯工具會出現以下畫面。

26 4.匯出區是拖曳圖形顯示的區域大小，可以視所設計的圖形來拖曳大小，也讓版面更好看。

27 修改導覽列

28 關於Namo的導覽列 導覽列的三種狀態 選取類型 一般狀態（沒做任何動作時） 水平或垂直按鈕 圖形替換（當滑鼠移過時）
水平或垂直圖形替換按鈕 未作用中（已點選在此選項內時） 未作用中的水平或垂直按鈕 @修改導覽列除了可以更換影像之外，還可以修改文字的格式化。 @圖形的來源：1.智慧按鈕裡的點陣圖；2.插入利用其他美工軟體所繪的圖形；3.下載的圖。 @因為namo的導覽列是由三種模式組成的，所以在修改時，可就不同的模式來修改，若是選擇全部垂直或是全部水平，則變換的圖形功能將會取消。 未修改 已修改 

29 １.點選欲修改的導覽列，按滑鼠右鍵找〔導覽列內容〕，再點選〔修改導覽列〕／〔修改影像形狀〕
2.選擇欲修改的導覽列項目，記得若選取全部水平或垂直，則圖形變換功能會消 失。

30 ３.選取類型： 可就現有的圖形做修改或是利用美工圖庫所提供的圖片來修改。 ４.編輯按鈕： 方法可參修改主標題，此例是將原底圖刪除，利用編輯工具插入新的點陣圖

31 5.安排：讓文字與圖形可重疊排列。 插入文字：插入一個新的文字。 插入影像點陣圖：插入基本圖形。 插入點陣圖：插入圖片檔案。 6.匯出區： 是拖曳圖形顯示的區域大小，可以視所設計的圖形來拖曳大小，也讓版面更好看。 按完成後即可完成修改。

32 插入圖片

33 插入圖片的方式有二種 美工圖案 (插入/影像/美工圖案) 從檔案 (插入/影像/從檔案) 亦可從工具按鈕中選取

34 影像效果處理

35 點選要處理的照片按右鍵

36 為圖片去背

37 點選要去背的圖片後按右鍵找影像/以透明顏色製作影像
滑鼠圖示變成滴管後點選白色區域 出現另存新檔的視窗.給另一個檔案按確定即可

38 相片簿的製作

39 如果要啟動「影像展示區精靈」，請將插入點置於要在現行文件中插入影像或縮圖的位置，然後使用插入> 影像> 影像展示區指令。

40 步驟1：選取影像 步驟2：指定影像大小

41 步驟3：指定版面佈置和超連結選項 步驟4：指定儲存影像的地方

42 製作互動式網頁--JavaScript精靈

43 小區塊 要製作JavaScript時.請先學會如何使用小區塊 插入/小區塊 其餘JavaScript等16種特效請參閱
進入後點選線上教學/java script