《WebEditor网页制作.doc》由会员分享，可在线阅读，更多相关《WebEditor网页制作.doc（7页珍藏版）》请在金锄头文库上搜索。
1、Namo WebEditor網頁製作 教材來源:廖勝能 編開始製作之前網站製作流程初步計畫選擇主題計畫內容畫成架構圖蒐集資料準備內容素材編輯製作網頁上傳檔案製作教師個人網頁內容大概包括教師的基本資料、興趣、照片、我的相簿、作品、收藏、課表等等我的首頁自我介紹我的相簿學校教學留言版我的收藏我的最愛課表我的作品準備個人的生活照、作品照片、課表以及其他電腦相關作品檔案照片掃瞄 or 數位相機傳輸至電腦中Namo WebEditor 上傳至學校網站（163.26.56.2）中(1)網站精靈：1.檔案專案網站精靈（開啟）2.選取網站模版選取頁下一步3.網站資訊填入你的網頁名稱、E-mail和著作權聲明下
2、一步4.佈景主題（視窗左邊是可供選擇的主題項目）選後可以點選檢視佈景主題預覽套用5.決定專案存放位置（請存放在D槽中，請先在D槽建立一個屬於您自己的資料夾）完成6.點選網站管理者結構（專案的導覽樹結構圖）依據您的規劃修改結構圖（請按滑鼠右鍵，點選內容，進行修改標題）請利用複製、貼上來增加頁面（切換至專案重新命名）檔案命名原則：1.切勿使用中文2.請使用英文小寫命名3.可參雜數字和”_”使用，但其他符號則不行(2)我的首頁：1.從網站管理者的結構中點選（or 專案中點選 index.html）開啟首頁2.在頁面中的圖片插入自己的照片，插入影像從檔案影像路徑瀏覽點選自己的圖片資料夾選好圖片開啟確定
3、 3.在下面的表格（框框）中，輸入一些歡迎的文字。（可更改文字的大小、顏色）預覽（F11）存檔（此時會跳出複製資源檔案選擇資料夾新建images，往後網頁中的照片、圖片都可存放於此資料夾中確定）4.把自我介紹頁完成。（圖片和文字）(3)加入智慧按鈕：1.做項目按鈕：插入佈景主題元件智慧按鈕2.選擇按鈕選一個自己喜好的按鈕圖示下一步3.文字輸入名稱（例如：回首頁）下一步完成4.做好的智慧按鈕會出現在頁框中5.複製其他的智慧按鈕：將第一個做好的智慧按鈕複製到其他表格上，開始修改第二個智慧按鈕的文字點兩下第二個智慧按鈕做修改動作方法同上(4)加入背景圖案加入Namo的背景圖案：插入影像美工圖案背景選
4、一個自己喜好的背景插入為背景加入自己的背景圖案：格式文件內容外觀背景影像瀏覽加入自己的背景圖確定加入背景顏色：格式文件內容外觀背景選一個背景顏色確定(5)加入水平線插入佈景主題元件智慧按鈕分隔符完成u或是選擇簡易的水平線：插入水平線(6)加入圖案插入Namo的美工圖案：插入影像美工圖案點選欲加入樣式圖案插入插入自己的圖片：插入影像從檔案影像路徑瀏覽點選自己的圖片資料夾選好圖片開啟確定(7)圖片背景透明化如果一張圖片的背景不是透明的，而你的網頁背景又是有顏色的，那麼這張圖片就會顯得有點不好看，為了使畫面好看我們可以使用圖片背景透明化來處理1.點選圖片按右鍵影像以透明顏色製作影像勾選交錯的GIF確
5、定2.畫面出現由於該檔案之GIF檔已經存在，是否要覆蓋舊檔案？是(8)圖形替換點選已插入的圖片兩下建立圖形替換名稱：輸入例如a第二個影像路徑（S）：瀏覽插入圖片完成u如果在名稱內未輸入任何名稱，則無法完成(9)影像展示區製作相簿，自動建立縮圖，點選就可以自動放大的最佳處理方法：1.插入影像影像展示區新增檔案選取照片開啟下一步2.調整縮圖的影像大小例如：指定實際大小寬度與高度各為64像素下一步3.選擇是否要表格及欄數（例如：指定使用表格欄數4）超連結的內容（例如：在新視窗開啟每一個影像）下一步4.在指定的目錄中儲存複本或縮圖：請選擇一個資料夾存放完成(10)影像效果修改照片，不必再麻煩美工繪圖軟
6、體了，Namo裡有內建影像處理精靈，可以簡單做出和美工軟體一樣的效果：點選照片影像影像效果出現影像效果視窗，共有六種可以修改確定(11)超連結建立網頁內部的超連結： 對著欲加入超連結的圖點一下選取插入超連結瀏覽選取檔案開啟目標頁框self確定u選self表示連結在本身視窗建立網頁外部的超連結：對著欲加入超連結的圖點一下選取插入超連結在URL(U)：輸入網址（例如：http:/www.ssps.tn.edu.tw）目標頁框_blank(開新視窗) 確定E-Mail的連結：對著欲加入e-mail超連結的圖點一下選取插入超連結在URL(U)：輸入mailto：依妹兒 （例如： mailto：tnpu
7、ssmail.tn.edu.tw）確定ublank開新視窗：會將連結的網頁開啟在新的空白瀏覽視窗上，建議要連到別人的網頁上做此連結。（常使用）uparent上層頁框視窗：如果網頁採用頁框的版面，新連結的網頁會回到上一層的頁框所在的視窗上。uself本身視窗：連結的網頁直接顯示在原來的網頁上utop全視窗：連結的網頁會全部顯示在視窗上(12)書籤如果網頁內容很多，我們可以在適當的地方（如段落、章節）加入書籤，再配合超連結的動作，以方便讀者閱讀1.將所要設定書籤的位置選取插入書籤輸入書籤名稱新增關閉檔案2.設定好書籤後，就可以結合超連結了如上述超連結中所說的選取要設定的文字或影像插入超連結建立超連
8、結在書籤中選取所要的書籤名稱確定(13)捲動文字框插入表單欄位捲動文字框在初始質輸入文字輸入字元寬度（例如：50）和行數（例如：10）確定(14)各種Script精靈特效讓你的網頁更炫，而且輕完成特效，內建16種JavaScript精靈，舉下列幾種特效做說明：(15)Script精靈 / 動畫效果：動畫效果有直線、曲線及螺旋線三種，設定過程都一樣加入影像或美工圖案點一下圖插入ScriptScript精靈動畫效果下一步設定追蹤類型、起始位置完成(16)Script精靈 / 簡易的時鐘插入ScriptScript精靈時鐘(17)Script精靈 / 捲動文字 (類似跑馬燈)插入ScriptScri
9、pt精靈在方框中捲動文字輸入文字輸入捲動時期（數字越大捲動越慢）完成(18)Script精靈 / 下拉式功能表建立超連結的，以供瀏覽其它網頁之用以連結到外部網頁為例：插入ScriptScript精靈下拉功能表新增出現功能表項目設定的對話框輸入項目名稱（例如：搜尋引擎）確定回到下拉功能表的對話框目標框頁選_blank(開新視窗) 新增又回到出現功能表項目設定的對話框輸入項目名稱（例如：台灣Yahoo）輸入URL：（例如：http:/.tw）確定同樣上面的動作再繼續做其他的連結(19)Script精靈 / 蹦出新視窗插入ScriptScript精靈蹦現視窗下一步瀏覽選擇要蹦出的網頁開啟選擇下列表現
10、方式完成 u寬度/高度：指定新視窗的大小。u顯示工具列：選取以在視窗的上方顯示瀏覽器的標準工具列。u顯示捲軸：選取以顯示捲軸，如果需要的話。u顯示功能表：選取以顯示瀏覽器的功能表列。u顯示狀態列：選取以在視窗的下方顯示瀏覽器的狀態列。u可調整大小：選取，讓視窗重新調整大小。(20)Script精靈 / 小區塊走馬燈在小區塊內容上建立捲動效果1. 插入小區塊輸入文字調整小區塊的大小2.插入ScriptScript精靈走馬燈選擇以下的表現方式完成u捲動量：走馬燈捲動動作每步的距離。例如，如果您輸入5，跑馬燈一次會捲動 5 個像素。選擇的值越小，捲動就會越慢，而值越大，捲動得越快。u捲動延遲：捲動動
11、作每步間的時間量，單位為毫秒。例如，如果您輸入 100，跑馬燈會每 1/10 秒捲動一次。選擇的值越小，捲得越快。最小值為 10。u可見長度：指定跑馬燈的可見長度。（如果跑馬燈水平捲動，則長度就表示寬度；如果是垂直捲動，長度就表示高度。）如果你將可見長度設定比區塊實際長度短，則任何時間都可見到比區塊短的內容，按一下按鈕，讓可見長度跟實際長度一樣長。u重複：指定捲動效果重複的次數。輸入 -1 ，重複無限次。輸入 0，停用捲動效果，而不需刪除 script。(21)Script精靈 / 小區塊浮動小區塊當你捲動視窗時，可以看到固定視窗一角的影像。1.插入小區塊插入圖片調整小區塊的大小2.插入Scr
12、iptScript精靈浮動小區塊下一步3.在視窗位置上製作浮動小區塊，除了在目前位置上製作浮動小區塊，您也可以在與視窗相關的位置上製作浮動小區塊完成u可選用的位置有：視窗的四個角和視窗上下方之間的任一點u也可以在圖片上加上超連結(22)Script精靈 / 小區塊時間軸1.插入小區塊插入圖片2.視窗時間軸3.點一下圖片將圖片拉進時間軸內4.滑鼠停在時間軸的紅線上按右鍵記錄小區塊的路逕5.自動起始和重複打勾6.滑鼠再次移到圖片上畫上圖片要走的路徑(23)Script精靈 / 擦拭特效插入ScriptScript精靈擦拭效果下一步勾選整個視窗選擇擦拭效果類型擦拭顏色完成(24)發佈1.檔案發佈設定值新增2.在網站設定對話框中，設定好網站名稱（例如：ssps）主機（163.26.56.2）使用者名稱(帳號)及密碼確定3.網站清單選擇存放網頁的資料夾4.將欲上傳的網頁存檔連接發佈1
