html+js 簡單靜態網頁設計

阿新 • • 發佈：2018-12-23

實驗一簡單靜態網頁設計
一、實驗目的：
1. 複習使用記事本編輯網頁的方法。
2. 熟悉不同表單控制元件型別的應用。
3. 練習使用記事本在網頁中新增表單與表單元素。
二、實驗內容：
根據提供的素材設計線上調查問卷。
三、實驗要求：
1. 熟練掌握使用記事本進行簡單網頁編輯的方法。
2. 能夠區分不同表單元素的應用場景。
3. 掌握表單與表單元素的元素名和屬性對。
四、實驗學時：4學時
五、實驗步驟：
0. 實驗準備：（1）在硬碟上為本實驗建立資料夾（以下稱為“實驗資料夾”）。
1. 根據提供的素材設計線上調查問卷：
（1）從開始選單啟動記事本；
（2）在記事本中，錄入一個最簡合法HTML文件；
（3）設定該HTML文件首頁如圖1。要求按照首頁來設計頁面index.html.使用的圖片在image資料夾中。

（4）在首頁點選提交後轉向企業電子商務調查問卷.
（5）開啟本實驗提供的WORD文件questionnaire.doc，這個調查問卷比較長，瀏覽該調查問卷的內容。由於該調查問卷比較長，選取並標示該調查問卷中具有代表性的問題（更改一下文字背景），準備將它們在網頁中進行實現，儲存該WORD文件；
（6）在記事本中新增表單；
（7）在表單中插入表單元素，用於在網頁中顯示步驟（4）中標示的問題及答案；
（8）為表單新增提交和重置按鈕；
（9）儲存網頁為questionaire.htm。
提示：本實驗沒有標準答案，但是在將WORD文件中的調查問題及答案移植到網頁中時，要儘可能多地使用到講過的表單元素（如文字框、單選按鈕、複選按鈕、下拉選單/列表、框架等）。另外，網頁上調查問卷的答案的表現形式與並不一定要與WORD中的一致，而是應該選擇使用更符合需要的表單元素，例如對於答案選項比較多的問題來說，應該優先選用下拉選單/列表，單選使用下拉選單，多選使用列表。
六、實驗程式碼：
index.html

<!DOCTYPE html>

<html>
<head>
<title>實驗一</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB18030">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 

<style type="text/css">
body {
    width: 694px;
    margin: auto;
}

.top,.bottom,.center {
    height: auto;
    width: 100%;
}

#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;
}

.img1 {
    width: 35px;
    height: 300px;
    float: left;
}

.img2 {
    width: 44px;
    height: 300px;
    float: right;
}
</style>
</head>

<script language="JavaScript">
        function submitOnclick(){
        var form1=document.getElementById('form1');
        //使用者名稱格式驗證
        if(form1.text1.value==""){
            alert("使用者名稱不能為空");
            return false;
        }
        if(form1.text1.value.length<3 || form1.text1.value.length>20){
            alert("使用者名稱不能少於3個字元，不能超過20個字元");
            return false;
        }
        //密碼格式驗證
        if(form1.pwd1.value==""){
            alert("密碼不能為空");
            return false;
        }
        if(form1.pwd1.value.length<6 || form1.pwd1.value.length>20){
            alert("密碼不能少於6個字元，不能超過20個字元");
            return false;
        }
        // 第二次輸入密碼一致性驗證
        if(form1.pwd1.value != form1.pwd2.value){
            alert("兩次輸入密碼不一樣，請重新輸入！")
            return false;
        }
        //性別判斷
        if(form1.gender.value != "male" && form1.gender.value != "female"){
            alert("請選擇性別！")
            return false;
        }
        if (email.indexOf("@") == -1 && email.indexOf(".") == -1) {
            alert("郵箱格式不正確！");
            return false;
        }
            return true;
     }
</script>

<body>
    <!-- 頂部盒子 -->
    <img class="top" src="image/01.gif" style="height: 180px;">
    <h1 style="margin: -5px;"></h1>
    <!-- 中間的盒子 -->
    <div class="center">
        <img src="image/02.gif" class="img1">
        <div id="left">
            <img src="image/reg.gif"> <b>註冊幫助</b>
            <ul>
                <li>會員名：為會員登入網站的通行證，長度控制在3-20個字元之內。</li>
                <li>密碼：請設定在6-20位之間。</li>
                <li>確認密碼：確認密碼必須與密碼一致。</li>
                <li>Email：請填寫有效的Email地址，以便於與您聯絡。</li>
            </ul>
        </div>

        <img src="image/04.gif" class="img2">
        <div id="right">
            <form id="form1" action="questionnaire.html">
                <table>
                    <tr>
                        <td>使用者名稱：</td>
                        <td><input name="text1" type="text"
                            placeholder="長度控制在3-20個字元">
                        </td>
                    </tr>
                    <tr>
                        <td>密碼：</td>
                        <td><input type="password" name="pwd1"
                            placeholder="請設定在6-20位之間">
                        </td>
                    </tr>
                    <tr>
                        <td>確認密碼：</td>
                        <td><input type="password" name="pwd2" size="20" />
                        </td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td><input type="radio" name="gender" value="male" />男 <input
                            type="radio" name="gender" value="female" />女</td>
                    </tr>
                    <tr>
                        <td>E-mail：</td>
                        <td><input type="email" name="email" size="30" />
                        </td>
                    </tr>
                    <tr>
                        <td><input name="text3" value="提交" type="submit"
                            onclick="return submitOnclick()">
                        </td>
                        <td><input type="reset" value="重置" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <!-- 豎線的實現 -->
        <table class="line">
            <tr>
                <td valign="top"></td>
            </tr>
        </table>

    </div>
    <!-- 底部盒子 -->
    <img class="bottom" src="image/03.jpg">
</body>
</html>

questionnaire.html


<html>
<head>
<title>這是實驗一的調查介面</title>
<style type="text/css">
body {
    padding: 0px 15% 0px 15%;
}

.p1 {
    text-align: center;
    font-size: 2em;
}

.d p {
    font-size: 1em;
    font-family: STKaiti;
}

.ibtn {
    border: 1px;
    border-bottom-style: solid;
    border-right-style: none;
    border-top-style: none;
    border-left-style: none;
}
</style>

<script language="javascript">
    function chkbox(elm) {
        var obj = document.getElementsByName("cbox");
        var num = 0;
        for (i = 0; i < obj.length; i++)
            if (obj[i].checked)
                num += 1;
        if (num > 4) {
            alert("最多可以選擇四個！");
            elm.checked = false;
        }
    }
</script>

</head>

<!-- 調查問卷的說明事項 -->
<body>
    <div>
        <p class="p1">企業電子商務調查問卷</p>
        <div class="d">
            <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>
        <ul style="list-style-type:square;">
            <li><strong style="font-size:1.3em">一、企業基本簡況</strong><br />
                <div style="font-size:1.1em">
                    <p>
                        1. 企業名稱： <input type="text" class="ibtn" /> &nbsp 註冊地：<input
                            type="text" class="ibtn" size="20" /><br /> 2. 您在所在企業的職務（職位）：<input
                            type="text" class="ibtn" size="20" /> <br /> 3. 企業成立時間：<input
                            type="text" class="ibtn" size="20" /> <br /> 4. 企業所在行業：<input
                            type="text" class="ibtn" size="20" />
                    </p>
                    <p>
                        <u><b>以下選擇題，若無特別宣告，皆為多項選擇題</b> </u>
                    </p>
                    <p>5.您所在企業的所有制形式為：（單選）</p>
                    <input type="radio" name="radio1" />國有 <input type="radio"
                        name="radio1" />集體 <input type="radio" name="radio1" />民營 <input
                        type="radio" name="radio1" />外資 <input type="radio" name="radio1" />合資
                    <input type="radio" name="radio1" />股份制 <input type="radio"
                        name="radio1" />其他 <input type="text" class="ibtn" name="txt1"
                        size="5" />

                    <p>6. 您所在企業的型別為： （多選）</p>
                    <input type="checkbox" name="radio2" />流程型製造業 <input
                        type="checkbox" name="radio2" />離散型製造業 <input type="checkbox"
                        name="radio2" />混合型企業 <input type="checkbox" name="radio2" />旅遊服務業
                    <br> <input type="checkbox" name="radio2" />餐飲服務業 <input
                        type="checkbox" name="radio2" />資訊服務業 <input type="checkbox"
                        name="radio2" />金融服務業 <input type="checkbox" name="radio2" />物流服務業<br>
                    <input type="checkbox" name="radio2" />其他 <input type="text"
                        class="ibtn" name="txt2" size="5" />

                    <table>
                        <tr>
                            <td><p>7. 您所在企業是否是上市公司： （下拉框）</p>
                            </td>
                            <td><select>
                                    <option value="00">請選擇</option>
                                    <option value="01">是</option>
                                    <option value="02">不是</option>
                            </select></td>
                        </tr>
                    </table>
                </div></li>

            <li><strong style="font-size:1.3em">二、企業資訊化總體狀況</strong><br />
                <p>8. 您所在企業最需要的資訊包括（選擇其中最重要的4項資訊）：</p>
                <table>
                    <tr>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">產品開發</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">生產技術</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">技術引進</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">市場行情</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">競爭對手</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">政策法規</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">薪酬水平</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">人才資訊</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">財務狀況</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">投資融資</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">市場預測</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">員工關係</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">客戶資訊</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">供應商資訊</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">產品價格</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">質量管理</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">社交活動</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">合作伙伴資訊</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">企業績效</td>
                        <td><input type="checkbox" name="cbox"
                            onclick="chkbox(this);">行業動態</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cbox" />其他 <input
                            type="text" class="ibtn" name="txt3" size="5" />
                        </td>
                    </tr>
                </table></li>
        </ul>
    </div>
</body>
</html>

效果展示

這裡寫圖片描述

html+js 簡單靜態網頁設計

效果展示

html+js 簡單靜態網頁設計

html+jsp 簡單靜態網頁設計

練習HTML——簡單的網頁設計

簡單靜態網頁的設計

HTML靜態網頁設計

HTML 5+CSS 3網頁設計經典範例 (李俊民,黃盛奎) 隨書光盤?

HTML靜態網頁css成品DW大學生網頁作業制作畢業設計

製作一張簡單的網頁（HTML+CSS+JS) 【2】

製作一張簡單的網頁（HTML+CSS+JS) 【3】

製作一張簡單的網頁（HTML+CSS+JS）【1】

tomcat部署簡單的html靜態網頁

html網頁設計細節總結及實踐經驗總結

Html靜態網頁下載—Teleport Pro 1.68 官方原版

簡單網頁設計與布局

HTML+CSS+JS簡單實現支付寶付款界面效果

html網頁設計

靜態網頁框架設計首次體驗（文章改）

Linux使用Node.js建立訪問靜態網頁的服務實例詳解

HTML&XML網頁設計 (曾鴻) pdf掃描版

Python開發簡單爬蟲之靜態網頁抓取篇：爬取“豆瓣電影 Top 250”電影數據

html+js 簡單靜態網頁設計

效果展示

相關推薦