網(wǎng)頁制作實驗報告

1、網(wǎng)頁設(shè)計與制作實 驗 報 告院系名稱： 管理學(xué)院 專業(yè)班級： 電子商務(wù) 11級3班 學(xué)生姓名： 許世謙 學(xué) 號： 201117050308 項目實驗一（25分）實驗二（35分）實驗三（40分）總分（100分）得分2013年 6 月 4 日實驗一：HTML語言實驗一、實驗?zāi)康?、掌握利用HTML語言編寫網(wǎng)頁的能力；2、掌握利用HTML語言編寫表格的能力；3、掌握利用HTML語言編寫表單的能力。二、實驗課時2學(xué)時三、實驗內(nèi)容1、表格實驗的結(jié)果實驗一試驗1.1 A B C D E F G H I2、表單實驗的結(jié)果試驗第一題試驗1.2 姓名： 密碼： 性別： 女 男 愛好： 籃球 足球 乒乓球 籍貫：

2、 開封鄭州洛陽 四、實驗小結(jié)通過這次試驗，我掌握了許許多多以前不知道的代碼細節(jié)，讓我對網(wǎng)頁設(shè)計與制作有了更深層次的了解，同時我對編寫代碼也漸漸的熟悉了。剛開始編寫的時候有點漫無目的，但是慢慢的就找到了感覺，最高興的是最后當(dāng)自己的代碼在網(wǎng)頁中顯示出來的時候，自己的努力是值得的，越來越喜歡網(wǎng)頁制作了！實驗二：FireWorks和CSS實驗一、實驗?zāi)康?、掌握為給定效果圖規(guī)劃切圖方式的能力；2、掌握利用FireWorks切圖的能力；3、掌握利用CSS+DIV制作網(wǎng)頁的能力。二、實驗課時2課時三、實驗內(nèi)容 1、規(guī)劃切圖方式的思路 首先，將網(wǎng)頁的布局了解清楚，然后，根據(jù)不同的模塊分類，導(dǎo)航條分為一類，其

3、余的各歸各類，之后利用FireWorks切圖。2、利用FireWorks切圖的步驟運用FireWorks將圖片切為自己所需要的部分和比例，如圖所示：3、CSS+DIV制作網(wǎng)頁的結(jié)果效果圖.jpg body .topmargin: 0px auto;border:0px;text-align: center; .topmain margin: 0px auto; width: 940px;height: 25px;padding: 0px;text-align: cente; .topmain ul margin: 0px;padding: 0px;list-style-type: none;t

4、ext-align: center; .topmain ul li width: 72px; float: left; height: 25px;text-align: center; .topmain ul li a width: 72px; height: 25px;text-align: center; .content1 margin: 0px auto;border:0px;text-align:center; .content2 margin: 0px auto;border:0px;text-align:left;position:absolute; left:168px; to

5、p:352px;width:301px;height:533px .content3 margin: 0px auto;border:0px;text-align:left;position:absolute; left:468px;top:352px;width:465px; height:533px .content4 margin: 0px auto;border:0px;text-align:left;position:absolute; left:933px;top:352px;width:211px; height:529px; .bottom margin: 0px auto;b

6、order:0px;position:absolute; left:168px; top:885px;width:977px; height:105px;text-align: center; 四、實驗小結(jié)通過這次試驗，讓我懂得了如何利用軟件工具來實現(xiàn)網(wǎng)頁的編制，通過對圖的切割和組合，經(jīng)過了多次的失敗，但最總通過不懈的堅持終于小獲成功，體驗到成功的快樂。也對網(wǎng)頁制作加深了認(rèn)識和興趣。實驗三： JavaScript實驗一、實驗?zāi)康?、掌握利用JavaScript編寫網(wǎng)頁動態(tài)效果的能力；2、掌握在網(wǎng)頁中使用JavaScript腳本的兩種方法。二、實驗課時2課時三、實驗內(nèi)容1、計算整數(shù)階乘實驗的結(jié)果

7、JavaScript實驗1 !- function jieCheng() var num=document.getElementById(shuzi).value; if(num=) alert(請輸入數(shù)據(jù)); elsevar fac=1; for(var i=1;i 請在文本框中輸入一個整數(shù)，然后單擊“計算”按鈕，計算該整數(shù)的階乘。    2、下拉菜單實驗的結(jié)果實現(xiàn)下拉菜單效果#sddmmargin: 0px auto;border:0px;text-align: center;margin: 0px auto; width: 940px;height: 35p

8、x;padding: 0px;text-align: center;#sddm liwidth: 72px; float: left; height: 25px;text-align: center;#sddm li awidth: 72px; height: 25px;text-align: center;#sddm li a:hoverbackground: #49A3FF#sddm divposition: absolute;visibility: hidden;margin: 0;padding: 0;background: #EAEBD8;border: 1px solid #597

9、0B2#sddm div aposition: relative;display: block;margin: 0;padding: 5px 10px;width: auto;white-space: nowrap;text-align: left;text-decoration: none;background: #EAEBD8;color: #2875DE;font: 12px arial#sddm div a:hoverbackground: #49A3FF;color: #FFF最新更新職業(yè)培訓(xùn)科學(xué)研究學(xué)生工作繼續(xù)教育黨建工作招生就業(yè)社會服務(wù)社會服務(wù)在線閱讀教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢教務(wù)系統(tǒng)學(xué)歷教育學(xué)歷咨詢3、表單驗證實驗的結(jié)果驗證身份證號S 請輸入身份證號 驗證固定電話 請輸入電話號碼 驗證E-mail是否正確請輸入E-Mail地址&nb