网页制作与网站设计实验报告_第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

提交评论