WebEditor网页制作_第1页
WebEditor网页制作_第2页
WebEditor网页制作_第3页
WebEditor网页制作_第4页
WebEditor网页制作_第5页
已阅读5页,还剩2页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论