網頁設計術科講義 < 題組一校園社團介紹網 -2> 班級 : 座號 : 姓名 : FTP 位址 :192.168.2.45, 帳號 :user01, 至 download 資料夾下載檔案存放至桌面 ( 一 ) 建置資料夾 1. 下載 web01.zip, 解壓縮至 C: 磁碟 首頁檔名為 index.htm(l) 或 default.htm(l), 置於網站的根目錄 (C:\webXX) 下 ( 二 ) 製作日期更新區課本 1-23 日期更新區需含下面的資訊 : 顯示的文字內容為 最近更新日期 :yyyy/mm/dd 說明: yyyy/mm/dd 為應檢日期 ; 其中 yyyy: 西元年,mm: 月份,dd: 日期 文字字型為標楷體 文字顏色為 #000000, 水平置中對齊 文字的字型大小 16px (medium size=3) 1. 開啟軟體 DreamWeaver, 打開 C:\web01\index.html 2. 選取下方 id "div-2" 的內容放在這裡, 完成下方設定 : 3. 格式 對齊 置中對齊 4. 複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字最近./dd 5. 選取文字 : 最近更新日期 :2016/12/15 CSS 編輯規則 : 選取器名稱 : f3, 按下確定後, Font-family: 標楷體 Font-size:16px Line-height:25 Color:#000000 ( 三 ) 設定網頁內容區 main.html 課本 1-23 網頁背景圖片 0101.jpg 網頁內插入合成圖片 0104.jpg, 寬 250px 高 250px, 替代文字為 科技高中校長 1. 開啟軟體 DreamWeaver, 打開 C:\web01\main.html 2.HTML 頁面屬性, 設定外觀 (HTML): (1) 背景影像 : 點下瀏覽, 選取 C:\web01\images\0101.jpg (2) 左邊界 :0, 上邊界 :0 3. 格式 對齊 置中對齊, 按下 3 個 Enter, 第一行放圖片, 第四行放文字 4. 滑鼠點第一行, 插入 影像,C:\web01\images\0104.jpg 選取, 設定 (1) 大小 : 先解鎖, 寬 :250, 高 :250,(2) 替代 : 科技高中校長 第 1 頁
網頁內圖片的下方輸入校長的話 ( 以每一字為扣分單位, 扣分無上限 ) 網頁中圖片與文字的間距為 2 個空白列 網頁中文字的字型大小 24px (x-large size=5) 標楷體 粗體 斜體 顏色 #0000FF, 水平置中對齊 1. 複製 ( Ctrl + C ) 文字嗨!... 驚喜! 2. 滑鼠點第四行, 貼上 ( Ctrl +V ) 文字嗨!... 驚喜! 按下 Shift + Enter( 強迫段行 ), 整理成 5 個段落, 如右圖所示 3. 選取全部文字,CSS 編輯規則 : 選取器名稱 :.f4, 按下確定後, Font-family: 標楷體 Font-size:24px Font-weight:bold Color:#0000FF Font-style:italic ( 四 ) 設定吉他社社史網頁 guitar_history.html 課本 1-24 網頁背景圖片 0101.jpg 網頁最上方呈現 吉他社社史, 字型大小 18px (size=4) 標楷體 顏色 #FF0000, 水平置中對齊 1. 開啟軟體 DreamWeaver, 打開 C:\web01\guitar_history.html 2.HTML 頁面屬性, 設定外觀 (HTML): (1) 背景影像 : 點下瀏覽, 選取 C:\web01\images\0101.jpg (2) 左邊界 :0, 上邊界 :0 3. 按下 10 個 Enter 4. 滑鼠點第一行, 格式 對齊 置中對齊 5. 複製 ( Ctrl + C ) 文字吉他社社史貼上 ( Ctrl +V ) 並選取文字 : 吉他社社史 CSS 編輯規則 : 選取器名稱 :.f1, 按下確定後, Font-family: 標楷體 Font-size:18px Color:#FF0000 吉他社社史 文字下方製作一個 1 3( 一列三欄 ) 表格, 不顯示框線, 水平置中對齊 1. 滑鼠點第二行, 插入 表格 : (1) 列 :1, 欄 :3 (2) 表格寬度 :100 百分比 (3) 邊框粗細 :0 儲存格內距及儲存格間距:0 (4) 在儲存格中按右鍵 表格 選取表格, 對齊 : 置中對齊 第 2 頁
表格第一列第一欄輸入文字 回社團介紹首頁, 水平置中對齊, 並設定超連結到首頁, 目標頁在 _top 中開啟, 不得在網頁內容區中顯示整個首頁內容, 而導致區塊中再分割, 造成畫面混亂 1. 選取全部儲存格, 設定水平 : 置中對齊 垂直 : 置中對齊 2. 第一欄複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字回社團介紹首頁 3. 選取 回社團介紹首頁, 點選 HTML, 設定 連結 :index.html, 目標 :_top 表格第一列第二欄輸入文字 吉他社近期活動公告, 水平置中對齊, 並設定超連結到 guitar_event.htm(l) 網頁, 在網頁內容區顯示 1. 第二欄複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字吉他社近期活動公告 2. 選取 吉他社近期活動公告, 點選 HTML, 設定 連結 :guitar_event.html, 目標 :imain 表格第一列第三欄輸入文字 吉他社教學內容, 水平置中對齊, 並設定超連結到 guitar_learning.htm(l) 網頁, 在網頁內容區顯示 1. 第三欄複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字吉他社教學內容 2. 選取 吉他社教學內容, 點選 HTML, 設定 連結 :guitar_learning.html, 目標 :imain * 檔案 另存新檔成 guitar_event.html 及 guitar_learning.html 表格下方匯入檔案 0101.txt 內含之文字, 字型大小 16px (medium size=3) 標楷體 靠左對齊 顏色 #FF0000 1. 開啟 0101.txt 文字檔, 全選 ( Ctrl + A ) 複製 ( Ctrl + C ) 全部文字 2. 切換回 guitar_history.html, 滑鼠點選第四行, 貼上 ( Ctrl +V ) 3. 選取貼上之文字 : CSS 編輯規則 : 選取器名稱 :.f2, 按下確定後, Font-family: 標楷體 Font-size:16px Color:#FF0000 ( 五 ) 設定吉他社近期活動公告網頁 guitar_event.html 課本 1-26 網頁最上方呈現 吉他社近期活動公告, 字型大小 18px (size=4) 標楷體 顏色#FF0000, 水 平置中對齊 1. 開啟軟體 DreamWeaver, 打開 C:\web01\guitar_event.html 2. 將 吉他社社史 更改為 吉他社近期活動公告 表格第一列第二欄輸入文字 吉他社社史, 水平置中對齊, 並設定超連結到 guitar_history.htm(l) 網頁, 在網頁內容區顯示 1. 第二欄複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字吉他社社史 2. 選取 吉他社社史, 點選 HTML, 設定 連結 :guitar_hisgory.html, 目標 :imain 第 3 頁
表格下方再製作一個 1 4( 一列四欄 ) 表格, 框線 0px, 水平置中對齊, 每一欄儲存格內分別依序匯入檔案 0102.txt 內含之日期, 並且以書籤的方式設定連結到該活動日期之段落, 使其能移到最上方呈現 1. 滑鼠點第四行, 插入 表格 : (1) 列 :1, 欄 :4 (2) 表格寬度 :100 百分比 (3) 邊框粗細 :0 儲存格內距及儲存格間距:0 (4) 在儲存格中按右鍵 表格 選取表格, 對齊 : 置中對齊 2. 選取全部儲存格, 設定水平 : 置中對齊 垂直 : 置中對齊 3. 表格內各欄文字如下 : 第一欄 九月十六日, 第二欄 十月三十一日, 第三欄 十二月二十五日, 第四欄 元月一日 與上面表格間隔一空白段落, 製作一個 5 2( 五列二欄 ) 表格, 框線 0px, 水平置中對齊 1. 滑鼠點第六行, 插入 表格 : (1) 列 :5, 欄 :2 (2) 表格寬度 :100 百分比 (3) 邊框粗細 :0 儲存格內距及儲存格間距:0 (4) 在儲存格中按右鍵 表格 選取表格, 對齊 : 置中對齊 2. 選取第一欄設定欄寬 90%, 第二欄設定欄寬 10% 表格第一欄儲存格由上至下依照檔案 0102.txt 中近期活動日期內容( 含 近期活動 文字 ), 依日期順序分別填入相關內容於各儲存格, 字型大小 16px (medium size=3) 標楷體 顏色分別為 : 第一列第一欄顏色 #800000 第二列第一欄顏色#0000FF 第三列第一欄顏色#FF0000 第四列第一欄顏色 #00FF00 第五列第一欄顏色#000000 1. 將 0102.txt 內的文字整理至表格各列第一欄 2. 設定表格內之錨點 : (1) 表格第二列第一欄日期前方, 插入 命名錨點 (Ctrl + Alt + A ), 錨點名稱 :d0916 (2) 表格第三列第一欄日期前方, 插入 命名錨點 (Ctrl + Alt + A ), 錨點名稱 :d1031 (3) 表格第四列第一欄日期前方, 插入 命名錨點 (Ctrl + Alt + A ), 錨點名稱 :d1225 (4) 表格第五列第一欄日期前方, 插入 命名錨點 (Ctrl + Alt + A ), 錨點名稱 :d0101 3. 設定上方表格之超連結 : (1) 第一欄文字 九月十六日, 點選 HTML, 設定 連結 :#d0916 或插入 超連結, 連結 :#d0916 (2) 第二欄文字 十月三十一日, 設定連結 :#d1031 (3) 第三欄文字 十二月二十五日, 設定連結 :#d1225 (4) 第四欄文字 元月一日, 設定連結 :#d0101 4. 設定表格內之文字樣式 : (1) 選取表格第一列第一欄全部文字 近期活動, CSS 編輯規則 : 選取器名稱 :.f2, 按下確定後, Font-family: 標楷體 Font-size:16px Color:#800000 第 4 頁
(2) 選取表格第二列第一欄全部文字 日期 : 九月十六日., CSS 編輯規則 : 選取器名稱 :.f3, 按下確定後, Font-family: 標楷體 Font-size:16px Color:#0000FF * 依此類推完成其它文字之 CSS 設定 f4 f5 f6 表格第二欄之二到五列儲存格輸入文字 TOP, 顏色自訂, 並且設定使其能跳回此網頁最上方 1. 滑鼠點到網頁第一行第一個字前方, 插入 命名錨點, 錨點名稱 :top 2. 表格第二列第二欄輸入文字 TOP, 3. 選取 TOP, 點選 HTML, 設定 連結 :#top 4. 複製 ( Ctrl + C ) 已完成連結之 TOP, 至其它列之第二欄貼上 ( Ctrl + V ) ( 六 ) 設定吉他社教學內容網頁 guitar_learning.html 課本 1-28 網頁最上方呈現 吉他社教學內容, 字型大小 18px (size=4) 標楷體 顏色#00FFFF, 水平置中對齊 1. 開啟軟體 DreamWeaver, 打開 C:\web01\guitar_learning.html 2. 將 吉他社社史 更改為 吉他社教學內容 3. 點選 CSS 樣式 中的 f1, 更改 color 屬性 :#00FFFF 表格第一列第二欄輸入文字 吉他社社史, 水平置中對齊, 並設定超連結到 guitar_history.htm(l) 網頁, 在網頁內容區顯示 表格第一列第三欄輸入文字 吉他社近期活動公告, 水平置中對齊, 並設定超連結到 guitar_event.htm(l) 網頁, 在網頁內容區顯示 1. 複製 ( Ctrl + C ) 第二欄 吉他社近期活動公告 至第三欄貼上 ( Ctrl + V ) 2. 第二欄複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字吉他社社史 3. 選取 吉他社社史, 點選 HTML, 設定 連結 :guitar_hisgory.html, 目標 :imain 表格下方匯入檔案 0103.txt 內含之文字, 並將各文字所述之教學項目製作成文字按鈕, 按鈕間需有空白分隔, 且滑鼠移入時以動態效果呈現 1. 滑鼠點第四行, 插入 表單 表單 2. 插入 表單 按鈕, 格式 對齊 置中對齊 3. 新增 CSS 規則, (1) 選取器類型 : 類別 (2) 名稱 :b1 (3) 設定方框 :Width:200px,Height:25px 第 5 頁
4. 選取上述之按鈕, 套用 b1 之設定 5. 複製 10 個已完成之按鈕, 一行一個按鈕, 並依序更改其 值 為 0103.txt 內含之文字, 如圖所示 ( 七 ) 設定頁尾版權區 index.html 課本 1-30 顯示的文字內容為 網頁設計及維護 :XX (XX: 崗位號碼, : 應檢人姓名 ) 文字字型為標楷體 文字顏色為 #000000, 水平置置中對齊 1. 開啟軟體 DreamWeaver, 打開 C:\web01\index.html 2. 選取最下方空白儲存格, 設定 : 水平置中對齊 垂直 : 置中對齊 3. 複製 ( Ctrl + C ) 及貼上 ( Ctrl +V ) 文字網頁設計. 4. 選取文字 : 網頁設計及維護 :01 CSS 編輯規則 : 選取器名稱 :.f4, 按下確定後, Font-family: 標楷體 Font-size:16px Color:#000000 課程學習心得 : 上傳作業 : 資三甲座號姓名 web01.zip,ftp 位址 :192.168.2.45, 帳號 :user01, 上傳至 upload 資料夾 第 6 頁