Java Web基礎 網頁開發過程

Java Web基礎 網頁開發過程

1.規划網頁布局

由於之前學過web開發相關課程所以對於網頁的開發有一定的了解，一般的網頁布局會分為header content footer塊，然后再細化為幾個小塊

分析swpu 郵件主頁http://mail.swpu.edu.cn/

header中西南石油大學電子郵箱的圖標和文字是一張圖片，f12打開網頁源代碼，sources標簽中，找到圖片地址，下載

同樣的方法找到content中的背景圖片下載

同時由於圖片自帶背景顏色所以也要將header和footer的背景顏色找到

f12打開源代碼element中div class="t"中是header

找到對應的css文件的background-color屬性#f5f5f5（也可以用取色器軟件進行提取）

這樣資源的准備工作就完成了，接下來編寫代碼

2.編寫html+css文件

header：

​

<div id="header">
        <img src="login_logo.png" alt="" class="limg">
        <b><a>幫助</a></b>
    </div>

 

將css設置背景顏色等基礎屬性，html中插入圖片和文字，實現效果如下：

 

content:

     <div id="content">
         <div id="shell">
             <div class="head">
                 <b><p>賬號登錄</p></b>
             </div>
             <div>
                 <form action="">
                     <input type="text" id="user" placeholder="  用戶名" size="25">
                     <p class="ms1"></p>
                     <input type="password" id="ps" placeholder="  密碼" size="25">
                     <p class="ms2"></p>
                     <p class="ms3">學生選擇@stu.swpu.edu.cn</p>
                     <p class="ms4"><b>用戶登錄</b></p>
                     <a href="">忘記密碼</a>
                     <input type="button" id="btn" value="登錄" onclick="login()" />
                 </form>
             </div>
         </div>
     </div>

 

css中設置背景圖片等參數，html中再content塊中插入shell塊shell分為標題、提示文字、輸入框、按鈕等幾個分支實現效果如下：

 

footer:

 <div id="footer">
     <a>西南石油大學</a>
 </div>

 

footer比較簡單設置背景顏色以及寬度高度定位等屬性之后就完成了，效果如下：

3.編寫js靜態布局

 <script>
     function login() {
         var usv = document.getElementById("user");
         var psv = document.getElementById("ps");
         var btn = document.getElementById("btn");
         var msg1 = document.getElementsByClassName("ms1")[0];
         var msg2 = document.getElementsByClassName("ms2")[0];
         var cdus = usv.value.charCodeAt(0);
 ​
         if (usv.value.length == 0) {
             msg1.innerText = "用戶名不能為空";
         } else {
             msg1.innerText = "";
         }
         if (psv.value.length == 0) {
             msg2.innerHTML = "密碼不能為空";
         } else if (psv.value == '123' && usv.value == 'tom') {
             window.open("http://www.cnblogs.com/");
         } else {
             msg2.innerText = "密碼錯誤";
         }
     }
 </script>

 

寫一個函數login，對應登錄按鈕，設置在輸入框為空時，提示信息“不能為空”，密碼與賬號不對應時，提示信息“密碼錯誤”，賬號為"tom"密碼為"123"時，跳轉頁面至博客園，這里需要注意的是，如果將js代碼放在布局頁面之前的話，有可能會因為載入時頁面沒有載入完元素，而存在找不到的情況，所以要將js放在頁面之后，或者在函數前加上window.onload=function(){}

4.最終效果

github地址：https://github.com/xsq1999/-swpu-web-

5.總結

這次作業在學過web的課程之后還是比較簡單的，但是頁面沒有完全做到一比一還原，還有部分代碼的命名和格式有問題。