Download
1 / 66
660 likes | 873 Vues
網頁設計丙檢 - 題組補充. 莊雅如 編. 目錄. 題組一 （一） 建立資料夾及設定網站伺服器 （二） 建立框架 （三） title.htm （四） menu.htm （五） main.htm （六） guitar_history.htm （七） guitar_event.htm （八） guitar_learning.htm. 題組二 題組三 題組四 題組五 題組六 其他注意事項. （一）開啟網站 1. Frontpage→ 開啟網站→在 C: 建立 WEB01. 開啟網站 2. 或是在 C: 建立 WEB01 ，用開啟網站. 注意.
E N D
網頁設計丙檢-題組補充 莊雅如 編
目錄 • 題組一 （一）建立資料夾及設定網站伺服器 （二）建立框架 （三）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，按確定， • 即設定完成。
查看0101.jpg圖片內容高度為69 （二）完成 • 更改框架名稱 • 在框架網頁中按右鍵 • 設定title高度為69像素 • 設定menu寬度為30%
（三）title.htm 按右鍵選網頁內容
（三）title.htm （5）水平置中、垂直置中（插入表格、設定儲存格內容）
（三）title.htm 先拖曳0101.jpg 插入圖片 按右鍵 設定替代文字
（三）title.htm完成 （5）設定動態效果
（四）menu.htm （1）網頁背景顏色#FFFF00（黃） →右鍵「網頁內容」→設定格式 ※971001版變更
（四）menu.htm 拖曳0105.jpg 至表格第一列 水平置中 輸入替代文字
（四）menu.htm 輸入文字、顏色「綠」色，水平置中 輸入「最近更新日期：」（不要打錯字） 輸入應檢當天的日期（注意系統日期是否有誤） ※最近更新日期與當天日期（輸入成一行） 顏色藍色，水平置中
※因超連結後，字型顏色要變成綠色，所以超連結時要選「樣式」→「格式」選「字型」，設定字型色彩為00FF00綠色※另解：把menu的網頁內容，已瀏覽、未瀏覽、使用中均改成綠色※因超連結後，字型顏色要變成綠色，所以超連結時要選「樣式」→「格式」選「字型」，設定字型色彩為00FF00綠色※另解：把menu的網頁內容，已瀏覽、未瀏覽、使用中均改成綠色 2 1 4 3
（五）main.htm (1)插入表格1*2，框線大小0 (2)拖曳0106.jpg至左邊儲存格內 (3)圖片按右鍵→圖片內容→保持比例勾掉→寬度100、高度126
（五）main.htm (1)在右邊儲存格中輸入文字（一個字錯扣一分。）※輸入完再檢查一次，看有無錯字。 (2)設定文字格式。 Shift+Enter
（五）main.htm 插入→水平線→水平線按右鍵（水平線內容）→更改其高度5、對齊方式「中」與顏色「藍」
（六）guitar_history.htm 在guitar_history網頁按右鍵→網頁內容
（六）guitar_history.htm 插入表格→1*3→框線大小「0」→設定儲存格：置中對齊→輸入文字
（六）guitar_history.htm Guitar_learning.htm同樣步驟處理。 自行鍵入main
（六）guitar_history.htm (1)點選0101.txt開啟 (2)全選內容Ctrl+A→複製Ctrl+C (3)貼上在guitar_history中 (4)設定字型
（七）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」，按超連結鈕連結至：這份文件中的位置，書籤：「吉他社近期活動公告」 (2)複製「TOP」貼至下方第2-5格中，按存檔
（七）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當中。
題組二（五） ※注意：選取所有儲存格：水平、垂直置中
