網頁設計丙檢-題組補充 莊雅如 編

目錄 題組一 （一）建立資料夾及設定網站伺服器 （二）建立框架 （三）title.htm （四）menu.htm （五）main.htm （六）guitar_history.htm （七）guitar_event.htm （八）guitar_learning.htm 題組二 題組三 題組四 題組五 題組六 其他注意事項

（一）開啟網站1 Frontpage→開啟網站→在C:\建立WEB01

開啟網站2 或是在C:\建立WEB01，用開啟網站

注意 當左邊的資料夾清單不見時，請按「切換窗格」 在資料夾清單中，可按F5重新整理

新增資料夾及網頁 把題目的資料檔複製，在WEB01中貼上 新增資料夾music、guitar、homepage 新增網頁guitar_history.htm、guitar_event.htm等

開啟框架

首頁標題更改 按新增網頁後，存檔。 存成上框架title.htm、左框架menu.htm、主框架main.htm 全部存為index.htm，並改網頁標題。

（一）完成 根據題目要求 把檔案分別放入資料夾當中 設定iis 我的電腦/右鍵/管理/ 服務與應用程式/IIS/網站/ 預設Web站台 （內容） 點選主目錄，瀏覽， 選C:\ WEB01，按確定， 即設定完成。

（二）完成 更改框架名稱 在框架網頁中按右鍵 設定title高度為69像素 設定menu寬度為30% 查看0101.jpg圖片內容 高度為69 更改框架名稱 在框架網頁中按右鍵 設定title高度為69像素 設定menu寬度為30%

（三）title.htm 按右鍵選網頁內容

（三）title.htm

（三）title.htm （5）水平置中、垂直置中（插入表格、設定儲存格內容）

（三）title.htm 先拖曳0101.jpg 插入圖片 按右鍵 設定替代文字

（三）title.htm

（三）title.htm完成 （5）設定動態效果

（四）menu.htm （1）網頁背景顏色#FFFF00（黃） →右鍵「網頁內容」→設定格式 ※971001版變更

（四）menu.htm 拖曳0105.jpg 至表格第一列 水平置中 輸入替代文字

（四）menu.htm

（四）menu.htm

（四）menu.htm 輸入文字、顏色「綠」色，水平置中 輸入「最近更新日期：」（不要打錯字） 輸入應檢當天的日期（注意系統日期是否有誤） ※最近更新日期與當天日期（輸入成一行） 顏色藍色，水平置中

※因超連結後，字型顏色要變成綠色，所以超連結時要選「樣式」→「格式」選「字型」，設定字型色彩為00FF00綠色 ※另解：把menu的網頁內容，已瀏覽、未瀏覽、使用中均改成綠色 2 1 4 3

（四）menu.htm完成

（五）main.htm

（五）main.htm (1)插入表格1*2，框線大小0 (2)拖曳0106.jpg至左邊儲存格內 (3)圖片按右鍵→圖片內容→保持比例勾掉→寬度100、高度126

（五）main.htm (1)在右邊儲存格中輸入文字（一個字錯扣一分。）※輸入完再檢查一次，看有無錯字。 (2)設定文字格式。 Shift+Enter (1)在右邊儲存格中輸入文字（一個字錯扣一分。）※輸入完再檢查一次，看有無錯字。 (2)設定文字格式。

（五）main.htm 插入→水平線→水平線按右鍵（水平線內容）→更改其高度5、對齊方式「中」與顏色「藍」

（五）main.htm完成

（六）guitar_history.htm 在guitar_history網頁按右鍵→網頁內容

（六）guitar_history.htm

（六）guitar_history.htm 插入表格→1*3→框線大小「0」→設定儲存格：置中對齊→輸入文字

（六）guitar_history.htm

（六）guitar_history.htm 自行鍵入main Guitar_learning.htm同樣步驟處理。

（六）guitar_history.htm (1)點選0101.txt開啟 (2)全選內容Ctrl+A→複製Ctrl+C (4)設定字型

（六）guitar_history.htm完成

（七）guitar_event.htm 請參考本投影片28-31 字勿打錯「吉他社近期活動公告」 或將做好的guitar_history另存新檔為guitar_event，再修改其超連結與文字內容。

（七）guitar_event.htm 請參考本投影片32 字勿打錯「吉他社社史」、「吉他社教學內容」 超連結記得連對，目標框架為main要自己key

（七）guitar_event.htm (1)在1*3表格下enter，插入表格1*4，再按enter插入表格5*2 (2)開啟0102.txt，全選複製在5*2表格，依題目規定擺放在第一欄的各列當中 (3)複製4個日期至1*4表格中，並「置中對齊」

（七）guitar_event.htm 設定書籤 (1) 選取吉他社近期活動公告，插入→書籤 (2)同樣方法設定 5*2表格中的4個日期 日期：九月十六日 日期：十月三十一日 日期：十二月二十五日 日期：元月一日

（七）guitar_event.htm 書籤超連結 (1)選取1*4表格中，九月十六日按超連結，選書籤 (2)以同樣方法設定其他3個日期超連結

（七）guitar_event.htm 選取每一列第一欄的文字，更改其指定的顏色。

（七）guitar_event.htm (1)在第一列第2欄輸入「TOP」，按超連結鈕連結至：這份文件中的位置，書籤：「吉他社近期活動公告」

（七）guitar_event.htm完成 設定書籤 設定超連結到書籤 設定書籤 設定超連結到書籤

（八）guitar_learning.htm 請參考本投影片28-31 字勿打錯「吉他社教學內容」 或將做好的guitar_history另存新檔為guitar_learning，再修改其超連結與文字內容。

（八）guitar_learning.htm 請參考本投影片32 字勿打錯「吉他社社史」、「吉他社近期活動公告」 超連結記得連對，目標框架為main要自己key

（八）guitar_learning.htm (1)開啟0103.txt出現警示方塊，請選「繁體中文(big5)」，複製內容貼上guitar_learning中。 (2)插入Web元件，選互動式按鈕。

（八）guitar_learning.htm (3)打入文字「基礎樂理」，按鈕類型可自由選擇 (4)圖像，請選寬度200。按確定。

（八）guitar_learning.htm (5)複製第1個動態按鈕，貼上12個。共13個按鈕 (6)複製第二個文字，選第二個按鈕，按二下，更改其文字內容。依次完成其他按鈕。

（八）guitar_learning.htm完成 ※注意： (1)按鈕之間需有空白間隔 (2)存檔時，圖片檔請存在images當中。

題組二（五） ※注意：選取所有儲存格：水平、垂直置中

題組二（八） ※注意：先插入表單，將插入點置於表單內，再插入表格

題組二（八） ※注意： (1)選取第一欄儲存格：水平、垂直置中。 (2)選取第二欄儲存格：水平置左、垂置置中

題組二（八）

題組二（八）

題組二（八）

題組三（四） 題組三（六） ※注意：表格中0306,0304,0303為gif格式，要另存成jpg格式才會正常顯示。 「陽明山國家公園」位處臺北盆地北緣，東起磺(ㄏㄨㄤˊ)嘴山、五指山東側，西至向天山、面天山西麓(ㄌㄨˋ)，北迄(ㄑㄧˋ)竹子山、土地公嶺，南迨(ㄉㄞˋ)紗帽山南麓，面積約11455公頃；海拔高度自200公尺至1120公尺範圍不等。 ※注意：字不要打錯，要檢查。

題組三（五） ※注意：在工具列空白處按右鍵，叫出圖片工具列

題組四（三） 0401.JPG高度

題組四（三） ※注意：先插入表格，將圖片放在左邊儲存格，文字打在右邊儲存格 選取表格，選擇儲存格內容（垂直對齊方式選中）

題組四（四） ※注意：先插入表單，再插入表格

題組四（四） ※注意：甲牌冷氣機3個按鈕群組名稱設為R1，乙牌3個按鈕設為R2

題組四（六）（七） ※注意：圖片設書籤，TOP超連結至書籤

題組五（二）

題組六（三） ※注意：利用表格做垂直置中

題組六（五） ※注意：不用像題組一要做表格。直接插入圖片，鍵入文字即可。

其他注意事項 （一）檔案放在指定的資料夾 （二）首頁標題與框架（有無框線） （三）title、menu、main ※英文大小寫視為不同，請依動作要求輸入 超連結（在main框架開啟） 圖片的替代文字 水平置中與垂直置中（利用表格製作） 顏色設定不要錯 字不要打錯（一個字扣一分） 文字敘述看仔細