網(wǎng)頁設計作業(yè)_第1頁
網(wǎng)頁設計作業(yè)_第2頁
網(wǎng)頁設計作業(yè)_第3頁
網(wǎng)頁設計作業(yè)_第4頁
網(wǎng)頁設計作業(yè)_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

《網(wǎng)頁設計》大作業(yè)

專業(yè)：化學工程與工藝學院:化學工程學院學號:0120920390311姓名：王戰(zhàn)科

（以下題目文檔要求：①設計界面②程序源代碼）

一、設計網(wǎng)頁，用滾動字幕顯示為：“武漢理工大學歡迎您！二（20分）

（要求文字上、下、左、右交替滾動）

參考界面如圖lo

武漢理工大學歡迎您!

答：1.設計界面

武漢理工大專

我.河羽丁十里西詛1你1

比］以中-L人子隊足1心1

t學歡迎您！

2.程序源代碼

<!DOCTYPEhtmlPUBLICn-//W3C//DTDXHTML1.0Transitional//ENn

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http:〃/1999/xhtml”>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

vtitle>王戰(zhàn)科網(wǎng)頁設計大作業(yè)第一題v/title>

<styletype="text/css">

<!-

.STYLE4{

font-size:24px;

color:#FF0000;

)

->

</style>

</head>

<body>

<formid="forml”name="forml"method="post"action="">

<tablewidth="632nheight="260"border="lnalign="centerncellpadding="16n

bordercolor="#0000FFn>

<tr>

<tdwidth="277,1xmarqueedirection=Hdown"behavior="scroll">

<spanclass="STYLE4”>武漢理工大學歡迎您！v/span></marquee>v/td>

<tdwidth="279"xmarqueedirection^"left"behavior="scroll">

<spanclass="STYLE4”>武漢理工大學歡迎您！</span>v/marquee>v/td>

</tr>

<tr>

<td><marqueedirection、'up"behavior="scroll">

<spanclass="STYLE4">武漢理工大學歡迎您！</span></marquee>v/td>

<tdxmarqueedirection="right"behavior=nscroll">

<spanclass="STYLE4”>武漢理工大學歡迎您！v/span></marquee>;</td>

</tr>

</table>

</form>

</body>

</html>

二、用表格及表單設計圖2所示網(wǎng)頁。（30分）

參考界面如圖2o

請留下個人資料

□運動□閱讀

您的愛好:

□聽音樂口旅游

［全部重寫

答：1.設計界面

請留下個人資料

姓名：

電話：

E-mail：

性別：。男。女

年齡：[2。^^v|

留言板:

您的愛好：口運動口閱讀

□聽音樂口旅游

2.程序源代碼

<!DOCTYPEhtmlPUBLIC"-/AV3C//DTDXHTML1.0Transitional//ENH

"http:〃/TR/xhtmll/DTD/xhtmll-transitional.dtd”>

<htmlxmlns="http:〃/1999/xhtml”>

<head>

<metahttp-equiv=HContent-Type"content=ntext/html;charset=utf-8n/>

王戰(zhàn)科網(wǎng)頁設計大作業(yè)第二題

<styletype=ntext/css">

<!-

.STYLE2{font-size:18px;font-family:“黑體”;}

.STYLE3{font-size:18px}

.STYLE4{font-size:16px}

.STYLE5{font-size:18;}

->

</style>

</head>

<body>

<formid="formr,name=nforml"method=npost"action="">

<tablewidth=H723nborder=nOnalign=HcenterHbordercolor=n#OOOOFFnbgcolor=n#EBE9EDn>

<trxtdwidth=n717"height="432"valign="middle"xtablewidth=n754nborder=nO"

align="center”>

<trxtdwidth="748nheight="306nbgcolor=n#FFFFFFu><blockquote><blockquote>

<tablewidth=n537nheight="362nborder=nOHalign="center">

<tr>

<tdheight="358nvalign=nmiddlen><tablewidth=n574nborder=HOnalign="centerH>

<tr>

<tdwidth="568Hheight="30nvalign=Hbaseline"><divalign="center"

class="STYLE2"><u>請留下個人資料</u></div></td>

</tr>

<tr>

<tdxspanclass="STYLE3H>

<label></label>

</span>

<divalign=njustifynclass="STYLE3n>

<blockquote>

<blockquote>

<p>姓名：

<inputname="xmntype="text"id="xmnsize="12"maxlength="8"/>

</p>

</blockquote>

</blockquote>

</divx/td>

</tr>

<tr>

<tdxspanclass="STYLE3H>

<label></label>

</span>

<divalign—justify”class二"STYLE3”>

<blockquote>

<blockquote>

<p>電話：

<inputname="dh"type="text"id="dh"size=n16"maxlength="12"/>

</p>

</blockquote>

</blockquote>

</divx/td>

</tr>

<tr>

<tdxspanclass=nST￥LE3H>

<label></label>

</span>

<divalign="justifyHclass="STYLE3">

<blockquote>

<blockquote>

<palign="justify">E-mail：

<inputtype="textnname=',yjHid="yj”/>

</p>

</blockquote>

</blockquote>

</divx/td>

</tr>

<tr>

<tdheight二“24”>vspanclass="STYLE3n>

<label></label>

</span>

<blockquoteclass=HSTYLE3">

<blockquote>

<p>性別：

<inputtype="radio"name="radio"id="n"value="n"/>

男

<inputtype=Hradio"name=Hradionid="nv"value="nvn/>

女</p>

</blockquote>

</blockquote></td>

</tr>

<tr>

<td><spanclass="STYLE3">

<label></label>

</span>

<divalign="justify”class="STYLE3n>

<blockquote>

<blockquote>

<p>年齡：

<selectname="nl"id="nln>

<optionselected=nselectedn>20歲以下〈/option〉

<option>20至lj30歲</option>

<option>30至！J40歲</option>

<option>40歲以上</option>

</select>

</p>

</blockquote>

</blockquote>

</divx/td>

</tr>

<tr>

<tdheight=n209H><label>

<blockquote>

<blockquote>

<pclass二"STYLE5”>留言板：

<textareaname=nlybnid=',lybHcols=n30nrows=H5Hx/textarea>

</p>

<pclass="STYLE5”>您的愛好：

<inputtype=ncheckboxHname="ahlnid=nahl"/>

運動

<inputtype=',checkboxHname="ah2"id=nah2H/>

閱讀v/p>

<blockquoteclass="STYLE4">

<blockquote>

<pclass=,,STYLE5n>

<inputtype=ncheckbox"name=uah3"id=nah3n/>

聽音樂

<inputtype=,'checkboxMname=,,ah3Hid="ah4”/>

旅游v/p>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

<spanclass="STYLE4n>

</label>

</spanx/td>

</tr>

</tablex/td>

</tr>

</table>

<P>

<label>

<divalign="centerH>

<divalign="centern>

<inputtype="submit"name="tijiao"id="tijiao”value="提交"/>

<inputtype="submitnname="chongxie"id="chongxie"value="全部重寫”/>

</div>

</label>

</blockquote>

</blockquotex/td>

</tr>

</tablex/td>

</tr>

</table>

</form>

</body>

</html>

三、設計表單，并用JavaScript代碼驗證表單數(shù)據(jù)項。（50分）

參考界面如圖30

請輸入注冊信息

圖3

答：1.設計界面

請輸入注冊信息

請輸入注冊信息請輸入注冊信息

*用戶名：

*密碼:

*密碼：I

確認密碼:

速認密科：I

*E-Mail：*E-Mail：

請輸入注冊信息請輸入注冊信息

*用戶名：*用戶名：邛科

嗜碼：*密利：|—一

通認密電3：嘴認密碼:|******

*E-Mail：*E-Mail：abc

2.程序源代碼

<script>

functionisEmptyO{

varfm=document.messagebook;

if(fm.username.value=="null"IIfm.username.value=="")

(

alert(“您忘記填寫用戶名了！)

returnfalse

)

else

if(fm.pswd.value=="null"IIfm.pswd.value=="")

{

alert("您忘記填寫密碼了！)

returnfalse

)

else

if(fm.email.value=="null"IIfm.email.value=="")

(

alert("您忘記填寫EMAIL地址了！”)

returnfalse

)

else

if(fm.email.value.indexOf("@")==-l)

{alert(”沒有\(zhòng)"@\"，郵件地址格式不正確”)

returnfalse

)

else

Welcome()

)

functionWelcome()

(

winl=open()

vara1=H<BR><BRxFONTsize=6color=blue><B><CENTER><I>n

vara2=n:</I>歡迎您訪問本網(wǎng)站！</CENTER><B></FONT>"

varaaa=document.messagebook.usemame.value

win1.document.write(al+aaa+a2)

)

</script>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

王戰(zhàn)科網(wǎng)頁設計大作業(yè)第三題

<styletype=ntext/css">

<!-

.STYLE1{font-size:18px}

.STYLE2{

font-size:24px;

font-weight:bold;

)

->

</style>

</head>

<body>

<formid="formr,name=nmessagebooknmethod="get"action』'"onSubmit="returnisEmpty()H>

<labelx/label>

<labelx/label>

<divalign="centern>

<tablewidth=n442nheight=n260">

<tr>

<tdcolspan=',2',xdivalign="center"class="STYLE2">

<p>請輸入注冊信息</p>

</divx/td>

</tr>

<tr>

<tdwidth="185"xdivalign="right”>*用戶名:</divx/td>

<tdwidth="245"xlabel>

<divalign="left">

<inputname="usemame"type=ntext"id=Husername"maxlength=',12H/>

</div>

</labelx/td>

</tr>

<tr>

<tdxdivalign="right”>*密碼：</div></td>

<tdxlabel>

<divalign="leftn>

<inputname=npswdntype=ntext"id=npswdnsize="18n/>

</div>

</labelx/td>

</tr>

<tr>

<tdxdivalign="righ

溫馨提示

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

評論

0/150

提交評論