网页设计实验报告

实验一 熟悉环境与网页中站点的相关操作

学号：太原工业学院0920561 姓名：刀锋战士日期：2012/5/13

1、实验目的：

熟悉网页开发环境尤其是Dreamweaver，掌握站点的相关操作和功用，了解HTML的基本语法。

2、实验环境：

Windows XP、Dreamweaver

3、实验内容：

（1）使用记事本开发自己的第一个网页

（2）使用Dreamweaver开发自己的第一个网页，对比两种方法的不同

（3）利用iis发布网站

（4）利用Dreamweaver连接iis服务器管理站点

4、实验过程：

（1）、新建记事本文件

（2）、在记事本中写入如下代码

</head><boday><table><tr><td>我的地盘听我的！</td></tr></table></boday></html>

（3）、将记事本进行保存然后将后缀名改为index.html

（4）、双击该文件在浏览器中打开

（5）、在Dreamweaver中新建一个站点并新建了一个html文件写入以上代码后进行调试并对比两种方法的不同

效果图：

5、实验总结：

掌握站点的相关操作和功用，了解HTML的基本语法。

实验二网页中文本、表格的相关操作

学号：太原工业学院0920561 姓名：刀锋战士日期：2012/5/15

1、实验目的：

掌握网页中文本、表格的相关操作，学会利用表格布局网页

2、实验环境：

Windows XP、Dreamweaver

3、实验内容：

（1）将课本上一段文字放置到网页

（2）设置这段文字的颜色、字体、字号、对齐方式

（3）设置网页的背景颜色、背景图片

（4）在网页中设计一个表格

（5）设置表格的边框、高度、宽度、对齐、合并单元格等

（6）以上操作均使用Dreamweaver和HTML两种方法

（7）利用表格布局一个网页

4、实验过程：

编写代码实现：

代码部分：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

.STYLE1 {

font-size: 36px;

font-family: "楷体";

font-weight: bold;

}

.STYLE2 {

font-size: 72px;

color: #CC9900;

}

.STYLE5 {font-size: 24px}

body {

background-image: url();

background-repeat: repeat;

}

.STYLE7 {color: #CCCCCC}

.STYLE8 {font-size: 72px}

-->

</style>

</head>

<body >

<div align="center" class="STYLE1">有服章之美謂之<span class="STYLE2">華</span><br />

<span class="STYLE7">     

有禮儀之大故稱<span class="STYLE8">夏 </span><br />

<span class="STYLE5">　　汉服的基本特点是交领、<a target="_blank" href="http://baike.baidu.com/view/345632.htm">右衽</a>，用绳带系结，也兼用带钩等，又以盘领、直领等为其有益补充。结构上，汉服分为十个部分：<a target="_blank" href="http://baike.baidu.com/view/260093.htm">领</a>、<a target="_blank" href="http://baike.baidu.com/view/287881.htm">襟</a>、<a target="_blank" href="http://baike.baidu.com/view/354865.htm">裾</a>、<a target="_blank" href="http://baike.baidu.com/view/361379.htm">袂</a>、<a target="_blank" href="http://baike.baidu.com/view/366584.htm">袪</a>、袖、<a target="_blank" href="http://baike.baidu.com/view/287882.htm">衿</a>、<a target="_blank" href="http://baike.baidu.com/view/367243.htm">衽</a>、带、系。</span></span>

<div class="STYLE7"></div>

<span class="STYLE7">　　

一套完整的汉服通常有三层：小衣（<a target="_blank" href="http://baike.baidu.com/view/70902.htm">内衣</a>）、<a target="_blank" href="http://baike.baidu.com/view/717115.htm">中衣</a>、大衣。 </span></div>

<table width="701" border="1" bgcolor="#99CC99">

<tr ><th colspan="3" class="STYLE7">汉服基本结构介绍</th>

</tr>

<tr>

<td width="701" class="STYLE7"> 大衣 </td>

<td width="701" align="center" class="STYLE7"><div align="center"><a target="_blank" href="http://baike.baidu.com/view/71513.htm">深衣</a>、<a target="_blank" href="http://baike.baidu.com/view/522354.htm">襜褕</a>、圆领袍、衣裳、<a target="_blank" href="http://baike.baidu.com/view/7228012.htm">袿衣</a>、袴褶、<a target="_blank" href="http://baike.baidu.com/view/71450.htm">裲裆</a>、<a target="_blank" href="http://baike.baidu.com/view/786633.htm">半臂</a>、<a target="_blank" href="http://baike.baidu.com/view/701819.htm">褙子</a> </div></td>

<td width="701" class="STYLE7"> 外出、礼衣 </td>

</tr>

<tr>

<td class="STYLE7"> 中衣 </td>

<td align="center" class="STYLE7"> <div align="center">襦裤、裙襦、<a target="_blank" href="http://baike.baidu.com/view/1602082.htm">反闭</a>、<a target="_blank" href="http://baike.baidu.com/view/933641.htm">中单</a>、<a target="_blank" href="http://baike.baidu.com/view/4818355.htm">曲领</a> </div></td>

<td class="STYLE7"> 衬托、保暖 </td>

</tr>

<tr>

<td class="STYLE7"> 小衣 </td>

<td align="center" class="STYLE7"> <div align="center">汗衣（<a target="_blank" href="http://baike.baidu.com/view/492779.htm">汗衫</a>）、褌、<a target="_blank" href="http://baike.baidu.com/view/1144178.htm">犊鼻褌</a>、<a target="_blank" href="http://baike.baidu.com/view/47300.htm">肚兜</a> </div></td>

<td class="STYLE7"> 贴身衣服 </td>

</tr>

</table>

</body>

</html>

效果图：

5、实验总结：

在本次实验中加强了对文字和表格的是排版与布局

掌握网页中文本、表格的相关操作，学会利用表格布局网页

实验三网页中超链接、表单的处理

学号：太原工业学院0920561 姓名：刀锋战士日期：20##年5月20日

1、实验目的：

掌握网页中超链接和表单的使用方法，理解相关概念。

2、实验环境：

Windows XP、Dreamweaver

3、实验内容：

设计下列超链接

（1）网页超链接

（2）锚点超链接

（3）热点超链接

（4）文件超链接

（5）邮件超链接

设计一个采集人员基本信息的界面。

（1）利用文本框采集姓名

（2）利用日期控件采集生日

（3）利用二级下拉列表采集籍贯

（4）利用复选框采集爱好

（5）利用单选钮采集性别

（6）显示采集的信息

（7）可以根据自己的想法添加一些其它信息和控件

4、实验过程：

(1)、建立站点并新建网页命名为index.asp

(2)、添加表格进行布局

(3)、添加超链接并实现功能

(4)、进行测试

5、实验总结：

（1）、相关代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

<a href="http://www.pengyou.com">朋友网注册</a><br />

<a name="top" id="top"></a>

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">

<label>姓名：

<input type="text" name="textfield" />

</label>

<br />

<label>生日：

<input type="text" name="textfield2" />

</label>

<br />

<label>籍贯

<select name="select">

<option selected="selected">河北</option>

<option>山西</option>

<option>北京</option>

<option>上海</option>

<option>广东</option>

<option>深圳</option>

</select>

</label>

<br />

爱好

<label>：<br />

<input type="checkbox" name="checkbox" value="checkbox" />

上网</label>

<label>

<input type="checkbox" name="checkbox2" value="checkbox" />

看书</label>

<label>

<input type="checkbox" name="checkbox3" value="checkbox" />

运动</label>

<br />

<label>

性别</label>

：<br />

<label>

<input name="checkbox4" type="checkbox" value="checkbox" checked="checked" />

男</label>

<label>

<input name="checkbox4" type="checkbox" id="checkbox4" value="checkbox" />

女</label>

<br />

显示结果：<br />

<fieldset>

姓名：刀锋战士 <br />

性别：

男<br />

生日：

1990/03/10<br />

籍贯：

河北 <br />

爱好：上网

<br />

<label>身份证照片

<input type="file" name="file" />

</label>

<br />

<a href="mailto:793688566@qq.com">联系我们</a><br />

<img src="image/map.jpg" alt="map" width="800" height="540" border="0" usemap="#Map" />

</map>

</fieldset>

回到顶部<br />

</form>

</body>

</html>

（2）截图

（3）小结

经过本次实验基本掌握了网页中超链接和表单的使用方法，理解相关概念。

实验四网页中框架技术和图层技术的运用及网页的美化

学号：太原工业学院0920561 姓名：刀锋战士日期：2012/6/2

1、实验目的：

掌握网页中框架技术和图层技术的运用，了解网页常用美化工具

2、实验环境：

Windows XP、Dreamweaver、Flash、Photoshop

3、实验内容：

（1）利用框架制作论坛的导航和内容页面

（2）利用层以及js脚本制作可显示、隐藏的菜单效果

（3）利用Flash制作简单动画

（4）利用Photoshop制作网页logo

4、实验过程：

（1）使用框架做出布局

（2)编写代码完成功能

（3）利用photoshop和flash制作logo和动画

5、实验总结：

（1）部分源代码

框架：

</frameset>

(2)

实验五利用CSS技术、模板和库设计网页

学号：太原工业学院0920561 姓名：刀锋战士日期：2012/6/10

1、实验目的：

了解CSS技术、模板和库的相关概念和操作方法，理解站点统一风格的重要性。

2、实验环境：

Windows XP、Dreamweaver

3、实验内容：

（1）利用CSS设置文字效果

（2）利用CSS+DIV布局网页

（3）利用模板统一站点风格

（4）利用库制作网站统一logo

4、实验过程：

（1）、制作logo

(2)、编码实现文字效果以及网页的布局

5、实验总结：

部分源代码：

Css:

{

color:#FF0000;

}

body

{

background-color: #000000;

}

table

{

border: 3px;

}

Div:

</div>

</table>

</div>

</tr>

</table>

</div>

效果图：

实验六利用ASP制作动态网页

学号：太原工业学院0920561 姓名：刀锋战士日期：2012/6/15

1、实验目的：

通过搭建一个完整的小型系统，熟悉ASP系统开发的流程，掌握ADO的操作技巧。

2、实验环境：

Windows XP、Dreamweaver

3、实验内容：

（1）利用ADO技术连接数据库

（2）编写代码完成用户登陆、注册功能

（3）编写代码完成用户密码修改、删除功能

（4）利用Dreamweaver数据库操作向导完成以上功能

4、实验过程：

下面的代码是链接数据库的语句

dim strsql ,objrs,objconn

set objconn=server.createobject("adodb.connection")

objconn.connectionstring ="Provider=Microsoft.jet.OLEDB.4.0;"&"Data source=" & Server.mappath("database/myaccess.mdb")

objconn.open

set objrs=server.CreateObject("adodb.recordset")

strsql="select * from 表1 where name='"&username&"'and mima='"& ypass&"'"

5、实验总结：

这次试验基本实现了动态网页的制作以及链接数据库的过程，通过写代码，总结出来，任何程序是需要实践才能起作用的。

相关推荐

网页设计实验报告

专栏推荐