網頁製作研習

1、.網頁製作研習講師 : 李鳳茹 助教 : 林宗義一、 FrontPage介面認識 : 1. 網頁檢視模式切換區 :這裡共分五種檢視模式 :1. 網頁檢視模式 :2. 資料夾檢視模式 :3. 報告檢視模式 :4. 導覽檢視模式 :5. 超連結檢視模式 :6. 工作檢視模式 :2. 資料夾清單 : 顯示出目前正在編輯之網站下所有的檔案(包括網頁檔, 聲音, flash動畫等)3. 功能列 : 4. 工具列 : 編輯網頁時所用的各項工具以及性能, 與word工具列性質雷同5. 網頁編輯區域 : 在此處可以編輯網頁6. 網頁編輯模式切換區 : 1. 一般 : 在此編輯模式, 我們可以直接編輯網頁, 一

2、切都是視覺化的去製作網頁2. HTML : 使用網頁編輯語法, 如HTML、JavaScript、PHP等程式語言編輯網頁3. 預覽 : 可以看到所製作的網頁在瀏覽器中呈現的樣子( 但有時會有誤差, 所以最好是用真正的瀏覽器瀏覽 )二、 製作網頁架構 : 當我們要作一個網站前, 一定要規劃好整個架構, 就如同我們在作活動前一定要先有個完整的計畫, 之後才能著計畫的進度作, 網站架構也是一樣的意思, 如下圖, 就是一個製作好的架構圖 製作方法 :1. 點選 檔案 / 新增 / Web / 單頁Web2. 點選 導覽檢視模式 3. 一開始只有一個首頁存在, 在首頁上面按下滑鼠右鍵, 選擇開新網頁,

3、 就可以新增一個新的網頁在首頁下面, 接著在新增的網頁上按右鍵, 選擇重新命名, 將名稱改成此頁面的主題, 其他網頁的新增都是依此類推4. 範例製作 : 製作一個教學網站的架構!三、 網頁文字編輯 : 1. 在網頁編輯區域中按一下滑鼠左鍵, 出現游標後即可開始編輯文字, 換行是按Shift+Enter, 按enter則是換一個段落的意思2. 改變文字顏色大小 : 點選 格式 / 字型 就會出現對話視窗供更改3. 範例製作 :(1) 將課堂提供之文字原始檔的文字複製之後, 貼上自己的網頁(2) 將標題文字反白, 點選 格式 / 字型, 編輯它的大小以及顏色位置(3) 將滑鼠游標放在各食物分類前面

4、, 點選 插入 / 水平線, 將各段落以水平線區隔, 會比較清楚(4) 將各燈號食物下面的所有食物全部反白, 點選 格式 / 項目符號及編號, 增加項目符號(5) 其他文字設定依照清楚易懂且美觀的原則進行設定即可!四、 網頁圖片編輯 :1. 要在網頁上放我們要放入的圖片, 有以下兩種做法 :(1) 點選 插入 / 圖片 / 從檔案(2) 直接將所有要用到的圖片先放到網站中images資料夾中即可!2. 插入圖片後, 只要選擇圖片, 就會出現相對應的視窗, 可以更改圖片的一些格式, 此時可以不用先修改3. 範例製作 :(1) 先製作好(抓好)自己所需的圖片, 將這些圖片存在images資料夾中(

5、2) 在資料夾清單中將圖片拖曳出來, 圖片即呈現在網頁上片, (3) 點選圖片, 可以發現圖片四周會有八個點, 那是可以改變圖片大小的地方, 我們先將圖片調整成適當大小(4) 點選圖片, 會出現相對應的圖片屬性視窗, 可依照自己的需要進行些微的修改(5) 在圖片下面編輯解說文字即完成!五、 超連結設定 : 超連結可說是網頁最基本的連結能力, 它可以將各個網頁連接起來, 是很重要的功能, 其設定方法如下 :1. 文字超連結設定 : 將要設定連結的文字反黑, 點選 插入 / 超連結, 即可設定2. 圖片超連結設定 : 同上六、 表格製作 : 表格在網頁中最大的功用不是在於單純的呈現表格資料, 而是

6、用來定位以及排版, 讓網頁整體呈現的感覺整齊不雜亂, 使用方法如下 :1. 點選 表格 / 插入 / 表格, 會出現相對應的對話視窗, 接著選擇所需要的欄列數目即可出現表格!2. 設定表格格式 : 只要在表格裡面任一位置, 按下滑鼠右鍵, 選擇表格內容, 就會出現相對應的表格格式設定視窗可供設定3. 將文字或者圖片放到儲存格中, 可以很整齊的排版4. 範例製作( 圖片管理 ) : (1) 先插入一個五列三欄的表格(2) 將第一列都選取起來, 按下滑鼠右鍵, 點選合併儲存格, 並在其中打上標題文字(3) 將一張圖片放到第二列的第一個儲存格中, 可以發現圖片很大, 此時選擇圖片, 在相對應的視窗中, 點選自動影像目錄標籤, 即可將圖片變成一個目錄檔, 如果要看他原來大小的圖像, 只要在瀏覽器瀏覽的模式下, 點選這個目錄圖片即可! ( 因為它已經自動幫你設定好圖片的超連結了!