網頁制作與網站設計實驗報告_第1頁
網頁制作與網站設計實驗報告_第2頁
網頁制作與網站設計實驗報告_第3頁
網頁制作與網站設計實驗報告_第4頁
網頁制作與網站設計實驗報告_第5頁
已閱讀5頁，還剩16頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

PAGEPAGE1實驗報告實驗項目：基本HTML命令實驗學時：2實驗日期：2012年3月1日實驗要求：1、掌握常用的HTML語言標記。2、利用文本編輯器建立HTML文檔，制作簡單網頁。3、學習將其它格式的文檔轉換成HTML格式的文檔。實驗內容：答：1．打開文本編輯器“記事本”中輸入如下的HTML代碼程序,建立一個具有基本結構標記的HTML文件，然后另存為.htm文件，并在瀏覽器中運行。HTML代碼如下：<html><head><title>自由練習</title></head><body><h1align="center">十萬個為什么</h1><h2align="center">科普小知識</h2><hralign="center"size=3width=30color=00ff00></hr><i><h3align="center"face=""size=5color=ff0000>傲游夢想之城</h3></i><fontface=""size=10color=0000ff>一去二三里，煙村四五家；亭臺六七座，八九十之花。</font></body></html>網頁效果如下：2、增加移動字幕和插入圖片。HTML代碼如下：<html><head><title>網頁圖像的插入和超鏈接的運用</title></head><body><marqueebehavier=scrollscrollamount=10align=centerswidth=200height=100bgcolor=#00ff00>戚薇圖像展</marquee><palign=center><imgsrc=F:\圖\新建文件夾\戚.jpg></img></p></body></html>網頁效果如下：實驗項目：超鏈接的創建實驗學時：2實驗日期：2012年3月8日實驗要求：1、掌握HTML中超鏈接的原理和應用方法，對同一個網頁內部的鏈接、不同網頁之間的鏈接、文字鏈接、圖像鏈接的用法進行驗證。2、主控網頁，通過超鏈接可以進入其它網頁；不同網頁之間可以通過文字或圖片鏈接相互跳轉。實驗內容：答：1、超鏈接的概念及類型。超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。超鏈接在本質上屬于一個網頁的一部分，它是一種允許我們同其他網頁或站點之間進行連接的元素。2、超鏈接的創建。HTML代碼如下：<html><head><title>超鏈接的運用</title></head><body><h3align=center>戚薇相關資料</h3><palign=center><br><ahref="/">百度圖片</a><br/><br><ahref="/view/433536.htm">戚薇個人資料</a><br/><imgsrc=F:\圖\新建文件夾\戚4.jpg></img></p></body></html>網頁效果如下：實驗項目：表格的制作實驗學時：2實驗日期：2012年3月15日實驗要求：掌握HTML與表格樣式相關的功能設置：表格單元格背景顏色背景圖像設置、跨行跨列合并等設置。實驗內容：答：HTML代碼如下：<html><head><title>表格的使用</title></head><body><tableborder=1><captionalign=center><b>第二次作業</b></caption><tralign=centerbgcolor=#ff0000><th></th><th>數學</th><th>英語</th><th>管理</th><th>運籌學</th><th>政治</th></tr><tralign=center><throwspan="2">上學期</th><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td></tr><tralign=left><td>90</td><td>90</td><td>90</td><td>90</td><td>90</td></tr><tralign=left><th>90</th><td>90</td><td>90</td><tdrowspan="2"colspan="2"align=centerbgcolor=#0000ff>90</td><td>90</td></tr><tralign=left><th>90</th><td>90</td><td>90</td><td></td></tr></table></body></html>網頁效果如下：實驗項目：表單的制作實驗學時：2實驗日期：2012年3月22日實驗要求：1、掌握HTML表單的作用及網頁中表單域和表單元素的用法。2、能夠應用表格來對表單元素進行布局。實驗內容：答：HTML代碼如下：<html><head><title>表單的應用</title></head><body><formname="formlogin"id="form1"action="login.asp"method="post"><h3>個人信息登記表</h3>姓名：<inputtype="text"name="textname"></input><br/>性別：<inputtype="radio"name="radio1"checked="checked">男</input><inputtype="radio"name="radio1">女</input><br/>登錄密碼：<inputtype="password"name="pwd"value="1234"></input><br/>個人簡介：<br/><textareaname="areaname"cols=36rows=4>請在這兒輸入個人基本情況。</textarea><br/><inputtype="submit"name="subm"value="提交"></input><inputtype="reset"name="res"value="重置"></input></form></body></html>網頁效果如下：實驗項目：框架的制作實驗學時：2實驗日期：2012年3月29日實驗要求：掌握網頁的基本框架。掌握框架、框架集標簽的用法。握使用代碼生成框架網頁。實驗內容：答：HTML代碼如下：<html><head><title>框架的應用</title></head><framesetcols=137,*><framesrc="A.html"><framesetrows=82,*><framesrc="B.html"><framesrc="C.html"></frameset></frameset></html>網頁效果如下：實驗項目：行為的創建實驗學時：2實驗日期：2012年4月12日實驗要求：1、下拉式菜單的設計。2、為對象設置行為。3、使用行用控制層，制作行為的動態效果。實驗內容：答：步驟如下：通過選擇菜單【窗口】里的【行為】命令，或直接按下快捷鍵shift+F4即可打開【行為】面板。打開【插入】菜單中的【布局】，選擇【繪制APDiv】命令，在頁面上繪制三個矩形框，可以自行設置其大小，在這里，我選擇了高50像素、寬150像素。分別在三個矩形框里添加一個1行1列，寬150像素的表格，這樣有利于文字的輸入與設置。然后調整大小，讓其與矩形框完全吻合，可以在屬性欄里設置其背景色等細節部分。在【院系設置】欄下面，繪制一個APDiv元素，將其大小設置為高150（因為我打算在這里輸入三行文字），寬150像素。接下來，仿照步驟3，添加一個3行1列的表格，具體設置也如上。選中【院系設置】，為其添加行為（動作+事件），當鼠標從上面滑過時，顯示下面的矩形框，當鼠標離開時，下面的矩形框隱藏。具體如下：6、選中【管理學院】所在矩形框，為其添加如步驟5所示的行為。實現黨鼠標滑過時，顯示該矩形框，當鼠標移出時隱藏該矩形框的效果。具體如下：保存該頁面。并查看、測試效果。如下：實驗項目：層的應用實驗學時：2實驗日期：2012年4月19日實驗要求：能夠根據要求設置層的大小。熟練運用層的位置、層的嵌套以及疊加。實驗內容：1.在網頁head頭部定義一個apDiv1的ID樣式，在網頁主體body元素內插入一個Div元素，該元素應用了ID樣式apDiv1。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css"><!--#apDiv1{ position:absolute; width:200px; height:115px; z-index:1; left:130px; top:40px; background-color:#FF0000;}--></style></head><body><divid="apDiv1"></div></body></html>2.表格和層的相互嵌套<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無標題文檔</title><styletype="text/css"><!--#apDiv1{ position:absolute; width:99px; height:120px; z-index:1; left:11px; background-color:#EEE; overflow:auto; top:49px;}#apDiv2{ position:absolute; width:99px; height:120px; z-index:2; left:111px; top:49px; overflow:auto; background-color:#EEE;}#apDiv3{ position:absolute; width:99px; height:120px; z-index:3; left:211px; top:48px; overflow:auto; background-color:#EEE;}--></style></head><body><tablewidth="300"border="1"cellpadding="5"cellspacing="0"><tr><td>菜單1</td><td>菜單2</td><td>菜單3</td></tr><tr><td><divid="apDiv1"><p>菜單1-1</p><p>菜單1-2</p><p>菜單1-3</p></div></td><td><divid="apDiv2"><p>菜單2-1</p><p>菜單2-2</p><p>菜單2-3</p></div></td><td><divid="apDiv3"><p>菜單3-1</p><p>菜單3-2</p><p>菜單3-3</p></div></td></tr></table></body></html>實驗項目：CSS實驗學時：2實驗日期：2012年4月26日實驗要求：了解CSS的標簽樣式，類樣式，ID樣式和偽類樣式。會使用CSS的嵌入式樣式表。掌握CSS的部分屬性分類與使用。實驗內容：答：HTML代碼如下：<html><head><styletype="text/css"><!--p{font-family:"黑體";font-size:20px;color:rgb(255,0,0);text-align:center;}.fontclass1{font-family:"幼圓";font-size:16px;color:rgb(0,0,255);text-align:center;}#fontid1{font-family:"宋體";font-size:13px;color:rgb(0,255,0);text-align:center;}--></style></head><body><p>莫生氣</p><divclass="fontclass1">人生就像一場戲，因為有緣才相聚。<spanid="fontid1">相扶到老不容易，是否應該去珍惜？</span></div></body></html>網頁效果如下：實驗項目：JavaScript語句實驗學時：2實驗日期：2012年5月10日實驗要求：掌握并練習JavaScript的基本語句。加深對網頁制作所涉及的相關技術的理解。初步了解JavaScricpt腳本源程序。練習文件對象的使用。實驗內容：答：HTML代碼如下：<html><head><title>改變背景顏色</title></head><Scriptlanguage="JavaScript"type="text/JavaScript">functionchgBg(color){document.bgColor=color;}</Script><body><tableheight="45"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="150">請選擇背景顏色：</td><tdwidth="50"bgcolor="#FF0000"onClick="chgBg(this.bgColor)"> </td><tdwidth="50"bgcolor="#00FF00"onClick="chgBg(this.bgColor)"> </td><tdwidth="50"bgcolor="#0000FF"onClick="chgBg(this.bgColor)"> </td><tdwidth="50"bgcolor="#CCCCCC"onClick="chgBg(this.bgColor)"> </td></tr></table></body></html>網頁效果如下：實驗項目：ASP實驗學時：2實驗日期：2012年5月17日實驗要求：ASP運行環境的建立。掌握VBScript語言基礎。掌握ASP內置對象的應用。實驗內容：答：HTML代碼如下：<html><head><title>Cookies總合示例</title></head><body><%ifRequest.Cookies("UserName")<>""thenResponse.write"歡迎您:"&request.Cookies("UserName")else%><tablewidth="98%"height="30"border="0"cellpadding="0"cellspacing="1"bgcolor="#666666"><trbgcolor="#CCCCCC"><td><formname="form1"method="post"action="">請輸入:  用戶名:<inputname="UserName"type="text"id="UserName"size="12">電子郵件:<inputname="Email"type="text"id="Email"size="12">保存時間:<selectname="Save"id="save"><optionvalue="1">保存1天</o

溫馨提示

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

評論

0/150

提交評論