網(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)

文檔簡介

通識課之課程設(shè)計課程名稱網(wǎng)頁制作教程（10019601）設(shè)計名稱你的要求我來設(shè)計學院(系)機械與能源工程學院專業(yè)能源與動力學生姓名代海斌學2017學年第1學期

目錄TOC\o"1-3"\h\u1靜態(tài)網(wǎng)頁的頁面控制 頁面控制1.1頁面效果截屏1.2源代碼<html><head><title>兩年來第一次計算機上的作業(yè)</title><head><bodybackground="135.jpg"><frontsize=50>這是第一個作業(yè)，我得好好做表明我端正的學習態(tài)度</front><imgsrc="9.png"align=""border=""width="50"height="35"hspace="20"vspace="20"><p><frontsize=30>先弄個表格,開始第一步</front><p><TABLEborder=1align="center"width="80%"height="150"><TRALIGN="CENTER"><Td><frontsize=20>我原本是山中一顆包治百病的板藍根</front></Td><Td><imgsrc="1.jpg"align=""border="1"width="120"height="75"hspace="20"vspace="20"></Td></TR><TRALIGN="CENTER"><Td><frontsize=20>我太累了，太辛苦了</front></Td><Td><imgsrc="2.jpg"align=""border="1"width="120"height="75"hspace="20"vspace="20"></Td></TR></TABLE><marqueescrolldelay="100"><imgsrc="8.jpg"width=150></marquee><marquee>這是一只心痛的皮卡丘</marquee><p><AHREF="FONTface.html"target="_top"></A><formaction=""method="post"><p>備注：<textareaname="yj"cols="200"rows="5">請輸入備注</textarea><br><inputtype="submit"value="不發(fā)布"name="submit"><inputtype="reset"value="不重置"></form></body></html>2CSS布局2.1頁面效果截屏2.2源代碼<html><head><styletype="text/css">div.container{width:100%;margin:0px;border:1pxsolidred;line-height:100%;}div.header,fiv.footer{padding:1em;color:brown;background-color:pink;clear:left;}h1.header{padding:0;margin:0;}div.left{float:left;width:800px;margin:10;padding:1em;}div.content{margin-left:1pxsolidgray;padding:1em;}</style></head><styletype="text/css">body{background-image:url(22.jpg);background-repeat:repeat-z}p{text-indent:2em;color:blue;font-size:12px;}</style></head><body><divclass="container"><divclass="header"><h1class="header">聽說，微軟的windows系統(tǒng)已經(jīng)發(fā)到第十版本了，可是，我還在用win7，嗚啊阿。。。</h1><div><divclass="left"><p>為了讓我與時代近一點，就用windows的圖片做背景吧，ps一只愛犬</p></div><divclass="content"><h2>此處省略一萬字，未完待續(xù)啊啊啊</h2><p>但是，我跟你說啊，雖然我看起來土一點</p><p><ahref="#"class="radio">其實，我是一個有背景的人，所以我不愛隨波逐流，不信你點進來看看我的身世，反正點也沒用</p></div><divclass="footer">其實這才是我的個人主頁，上面那個是逗傻子你的，聰明的你：就點擊這里</div></div></body></html>3多媒體設(shè)計與制作

4JS控制4.1頁面效果截屏4.2源代碼<head><title>皮卡丘</title><scriptlanguage="jscript"type="text/javascript">//漂浮廣告的初始位置varx=50,y=60;//xin為真,則向右運動,否則向左運動.//yin為真,則向右運動,否則向左運協(xié).varxin=true,yin=true;//移動的距離varstep=1;//移動的步長vardelay=5;functionfloatAD(){//L左邊界,T右邊界varL=T=0;//層移動的右邊界varR=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;//層移動的下邊界varB=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;//層移動后的左邊界window.document.getElementById("fly").style.left=x;//層移動后的上邊界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></head><bodyonload="floatAD()"><divid="fly"style="position:absolute;left:260px;top:180px;width:295px;height:176px;z-index:1;"><imgsrc="8.jpg"width="295"height="176"/></div></body></html></head><bodyonload="floatAD()"><bodybackground="皮卡丘.jpg"><body><BGSOUNDsrc="1001.mid"autostart=trueloop=infinite>背景音樂</BODY><divid="fly"style="position:absolute;left:16px;top:80px;width:150px;height:100px;z-index:1;"><marqueescrolldelay="100"><imgsrc="8.jpg"width=150></marquee><marquee>這是一只心痛的皮卡丘</marquee><p><AHREF="FONTface.html"target="_top"></A><formaction=""method="post"></div><pstyle="font:italicsmall-capsbold36pt,GlitzyCurl">Leaf</p>皮卡丘是一只矮矮胖胖圓乎乎的類嚙齒型神奇寶貝，全身的皮毛都是黃色的。它的耳朵很長，尖端是黑色的。它有小小的嘴巴，側(cè)面看起來像一個數(shù)字3，還有黑色的眼睛。它的臉頰上有兩個紅色的圓。它的尾巴是像鋸齒狀的閃電，與身體相接的部分也有一片棕色的皮毛。盡管它確切來說是四足動物，更多時候它是站著并用兩只后腳走路[7]。住在森林中的它們通常以樹果為食。它們用小小的電擊把樹果從樹上打下來，這樣就不必爬樹，還可以順帶將其烤熟</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>";}?><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>考勤系統(tǒng)</title><styletype="text/css">.container{margin:0;padding:0;width:100%;height:100%;}.content{width:1000px;height:400px;margin:80pxauto;line-height:50px;}.imagecontent{height:400px;width:600px;float:left;}.filed{height:400px;width:400px;float:left;padding-top:20px;}.filedtable{border:0solid;display:block;width:300px;margin:100pxauto;}.filedinput{border-radius:5px;font-family:'黑體';}</style></head><body><divclass="container"><divclass="content"style="clear:both;"><divclass="imagecontent"><imgsrc="bgimg.jpg"width="600"height="400"alt=""></div><divclass="filed"><formaction="?action=register"method="post"><table><tr><td><strong>用戶名</strong></td><td><inputtype="text"name="username"></td></tr><tr><td><strong>密碼</strong></td><td><inputtype="password"name="password"></td></tr><tr><tdcolspan="2"><inputtype="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ù)庫中的存取6.1頁面效果截屏登錄界面：登錄成功：6.2源代碼<?phpinclude'connect.php';if(isset($_GET['me'])){$username=$_POST['username'];$password=$_POST['password'];$query=mysql_query("select*fromuserwhereusername='$username'andpassword='$password'");$row=mysql_fetch_array($query,MYSQL_ASSOC);if($row['username']=="admin"){$username=$row['username'];echo"<script>window.location.href='index.php?username=$username'</script>";}}?><!DOCTYPEhtml><!--[if!IE]><!--><htmllang="en"class="no-js"><!--<![endif]--><head><metacharset="utf-8"/><title>登錄</title><linkhref="bootstrap.min.css"rel="stylesheet"type="text/css"/><linkhref="login.css"rel="stylesheet"type="text/css"/></head><bodyclass="login"><divclass="logo"></div><divclass="content"><formclass="login-form"action="?me=dologin"method="post"><h3class="form-title">登錄</h3><divclass="form-group"><labelclass="control-labelvisible-ie8visible-ie9">Username</label><divclass="input-icon"><iclass="icon-user"></i><inputclass="form-controlplaceholder-no-fix"type="text"name="username"/></div></div><divclass="form-group"><labelclass="control-labelvisible-ie8visible-ie9">Password</label><divclass="input-icon"

溫馨提示

  • 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

提交評論