第一篇：制作個人網站教案

學科：《信息技術》 課題：《制作個人網站》 課時：1 [教學目標]（1）熟悉Dreamweaver的軟件環境，掌握該環境下的文字處理方法；

（2）掌握插入剪貼畫的方法，掌握使用表格，網站內部的超鏈接，應用掌握的知識制作表達一定主題、包含文字、圖片的個人網站。[教學重點與難點] 使用表格定位文字、圖片，網站內部的超鏈接。[課時安排] 1.心課導入與布置任務（用時6～7分鐘）2.學生自主學習（用時27分鐘）3.教學評價（用時10分鐘）4.教學總結（用時1～2分鐘）教學過程：

1、導入

首先以學校要建校園網站為引言，校園網站下掛有教師個人網站、班級網站、學生個人網站等，激發學生要自己制作個人主頁的興趣，然后給學生布置任務，要求網站必須有同學們親手制作的網頁，才能真正成為的校園網站，提供大量的制作網頁的素材（如圖片、聲音、動畫、視頻等），同學們可以自由地發表自己的想法和觀點，開闊學生的思路，同時激發學生的創造欲望。

2、教學內容

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

接下來就是學生開始自主學習的過程。學生帶著制作網頁這個任務，并由此而產生對網頁中的文字處理與圖片等知識的需求，由內在的需要促使學生去主動探索、學習相應的知識，并通過自己主動探索來解決問題。在此過程中，教師巡視查看學生的學習過程，了解學生的學習情況、進度，以指導者的身份對個別學生的問題進行單獨交流、指導；如：有的學生問網頁之間的超級鏈接如何去做，有的學生問如何利用表格對文字、圖片的定位等。學生之間可以互相交流、互相學習、互幫互助、團結協作；對大多數學生的共性問題，教師給予廣播式指導解決。對于理解能力、動手能力以及綜合應用能力強的同學指導他們進一步學習擴展內容，發展他們的個性，培養他們的積極創新精神。如對某些學的快的學生給予引導如何用表格套表格的再定位方法準確地定位文字、圖片。

3、教學評估

在規定的時間內學生基本完成了學習任務，下面是給學生一個展示自我的機會，從學生制作的網頁中挑選出有代表性的作品，由學生自己介紹、演示，這樣可以鍛煉學生的表達能力，然后讓學生互相討論，發表意見、看法，實現相互交流、學習的目的。教師在此過程中以實現預定的教學目標為目的，適當地引導討論方向。這一個過程是非常重要的過程，是一個再學習再提高的過程。對于知識掌握較好的學生正是表現自我的時候，是最有成就感的時候，對于少數知識掌握不太好的學生，真是一個再學習的過程，完成對知識的意義建構。

4、課堂總結

教師總結本節課的教學內容：掌握文字處理方法、插入剪貼畫、使用表格，網站內部的超鏈接，應用掌握的知識制作表達一定主題、包含文字、圖片的個人網站。對學生的制作成果表揚鼓勵，并提出新的問題，留下懸念，激發學生繼續學習的興趣。如要使自己的網頁更美觀、內容更充實，具有“商業網站”的味道，我們就必須要對網頁進行美化進行裝飾，如何去才能實現呢？這是我們下一節要完成的任務。

第二篇：個人網站制作說明

我所選的題材關于甜品。

對題材選擇的說明

本網站名稱為“舞動舌尖甜品”，目的是向瀏覽者展示甜品。網站的首頁設計成引導頁，引導頁相對簡單，下載迅速。“舞動舌尖甜品”網站內容包括四個部分，如下：

?主頁

?關于我們

?特色新聞

?甜品展示

該站點根目錄下一共包括四個文件夾，各目錄的名稱及作用如下：

“images”文件夾：存放“舞動舌尖甜品”網站的所有用到的圖片

“library”文件夾：存放“舞動舌尖甜品”網站的三個庫文件。

“other”文件夾：存放“舞動舌尖甜品”網站里用到的word文檔。

“Templates”文件夾：存放“舞動舌尖甜品”網站的模板網頁。

“index”主頁、“gywm”關于我們、“tsxw”特色新聞、“tpzs”甜品展示；產品分類a、b、c、d、e、g；常識介紹wb、wb1、wb2、wb3。

對所用編輯工具的說明

隨著網絡技術以及網頁制作技術方面的日臻成熟人們越來越關注網頁的美觀性，所以當下網頁制作的一個最主要的出發點就是網頁的美觀和可操作性。Dreamweaver版本，無論是操作性和功能性都有長足的進步這也為我們制作網頁提供了強大的工具。古語有云：“工欲善其事，必先利其器。”

首先要注意：各目錄名稱都不要用中文。以及站點的建立 在制作網頁時，首先要建立站點。

對資源來源的說明

做本次個人網站我借鑒了甜心凱特網站和愛芒果甜品網站的甜品圖片，還有簡單的設計風格。

對制作過程的說明

主頁：運用了四個標題欄，一張圖片，兩張動態圖片，以及版權。圖片來源：自己搜索、以及一張借鑒圖片____<愛芒果甜品網站>。

關于我們：運用了四個標題欄，一張圖片，三張動態圖片；圖片來源：自己搜索、以及一張借鑒圖片____<愛芒果甜品網站>。

產品分類：

分成七個系列：

? 美飲系列

? 甜心妙雪迷

? 巧克力舌尖冰

? 菠蘿酸奶舌尖冰

? 西瓜舌尖冰

? 香芋舌尖冰

? 芒果舌尖冰

每七個系列分別鏈接了七個頁面。

圖片借鑒了<甜心凱特網站>的甜品圖片。

特色新聞：關于舞動舌尖的新聞新增了四個常識文檔，同樣的鏈接了四個網頁，在該頁面的各標題處鏈接了可以下載的文檔，供瀏覽者下載查看。常識文檔借鑒了<愛芒果甜品網站>的新聞標題欄內的文檔。

甜品展示：運用了二十四張甜品圖片。圖片來源：自己搜索。

對所用技術的說明

網站制作用到了：時間軸，庫文件，模板網站，表格布局，動態文字代碼，網站超鏈接，層的運用以及添加行為。

總結和體會

這是第一次用Dreamweaver軟件做網頁，高中曾簡單的學過如何制作網頁，但那時用的軟件是FrontPage2003。

學了用Dreamweaver軟件做網頁感覺難度比FrontPage2003大。上課聽老師講解時，跟著老師做步驟時感覺并不是那么的難，相反，反而覺得很簡單，只要掌握就并不難了。但是輪到自己設計網頁的時候，有些迷茫了。我該怎么做？我該如何去做？

做《舞動舌尖甜品》網站時：最令我覺得繁瑣的地方便是給二十四張圖片插入層，當我在做這二十四張圖片的層的時候最希望的便是有什么快捷的方法可以不用一個一個的去弄。我想過用代碼，可是我做不來。于是，我便很有耐心的給這二十四張圖片插入層以及對應圖片的行為。

其他部分也有漸多漸少修改過，做起來感覺還行。

看到自己完成一個自己設計的小網站時，有大大的欣喜，這居然是自己做出來的網站。原來做網站就是這樣啊！

這時，不禁佩服那些做網站的專業人士，原來做一個網站也是要花費這么的耐心啊，想想我們平時瀏覽的網站，那個做工相比我們自己的個人網站簡直就是大巫見小巫。

第三篇：個人網站制作

設計一個個人網站方法

一、要求：

1．使用Dreamweave網頁工具制作一個個人網站；

2．包含至少四個網頁: 包括首頁、個人簡介、個人相冊等（可隨意設計），網頁之間用超鏈接相連。

3．網頁中要有圖片和文字內容，用表格或框架進行頁面布局；

4．添加至少兩種行為，并為首頁添加背景音樂。

5.在網站中設計一個表單頁面。

6.首頁必須包含頁面標題，動態按鈕導航欄。

下面我們大家統一一下軟件版本，我用的是網頁三劍客cs3版本的，大家可以去迅雷下載，因為我們要用到flash建議大家也按裝好flash。

首先新建一個文件夾，文件夾的名字不能為漢字，做網站所有的路徑都必須用字母或者數字，不能用漢字，我們就用名字吧，譬如說名字張三，那文件夾名字就是zs，如圖打開Dreamweaver軟件，得到圖

做網頁要新建站點，關于站點配置服務器什么的，這里不講了，只講建立站點。

選擇站點——新建站點。

我們建的文件夾就是站點根文件夾。新建站點后得到這樣一個界面

點選高級，得到界面

站點名稱與我們建文件夾得名字相同，zs填進去就可以了 本地根文件夾就是我們新建的那個文件夾，http地址為http://localhost/zs滄州網站建設http://www.tmdps.cn

接下來選擇左側欄里遠程信息

點擊無后面的那個三角，選擇本地網絡，遠端文件夾同樣選擇我們新建的那個文件夾

接下來點選左面菜單里的測試服務器，點選訪問后面那個三角，選擇本地網絡，測試服務器文件夾也為我們建好的文件夾zs，在url前綴后面加上zs

然后點擊確定就可以了得到這樣一個界面。

下面看老師的第一條要求，是要至少四個網頁，那我們就做四個

單擊新建，然后單擊

接下來，選擇

然后單擊創建，接下單擊文件——保存，保存這個文件，保存在我們一開始建好的文件夾里面，保存名字不能是漢字，只能是字母或者數字，因為我們只坐四個網頁，可以簡單一點，把這四個網頁命名為a、b、c、d，或者1、2、3、4，當然一個網站默認的索引首頁名為index，這里也用index，單擊保存，這樣得到第一個頁面，以同樣的方式建剩下的三個頁面，這里我的首頁默認為index.heml，其他三個網頁的名字分別為a.html、b.html、c.html，我們這四個網頁文件已經保存在我們建的文件夾里。

站點中已經有了四個文件。接下來，我們開始編輯index.html。

單擊index.html，顯示為當前頁面。

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

B網頁標題

C網頁標題

改好名字之后，一一保存，這個不多說了，接下來操作index.html。

顯示首頁為當前編輯頁面。

首先為index.html頁面添加背景音樂。

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

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

接下來開始設計頁面布局 這里用表格布局，這個欄叫設計欄，由于大家都不會代碼，所以我們主要在這個欄里操作，下面大家點擊常用里面的表格，就是下面這張圖片

中的這個圖標

得到對話框如圖所示數據： 單擊確定，得到如下界面

這個插入的表格式可以自動調整大小的，大家可以自己試一下，接下來用這些表格布局，給大家看兩個圖標，這個圖標就像是excel中那個合并和拆分單元格是一個意思，左邊那個代表合并單元格，右面那個代表拆分單元格，excel大家都會把，就和那個布局差不錯，我做一個簡單的布局，為了方便，我把這個表格縮小，這個布局很簡單，第二行全部合并，第三行第二三列合并，大家可以根據自己的需要進行拆分合并，還可以在表格里面再次插入表格。

寬度和高度的設置時在代碼里找到

height=””>，其中align表示表格位置，height表示表格高度，大家可以根據自己的需要來填數字，默認是以像素為單位的。

接下來制作導航，這是老師第六條中的第二個要求，注意我在這里給了兩種方法，大家可以先看一下，再決定選擇哪種

我沒看懂什么叫動態按鈕導航條，不知道是讓這個字動呢，還是讓這個字動呢？如果大家嫌麻煩，就直接輸入漢字，結果就是下面這樣的

如果要文字居中顯示可以將這四個框同時選中，然后居中

在水平欄里面選擇

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

創建鏈接，選中首頁兩個字，然后單擊右鍵——創建鏈接，選擇index.html，然后以同樣的方法，給其他三個欄里的文字做鏈接，創建鏈接的文字會有下劃線，同時改變顏色

如果大家不嫌麻煩，教大家用flsh做一個動態的按鈕導航，把光標放在第一行第一個欄里，然后

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

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

這個欄里填入index.html，注意這里的鏈接就是超級鏈接，當你點擊這個按鈕的時候，它就會顯示主頁，我們設置后面三個按鈕的時候，一定要記得，當你文本欄里填入個人簡介字的時候，那你的鏈接就要指向簡介那個頁面，我們這里就是a.html。其他像什么背景色之類的隨意，然后單擊確定。這樣第一個按鈕就做好了，接下來我們自己做剩下的三個按鈕，注意鏈接問題，大家做好后，可以看到自己站點內多了四個swf格式的文件，這四個就是按鈕，保存的時候，有一個文件問是否要保存，一定要點擊是，不然flash不運行了。

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

單擊背景顏色后面那個方框，可

接下來，完成老師的第五個要求，制作表單，這個把光標指向第三行第一個欄

選在表單選項中的。也就是第一個按鈕，這時得到界面

我們把光標指向紅線里面，輸入“用戶名：”然后點擊表單選項中的第二個按鈕彈出對話框，選擇確定，得到界面

同樣方法換行輸入密碼

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

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

接下來插入文字和圖片，在現在的第二行第二列里操作

把光標指向第二行第二列，選擇常用欄

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

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

第四行還有四個欄，大家可以在里面表明作者時間、以及自己的郵箱、QQ等內容，這里我就不寫了。

實際上做到這里，我們幾乎完成了老師的所有要求了就差添加兩種行為了后面還有三個網頁沒做呢，怎么辦啊，后面三個網頁大家還沒做，教大家一個簡單的方法，大家把鼠標指向了。

這個欄的左邊，在表格和邊框之間，我們可以發現，鼠標斜向右首先單擊鼠標左鍵，選中這個表格然后不要移動鼠標，同時單擊右鍵，單擊拷貝，然后這個表格就拷貝好了，打開其他三個頁面，分別粘貼過去，圖像屬性描述不用管，取消，這樣做的好處是它的好處非常多。

大家打開a.html，這個是個人簡介，就是一個圖文混排了，圖文混排我們已經講過了，更何況我們這個頁面里已經有了圖文混排了，大家可以換一張圖片，換一些文字，做一些自我介紹什么的，都可以。，但是我們最好把那個表單刪掉，哪個是表單就不用我說了吧，就是這個了。刪掉之后，選中第三行三個欄，合并就好了，第二個頁面就做好了，接下來我們看第三個頁面，b.html，這個頁面是個人相冊

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

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

注意這個是可以調節大小的，看你想要多大的相冊了。單擊選中，我們會發現右面多出這樣一個界面flash元素

在其中找到

然后單擊后面的img1那里，會發現后面多出一支筆，單擊那個筆，彈出對話框

單擊減號，將img1三個刪掉，然后再單擊加號，會多出一個文件夾標志，單擊文件夾標志，然后彈出對話框

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

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

下面我們講添加行為，打開首頁，單擊圖像選中，然后找到一下命令，看到行為面板下那個醒目的加好了嗎 單擊加號——交換圖像，彈出對話框

單擊瀏覽，在自己電腦中找出一張圖片，單擊確定，存放到站點根目錄下，這樣第一個行為就完成了，當我們鼠標滑過這張圖片的時候，就會變為另一張圖片。下面添加第二個行為，我們將光標指向第二行藍色背景哪一行，然后單擊行為面板下的加號——彈出信息，得到對話框

寫上你好，單擊確定。這樣在我們單擊藍色地帶的時候，就會彈出你好信息框。好了到此為止，就差不多了，以上由滄州網站建設徐俊科技提供。

第四篇：個人網站制作過程

個人網站制作過程

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

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

第五篇：精美個人網站制作

【摘要】

這篇論文是關于我的一個個人網站的設計，首先我先從網

站設計的方向和目的、網站設計的整個流程出發，然后通過自己設 計的這個個人網站作品來說明并演示一個完整的網站制作過程。本 論文詳細的介紹了整個網站設計的全過程。本論文的每一章都是網 站建設的一個步驟，理論和實踐相結合。既有理論、又有實例，把 每一章的實例合在一起，就構成一個大實例。當然，一個好網站的 整個設計過程是不能用短短的幾十頁紙就可以說清楚，所以，在我 的這篇論文中，我詳細的介紹了整個網站中最重要的部分，其中包 括主頁的設計和一部分鏈接頁面的設計。

下載制作個人網站教案.doc

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

點此處下載文檔

文檔為doc格式