學習個人網頁製作全過程

網頁設計是指使用標識語言(markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用户界面(GUI)的形式被用户所瀏覽。下面小編給大家分享的是學習個人網頁製作全過程，在這裏詳細的介紹了學習個人網頁製作全過程 ，希望對大家有所幫助.

　　第一講 網頁的基本知識和FrontPage入門

　　一、網頁的基本知識

　　1、網站與網頁

我們在因特網上瀏覽時，看到的每一個頁面，稱為網頁，很多網頁組成一個網站。一個網站的第一個網頁稱為主頁。主頁是所有網頁的索引頁，通過單擊主頁上的超鏈接，可以打開其他的網頁。正是由於主頁在網站中的特殊作用，人們也常常用主頁指代所有的網頁，將個人網站稱為“個人主頁”，將建立個人網站稱為“網頁製作”。

　　2、怎麼建立個人網站?

要建立一個個人網站，必須經過網頁製作、網站(頁)發佈和網站維護三個階段

　　1)網頁製作

一個網站和一本雜誌一樣，都是展示信息的載體，只有能提供他人需要信息(內容)的網站才能吸引他人訪問。這些都要靠製作有內容的網頁來完成。確定網站主題和後，製作網頁是建立個人網站的首要工作。

每個網頁基本上都是一個HTML(Hyper Text Markup Language，即超文本標識語言)文件，所以網頁文件的擴展名一般是或。主頁文件的文件名字或。

一般在電腦上寫文章使用Word、Wps等文字處理軟件，而製作網頁則可使用Frontpage等網頁製作工具。

　　2)網頁發佈

做好的網頁必須發佈到因特網上，才能被大家看到。所謂發佈到因特網上實際上就是將網頁文件放到始終與因特網聯機的計算機上，這種計算機被稱為“服務器”。實際上家裏的PC機安裝相應的服務器軟件且有固定的IP地址也可以做服務器，但一般都借用單位網站的服務器或租用一些空間提供商的服務器空間。這就和你要開商店必須租用一個場地一樣。

　　3)網站維護

網頁發佈後就可供大家訪問了，不管在什麼地方，只要是與和因特網相連的計算機都可以訪問到你的網頁。但這沒有萬事大吉。就和報紙、雜誌一樣，總是老內容，也就沒人來訪問了。需要經常更新，補充新內容。另外網頁上的錯誤也需要及時改正。實際上網站維護是網站建設的主要工作量。

　　2、什麼軟件可以做網頁?

假如，你熟悉文字處理的相關軟件，你不用專用軟件，也可以作出網頁來。比如，用Word，用Wps，甚至用你計算機附件自帶的記事本也行。不過用Word做出來的網頁體積太大，用記事本做網頁則要會用一些HTML語言，而用HTML來製作網頁是一件非常麻煩的事。FrontPage等網頁製作工具則使我們可以不必和這些難記、難懂的HTML代碼打交道就作出較好的網頁來。

初學的人，用微軟公司的frontpage比較好，它的優點是易學易懂，上手快。FrontPage是微軟公司Office系列辦公軟件中的一個，它很好地實現了主頁製作者與HTML的分離。就像在Word中編輯文本一樣，我們只需要在編輯器中輸入文本或圖片，並設置好格式，很快就可以作出一個簡單的網頁了。

除了Frontpage以外，還有許多製作網頁的軟件，如Hotdog等，其中最著名的是Macromedia公司的“網頁三劍客”即Dreamweaver(網頁製作工具)、Flash(動畫製作工具)和Fireworks(圖像編輯工具)。

假如，你有了一定基礎，還是用“網頁三劍客”好。它們是專用的網頁製作軟件，用它們製作的網頁，體積小，佔用資源少，兼容性好。

所以本講座也從FrontPage入手學習網頁製作。大家先學好FrontPage，打好基礎，如果將來準備在網頁製作方面有所發展，再學習“網絡三劍客”也不遲。

　　二、FrontPage入門

本節我們先來熟悉一下FrontPage的操作環境，瞭解界面中的基本設置。

　　1、啟動FrontPage

單擊任務欄上的“開始”菜單，將鼠標指針指向“開始”菜單中的“程序”，在“程序”子菜單中單擊“Microsoft FrontPage”，就可打開FrontPage窗口。

　　2、FrontPage的視圖欄

用過Word的朋友馬上就會發現：FrontPage窗口看起來和Word非常相似，常用工具欄和格式工具欄中許多按鈕的形狀和作用都一模一樣，具體的操作也和Word差不多，用熟Word的朋友馬上就可以在編輯區輸入編輯文字材料。中製作網頁的大部分工作都在這個環境中完成，所以我們在這裏不再對FrontPage的環境做詳細的介紹。我們將在以後的學習中再陸續介紹常用工具和菜單命令的使用。

與Word比較，在剛打開的FrontPage窗口的編輯區的左側多了一個視圖欄，該視圖欄中有6種視圖按鈕。默認情況下，網頁視圖被打開，而其他的視圖也有特殊的作用，我們將在以後用到它們。視圖欄雖然為我們編輯網頁提供了很大幫助，但由於它佔用了窗口的一部分區域，使 得我們看到的`網頁和實際的結果存在一定差異。所以，在編輯網頁的過程中，常常將視圖欄隱藏。

如，單擊“查看”菜單，在右圖所示下拉菜單中可以發現在“視圖欄”前面有一個“√”，單擊“√”將其取消，視圖欄將被隱藏。重複此項操作，視圖欄又會出現。

　　3、FrontPa9e的編輯區

編輯區是製作、編輯網頁的地方，我們將在這個區域裏進行輸入文字、插入圖片、製作表格等操作。由於與Word非常相似，多數操作都非常簡單，這些在以後的學習中將會逐漸體會到。

編輯區有三個視圖方式，分別為“普通”方式、“HTML”方式和“預覽”方式。在編輯區下左邊有三個查看標籤，可以讓用户非常方便地在這三個方式之間切換，為我們製作網頁提供了很大的幫助。

和Word的“頁面”視圖一樣，“普通”視圖方式允許我們以“所見即所得”的方式進行網頁的編輯與製作，如下圖所示。製作網頁的大部分工作都是在這個環境中完成的。

2) “HTML”方式

在“HTML”視圖方式(下圖)中顯示的是這個網頁的HTML代碼，即所謂源代碼。在這個窗口中可以像在文本編輯器裏一樣對HTML代碼進行編輯和修改。由於FrontPage功能有限，有時為了實現一些特殊效果，我們常常需要在此標籤中直接輸入HTML代碼。也可在這個視圖方式下對網頁進行優化減肥。對還不熟悉HTML的初學者，可以先不去關心它。

此視圖可以預覽可以預覽網頁在IE中的樣子，特別是當網頁中存有動態圖片或FrontPage組件時，預覽起來非常方便。

假如在這裏還覺得效果與IE中不一樣，為保證所製作的網頁在IE瀏覽器中的整體效果，也可以單擊“文件”菜單，在彈出的菜單中選擇“在瀏覽器中預覽”，從而打開瀏覽器進行預覽。