Web技術(shù)——基礎(chǔ)網(wǎng)頁編程
時間：2023-10-02 04:18:01 | 來源：網(wǎng)站運營
時間：2023-10-02 04:18:01 來源：網(wǎng)站運營
Web技術(shù)——基礎(chǔ)網(wǎng)頁編程：因為各種事情停了兩星期左右，真的是時運不濟(jì)，命途多舛。最近的經(jīng)歷就像過山車，忽高忽低。好不容易今天又可以抽點空出來繼續(xù)寫寫，這個系列想跟大家聊聊web編程（我也不是專業(yè)的哈）。課程中學(xué)到的一些東西的總結(jié)，拋磚引玉，大家只要覺得有一點點用處我就很開心了(*^▽^*)
一、簡單的前端設(shè)計工具使用
示例：用DreamWeaver MX編制如下所示的個人簡歷表格。
步驟：
具體差異來自于不同的DW版本- 打開DreamWeaver
- 選擇[插入]---->[表格]，生成6行8列的表格。
- 調(diào)整表格各欄的高度和寬度，合并部分單元格(在選擇要合并的單元格--> [鼠標(biāo)點擊右鍵]--->[表格選項]--->[合并單元格]
- 在單元格中設(shè)置字體/字號/字形/顏色/大小等，需要之處添加鏈接和列表標(biāo)記點([鼠標(biāo)點擊右鍵]--->[對齊]--->[居中對齊] [鼠標(biāo)點擊右鍵]--->[字體/樣式]--->[添加類]--->[完成對類的定義]---->[選擇恰當(dāng)?shù)淖煮w類即可])
- 插入照片或其他圖片，調(diào)整圖片大小，固定約束比及高寬。
- 編制好上述表格后，另存為ex2-1.html。
- 在表格下方帶圖片熱區(qū)。
- 選做：在表格下方插入一個動畫。
- 雙擊ex2-1.html文件，在瀏覽器中觀察其顯示效果。
制作好的表格如下所示，還需要進(jìn)行一些局部調(diào)整。首先先看在瀏覽器中效果：
保存代碼后在瀏覽器中打開如下所示：
接下來對代碼進(jìn)行一些處理，顯示
單邊框無間距。在生成的代碼style定義的頭文件部分加上如下所示代碼：
完美解決了這個問題，終極效果如下所示（代碼詳見ex2-1.html）：
二、使用JavaScript腳本語言設(shè)計程序
示例- 用JavaScript腳本語言設(shè)計一個簡單的驗證程序：要求在文本框中輸入一個1~100之間的整數(shù)，單擊“提交”按鈕。若輸入正確，則彈出對話框，顯示“你輸入對了，謝謝！”，如圖3-12所示；若輸入不正確，則彈出對話框，顯示“請輸入一個從1~100之間的數(shù)字。”
步驟：
- 在script標(biāo)記里編寫function完成判斷操作（注：靜態(tài)html只有顯示功能，無法與用戶交互，交互方式需要自己定義）
<script type="text/javascript">function validate_input(x)//這里input是輸出變量{ with (x) { if (x>=1&&x<=100) alert("你輸入對了，謝謝！"); else alert("請輸入一個從1到100之間的數(shù)字"); //alert是警告框，輸出警告文字 }}</script>2.在body里定義form表單，獲取輸入，可以多了解一下form標(biāo)記，input標(biāo)記等，W3CSchool尚明有很多示例。
<body> <p align="left"><font size="6"><B>簡單驗證</B></font></p> <hr> <form method="post" name="form1" action=""><!--定義表單，輸入框類型為文本，變量名為n,初值為0--> <p align="left">請輸入一個1到100之間的數(shù)字:<input type = "text" name = "n" size = "12" value="0" /></p> <p align="left"><input type = "button" value="提交" onclick = "validate_input(document.form1.n.value)" /></p> </form></body>腳本文件運行效果圖如下所示，代碼詳見ex3-2.html
輸入數(shù)字正確時，點擊提交按鈕出現(xiàn)的情況：
輸入錯誤時，點擊提交出現(xiàn)的情況：
三、Table標(biāo)簽的使用
【創(chuàng)建如下圖所示的貨品價格表】【具體步驟如下所示】- 建立一個html5的文件，并使用<title>歡迎查看貨品表</title>標(biāo)簽生成當(dāng)前網(wǎng)頁的標(biāo)題。
- 使用<table border="1"></table>標(biāo)簽生成一個帶邊框的表格,接下來在表格里填充需要的信息,其中超鏈接用<a href="#">標(biāo)簽生成。
- 使用 <tr>......</tr>生成每行信息，其中<th>名稱</th>定義表頭，<td>內(nèi)容</td>是每列的信息，在<tr>標(biāo)簽內(nèi)部相當(dāng)于定位當(dāng)前單元格。完成后可看到初步效果圖如下所示，發(fā)現(xiàn)有兩個單元格不在了。
- 注意表格里邊沒有內(nèi)容的部分也需要設(shè)置占位符，否則會出現(xiàn)上圖所示的表格殘缺的情況(例：復(fù)讀機(jī)備注一欄的<td></td>標(biāo)簽不能省)。
- 占位符加上后，表格初步完成，接下來設(shè)置邊框顏色。有兩種方式如下：
- 標(biāo)題的設(shè)置以及表格的整體居中。在剛才定義的table style中設(shè)置caption標(biāo)簽屬性。包括：
- 最終顯示效果如下所示：
8. 注意表格里邊沒有內(nèi)容的部分也需要設(shè)置占位符，否則會出現(xiàn)上圖所示的表格殘缺的情況(例：復(fù)讀機(jī)備注一欄的<td></td>標(biāo)簽不能省)。
9. 占位符加上后，表格初步完成，接下來設(shè)置邊框顏色。有兩種方式如下：
a.通過在每個標(biāo)簽里邊設(shè)置border。 b.定義關(guān)于table的CSS類。10. 第一種辦法需要在<table>以及每個行列標(biāo)簽<tr><td>中設(shè)置顏色，造成代碼冗余，因此采用定義
CSS 的style中table類的border-coror為藍(lán)色來實現(xiàn)。
table{ border-color: #2228ff; margin:0 auto;}table td{ border-color: #2228ff;} table th{ border-color: #2228ff;}11. 標(biāo)題的設(shè)置以及表格的整體居中。在剛才定義的table style中設(shè)置caption標(biāo)簽屬性。包括：
table caption{ font-family: 楷體; font-size: larger; color: #FF0000;}12. 在table中添加使整個表格居中的屬性
margin:0
auto;
13. 最終效果圖如下所示：四、Form標(biāo)簽的使用
【創(chuàng)建如下圖所示的用戶留言表單】【具體步驟如下所示】- 建立一個html5的文件，并在<head></head>標(biāo)簽中使用 <title>用戶留言輸入表單</title>標(biāo)簽生成當(dāng)前網(wǎng)頁的標(biāo)題。
- 使用<form></form>標(biāo)簽生成信息輸入表單。為了對齊美觀，將輸入信息布局在<table></table>其中，電話和電子郵件輸入類型利用html5提供的tel和email類型，在submit時即可自行驗證。
<tr> <td><p>電    話:</p></td> <td><input type="tel" name="phone_number"></td></tr><tr> <td><p>電子郵件:</p></td> <td><input type="email" name="e_mail"></td></tr>3. 在性別一欄的<td>標(biāo)簽中使用<select></select>標(biāo)簽生成下拉菜單。
<select name="sex"> <option value="male">男</option> <option value="female">女</option></select>4. 使用
<button></button>標(biāo)簽生成按鈕,其中，提交按鈕的類型為”submit”，而重寫類型的按鈕為”reset”。
<textarea name="leave_message" rows="15" cols="50"></textarea> <br><br> <button type="submit" onclick="return validate_leave_message() ">提交</button> <button type="reset" onclick="validate_reset()">重寫</button></form>5. 留言驗證采用js的方式，此外，
重新輸入功能也選擇在
<head></head>標(biāo)簽中輸入js腳本，代碼如下所示：
<script type="text/javascript"> function validate_leave_message() { //驗證留言的有效性 var t = document.getElementById("leave_message").value; if(t==""){ alert("留言為空！請輸入留言"); return false; } else if(t.search("壞蛋")>=0){ alert("留言中含有敏感詞，輸入無效！"); return false; } else { alert("留言輸入有效"); return true; } } function validate_reset() { //驗證重寫按鈕的有效性 var t = document.getElementsByName("input").value; if(t==null){ alert("信息為空！無需清空！") } else { t.remove(); alert("信息已清空！"); } }</script>6. 運行ex4-2.html后，界面效果圖如下所示：
7. 圖中點擊提交按鈕時會對通過
validate_leave_message()留言進(jìn)行驗證，而e_mail和phone_number的驗證則通過html5的tel和e_mail類型進(jìn)行驗證，示例效果如下所示：
8. 空留言時點擊提交會出現(xiàn)警示框：
9.輸入如下信息，提示留言驗證成功，點擊確定后驗證其它信息：
10.輸入上述信息后，提示電子郵件輸入錯誤，如下所示：
11. 輸入正確電子郵件后，點擊提交，網(wǎng)頁通過驗證。再次輸入信息，點擊重寫按鈕，輸入框中所有內(nèi)容被清空。
其他驗證功能詳見代碼。
五、干貨總結(jié)
- 合適的開發(fā)工具能有效的提高網(wǎng)頁開發(fā)的速度。對于Web技術(shù)初學(xué)者來說，如何在網(wǎng)頁制作初期避開復(fù)雜的代碼進(jìn)行直觀簡便的設(shè)計顯得尤為重要。通過DreamWeaver工具的使用，在設(shè)計網(wǎng)頁時就生成了大部分的代碼，后續(xù)只需要對代碼進(jìn)行微調(diào)即可，再加上代碼效果可視化，大大提高了初學(xué)者對于網(wǎng)頁開發(fā)的興趣。JavaScript是一種動態(tài)類型/弱類型的腳本語言，主要用來向html頁面添加交互功能，此外，html是一種解釋性腳本語言(代碼不用進(jìn)行預(yù)編譯)。
- 靜態(tài)網(wǎng)頁只有單純的html結(jié)構(gòu)，無法產(chǎn)生數(shù)據(jù)交互。通過使用JavaScript使得網(wǎng)頁能在客戶端對用戶的部分操作做出響應(yīng)并返回操作結(jié)果，實現(xiàn)了用戶和網(wǎng)頁之間的數(shù)據(jù)交互。此外，將一部分處理用戶操作的功能放在客戶端，能有效降低服務(wù)器的繁忙程度；對B/S架構(gòu)的網(wǎng)頁來說是提高速度的有效途徑。
- 通過利用JS，可以對輸入的數(shù)據(jù)進(jìn)行驗證，彈出提示框等，有助于提示用戶做出正確的操作。此外，要開發(fā)出美觀實用的網(wǎng)頁并不能單靠html，一些簡潔美觀CSS樣式和客戶友好型的JS響應(yīng)也是一個好的網(wǎng)頁必要的組成部分。
484很簡單？~下一篇我們進(jìn)階一下，探討一下簡單的客戶端和服務(wù)端編程。You can obtain all my code on my github:
關(guān)鍵詞：技術(shù),基礎(chǔ)
在線咨詢
