網(wǎng)頁表格表單設(shè)計(jì)_第1頁
網(wǎng)頁表格表單設(shè)計(jì)_第2頁
網(wǎng)頁表格表單設(shè)計(jì)_第3頁
網(wǎng)頁表格表單設(shè)計(jì)_第4頁
網(wǎng)頁表格表單設(shè)計(jì)_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)上機(jī)實(shí)驗(yàn)報(bào)告學(xué)院名稱管理學(xué)院專業(yè)（班級）姓名（學(xué)號）指導(dǎo)教師倪麗萍實(shí)驗(yàn)一1.實(shí)驗(yàn)要求：設(shè)計(jì)一張表格，并在表格當(dāng)中填充文本，要求樣式如下圖所示：第1個單元格第2個單元格第3個單元格第4個單元格第5個單元格第6個單元格2.設(shè)計(jì)方法及思路：利用Dreamweavercc2014軟件進(jìn)行代碼的設(shè)計(jì)。在<body></body>主體中添加表格代碼，用<table></table>標(biāo)記表格，設(shè)定表格邊框線厚度border為1，表格內(nèi)字體距單元格邊框cellpadding為20，單元格之間的間隔為0。開始先設(shè)計(jì)一個三行三列的表格，用<tr></tr>標(biāo)記表格的行，用<td></td>標(biāo)記表格的列。然后用colspan合并第一行的第一、第二個單元格，并刪除一行列標(biāo)記代碼。得到一個合并單元格，如上圖所示的第1個單元格，用rowspan合并第一行的第二個單元格和第二行的第三個單元格，刪除一行列標(biāo)記。得到一個合并的單元格，如上圖所示的第2個單元格。再用colspan合并第三行的第二個和第三個單元格，刪除一行列標(biāo)記，得到如圖所示的第6個單元格。再根據(jù)屬性要求，設(shè)置字體（fontface標(biāo)記），字體大?。╢ontsize標(biāo)記），字體顏色（fontcolor），對其方式（align）。這樣的話就可以得到一個經(jīng)過處理后的表格。附實(shí)驗(yàn)一代碼：<!doctypehtml><html><head><metacharset="utf-8"><title>表格設(shè)計(jì)</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>實(shí)驗(yàn)結(jié)果截圖：實(shí)驗(yàn)二實(shí)驗(yàn)要求：設(shè)計(jì)一個會員注冊表單，如下圖所示：實(shí)驗(yàn)思路：一開始設(shè)計(jì)的時候，僅僅只是一行一行的設(shè)計(jì)下來，這樣會導(dǎo)致“用戶名”、“密碼”這些文本，沒有如上圖所示的對齊，一開始設(shè)計(jì)的思路是在這些文本前面加 ，空格標(biāo)記來使這些文本對齊，但是不方便，而且不美觀，因此后來采用表格的設(shè)計(jì)思路，設(shè)計(jì)一個8行2列的表格，然后將需要填充的文本或者輸入域放置到單元格中，再在單元格中設(shè)計(jì)對齊方式，這樣的可以很方便的設(shè)計(jì)對齊方式。設(shè)計(jì)步驟：在body中添加一個<form></form>表單標(biāo)記，目的是將表單中的內(nèi)容看做一個整體。然后設(shè)置一下背景顏色，我加了一條長度為800的水平分割線，用<hr>標(biāo)記。再添加一個表格標(biāo)記，設(shè)置表格的總體屬性width="680"height="302"border="1"cellspacing="0"align="center"。接下來就在單元格中添加需要的文本，或者輸入域即可，本實(shí)驗(yàn)中需要的輸入域有文本域，文本框，密碼域，單選域，復(fù)選框，以及提交與確認(rèn)按鈕。設(shè)置第一列1~6行為右對齊，即可得到上圖的效果。在第二列中添加輸入域，添加輸入域的方法，可以在插入-表單選項(xiàng)中選擇相應(yīng)的輸入域，或者直接輸入代碼。設(shè)置輸入域的屬性，比如輸入域的名字，值，以及初始的值。附實(shí)驗(yàn)二代碼：!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>我的網(wǎng)頁</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">用戶名由字母開頭，后跟字母，數(shù)字或者下劃線</td></tr><tr><tdalign="right">密碼：</td><td>*<inputtype="password"name="password">設(shè)置登陸密碼，最少六位！</td></tr><tr><tdalign="right">確認(rèn)密碼：</td><td>*<inputtype="password"name="password">請?jiān)佥斎肽愕拿艽a</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]>我已仔細(xì)閱讀并同意接受用戶使用協(xié)議</td></tr></table></form></body></html>實(shí)驗(yàn)結(jié)果截圖：實(shí)驗(yàn)三1.實(shí)驗(yàn)要求：對實(shí)驗(yàn)二的表單進(jìn)行美化處理，得到如下圖的對比效果：實(shí)驗(yàn)思路：用css樣式表對字體以及頁面進(jìn)行美化設(shè)計(jì)，用javastript語言對填寫格式進(jìn)行檢測。實(shí)驗(yàn)步驟：用css樣式表設(shè)計(jì)的時候，分別使用class以及id類對大標(biāo)題字體以及表格中的說明字體美化。我用id="information"標(biāo)記了“填寫注冊信息”，用class="span"標(biāo)記說明字體。用javastript語言檢測用戶輸入時候符合會員注冊表的要求，只有所有要求否符合的時候，才能提交，然后進(jìn)入到表單標(biāo)記中的action=“”所給出的目的地址中。附實(shí)驗(yàn)三代碼：<!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("你需要仔細(xì)閱讀用戶使用協(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">用戶名由字母開頭，后跟字母，數(shù)字或者下劃線</td></tr><tr><tdalign="right">密碼：*</td><tdclass="span"><inputtype="password"name="password1"MAXLENGTH="20"value="">設(shè)置登陸密碼，最少六位！</td></tr><tr><tdalign="right">確認(rèn)密碼：*</td><tdclass="span"><inputtype="password"name="password2"MAXLENGTH="16"value="">請?jiān)佥斎肽愕拿艽a</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="">我已仔細(xì)閱讀并同意接受用戶使用協(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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論