internet课程设计.docVIP

《Internet开发技术》上机实验报告 实验题目 静态网页设计 任课教师 班级 软件一班 姓名 学 号 2406100137 实验目的 学会使用HTML语言编写静态网页 实验日期 2012/10/01 实验内容 使用HTML语言编写介绍自己“家乡美”的主页。 实验要求 至少要有两个页面文件：主页和链接页面。主页只占一屏，要求文图并茂、布局美观。 实验环境 Dreamweaver8.0 实 验 完 成 情 况 （请不要破坏该页格式，在此处可简略地写出源文件名和文件间的链接关系，另外附页撰写以下两项内容） 源文件清单 Index.html(首页) 下面是通过超级链接链接的页面： Shenmu.html Fugu.html Yuyang.html Hengshan.html Dingbian.html Jingbian.html Zizhou.html Suide.html Wubu.html Qingjian.html Jiaxian.html Zuozhe.html 浏览器上所看到的页面图（两个以上的页面抓图附于源文件后） Index.html: Shenmu.html Fugu.html Zuozhe.html 实验中出现的问题 在实验中我遇到了一个叫层的概念，不懂“层”在网页制作中的作用。 在实验中，我还遇到了在设置多边形热点时手工操作容易误点，而导致设置热点失误的情况。而且在地图上，对每个县区都进行描边设置相当繁琐。而且用户在用鼠标滑过地图时每个地方都是手型指针，没有视觉差异，反倒不利于用户体验。 解决方案 我研究发现在地图上设置热点时没必要按照地图边缘设置多边形。仅仅需要在每个县区名中心位置，设置圆形热点，这样指针变化可以让用户明白热点的存在，而引导用户点击进入子页面。而且这样一来，工作量也大大下降，只需要设置几个圆形热点即可。对于“层”的使用，我通过在百度百科中查阅相关资料，明白了层在定位中起到的独特作用。 任课教师评阅 源代码： index.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !-- .STYLE1 { font-size: x-large; font-weight: bold; } #Layer1 { position:absolute; width:768px; height:459px; z-index:1; left: 183px; top: 15px; } -- /style /head body p class=STYLE1家乡美——我的故乡榆林 a href=zuozhe.html作者：2406100137/a/p img src=榆林美.jpg width=1322 height=375 / p class=STYLE1img src=榆林地图.jpg width=1313 height=922 border=0 usemap=#Map / map name=Map id=Map area shape=rect coords=1117,369,1118,373 href=# / area shape=rect coords=1117,349,1118,357 href=# / area shape=poly coords=1174,21,1118,33,1090,64,1065,106,1034,121,1016,93,989,97,977,119,980,140,1010,157,1022,177,1043,206,1070,230,1088,248,1103,272,1121,299,1138,263,1138,229,1138,210,1174,199,1192,177,1194,142,1187,106,1174,93,1161,88,1160,79,1160,63,1166,50,1174,34,1173,21,1118,33 href=fugu.html / area shape=circle coords=957,250,74 href=shenmu.html / area shape=circle coords=761,419,62 href=yuyang.html / area shape=circle