網頁

2016年8月1日 星期一

國家公園網站的建置

教學目標:

本範例將透過「國家公園網站的建置」, 讓同學熟悉 Dreamweaver 技巧。

【好用的快速鍵】
Ctrl + C : 複製    Ctrl + V : 貼上   Ctrl +  + : 放大    Ctrl +  - : 縮小
Alt + Tab : 在二個工作視窗切換(一個是 Dreamweaver,另一個是 阿旺師磨書坊)

步驟:

1. 定義網站

網站/ 新增網站
網站名稱 : 國家公園

2. 框架式網頁的建立

打開  main.htm
插入/HTML /頁框 / 上及左巢狀
檔案/另存新頁框組  ,檔名 : index.html (可直接覆蓋原來的 index.html)
標題輸入 :國家公園介紹網

3. 頁框屬性的設定

視窗/頁框
選上頁框,頁框名稱 : title, 原始檔案 : homepage/title.htm  。請用瀏覽檔案的方式,不用手動輸入檔名。
選左頁框,頁框名稱 : menu, 原始檔案 : homepage/menu.htm
選右頁框,頁框名稱 : main,  (下面步驟不用做 ) 原始檔案 : homepage/main.htm

4. 頁框組屬性的設定

選 頁框面板 ,在最外圍的頁框組單按,  列 : 119 ,單位:像素,調整上頁框的高度
選 頁框面板 ,在下面頁框組單按,  欄 : 150 ,單位:像素,調整左頁框的寬度

5. 插入表格
選左頁框,插入/表格 ,列 :7,欄 :1,寬度 :100百分比
邊框粗細 : 0
頁首:

6. 變換影像效果的設定

移到表格第 列 ,插入 /影像物件/滑鼠變換影像
原始影像 : images /1101.jpg
滑鼠變換影像 :  images /1101A.jpg
按下時,前往的 URL : park/aa.htm
選取插入的影像(即 陽明山國家公園) , 目標 : main


移到表格第
原始影像
滑鼠變換影像
按下時,前往的 URL
目標
3
images/1102.jpg
images/1102A.jpg
park/bb.htm
Main
5
images/1103.jpg
images/1103A.jpg
park/cc.htm
Main
7
images/1104.jpg
images/1104A.jpg
park/dd.htm
Main

7. 網頁背景及音樂的設定

網頁背景圖片的設定方式:
移至 右頁框的第1行,屬性面板 /頁面屬性
外觀(CSS),背景影像 : images/back.jpg

加入背景音樂的方式 :
程式碼
<body> 的下一列
  輸入  <bgsound src=   可直接使用 「瀏覽」 的方式,找到音樂檔。
完整語法: <bgsound src="../music/1101.mid">

8. 加入跑馬燈

程式碼 鈕 加入下列文字
<marquee>
歡迎光臨國家公園介紹網,本網站有詳細的國家公園介紹哦!
</marquee>

9. 建立影像地圖

在右頁框的網頁內,選 「國家公園分佈圖」此張圖片,屬性面板 : 多邊形連結區域工具
先選好 「陽明山國家公園」的區域,完成後按 Esc。

屬性面板
「陽明山國家公園」此區域 ,連結 : park/aa.htm目標 :main
「雪霸國家公園」此區域 ,連結 : park/bb.htm目標 :main
「太魯閣國家公園」 此區域,連結 : park/cc.htm目標 :main
「墾丁國家公園」 此區域,連結 : park/dd.htm目標 :main

11.上頁框網頁中「小鹿」的圖片要超連結到首頁,即 index.html,目標 : _top
12.檔案 /全部儲存。如果沒全部做完,記得要先 「全部儲存」
13.預覽  : iexplore,預覽做出來的網頁有無問題
14. 對資料夾,按右鍵,選  7-zip / 加入 "ex2-3a.zip"上傳到自己的Google雲端硬碟作備份,
      以後還可以下載,作修改。
15.全部都正確後,將 ex2-3a.zip 重新命名為: 座號姓名.zip (如1號王小明.zip) , 再上傳到老師的Classroom。

範例資料下載

沒有留言 :

張貼留言