網頁表格表單設計_第1頁
網頁表格表單設計_第2頁
網頁表格表單設計_第3頁
網頁表格表單設計_第4頁
網頁表格表單設計_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網頁設計上機實驗報告學院名稱管理學院專業(yè)（班級）姓名（學號）指導教師倪麗萍實驗一1.實驗要求：設計一張表格，并在表格當中填充文本，要求樣式如下圖所示：第1個單元格第2個單元格第3個單元格第4個單元格第5個單元格第6個單元格2.設計方法及思路：利用Dreamweavercc2014軟件進行代碼的設計。在<body></body>主體中添加表格代碼，用<table></table>標記表格，設定表格邊框線厚度border為1，表格內字體距單元格邊框cellpadding為20，單元格之間的間隔為0。開始先設計一個三行三列的表格，用<tr></tr>標記表格的行，用<td></td>標記表格的列。然后用colspan合并第一行的第一、第二個單元格，并刪除一行列標記代碼。得到一個合并單元格，如上圖所示的第1個單元格，用rowspan合并第一行的第二個單元格和第二行的第三個單元格，刪除一行列標記。得到一個合并的單元格，如上圖所示的第2個單元格。再用colspan合并第三行的第二個和第三個單元格，刪除一行列標記，得到如圖所示的第6個單元格。再根據屬性要求，設置字體（fontface標記），字體大?。╢ontsize標記），字體顏色（fontcolor），對其方式（align）。這樣的話就可以得到一個經過處理后的表格。附實驗一代碼：<!doctypehtml><html><head><metacharset="utf-8"><title>表格設計</title></head><body><tableborder="1"width="800"cellpadding="20"cellspacing="0"><tr><tdcolspan="2"align="center">第一個單元格</td><tdrowspan="2"align="center">第二個單元格</td></tr><tr><tdalign="center">第三個單元格</td><tdalign="center">第四個單元格</td></tr><tr><tdalign="center">第五個單元格</td><tdcolspan="2"align="center">第六個單元格</td></tr></table></body></html>實驗結果截圖：實驗二實驗要求：設計一個會員注冊表單，如下圖所示：實驗思路：一開始設計的時候，僅僅只是一行一行的設計下來，這樣會導致“用戶名”、“密碼”這些文本，沒有如上圖所示的對齊，一開始設計的思路是在這些文本前面加 ，空格標記來使這些文本對齊，但是不方便，而且不美觀，因此后來采用表格的設計思路，設計一個8行2列的表格，然后將需要填充的文本或者輸入域放置到單元格中，再在單元格中設計對齊方式，這樣的可以很方便的設計對齊方式。設計步驟：在body中添加一個<form></form>表單標記，目的是將表單中的內容看做一個整體。然后設置一下背景顏色，我加了一條長度為800的水平分割線，用<hr>標記。再添加一個表格標記，設置表格的總體屬性width="680"height="302"border="1"cellspacing="0"align="center"。接下來就在單元格中添加需要的文本，或者輸入域即可，本實驗中需要的輸入域有文本域，文本框，密碼域，單選域，復選框，以及提交與確認按鈕。設置第一列1~6行為右對齊，即可得到上圖的效果。在第二列中添加輸入域，添加輸入域的方法，可以在插入-表單選項中選擇相應的輸入域，或者直接輸入代碼。設置輸入域的屬性，比如輸入域的名字，值，以及初始的值。附實驗二代碼：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>我的網頁</title></head><body><bodybgcolor="lavender"><h1align="center">填寫注冊信息</h1><hr/><fontalign="left"><formaction=":8080/jsp"method=post><tablealign="center"width="800"border="0"cellpadding="3"cellspacing="0"><tr><tdalign="right">用戶名：</td><td>*<inputtype="text"name="user">用戶名由字母開頭，后跟字母，數字或者下劃線</td></tr><tr><tdalign="right">密碼：</td><td>*<inputtype="password"name="password">設置登陸密碼，最少六位！</td></tr><tr><tdalign="right">確認密碼：</td><td>*<inputtype="password"name="password">請再輸入你的密碼</td></tr><tr><tdalign="right">性別：</td><td>*<inputtype="radio"name="sex"value="Male">男<inputtype="radio"name="sex"value="female">女請選擇你的性別</td></tr><tr><tdalign="right">郵箱地址：</td><td>*<inputtype="text"name="mailaddress"MAXLENGTH="20">請輸入你的常用郵箱，可以用此用郵箱找回密碼!</td></tr><tr><tdalign="right"valign="top">基本情況:</td><td><textareaname="個人說明"rows="8" COLS="50"[READONLY]></textarea></td></tr><tr><td></td><tdalign="left"><inputtype="submit"value="提交"align="middle"><inputtype="reset"value="重置"></td></tr><tr><td></td><td><inputtype="checkbox"name="box1"value=""[check]>我已仔細閱讀并同意接受用戶使用協(xié)議</td></tr></table></form></body></html>實驗結果截圖：實驗三1.實驗要求：對實驗二的表單進行美化處理，得到如下圖的對比效果：實驗思路：用css樣式表對字體以及頁面進行美化設計，用javastript語言對填寫格式進行檢測。實驗步驟：用css樣式表設計的時候，分別使用class以及id類對大標題字體以及表格中的說明字體美化。我用id="information"標記了“填寫注冊信息”，用class="span"標記說明字體。用javastript語言檢測用戶輸入時候符合會員注冊表的要求，只有所有要求否符合的時候，才能提交，然后進入到表單標記中的action=“”所給出的目的地址中。附實驗三代碼：<!doctypehtml><html><head><metacharset="utf-8"><title>登錄信息表</title><scriptlanguage="javascript">functionjzy(){varname=document.forms[0].userName.value;varpwd1=document.forms[0].password1.value;varpwd2=document.forms[0].password2.value;varemail=document.forms[0].mailaddress.value;varchk=document.forms[0].box1.checked;varreg1=/^[a-zA-Z]\w+$/;varreg2=/^\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/;if(name.length<=0)alert("用戶名不能為空！");if(!reg1.test(name))alert("用戶名格式不正確！");if(pwd1.length<6)alert("密碼長度不能少于6個字符！");if(pwd1!=pwd2)alert("兩次密碼不一致！");if(!reg2.test(email))alert("郵箱格式不正確！");if(chk==false)alert("你需要仔細閱讀用戶使用協(xié)議！"); document.forms[0].submit();}</script><styletype="text/css">#information{color:#E43912}.span{color:#090EF3;font:"楷體"; font-size:20px }</style></head><body><formname="form1"><bodybgcolor="lavender"><h1align="center"id="information">填寫注冊信息</h1><hrwidth="800"><tablewidth="680"height="302"border="0"cellspacing="0"align="center"><tr><tdalign="right">用戶名：*</td><tdclass="span"><inputtype="text"name="userName">用戶名由字母開頭，后跟字母，數字或者下劃線</td></tr><tr><tdalign="right">密碼：*</td><tdclass="span"><inputtype="password"name="password1"MAXLENGTH="20"value="">設置登陸密碼，最少六位！</td></tr><tr><tdalign="right">確認密碼：*</td><tdclass="span"><inputtype="password"name="password2"MAXLENGTH="16"value="">請再輸入你的密碼</td></tr><tr><tdalign="right">性別：*</td><td><inputtype="radio"name="sex"value="Male">男<inputtype="radio"name="sex"value="female">女 <mclass="span">      請選擇你的性別</m></td></tr><tr><tdalign="right">郵箱地址：*</td><tdclass="span"><inputtype="text"name="mailaddress"maxlength="20">請輸入你的常用郵箱，可以用此用郵箱找回密碼!</td></tr><tr><tdvalign="top"align="right">基本情況：*</td> <td><textareaname="個人說明"cols="50"rows="8"></textarea></td></tr><tr><td></td><td><inputtype="checkbox"name="box1"value="">我已仔細閱讀并同意接受用戶使用協(xié)議</td></tr><tr><td></td><tdalign="left"><inputtype="submit"value="提交"onclick="jzy()"><inputtype="reset"value="重置"></td></tr></table><hrwidth="800"></form></body></h

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論