网页设计

时间：2024.5.2

《计算机网络技术与应用》上机实验报告

实验3 网页设计－建立个人网站

网页设计

一、实验目的

1．熟悉JavaScript语言编写动态页面的方法；

2. 掌握在HTML页面中嵌入JavaScript设计动态网页的方法；

4. 掌握用工具软件(Frontpage或Dreamweaver)设计网页的方法；

5. 培养实践与自学能力、分析与动手能力、设计与创造能力。

二、实验要求

1．在熟悉HTML和JavaScript的基础上，用工具软件(Frontpage或Dreamweaver)设计网页；

2. 以设计个人网站为主题，但并不局限于此，可以自由发挥、自定主题，但需健康向上；

3. 网页至少包含三层链接、5个以上的页面；

三、实验内容

1．网站主题－名称

答：我的魔法世界

2．网站的主要内容

《计算机网络技术与应用》上机实验报告

答：关于我的好多东西。。。嘿嘿

3．网站中各网页的结构层次关系

网页设计

3．网页界面截图主页

《计算机网络技术与应用》上机实验报告

网页设计

自我介绍

网页设计

《计算机网络技术与应用》上机实验报告

网页设计

《计算机网络技术与应用》上机实验报告

网页设计

《计算机网络技术与应用》上机实验报告

网页设计

我的作品

网页设计

《计算机网络技术与应用》上机实验报告

网页设计

我的爱好

网页设计

《计算机网络技术与应用》上机实验报告

我的好友

网页设计

4．主要程序代码

主页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml">

<head>

<!--

#Layer1 {

position:absolute; width:765px;

《计算机网络技术与应用》上机实验报告 height:105px;

z-index:1;

left: 108px;

top: 20px;

}

.STYLE1 {

font-size: 36px;

color: #FF0000;

}

.STYLE2 {

font-size: 36px;

font-weight: bold;

color: #FF0000;

}

.STYLE3 {

font-size: 24px;

color: #FFFF33;

}

.STYLE4 {

font-size: 24px;

color: #66FF66;

}

《计算机网络技术与应用》上机实验报告

.STYLE5 {

}

-->

</style>

</head>

<body>

<tr>

</div></td>

<h1 class="STYLE2">我的地盘我做主 </h1>

</div></td>

</tr>

</table>

<tr>

《计算机网络技术与应用》上机实验报告

<td width="1089" height="250" bgcolor="#CC0066"><div

behavior="scroll" align="center" class="STYLE3"><marquee

direction="right">欢迎光临

</marquee></div>

<p align="center" class="STYLE4">我的魔法世界</p></td> </tr>

</table>

<tr>

</div></td>

<tr>

<th width="452" height="843"

11 bgcolor="#999900"

《计算机网络技术与应用》上机实验报告

scope="col"><p><img src="../../zhaopian/http_imgloaddsvsDZ.jpg" width="311" height="585" /></p>

<p class="STYLE5">这是魔术的世界</p>

<p class="STYLE5">魔术是一门艺术</p>

<p class="STYLE5">他不是骗术</p>

</tr>

</table>

</div></td>

</tr>

</table>

</body>

</html>

自我介绍

《计算机网络技术与应用》上机实验报告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {color: #FFFF33}

.STYLE2 {color: #000000; font-size: 24px; }

.STYLE3 {color: #FFFF33; font-size: 24px; }

-->

</style>

</head>

<body>

<tr>

<td width="878"

13 bgcolor="#FF6600"><p

《计算机网络技术与应用》上机实验报告

class="STYLE1">

/></p>

<p class="STYLE1">学校：华中科技大学</p>

<p class="STYLE1">院系：船舶与海洋工程学院</p> <p class="STYLE3"><a href="家人情况.html">家人情况</a></p>

<p class="STYLE3"><a href="业绩.html">想看业绩请单击</a></p>

</tr>

</table>

</body>

</html>

14 姓名：刘启帮 <img src="../../zhaopian/httpdsfs.jpg" width="144" height="226"

《计算机网络技术与应用》上机实验报告

家人情况

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {font-size: 36mm}

.STYLE2 {font-size: 36mm; color: #FF3399; }

-->

</style>

</head>

<body>

<tr>

<th bgcolor="#FFFF66"

15 scope="col"><p

《计算机网络技术与应用》上机实验报告

class="STYLE2">父亲</p>

</tr>

</table>

</body>

</html>

业绩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

《计算机网络技术与应用》上机实验报告

<head>

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

<!--

.STYLE5 {

font-size: 36mm;

color: #99FF00;

}

.STYLE6 {font-size: 24mm; color: #FF0000; }

-->

</style>

</head>

<body>

<tr>

《计算机网络技术与应用》上机实验报告

</tr>

</table>

</body>

</html>

我的作品

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {

《计算机网络技术与应用》上机实验报告

color: #FF0000;

font-size: 36px;

}

-->

</style>

</head>

<body>

<tr>

<th

/></p>

<p class="STYLE1">我的作品：航空母舰嘿嘿。。。。。</p>

</tr>

</table>

</body>

</html>

19 width="757" scope="col"><p><img src="../../zhaopian/fsdfsd.jpg" width="670" height="503"

《计算机网络技术与应用》上机实验报告

好友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {

font-size: 36px;

color: #FFFF33;

}

-->

</style>

《计算机网络技术与应用》上机实验报告

</head>

<body>

<tr>

<p class="STYLE1">你就会是我的好友</p>

</tr>

</table>

</body>

</html>

照片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

《计算机网络技术与应用》上机实验报告

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {font-size: 36px}

-->

</style>

</head>

<body>

<tr>

<th width="429" height="384" scope="col"><img src="../../zhaopian/cvzimgload.jpg"

height="380" /></th>

<th width="375" scope="col"><img src="../../zhaopian/fsdfsd.jpg" width="301" height="421"

22 width="283"

《计算机网络技术与应用》上机实验报告

/></th>

</tr>

<tr>

<td><img

</tr>

<tr>

<td

height="527" /></td>

</tr>

</table>

</body>

</html>

23 src="../../zhaopian/http_imgload.jpg" width="312" height="502" /></td> height="540"><img width="431" src="../../zhaopian/http_imgloaddsvsDZ.jpg"

《计算机网络技术与应用》上机实验报告

爱好

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<!--

.STYLE1 {

font-size: 24px;

color: #99FF33;

}

.STYLE2 {

font-size: 36px;

《计算机网络技术与应用》上机实验报告

color: #FFFF33;

}

-->

</style>

</head>

<body>

<tr>

<p class="STYLE1"> 足球（万般皆下品，唯有足球高）</p>

</tr>

</table>

</body>

</html>

《计算机网络技术与应用》上机实验报告

四、分析与讨论

1．网页设计采用了哪些主要技术（如文本、表格、图形、图像、音频与视频、表单、框架等）？

答：文本、表格、图形、图像、表单、框架

2．是否采用了JavaScript技术？如是，使用了哪些JavaScript功能？答：

是。。。字体的浮动框架的浮动。。图片的插入

3．是否使用了层叠样式表（CSS）技术？（不作要求）

答：否

4．如果你的计算机拥有一个固定的IP地址，你希望将它配置成Web服务器来发布你的网页以便让他人访问，你需要安装什么软件，并如何设置？设置好后，访问网址是什么？

答：FTP软件上传！比如CuteFtp

我自己的ip。。

五、心得与体会

浮动的文本有点难搞，研究了好久

更多相关推荐：

网页设计思想心得: 网页设计课程思想心得在本学期的信息管理与信息系统模块课程中，我们学习了网页制作和网站建设，我们可以自己运用网络资源，结合相关资料及老师的指导，通过自身的实践创作出积聚个人风格、个性的个人网页。总体来说，整个学期…
网页设计技巧总结: 网页设计技巧总结网站制作师应该注意的网页设计技巧中，我们提到诸多技巧，下面进行一些补充一.越大的图像吸引越多的注意力如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要…
网页设计经验和技巧总结: 网页设计经验和技巧总结■网站主题规划注意不要让你的网站主题过于分散。因为网站主题越集中，一般情况下网站所有者在这方面投入的精力会更多，因此所提供信息的质量也会越高。我们知道，搜索引擎一直致力于向用户提供高质量的…
网页设计十条经验总结: 这十条网页设计经验是从我们的调查中总结出来的。1、不要滥用FlashAdobe公司的这项动画技术让互联网变得更为强大，从Nike公司非常夸张的首页动画到众多广告商使用的网页Banner。但是这项技术非常容易被滥…
dreamweaver 网页设计总结: 任务驱动教学的实践与探索----------谈《Dreamweaver网页设计》的实践教学刘敏:《任务驱动教学反思与重建》提出“任务驱动”教学法，是一改以往由教师提出任务的做法，让教师通过创设情景、作品演示、调…
网页设计总结: 有一句话说的真的很对“纸上得来终觉浅，绝知此事要躬行”，大学生活我想人人都向往，为什么呢？因为玩得很好。高中时老师们就经常把大学如何如何挂在嘴边。是呀大学生大部分就是不上课就玩，缺乏实践和动手能力，思维有时也变…
105090440029黄晶晶网页设计课论文: 网页设计与制作院系：电子与电气工程学院专业：电子信息工程姓名：黄晶晶学号：105090440029班级：10电子摘要：进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另…

网页设计课程综合案例作品设计说明文档: 网页设计课程综合案例作品设计说明文档学生学号学生姓名网站主题绿色环保等网站类型学习型博客网站门户网站游戏网站课程网站视频播放网站等完成日期20xx年6月6日一设计背景说明设计此网站的原因和意义二需求分析1功能需...
网页设计理念: 网页设计说明1主题关于动漫的网站包括图片文字以及最新的热门动漫话题的讨论面向广大动漫爱好者2配色方案以干净整齐为背景机构贯穿整个网站因为这张图片放为背景可以凸显动漫的主题栏头以千与千寻为背景填充土黄是陆地的代表...
网页设计说明书案例: 网页设计设计说明书姓学号班级完成日期设计要求目录第1章励合广告策划网站的规划11网站整体规划111网站的定位112网站板块的设置12网站功能设计121主页功能122副页功能第2章励合广告策划网站的设计与制作21...
网页设计师个人英文简历范文: 网页设计师个人英文简历范文mrpeterhayek654plainsborougheasthanovernj94342phone0342349342emailpeterhayekobjectivetoseeka...
网页设计自荐书范文: 网页设计自荐书范文1网页设计专自荐书尊敬的领导您好感谢您在百忙中翻阅我的自荐书我是正大学校网页设计专业的应届毕业生20XX年6月我将顺利毕业并获得优秀管理员学位近期获知贵公司正在招聘人才我自信通过我中专二年的学...

网页设计（132篇）

热门关注

商务网页设计与制作的实习报告实习 20xx