學(xué)習(xí)個(gè)人網(wǎng)頁(yè)制作全過(guò)程
網(wǎng)頁(yè)設(shè)計(jì)是指使用標(biāo)識(shí)語(yǔ)言(markup language)，通過(guò)一系列設(shè)計(jì)、建模、和執(zhí)行的過(guò)程將電子格式的信息通過(guò)互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。下面小編給大家分享的是學(xué)習(xí)個(gè)人網(wǎng)頁(yè)制作全過(guò)程，在這里詳細(xì)的介紹了學(xué)習(xí)個(gè)人網(wǎng)頁(yè)制作全過(guò)程 ，希望對(duì)大家有所幫助.
第一講 網(wǎng)頁(yè)的基本知識(shí)和FrontPage入門
一、網(wǎng)頁(yè)的基本知識(shí)
1、網(wǎng)站與網(wǎng)頁(yè)
我們?cè)谝蛱鼐W(wǎng)上瀏覽時(shí)，看到的每一個(gè)頁(yè)面，稱為網(wǎng)頁(yè)，很多網(wǎng)頁(yè)組成一個(gè)網(wǎng)站。一個(gè)網(wǎng)站的第一個(gè)網(wǎng)頁(yè)稱為主頁(yè)。主頁(yè)是所有網(wǎng)頁(yè)的索引頁(yè)，通過(guò)單擊主頁(yè)上的超鏈接，可以打開(kāi)其他的網(wǎng)頁(yè)。正是由于主頁(yè)在網(wǎng)站中的特殊作用，人們也常常用主頁(yè)指代所有的網(wǎng)頁(yè)，將個(gè)人網(wǎng)站稱為“個(gè)人主頁(yè)”，將建立個(gè)人網(wǎng)站稱為“網(wǎng)頁(yè)制作”。
2、怎么建立個(gè)人網(wǎng)站?
要建立一個(gè)個(gè)人網(wǎng)站，必須經(jīng)過(guò)網(wǎng)頁(yè)制作、網(wǎng)站(頁(yè))發(fā)布和網(wǎng)站維護(hù)三個(gè)階段
1)網(wǎng)頁(yè)制作
一個(gè)網(wǎng)站和一本雜志一樣，都是展示信息的載體，只有能提供他人需要信息(內(nèi)容)的網(wǎng)站才能吸引他人訪問(wèn)。這些都要靠制作有內(nèi)容的網(wǎng)頁(yè)來(lái)完成。確定網(wǎng)站主題和后，制作網(wǎng)頁(yè)是建立個(gè)人網(wǎng)站的首要工作。
每個(gè)網(wǎng)頁(yè)基本上都是一個(gè)HTML(Hyper Text Markup Language，即超文本標(biāo)識(shí)語(yǔ)言)文件，所以網(wǎng)頁(yè)文件的擴(kuò)展名一般是.HTM或.HTML。主頁(yè)文件的文件名字index.htm或index.html。
一般在電腦上寫文章使用Word、Wps等文字處理軟件，而制作網(wǎng)頁(yè)則可使用Frontpage等網(wǎng)頁(yè)制作工具。
2)網(wǎng)頁(yè)發(fā)布
做好的網(wǎng)頁(yè)必須發(fā)布到因特網(wǎng)上，才能被大家看到。所謂發(fā)布到因特網(wǎng)上實(shí)際上就是將網(wǎng)頁(yè)文件放到始終與因特網(wǎng)聯(lián)機(jī)的計(jì)算機(jī)上，這種計(jì)算機(jī)被稱為“服務(wù)器”。實(shí)際上家里的PC機(jī)安裝相應(yīng)的服務(wù)器軟件且有固定的IP地址也可以做服務(wù)器，但一般都借用單位網(wǎng)站的服務(wù)器或租用一些空間提供商的服務(wù)器空間。這就和你要開(kāi)商店必須租用一個(gè)場(chǎng)地一樣。
3)網(wǎng)站維護(hù)
網(wǎng)頁(yè)發(fā)布后就可供大家訪問(wèn)了，不管在什么地方，只要是與和因特網(wǎng)相連的計(jì)算機(jī)都可以訪問(wèn)到你的網(wǎng)頁(yè)。但這沒(méi)有萬(wàn)事大吉。就和報(bào)紙、雜志一樣，總是老內(nèi)容，也就沒(méi)人來(lái)訪問(wèn)了。需要經(jīng)常更新，補(bǔ)充新內(nèi)容。另外網(wǎng)頁(yè)上的錯(cuò)誤也需要及時(shí)改正。實(shí)際上網(wǎng)站維護(hù)是網(wǎng)站建設(shè)的主要工作量。
2、什么軟件可以做網(wǎng)頁(yè)?
假如，你熟悉文字處理的相關(guān)軟件，你不用專用軟件，也可以作出網(wǎng)頁(yè)來(lái)。比如，用Word，用Wps，甚至用你計(jì)算機(jī)附件自帶的記事本也行。不過(guò)用Word做出來(lái)的網(wǎng)頁(yè)體積太大，用記事本做網(wǎng)頁(yè)則要會(huì)用一些HTML語(yǔ)言，而用HTML來(lái)制作網(wǎng)頁(yè)是一件非常麻煩的事。FrontPage等網(wǎng)頁(yè)制作工具則使我們可以不必和這些難記、難懂的HTML代碼打交道就作出較好的網(wǎng)頁(yè)來(lái)。
初學(xué)的人，用微軟公司的frontpage比較好，它的優(yōu)點(diǎn)是易學(xué)易懂，上手快。FrontPage是微軟公司Office系列辦公軟件中的一個(gè)，它很好地實(shí)現(xiàn)了主頁(yè)制作者與HTML的分離。就像在Word中編輯文本一樣，我們只需要在編輯器中輸入文本或圖片，并設(shè)置好格式，很快就可以作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)了。
除了Frontpage以外，還有許多制作網(wǎng)頁(yè)的軟件，如Hotdog等，其中最著名的是Macromedia公司的“網(wǎng)頁(yè)三劍客”即Dreamweaver(網(wǎng)頁(yè)制作工具)、Flash(動(dòng)畫制作工具)和Fireworks(圖像編輯工具)。
假如，你有了一定基礎(chǔ)，還是用“網(wǎng)頁(yè)三劍客”好。它們是專用的網(wǎng)頁(yè)制作軟件，用它們制作的網(wǎng)頁(yè)，體積小，占用資源少，兼容性好。
所以本講座也從FrontPage入手學(xué)習(xí)網(wǎng)頁(yè)制作。大家先學(xué)好FrontPage，打好基礎(chǔ)，如果將來(lái)準(zhǔn)備在網(wǎng)頁(yè)制作方面有所發(fā)展，再學(xué)習(xí)“網(wǎng)絡(luò)三劍客”也不遲。
二、FrontPage入門
本節(jié)我們先來(lái)熟悉一下FrontPage的操作環(huán)境，了解界面中的基本設(shè)置。
1、啟動(dòng)FrontPage
單擊任務(wù)欄上的“開(kāi)始”菜單，將鼠標(biāo)指針指向“開(kāi)始”菜單中的“程序”，在“程序”子菜單中單擊“Microsoft FrontPage”，就可打開(kāi)FrontPage窗口。
2、FrontPage的視圖欄
用過(guò)Word的朋友馬上就會(huì)發(fā)現(xiàn)：FrontPage窗口看起來(lái)和Word非常相似，常用工具欄和格式工具欄中許多按鈕的形狀和作用都一模一樣，具體的操作也和Word差不多，用熟Word的朋友馬上就可以在編輯區(qū)輸入編輯文字材料。中制作網(wǎng)頁(yè)的大部分工作都在這個(gè)環(huán)境中完成，所以我們?cè)谶@里不再對(duì)FrontPage的環(huán)境做詳細(xì)的介紹。我們將在以后的學(xué)習(xí)中再陸續(xù)介紹常用工具和菜單命令的使用。
與Word比較，在剛打開(kāi)的FrontPage窗口的編輯區(qū)的左側(cè)多了一個(gè)視圖欄，該視圖欄中有6種視圖按鈕。默認(rèn)情況下，網(wǎng)頁(yè)視圖被打開(kāi)，而其他的視圖也有特殊的作用，我們將在以后用到它們。視圖欄雖然為我們編輯網(wǎng)頁(yè)提供了很大幫助，但由于它占用了窗口的一部分區(qū)域，使 得我們看到的網(wǎng)頁(yè)和實(shí)際的結(jié)果存在一定差異。所以，在編輯網(wǎng)頁(yè)的過(guò)程中，常常將視圖欄隱藏。
如，單擊“查看”菜單，在右圖所示下拉菜單中可以發(fā)現(xiàn)在“視圖欄”前面有一個(gè)“√”，單擊“√”將其取消，視圖欄將被隱藏。重復(fù)此項(xiàng)操作，視圖欄又會(huì)出現(xiàn)。
3、FrontPa9e的編輯區(qū)
編輯區(qū)是制作、編輯網(wǎng)頁(yè)的地方，我們將在這個(gè)區(qū)域里進(jìn)行輸入文字、插入圖片、制作表格等操作。由于與Word非常相似，多數(shù)操作都非常簡(jiǎn)單，這些在以后的學(xué)習(xí)中將會(huì)逐漸體會(huì)到。
編輯區(qū)有三個(gè)視圖方式，分別為“普通”方式、“HTML”方式和“預(yù)覽”方式。在編輯區(qū)下左邊有三個(gè)查看標(biāo)簽，可以讓用戶非常方便地在這三個(gè)方式之間切換，為我們制作網(wǎng)頁(yè)提供了很大的幫助。
和Word的“頁(yè)面”視圖一樣，“普通”視圖方式允許我們以“所見(jiàn)即所得”的方式進(jìn)行網(wǎng)頁(yè)的編輯與制作，如下圖所示。制作網(wǎng)頁(yè)的大部分工作都是在這個(gè)環(huán)境中完成的。
2) “HTML”方式
在“HTML”視圖方式(下圖)中顯示的是這個(gè)網(wǎng)頁(yè)的HTML代碼，即所謂源代碼。在這個(gè)窗口中可以像在文本編輯器里一樣對(duì)HTML代碼進(jìn)行編輯和修改。由于FrontPage功能有限，有時(shí)為了實(shí)現(xiàn)一些特殊效果，我們常常需要在此標(biāo)簽中直接輸入HTML代碼。也可在這個(gè)視圖方式下對(duì)網(wǎng)頁(yè)進(jìn)行優(yōu)化減肥。對(duì)還不熟悉HTML的初學(xué)者，可以先不去關(guān)心它。
此視圖可以預(yù)覽可以預(yù)覽網(wǎng)頁(yè)在IE中的樣子，特別是當(dāng)網(wǎng)頁(yè)中存有動(dòng)態(tài)圖片或FrontPage組件時(shí)，預(yù)覽起來(lái)非常方便。
假如在這里還覺(jué)得效果與IE中不一樣，為保證所制作的網(wǎng)頁(yè)在IE瀏覽器中的整體效果，也可以單擊“文件”菜單，在彈出的菜單中選擇“在瀏覽器中預(yù)覽”，從而打開(kāi)瀏覽器進(jìn)行預(yù)覽。
【學(xué)習(xí)個(gè)人網(wǎng)頁(yè)制作全過(guò)程】相關(guān)文章：
Dreamweaver制作網(wǎng)頁(yè)模板學(xué)習(xí)教程10-07
怎樣制作網(wǎng)頁(yè) 制作網(wǎng)頁(yè)詳細(xì)操作步驟01-23
網(wǎng)頁(yè)設(shè)計(jì)制作的個(gè)人簡(jiǎn)歷范文08-17
網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)制作的流程分析07-29
如何制作網(wǎng)頁(yè)設(shè)計(jì)02-24
Dreamweaver制作網(wǎng)頁(yè)的方法02-13