個(gè)人網(wǎng)站實(shí)驗(yàn)報(bào)告WEBPersonal web姓名:學(xué)號(hào):XXXX專業(yè)年級(jí):網(wǎng)絡(luò)01班 指導(dǎo)教師:XX 時(shí)間:2013/11/08
,一、 實(shí)
個(gè)人網(wǎng)站實(shí)驗(yàn)報(bào)告
WEB
Personal web
姓名:學(xué)號(hào):XXXX
專業(yè)年級(jí):網(wǎng)絡(luò)01班 指導(dǎo)教師:XX 時(shí)間:2013/11/08
,
一、 實(shí)驗(yàn)?zāi)康暮鸵?/p>
1、 實(shí)驗(yàn)?zāi)康?/p>
1.1通過實(shí)驗(yàn)了解并掌握HTML,JSP ,CSS 三大塊內(nèi)容
1.2學(xué)會(huì)利用CSS 創(chuàng)建樣式,包括表格樣式,優(yōu)化界面
1.4學(xué)會(huì)用javascript 語言,做表單驗(yàn)證和信息獲取
1.5了解如何建立自己的網(wǎng)站,兩種方法:
(1)安裝TOMCAT ,把自己的項(xiàng)目部署在TOMCAT 安裝目錄下的webapps 子目錄下,詳細(xì)安裝過程,網(wǎng)上有詳細(xì)資料,包括如何運(yùn)行部署好的項(xiàng)目。
(2)使用dreamweaver 的站點(diǎn)管理,創(chuàng)建一個(gè)自己的站點(diǎn),其服務(wù)器,可以使用我們的windows 下的服務(wù)器,包括FTP ,也可以使用安裝好的TOMCAT, 我是用的是TOMCAT, 站點(diǎn)信息及截圖如下:
2、 實(shí)驗(yàn)內(nèi)容
2.1網(wǎng)站模塊
(1)個(gè)人主頁
a .個(gè)人資料
b .家鄉(xiāng)風(fēng)情
c .人生歷程(包含F(xiàn)lash ,一個(gè)大屏滾動(dòng)的圖片)
d .我的成果
e .留言空間
f .美文連接
g .音樂播放
(2)家鄉(xiāng)主頁
a .博客
b .美景觀光(包含flash, 插入了一個(gè)隨機(jī)播放的相冊(cè))
c .特色專區(qū)
d .背景音樂
(3)留言板
a .用戶登錄
b .主界面獲取登錄名并顯示

,
c .留言板部分信息有驗(yàn)證
d .最后以郵箱形式提交
2.3代碼的設(shè)計(jì)
為了便于維護(hù),將所有代碼進(jìn)行分類,和我的主頁有關(guān)的文件放在了根目錄ch04下,和家鄉(xiāng)有關(guān)的文件放在了ch05下,與留言板有關(guān)的文件放在了ch03目錄下,布局如下:
3、開發(fā)環(huán)境
記事本,dreamweaver8
二、 網(wǎng)站分析和設(shè)計(jì)
個(gè)人網(wǎng)站用于展示自己的個(gè)人信息,讓大家能通過網(wǎng)站盡快的了解自己,并且在我的網(wǎng)站中特別設(shè)置了家鄉(xiāng)欄目,讓大家對(duì)我的家鄉(xiāng)內(nèi)蒙古有一個(gè)正確清楚的認(rèn)識(shí)
1、 個(gè)人主頁如圖:


,
2、 我的個(gè)人資料:
3、 風(fēng)土鄉(xiāng)情:


,
4、 人生歷程:
5、 留言空間:
(1) 登錄界面:


,
(2) 留言板主頁:
(3) 表單驗(yàn)證:


,
(4) 以郵件形式提交:
6、家鄉(xiāng)風(fēng)景:


,
以上便是網(wǎng)站的幾個(gè)界面,還需更加完善。以個(gè)人主頁為首頁,通過連接,連接到其他編好的網(wǎng)頁中,插入了Flash 元素,并使用javascript 腳本語言做表單驗(yàn)證,并實(shí)現(xiàn)了大圖滾動(dòng)效果,還為家鄉(xiāng)美景觀光插入了電子相冊(cè)。
三、 代碼設(shè)計(jì)和功能實(shí)現(xiàn)
由于代碼較多,這里展示一些主要功能的代碼:
1、 家鄉(xiāng)風(fēng)景觀光實(shí)現(xiàn)電子相冊(cè)的代碼: