↓網頁製作軟體：Namo5.5教學↓【網站評分表】【成績評量方式】【打字成績查詢】

●網頁作品觀摩：【106上學期3年級網頁】【範例網站】【101上學期3年級學生網頁】

【預備知識：網路及網站概念、檔案傳輸(FTP)軟體(FileZille下載&教學)】【106上學期3年級網頁】

個人網頁製作及上傳【圖文說明】      

●.個人網站空間：可免費申請、付費租用或自行架設網站主機來存放網頁。(本校已架設網站主機，給每位學生15Ｍ的網站空間)
     每個學生的網站網址：163.32.129.197/~s+學號。開啟瀏覽器輸入網址，例如：163.32.129.197/~s0410350/ 

●.製作網頁：製作網頁軟體，如：NamoWebEditor、Dreamweaver、Frontpage…等。(本學期上課用--Namo5.5--來作網頁)
1.開啟namo「網站管理員」，編修網站和網頁：打開「我的電腦」進到【D碟】自己建的資料夾(如：D:\s0410350\www)中的www資料夾，開啟site.wej檔案，若【D碟】中沒有自己建的資料夾，請利用FileZilla軟體將「網頁伺服端(遠端站台)」的www資料夾整個下載回D碟自己的資料夾中
2.編輯完網頁、關閉namo後，需在本地站台瀏覽自己的網站【D:\s+學號\www\index.html】，檢查網頁是否正確，沒問題才ftp至遠端網頁主機(首頁名稱為：index.html)


●.使用ftp軟體上傳網頁：通常製作網頁的軟體會內建ftp的功能。(本學期上課用自由軟體--FileZilla--來上傳網頁)

開啟FileZilla【FTP 軟體】，並連線至網站伺服器主機(163.32.129.197)，步驟如下圖所示：
1.主機：163.32.129.197
2.使用者名稱：s+學號 (如：s0410350，s小寫)

Namo WebEditor 5.5 教學課程 【 Namo5.5完整線上教學 】

106學年度3年上學期電腦課網站作業評分計分表【106上學期3年級網頁】【範例網站】 【佈景主題修改方式】

網頁設計進度1：（快速建立網站，建立完後開啟site.wej檔就可編修）
1.在D碟建立資料夾(如：s0410350)，在其資料夾中建一「子資料夾(www)」；一般建網站中的資料夾時，最好用英文如：www、photo…
2.執行，點按【檔案】→【網站】→【網站精靈】(詳細步驟如下)
          

• 範本：挑選【個人網站2】，採直式瀏覽網頁模式來製作
   

• 結構：至少6個主題按鈕→網站導覽、站長介紹、站長作品、精選網站、笑話集錦、圖片欣賞、文章精選… 【網站「結構」可隨時增修，第一次新建暫不處理】
   
• 佈景主題：點【放大】按鈕→選取一個歡喜的佈景主題 【佈景主題可隨時更換，所以剛開始不需花太多時間來挑選】
   

• 資訊：在【輸入新網站的位置】→點【瀏覽】→找出D碟中所建的個人資料夾 (如：D:\s0410350\www，FTP時本地站台的資料夾)
   

• 完成後會多出一個「網站管理員」的視窗，並在D碟所建資料夾(D:\s0410350\www)中產生整個網站的所需檔案，
  直接開啟首頁【index.html檔】，可在「工作站」瀏覽檢查整個網站的所有網頁
   

 

注意：Namo會將首頁的檔名命名為index.html(或index.htm)

【佈景主題修改方式】
(1)在「網站管理員」中，開啟網站首頁。

(2)在webeditor編輯畫面，點選【格式】→【佈景主題】，即可修改。修改完後記得要在「網站管理員」中按【儲存】。
 

網頁設計進度2：(修改網站名稱及架構)
1.開啟的D碟個人資料夾中的 site.wej 檔，出現「網站管理員」及「NamoWebEditor5.5」編輯視窗
2.在利用【網站管理員】修改整個網站名稱及架構如下：

3.修改完網站名及架構後，務必記得按下【儲存檔案】
4.檢查本地站台(工作站端)的網頁是否正確，開啟index.html檔來檢查。
5.「FTP」上傳網頁，執行FileZilla軟體→輸入主機位址、使用者名稱、密碼後，按「快速連線」如下圖所示：

 
6.FTP上傳網頁完成後，請檢查個人網站的網頁是否與本機瀏覽時相同
個人網站網址：163.32.129.197/~s+學號【如：163.32.129.197/~s0410350】 

網頁設計進度3：(設計→網站首頁：旋轉橫幅效果)
1.開啟【網站管理員】中index.html檔，index.html會出現在「NamoWebEditor5.5」編輯視窗中
2.下載3~5張圖片(用「另存目標」的方式)範例圖片，並放置於D碟所建立資料夾中，最好能再建一個子資料夾(如photo)來存放下載的圖片
(下載圖片的副檔名型態只能是.jpg .png .gif三種)【KMPlayer軟體擷圖影片1、影片2】【螢幕擷取：FSCapture 軟體】
3.游標在要插入圖片的位置→【插入Script精靈效果】→選取類別：【全部】→選取Script：【旋轉橫幅】

4.點【新增】來新增圖片(約新增3~5張)→再修改間隔秒數→最後按【完成】(如下圖)

5.儲存檔案，並預覽本機的網站首頁，沒問題即可使用【FTP上傳網頁的方式上傳檔案】，檢查個人網站是否已更新
注意：傳檔之前一定要先儲存網頁(在NamoWebEditor)及網站(在網站管理員)

網頁設計進度4：(設計→站長介紹)   範例1、範例2、範例3、範例4、範例5、小動畫圖片
1.從「網站管理管」中開啟【站長介紹】網頁，【站長介紹】網頁會出現在「NamoWebEditor5.5」編輯視窗中
2.設計站長介紹的網頁：使用表格【影片教學】、插入美工圖案、也可在網路上搜尋加入些 小動畫圖片、動畫水平線，並利用【檢查員】修改

3.內容可以有：姓名、星座、興趣、專長，理想，目標，座右銘…，可參考【範例1、範例2、範例3、範例4、範例5】

4.不可以放重要資料，例如：身份證字號，電話，地址 

【檢查員】：提供於編輯網頁時，於編輯視窗中所選取的物件「如表格、影像、圖層、水平線..等」提供相關可以修改、調整之設定工具，無需另外再開啟其他任何對話方塊。

網頁設計進度5：(設計→站長作品)  【104學期作業】【105學期作業】
1.從「網站管理管中」開啟【站長作品】網頁，【站長作品】網頁會出現在「NamoWebEditor5.5」編輯視窗中
2.使用表格製作「站長作品」網頁，可參考【範例】，內容中至少要有6個電腦作品連結【影片教學】
3.製作2年級flash的作品預覽【影片教學】
4.製作1年級Photoimpact(圖片和gif動畫圖片)的作品的預覽：點選該圖片→按右鍵→選「複製」→點選欲貼上圖片的位置→按右鍵「貼上」即可。

5.製作文字超連結【影片教學】，製作圖片超連結【影片教學】

網頁設計進度7： (設計→網站導覽：影像地圖製作)   範例1、範例2
1.使用【網站管理員】新增或修改網站架構，使網站的其中一個主題名稱為「網站導覽」。並將「網站導覽」移到第一個位置 。(如下圖所示)

2.修改完網站名及架構後，務必記得按下【儲存檔案】，並開啟「網站導覽」網站來編輯。
3.下載FSCapture 軟體，並將其解壓縮到桌面，執行FSCapture軟體【影片教學】
4.使用FSCapture擷取整個網站架構圖片，並將「網站架構」圖片儲成底圖透明的tree.gif檔【影片教學】
5.插入「網站架構」圖片，建立「網站導覽」的影像地圖【影片教學】

網頁設計進度8：

第一章 Namo WebEditor快速上手 1-1 認識Namo WebEditor 1-2 網頁與網站的區分 　 1-2-1 開啟網站？還是開啟網頁？ 　 1-2-2 網頁與網站的儲存或關閉 第二章 建立自己的網站架構 2-1 定出網站的特色 2-2 網站的規畫 2-3 開始建立新網站 2-4 管理網站架構 第三章 白手起家--建立網站DIY 3-1 建立空白的網站 3-2 資源管理員 3-3 設定佈景主題 　 3-3-1 加入佈景主題 　 3-3-2 編輯佈景主題 3-4 插入與編修導覽列 　 3-4-1 插入導覽列 　 3-4-2 蹦現式的導覽列 　 3-4-3 插入導覽樹 3-5 編輯文字 　 3-5-1 文字的輸入 　 3-5-2 字元格式 　 3-5-3 段落格式 　 3-5-4 文字資料清單 3-6 在網頁中插入圖片 　 3-6-1 常用圖檔格式 　 3-6-2 圖片的應用 　 3-6-3 插入按鈕 　 3-6-4 製作相簿藝廊 第四章 表格與圖層的應用 4-1 一般表格的建立與選取 4-2 編輯表格架構 4-3 表格的屬性設定 4-4 表格與文字的轉換 4-5 佈置表格 4-6 圖層的建立

第五章 網頁主持人--超連結 5-1 文字的超連結 　 5-1-1 超連結到內部網頁 　 5-1-2 超連結到檔案 　 5-1-3 超連結到其他網站 　 5-1-4 超連結到電子信箱 5-2 超連結到書籤 　 5-2-1 建立書籤 　 5-2-2 建立書籤超連結 5-3 圖片的超連結 　 5-3-1 一般圖片的超連結 　 5-3-2 建立影像地圖 5-4 超連結的編修與維護工作 　 5-4-1 編輯超連結 　 5-4-2 設定超連結開啟視窗 　 5-4-3 檢查與維護超連結 第六章 特效的運用--建立酷炫網頁 6-1 圖片與影像的進階應用 　 6-1-1 圖片與影像的效果 　 6-1-2 去除圖片與影像的背景 　 6-1-3 圖片與影像的切割 6-2 各種網頁元件 　 6-2-1 在網頁中使用影音檔案 　 6-2-2 加入Flash動畫 　 6-2-3 使用電子卡片 6-3 加入文字特效 　 6-3-1 在網頁中建立功能表 　 6-3-2 捲動文字的特效 6-4 圖片的動態效果 　 6-4-1 圖片的動畫效果 　 6-4-2 圖片的其它校特效 6-5 設定網頁切換效果 6-6 Script管理員

第七章 建立互動式網頁 7-1 時間軸的應用 　 7-1-1 建立直線路徑動畫 　 7-1-2 建立曲線路徑動畫 　 7-1-3 記錄圖層路徑 7-2 動作設定 　 7-2-1 建立按鈕 　 7-2-2 設定回應動作 7-3 時間軸動畫與動作結合 第八章 分割畫面--頁框的運用 8-1 如何建立頁框 　 8-1-1 認識頁框 　 8-1-2 建立頁框 　 8-1-3 調整頁框架構 8-2 編輯頁框 　 8-2-1 頁框內容的處理 　 8-2-2 儲存頁框 　 8-2-3 頁框的屬性設定 　 8-2-4 替代網頁 8-3 目標頁框的設定 　 8-3-1 頁框的命名 　 8-3-2 指定目標頁框 第九章 建立表單網頁 9-1 認識表單欄位 9-2 建立表單欄位 9-3 表單欄位的驗證 9-4 發送與接收 9-5 美化表單 第十章 與Office應用軟體整合 10-1 加入Word檔案 10-2 加入PowerPoint簡報 10-3 加入Excel試算表 第十一章 網站管理與發佈作業 11-1 發佈前的準備工作 11-2 使用網站管理員 　11-2-1 發佈網站 　11-2-2 發佈修改後的檔案 　11-2-3 同步作業 　11-2-4 刪除遠端網站中的檔案 11-3 線上編輯