《台市中山国小教师资讯研习》由会员分享，可在线阅读，更多相关《台市中山国小教师资讯研习（30页珍藏版）》请在金锄头文库上搜索。
1、?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.1 NAMO 6.0 網頁設計講義 V1.0 ? By 賴健二 http:/www.chener.idv.tw 2004.9.22各位同仁： 目前，本校班級網站與教學網站已經日趨完整，過去，資訊組辦過好幾梯次的網 頁設計研習。原本打算再開網頁設計研習的，但因多位教師希望能繼續學習網頁設計，也 希望加強網頁設計的概，因此，資訊組以 NAMO 6.0 再開設網頁設計的研習，並加深課程 內容，期望大家對於網頁製作的原能加解，以減少各錯誤的發生。 為讓大家有個考的依據，特別製作此份簡單的講義。祝大家學習愉快！ _ 貓熊師 賴健二 第一部分
2、 常用基本功能 第一部分 常用基本功能 一、使用網站精開始新站 一、使用網站精開始新站 NAMO 的迷人之處，在於它的網站精可以快速地建整個網站的架構、套用美美的 佈景主題，這一點，相較於 FrontPage 與 Dreamweaver 是非常人激賞的。當然，您 喜歡與別人撞佈景主題 ，也可以選擇以傳統的方式設計每一頁，只是就比較辛苦。以 下是開始一個新站的步驟： Step 1: 執 NAMO 6.0 Step 1: 執 NAMO 6.0 Step 2: 從功能表選擇檔案?網站?網站精 Step 2: 從功能表選擇檔案?網站?網站精 Step 3: 選擇主選單按鈕的方向後，按下一步 Step
3、3: 選擇主選單按鈕的方向後，按下一步 如果你希望網站內 容的選單按鈕是水 平排的，請選擇 個人網站 1 ；希 望是垂直的請選 個人網站 2 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.2 Step 4: 修改網站架構(建議先只做第一層)，好之後按下一步 Step 4: 修改網站架構(建議先只做第一層)，好之後按下一步 網站的架構是可以 隨時調整的。 建議此處先要做 太多，稍後採用範 本的方式新增。 Step 5: 挑選佈景主題 Step 5: 挑選佈景主題 這一版的佈景主題 居然無法放 大#$# 過 ，倒是可以進 預覽 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設
4、計講義 P.3 Step 6: 設定放置網站的資夾。 Step 6: 設定放置網站的資夾。 這個步驟非常重要， 您一定要準備一個專用的資夾擺放網站。 在這， 我輸入 D:338 班網 ，代表我的網站要擺在 D 碟的 338 班網 資夾中。您也可使用瀏覽鈕指定資 夾位置。 建議要放在 C 碟， 最好放在 D 至於上方的標題 、 作者 、 電子郵 件等位，就看您 要要讓它們出現在 首頁。如果要，全 部刪掉就好！ Step 7: 設定將要上傳的伺服器 Step 7: 設定將要上傳的伺服器 這個地方可以等網站做好再設定。因此，可以直接按下完成鈕。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計
5、講義 P.4 Step 8: 按新增鈕，設定網站伺服器位置 Step 8: 按新增鈕，設定網站伺服器位置 在中山國小，您的網站可放在 W3 或 W4 伺服器。建議您，在此先將相關資設好， 如此一，發佈網站會較快速。 位內容明： (1) 網站名稱：您就隨設吧，自己看得懂就好 (2) 主機主機：如果您想傳到 W3 ，請輸入 w3.csps.tp.edu.tw；如果想放在 W4 ，請輸入 w4.csps.tp.edu.tw；如果您想放在校外的 Web Server，請輸入該伺服器的網址 (3) 接埠接埠：請要改這個位 (4) 目目：本校 W3 或 W4 的網站，預設目為小寫的 public_html
6、 ，因此，請輸入小寫的 public_html。但是，您只要設計一個網站，那麼，請以資夾分別。如，您在 W3 打算放置 2 個網站，班網叫 338，個人網站叫 pig，那麼，目的設定就會是 public_html/338，與 public_html/pig (5) 使用者名稱使用者名稱：就是您在 W3 或 W4 的帳號，如果您忘記.請找健二 (6) 密碼密碼：就看您記記得 (7) HTTP 資訊資訊：就是將這個網站的網址。如：我的帳號是 chener，那麼，網址會是 http:/w3.csps.tp.edu.tw/chener。如果我有個網站，一個是 338，一個是 pig，那麼， 網址分別會
7、是：http:/w3.csps.tp.edu.tw/chener/338、http:/w3.csps.tp.edu.tw/chener/pig。 這個位是可以用它的！這個位是可以用它的！ ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.5 Step 9: 按下完成鈕，按是建資夾 Step 9: 按下完成鈕，按是建資夾 Step 10: 完成新增網站的動作。 Step 10: 完成新增網站的動作。 NAMO 6.0 的網站 管員 ，看起清 爽乾淨。 您可以玩一下 ，用 同的模式檢視網 站架構。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.6 二、調整網站架構
8、二、調整網站架構 NAMO 6 在執時，會產生個視窗，一個叫作網站管員 ，一個稱為Namo WebEditor 6 。 網站管員是專門用處網站架構、網頁檔名、發佈設定的程式， Namo WebEditor 6 則是編輯單頁網頁的地方。您可以在電腦螢幕下方的工作，換這個視窗。 以下介紹調整網站架構的方法： Function 1: 刪除某個網頁 Function 1: 刪除某個網頁 您只要在網站管員視窗中，對著想要刪除的網頁，按鼠右鍵，選擇刪除即可。 Function 2: 搬動某個網頁 Function 2: 搬動某個網頁 直接拖曳即可！ Function 3: 新增子網頁 Function 3
9、: 新增子網頁 假設您在某個網頁下，想新增一個頁面，最快的方法是把別的網頁複製過。否則，請 對著它按鼠右鍵，選擇開新檔案?文件 ，然後挑選所需的文件型即可。 Function 4: 改 html 檔的檔名 Function 4: 改 html 檔的檔名 在 NAMO ，HTML 檔名是內定的，但其檔名得符合該網頁的原意。因此，建議 您，養成修改檔名的習慣，讓每個網頁的檔名都是有意義的。原則上，建議您使用英文，比 較會有問題！請先在右邊點一下所要修改的網頁，然後從視窗左邊，找到反白的檔名，按 鼠右鍵，選重新命名即可修改。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.7 三、開
10、始編輯網頁 三、開始編輯網頁 在您調整好網站架構之後，您的網站就已經完成三分之一。接下的工作，就是編輯 每一頁的內容！只要在網站管員視窗中，對著想編輯的頁面點下，即可開始編輯。 編輯的方法就是一般的文書處，在此簡述常用的功能如下： Function 0: 調整編輯區版面 Function 0: 調整編輯區版面 如果您第一使用 NAMO 6 ，它會開啟所有的面板，如下圖： 但是，我們並會同時用到所有的面板，因此，請選擇 檢視 ? 面板 ? 隱藏面板 ， 可隱藏所有面板。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.8 Function 1: 將表格置中 Function 1:
11、 將表格置中 由於 NAMO 使用無框線的表格安排版面，該表格預設值為靠左，因此，造成每一個 畫面的偏左的現象。調整的方法如下： Step 1 ：對著最外層的表格按鼠右鍵，選擇表格內容 Step 2：對齊選項設定為置中 ，按確定鈕後即可。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.9 Function 2: 刪除子表格 Function 2: 刪除子表格 許多頁面會有子表格，就是表格的表格。如果您需要，可以將它刪除，方法如下： Step 1：對著子表格按鼠右鍵，選擇選取表格 Step 2：看到子表格被反白的畫面後，按下Delete鍵即可刪除 Function 3: 編輯文
12、字 Function 3: 編輯文字 此處多介紹，但提醒您，文字只能使用新細明體與標楷體 ，否則，瀏覽網頁的 人，可能看到您想呈現的字體，除非他也安裝相同的字型。 Function 4: 插入圖片 Function 4: 插入圖片 請選擇插入?影像即可插入圖片。也可選擇插入?影像元素?美工 圖庫 ，使用美工圖庫。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.10 四、變佈景主題與圖片文字 四、變佈景主題與圖片文字 如果您想換個佈景主題，只要選擇 格式 ? 佈景主題 ，重新選擇一個佈景主題之後， 按下確定鈕即可！ NAMO 6.0 佈景主題預設的字型，已經是新細明體，而是改為
13、黑體字。如此一 ，您就太需要修改字體，可以下少時間。 如果您喜歡黑體字，還是要修改字型， 可使用以下步驟處。 Step 1: 對著主標題點下，出現以下視窗後，按智慧美工圖案 Step 1: 對著主標題點下，出現以下視窗後，按智慧美工圖案 Step 2: 按下修改鈕 Step 2: 按下修改鈕 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.11 Step 3: 點選文字後，修改大小和字型。完成後，按下確定鈕 Step 3: 點選文字後，修改大小和字型。完成後，按下確定鈕 你還可以把字放 大、縮小，或調整 位置哦！ 這邊的文字內容，請用修改。它會跟隨網站管員中，您所設定的標題而改
14、變 Step 4: 按個確定之後，回到以下畫面，按下確定鈕。 Step 4: 按個確定之後，回到以下畫面，按下確定鈕。 此時，您需考慮目前的設定，是否要套用到所有其他頁，如果要，就要勾左下角的 勾勾。 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.12 五、改導覽 五、改導覽 假設下圖是您的網站架構，您希望在關於我自己那一頁，也能夠有按鈕結到 相片 1 、 相片 2 、 相片 3 ，那麼，做法如下： Step 1: 打開要插入導覽的頁面，將插入點放在導覽要出現的位置 Step 1: 打開要插入導覽的頁面，將插入點放在導覽要出現的位置 ?台市中山國小教師資訊研習 NAMO 6.
15、0 網頁設計講義 P.13 Step 2: 選擇插入?瀏覽?導覽 Step 2: 選擇插入?瀏覽?導覽 此時，請從右方導覽樹，選擇您要結的頁 面；從左邊中間，決定按鈕的型，原則上，建 議您選擇使用智慧按鈕 。然後，決定按鈕的 排方向後，按下確定鈕。 Step 3: 按下確定後，調整導覽的水平或垂直位置(建議置中) Step 3: 按下確定後，調整導覽的水平或垂直位置(建議置中) Step 4: 存檔後，預覽看看 Step 4: 存檔後，預覽看看 ?台市中山國小教師資訊研習 NAMO 6.0 網頁設計講義 P.14 除插入新的導覽之外，您也可以改掉原畫面左方的導覽。只要對著它點一下， 按Delete鍵，就可以刪除。然後，再重新插入即可。如果您在導覽設定視窗，勾選蹦 現子功能表 ，還可以有如下圖的效果哦。 、使用 Flash 按鈕 、使用 Flash 按鈕 為迎頭趕上 Dreamw
