網(wǎng)頁制作教程_第1頁
網(wǎng)頁制作教程_第2頁
網(wǎng)頁制作教程_第3頁
網(wǎng)頁制作教程_第4頁
網(wǎng)頁制作教程_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、通識課之課程設(shè)計 課程名稱 網(wǎng)頁制作教程 （10019601） 設(shè)計名稱 你的要求我來設(shè)計 學(xué)院(系) 機械與能源工程學(xué)院 專 業(yè) 能源與動力 學(xué)生姓名 代海斌 學(xué)號 1351986 2016-2017 學(xué)年 第 1 學(xué)期目 錄1靜態(tài)網(wǎng)頁的頁面控制11.1頁面效果截屏11.2源代碼12 CSS布局22.1頁面效果截屏22.2源代碼23 多媒體設(shè)計與制作43.1制作過程截屏（制作中間結(jié)果放在2×2表格中,無代碼）54 JS控制54.1頁面效果截屏.54.2源代碼.55 交互式網(wǎng)頁中數(shù)據(jù)在頁面間傳遞75.1頁面效果截屏（2個頁面截屏放于1×2表格）75.2源代碼.76交互式網(wǎng)頁

2、中數(shù)據(jù)在數(shù)據(jù)庫中的存取.96.1頁面效果截屏（2個頁面截屏放于1×2表格）.96.2源代碼.97虛擬網(wǎng)站首頁設(shè)計制作117.1頁面效果截屏(無代碼)117.2網(wǎng)站的盈利模式與創(chuàng)新說明121頁面控制1.1頁面效果截屏1.2 源代碼<html><head><title>兩年來第一次計算機上的作業(yè)</title><head><body background="135.jpg"><front size=50>這是第一個作業(yè)，我得好好做表明我端正的學(xué)習(xí)態(tài)度</front><

3、img src="9.png"align=""border="" width="50" height="35" hspace="20" vspace="20"><p><front size=30>先弄個表格,開始第一步</front><p><TABLE border=1 align="center" width="80%" height="150&

4、quot;><TR ALIGN="CENTER"><Td><front size=20>我原本是山中一顆包治百病的板藍根</front></Td><Td><img src="1.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td>&l

5、t;/TR><TR ALIGN="CENTER"><Td><front size=20>我太累了，太辛苦了</front></Td><Td><img src="2.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td></TR&g

6、t;</TABLE><marquee scrolldelay="100"><img src="8.jpg" width=150></marquee><marquee>這是一只 心痛的 皮卡丘</marquee><p><A HREF="FONT face.html" target="_top"></A><form action="" method="post">

7、;<p>備注：<textarea name="yj" cols="200" rows="5">請輸入備注</textarea><br><input type="submit" value="不發(fā)布" name="submit"><input type="reset" value="不重置"></form></body></html>

8、;2 CSS布局2.1頁面效果截屏2.2 源代碼<html><head><style type="text/css">div.containerwidth:100%;margin:0px;border:1px solid red;line-height:100%;div.header,fiv.footerpadding:1em;color:brown;background-color:pink;clear:left;h1.headerpadding:0;margin:0;div.leftfloat:left;width:800px;mar

9、gin:10;padding:1em;div.contentmargin-left:1px solid gray;padding:1em;</style></head><style type="text/css">bodybackground-image:url(22.jpg);background-repeat:repeat-zptext-indent:2em;color:blue;font-size:12px;</style></head><body><div class="cont

10、ainer"><div class="header"><h1 class="header">聽說，微軟的windows系統(tǒng)已經(jīng)發(fā)到第十版本了，可是，我還在用win7，嗚啊阿。</h1><div><div class="left"><p>為了讓我與時代近一點，就用windows的圖片做背景吧，ps一只愛犬</p></div><div class="content"><h2>此處省略一

11、萬字，未完待續(xù)啊啊啊</h2><p>但是，我跟你說啊，雖然我看起來土一點</p><p><a href="#"class="radio">其實，我是一個有背景的人，所以我不愛隨波逐流，不信你點進來看看我的身世，反正點也沒用</p></div><div class="footer">其實這才是我的個人主頁，上面那個是逗傻子你的，聰明的你：就點擊這里</div></div></body></html>

12、;3 多媒體設(shè)計與制作 4 JS控制4.1頁面效果截屏4.2源代碼<head><title>皮卡丘</title><script language="jscript" type="text/javascript">/漂浮廣告的初始位置var x=50,y=60;/xin為真,則向右運動,否則向左運動./yin為真,則向右運動,否則向左運協(xié).var xin=true,yin=true;/移動的距離var step=1;/移動的步長var delay=5;function floatAD()/L左邊界,T右邊界

13、var L=T=0;/層移動的右邊界var R=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;/層移動的下邊界var B=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;/層移動后的左邊界window.document.getElementById("fly").style.left=x;/層移動

14、后的上邊界window.document.getElementById("fly").style.top=y;/判斷水平方向x=x+step*(xin?1:-1);/到達邊界后的處理if(x<L)xin=true;x=L;if(x>R)xin=false;x=R/判斷生直方向y=y+step*(yin?1:-1);/到達邊界后的處理if(y<T)yin=true;y=T;if(y>B)yin=false;y=B;/隔多少時間調(diào)用一次setTimeout("floatAD()",delay);</script></

15、head><body onload="floatAD()"><div id="fly" style="position:absolute; left:260px; top:180px; width:295px; height:176px; z-index:1;"><img src="8.jpg" width="295" height="176"/></div></body></html></h

16、ead><body onload="floatAD()"><body background="皮卡丘.jpg"><body><BGSOUND src="1001.mid" autostart=true loop=infinite>背景音樂</BODY><div id="fly" style="position:absolute; left:16px; top:80px; width:150px; height:100px; z-ind

17、ex:1;"><marquee scrolldelay="100"><img src="8.jpg" width=150></marquee><marquee>這是一只 心痛的 皮卡丘</marquee><p><A HREF="FONT face.html" target="_top"></A><form action="" method="post">

18、</div><p style="font:italic small-caps bold 36pt,GlitzyCurl">Leaf</p>皮卡丘是一只矮矮胖胖圓乎乎的類嚙齒型神奇寶貝，全身的皮毛都是黃色的。它的耳朵很長，尖端是黑色的。它有小小的嘴巴，側(cè)面看起來像一個數(shù)字3，還有黑色的眼睛。它的臉頰上有兩個紅色的圓。它的尾巴是像鋸齒狀的閃電，與身體相接的部分也有一片棕色的皮毛。盡管它確切來說是四足動物，更多時候它是站著并用兩只后腳走路7 。住在森林中的它們通常以樹果為食。它們用小小的電擊把樹果從樹上打下來，這樣就不必爬樹，還可以順帶將其烤熟

19、</body></html><head>5交互式網(wǎng)頁中數(shù)據(jù)在頁面間的傳遞5.1頁面效果截屏5.1源代碼<?phpif ($_GET'action'="register") echo "<script>window.location.href='index.php?flag=1'</script>"?><!DOCTYPE html><html lang="en"><head><meta cha

20、rset="UTF-8"><title>考勤系統(tǒng)</title><style type="text/css">.containermargin: 0;padding: 0;width: 100%;height: 100%;.contentwidth: 1000px;height: 400px;margin: 80px auto;line-height: 50px;.imagecontentheight: 400px;width: 600px;float: left;.filedheight: 400px;widt

21、h: 400px;float: left;padding-top: 20px;.filed tableborder: 0 solid;display: block;width: 300px;margin: 100px auto;.filed inputborder-radius: 5px;font-family: '黑體'</style></head><body><div class="container"><div class="content" style="clear:

22、both;"><div class="imagecontent"><img src="bgimg.jpg" width="600" height="400" alt=""></div><div class="filed"><form action="?action=register" method="post"><table><tr>&l

23、t;td><strong>用戶名</strong></td><td><input type="text" name="username"></td></tr><tr><td><strong>密碼</strong></td><td><input type="password" name="password"></td></tr&

24、gt;<tr><td colspan="2"><input type="submit" value="注冊"></td></tr></table></form></div></div></div></body></html><?php$flag=$_GET'flag'echo "恭喜頁面?zhèn)鬏斶^來數(shù)據(jù)是：".$flag;?>6交互式網(wǎng)頁中數(shù)據(jù)在數(shù)據(jù)

25、庫中的存取6.1頁面效果截屏登錄界面：登錄成功：6.2源代碼<?phpinclude 'connect.php'if (isset($_GET'me') $username=$_POST'username'$password=$_POST'password'$query = mysql_query("select * from user where username='$username' and password='$password'");$row=mysql_fetc

26、h_array($query,MYSQL_ASSOC);if($row'username'="admin")$username=$row'username'echo "<script>window.location.href='index.php?username=$username'</script>"?><!DOCTYPE html><!-if !IE><!-> <html lang="en" class=&qu

27、ot;no-js"> <!-<!endif-><head><meta charset="utf-8" /><title>登錄</title><link href="bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="login.css" rel="stylesheet" type="text

28、/css"/></head><body class="login"><div class="logo"></div><div class="content"><form class="login-form" action="?me=dologin" method="post"><h3 class="form-title">登錄</h3><d

29、iv class="form-group"><label class="control-label visible-ie8 visible-ie9">Username</label><div class="input-icon"><i class="icon-user"></i><input class="form-control placeholder-no-fix" type="text" name="username"/></div></div><div class="form-group"><label class="control-label visi

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論