网页制作教学讲义.doc

Namowebeditor 網頁製作教學講義 蔡承憲教師 一、架構圖 二、建立專屬網站(先於C槽新建一個資料夾，螢幕解析度設為800*600) 開啟Namo→【檔案】→【專案】→【網站精靈】 在網站模版中選擇【班級首頁】→【下一步】 輸入網站名稱、電子郵件以及著作權資訊 →【下一步】 選擇佈景主題(可點【檢視佈景主題】放大預覽) →【下一步】 【瀏覽】(選擇一開始建立的資料夾) →完成 三、開啟檔案 【檔案】→【專案】→【開啟專案】→點選Namo檔→【開啟】 出現『網站管理員』視窗 可從『網站管理員』的【結構】標籤中，用滑鼠拖曳移動檔案的連結位置，點選檔案按下滑鼠右鍵選擇【內容】改變檔案的標題 選擇要編輯的網頁並點滑鼠兩下進入編輯 四、利用按鈕精靈修改按鈕(主標題與按鈕列) ※如要還原，需依同樣的步驟改回(有些情況無法改回) ※如果新增的檔案要套用相同的布景主題，請將網站的架構設計好再一起改變文字格式(否則全部都會被改回成原始的字型) 在主標題上點滑鼠兩下→修改主標題內容→【修改影像】 【修改影像形狀】→選取主標題→【下一步】→點選想要的圖案→【下一步】 可編輯文字的內容、字型、大小、顏色(填充)以及圖案的大小等 【下一步】→【確定】→【確定】 五、儲存檔案 【檔案】→【儲存檔案】 【檔案】→【專案】→【儲存專案】 六、開啟新檔 在『網站管理員』的視窗中點選【檔案】→【新建】→【新文件】 輸入適當的名稱後，直接點滑鼠兩下進入編輯 七、選擇佈景主題套用至新檔案 【格式】→【變更佈景主題】→【是】→【是】 選擇想要套用的佈景主題(只能先套用背景，主標題與按鈕列必須手動加入) →【套用】 點選『現行的檔案』→【確定】 插入一欄一列的表格 【插入】→【佈景主題元件】→【主標題】(利用按鈕精靈修改主標題) 選取表格→【表格】→【表格內容】→選擇框線『隱藏』→【確定】 八、新增文件至導覽樹 到『網站管理員』的【結構】標籤中，點選要加入新文件的檔案 按滑鼠右鍵點選『新增至導覽樹』→『插入既有的文件』 選取檔案→【確定】 九、從導覽樹中移除文件 到『網站管理員』的【結構】標籤中，點選要移除的檔案 按滑鼠右鍵點選『從導覽樹移除』 十、在專案中刪除檔案 到『網站管理員』的【專案】標籤中點選要刪除的檔案(可按右鍵查看檔案內容) 【檔案】→【刪除】→【是】 新增水平子項按鈕(要連結至新增的網頁) ?從導覽樹增加後於母網頁建立一欄一列的表格→插入→佈景主題元件→ 導覽列→選擇子項、水平、使用按鈕→確定 ?若母網頁原本已有其他水平子項按鈕即直接從導覽樹增加即可 加入新網頁的垂直與水平導覽列(要連結回母網頁) ?垂直：插入→佈景主題元件→導覽列→選擇第一層、包括首頁、垂直、使用按鈕→確定 ?水平：建立一欄一列的表格→插入→佈景主題元件→導覽列→選擇水平層級、水平、使用按鈕→確定 ?下方水平：插入→佈景主題元件→導覽列→選擇第一層、包括首頁、水平、使用文字→確定 十一、更改背景顏色或圖案 【格式】→【文件內容】→點『外觀』標籤 在『色彩』的項目下修改『背景』的顏色(此時『背景影像』選項的內容必須清空才能顯現出所修改後的背景顏色) 或在『背景影像』按下『瀏覽』選擇喜歡的背景圖案→【開啟】→【確定】 十二、加入背景音樂 【格式】→【文件內容】→點『樣式』標籤 在『背景聲音』按下『瀏覽』選擇wav或midi聲音檔 選擇重複次數即可 十三、新增文字與設定文字格式 可直接輸入文字 利用滑鼠將文字反白→【格式】→【字型】→選擇字型、顏色、大小 十四、新增影像 可直接在『圖像框』點兩下，於『影像路徑』中瀏覽所要的圖片 或點【插入】→【影像】→【從檔案】→於『影像路徑』中瀏覽所要的圖片 背景透明化：點選圖片→【插入】→【影像】→【設定透明顏色】→點工具列上的『設定透明的顏色』→用滑鼠點影像的白色背景→確定 十五、建立文字或圖片的超連結 將文字反白或直接在圖片上按滑鼠右鍵 選擇『超連結』 在URL瀏覽要連結的網頁 選擇目標頁框的種類→【確定】 十六、走馬燈 點工具列上的圖示『插入小區塊』 在小區塊中輸入文字 在小區塊的控制點上按滑鼠兩下，出現『小區塊內容』對話框 【Scrip精靈】→【走馬燈】→【下一步】 點按捲動方向(靠左)、可見長度(填滿到小區塊) →【完成】 十七、時鐘 建立三欄一列的表格 在第一格與第三格中輸入文字後，將插入點移入第二格 【插入】→【Scrip】→【Scrip精靈】→【時鐘】→【下一步】 選擇喜愛的格式→【完成】 調整及隱藏表格格線 十八、發佈專案 到『網站管理員』按下【工具】→【網站設定值】→【新增】 填入網站名稱、主機、目錄(填入/)、使用者名稱(帳號)、密碼、被動模態打勾以及URL(網址) →【確定】 將電腦