1.?? 復習使用記事本編輯網頁的方法。
2.?? 熟悉不同表單控件類型的應用。
3.?? 練習使用記事本在網頁中添加表單與表單元素。
如何做靜態網頁?
html靜態網頁設計,
1.?? 熟練掌握使用記事本進行簡單網頁編輯的方法。
2.?? 能夠區分不同表單元素的應用場景。
3.?? 掌握表單與表單元素的元素名和屬性對。
0.?? 實驗準備:(1)在硬盤上為本實驗建立文件夾(以下稱為“實驗文件夾”)。
1.?? 根據提供的素材設計在線調查問卷:
(1)?? 從開始菜單啟動記事本;
(2)?? 在記事本中,錄入一個最簡合法HTML文檔;
<!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>
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态