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

Presentation on theme: "網頁設計丙檢-題組補充 莊雅如 編."— Presentation transcript:

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

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

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

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

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

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

7 開啟框架

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

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

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

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

12 （三）title.htm

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

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

15 （三）title.htm

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

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

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

19 （四）menu.htm

20 （四）menu.htm

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

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

23 （四）menu.htm完成

24 （五）main.htm

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

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

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

28 （五）main.htm完成

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

30 （六）guitar_history.htm

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

32 （六）guitar_history.htm

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

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

35 （六）guitar_history.htm完成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

53 題組二（八）

54 題組二（八）

55 題組二（八）

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

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

58 題組四（三） 0401.JPG高度

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

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

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

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

63 題組五（二）

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

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

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