2009-2010学年 第二学期
课程实训报告书
课程名称：网页制作与网站建设
系（部） 信息工程系 专业班级 计算机08-4
学生姓名 徐峰
完成日期 2010-7-8
山东科技大学泰山科技学院
……………………目 录 1 实训目的 ................................................................................................. 4 2诱惑都市系统的分析与设计 ................................................................. 4 ………装……………3 ………4 ………5 ………订…………………………………线…………………………… 2.1 系统功能描述 ......................................... 错误！未定义书签。 2.2
主要代码清单6 12 实训总结............................................................................................. 12
诱惑都市网站设计
1 实训目的
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“代言人”。我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。
2诱惑都市的分析与设计
设计总体规划为：
1.资料的搜集。
2.熟悉制作软件。
3.构建站点框架。
打开Dremweaver后第一步便是新建站点
4设计主页及二级页面。
5实现网页间的链接
链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果
具体情况如下：
通过这两周的学习实习中我在老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了个人网站，作为实习的成果。其内容是多样化的。制作网页用的软件是Ｄreamweaver , PhotoShop，falsh软件。Dreamweaver大大加速了网络时代电子交易应用中的项目交付。它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。主图是一个网页的门面，它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于生活的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单生活网站,专门介绍一些即使用,又便宜的小秘笈。于是网站主题确立。
然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，每一部分又分几小部分，内容比较充分，多样。
再后是收集资料与素材，大量浏览相关网站，收集一些图片，好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。
再后是设计网页图片，用flash制作网页的banner。
再后是建立站点
再后是制作网页了，使用dreamweaver制作。
首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，
对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。而且制作过程中，不忘以下原则：
简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。
利用我们所学的框架集，制作更完美的页面。将动态网页与静态网页结合起来
制作过程中，才发现，原来自己懂的太少了，好多不知道的地方，才赶紧查书，开始的时候只是会建立模版，可不会应用，操作，可这样要修改模版可就麻烦了，要一个网页一个的修改，于是赶紧上网学习相关内容，阅览书籍，最后才知道文件这有个资源，点击
进入资源面板，点击到数第二个的模版，选项，所有模版就都显示了，点击资源面板左下角的应用命令，好了，这个模版就应用到你建立的网页中去了。 这只是在制作过程中出现的问题之一，其它问题也是类似相同。现在想想，自己所会的东西太少了，现在做的网站只是一些简单的网站，看到了一些知名的网站开发出的网页，不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习，不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而
3 主要代码清单
主页截图
代码：<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">
<!--
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
// -->
</script>
<title>诱惑城市</title>
<style type="text/css">
<!--
.STYLE1 {color: #000000}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head>
<bgsound src="music/17925_67364_23215.wma" loop="-1">
<table border="0" width="957" height="35">
<tr>
<td height="31" width="951">
<div style="position: absolute; width: 731px; height: 100px; z-index: 1; left: 216px; top: 16px" id="layer1">
<script type="text/javascript">
AC_FL_RunContent( 'id','obj1','codebase','/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0','border','0','width','745','height','105','src','images/13','pluginspage','/go/getflashplayer','name','obj1','quality','High','wmode','transparent','movie','images/13' ); //end AC code </script><noscript><object
classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="745" height="105">
<param name="movie" value="images/13.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="images/13.swf" pluginspage="/go/getflashplayer"
type="application/x-shockwave-flash" name="obj1" width="745" height="105" quality="High" wmode="transparent"></object></noscript>
</div>
<p><img border="0" src="images/logo.jpg" width="951" height="105"></td>
</tr>
</table>
<table border="1" width="950" id="table1" height="839">
<tr>
<td width="197" bgcolor="#666666"><!-- #BeginDate format:fCh2 -->20xx年7月1日 星期四 <!-- #EndDate --></td>
<td colspan="3" bgcolor="#C0C0C0">
<p align="center"><b><a target="_blank" href="index.htm">
<font color="#666666">首页</font></a><font color="#666666"> </font>
<a target="_blank" href="new_page_1.htm"><font color="#666666">时尚
服饰</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_2.htm"><font color="#666666">时尚手机</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_3.htm"><font color="#666666">星座走势</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_4.htm"><font color="#666666">娱乐动态</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_5.htm"><font color="#666666">动感发型</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_6.htm"><font color="#666666">在线反馈</font></a><font color="#666666">
</font>
<a target="_blank" href="new_page_7.htm"><font color="#666666">联系我们</font></a></b></td>
</tr>
<tr>
<td colspan="4" height="233">
<div style="position: absolute; width: 944px; height: 217px; z-index: 2; left: 15px; top: 168px" id="layer2">
<script type="text/javascript">
AC_FL_RunContent( 'id','obj2','codebase','/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0','border','0','width','943','height','225','src','images/15','pluginspage','/go/getflashplayer','name','obj2','quality','High','wmode','transparent','movie','images/15' ); //end AC code </script><noscript><object
classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="943" height="225">
<param name="movie" value="images/15.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="images/15.swf" pluginspage="/go/getflashplayer"
type="application/x-shockwave-flash" name="obj2" width="943" height="225" quality="High" wmode="transparent"></object></noscript>
</div>
<p><img border="0" src="images/形象.jpg" width="947" height="229"></td>
</tr>
<tr>
<td width="197" height="350" rowspan="2">
<div style="position: absolute; width: 100px; height: 303px; z-index: 3; left: 14px; top: 394px" id="layer3">
<img border="0" src="images/宣传.jpg" width="194" height="348"></div>
<p> </p>
<p align="left"><font size="5"><font color="#4F524E">
</font></font></td>
<td width="744" colspan="3" height="63"><font size="6"><b>
<font color="#4F524E" face="华文行楷">时尚最新动态</font></b></font></td>
</tr>
<tr>
<td width="504" height="287" colspan="2"><p> </p>
<p><b><font size="5" color="#FFFFFF">
<a target="_blank" href="new_page_11.htm"><font color="#FFFFFF">
5</font></a></font></b><b><font face="黑体" size="6" color="#4F524E"><a target="_blank" href="new_page_8.htm"><font color="#666666">男人的内心世界</font></a></font></b></p>
<p> </td>
<td width="234" height="287">
<img border="0" src="images/13625367.jpg" width="235" height="280"></td>
</tr>
<tr>
<td width="197" height="44">
<div style="position: absolute; width: 100px; height: 314px; z-index: 4; left: 16px; top: 396px" id="layer4">
<div style="position: absolute; width: 215px; height: 100px; z-index: 1; left: 710px; top: 59px" id="layer5">
<script type="text/javascript">
AC_FL_RunContent( 'id','obj4','codebase','/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0','border','0','width','228','height','282','src','images/139','pluginspage','/go/getflashplayer','name','obj4','quality','High','wmode','transparent','movie','images/139' ); //end AC code </script><noscript><object
classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj4" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="228" height="282">
<param name="movie" value="images/139.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="images/139.swf" pluginspage="/go/getflashplayer"
type="application/x-shockwave-flash" name="obj4" width="228" height="282" quality="High" wmode="transparent"></object></noscript>
</div>
<p>
<script type="text/javascript">
AC_FL_RunContent( 'id','obj3','codebase','/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0','border','0','width','184','height','342','src','images/138','pluginspage','/go/getflashplayer','name','obj3','quality','High','wmode','transparent','movie','images/138' ); //end AC code </script><noscript><object
classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj3" codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="184" height="342">
<param name="movie" value="images/138.swf">
<param name="quality" value="High">
<param name="wmode" value="transparent">
<embed src="images/138.swf" pluginspage="/go/getflashplayer"
type="application/x-shockwave-flash" name="obj3" width="184" height="342" quality="High" wmode="transparent"></object></noscript>
</div>
<p><img border="0" src="images/1.jpg" width="197" height="40"></td> <td width="748" colspan="3" height="44"><b>
<font size="6" face="华文行楷" color="#4F524E">写真图库</font></b></td>
</tr>
<tr>
<td width="197" height="156"><font color="#4F524E"><b>诱惑城市</b></font>
<p class="STYLE1">
电话：1*****</p>
<p><font color="#4F524E">邮箱：xufeng1113@qq.com</font></p> <td width="254" height="156" align="center">
<img border="0" src="images/z01.jpg" width="127" height="158" align="left"><div style="position: absolute; width: 123px; height: 149px; z-index: 5; left: 350px; top: 799px" id="layer6">
<a target="_blank" href="new_page_9.htm">
<img border="0" src="images/未标题-1%20拷贝.jpg" width="120" height="158"></a></div>
<p> </p>
</td>
<td width="243" height="156" align="center">
<img border="0" src="images/z04.jpg" width="127" height="150" align="left"><p> </p>
<div style="position: absolute; width: 100px; height: 100px; z-index: 6; left: 607px; top: 802px" id="layer7">
<a target="_blank" href="new_page_10.htm">
<img border="0" src="images/未标题-21%20拷贝.jpg" width="113" height="155"></a></div>
</td>
<td width="234" height="156" align="center">
<img border="0" src="images/z05.jpg" width="127" height="160" align="left"><div style="position: absolute; width: 100px; height: 100px; z-index: 7; left: 860px; top: 801px" id="layer8">
<a target="_blank" href="new_page_11.htm">
<img border="0" src="images/未标题-31.jpg" width="103" height="161"></a></div>
<p> </p>
</td>
</tr>
</table>
<p> </p>
<hr color="#666666">
<p> </p>
<p align="center">联系邮箱：<font color="#4F524E">xufeng1113@qq.com</font> </p>
</body>
</html>
主页是一个网站的门面，相当于一个人的脸，相当重要，它关系到一个一个网站的成败。所以我还是下了功夫的。
4 程序运行与测试
在老师的陪同下程序运行良好，测试通过，虽然我在测试的过程中碰到了一些困难，但在老师的帮助下得到了解决。
5 实训总结
实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。总体来说这次是对我的综合素质的培养，锻炼和提高。