十二月 14, 2006

940303講義

973-講義web03.doc


Main.htm

(main)

title.htm (title)

Menu.htm

(menu)

第一階段:工作環境設定

1. 安裝網頁製作軟體 (只安裝 FrontPage)

2. 設定網站資料夾  (建立目錄 C:WEB□□)

3. 設定 IIS (設定網站伺服器)
開啟個人IIS/預設的網站/右鍵,內容/主目錄/本機路徑,設為c:web03)

4. 設定螢幕解析度 800 x 600

第二階段:網頁設計 (第三類 國家公園介紹網站 00303,900307,900311,900315,900319)

開啟網站 (啟動 FrontPage/檔案/開啟Web/設至C:WEB□□)

1. 建立資料夾與空白網頁及匯入檔案建立資料夾homepage images music homepage 下建立 title.htm menu.htm main.htmimages 下匯入 0301.gif ……0313.gif 及國家公園介紹網站.jpgmusic 下匯入 0301.midWEB□□ 下建立aa.htm bb.htm cc.htm dd.htm及匯入 php.exe

2. 設計網頁內容

第三階段:網站測試

1. 啟動 Inetrnet Explorer 瀏覽器

2. 在網址列輸入 http://localhost http://127.0.0.1

3. 檢查網頁內容
依試題要求檢查各個網頁內容、超連結、動態效果等

網頁設計

建立框架頁 index.htm (巢狀層次),標題:國家公園介紹網站

設定框架名稱,分別設定 title menu main (框架上按右鍵→框架內容)

² title.htm

PhotoImpact 調整0308.gif ~ 0313.gif任選三張,調整圖片大小一致(以最小為基準)→選0308.gif, o310.gif, 0212.gif →寬150,高109

插入→元件→橫幅廣告管理員→設定寬150、高109、新增(三張圖)、連結至(index.htm)

設定網頁背景及網頁邊界,背景0000ff,邊界上0,左0 (右鍵→網頁內容→背景→邊界)

框架高度,109 像素 (右鍵→框架內容)

² menu.htm

設定網頁背景,背景ff00ff (右鍵→網頁內容→背景)

PhotoImpact製作圖形按鈕,分別製作玉山國家公園、太魯閣國家公園、陽明山國家公園、墾丁國家公園

開新影像→使用者自訂→像素寬100,高20,自訂色彩00ff00

按文字工具→大小14→色彩黑,輸入「玉山國家公園」,按挑選工具,工具列→物件→對齊→水平垂直皆置中,另存新檔 01.jpg,工具列→編輯→填充→00ffff,另存02.jpg

按文字工具→雙按「玉山」→修改為「太魯閣國家公園」,按挑選工具,工具列→物件→對齊→水平垂直皆置中,另存新檔 04.jpg,工具列→編輯→填充→00ff00,另存03.jpg

按文字工具→雙按「太魯閣」→修改為「陽明山國家公園」,按挑選工具,工具列→物件→對齊→水平垂直皆置中,另存新檔 05.jpg,工具列→編輯→填充→00ff00,另存06.jpg

按文字工具→雙按「陽明山」→修改為「墾丁國家公園」,按挑選工具,工具列→物件→對齊→水平垂直皆置中,另存新檔 08.jpg,工具列→編輯→填充→00ff00,另存07.jpg

表格→插入→表格→列7,欄1,框線大小0

點選第1列→插入→圖片→從檔案→選01.jpg

點選圖片→格式→動態的HTML效果→滑鼠移過→交換圖片→02.jpg

圖片按右鍵→圖片內容→替代顯示文字→玉山國家公園

圖片按右鍵→超連結內容→aa.htm→目標框架 main

點選第3列→插入→圖片→從檔案→選03.jpg

點選圖片→格式→動態的HTML效果→滑鼠移過→交換圖片→04.jpg

圖片按右鍵→圖片內容→替代顯示文字→太魯閣國家公園

圖片按右鍵→超連結內容→bb.htm→目標框架 main

點選第5列→插入→圖片→從檔案→選05.jpg

點選圖片→格式→動態的HTML效果→滑鼠移過→交換圖片→06.jpg

圖片按右鍵→圖片內容→替代顯示文字→陽明山國家公園

圖片按右鍵→超連結內容→cc.htm→目標框架 main

點選第7列→插入→圖片→從檔案→選07.jpg

點選圖片→格式→動態的HTML效果→滑鼠移過→交換圖片→08.jpg

圖片按右鍵→圖片內容→替代顯示文字→墾丁國家公園

圖片按右鍵→超連結內容→dd.htm→目標框架 main

246列插入一全型空白

表格外最下方,輸入「檔案下載」,按右鍵→超連結內容→php.exe

² main.htm

右鍵→網頁內容→一般→背景聲音 music301.mid,背景→背景圖片images301.jpg

第一行輸入,「歡迎進入國家公園介紹網,本站有詳細的國家公園介紹哦!」,選取文字內容,插入→元件→跑馬燈

插入→圖片→從檔案→選國家公園全圖.jpg”→按置中鈕

圖片工具列→矩形→框選玉山國家公園→超連結至aa.htm→目標框架 main

矩形→框選太魯閣國家公園→超連結至bb.htm→目標框架 main

矩形→框選陽明山國家公園→超連結至cc.htm→目標框架 main

矩形→框選墾丁國家公園→超連結至dd.htm→目標框架 main

圖形下方,輸入最近更新日期:2006/3/23”,按Enter

輸入資料來源:內政部營建署-台灣的國家公園網站

選取輸入的二行文字,靠左下齊→選取數字,字型設為Times New Roman

存儲並關閉網頁

² aa.htm

開啟aa.htm,插入→圖片→從檔案→選 0303.jpg→置中對齊

游標移至圖片下一行,插入→檔案,檔案類型→文字檔,選940303301.txt→開啟→有分行符號的一般段落格式,靠左對齊,數字設為 Times New Roman

下一行輸入,回首頁,選取回首頁,置中對齊,設定超連結main.htm目標框架main

² bb.htm

開啟bb.htm,插入→圖片→從檔案→選 0304.jpg→靠左對齊

游標移至圖片下一行,插入→檔案,檔案類型→文字檔,選940303302.txt→開啟→有分行符號的一般段落格式,靠左對齊,數字設為 Times New Roman

下一行輸入,回首頁,選取回首頁,靠左對齊,設定超連結main.htm目標框架main

² cc.htm

開啟cc.htm,插入→圖片→從檔案→選 0305.jpg→置中對齊

游標移至圖片下一行,插入→檔案,檔案類型→文字檔,選940303303.txt→開啟→有分行符號的一般段落格式,靠左對齊,數字設為 Times New Roman

【】中輸入以下文字,東起磺嘴山、五指山東側,西至 向天山、面天山西麓,北迄竹子山、土地公嶺,南迨紗帽山南麓,面積約11455公頃。行政區包括台北市士林、北投部份山區,及台北縣淡水、三芝、石門、金山、萬里等鄉鎮之山區

最後一行輸入,回首頁,選取回首頁,靠左對齊,設定超連結main.htm目標框架main

² dd.htm

開啟PhotoImpact並開啟0306.jpg0307.jpg,編輯→縫圖→存成0314.jpg

開啟bb.htm,插入→圖片→從檔案→選 0314.jpg→靠左對齊

游標移至圖片下一行,插入→檔案,檔案類型→文字檔,選940303304.txt→開啟→有分行符號的一般段落格式,靠左對齊,數字設為 Times New Roman

下一行輸入,回首頁,選取回首頁,靠左對齊,設定超連結main.htm目標框架main


引用URL

http://blog2.cyhs.tp.edu.tw/teacher/trackback.php?id=640
回應文章