HTML標(biāo)記的綜合應(yīng)用網(wǎng)頁設(shè)計(jì)實(shí)驗(yàn)報(bào)告

PAGE學(xué)生實(shí)驗(yàn)報(bào)告學(xué)院：軟件與通信工程學(xué)院課程名稱：網(wǎng)頁設(shè)計(jì)基礎(chǔ)專業(yè)班級(jí)：08軟件與通信工程學(xué)院4班姓名：陳貝貝學(xué)號(hào)：0088225學(xué)生實(shí)驗(yàn)報(bào)告學(xué)生姓名陳貝貝學(xué)號(hào)0088225無實(shí)驗(yàn)項(xiàng)目HTML標(biāo)記的綜合應(yīng)用□必修■選修□演示性實(shí)驗(yàn)□驗(yàn)證性實(shí)驗(yàn)■操作性實(shí)驗(yàn)□綜合性實(shí)驗(yàn)實(shí)驗(yàn)地點(diǎn)H110實(shí)驗(yàn)儀器臺(tái)號(hào)xxx指導(dǎo)教師朱文強(qiáng)實(shí)驗(yàn)日期及節(jié)次2010－10－10星期五8-9-A節(jié)一、實(shí)驗(yàn)綜述1、實(shí)驗(yàn)?zāi)康募耙髮?shí)驗(yàn)?zāi)康模和ㄟ^用HTML語言進(jìn)行編輯，使學(xué)生了解網(wǎng)站的制作流程；了解HTML表單標(biāo)記的應(yīng)用；了解HTML表格標(biāo)記的應(yīng)用；掌握HTML的基本概念、文檔的基本結(jié)構(gòu)；掌握HTML文檔的結(jié)構(gòu)、HTML設(shè)計(jì)文字排版；掌握HTML插入多媒體；掌握HTML基本標(biāo)記，包括標(biāo)題、背景圖片、圖像、水平線、字體編輯、段落、超鏈接、文本堆砌等的使用方法。熟練掌握HTML中的常用標(biāo)記的名稱及用途。熟練掌握對(duì)HTML語言文字結(jié)構(gòu)的理解；掌握各種元素的使用；熟練掌握?qǐng)D片、動(dòng)畫、聲音的嵌入以及超級(jí)連接的控制和應(yīng)用，結(jié)合實(shí)際，鞏固課堂中所學(xué)的理論知識(shí)。實(shí)驗(yàn)要求：以個(gè)人獨(dú)立完成的方式，完成一個(gè)用HTML語言進(jìn)行編輯的網(wǎng)頁制作，實(shí)現(xiàn)一個(gè)具有獨(dú)立主題的網(wǎng)頁制作。2、實(shí)驗(yàn)儀器、設(shè)備或軟件帶IE瀏覽器的計(jì)算機(jī)，Windows的寫字板、記事本。二、實(shí)驗(yàn)過程（實(shí)驗(yàn)步驟、記錄、數(shù)據(jù)、分析）Step1：設(shè)計(jì)網(wǎng)站LOGO，網(wǎng)站的標(biāo)準(zhǔn)色彩，并且確定網(wǎng)站主題和網(wǎng)站欄目，一切設(shè)計(jì)完成后開始構(gòu)建頁面。我定義的主題是個(gè)人網(wǎng)站，所以主要突出自己的個(gè)性特質(zhì)。LOGO是skydream，寓意是我的夢(mèng)游園。色彩主頁是以藍(lán)色為主，強(qiáng)調(diào)夢(mèng)感。欄目分為主頁，日志（我的印記），相冊(cè)（美麗瞬間），個(gè)人檔案（我的萬花筒），心情（我的叨叨）和留言板（留言星星河）。Flash是自己修改的，花了一些力氣。這里強(qiáng)調(diào)一下目錄下文件夾的分類，不能出現(xiàn)中文，不然會(huì)無法顯示。如圖：主頁面index.html,然后依次建立分頁面。Step2：對(duì)網(wǎng)頁設(shè)計(jì)框架，進(jìn)行布局。利用表格和框架。主頁這里的布局，我主要是使用的表格布局，嵌套使用了div+css樣式。在日志列表下面，因?yàn)橹饕蚣芟嗤涂梢员苊庵貜?fù)。部分演示如下：

每個(gè)部分的框架，要設(shè)計(jì)好，不然很容易出現(xiàn)混亂的狀況。Step3:使網(wǎng)站更加美觀和多元化，使用了一些媒體元素和特效：插入了音樂<embedsrc="music/NorahJones-NewYorkCity.mp3"hidden="true"></embed>；插入flash導(dǎo)航，使用<objectclassid="c"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="837"height="312">

<paramname="movie"value="flash/flash.swf">

<paramname="quality"value="high">

<embedsrc="flash/flash.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="837"height="312"></embed></object>使用文字特效和圖片滾動(dòng)。利用的<MARQUEEbehavior=“value”bgcolor=“color”direction=“value”height=“value”width=“value”

loop=“value”scrollamount=“value”scrolldelay=“value”hspace=“value”vspace=“value”>滾動(dòng)文字</MARQUEE>。子頁面效果預(yù)覽留言板：運(yùn)用了表單，按鈕等元素。三、結(jié)論1.實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)結(jié)果：能在瀏覽器中運(yùn)行，看到自己做的網(wǎng)站。HTML標(biāo)記的應(yīng)用很重要，是構(gòu)建頁面的基本元素。2.分析與討論A.有關(guān)于框架的，還在琢磨中。在日志快，除了內(nèi)容不同，其余板式完全一致。但是框架出來的效果讓人大跌眼鏡，是我的技術(shù)比較生疏，效果不理想，框架一塊有待提高；B.常見的問題總結(jié)1、不要將所有文件都存放在根目錄下，會(huì)造成文件管理混亂常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關(guān)聯(lián)的文件，影響工作效率。另外，上傳速度慢。服務(wù)器一般都會(huì)為根目錄建立一個(gè)文件索引。當(dāng)您將所有文件都放在根目錄下，那么即使你只上傳更新一個(gè)文件，服務(wù)器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時(shí)間也將越長。所以，盡可能減少根目錄的文件存放數(shù)。2、按欄目?jī)?nèi)容建立子目錄子目錄的建立，首先按主菜單欄目建立。例如:企業(yè)站點(diǎn)可以按公司簡(jiǎn)介，產(chǎn)品介紹，價(jià)格，在線定單，反饋聯(lián)系等建立相應(yīng)目錄。其他的次要欄目，類似what'snew，友情連接內(nèi)容較多，需要經(jīng)常更新的可以建立獨(dú)立的子目錄。而一些相關(guān)性強(qiáng)，不需要經(jīng)常更新的欄目，例如：關(guān)于本站，關(guān)于站長，站點(diǎn)經(jīng)歷等可以合并放在一個(gè)統(tǒng)一目錄下。所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。所有需要下載的內(nèi)容也最好放在一個(gè)目錄下。3、在每個(gè)主欄目目錄下都建立獨(dú)立的images目錄為每個(gè)主欄目建立一個(gè)獨(dú)立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。4、目錄的層次不要太深目錄的層次建議不要超過3層，維護(hù)管理方便。5、不要使用中文目錄6、不要使用過長的目錄C、確定網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式：1、樹狀鏈接結(jié)構(gòu)類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級(jí)頁面，一級(jí)頁面鏈接指向二級(jí)頁面。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出。優(yōu)點(diǎn)是條理清晰，訪問者明確知道自己在什么位置，不會(huì)"迷"路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目下的子頁面到另一個(gè)欄目下的子頁面，必須繞經(jīng)首頁。2、星狀鏈接結(jié)構(gòu)類似網(wǎng)絡(luò)服務(wù)器的鏈接，每個(gè)頁面相互之間都建立有鏈接。這種鏈接結(jié)構(gòu)的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達(dá)自己喜歡的頁面。缺點(diǎn)是鏈接太多