「班级网页制作研习」

1 班級網頁製作研習班級網頁製作研習 步驟說明 一 於個人電腦中建立網頁資料夾一 於個人電腦中建立網頁資料夾 1 於個人電腦 D 槽 磁碟機 中新增資料夾 按滑鼠右鍵新增 選資料夾選項 命名為 班級 web 例如 高一 1 班就取名為 高一 1web 2 於 班級 web 資料夾中 新增資料夾 命名為 班級 例如 高一 1 班就取名為 高一 1 3 於 班級 資料夾中 新增資料夾 命名為 img 用以存放照片及圖片 大小限制為 400 300 二 修改照片及圖片大小二 修改照片及圖片大小 1 開啟 PhotoImpact 2 檔案 開啟 將要處理的照片及圖片 全部或分批開啟於 PhotoImpact 可運用 Ctrl 及 Shift 選取多個檔案 按下開啟 如下圖 3 於 視窗 批次管理員 批次處理多個檔案 如下圖 950307 2 4 類別選擇 格式 指令選擇 影像大小 然後按 全選 再按 確定 如下圖 5 出現 影像大小調整 視窗 於 使用者自訂 選擇 像素 為單位 將寛度設為 400 高度設 為 300 按確定 若無法修改為 400 300 請將 等比例 選項取消勾選 1 選擇選擇 格式格式 2 選擇選擇 影像大小影像大小 3 按下按下 全選全選 按鈕按鈕 4 按下按下 確定確定 按按 鈕鈕 3 6 再次開啟 批次管理員 類別選擇 網路 指令選擇 影像最佳化程式 然後按 全選 再按 確定 如下圖 7 出現 影像最佳化程式 視窗 於 模式 選擇 標準最佳化 按另存新檔 將檔案依序存於 班級 web 班級 img 資料夾中 如此圖片及照片處理已完成 如下圖 1 選擇選擇 網路網路 2 選擇選擇 影像最影像最 佳化程式佳化程式 3 按下按下 全選全選 按鈕按鈕 4 按下按下 確定確定 按按 鈕鈕 2 可將可將 等比例等比例 取取 消勾選消勾選 1 選擇選擇 像素像素 為單位 為單位 設定為設定為 400 300 4 三 班級網頁製作三 班級網頁製作 1 開啟 IE 瀏覽器 於網址處輸入 ftp 163 23 177 2 按 Enter 選擇 web 班級網頁 資料夾 將 研習用 資料夾按滑鼠右鍵 選 複製到資料夾 將 研習用 資料夾複製到桌面上 2 開啟桌面之 研習用 資料夾 網頁素材 從 img01 11 中選擇一個資料夾 將該資料夾內之圖 檔全部複製到 班級 web 班級 img 中 3 開啟桌面之 研習用 資料夾 將 首頁 htm 檔案複製到 班級 web 班級 中 4 開啟 Microsoft FrontPage 5 檔案 開啟舊檔 開啟 班級 web 班級 中之 首頁 htm 版面分配如下圖 1 選擇選擇 標準最佳化標準最佳化 2 按下按下 另存新檔另存新檔 5 6 對著標題 welcome X 圖按滑鼠右鍵選擇 圖片內容 在 一般 頁面 圖片來源 按下 瀏覽 按鈕 從 班級 web 班級 img 中選取 Welcome 圖片 如下圖 7 其他 X 圖可依上個步驟方式 依序置換為正確的圖案 完成後如下圖 代表班級照片代表班級照片 400 300 標題標題 welcome Mail 圖示圖示 分行線圖示分行線圖示 橫橫 分隔線圖示分隔線圖示 直直 裝飾圖示裝飾圖示 可利用檢視功能表可利用檢視功能表 選取選取 縮圖縮圖 功能功能 6 8 修改 網頁標題 及 背景圖 請於頁面上按滑鼠右鍵 選擇 網頁內容 項目 一般 頁面 下可修改 標題 背景 頁面 格式設定將 背景圖片 項目打勾 按下 瀏覽 按鈕 從 班級 web 班級 img 中選取背景圖片 完成後如下圖 9 mail 圖示連結 對著 mail 圖示按右鍵選擇 超連結 項目 於 建立超連結 頁面 URL 右方 圖示中 按下 mail 圖示按鈕 輸入 e mail 按確定 確定即可 如下圖 1 按下背景選項按下背景選項 2 勾選背景圖片勾選背景圖片 3 按下瀏覽按鈕選擇背按下瀏覽按鈕選擇背 景圖片景圖片 7 10 將其他文字作修改後 按下 檔案 儲存檔案 將檔案儲存於 班級 web 資料夾中 11 目前規劃 6 個單元 分別為 首頁首頁 親師聯絡簿親師聯絡簿 學生作品學生作品 榮譽榜榮譽榜 活動翦影活動翦影及資源分享資源分享 目前 首頁首頁已完成 其他網頁將依首頁版面作修改 12 親師聯絡簿網頁製作 將 welcome 標題圖案刪除 delete 輸入文字 親師聯絡簿 反白文 字 字型大小選取 6 24pt 加粗體 並更改文字顏色 刪除中間照片如下圖 13 將左右兩邊之兩個儲存格合併 並於合併後之儲存格處按滑鼠右鍵 選擇儲存格內容 2 輸入輸入 e mail 1 按下按下 mail 圖示按鈕圖示按鈕 1 將將 welcome 標題圖案標題圖案 刪除刪除 delete 輸入文字 親 輸入文字 親 師聯絡簿 反白文字師聯絡簿 反白文字 2 字型大小選取字型大小選取 6 24pt 加粗 加粗 體體 3 更改文字顏色更改文字顏色 4 刪除照片刪除照片 8 14 於 儲存格內容 頁面中 將 指定寬度 選擇 依百分比 數字改為 6 另一邊依此 方式將 指定寬度 設定為 6 如下圖 而中間部分設定為 88 垂直對齊方式 設定為 靠上 15 插入表格 於中間之儲存格插入表格 從 表格 插入 表格 出現 插入表格 頁面 將 欄設定為 1 按確定 如下圖 畫實線部分為表格 表格為一個或多個儲存格所組畫實線部分為表格 表格為一個或多個儲存格所組 成成 畫虛線部分為儲存格畫虛線部分為儲存格 9 16 插入圖片 本例要在表格之第一個儲存格中插入一個項目圖示 在要插入圖片處點一下滑鼠左 鍵 從 插入 圖片 從檔案 於 班級 web 班級 img 中選取項目圖片 如下圖 17 依序輸入聯絡事項及輸入日期 下次若需增加項目 可點選第一個儲存格 從 表格 插入 列或欄 選擇 列 位置選擇 選項上方 即可於上方新增一列 項目圖示則用複製方 式複製於新增列中如下圖 插入項目圖示插入項目圖示 表格的欄表格的欄 表格的列表格的列 10 18 最重要的事情 另存新檔 從 檔案 另存新檔 將名稱改為 親師聯絡簿 htm 按 儲 存 其他網頁也是依照上述方法修改而成 並分別儲存為 學生作品 htm 榮譽榜 htm 活動翦影 htm 及 資源分享 htm 當然 這些單元名稱不一定要如此命名 單元項目可依 需要增加或減少 19 連結 以製作 資源分享 htm 為例 如下圖 若要新增 Yahoo 奇摩的連結 首先將 Yahoo 奇 摩反白 對著反白按滑鼠右鍵 選 超連結 選項 20 於 建立超連結 頁面 URL 處 輸入網址 tw 於 目標框架 選擇 2 從從 表格表格 插入插入 列或欄列或欄 1 點選第一個儲存格點選第一個儲存格 3 選擇選擇 列列 4 選擇選擇 選項上方選項上方 11 開新視窗 如此在點選連結時 將會開一新的視窗來顯示 Yahoo 的網頁 如下圖 21 個人想法 若某個活動照片不多 可於 ftp 檔案伺服器 上 自己班級的資料夾中新增以該活動 為名稱的資料夾 例如優良頒獎實況 再將照片批次修改為 400 300 大小 並加以有意義命名 上傳到該目錄中即可 若活動照片太多 則建議於免費之網路相簿 如 MyXuite 新增相簿 將照 片上傳至 MyXuite 相簿中 再使用連結的方式連結至該相簿中 好處是可使用投影片方式瀏覽 照片 22 建議 可挑選幾張代表性之照片 修改大小命名後 上傳至該活動名稱之資料夾 四 上傳檔案四 上傳檔案 1 開啟 IE 瀏覽器 網址輸入 ftp 163 23 177 2 按 Enter 開啟 web 班級網頁 資料夾 按滑鼠左 鍵二次 如下圖 1 輸入網址輸入網址 2 選擇選擇 開新視窗開新視窗 1 輸入網址輸入網址 ftp 163 23 177 2 2 開啟開啟 web 班級網頁班級網頁 資料夾資料夾 12 2 於 檔案 登入身分 輸入帳號 teacherteacher 密碼 chsmrteacherchsmrteacher 按下 登入 如下圖 3 開啟自己班級的資料夾 按滑鼠右鍵新增 新資料夾 將資料夾命名為 img 開啟 img 資料夾 將 D 槽 班級 web 班級 img 內之所有檔案全選 拖曳至剛剛新增 的 img 資料夾中 4 回上一層 目前所在為自己班級資料夾