網(wǎng)頁制作與網(wǎng)站設(shè)計實驗報告_第1頁
網(wǎng)頁制作與網(wǎng)站設(shè)計實驗報告_第2頁
網(wǎng)頁制作與網(wǎng)站設(shè)計實驗報告_第3頁
網(wǎng)頁制作與網(wǎng)站設(shè)計實驗報告_第4頁
網(wǎng)頁制作與網(wǎng)站設(shè)計實驗報告_第5頁
已閱讀5頁，還剩16頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGEPAGE1實驗報告實驗項目：基本HTML命令實驗學時：2實驗日期：2012年3月1日實驗要求：1、掌握常用的HTML語言標記。2、利用文本編輯器建立HTML文檔，制作簡單網(wǎng)頁。3、學習將其它格式的文檔轉(zhuǎn)換成HTML格式的文檔。實驗內(nèi)容：答：1．打開文本編輯器“記事本”中輸入如下的HTML代碼程序,建立一個具有基本結(jié)構(gòu)標記的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>網(wǎng)頁效果如下：2、增加移動字幕和插入圖片。HTML代碼如下：<html><head><title>網(wǎng)頁圖像的插入和超鏈接的運用</title></head><body><marqueebehavier=scrollscrollamount=10align=centerswidth=200height=100bgcolor=#00ff00>戚薇圖像展</marquee><palign=center><imgsrc=F:\圖\新建文件夾\戚.jpg></img></p></body></html>網(wǎng)頁效果如下：實驗項目：超鏈接的創(chuàng)建實驗學時：2實驗日期：2012年3月8日實驗要求：1、掌握HTML中超鏈接的原理和應用方法，對同一個網(wǎng)頁內(nèi)部的鏈接、不同網(wǎng)頁之間的鏈接、文字鏈接、圖像鏈接的用法進行驗證。2、主控網(wǎng)頁，通過超鏈接可以進入其它網(wǎng)頁；不同網(wǎng)頁之間可以通過文字或圖片鏈接相互跳轉(zhuǎn)。實驗內(nèi)容：答：1、超鏈接的概念及類型。超鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系,這個目標可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許我們同其他網(wǎng)頁或站點之間進行連接的元素。2、超鏈接的創(chuàng)建。HTML代碼如下：<html><head><title>超鏈接的運用</title></head><body><h3align=center>戚薇相關(guān)資料</h3><palign=center><br><ahref="/">百度圖片</a><br/><br><ahref="/view/433536.htm">戚薇個人資料</a><br/><imgsrc=F:\圖\新建文件夾\戚4.jpg></img></p></body></html>網(wǎng)頁效果如下：實驗項目：表格的制作實驗學時：2實驗日期：2012年3月15日實驗要求：掌握HTML與表格樣式相關(guān)的功能設(shè)置：表格單元格背景顏色背景圖像設(shè)置、跨行跨列合并等設(shè)置。實驗內(nèi)容：答：HTML代碼如下：<html><head><title>表格的使用</title></head><body><tableborder=1><captionalign=center><b>第二次作業(yè)</b></caption><tralign=centerbgcolor=#ff0000><th></th><th>數(shù)學</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>網(wǎng)頁效果如下：實驗項目：表單的制作實驗學時：2實驗日期：2012年3月22日實驗要求：1、掌握HTML表單的作用及網(wǎng)頁中表單域和表單元素的用法。2、能夠應用表格來對表單元素進行布局。實驗內(nèi)容：答：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>網(wǎng)頁效果如下：實驗項目：框架的制作實驗學時：2實驗日期：2012年3月29日實驗要求：掌握網(wǎng)頁的基本框架。掌握框架、框架集標簽的用法。握使用代碼生成框架網(wǎng)頁。實驗內(nèi)容：答：HTML代碼如下：<html><head><title>框架的應用</title></head><framesetcols=137,*><framesrc="A.html"><framesetrows=82,*><framesrc="B.html"><framesrc="C.html"></frameset></frameset></html>網(wǎng)頁效果如下：實驗項目：行為的創(chuàng)建實驗學時：2實驗日期：2012年4月12日實驗要求：1、下拉式菜單的設(shè)計。2、為對象設(shè)置行為。3、使用行用控制層，制作行為的動態(tài)效果。實驗內(nèi)容：答：步驟如下：通過選擇菜單【窗口】里的【行為】命令，或直接按下快捷鍵shift+F4即可打開【行為】面板。打開【插入】菜單中的【布局】，選擇【繪制APDiv】命令，在頁面上繪制三個矩形框，可以自行設(shè)置其大小，在這里，我選擇了高50像素、寬150像素。分別在三個矩形框里添加一個1行1列，寬150像素的表格，這樣有利于文字的輸入與設(shè)置。然后調(diào)整大小，讓其與矩形框完全吻合，可以在屬性欄里設(shè)置其背景色等細節(jié)部分。在【院系設(shè)置】欄下面，繪制一個APDiv元素，將其大小設(shè)置為高150（因為我打算在這里輸入三行文字），寬150像素。接下來，仿照步驟3，添加一個3行1列的表格，具體設(shè)置也如上。選中【院系設(shè)置】，為其添加行為（動作+事件），當鼠標從上面滑過時，顯示下面的矩形框，當鼠標離開時，下面的矩形框隱藏。具體如下：6、選中【管理學院】所在矩形框，為其添加如步驟5所示的行為。實現(xiàn)黨鼠標滑過時，顯示該矩形框，當鼠標移出時隱藏該矩形框的效果。具體如下：保存該頁面。并查看、測試效果。如下：實驗項目：層的應用實驗學時：2實驗日期：2012年4月19日實驗要求：能夠根據(jù)要求設(shè)置層的大小。熟練運用層的位置、層的嵌套以及疊加。實驗內(nèi)容：1.在網(wǎng)頁head頭部定義一個apDiv1的ID樣式，在網(wǎng)頁主體body元素內(nèi)插入一個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的部分屬性分類與使用。實驗內(nèi)容：答：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>網(wǎng)頁效果如下：實驗項目：JavaScript語句實驗學時：2實驗日期：2012年5月10日實驗要求：掌握并練習JavaScript的基本語句。加深對網(wǎng)頁制作所涉及的相關(guān)技術(shù)的理解。初步了解JavaScricpt腳本源程序。練習文件對象的使用。實驗內(nèi)容：答：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>網(wǎng)頁效果如下：實驗項目：ASP實驗學時：2實驗日期：2012年5月17日實驗要求：ASP運行環(huán)境的建立。掌握VBScript語言基礎(chǔ)。掌握ASP內(nèi)置對象的應用。實驗內(nèi)容：答：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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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

提交評論