第一篇：個(gè)人網(wǎng)站制作過(guò)程

個(gè)人網(wǎng)站制作過(guò)程

隨著互聯(lián)網(wǎng)的不斷發(fā)展和中國(guó)網(wǎng)絡(luò)人口的日益增長(zhǎng)，建立個(gè)人網(wǎng)站，不但可以剛好的展示自己，而且可以提高自己在計(jì)算機(jī)應(yīng)用方面的能力。我使用的軟件是Dreamweaver8,它是美國(guó)MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。Dreamweaver、FLASH以及在DREAMWEAVER之后推出的針對(duì)專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)的FIREWORKS，三者被MACROMEDIA公司稱為DREAMTEAM(夢(mèng)之隊(duì))，足見(jiàn)市場(chǎng)的反響和MACROMEDIA公司對(duì)它們的自信。隨著互聯(lián)網(wǎng)(Internet)的家喻戶曉，HTML技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁(yè)編輯器，從網(wǎng)頁(yè)編輯器基本性質(zhì)可以分為所見(jiàn)即所得網(wǎng)頁(yè)編輯器和非所見(jiàn)即所得網(wǎng)頁(yè)編輯器，兩者各有千秋。網(wǎng)頁(yè)編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，在所見(jiàn)即所得網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)制作和在WORD中進(jìn)行文本編輯不會(huì)感到有什么區(qū)別。

個(gè)人在設(shè)計(jì)時(shí)考慮的多為個(gè)人的興趣喜好，而不注重商業(yè)的展示。內(nèi)容以反映個(gè)人為中心，從而使個(gè)人網(wǎng)站真正的成為展示自己的網(wǎng)絡(luò)名片。在網(wǎng)頁(yè)制作中，我借鑒了韓國(guó)個(gè)人網(wǎng)站的設(shè)計(jì)風(fēng)格，著重于給瀏覽者以強(qiáng)烈的視覺(jué)沖擊。運(yùn)用了photoshop和fireworks強(qiáng)大的圖像制作和處理能力。進(jìn)行了大量的圖片制作，從而給人以強(qiáng)烈的美感。并利用Flash進(jìn)行片頭動(dòng)畫(huà)的制作，給予瀏覽者一種強(qiáng)烈的時(shí)代動(dòng)感。整個(gè)網(wǎng)站的架構(gòu)是由Dreamwave完成的。、在這次課業(yè)中我制作了關(guān)于自己的網(wǎng)頁(yè)，下面介紹下制作過(guò)程。首先使用Dreamweaver8來(lái)創(chuàng)建站點(diǎn)。打開(kāi)Dreamweaver8軟件，執(zhí)行站點(diǎn)-站點(diǎn)管理命令，在彈出的站點(diǎn)管理對(duì)話框中選擇新建，然后創(chuàng)建站點(diǎn)存放到我的文檔，然后設(shè)置地址為?retcode=0 3.http://junehuang111.blog.163.com/blog/static/***222144/ 4.《網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)設(shè)計(jì)大全》徐磊，清華大學(xué)出版社，2008.9

第二篇：個(gè)人網(wǎng)頁(yè)制作過(guò)程

個(gè)人網(wǎng)頁(yè)制作過(guò)程：

制作個(gè)人網(wǎng)頁(yè)的目的就是向大家介紹自己，我制作個(gè)人網(wǎng)頁(yè)的過(guò)程如下

（1）首先是熟悉并熟練一款網(wǎng)頁(yè)制作軟件的使用方法，這樣制作出來(lái)的個(gè)人主

頁(yè)才不會(huì)顯得粗糙，我選擇的是frontpage，這款軟件比較適合于初學(xué)者來(lái)使用。雖然在制作效果上也許會(huì)遜色一點(diǎn)，但是其優(yōu)點(diǎn)的是比較容易上手。

（2）其次就是選擇素材了，網(wǎng)頁(yè)上那些好看的背景還有點(diǎn)綴以及一些裝飾，標(biāo)

志性的圖片，元素都是需要自己來(lái)選擇的。選擇好了這些圖片元素會(huì)為你的網(wǎng)頁(yè)增添很多生氣。這里介紹一個(gè)比較好的網(wǎng)站。我的所有圖片元素以及背景都是從這里面找的。

（3）所需要介紹的當(dāng)然是自己的個(gè)人信息，包括自己的基本信息以及自己的愛(ài)

好，工作以及一些零碎的感悟。這些都是要在網(wǎng)頁(yè)里面表達(dá)出來(lái)的文本信息，所以必須要實(shí)現(xiàn)準(zhǔn)備好。

（4）現(xiàn)在就是需要布置自己的網(wǎng)站了，我的計(jì)劃是用多頁(yè)面網(wǎng)站來(lái)介紹自己，制作個(gè)人主頁(yè)。首先必須有一個(gè)主頁(yè)，里面是我的基本信息，然后有幾個(gè)選項(xiàng)，分別超鏈接我的愛(ài)好，我的工作以及我的感悟。在下面會(huì)有三個(gè)子網(wǎng)頁(yè)，分別就是我的愛(ài)好，我的工作以及我的感悟。出去剩下的兩個(gè)不在超鏈接以外，我的愛(ài)好會(huì)再向下借三個(gè)子網(wǎng)頁(yè)，分別是我喜歡的歌，我喜歡的書(shū)和我喜歡的電影。

（5）有了明確的目標(biāo)就開(kāi)始著手制作，在上面那個(gè)網(wǎng)站里下載的背景和矢量圖

都是需要加工的，需要利用繪圖工具把需要的元素從整個(gè)照片里摳出來(lái)，把不需要的多余的部分擦除，在這個(gè)時(shí)候什么圖片需要放置在什么地方用來(lái)做什么已經(jīng)有一個(gè)大致的想法。

（6）沒(méi)有用其他的網(wǎng)頁(yè)制作工具，frontpage里面需要事先插入表格，將圖片

文本信息填到適合的表格里，這里面的布局工作就需要自己動(dòng)手了，以個(gè)人愛(ài)好而定，里面遇到了不少問(wèn)題，但都最終被我解決了。這里面插入圖片需要在插入選項(xiàng)里面選擇插入圖片，設(shè)置背景則是在格式選項(xiàng)里選擇背景，背景圖片也要在繪圖工具里設(shè)定好尺寸。一開(kāi)始我選擇的網(wǎng)頁(yè)形式是新建一個(gè)只有一個(gè)網(wǎng)頁(yè)的網(wǎng)站，后面的子網(wǎng)頁(yè)可以在網(wǎng)站里新建網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)。

第三篇：制作個(gè)人網(wǎng)站教案

學(xué)科：《信息技術(shù)》 課題：《制作個(gè)人網(wǎng)站》 課時(shí)：1 [教學(xué)目標(biāo)]（1）熟悉Dreamweaver的軟件環(huán)境，掌握該環(huán)境下的文字處理方法；

（2）掌握插入剪貼畫(huà)的方法，掌握使用表格，網(wǎng)站內(nèi)部的超鏈接，應(yīng)用掌握的知識(shí)制作表達(dá)一定主題、包含文字、圖片的個(gè)人網(wǎng)站。[教學(xué)重點(diǎn)與難點(diǎn)] 使用表格定位文字、圖片，網(wǎng)站內(nèi)部的超鏈接。[課時(shí)安排] 1.心課導(dǎo)入與布置任務(wù)（用時(shí)6～7分鐘）2.學(xué)生自主學(xué)習(xí)（用時(shí)27分鐘）3.教學(xué)評(píng)價(jià)（用時(shí)10分鐘）4.教學(xué)總結(jié)（用時(shí)1～2分鐘）教學(xué)過(guò)程：

1、導(dǎo)入

首先以學(xué)校要建校園網(wǎng)站為引言，校園網(wǎng)站下掛有教師個(gè)人網(wǎng)站、班級(jí)網(wǎng)站、學(xué)生個(gè)人網(wǎng)站等，激發(fā)學(xué)生要自己制作個(gè)人主頁(yè)的興趣，然后給學(xué)生布置任務(wù)，要求網(wǎng)站必須有同學(xué)們親手制作的網(wǎng)頁(yè)，才能真正成為的校園網(wǎng)站，提供大量的制作網(wǎng)頁(yè)的素材（如圖片、聲音、動(dòng)畫(huà)、視頻等），同學(xué)們可以自由地發(fā)表自己的想法和觀點(diǎn)，開(kāi)闊學(xué)生的思路，同時(shí)激發(fā)學(xué)生的創(chuàng)造欲望。

2、教學(xué)內(nèi)容

教師利用多媒體教學(xué)網(wǎng)（或大屏幕投影儀）簡(jiǎn)單分析教學(xué)課件的要素，將Office中的Word 2000知識(shí)遷移到此，將任務(wù)進(jìn)行分解成為若干個(gè)小任務(wù)，如制作一個(gè)網(wǎng)站，必須制作若干個(gè)網(wǎng)頁(yè)，而一個(gè)網(wǎng)頁(yè)可能由文字、圖片、超鏈接等構(gòu)成，因而就有要完成插入文字、插入圖片、插入超級(jí)鏈接等小任務(wù)。具體的任務(wù)要求是：文字要有不同的字體、顏色、字號(hào)、對(duì)齊方式；圖片要求大小調(diào)節(jié)合適、位置擺放合適；表格要有合并與拆分，表格內(nèi)要有文字、圖片；主頁(yè)與子網(wǎng)頁(yè)之間要有超級(jí)鏈接并為雙向的。然后簡(jiǎn)單演示一個(gè)網(wǎng)站內(nèi)部的超級(jí)鏈接。引導(dǎo)學(xué)生輕松愉快、主動(dòng)去解決問(wèn)題，完成任務(wù)，進(jìn)而達(dá)到自身對(duì)知識(shí)的意義建構(gòu)。

接下來(lái)就是學(xué)生開(kāi)始自主學(xué)習(xí)的過(guò)程。學(xué)生帶著制作網(wǎng)頁(yè)這個(gè)任務(wù)，并由此而產(chǎn)生對(duì)網(wǎng)頁(yè)中的文字處理與圖片等知識(shí)的需求，由內(nèi)在的需要促使學(xué)生去主動(dòng)探索、學(xué)習(xí)相應(yīng)的知識(shí)，并通過(guò)自己主動(dòng)探索來(lái)解決問(wèn)題。在此過(guò)程中，教師巡視查看學(xué)生的學(xué)習(xí)過(guò)程，了解學(xué)生的學(xué)習(xí)情況、進(jìn)度，以指導(dǎo)者的身份對(duì)個(gè)別學(xué)生的問(wèn)題進(jìn)行單獨(dú)交流、指導(dǎo)；如：有的學(xué)生問(wèn)網(wǎng)頁(yè)之間的超級(jí)鏈接如何去做，有的學(xué)生問(wèn)如何利用表格對(duì)文字、圖片的定位等。學(xué)生之間可以互相交流、互相學(xué)習(xí)、互幫互助、團(tuán)結(jié)協(xié)作；對(duì)大多數(shù)學(xué)生的共性問(wèn)題，教師給予廣播式指導(dǎo)解決。對(duì)于理解能力、動(dòng)手能力以及綜合應(yīng)用能力強(qiáng)的同學(xué)指導(dǎo)他們進(jìn)一步學(xué)習(xí)擴(kuò)展內(nèi)容，發(fā)展他們的個(gè)性，培養(yǎng)他們的積極創(chuàng)新精神。如對(duì)某些學(xué)的快的學(xué)生給予引導(dǎo)如何用表格套表格的再定位方法準(zhǔn)確地定位文字、圖片。

3、教學(xué)評(píng)估

在規(guī)定的時(shí)間內(nèi)學(xué)生基本完成了學(xué)習(xí)任務(wù)，下面是給學(xué)生一個(gè)展示自我的機(jī)會(huì)，從學(xué)生制作的網(wǎng)頁(yè)中挑選出有代表性的作品，由學(xué)生自己介紹、演示，這樣可以鍛煉學(xué)生的表達(dá)能力，然后讓學(xué)生互相討論，發(fā)表意見(jiàn)、看法，實(shí)現(xiàn)相互交流、學(xué)習(xí)的目的。教師在此過(guò)程中以實(shí)現(xiàn)預(yù)定的教學(xué)目標(biāo)為目的，適當(dāng)?shù)匾龑?dǎo)討論方向。這一個(gè)過(guò)程是非常重要的過(guò)程，是一個(gè)再學(xué)習(xí)再提高的過(guò)程。對(duì)于知識(shí)掌握較好的學(xué)生正是表現(xiàn)自我的時(shí)候，是最有成就感的時(shí)候，對(duì)于少數(shù)知識(shí)掌握不太好的學(xué)生，真是一個(gè)再學(xué)習(xí)的過(guò)程，完成對(duì)知識(shí)的意義建構(gòu)。

4、課堂總結(jié)

教師總結(jié)本節(jié)課的教學(xué)內(nèi)容：掌握文字處理方法、插入剪貼畫(huà)、使用表格，網(wǎng)站內(nèi)部的超鏈接，應(yīng)用掌握的知識(shí)制作表達(dá)一定主題、包含文字、圖片的個(gè)人網(wǎng)站。對(duì)學(xué)生的制作成果表?yè)P(yáng)鼓勵(lì)，并提出新的問(wèn)題，留下懸念，激發(fā)學(xué)生繼續(xù)學(xué)習(xí)的興趣。如要使自己的網(wǎng)頁(yè)更美觀、內(nèi)容更充實(shí)，具有“商業(yè)網(wǎng)站”的味道，我們就必須要對(duì)網(wǎng)頁(yè)進(jìn)行美化進(jìn)行裝飾，如何去才能實(shí)現(xiàn)呢？這是我們下一節(jié)要完成的任務(wù)。

第四篇：個(gè)人網(wǎng)站制作說(shuō)明

我所選的題材關(guān)于甜品。

對(duì)題材選擇的說(shuō)明

本網(wǎng)站名稱為“舞動(dòng)舌尖甜品”，目的是向?yàn)g覽者展示甜品。網(wǎng)站的首頁(yè)設(shè)計(jì)成引導(dǎo)頁(yè)，引導(dǎo)頁(yè)相對(duì)簡(jiǎn)單，下載迅速。“舞動(dòng)舌尖甜品”網(wǎng)站內(nèi)容包括四個(gè)部分，如下：

?主頁(yè)

?關(guān)于我們

?特色新聞

?甜品展示

該站點(diǎn)根目錄下一共包括四個(gè)文件夾，各目錄的名稱及作用如下：

“images”文件夾：存放“舞動(dòng)舌尖甜品”網(wǎng)站的所有用到的圖片

“l(fā)ibrary”文件夾：存放“舞動(dòng)舌尖甜品”網(wǎng)站的三個(gè)庫(kù)文件。

“other”文件夾：存放“舞動(dòng)舌尖甜品”網(wǎng)站里用到的word文檔。

“Templates”文件夾：存放“舞動(dòng)舌尖甜品”網(wǎng)站的模板網(wǎng)頁(yè)。

“index”主頁(yè)、“gywm”關(guān)于我們、“tsxw”特色新聞、“tpzs”甜品展示；產(chǎn)品分類a、b、c、d、e、g；常識(shí)介紹wb、wb1、wb2、wb3。

對(duì)所用編輯工具的說(shuō)明

隨著網(wǎng)絡(luò)技術(shù)以及網(wǎng)頁(yè)制作技術(shù)方面的日臻成熟人們?cè)絹?lái)越關(guān)注網(wǎng)頁(yè)的美觀性，所以當(dāng)下網(wǎng)頁(yè)制作的一個(gè)最主要的出發(fā)點(diǎn)就是網(wǎng)頁(yè)的美觀和可操作性。Dreamweaver版本，無(wú)論是操作性和功能性都有長(zhǎng)足的進(jìn)步這也為我們制作網(wǎng)頁(yè)提供了強(qiáng)大的工具。古語(yǔ)有云：“工欲善其事，必先利其器。”

首先要注意：各目錄名稱都不要用中文。以及站點(diǎn)的建立 在制作網(wǎng)頁(yè)時(shí)，首先要建立站點(diǎn)。

對(duì)資源來(lái)源的說(shuō)明

做本次個(gè)人網(wǎng)站我借鑒了甜心凱特網(wǎng)站和愛(ài)芒果甜品網(wǎng)站的甜品圖片，還有簡(jiǎn)單的設(shè)計(jì)風(fēng)格。

對(duì)制作過(guò)程的說(shuō)明

主頁(yè)：運(yùn)用了四個(gè)標(biāo)題欄，一張圖片，兩張動(dòng)態(tài)圖片，以及版權(quán)。圖片來(lái)源：自己搜索、以及一張借鑒圖片____<愛(ài)芒果甜品網(wǎng)站>。

關(guān)于我們：運(yùn)用了四個(gè)標(biāo)題欄，一張圖片，三張動(dòng)態(tài)圖片；圖片來(lái)源：自己搜索、以及一張借鑒圖片____<愛(ài)芒果甜品網(wǎng)站>。

產(chǎn)品分類：

分成七個(gè)系列：

? 美飲系列

? 甜心妙雪迷

? 巧克力舌尖冰

? 菠蘿酸奶舌尖冰

? 西瓜舌尖冰

? 香芋舌尖冰

? 芒果舌尖冰

每七個(gè)系列分別鏈接了七個(gè)頁(yè)面。

圖片借鑒了<甜心凱特網(wǎng)站>的甜品圖片。

特色新聞：關(guān)于舞動(dòng)舌尖的新聞新增了四個(gè)常識(shí)文檔，同樣的鏈接了四個(gè)網(wǎng)頁(yè)，在該頁(yè)面的各標(biāo)題處鏈接了可以下載的文檔，供瀏覽者下載查看。常識(shí)文檔借鑒了<愛(ài)芒果甜品網(wǎng)站>的新聞標(biāo)題欄內(nèi)的文檔。

甜品展示：運(yùn)用了二十四張?zhí)鹌穲D片。圖片來(lái)源：自己搜索。

對(duì)所用技術(shù)的說(shuō)明

網(wǎng)站制作用到了：時(shí)間軸，庫(kù)文件，模板網(wǎng)站，表格布局，動(dòng)態(tài)文字代碼，網(wǎng)站超鏈接，層的運(yùn)用以及添加行為。

總結(jié)和體會(huì)

這是第一次用Dreamweaver軟件做網(wǎng)頁(yè)，高中曾簡(jiǎn)單的學(xué)過(guò)如何制作網(wǎng)頁(yè)，但那時(shí)用的軟件是FrontPage2003。

學(xué)了用Dreamweaver軟件做網(wǎng)頁(yè)感覺(jué)難度比FrontPage2003大。上課聽(tīng)老師講解時(shí)，跟著老師做步驟時(shí)感覺(jué)并不是那么的難，相反，反而覺(jué)得很簡(jiǎn)單，只要掌握就并不難了。但是輪到自己設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，有些迷茫了。我該怎么做？我該如何去做？

做《舞動(dòng)舌尖甜品》網(wǎng)站時(shí)：最令我覺(jué)得繁瑣的地方便是給二十四張圖片插入層，當(dāng)我在做這二十四張圖片的層的時(shí)候最希望的便是有什么快捷的方法可以不用一個(gè)一個(gè)的去弄。我想過(guò)用代碼，可是我做不來(lái)。于是，我便很有耐心的給這二十四張圖片插入層以及對(duì)應(yīng)圖片的行為。

其他部分也有漸多漸少修改過(guò)，做起來(lái)感覺(jué)還行。

看到自己完成一個(gè)自己設(shè)計(jì)的小網(wǎng)站時(shí)，有大大的欣喜，這居然是自己做出來(lái)的網(wǎng)站。原來(lái)做網(wǎng)站就是這樣啊！

這時(shí)，不禁佩服那些做網(wǎng)站的專業(yè)人士，原來(lái)做一個(gè)網(wǎng)站也是要花費(fèi)這么的耐心啊，想想我們平時(shí)瀏覽的網(wǎng)站，那個(gè)做工相比我們自己的個(gè)人網(wǎng)站簡(jiǎn)直就是大巫見(jiàn)小巫。

第五篇：個(gè)人網(wǎng)站制作

設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站方法

一、要求：

1．使用Dreamweave網(wǎng)頁(yè)工具制作一個(gè)個(gè)人網(wǎng)站；

2．包含至少四個(gè)網(wǎng)頁(yè): 包括首頁(yè)、個(gè)人簡(jiǎn)介、個(gè)人相冊(cè)等（可隨意設(shè)計(jì)），網(wǎng)頁(yè)之間用超鏈接相連。

3．網(wǎng)頁(yè)中要有圖片和文字內(nèi)容，用表格或框架進(jìn)行頁(yè)面布局；

4．添加至少兩種行為，并為首頁(yè)添加背景音樂(lè)。

5.在網(wǎng)站中設(shè)計(jì)一個(gè)表單頁(yè)面。

6.首頁(yè)必須包含頁(yè)面標(biāo)題，動(dòng)態(tài)按鈕導(dǎo)航欄。

下面我們大家統(tǒng)一一下軟件版本，我用的是網(wǎng)頁(yè)三劍客cs3版本的，大家可以去迅雷下載，因?yàn)槲覀円玫絝lash建議大家也按裝好flash。

首先新建一個(gè)文件夾，文件夾的名字不能為漢字，做網(wǎng)站所有的路徑都必須用字母或者數(shù)字，不能用漢字，我們就用名字吧，譬如說(shuō)名字張三，那文件夾名字就是zs，如圖打開(kāi)Dreamweaver軟件，得到圖

做網(wǎng)頁(yè)要新建站點(diǎn)，關(guān)于站點(diǎn)配置服務(wù)器什么的，這里不講了，只講建立站點(diǎn)。

選擇站點(diǎn)——新建站點(diǎn)。

我們建的文件夾就是站點(diǎn)根文件夾。新建站點(diǎn)后得到這樣一個(gè)界面

點(diǎn)選高級(jí)，得到界面

站點(diǎn)名稱與我們建文件夾得名字相同，zs填進(jìn)去就可以了 本地根文件夾就是我們新建的那個(gè)文件夾，http地址為http://localhost/zs滄州網(wǎng)站建設(shè)http://www.tmdps.cn

接下來(lái)選擇左側(cè)欄里遠(yuǎn)程信息

點(diǎn)擊無(wú)后面的那個(gè)三角，選擇本地網(wǎng)絡(luò)，遠(yuǎn)端文件夾同樣選擇我們新建的那個(gè)文件夾

接下來(lái)點(diǎn)選左面菜單里的測(cè)試服務(wù)器，點(diǎn)選訪問(wèn)后面那個(gè)三角，選擇本地網(wǎng)絡(luò)，測(cè)試服務(wù)器文件夾也為我們建好的文件夾zs，在url前綴后面加上zs

然后點(diǎn)擊確定就可以了得到這樣一個(gè)界面。

下面看老師的第一條要求，是要至少四個(gè)網(wǎng)頁(yè)，那我們就做四個(gè)

單擊新建，然后單擊

接下來(lái)，選擇

然后單擊創(chuàng)建，接下單擊文件——保存，保存這個(gè)文件，保存在我們一開(kāi)始建好的文件夾里面，保存名字不能是漢字，只能是字母或者數(shù)字，因?yàn)槲覀冎蛔膫€(gè)網(wǎng)頁(yè)，可以簡(jiǎn)單一點(diǎn)，把這四個(gè)網(wǎng)頁(yè)命名為a、b、c、d，或者1、2、3、4，當(dāng)然一個(gè)網(wǎng)站默認(rèn)的索引首頁(yè)名為index，這里也用index，單擊保存，這樣得到第一個(gè)頁(yè)面，以同樣的方式建剩下的三個(gè)頁(yè)面，這里我的首頁(yè)默認(rèn)為index.heml，其他三個(gè)網(wǎng)頁(yè)的名字分別為a.html、b.html、c.html，我們這四個(gè)網(wǎng)頁(yè)文件已經(jīng)保存在我們建的文件夾里。

站點(diǎn)中已經(jīng)有了四個(gè)文件。接下來(lái)，我們開(kāi)始編輯index.html。

單擊index.html，顯示為當(dāng)前頁(yè)面。

單擊拆分，然后我們看這個(gè)個(gè)網(wǎng)頁(yè)就叫張三之家了，同樣的方法給其他三個(gè)網(wǎng)頁(yè)改名字。A網(wǎng)頁(yè)標(biāo)題，這個(gè)就是網(wǎng)頁(yè)名字，我們以張三為例，這，這樣老師的第六條我們就完成一半

B網(wǎng)頁(yè)標(biāo)題

C網(wǎng)頁(yè)標(biāo)題

改好名字之后，一一保存，這個(gè)不多說(shuō)了，接下來(lái)操作index.html。

顯示首頁(yè)為當(dāng)前編輯頁(yè)面。

首先為index.html頁(yè)面添加背景音樂(lè)。

大家在代碼視圖里找到，這個(gè)是什么意思就不解釋了，我也不知道，就是這個(gè)了，在后面輸入代碼，然看見(jiàn)這張圖片上，我光標(biāo)指在哪里了吧，單擊空格鍵，這個(gè)時(shí)候注意輸入法要為美式鍵盤(pán)字母格式，只要不是漢字就行，得到一個(gè)菜單，單擊src選中，然后單擊enter建，這個(gè)時(shí)候緊跟著src會(huì)出現(xiàn)一個(gè)瀏覽，單擊瀏覽，然后出現(xiàn)對(duì)話框，選擇一首音樂(lè)，然后單擊確定，會(huì)繼續(xù)彈出一個(gè)對(duì)話框點(diǎn)擊是，保存到自己建好的文件夾里面，注意這里不能用漢字做音樂(lè)名字，必須改成字母或者數(shù)字

我是以beyond的歌為例，名字改為by，點(diǎn)擊保存背景音樂(lè)就添加好了。大家可以看一下，在站點(diǎn)目錄下，已經(jīng)有了這首歌曲。

接下來(lái)開(kāi)始設(shè)計(jì)頁(yè)面布局 這里用表格布局，這個(gè)欄叫設(shè)計(jì)欄，由于大家都不會(huì)代碼，所以我們主要在這個(gè)欄里操作，下面大家點(diǎn)擊常用里面的表格，就是下面這張圖片

中的這個(gè)圖標(biāo)

得到對(duì)話框如圖所示數(shù)據(jù)： 單擊確定，得到如下界面

這個(gè)插入的表格式可以自動(dòng)調(diào)整大小的，大家可以自己試一下，接下來(lái)用這些表格布局，給大家看兩個(gè)圖標(biāo)，這個(gè)圖標(biāo)就像是excel中那個(gè)合并和拆分單元格是一個(gè)意思，左邊那個(gè)代表合并單元格，右面那個(gè)代表拆分單元格，excel大家都會(huì)把，就和那個(gè)布局差不錯(cuò)，我做一個(gè)簡(jiǎn)單的布局，為了方便，我把這個(gè)表格縮小，這個(gè)布局很簡(jiǎn)單，第二行全部合并，第三行第二三列合并，大家可以根據(jù)自己的需要進(jìn)行拆分合并，還可以在表格里面再次插入表格。

寬度和高度的設(shè)置時(shí)在代碼里找到

height=””>，其中align表示表格位置，height表示表格高度，大家可以根據(jù)自己的需要來(lái)填數(shù)字，默認(rèn)是以像素為單位的。

接下來(lái)制作導(dǎo)航，這是老師第六條中的第二個(gè)要求，注意我在這里給了兩種方法，大家可以先看一下，再?zèng)Q定選擇哪種

我沒(méi)看懂什么叫動(dòng)態(tài)按鈕導(dǎo)航條，不知道是讓這個(gè)字動(dòng)呢，還是讓這個(gè)字動(dòng)呢？如果大家嫌麻煩，就直接輸入漢字，結(jié)果就是下面這樣的

如果要文字居中顯示可以將這四個(gè)框同時(shí)選中，然后居中

在水平欄里面選擇

以后所有的文字格式都可以在這里面選，但是首先要選中自己所要操作的文字。

創(chuàng)建鏈接，選中首頁(yè)兩個(gè)字，然后單擊右鍵——?jiǎng)?chuàng)建鏈接，選擇index.html，然后以同樣的方法，給其他三個(gè)欄里的文字做鏈接，創(chuàng)建鏈接的文字會(huì)有下劃線，同時(shí)改變顏色

如果大家不嫌麻煩，教大家用flsh做一個(gè)動(dòng)態(tài)的按鈕導(dǎo)航，把光標(biāo)放在第一行第一個(gè)欄里，然后

這個(gè)常用欄里的flash按鈕，單擊后面那個(gè)小三角，選擇flash按鈕。得到對(duì)話框

我們可以看到這個(gè)按鈕的樣式是可以自己選擇的，大家隨意選擇一款自己喜歡的按鈕，然后在按鈕文本欄里，填入首頁(yè)兩個(gè)字，字體設(shè)置隨意，然后鏈接

這個(gè)欄里填入index.html，注意這里的鏈接就是超級(jí)鏈接，當(dāng)你點(diǎn)擊這個(gè)按鈕的時(shí)候，它就會(huì)顯示主頁(yè)，我們?cè)O(shè)置后面三個(gè)按鈕的時(shí)候，一定要記得，當(dāng)你文本欄里填入個(gè)人簡(jiǎn)介字的時(shí)候，那你的鏈接就要指向簡(jiǎn)介那個(gè)頁(yè)面，我們這里就是a.html。其他像什么背景色之類的隨意，然后單擊確定。這樣第一個(gè)按鈕就做好了，接下來(lái)我們自己做剩下的三個(gè)按鈕，注意鏈接問(wèn)題，大家做好后，可以看到自己站點(diǎn)內(nèi)多了四個(gè)swf格式的文件，這四個(gè)就是按鈕，保存的時(shí)候，有一個(gè)文件問(wèn)是否要保存，一定要點(diǎn)擊是，不然flash不運(yùn)行了。

大家可以回到自己的文件夾里，打開(kāi)首頁(yè)，測(cè)試一下，是不是單擊這四個(gè)按鈕會(huì)指向自己所設(shè)置的網(wǎng)頁(yè)，然后我們給第二行設(shè)置背景顏色，以有彈出顏色選框，大家隨意選擇自己喜歡的顏色

單擊背景顏色后面那個(gè)方框，可

接下來(lái)，完成老師的第五個(gè)要求，制作表單，這個(gè)把光標(biāo)指向第三行第一個(gè)欄

選在表單選項(xiàng)中的。也就是第一個(gè)按鈕，這時(shí)得到界面

我們把光標(biāo)指向紅線里面，輸入“用戶名：”然后點(diǎn)擊表單選項(xiàng)中的第二個(gè)按鈕彈出對(duì)話框，選擇確定，得到界面

同樣方法換行輸入密碼

再次換行，單擊表單選項(xiàng)中的按鈕項(xiàng)輸入兩個(gè)按鈕，然后選中第一個(gè)按鈕，得到以下屬性

將值后面欄里的文字改為登錄，同樣方法，把第二個(gè)按鈕的值改為注冊(cè)。

接下來(lái)插入文字和圖片，在現(xiàn)在的第二行第二列里操作

把光標(biāo)指向第二行第二列，選擇常用欄

選擇這個(gè)欄里的圖像按鈕，彈出對(duì)話框，這時(shí)大家選擇自己電腦里的一張圖片，單擊確定后彈出對(duì)話框，問(wèn)是否保存在站點(diǎn)根目錄下，單擊確定，這時(shí)候需要注意的是，圖片名字不能有漢字，圖像標(biāo)簽和輔助屬性那一欄不用管，單擊確定即可。

接下來(lái)就是輸入漢字了，我們?cè)趫D片的后面先輸入漢字，可以看到這樣的顯示，上面還空了很大一塊地方，似乎不太好，不符合圖文混排的規(guī)矩，大家單擊圖片選中，在屬性欄里找到找到到對(duì)齊那一欄，在后面點(diǎn)選左對(duì)齊，得到最終圖文效果是這樣的。

第四行還有四個(gè)欄，大家可以在里面表明作者時(shí)間、以及自己的郵箱、QQ等內(nèi)容，這里我就不寫(xiě)了。

實(shí)際上做到這里，我們幾乎完成了老師的所有要求了就差添加兩種行為了后面還有三個(gè)網(wǎng)頁(yè)沒(méi)做呢，怎么辦啊，后面三個(gè)網(wǎng)頁(yè)大家還沒(méi)做，教大家一個(gè)簡(jiǎn)單的方法，大家把鼠標(biāo)指向了。

這個(gè)欄的左邊，在表格和邊框之間，我們可以發(fā)現(xiàn)，鼠標(biāo)斜向右首先單擊鼠標(biāo)左鍵，選中這個(gè)表格然后不要移動(dòng)鼠標(biāo)，同時(shí)單擊右鍵，單擊拷貝，然后這個(gè)表格就拷貝好了，打開(kāi)其他三個(gè)頁(yè)面，分別粘貼過(guò)去，圖像屬性描述不用管，取消，這樣做的好處是它的好處非常多。

大家打開(kāi)a.html，這個(gè)是個(gè)人簡(jiǎn)介，就是一個(gè)圖文混排了，圖文混排我們已經(jīng)講過(guò)了，更何況我們這個(gè)頁(yè)面里已經(jīng)有了圖文混排了，大家可以換一張圖片，換一些文字，做一些自我介紹什么的，都可以。，但是我們最好把那個(gè)表單刪掉，哪個(gè)是表單就不用我說(shuō)了吧，就是這個(gè)了。刪掉之后，選中第三行三個(gè)欄，合并就好了，第二個(gè)頁(yè)面就做好了，接下來(lái)我們看第三個(gè)頁(yè)面，b.html，這個(gè)頁(yè)面是個(gè)人相冊(cè)

這里我同樣分兩種方法給大家講，第一種方法很簡(jiǎn)單。就是插入幾張圖片，現(xiàn)在第三行剩下三個(gè)空欄，每個(gè)欄里插入一張圖片，景色也好，其他也罷，然后加上圖片說(shuō)明，一切搞定，這個(gè)我就不寫(xiě)了，第二種方法還是用flash做相冊(cè)，首先大家合并第三行三個(gè)欄。

并將光標(biāo)指向第三行，然后單擊這個(gè)圖片中的插入記錄——媒體——圖像查看器，之后得到這樣的界面

注意這個(gè)是可以調(diào)節(jié)大小的，看你想要多大的相冊(cè)了。單擊選中，我們會(huì)發(fā)現(xiàn)右面多出這樣一個(gè)界面flash元素

在其中找到

然后單擊后面的img1那里，會(huì)發(fā)現(xiàn)后面多出一支筆，單擊那個(gè)筆，彈出對(duì)話框

單擊減號(hào)，將img1三個(gè)刪掉，然后再單擊加號(hào)，會(huì)多出一個(gè)文件夾標(biāo)志，單擊文件夾標(biāo)志，然后彈出對(duì)話框

在自己電腦里選擇一張圖片，將圖片保存到站點(diǎn)根文件夾下，還是那個(gè)問(wèn)題，名字中不能有漢字，添加好第一張圖片之后界面如圖

大家可以多添加幾張圖片，這樣一個(gè)相冊(cè)就做好了，單擊確定。接下來(lái)就剩下第四頁(yè)了，就是寫(xiě)幾行文字的事情了，把表單和圖文混排都刪除，然后合并三個(gè)欄，然后添加一些文字，搞定了。這四個(gè)頁(yè)面都做好了，我們還有一項(xiàng)任務(wù)沒(méi)有完成，那就是給頁(yè)面添加兩個(gè)行為

下面我們講添加行為，打開(kāi)首頁(yè)，單擊圖像選中，然后找到一下命令，看到行為面板下那個(gè)醒目的加好了嗎 單擊加號(hào)——交換圖像，彈出對(duì)話框

單擊瀏覽，在自己電腦中找出一張圖片，單擊確定，存放到站點(diǎn)根目錄下，這樣第一個(gè)行為就完成了，當(dāng)我們鼠標(biāo)滑過(guò)這張圖片的時(shí)候，就會(huì)變?yōu)榱硪粡垐D片。下面添加第二個(gè)行為，我們將光標(biāo)指向第二行藍(lán)色背景哪一行，然后單擊行為面板下的加號(hào)——彈出信息，得到對(duì)話框

寫(xiě)上你好，單擊確定。這樣在我們單擊藍(lán)色地帶的時(shí)候，就會(huì)彈出你好信息框。好了到此為止，就差不多了，以上由滄州網(wǎng)站建設(shè)徐俊科技提供。

下載個(gè)人網(wǎng)站制作過(guò)程.doc

將本文檔下載到自己電腦，方便修改和收藏，請(qǐng)勿使用迅雷等下載。

點(diǎn)此處下載文檔

文檔為doc格式