第一篇：簡單的網(wǎng)頁制作教程-設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站

題目：設(shè)計(jì)一個(gè)個(gè)人網(wǎng)站

一、要求：

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

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

3．網(wǎng)頁中要有圖片和文字內(nèi)容，用表格進(jìn)行頁面布局； 4．添加至少兩種行為，并為首頁添加背景音樂。

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

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

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

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

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

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

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

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

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

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

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

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

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

單擊新建，然后單擊

接下來，選擇

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

站點(diǎn)中已經(jīng)有了四個(gè)文件。

接下來，我們開始編輯index.html。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在水平欄里面選擇

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

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

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

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

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

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

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

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

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

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

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

同樣方法換行輸入密碼

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

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

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

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

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

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

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

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

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

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

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

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

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

在其中找到

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

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

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

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

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

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

寫上你好，單擊確定。這樣在我們單擊藍(lán)色地帶的時(shí)候，就會彈出你好信息框。

第二篇：網(wǎng)頁制作論文--個(gè)人網(wǎng)站設(shè)計(jì)

網(wǎng)頁制作課程論文

（個(gè)人網(wǎng)站設(shè)計(jì)論文）

姓名：薛金鴿 學(xué)號：105031040025 班級：103212 專業(yè)：市場營銷（電子商務(wù)方向）學(xué)期：2011-2012學(xué)年第2學(xué)期 任課教師：劉新飛

個(gè)人網(wǎng)站策劃書

1.組織機(jī)構(gòu)描述

1.1個(gè)人網(wǎng)站的應(yīng)用背景

網(wǎng)絡(luò)發(fā)展到今天，建立網(wǎng)站已經(jīng)成為一個(gè)很普遍的問題了，對于個(gè)人來說，建設(shè)好時(shí)間的個(gè)性化網(wǎng)站可以更加方便的收集信息，開展更加直接的網(wǎng)絡(luò)交流，使用自己構(gòu)筑的友善平臺，我們可以為自己畢業(yè)后找工作做好充分的準(zhǔn)備，通過自己建設(shè)的網(wǎng)站，用人單位可以更好的去了解你，從而給自己增加了一份很重的砝碼。在我的這個(gè)個(gè)人網(wǎng)站的制作過程中，我選擇了我比較熟悉的大學(xué)生活中的許多內(nèi)容做為我的網(wǎng)站的重要組成部分，這樣相對于其他包括種類齊全的網(wǎng)站，我就有了一定的材料基礎(chǔ)。這是我這個(gè)網(wǎng)站選擇大學(xué)生主題的原因之一。

其次，做為在校大學(xué)生，我知道大學(xué)生現(xiàn)在對什么事物，內(nèi)容，活動等等感興趣，所以，我做起來的時(shí)候相對來說是比較隨手的，我不用像其他的網(wǎng)站那樣去刻意的收集信息，資料，我只要在校園里稍微留意，我就會捕捉到大學(xué)生的興趣點(diǎn)。所以，在整個(gè)網(wǎng)站的設(shè)計(jì)過程中，我廣泛的聽取同學(xué)的意見和建議，不斷的改進(jìn)和提高我的網(wǎng)站的內(nèi)容和質(zhì)量，這些都取得了比較好的效果。

在整個(gè)網(wǎng)站的設(shè)計(jì)過程中，我根據(jù)自己以往的設(shè)計(jì)經(jīng)驗(yàn)和自己找來的資料，又經(jīng)過老師的指點(diǎn)，經(jīng)過了近一個(gè)月的努力，幾經(jīng)易稿，最終做成了我的這個(gè)個(gè)人主頁。.2 個(gè)人網(wǎng)站建設(shè)的目的

在我們的工作、日常生活中，能夠擁有一個(gè)自己的網(wǎng)站，一個(gè)已經(jīng)成為不少人的希望和驕傲。一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這是個(gè)人網(wǎng)站，所以這種需求往往來自于個(gè)人的實(shí)際需求，其中每個(gè)人的實(shí)際需求占了絕大部分[6]。因此如何更好地的了解、分析、明確需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)出來，保證開發(fā)過程按照個(gè)人需求為目的正確項(xiàng)目開發(fā)方向進(jìn)行。不同的網(wǎng)站目的要求通過不同的方式來實(shí)現(xiàn)。一個(gè)展示個(gè)人能力的網(wǎng)站與一個(gè)以花卉種植為主題的網(wǎng)站，以及一個(gè)大型門戶網(wǎng)站和一個(gè)小型企業(yè)網(wǎng)站，其出發(fā)點(diǎn)和建站目的都有所不同，在整個(gè)網(wǎng)站的建設(shè)規(guī)劃方面的要求也是肯定是大不一樣的。因此在規(guī)劃我的這個(gè)網(wǎng)站時(shí)，我選擇了和大學(xué)生的生活和學(xué)習(xí)相關(guān)聯(lián)的主題。

1.3 相關(guān)應(yīng)用軟件選用、技術(shù)采用

在網(wǎng)頁的設(shè)計(jì)過程中，我選用的軟件包括Dreamweavercs5、Fireworks cs5和Photoshopcs5，其中，Dreamweaver 是網(wǎng)頁編輯軟件，F(xiàn)ireworks cs5是圖形/圖像處理軟件，photoshopcs5是圖片處理軟件。它們是Macromedia公司專門為網(wǎng)頁設(shè)計(jì)、制作開發(fā)的系列軟件套件，三者之間可以無縫集成，能夠有效地解決網(wǎng)絡(luò)帶寬問題，是設(shè)計(jì)動畫網(wǎng)頁的最佳工具。

Dreamweaver cs5采用“所見即所得”的直觀設(shè)計(jì)模式，充分尊重設(shè)計(jì)人員的原始意識和想象力。她成功地將網(wǎng)頁設(shè)計(jì)功能中的技術(shù)實(shí)現(xiàn)部分和設(shè)計(jì)部分分離開來，使用戶只需專注于設(shè)計(jì)，而其余的工作由Dreamweavercs5自動完成。另外，還有一點(diǎn)值得說明的是，Dreamweaver cs5可以控制和刪除冗余代碼，減小網(wǎng)頁文件的大小。從而能夠快速上傳和下載。

Fireworkscs4的獨(dú)特之處在于它能夠優(yōu)化、切分圖片映射圖，并提供了功能強(qiáng)大的翻滾圖工具。它是基于WEB應(yīng)用的圖形/圖象處理軟件，提供了一種革命性的新方法來創(chuàng)建WEB圖形，并且具有所有其他圖形處理工具的諸多優(yōu)點(diǎn)。Fireworks cs4的最大優(yōu)勢就在于它在任何時(shí)候可以從任何階段開始設(shè)計(jì)工作，這樣既可以節(jié)約時(shí)間又可以對產(chǎn)品進(jìn)行擴(kuò)展。另外，F(xiàn)ireworks cs4中的諸多功能都是面向WEB應(yīng)用的，因此對于WEB設(shè)計(jì)新手來說也很容易學(xué)習(xí)的。

在我設(shè)計(jì)我的個(gè)人網(wǎng)站的過程中，我選擇了Dreamwearcs5和 Photoshopcs5 Fireworks cs4三種軟件。因?yàn)樽约合驅(qū)τ谄渌能浖碚f，這三個(gè)還算是比較熟悉的。

2．網(wǎng)站的技術(shù)參數(shù)部分

2.1我的導(dǎo)航系統(tǒng)

我所制作的個(gè)人網(wǎng)站的導(dǎo)航系統(tǒng)包括：

1.個(gè)人簡介2.個(gè)人專題4.我的相冊5.網(wǎng)站說明6.給我留言 8.發(fā)送郵件9.鏈接百度10.女生花園

2.2功能模塊的劃分

1．搜索引擎：

根據(jù)瀏覽者的要求，使用主頁上的搜索引擎鏈接到百度，在整個(gè)Internet上進(jìn)行搜索，完成信息的優(yōu)化與提取。

2．論壇：

主要功能是網(wǎng)友和網(wǎng)站之間的交流平臺，也是網(wǎng)友給版主提出意見的主要渠道。在論壇中用戶可以發(fā)表意見，這些意見可以讓所有人看到，也可以只讓版主看到，版主和其他人可以針對留言的內(nèi)容進(jìn)行回復(fù)，只留給版主的留言只有版主能夠回復(fù)，并且版主可以登錄后臺對留言進(jìn)行管理，是否發(fā)表或刪除。

3．發(fā)送電子郵件：

網(wǎng)友可以通過“聯(lián)系我”利用outlook 向版主或其他人發(fā)送電子郵件。4．精品收藏：

在其中展示我喜愛的東西，包括電影、歌曲和一些優(yōu)美的文章。奇文共欣賞，疑義相與析。我只想起到拋磚引玉的作用，讓大家從中認(rèn)識我和了解我，讓一些美好的東西我們大家共同來欣賞。但我增加了管理權(quán)限，我以管理員的身份可以對加入的新內(nèi)容進(jìn)行管理，即允許加入和對其進(jìn)行刪除。

5．留言板：

是一個(gè)我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進(jìn)行交流。就我們感興趣的話題展開討論。和大家進(jìn)行溝通。

2.3 首頁的設(shè)計(jì) 我的網(wǎng)站首頁主要采用簡單大方的設(shè)計(jì)方法，用的是色調(diào)一致的一組圖片做的LOGO和相關(guān)的背景圖片，主要頁面布局如下：

2.4主要欄目的介紹

1．個(gè)人簡介：

介紹版主的一些基本信息，希望各位訪客能夠認(rèn)識版主。2.我的論壇：

此版塊又分為主頁、發(fā)表意見、回復(fù)意見、顯示論壇內(nèi)容、版主后臺管理以及版主的回復(fù)界面。其中發(fā)表意見界面是所有訪客都可以在論壇里面發(fā)表自己的意見，這些意見可以是發(fā)表給所有的訪客，也可以是只發(fā)表給版主，如果只發(fā)表給版主，只有版主可以看到和回復(fù)；回復(fù)意見是所有訪客針對自己感興趣的話題進(jìn)行回復(fù)；這些發(fā)表的意見和回復(fù)可以在顯示論壇內(nèi)容的界面都顯示出來，供大家討論；那些只有版主才能看到的信息在版主的管理界面，這個(gè)界面需要登錄，設(shè)有用戶名和密碼，在這里版主可以對所有評論進(jìn)行發(fā)表或刪除的管理。3.個(gè)人專題：

這里收錄了我平時(shí)搜集的一些文章和音樂，各位訪客可以根據(jù)自己的喜好進(jìn)行閱覽。4.我的相冊：

在這個(gè)板塊可以看到我的照片，班級照片和搜集的校園照片，如果大家喜歡可以收藏。更改照片的時(shí)候只要更新數(shù)據(jù)庫就可以了。5.網(wǎng)站說明：

里面是我對整個(gè)網(wǎng)站的介紹，不太清楚網(wǎng)站構(gòu)架的訪客可以先到這里。6.給我留言：

這是每位訪客針對我的網(wǎng)站情況給我留言，這些留言會直接保存到數(shù)據(jù)庫里面，并且能夠輕松的讀取。7.發(fā)送郵件：

各位訪客可以通過outlook向版主或者其他人發(fā)送電子郵件。8.鏈接百度：

如果訪客想在互聯(lián)網(wǎng)上查找東西，可以直接點(diǎn)擊這里。9.女生花園：

收集了一些女生喜歡的東西，如果你是女生，可以進(jìn)來看看。

2.5二級頁面的設(shè)計(jì)

我的網(wǎng)站主頁內(nèi)容簡單所以主要內(nèi)容再二級頁面里要有詳細(xì)的說明，具體說明如下：

2.5.1個(gè)人簡介

本模塊是個(gè)人簡介部分，每個(gè)個(gè)人網(wǎng)站都會有作者介紹。在這個(gè)模塊訪客會了解到作者的一些基本信息.2.5.2文學(xué)欣賞

這個(gè)版塊主要介紹我自己喜歡的相關(guān)文學(xué)作品。此版塊的界面如圖所示：

圖3.6 文學(xué)欣賞界面

2.5.3快樂音樂

進(jìn)入此版塊，界面如圖所示：

通過在數(shù)據(jù)庫中存放音樂路徑，達(dá)到在網(wǎng)頁上播放的效果。在音樂的首頁上放置了歌曲的名字，網(wǎng)友無需登錄，即可收聽自己喜歡的歌曲。

音樂界面

2.5.4我的相冊版塊

個(gè)人網(wǎng)站中又一亮點(diǎn)就是個(gè)人相冊的設(shè)置，在我的相冊里，放置了我自己的照片、班級照片和校園照片。

相冊里面的這三個(gè)版塊具有相同的版面設(shè)計(jì)，如下圖所示：

相冊界面

2.5.5網(wǎng)站說明版塊

此版塊是我根據(jù)自己的網(wǎng)站結(jié)構(gòu)對整個(gè)網(wǎng)站以及每個(gè)版塊所做的網(wǎng)站結(jié)構(gòu)和功能的說明，以及網(wǎng)站和作者版權(quán)說明。如下圖所示：

網(wǎng)站說明界面

如果網(wǎng)友不清楚網(wǎng)站的構(gòu)架，可以查看此版塊。2.5.6給我留言版塊

留言板是目前最為流行的網(wǎng)絡(luò)應(yīng)用之一，使用留言板，可以為留言者提供發(fā)言的機(jī)會，讓他們能夠及時(shí)、準(zhǔn)確地交換自己的觀點(diǎn)。

2.5.7留言板主界面

完整的留言板具有發(fā)表留言和察看別人留言的功能，如圖所示的留言板主界面index1.ASP，可由此進(jìn)入留言界面和察看留言界面。

留言主界面

在主界面中存有全部留言的作者和主題，點(diǎn)擊你想察看的主題就會進(jìn)入察看留言界面，點(diǎn)擊 “發(fā)表帖子”進(jìn)入留言界面。

3．網(wǎng)站的維護(hù)方案

3.1域名的申請

域名（Domain Name），是由一串用點(diǎn)分隔的名字組成的,Internet上提供用戶訪問某網(wǎng)站或網(wǎng)頁的路徑，用于在數(shù)據(jù)傳輸時(shí)標(biāo)識計(jì)算機(jī)的電子方位（有時(shí)也指地理位置）。

域名申請的含義

“域名申請”：為保證每個(gè)網(wǎng)站的域名或訪問地址是獨(dú)一無二的，需要向統(tǒng)一管理域名的機(jī)構(gòu)或組織注冊或備檔的一種行為。也就是說，為了保證網(wǎng)絡(luò)安全和有序性，網(wǎng)站建立后為其綁定一個(gè)全球獨(dú)一無二的域名或訪問地址，必須向全球統(tǒng)一管理域名的機(jī)構(gòu)或組織去注冊或者備檔方可使用的一種行為。由于域名是網(wǎng)站必不可少的“門牌號”，域名可用于：網(wǎng)站地址訪問、電子郵箱、品牌保護(hù)等用途，所以很多企業(yè)或個(gè)人均會進(jìn)行域名申請。

3.2空間或者主機(jī)的租用

有了自己的域名這個(gè)門牌號后，就需要一個(gè)空間來存放自己的網(wǎng)站，也就是虛擬主機(jī)。一般虛擬主機(jī)提供商都向用戶提供100MB、500MB、3GB等虛擬主機(jī)空間。我的個(gè)人網(wǎng)站選擇100-300MB的虛擬主機(jī)空間。購買虛擬主機(jī)主要考慮幾個(gè)方面：售后服務(wù)、穩(wěn)定性、訪問速度等。首先我選擇在萬網(wǎng)上注冊一個(gè)域名然后申請租用空間建立個(gè)人網(wǎng)站。

3.3網(wǎng)站鏈接穩(wěn)定性測試

超級鏈接對于網(wǎng)站用戶而言意味著能不能流暢的使用整個(gè)網(wǎng)站提供的服務(wù)，因而鏈接將作為一個(gè)獨(dú)立的項(xiàng)目進(jìn)行測試。網(wǎng)站能夠正確運(yùn)行首先要保證鏈接能夠連貫運(yùn)行。

網(wǎng)站的運(yùn)行中整個(gè)系統(tǒng)是否運(yùn)行正常，我主要采用將測試網(wǎng)站長時(shí)間運(yùn)轉(zhuǎn)進(jìn)行測試，派生出執(zhí)行程序所有功能需求的輸入條件，從而導(dǎo)出測試用例，進(jìn)行測試，網(wǎng)站中的每個(gè)版塊的每個(gè)頁面都出現(xiàn)了很多的鏈接，所以每個(gè)版塊要先進(jìn)行單獨(dú)測試，單獨(dú)測試完成后，根據(jù)個(gè)版塊之間的連接結(jié)構(gòu)再進(jìn)行總體測試，從而達(dá)到網(wǎng)站的整體的運(yùn)營能夠順利地進(jìn)行。在測試這個(gè)環(huán)節(jié)時(shí)，沒有特定的測試方法，就要做到細(xì)心，做到網(wǎng)站的順利運(yùn)行。

總結(jié)：

通過這次個(gè)人網(wǎng)站設(shè)計(jì)的制作，我學(xué)會了很多東西，也了解了很多關(guān)于個(gè)人網(wǎng)站的資料。不知不覺網(wǎng)頁設(shè)計(jì)的課程將要結(jié)束了，這門課程所包含內(nèi)容的豐富是讓我從沒有想到的。在整個(gè)的學(xué)習(xí)過程中，我學(xué)習(xí)了Dreamwave、Firework、Html語言、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容。到現(xiàn)在為止，我還是很慶幸能夠?qū)W到這么多的內(nèi)容。

雖然整個(gè)網(wǎng)頁的結(jié)構(gòu)還有很多不足，還有一些板塊沒有開通，但是我的確能夠感到在我們制作過程中技能的提高。整個(gè)網(wǎng)站的不足我想是沒有使用到一些動態(tài)網(wǎng)頁的知識，使得日后網(wǎng)站的維護(hù)較為繁雜。希望以后可以自學(xué)動態(tài)網(wǎng)站的課程，從而彌補(bǔ)自己在動態(tài)網(wǎng)絡(luò)語言方面的不足。這樣以后可以利用業(yè)余的時(shí)間為自己或者公司，根據(jù)自己的愛好建立一個(gè)個(gè)人網(wǎng)站。

[參考文獻(xiàn)] [1] 袁曉紅.《網(wǎng)頁設(shè)計(jì)與制作》[M].高等教育出版社 2006 385頁~389頁 [2] 甘登岱.《我也能掌握Flash編程》[M].航空工業(yè)出版社 2000 [3] 趙更生.《Flash動畫制作培訓(xùn)實(shí)錄》[M].人民郵電出版社 2004 [4] 鮑嘉.盧堅(jiān).陳丁法《Dreamweaver CS5網(wǎng)頁設(shè)計(jì)從入門到精髓》[M].中國電力出版社2010 [5] 張成龍.《網(wǎng)頁制作一點(diǎn)通》.延邊人民出版社

[6] 劉瑞新，《ASP動態(tài)網(wǎng)站開發(fā)、畢業(yè)設(shè)計(jì)指導(dǎo)及實(shí)例》[M].機(jī)械工業(yè)出版社 2000 [7] 石曉燕、蘇萍《網(wǎng)頁設(shè)計(jì)基礎(chǔ)》[M].清華大學(xué)、交通出版社 20 04 [8] 王玉芬.《網(wǎng)站規(guī)劃與設(shè)計(jì)》[M].西北工業(yè)出版社 2003 [9] 謝希仁.計(jì)算機(jī)網(wǎng)絡(luò)(第5版)[M].北京：電子工業(yè)出版社,2008

第三篇：自學(xué)手機(jī)網(wǎng)站開發(fā)教程 手機(jī)網(wǎng)頁設(shè)計(jì)和制作（本站推薦）

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】

自學(xué)手機(jī)網(wǎng)站開發(fā)教程 手機(jī)網(wǎng)頁設(shè)計(jì)和制作

本手機(jī)網(wǎng)站開發(fā)教程主要介紹：手機(jī)網(wǎng)頁設(shè)計(jì)和制作的七個(gè)方面的知識，讓你避免走一些現(xiàn)在的手機(jī)網(wǎng)頁的彎路，學(xué)完本教程后，你就能對手機(jī)網(wǎng)頁的制作和設(shè)計(jì)有大概的了解，然后有針對性地學(xué)相應(yīng)知識。

1.手機(jī)網(wǎng)頁的標(biāo)記語言

WML

因?yàn)閃ML大部分針對早期和低端的手機(jī)，現(xiàn)在已經(jīng)逐步被其他的技術(shù)取代了，現(xiàn)在學(xué)習(xí)手機(jī)網(wǎng)頁設(shè)計(jì)制作完全可以忽略WML。

XHTML

未來智能手機(jī)的市場份額會越來越大，考慮到這點(diǎn)，現(xiàn)在進(jìn)行手機(jī)網(wǎng)頁設(shè)計(jì)制作時(shí)，我們會用到更加熟悉的標(biāo)記語言Xhtml。

現(xiàn)在大部分智能手機(jī)的瀏覽器都能正確處理Xhtml，它會識別兩種類型的Html。

① Xhtml：基礎(chǔ)的，和桌面瀏覽器相同的Xhtml

② Xhtml-MP：針對智能手機(jī)的Xhtml

這兩種類型的不同之處，Xhtml-MP包含比較少的要素和相對寬松的限制，能適合手機(jī)平臺的渲染，現(xiàn)在很多手機(jī)網(wǎng)頁設(shè)計(jì)制作直接用Xhtml，也沒什么大問題。

2.手機(jī)類型

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】

手機(jī)市場上既有非常高端的iPhone手機(jī)和谷歌的Android手機(jī)，也有諾基亞一些單色點(diǎn)陣顯示的低端機(jī)。這些低端機(jī)在瀏覽手機(jī)網(wǎng)頁時(shí)有很多的限制，如屏幕分辨率、渲染Xhtml的性能等，因此如果你的手機(jī)網(wǎng)頁是針對這部分用戶，最好還是用WML。

另一方面，類似于iPhone和Nexus One這種高端智能機(jī)，擁有可以和桌面瀏覽器相媲美的渲染網(wǎng)頁的性能。對這部分用戶而言，良好的用戶體驗(yàn)是很重要的，受限于手機(jī)的傳輸速度，如果直接用一般的電腦上瀏覽的網(wǎng)頁來代替手機(jī)網(wǎng)頁，對手機(jī)網(wǎng)頁的目標(biāo)客戶來說，并非明智之舉。

可以把手機(jī)根據(jù)屏幕尺寸分成幾種常見的類型，如：

x 160 pixels

176 x 220 pixels

240 x 320 pixels

320 x 480 pixels

3.手機(jī)網(wǎng)頁的目標(biāo)群體

任何網(wǎng)站設(shè)計(jì)網(wǎng)頁時(shí)都應(yīng)該明白自己的目標(biāo)群體，以便向他們傳輸最合適的信息。這點(diǎn)在進(jìn)行手機(jī)網(wǎng)頁設(shè)計(jì)制作時(shí)更為重要。因?yàn)槟悴粌H要知道你的目標(biāo)群體，還要知道他們?yōu)g覽手機(jī)網(wǎng)頁時(shí)的情景。瀏覽傳統(tǒng)的網(wǎng)站，訪客會坐在桌上，有著大分辨率的屏幕。手機(jī)網(wǎng)頁的訪客則有可能是在排隊(duì)、等交車、坐在地鐵等。

手機(jī)網(wǎng)頁的目標(biāo)群體，谷歌的開發(fā)者將看手機(jī)網(wǎng)頁人群分為三大類，這對我們進(jìn)行手機(jī)網(wǎng)頁的設(shè)計(jì)和制作，很有參考意義。

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】

4.根據(jù)具體需要提供網(wǎng)站內(nèi)容

一個(gè)很常見的誤區(qū)是很多網(wǎng)頁開發(fā)者認(rèn)為只需要簡單的設(shè)置，就可以將一個(gè)傳統(tǒng)的網(wǎng)頁變成可以適應(yīng)手機(jī)瀏覽的網(wǎng)頁，他們認(rèn)為只需要在CSS樣式表將media=”screen”變成media=”handheld”就能使網(wǎng)頁神奇般地適用于手機(jī)。

這是錯(cuò)誤的想法。

雖然針對手機(jī)用戶變更網(wǎng)頁的CSS可以過濾一部分的內(nèi)容，或者一些CMS網(wǎng)頁也提供了相應(yīng)的轉(zhuǎn)換插件。但這些方案并不完善。

W3c定義了“一個(gè)網(wǎng)站”的概念，意思是手機(jī)網(wǎng)頁不一定要提供和傳統(tǒng)網(wǎng)站完全一樣的內(nèi)容和設(shè)計(jì)，而是要根據(jù)手機(jī)的性能、帶寬等方面的不同提供一些差異化服務(wù)。

根據(jù)這個(gè)定義，一些傳統(tǒng)網(wǎng)頁的內(nèi)容和功能不能在手機(jī)上實(shí)現(xiàn)是很合理的。不同手機(jī)能處理的內(nèi)容和功能也都是不一樣的。所以也可以根據(jù)這些手機(jī)進(jìn)行相應(yīng)的網(wǎng)頁制作。

5.選擇域名

為手機(jī)網(wǎng)頁選擇什么域名取決于你的目標(biāo)群體是如何進(jìn)入網(wǎng)站的。這里有三種域名可供選擇：

A：為手機(jī)網(wǎng)頁使用獨(dú)立域名

B:為手機(jī)網(wǎng)頁使用子域名

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】 網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】

C：為手機(jī)網(wǎng)頁注冊mobi的頂級域名

D：判斷客戶端，并自動顯示對應(yīng)內(nèi)容

6.為手機(jī)網(wǎng)頁驗(yàn)證標(biāo)記語言

電腦的網(wǎng)頁瀏覽器對錯(cuò)誤比較寬容，一些html標(biāo)記的忘記書寫或者沒有正確嵌套在電腦瀏覽器都會正確顯示，當(dāng)然容錯(cuò)率高意味著消耗更高的cpu和內(nèi)存。

手機(jī)瀏覽器的性能還無法和電腦相提并論，所以手機(jī)瀏覽器對手機(jī)網(wǎng)頁的錯(cuò)誤要嚴(yán)格一些。所以在設(shè)計(jì)和制作手機(jī)網(wǎng)頁時(shí)，你必須不斷進(jìn)行檢查、驗(yàn)證和糾錯(cuò)。驗(yàn)證手機(jī)網(wǎng)頁和驗(yàn)證一般傳統(tǒng)的網(wǎng)頁沒什么區(qū)別，如果你使用Xhtml編寫，可以使用相同的工具。W3C驗(yàn)證器可以驗(yàn)證一些簡單的錯(cuò)誤，當(dāng)然這里有一個(gè)更適合驗(yàn)證手機(jī)網(wǎng)頁的版本。

7.為手機(jī)網(wǎng)頁不斷測試

當(dāng)通過了手機(jī)網(wǎng)頁的驗(yàn)證之后，就要針對幾種不同的手機(jī)進(jìn)行各種測試了。用電腦的瀏覽器雖然可以進(jìn)行模擬測試，但是并不完善。這種方式通過的手機(jī)網(wǎng)頁不能適用于某些手機(jī)。

有些手機(jī)文件尺寸的限制可能會很小，所以你制作的手機(jī)網(wǎng)頁在這些設(shè)備上甚至無法顯示。另外瀏覽器支持的文件類型也會不同，支持的圖像格式也會不同。測試時(shí)候手機(jī)網(wǎng)頁當(dāng)然不可能擁有所有手機(jī)，所以制作網(wǎng)頁時(shí)可以使用一些替代手段。

網(wǎng)站建設(shè)_app開發(fā)_手機(jī)網(wǎng)站開發(fā)【國互網(wǎng)】

第四篇：個(gè)人網(wǎng)站網(wǎng)頁制作論文

個(gè)人網(wǎng)站網(wǎng)頁

制 作 論 文

學(xué)院： 專業(yè)： 姓名： 學(xué)號：

摘要

本文就個(gè)人網(wǎng)站的規(guī)劃與建設(shè)，以軟件工程的方法對全過程進(jìn)行了分析與研究。本文的主要工作集中在：

1.對Web頁進(jìn)行概述，主要是對Internet的歷史和發(fā)展作了回顧，并對Web頁的定義和特性進(jìn)行闡述。并對網(wǎng)站開發(fā)過程中使用的開發(fā)工具和技術(shù)作了簡要的介紹。

2.對網(wǎng)站建設(shè)中提及到的術(shù)語進(jìn)行了解釋，并對個(gè)人網(wǎng)站的由來和發(fā)展進(jìn)行了討論。

3.對自己的個(gè)人網(wǎng)站從規(guī)劃到建設(shè)進(jìn)行了詳細(xì)的分析。

4.使用ASP＋I(xiàn)IS＋Access技術(shù)實(shí)現(xiàn)了我的網(wǎng)站的各種功能，其中和數(shù)據(jù)庫的連接使用到了ODBC技術(shù)。

5.就網(wǎng)站建設(shè)提出了自己的觀點(diǎn)與建議。

【關(guān)鍵詞】 網(wǎng)站 ASP SQL Server 風(fēng)格 創(chuàng)意

一、引言

在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對社會發(fā)展的推動遠(yuǎn)為復(fù)雜而巨大。目前，我國上網(wǎng)的人口已近一個(gè)億，成立世界上網(wǎng)民最多的國家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖象、聲音、動畫和視頻的信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點(diǎn)，無可置疑，網(wǎng)站已成為最吸引人的也最有效的信息傳遞手段和方式。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個(gè)人網(wǎng)站也成為了一種時(shí)尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。

（一）Web頁概述

1、認(rèn)識Web

Web(World Wide Web，簡稱，其意思就是采用http超文本傳輸協(xié)議訪問新浪網(wǎng)的首頁，由于網(wǎng)頁均是通過http超文本傳輸協(xié)議進(jìn)行訪問，默認(rèn)下，“http://”可以省略不輸。

5、IP地址

為了使互聯(lián)網(wǎng)上的電腦主機(jī)在通信時(shí)能夠相互識別，每臺主機(jī)都分配一個(gè)能表示其位置的IP（Internet Protocol）地址，這如同公用電話網(wǎng)中電話的號碼一樣。IP地址是由專門的互聯(lián)網(wǎng)機(jī)構(gòu)來分配。IP地址具有惟一性，是由32位二進(jìn)制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點(diǎn)分隔，在實(shí)際之中常轉(zhuǎn)換成十進(jìn)制數(shù)表示。

（二）個(gè)人網(wǎng)站的由來和發(fā)展

互聯(lián)網(wǎng)在中國的出現(xiàn)只有短短七年時(shí)間，1994年中國科學(xué)院高能物理研究所設(shè)立了國內(nèi)第一個(gè)Web服務(wù)器，推出一個(gè)叫做“中國之窗”的網(wǎng)頁，這可能是國內(nèi)Internet上出現(xiàn)的第一個(gè)Web網(wǎng)頁，1995年開始，中國教育科研網(wǎng)，中國科技網(wǎng)，中國公用計(jì)算機(jī)互聯(lián)網(wǎng)以及中國金橋網(wǎng)這構(gòu)成中國數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡(luò)相繼建成，使互聯(lián)網(wǎng)在中國開始真正進(jìn)入社會生活之中。

這時(shí)期，個(gè)人網(wǎng)站出現(xiàn)的條件還很不成熟，國內(nèi)上網(wǎng)的人數(shù)很少，也缺乏支持個(gè)人建站的環(huán)境，用戶很難找到理想的個(gè)人主頁存放地。

個(gè)人網(wǎng)站發(fā)展的第二階段是從1997年初到1998年，這段時(shí)間，中國網(wǎng)民數(shù)量飛速增長，個(gè)人網(wǎng)站日漸繁榮，個(gè)人主頁的數(shù)量急劇增加。同時(shí)，越來越多的商業(yè)網(wǎng)站開始免費(fèi)提供個(gè)人主頁空間，這些良好的外部極大地促進(jìn)了個(gè)人網(wǎng)站的發(fā)展，涌現(xiàn)了一批很著名的個(gè)人網(wǎng)頁，從1998年下半年開始，隨著互聯(lián)網(wǎng)應(yīng)用的深入的普及，隨著眾多主頁制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。

（三）我的個(gè)人網(wǎng)站的設(shè)計(jì)與規(guī)劃

1、明確架設(shè)網(wǎng)站的目的及客戶要求

通常情況下，架設(shè)個(gè)人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達(dá)個(gè)人在商業(yè)、科技、交際、生活等方面的信息需求或者進(jìn)行信息的交流，具有較強(qiáng)的目的性，我的個(gè)人網(wǎng)站一般體現(xiàn)在：為了展示自己的風(fēng)采，讓大家和我一起分享我的心得與經(jīng)驗(yàn)，讓和我有共同愛好的朋友有一個(gè)傾訴的地方。

2、我的個(gè)人網(wǎng)站概貌

因?yàn)槭莻€(gè)人網(wǎng)站，所以只是選擇了自己擅長和喜愛的內(nèi)容，在突出自己的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計(jì)技術(shù)和數(shù)據(jù)庫技術(shù)。因此將網(wǎng)站設(shè)計(jì)分為前臺頁面展示平臺和后臺在線管理平臺。

3、功能劃分

網(wǎng)站設(shè)計(jì)有新聞更新，瀏覽者可以在首頁瀏覽自己喜歡的新聞，并且可以在留言板和大家交流，在后臺管理頁面中，通過身份認(rèn)證，管理員——我，可以對網(wǎng)站信息進(jìn)行管理。站內(nèi)的其它頁面均是我自己的精心收藏，與大家一起分享。

4、功能描述(1)新聞

嵌入百度新聞每日更新代碼，使用在本站首頁顯示今日國內(nèi)國際新聞和體育新聞，供瀏覽者瀏覽。

(2)留言板

是一個(gè)我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進(jìn)行交流。就我們感興趣的話題展開討論。和大家進(jìn)行溝通。

(3)后臺管理頁面 是我管理和添加到新內(nèi)容的地方，為了方便實(shí)現(xiàn)信息的經(jīng)常更新，我設(shè)計(jì)了這個(gè)管理頁面，經(jīng)過身份認(rèn)證后我可以進(jìn)入網(wǎng)站對其中的信息進(jìn)行管理。

(4)日記

在其中展示我喜愛的東西，包括我的日記、精品文章、社會文化和一些雜七雜八的文章。奇文共欣賞，疑義相與析。我只想起到拋磚引玉的作用，讓大家從中認(rèn)識我和了解我，讓一些美好的東西我們大家共同來欣賞。

(5)相冊

在其中展示漂亮的圖片，包括我的照片、我的同學(xué)、風(fēng)景照片、妹眉帥哥欄目。讓大家一起來欣賞人物、風(fēng)景風(fēng)采。

(6)音樂

在其中展示個(gè)人喜歡的歌曲，朋友們可以在里面點(diǎn)播自己喜歡的歌。(7)頁面組織和數(shù)據(jù)庫設(shè)計(jì)

在明確了我的個(gè)人網(wǎng)站的風(fēng)格和定位后，就是網(wǎng)站的材料組織以及網(wǎng)站的頁面設(shè)計(jì)和數(shù)據(jù)庫設(shè)計(jì)。

建立一個(gè)網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。網(wǎng)站的題材確定后，并且收集和組織了許多相關(guān)的資料內(nèi)容，但如何組織內(nèi)容才能吸引網(wǎng)友們來瀏覽網(wǎng)站呢？欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。因此我將自己的個(gè)人網(wǎng)站分為五個(gè)欄目，分別是關(guān)于我、相冊、日記、音樂、留言。

三、詳細(xì)設(shè)計(jì)

1、界面設(shè)計(jì)（1）相冊

是一個(gè)個(gè)人相片和精彩圖片展示的地方，在相冊中，我們可以了解到站長的個(gè)人風(fēng)采和自己喜歡的圖片。a、功能

利用ASP對象語句顯示圖片，讓大家可以看見所有圖片的縮略圖，同時(shí)每個(gè)圖片都有快照功能，可以瀏覽圖片的全圖。

b、組成構(gòu)造

相冊結(jié)果顯示頁面 photo.asp：用來顯示所有圖片，同時(shí)還具備圖片的分類功能和圖片單個(gè)瀏覽功能。

站長基本信息顯示頁面 include.asp： 數(shù)據(jù)庫連接頁面 conn.asp(2)日記

是一個(gè)記錄個(gè)人日記和精品收藏文章的地方，供給大家一起分享。a、功能

利用ASP對象語句分類顯示日記或文章記錄，讓大家瀏覽到最新的日記或文章

b、組成結(jié)構(gòu)

日記或文章顯示頁面 diary.asp：顯示所有日記或文章，同時(shí)還具備顯示不同子類日記或文章

站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp c、日記頁面瀏覽效果圖，如圖12。(3)、音樂

是一個(gè)音樂收藏和音樂欣賞的地方。a、功能

利用ASP對象語句來顯示歌曲曲目、演唱人和在線播放功能。b、組成結(jié)構(gòu)

歌曲顯示播放頁面 media.asp：完成曲目的顯示和播放功能的頁面。站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp(4)、留言本

是一個(gè)我與大家談心交流的地方，在留言板中，我們可以暢所欲言，和大家進(jìn)行交流。就我們感興趣的話題展開討論。和大家進(jìn)行溝通。

a、功能

利用SQL語法過濾特定的用戶留言意見，讓站長可以針對某位特定用戶所發(fā)表的意見作出獨(dú)立的回答，同時(shí)，用戶在發(fā)表個(gè)人意見時(shí)，若認(rèn)為意見內(nèi)容涉及敏感的話題或是意見內(nèi)容涉及私人隱私，都可用“悄悄話”的方式發(fā)言，這些“悄悄話”將不會被顯示出來讓大家看到，當(dāng)然，站長擁有管理的能力，只要以密碼登錄管理模式，就可以進(jìn)行各個(gè)用戶的單獨(dú)意見回復(fù)，而且還能看到用戶所留下的“悄悄話

b、組成構(gòu)造

意見留言結(jié)果網(wǎng)頁gbook.asp：用來顯示用戶發(fā)言與站長回復(fù)內(nèi)容，同時(shí)還具備查看留言和發(fā)表留言兩個(gè)功能。

站長基本信息顯示頁面 include.asp 數(shù)據(jù)庫連接頁面 conn.asp

(三)、關(guān)鍵代碼設(shè)計(jì)

1、分頁功能模塊代碼

<% if not rs.eof then rs.MoveFirst '注意放到前面來,否則到任何頁總是在第一個(gè)記錄上

end if rs.pagesize=MaxPerPage '設(shè)置每頁最多顯示多少條記錄

If trim(Request(“Page”))<>“" then '如果請求的頁次不為空

CurrentPage= CLng(request(”Page“))'clng是轉(zhuǎn)換成長整型數(shù)據(jù)類型,并賦值到當(dāng)前頁次上

If CurrentPage> rs.PageCount then '如果當(dāng)前頁次大于總頁數(shù),則將最大頁次賦值到當(dāng)前頁次上

CurrentPage = rs.PageCount

End If Else

CurrentPage= 1 '一切條件不成立,將當(dāng)前頁設(shè)為第一頁 End If totalPut=rs.recordcount '將總記錄賦值于TOTALPUT

if CurrentPage<>1 then '如果當(dāng)前頁數(shù)不等于第一頁

if(currentPage-1)*MaxPerPage

rs.move(currentPage-1)*MaxPerPage '相對當(dāng)前記錄數(shù)向后移動

dim bookmark '定義書簽變量

bookmark=rs.bookmark '將當(dāng)前記錄的標(biāo)簽賦于變量BOOKMARK上

end if

end if

dim n,k

if(totalPut mod MaxPerPage)=0 then '總記錄數(shù)與每頁最大記錄數(shù)求余的結(jié)果為零時(shí),則N返回整數(shù)頁次,否則再加一.n= totalPut MaxPerPage

else

n= totalPut MaxPerPage + 1

end if %>

2、圖片顯示功能模塊代碼

<% cid=request(”id“)if cid=”“ then sql=”select * from HN_pro order by id desc“ else sql=”select * from HN_pro where cstr(class)='“&cid&”' order by id desc“ end if

else

rsnews.AbsolutePage=ToPage

intCurPage=ToPage

end if

else

rsnews.AbsolutePage=1

intCurPage=1

end if intCurPage=CInt(intCurPage)k=1 do while Not rsnews.eof and k<6 %>

<%for n=1 to 6%>

<% rsnews.MoveNext if rsnews.eof then exit for if rsnews.eof then exit do next %>

“ rel=”lightbox[plants]“> “ width=”49“ height=”49“ border=”0“>

3、發(fā)表留言提交內(nèi)容判斷模塊代碼 <% if request(”action“)=”“ then response.redirect”gbook.asp?action=show“ if request(”action“)=”post“ then dim bookname dim bookwhere dim bookpic bookname=request(”name“)bookwhere=request(”where“)bookpic=request(”pic“)bookface=request(”face“)bookip=request.ServerVariables(”REMOTE_ADDR“)if bookname=”“ then Response.Write ”“

Response.End %>

（四）、網(wǎng)站管理系統(tǒng)

1、完成站長對網(wǎng)站信息管理及更新的系統(tǒng)，包括以下幾部分：（1）管理登陸頁面Index.asp（2）相冊管理頁面Admin_pro.asp（3）日記管理頁面Admin_new.asp（4）音樂管理頁面Admin_down.asp（5）留言管理頁面GuestBook.asp

2、管理登陸

管理系統(tǒng)的登陸頁面，主要用于管理登陸和判斷用戶是否已注冊。（1）其中判斷是否是非法登陸的代碼為： <% admin_pass=md5(admin_pass)set rs=server.createobject(”adodb.recordset“)sql=”select * from admin where admin_name='“&admin_name&”' and admin_pass='“&admin_pass&”'“

rs.open sql,conn,1,3

if rs.eof then response.write”“

else

session(”admin_name“)=request(”admin_name“)

session(”loc“)=1

response.redirect ”admin.asp“ end if rs.close %>（2）其中驗(yàn)證碼驗(yàn)證代碼：

<% dim verifycode,verifycode2 if verifycode<>verifycode2 then response.write”“ founderr=true else session(”verifycode“)=”“ %>

3、主要功能程序段（1）打開數(shù)據(jù)庫 <% set conn = Server.CreateObject(”ADODB.Connection“)conn.open ”YourDSNName“,”username“,”password“ %>（2）數(shù)據(jù)庫查詢操作 大類查訊

setrs=server.CreateObject(adodb.recordset)小類查詢 dimrs2 setrs2=server.CreateObject(adodb.recordset)rs2.openselectnclass,nclassidfromnclasswhereanclassid=&rs(anclassid)&orderbynclassidorder,conn,1,1 dowhilenotrs2.eof response.writeAhref=class.aspaid=&rs(anclassid)&&nid=&rs2(nclassid)&&trim(rs2(nclass))&A rs2.movenext loop（3）添加記錄操作

setrs=server.CreateObject(adodb.recordset)可寫方式

rs.openselectbookid,username,zhuangtai,zongerfromactions,conn,1,3 rs.addnew 添加一條新記錄 rs(bookid)=bookid 添加相應(yīng)的記錄 rs(username)=username ???? rs(zhuangtai)=6 rs(zonger)=0 rs.update 更新數(shù)據(jù)庫（4）刪除記錄操作

從表actions中刪除actionid匹配的記錄 conn.executedeletefromactionswhereactionid= &request.QueryString(actionid)

四、編碼、測試與維護(hù)

（一）測試與維護(hù)

1、IIS(Internet 信息服務(wù))安裝配置

可以在”添加或刪除程序 >>添加/刪除Windows組件“對話框中把”Internet 信息服務(wù)(IIS)“前的勾選中，點(diǎn)”下一步“進(jìn)行安裝就行了(注：在這之前應(yīng)把系統(tǒng)安裝盤放到光驅(qū))。IIS 裝好之后再作一下簡單的配置。定位到”開始>>管理工具>>Internet 信息服務(wù)(IIS)管理器“，打開IIS管理器。在”本地計(jì)算機(jī)>>網(wǎng)站>>默認(rèn)網(wǎng)站“上右鍵單擊，在快捷菜單里選”屬性“(或者直接在操作菜單下選”屬性“)，彈出如下對話框圖16: 圖16 切換到”主目錄“標(biāo)簽(圖2)，重新選擇網(wǎng)站根目錄(我選擇的是E盤下的my web目錄)，默認(rèn)是”系統(tǒng)盤:Inetpubwwwroot“,因?yàn)橄到y(tǒng)盤不宜放太多的非系統(tǒng)文件，所以在這里重設(shè)默認(rèn)網(wǎng)站要目錄，如果嫌麻煩可以跳過這步。再切換到”文檔“標(biāo)簽，通過”添加“、”刪除“、”上移“、”下移 “，把站點(diǎn)的默認(rèn)文檔設(shè)置如圖17：

圖17 可能有些朋友會疑惑，設(shè)置默認(rèn)內(nèi)容文檔有什么作用？細(xì)心的朋友應(yīng)該會發(fā)現(xiàn)，在瀏覽一些大網(wǎng)站的首頁時(shí)用它的一級域名就行了，并不需要指定請求頁的文件名，這就是設(shè)置了默認(rèn)內(nèi)容文檔的緣故，它的作用就是在瀏覽器請求沒有指定文檔的名稱時(shí)，將默認(rèn)文檔提供給瀏覽器。要得到更詳盡的解釋說明，可以點(diǎn)擊圖3中的“幫助”。之所以有這步，是因?yàn)榫W(wǎng)站的默認(rèn)內(nèi)容頁中沒有index.asp，不大符合國人習(xí)慣。

2、Dream weaver測試站點(diǎn)和用IIS測試本地站點(diǎn)

Dream weaver MX提供了全面檢測站點(diǎn)的功能，它比檢測鏈接更全面。全面地檢測內(nèi)部、外部鏈接、去除錯(cuò)標(biāo)簽、空標(biāo)簽、多余的標(biāo)簽等，它的使用相當(dāng)簡單，使用全面檢測站點(diǎn)功能如下：

（1）、選擇菜單中【站點(diǎn)】的【報(bào)告】命令，打開一個(gè)窗口。

（2）、選擇檢測范圍，在【報(bào)告】選項(xiàng)中有四個(gè)內(nèi)容供選擇：Current Document、Entire Local Site、Select Files in site、Folder。

（3）、對工作流方面的信息進(jìn)行檢測。

（4）、對HTML文件的信息做出檢查。

把編好的網(wǎng)站文件復(fù)制到D:/my web文件夾中，可以打開瀏覽器，在地址欄中輸入http://localhost/my web/index.asp ,就會看見網(wǎng)站了。

3、維護(hù)

網(wǎng)站建成后并不意味著網(wǎng)站建設(shè)的結(jié)束，網(wǎng)站內(nèi)容需要不斷更新，這樣才會不斷的吸引更多的瀏覽者訪問，才能成為一個(gè)優(yōu)秀的網(wǎng)站。通過FTP軟件將更新過的網(wǎng)頁上傳到服務(wù)器或通過Dream weaver MX來遠(yuǎn)程管理站點(diǎn)，同時(shí)還要認(rèn)真回復(fù)瀏覽者的電子郵件和留言，做到有問比答。平時(shí)多收集資料，多聽聽別人建議，定期更新版面，還有推廣站點(diǎn)。

（二）設(shè)計(jì)技巧和解決方法

用服務(wù)器端包含技術(shù)實(shí)現(xiàn)對文件的引用

系統(tǒng)中有許多頁面都會引用相同的代碼文件，所以使用include語句將已完成代碼的文件包含進(jìn)來，就可以簡化代碼的縮寫。如首頁面indes.asp中第二行和第三行代碼。

結(jié)束語

經(jīng)過老師耐心細(xì)致的指導(dǎo)，及同學(xué)之間的相互交流，同時(shí)翻閱了大量的資料(包括網(wǎng)上資料，書本及學(xué)校的一些相關(guān)資料)經(jīng)過近一段時(shí)間的努力，個(gè)人網(wǎng)站的設(shè)計(jì)制作告一段落?？偨Y(jié)這次“文武屋-個(gè)人網(wǎng)站”開發(fā)制作過程，我們綜合使用了目前因特網(wǎng)上比較流行的各種靜態(tài)制作方法及交互式動態(tài)網(wǎng)站的制作設(shè)計(jì)手段，并對初步利用后臺程序完成了網(wǎng)站的動態(tài)響應(yīng)與生成網(wǎng)頁的技術(shù)。同時(shí)也從中學(xué)習(xí)了對靜態(tài)頁面的處理風(fēng)格，色彩搭配，頁面導(dǎo)航方面有了一定經(jīng)驗(yàn)。對用Javascript語言制作動態(tài)效果也有了更進(jìn)一步的認(rèn)識。在交互式網(wǎng)頁設(shè)計(jì)學(xué)會了如何使用Access建立數(shù)據(jù)庫，以及對數(shù)據(jù)庫瀏覽，修改，添加，查詢。如何用ASP編寫程序來方便用戶在網(wǎng)上查看網(wǎng)站各方面的信息和交流。本次設(shè)計(jì)由于設(shè)計(jì)時(shí)間較緊，且相關(guān)模塊比較多，加之設(shè)計(jì)經(jīng)驗(yàn)的不足，在網(wǎng)站的整體設(shè)計(jì)及各模塊功能可能設(shè)計(jì)的不完全，有待于進(jìn)一步的完善和改進(jìn)。

參考文獻(xiàn)

[1]吳濤主編，網(wǎng)站全程設(shè)計(jì)技術(shù)（修訂本），北京：清華大學(xué)出版社；北京交通大學(xué)出版社，2006.7 [2]龍馬工作室編，ASP+SQL Server組建動態(tài)網(wǎng)站實(shí)例精講，北京：人民郵電出版社，2004.8 [3] 趙增敏編，ASP動態(tài)網(wǎng)頁設(shè)計(jì)，電子工業(yè)出版社，2003.8 [4] 任學(xué)文、范嚴(yán)編, 網(wǎng)頁設(shè)計(jì)與制作，中國科學(xué)技術(shù)出版社，2006.8 [5] 武創(chuàng)、王惠,網(wǎng)頁設(shè)計(jì)探索之旅 ,電子工業(yè)出版社，2006.9 [6] 杜巧玲等編, 網(wǎng)頁設(shè)計(jì)超級夢幻組合,清華大學(xué)出版社, 2003.3 [7] 吳黎兵、羅云芳編，網(wǎng)頁設(shè)計(jì)教程，武漢大學(xué)出版社，2006.2 [8] 莊王健編，網(wǎng)頁設(shè)計(jì)三劍客白金教程，電子工業(yè)出版社，2006.01

第五篇：網(wǎng)頁設(shè)計(jì)與制作與網(wǎng)站發(fā)布 學(xué)習(xí)心得（范文）

《網(wǎng)頁設(shè)計(jì)與制作與網(wǎng)站發(fā)布》

學(xué)習(xí)心得

今天上了第一堂選修課，課程內(nèi)容很簡單，講了一些關(guān)于網(wǎng)頁的基本內(nèi)容，Internet是一個(gè)覆蓋幾乎全球的計(jì)算機(jī)網(wǎng)絡(luò)，004km.cn 在上面開通屬于自己的微博，就可以發(fā)表觀點(diǎn)了，有什么開心或是不開心的事都可以在上面的寫下來，開心的與他有一起分享，不開心的就可以與他人一起分擔(dān)，就不會那么傷心了。

最后這兩次課，講了網(wǎng)頁制作的一些基本問題，回顧一下之前所學(xué)內(nèi)容，首先網(wǎng)頁上文字要合理安排，標(biāo)題等少量文字可以采用特殊的字體，其它字體盡量選比較普通的字體，適合就好，不要做的比較特別，文字太大占的頁面大，太小又不好，所以適中就好，這樣就看起來比較大氣，那些好的網(wǎng)站就是這樣的。再講了那個(gè)圖形，網(wǎng)頁中通常采用的是JPEG和GIF兩種圖片格式，通常一般不加背景圖片，因?yàn)檫@樣要占用大量的儲存空間，所以當(dāng)在打開這個(gè)網(wǎng)頁時(shí)會有點(diǎn)慢，所以考慮網(wǎng)頁的大小，盡量不要加背景圖片，這樣也不會顯得花哨。從整體上體看就好一點(diǎn)了。

最后的一次課，老師留給我們提問，交流學(xué)習(xí)經(jīng)驗(yàn)，多去體驗(yàn)網(wǎng)頁的制作過程，有什么想法盡可以說出與大家共同分享。