網(wǎng)頁綜合實-張翼-220.doc

《網(wǎng)頁綜合實-張翼-220.doc》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、華北科技學(xué)院計算機學(xué)院綜合性實驗實驗報告課程名稱網(wǎng)頁編程實驗學(xué)期2014至2015學(xué)年第一學(xué)期學(xué)生所在系部計算機學(xué)院年級三　專業(yè)班級網(wǎng)絡(luò)B122　班學(xué)生姓名張翼學(xué)號201207024220　任課教師李永飛實驗成績計算機學(xué)院制《網(wǎng)頁編程》課程綜合性實驗報告開課實驗室：基礎(chǔ)六機房2014年12月1日實驗題目個人網(wǎng)站綜合實驗一、實驗?zāi)康摹　　　⊥ㄟ^開設(shè)該實驗，學(xué)生可以把在本課程中所學(xué)到的HTML、CSS以及JavaScript技術(shù)綜合應(yīng)用于一個內(nèi)容充實、形式豐富的個人網(wǎng)站，在實驗過程中加深對網(wǎng)頁編程所涉及的各種開發(fā)技術(shù)的理解及各種技術(shù)結(jié)合使用的體會，為后續(xù)課程的學(xué)

2、習(xí)打好基礎(chǔ)。二、設(shè)備與環(huán)境PC兼容機、Windows操作系統(tǒng)、文本編輯軟件、圖片處理軟件　三、實驗內(nèi)容　　　　實驗內(nèi)容：學(xué)生以個人為中心，可自由確定網(wǎng)站內(nèi)容主題，綜合應(yīng)用HTML、CSS和JavaScript開發(fā)實現(xiàn)一個內(nèi)容充實、形式豐富的個人網(wǎng)站。實驗要求：要求所完成的網(wǎng)站至少包括5個以上網(wǎng)頁，必須使用HTML中的至少5種標(biāo)記，至少使用CSS或JavaScript技術(shù)中的一種用于網(wǎng)頁效果的實現(xiàn)在課程結(jié)束前要提交綜合性實驗報告和網(wǎng)站的源代碼。四、實驗結(jié)果及分析1　設(shè)計思路首先在內(nèi)容方面，我和合作伙伴陳偉準(zhǔn)備做得是一個旅游網(wǎng)站，介紹一些旅游景區(qū)，通過圖片展示，

3、文字介紹來向瀏覽頁面的人了解這些特色風(fēng)景，后面覺得內(nèi)容有些單調(diào)，所以又加入了美食的介紹，主要是我家鄉(xiāng)的面食文化。結(jié)構(gòu)方面，主要是通過總分的形式展現(xiàn)出來。點開網(wǎng)頁首頁是我們做的網(wǎng)站的一個封面，是我和陳偉的照片以及一個未知的人，因為網(wǎng)站叫做三人行，所以將瀏覽者當(dāng)做第三人來加入我們，進入網(wǎng)頁后，首先是我們的主頁，主頁展示的是網(wǎng)站中旅游景點的圖片，以及美食的圖片。通過點擊圖片可以進入到與圖片相關(guān)內(nèi)容的文字描述景點照片，美食照片。在介紹網(wǎng)頁的最后，又返回主頁的鏈接，在閱讀完后，瀏覽者可以返回主頁，瀏覽其他信息。2　網(wǎng)站結(jié)構(gòu)網(wǎng)站主要是以總分的形式進行構(gòu)造的。首先是網(wǎng)站的

4、首頁，首頁只與主頁鏈接，在點擊首頁相關(guān)鏈接后會進入網(wǎng)站的主頁。主頁通過CSS的布局，做成了由多個模塊組成的框架，在這些模塊中都是一些景區(qū)圖片，又在這些圖片上建立鏈接，進入我們建立的與圖片相關(guān)的的網(wǎng)頁。主頁的標(biāo)題是我們網(wǎng)站的logo圖片，然后是美食和旅游相關(guān)的文字鏈接，下面是美食圖片的滾動播放。然后是我們網(wǎng)站用戶的登錄框，以及旅游景點的圖片鏈接。在美食和景點的介紹網(wǎng)頁中，我們也是采取CSS的布局。使用了統(tǒng)一的布局方式，這樣看起來比較整齊，也能看出是在同一等級的網(wǎng)頁。我們構(gòu)造網(wǎng)站的主要思路就是通過主頁來鏈接其他的各個子網(wǎng)頁，然后再從子網(wǎng)頁返回到主頁，這樣形成了我

5、們的網(wǎng)站。3　部分關(guān)鍵代碼說明（不超過2頁）(1)網(wǎng)站logo#a{height:183px;background:#9c6;margin-bottom:5px;background-image:url(主頁/標(biāo)題.jpg);}我們網(wǎng)站中的每張網(wǎng)頁開頭，都放置了我們網(wǎng)站的專有l(wèi)ogo。(2)采用統(tǒng)一的布局方式：在介紹類網(wǎng)頁中我們采用了相同的布局結(jié)構(gòu)，這樣看上去會十分統(tǒng)一。Id=aId=bId=fId=gId=dId=hId=i********

6、">