《網頁製作研習》word版

《《網頁製作研習》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

2、TML:使用網頁編輯語法,如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資料夾中(2)在資料夾清單中將圖片拖曳出來,圖片即呈現在

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

6、使用方法如下:1.點選表格/插入/表格,會出現相對應的對話視窗,接著選擇所需要的欄列數目即可出現表格!1.設定表格格式:只要在表格裡面任一位置,按下滑鼠右鍵,選擇表格內容,就會出現相對應的表格格式設定視窗可供設定2.將文字或者圖片放到儲存格中,可以很整齊的排版3.範例製作(圖片管理):(1)先插入一個五列三欄的表格(2)將第一列都選取起來,按下滑鼠右鍵,點選合併儲存格,並在其中打上標題文字(3)將一張圖片放到第二列的第一個儲存格中,可以發現圖片很大,此時選擇圖片,在相對應的視窗中,點選自動影像目錄標籤,即可將圖片變成一個目錄檔,如果

7、要看他原來大小的圖像,只要在瀏覽器瀏覽的模式下,點選這個目錄圖片即可!(因為它已經自動幫你設定好圖片的超連結了!)(4)將每個儲存格都放入圖片,並設定成自動影像目錄標籤(5)如果覺得每個目錄大小不一很難看,可以在每個影像目錄上面按下右鍵/圖片內容/外觀/指定大小,輸入固定的寬高即可!