如何做靜態網頁,html+jsp 簡單靜態網頁設計

 2023-11-30 阅读 33 评论 0

摘要:實驗一? 簡單靜態網頁設計 一、實驗目的 1.?? 復習使用記事本編輯網頁的方法。 2.?? 熟悉不同表單控件類型的應用。 3.?? 練習使用記事本在網頁中添加表單與表單元素。 如何做靜態網頁? 二、實驗內容 根據提供的素材設計在線調查問卷。 html靜態網頁設計, 三、實驗要求 1.?

實驗一? 簡單靜態網頁設計

一、實驗目的

1.?? 復習使用記事本編輯網頁的方法。

2.?? 熟悉不同表單控件類型的應用。

3.?? 練習使用記事本在網頁中添加表單與表單元素。

如何做靜態網頁?

二、實驗內容

根據提供的素材設計在線調查問卷。

html靜態網頁設計,

三、實驗要求

1.?? 熟練掌握使用記事本進行簡單網頁編輯的方法。

2.?? 能夠區分不同表單元素的應用場景。

3.?? 掌握表單與表單元素的元素名和屬性對。

四、實驗學時:4學時

五、實驗步驟

0.?? 實驗準備:(1)在硬盤上為本實驗建立文件夾(以下稱為“實驗文件夾”)。

1.?? 根據提供的素材設計在線調查問卷:

(1)?? 從開始菜單啟動記事本;

(2)?? 在記事本中,錄入一個最簡合法HTML文檔;

(3)?? 設置該HTML文檔首頁如圖1。要求按照首頁來設計頁面index.html.使用的圖片在image文件夾中。
(4)?? 在首頁點擊提交后轉向企業電子商務調查問卷.
(5)?? 打開本實驗提供的WORD文檔questionnaire.doc,這個調查問卷比較長,瀏覽該調查問卷的內容。由于該調查問卷比較長,選取并標示該調查問卷中具有代表性的問題(更改一下文本背景),準備將它們在網頁中進行實現,保存該WORD文檔;
(6)?? 在記事本中添加表單;
(7)?? 在表單中插入表單元素,用于在網頁中顯示步驟中標示的問題及答案;
(8)?? 為表單添加提交和重置按鈕;
(9)?? 保存網頁為questionaire.htm
提示:本實驗沒有標準答案,但是在將WORD文檔中的調查問題及答案移植到網頁中時,要盡可能多地使用到講過的表單元素(如文本框、單選按鈕、復選按鈕、下拉菜單/列表、框架等)。另外,網頁上調查問卷的答案的表現形式與并不一定要與WORD中的一致,而是應該選擇使用更符合需要的表單元素,例如對于答案選項比較多的問題來說,應該優先選用下拉菜單/列表,單選使用下拉菜單,多選使用列表。

六、實驗代碼

index:
<!Doctype html>
<html>
<head>
<title>實驗一  簡單靜態網頁設計</title>
<style type="text/css">
body{margin:0 auto;background-color:#FFF;font-size:12px;}
.top,.bottom,.center {height: auto;width: 100%;
}
.right{width: 44px;height: 300px;float:right;
}
.left{width: 35px;height: 300px;float:left;
}
#left {width: 30%;float: left;padding: 0 10px;height: auto;
}
#right {width: 50%;float: right;height: auto;padding-top: 30px;
}
#line{height: 300px;border-color: green;border-left-style: solid;border-width: 2px;
}</style>
<body><img class="top" src="images/01.gif" style="height: 180px;"><h1 style="margin: -5px;"></h1><div class="center"><img src="images/02.gif" class="left"><img src="images/04.gif" class="right"><div id="left"><img src="images/reg.gif"> <strong>注冊幫助</strong><ul><li>會員名:為會員登錄網站的通行證,長度控制在3-20個字符之內。</li><br/><li>密碼:請設定在6-20位之間。</li><br/><li>確認密碼:確認密碼必須與密碼一致。</li><br/><li>Email:請填寫有效的Email地址,以便于與您聯系。</li></ul></div><div id="right"><form  action="questionaire.html" name=form1 οnsubmit="return check()"><table><tr><td>用戶名:</td><td><input type="text" name="username" placeholder="長度控制在3-20個字符"  ></td></tr><tr><td>密碼:</td><td><input type="password" name="password" placeholder="請設定在6-20位之間" ></td></tr><tr><td>確認密碼:</td><td><input type="password" name="cpassword" ></td></tr><tr><td>性別:</td><td><input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女</td></tr><tr><td>E-mail:</td><td><input type="email" name="email"></td></tr><tr><td><input type="submit" name="submit" value="提交" ></td><td><input type="reset" name="reset" value="重置" /></td></tr></table></form></div> <table id="line"><tr><td valign="top"></td></tr></table></div><img class="bottom" src="images/03.jpg">
</body>
</html>
<script language="javaScript">
function check(){if(document.form1.username.value.length<3||document.form1.username.value.length>20){alert("請輸入符合條件的用戶名");return false;}var pd= document.form1.password.value; if(document.form1.password.value.length<6||document.form1.password.value.length>20){alert("請輸入符合條件的密碼");return false;}var cpd= document.form1.cpassword.value; if(document.form1.cpassword.value.length<6||document.form1.cpassword.value.length>20){alert("請再次輸入密碼!");return false;}if(pd !== cpd){alert("兩次密碼不相同");return false;}if(document.form1.email.value.indexOf("@")=-1||document.form1.email.value.length=0){alert("請輸入正確格式的郵箱!");return false;}return true;
}</script>
調查問卷:
<html>
<head>
<title>問卷調查</title>
<style type="text/css">
body {padding: 0px 10% 0px 10%;
}
#ft {text-align:center;font-size:29px;<!--2號中文字體 -->font-family:SimSun;<!--宋體-->}.fp {font-family:KaiTi;<!--楷體-->font-size:14px;<!--5號中文字體 -->
}.st {font-size:21px;<!--3號中文字體 2-->font-family:SimHei;<!--黑體-->
}.sp {font-size:16px;<!--5號中文字體 -->font-family:SimSun;<!--宋體-->}
</style>
</head>
<body>
<div><p id="ft"><b>企業電子商務調查問卷</b></p><div class="fp"><p>尊敬的先生/女士:</p><p style="text-indent:2em;">您好!為了了解目前企業開展電子商務的狀況和問題,我們課題組希望您能協助填寫這份調查表。在此,我們鄭重承諾,調查結果僅供研究使用。如果您有興趣和需要,我們可以將最終的統計和分析結果通過電子郵件的方式反饋給您。</p><p style="text-indent:2em;">本次調查對于電子商務的界定是:通過計算機網絡完成的購買和銷售貨物以及服務的行為,這些貨物或服務的訂單是通過相關網絡下達的,但是支付和物流可以是網下進行的。通過傳真、電話和電子郵件達成的交易不算在內。</p><p style="text-indent:2em;">非常感謝您的大力支持!</p><p style="text-align:right;">廣東省電子商務發展規劃前期研究課題組</p></div><hr/>
</div><div><b class="st">一、企業基本簡況</b><br/><div class="sp"><p>1.企業名稱:<input name="qyname" size=30 type="text">注冊地:<input name="zcaddress" size=10 type="text"><br/><br/>2.您所在的企業的職務(職業):<input name="zyname" size=20 type="text"><br/><br/>3.企業成立時間:<input name="cltime" size=20 type="text"><br/><br/>4企業所在行業:<input name="szhy" size=20 type="text"><br/><br/><u style="font-size=20px"><b>以下選擇題,若無特別聲明,皆為多項選擇題</b></u><br/><br/><p>5.您所在企業的所有制形式為:(單選)<br/><input  name="r1" type="radio"/>國有 <input  name="r1" type="radio"/>集體 <input  name="r1" type="radio"/>民營 <input  name="r1" type="radio"/>外資 <input  name="r1" type="radio"/>合資<input  name="r1" type="radio"/>股份制 <input  name="r1" type="radio"/>其他 <input  name="qt1" size=5 type="text" /></p><p>6.您所在企業的類型為: (多選)<br/><input  name="r2" type="checkbox"/>流程型制造業<input  name="r2" type="checkbox"/>離散型制造業<input  name="r2" type="checkbox"/>混合型企業<input  name="r2" type="checkbox"/>旅游服務業<input  name="r2" type="checkbox"/>餐飲服務業<input  name="r2" type="checkbox"/>信息服務業<input  name="r2" type="checkbox"/>金融服務業<input  name="r2" type="checkbox"/>物流服務業<input  name="r2" type="checkbox"/>其他<input  name="qt2" size=10 type="text" /></p><p>7.您所在企業是否是上市公司:(單選)<select><option value="00">請選擇</option><option value="01">是</option><option value="02">不是</option></select><br></p></p><br/></div>
</div>
<div><b class="st">二、企業信息化總體狀況</b><p>8.您所在企業最需要的信息包括(選擇其中最重要的4項信息):</p><table><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">產品開發</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">生產技術</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">技術引進</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市場行情</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">競爭對手</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">政策法規</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">薪酬水平</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">人才信息</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">財務狀況</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">投資融資</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">市場預測</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">員工關系</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">客戶信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">供應商信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">產品價格</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">質量管理</td></tr><tr><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">社交活動</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">合作伙伴信息</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">企業績效</td><td><input type="checkbox" name="dxcbox" οnclick="checkCount(this);">行業動態</td></tr><tr><td><input type="checkbox" name="cbox" />其他 <input name="qt3" size="5" type="text" ></td></tr></table><p>9.您所在企業從何時開始采用ERP(或MIS)系統?<select id="sel"></select>年</p><p>10.您所在企業網站的更新周期是多長時間?(單選)<select><option value="0">單選,請下拉</option><option value="1">每天</option><option value="2">每周</option><option value="3">每月</option><option value="4">每季度</option><option value="5">每半年</option><option value="6">半年以上</option></select></p><p>11.您認為目前您所在企業存在的主要問題:</p><table border="0"><tr><td>??</td> <td>非常重要</td> <td>重要</td> <td>一般 </td> <td>不重要</td> <td>不存在</td></tr><tr><td> <input  name="r3" type="checkbox" value="110"/>利潤增長 </td><td align="center" align="center"><input  name="r4" type="radio"/>5</td><td align="center" align="center"><input  name="r4" type="radio"/>4</td> <td align="center" align="center"><input  name="r4" type="radio"/>3</td> <td align="center" align="center"><input  name="r4" type="radio"/>2</td> <td align="center" align="center"><input  name="r4" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="111"/>市場份額</td><td align="center" align="center"><input  name="c5" type="radio"/>5</td><td align="center" align="center"><input  name="c5" type="radio"/>4</td> <td align="center" align="center"><input  name="c5" type="radio"/>3</td> <td align="center" align="center"><input  name="c5" type="radio"/>2</td> <td align="center" align="center"><input  name="c5" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="112"/>戰略管理</td><td align="center" align="center"><input  name="c6" type="radio"/>5</td><td align="center" align="center"><input  name="c6" type="radio"/>4</td> <td align="center" align="center"><input  name="c6" type="radio"/>3</td> <td align="center" align="center"><input  name="c6" type="radio"/>2</td> <td align="center" align="center"><input  name="c6" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="113"/>部門協調</td><td align="center" align="center"><input  name="c7" type="radio"/>5</td><td align="center" align="center"><input  name="c7" type="radio"/>4</td> <td align="center" align="center"><input  name="c7" type="radio"/>3</td> <td align="center" align="center"><input  name="c7" type="radio"/>2</td> <td align="center" align="center"><input  name="c7" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="114"/>員工流失</td><td align="center" align="center"><input  name="c8" type="radio"/>5</td><td align="center" align="center"><input  name="c8" type="radio"/>4</td> <td align="center" align="center"><input  name="c8" type="radio"/>3</td> <td align="center" align="center"><input  name="c8" type="radio"/>2</td> <td align="center" align="center"><input  name="c8" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="115"/>激勵機制</td><td align="center" align="center"><input  name="c9" type="radio"/>5</td><td align="center" align="center"><input  name="c9" type="radio"/>4</td> <td align="center" align="center"><input  name="c9" type="radio"/>3</td> <td align="center" align="center"><input  name="c9" type="radio"/>2</td> <td align="center" align="center"><input  name="c9" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="116"/>人才培養和引進</td><td align="center" align="center"><input  name="c10" type="radio"/>5</td><td align="center" align="center"><input  name="c10" type="radio"/>4</td> <td align="center" align="center"><input  name="c10" type="radio"/>3</td> <td align="center" align="center"><input  name="c10" type="radio"/>2</td> <td align="center" align="center"><input  name="c10" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="117"/>領導班子</td><td align="center" align="center"><input  name="c11" type="radio"/>5</td><td align="center" align="center"><input  name="c11" type="radio"/>4</td> <td align="center" align="center"><input  name="c11" type="radio"/>3</td> <td align="center" align="center"><input  name="c11" type="radio"/>2</td> <td align="center" align="center"><input  name="c11" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="118"/>企業信息化建設</td><td align="center" align="center"><input  name="c12" type="radio"/>5</td><td align="center" align="center"><input  name="c12" type="radio"/>4</td> <td align="center" align="center"><input  name="c12" type="radio"/>3</td> <td align="center" align="center"><input  name="c12" type="radio"/>2</td> <td align="center" align="center"><input  name="c12" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="119"/>品牌經營</td><td align="center" align="center"><input  name="c13" type="radio"/>5</td><td align="center" align="center"><input  name="c13" type="radio"/>4</td> <td align="center" align="center"><input  name="c13" type="radio"/>3</td> <td align="center" align="center"><input  name="c13" type="radio"/>2</td> <td align="center" align="center"><input  name="c13" type="radio"/>1</td></tr><tr><td> <input  name="r3" type="checkbox" value="120"/>其他<input  name="qt4" size=5 	type="text" /></td></tr></table>
</div>
</div>
</body>
</html>
<script type="text/javascript">onload = function (){var year=new Date().getFullYear(); //獲取當前年份var sel = document.getElementById ('sel');//獲取select下拉列表for ( var i = 1990; i <= year; i++)//循環添加2006到當前年份的每個年份依次添加到下拉列表{var option = document.createElement ('option');option.value = i;var txt = document.createTextNode (i);option.appendChild (txt);sel.appendChild (option);}/********************************************************/}function checkCount(cbox) {var dx4 = document.getElementsByName("dxcbox");var num = 0;for (i = 0; i < dx4.length; i++){if (dx4[i].checked)num += 1;}if (num > 4) {alert("最多可以選擇四個!");//num-=1;cbox.checked = false;}}</script>


版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://808629.com/188118.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息