實驗一 簡單靜態網頁設計 一、 實驗目的： 二、 實驗內容： 根據提供的素材設計線上調查問卷。 三、 實驗要求： 四、 實驗學時：4學時 五、 實驗步驟： 實驗準備： 1.在硬碟上為本實驗建立文件夾（以下稱為“實驗文件夾”）。 2.根據提供的素材設計線上調查問卷： （1） 從開始菜單啟動記事本； （ ...
實驗一 簡單靜態網頁設計
一、 實驗目的：
- 複習使用記事本編輯網頁的方法。
- 熟悉不同表單控制項類型的應用。
- 練習使用記事本在網頁中添加表單與表單元素。
二、 實驗內容：
根據提供的素材設計線上調查問卷。
三、 實驗要求：
- 熟練掌握使用記事本進行簡單網頁編輯的方法。
- 能夠區分不同表單元素的應用場景。
- 掌握表單與表單元素的元素名和屬性對。
四、 實驗學時：4學時
五、 實驗步驟：
實驗準備： 1.在硬碟上為本實驗建立文件夾（以下稱為“實驗文件夾”）。
2.根據提供的素材設計線上調查問卷：
（1） 從開始菜單啟動記事本；
（2） 在記事本中，錄入一個最簡合法HTML文檔；
（3） 設置該HTML文檔首頁如圖。要求按照首頁來設計頁面index.html.使用的圖片在image文件夾中。
（4） 在首頁點擊提交後轉向企業電子商務調查問卷.
（5） 打開本實驗提供的WORD文檔questionnaire.doc，這個調查問卷比較長，瀏覽該調查問卷的內容。由於該調查問卷比較長，選取並標示該調查問卷中具有代表性的問題（更改一下文本背景），準備將它們在網頁中進行實現，保存該WORD文檔；
（6） 在記事本中添加表單；
（7） 在表單中插入表單元素，用於在網頁中顯示步驟（4）中標示的問題及答案；
（8） 為表單添加提交和重置按鈕；
（9） 保存網頁為questionaire.htm。
提示：本實驗沒有標準答案，但是在將WORD文檔中的調查問題及答案移植到網頁中時，要儘可能多地使用到講過的表單元素（如文本框、單選按鈕、覆選按鈕、下拉菜單/列表、框架等）。另外，網頁上調查問卷的答案的表現形式與並不一定要與WORD中的一致，而是應該選擇使用更符合需要的表單元素，例如對於答案選項比較多的問題來說，應該優先選用下拉菜單/列表，單選使用下拉菜單，多選使用列表。
六、 實驗代碼：
博客.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="GB2136"> 5 <title>博客</title> 6 <style type="text/css"> 7 body{ 8 font-family:黑體，隸書; 9 font-size:18px; 10 margin:auto; 11 } 12 .top{ 13 margin:auto; 14 width:100%; 15 float:left; 16 } 17 .left{ 18 width:5%; 19 float:left; 20 height:auto; 21 } 22 .right{ 23 width:6.3%; 24 height:auto; 25 float:right; 26 } 27 .left1{ 28 width:24%; 29 float:left; /*文本的浮動*/ 30 padding:0 10px; /*設置邊線據內容的距離*/ 31 height:auto; 32 } 33 .line{ 34 border:1px green; 35 cellspacing:0; 36 cellpadding:0; 37 height:400px; 38 border-right-style:solid; 39 border-left-style:none; 40 border-bottom-style:none; 41 border-top-style:none; 42 } 43 div{ 44 box-sizing:border-box; 45 width:600px; 46 line-height:1.5; 47 } 48 49 </style> 50 <script language="JavaScript"> 51 <!-- 52 function check(){ 53 var p = document.form1.Dengru1.value; 54 var p1 = document.form1.Dengru2.value; 55 if(p1!==p){ 56 alert("密碼不一致"); 57 return false; 58 }else{ 59 60 } 61 62 } 63 //--> 64 65 </script> 66 </head> 67 <body> 68 <img src="image/01.gif" class="top"/> 69 <img src="image/02.gif" class="left"/> 70 <div class="left1"> 71 <img src="image/reg.gif"/> 72 <b>註冊幫助</b><br/> 73 <ul> 74 <li>會員名：為會員登錄網站的通行證，長度控制在3-20個字元之內。</li> 75 <br/> 76 <li>密碼：請設定在6-20位之間。</li> 77 <br/> 78 <li>確認密碼：確認密碼必須與密碼一致。</li> 79 <br/> 80 <li>Email：請填寫有效的Email地址，以便於與您聯繫。</li> 81 </ul> 82 </div> 83 <div class="left1" style="width:100px"><table class="line"></table></div> 84 <form name="form1" action="調查問卷.html" onSubmit="return check()"> 85 <div class="left1"> 86 <div style="height:80px"></div> 87 <table border=0> 88 <tr></tr> 89 <tr> 90 <td>用 戶 名：</td> 91 <td><input type="text" name="Dengru" placeholder="長度控制在3-20個字元之內" size=31 pattern="^.{3,20}$" required="required"></td> 92 </tr> 93 <tr></tr> 94 <tr> 95 <td>密 碼：</td> 96 <td><input type="password" name="Dengru1" placeholder="請設定在6-20位之間" size=32 pattern="^.{6,20}$" required="required" ></td> 97 </tr> 98 <tr></tr> 99 <tr> 100 <td>確認密碼：</td> 101 <td><input type="password" name="Dengru2" size=32 pattern="^.{6,20}$" required="required"></td> 102 </tr> 103 <tr></tr> 104 <tr> 105 <td>性 別：</td> 106 <td><input type="radio" name="De2" value="Male">男 <input type="radio" name="De2" value="Female">女</td> 107 </tr> 108 <tr></tr> 109 <tr> 110 <td>E-mail：</td> 111 <td><input type="email" name="Dengru3"size=40></td> 112 </tr> 113 </table> 114 <br/> 115 <input type="submit" name="Submit" value="提交"> 116 <input type="reset" name="Reset" value="重置"> 117 </div> 118 </form> 119 <img src="image/04.gif" class="right"/> 120 <img src="image/03.jpg" class="top"/> 121 </body> 122 </html>博客
調查問卷.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="GB2136"> 5 <style type="text/css"> 6 body{ 7 background-color:#DEDEDE; 8 width:640px; 9 margin:auto; /*設置頁面邊距*/ 10 } 11 .headline{ 12 font-size:22px; 13 font-family:宋體; 14 text-align:center; /*設置居中*/ 15 font-weight:bold; /*設置為粗體*/ 16 } 17 .top{ 18 font-size:10。5px; /*字體大小*/ 19 font-family:楷體; 20 line-height:2; /*設置行高為1.5*/ 21 } 22 .right{ 23 text-align:right; 24 line-height:2; 25 } 26 .left{ 27 text-align:left; 28 } 29 .down{ 30 font-size:14px; 31 font-family:宋體; 32 line-height:2; 33 text-align:left; 34 } 35 .headline1{ 36 font-size:16px; 37 font-family:黑體; 38 text-align:left; /*設置左對齊*/ 39 font-weight:bold; /*粗體*/ 40 } 41 .line{ 42 border:1px solid #DEDEDE; 43 border-bottom:1px solid #000000; 44 background-color:#DEDEDE; 45 46 47 } 48 div{ 49 box-sizing:border-box; /*設置顯示盒子模式*/ 50 line-height:1.5; 51 border-size:100; 52 } 53 </style> 54 <script language="JavaScript"> 55 <!-- 56 function checkCount(){ 57 var q9box = document.getElementsByName("q9"); 58 var count = 0; 59 for(i = 0; i< q9box.length;i++){ 60 if(q9box[i].checked){ 61 count += 1; 62 } 63 } 64 if(count > 4){ 65 alert("最多只能選4個"); 66 67 return false; 68 } 69 } 70 //--> 71 </script> 72 <title>調查問卷</title> 73 </head> 74 <body> 75 <div class="top"> 76 <div class="headline"> 77 <h2>企業電商務調查問卷</h2> 78 </div> 79 <div>尊敬的先生/女士：<br/></div> 80 <div style="text-indent:3em">您好！為了瞭解目前企業開展電子商務的狀況和問題，我們課題組希望您能協助填寫<br/>這份調查表。在此，我們鄭重承諾，調查結果僅供研究使用。如果您有興趣和需要，我們可<br/>以將最終的統計和分析結果通過電子郵件的方式反饋給您。<br/></div> 81 <div style="text-indent:3em">本次調查對於電子商務的界定是：通過電腦網路完成的購買和銷售貨物以及服務的<br/>行為，這些貨物或服務的訂單是通過相關網路下達的，但是支付和物流可以是網下進行的。<br/>通過傳真、電話和電子郵件達成的交易不算在內。<br/></div> 82 <div style="text-indent:3em">非常感謝您的大力支持！<br/><br/></div> 83 <div class="right" >廣東省電子商務發展規劃前期研究課題組</div> 84 <div style="border:1px solid #000000"></div> 85 </div> 86 87 <form name="form2" action="反饋.html" onSubmit="return check()" > 88 <div class="down"> 89 <div class="headline1"> 90 <h3>一、企業基本簡況</h3> 91 </div> 92 <table style="width:500px;height:150px" border=0> 93
