综合实训项目技术报告--网站实训

湖南工业职业技术学院

信息工程系实训报告

题目:______________________

专    业:_____________________________

班    级:_____________________________

学    号:_____________________________

姓    名:_____________________________

指导老师:_____________________________

20##-10


 

本文介绍了用Dreamweaver技术、运用HTML语言编辑能力和加入CSS与Div样式、使用一定的模板制作的关于大学生活文艺活动个人网站。从中掌握网站开发从规划到构建、调试等技术,提高了我们综合应用网页设计能力。

目   录

前言....................................... ...........4

第一章  网站总体设计............................. .... 5

1.1  可行性分析.................................. 5

1.2  网站设计方案.................................6

1. 3  网站总体结构.................................7

第二章  网站详细设计...................................8

2.1  主要页面功能介绍.............................8

2.2  页面主要内容.................................11

第三章  网站总结...................................... 15

3. 1  网站的优点.................................. 15

3. 2  网站的缺点与改进.............................15

    3. 3  实训感悟与总结...............................16

致谢.............................. .......... .........18

  

本实训项目通过“网络设计与JS技术”总体方案设计、收集与整理相关的素材、网站的规划与设计、网站的整体设计、功能模块的设计、网站的调试等环节设计并利用Dreamweaver制作一个网站,有首页和辅助的链接页面。在网站的设计中使用了表格和模板是使网站布局一致,更加的美观。在页面中加入了层、行为、css样式等使网站更加的完善。本报告正是以实训项目为载体,对实训项目中网站的总体设计、网站的详细设计、网站总结进行阐述。

第一章  网站总体设计

1.1 可行性分析

 网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.

1. 通过综合实训进一步巩固,深化和加强学生的理论知识于专业技能。

(1) 掌握规划网站的内容结构,目录结构,链接结构的方法。

(2) 熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。

(3) 掌握页面的整体控制和头部内容设置的方法。

(4) 熟练掌握网页页面布局的各种方法。

(5) 熟练掌握在网页中输入,设置标题和正文文字的方法。

(6) 熟练掌握在网页中插入图像,Flash动画和背景音乐的方法。

(7) 熟练建立各种形式的超级链接的方法。

(8) 掌握表单网页制作方法。

(9) 掌握网页特效制作方法。

(10) 掌握网站测试的方法。

2. 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。

4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。

1.2 网站设计方案

   1. 网站主题

我的网站的主题在于从记录我在大学期间参加的各类文艺活动,包括每个页面都有介绍不同的活动资料、心得、图片等内容。同时,网站里的每一个网页都有统一的风格,每一个网页的主题色彩都是浅蓝色,给人带来一种温和舒适的感觉。最重要给浏览者好的欣赏感受。

2. 网站材料

网站材料主要是平时保留信息,包括图片、文字、相关的资料。同时,在学校的官网上下载了相关资料,同时查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图像资料,Flash动画和网页特效等,用以得来更加具有说服力的页面。想要做好自己的网站,就要尽量搜集材料,搜集材料越多,以后制作网站就越容易。精选自己收集的材料,作为自己制作网页的素材,这样就可以做好一个好的网站。

3. 网站规划

 我的网站共有6个主页面:首页、我的档案、最新动态、我的照片、相关视频、留言簿。每一个页面用统一的模板,以保证网站统一的页面风格。网站整体色为浅蓝色,突出主题,颜色没有过多,过杂,用以避免给人一种杂乱的感觉。版面设计十分灵活,根据各部分内容的不同适当的自由设计。网页布局主要用模板和表格,用模板定位内容的大体结构,再用表格具体定位。位置的设计也是重要的一个部分,根据具体内容决定大体结构,相同的风格调用CSS设计一个样式,以保证随时、准确的调用。另外,为了网页布局的协调,我加入适当的Flash视频,用以达到更好的浏览效果。

4.网站的制作工具

做网页时主要使用的是Deamweaver软件。另外,为了处理网页中的其他元素,还使用了Photoshop、美图秀秀等软件。

1. 网站总体结构

第二章   网站详细设计

2.1   主要页面功能介绍

我设计的网站首页如下图:

网站主要记录的是我在大学期间参加校内的各种活动,在网站中我用了一些代码,是网页看起来“活跃”一些。

首页中滚动的时间和文字且时间会自动更新,我在代码中添加了</div>

<div id="apDiv9">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<marquee> <!-- #BeginDate format:Ch2 -->20##年4月25日 <!-- #EndDate -->欢迎您光临张肖莹的大学文艺生活个人网站,祝您心情愉快!</marquee></div>

网页的导航有6个部分,首页、我的档案、最新动态、我的照片、相关视频、留言簿。均可链接到相关页面。

主页的中间主要分3个部分,最左边是我的个人照片,中间是我的介绍,点解“详细”可以链接到“我的档案”查看更加详细的活动资料。最右边是一段相关视频和最新动态,都进行了超链接,点击可查看详细记录。

在最下面的自动滚动图片,我添加了如下代码:<tr>

      <td height="287" colspan="3"><marquee><img src="../image/8.jpg"/><img src="../image/9.jpg" height="180"/><img src="../image/10.jpg" height="180"/><img src="../image/4.jpg"/><img src="../image/5.jpg"/><img src="../image/6.jpg"/><img src="../image/11.jpg" height="180"/><img src="../image/12.jpg" height="180"/><img src="../image/13.jpg"/>

      </marquee>&nbsp;</td>

    </tr>

视频的添加我用的代码是:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="231" height="249" id="FLVPlayer">

    <param name="movie" value="FLVPlayer_Progressive.swf" />

    <param name="salign" value="lt" />

    <param name="quality" value="high" />

    <param name="scale" value="noscale" />

    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=../flash/%E8%90%BD%E8%8A%B1&autoPlay=true&autoRewind=true" />

    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=../flash/%E8%90%BD%E8%8A%B1&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="231" height="249" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" /> 

</object>

2.2   页面主要内容

通过仔细的比较可以看出首页与其他辅助页面在设计上略有差异,为了使网站看起来美观一致,我将两个页面的图片、布局等都设置为相同的规格。

   点击“我的档案”,进入后有我的详细的参赛记录和获得奖项。

        

点击“最新动态”,进入后有我的参赛列表,均有超链接。

进入“我的照片”当鼠标放在图片上时会显示“点击查看更多精彩图片”,无论点击图片还是文字,都可以进入相关链接,查看更多图片。

这是我的一个留言簿的设计,姓名和提问主题我在检查表单里设置为必填,电子邮箱的格式也设置过,在留言类型上,设置为单选,对按钮进行行为的设置,点击“发表留言”会有窗口弹出。

第三章   网站总结

3. 网站的优点

首先,我觉得我的网站比较有意义,通过自身参加活动的经历,记录舞台上自信的自己,这便是我的一本独特的回忆录,当我离开学校的时候,当我踏上工作的时候,当我为人妻为人母的时候,打开这个网站,曾经的一切历历在目。它是我的见证者,它对我而言有不一样的情感。

我觉得我的网页设计最大特点就是色彩谈雅,布局协调,结构清晰。给人以清丽,纯朴的感觉。通过使用模板,我的网页都紧紧的结合在一起,没有独立或是独立的网页存在,实现了网站的统一。自动滚动的文字和图片给人使网站更加灵活,不失呆板,视频的插入也是网站增色不少。

3. 网站的缺点与改进

通过两周的实训,发现自己还有很多的不足。就框架的应用很难把握,当插入图片的时候把原有的模板给撑破了,精确定位很重要。因为学艺不精,所以不会网页的代码设计,只能简单设计。不过也实践中也学到了很多知识,比如原本不知道网页设计还需要切片,表格的嵌套是非常重要的,模板的应用时非常便捷的。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。网站的整体设计比较简单的,对于提交表单这部分的应用还是没有掌握,网页的版面设计过长,浏览时需要滚动滚轴。以后我会查看更多的相关知识,将理论与实际相结合。平时更加的注重运用。

3. 实训感悟与总结

非常感谢学校给了我这次制作网页的机会,通过这次实训,我学到了很多有价值的东西。我独立的完成网站设计的全过程,把设计中散乱的网页链接成框架体系,使平时学到的知识点有了很高的提高,并且合理的在试验中进行了实践。在这次实验的过程中,我查阅了网页设计的技术技巧方面的书,增加知识面,给我在以后的设计过程中能博采众长,制作出好的网页打下了基础。最后,我感受最深的是:想要最好一个网站,素材和技能都十分重要。好的素材需要多放面查找资料的,可以从图书、网站和新闻上查找的。好的技能需要不断的实践,经常锻炼做网页。如果拥有好的素材和精湛的技能就可以做出最精湛的网页。

通过两周的学习实践中 和老师的指导下,运用更丰富全面的软件技术和应用技巧,使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了大学文艺生活个人网站。作为实训成果,其内容是多样化的。制作网页用的软件是Deamweaver 软件。它提供了网页和表单的动态生成到企业级的解决方案。首页是一个网页的门面,它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个大学文艺生活个人网站 ,要做网站就要对网站有些了解,于是确定主题,浏览一些类似的网站,但考虑到,现在网络上好多类似的网站,根据这种情况,最后决定建立一个简单的介绍大学文艺生活个人网站,专门记录自己在大学期间参加的各种文艺活动。于是网站主题确立。

然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,大致分6部分,首页,我的档案,最新动态,我的照片,我的视频,留言簿。每一部分又分几小部分,内容比较充分,多样。

再后是收集资料与素材,收集相关的图片,用表格进行布局,插入好的文章和图片等,还有参考一些好的网站的布局,特色,颜色搭配,背景图等。

再后是设计网页,用美图秀秀制作静态图片。再后是建立站点,和制作网页了,使用dreamweaver制作。

首页内容精彩丰富,首页主要是导航作用。首页制作时,时刻考虑着网页的基本原则:统一,连贯,分割,对比及和谐的原则,内容统一,都是为了主题服务,一个网站强调的就是一个整体,只有围绕一个统一的目标所做的设计才是成功的;连贯,页面之间关系连贯,统成一体;每版内容都自成一体,颜色各异,便于浏览;整个网页有动有静,颜色不同,形成对比,不呆板,富有生气;颜色各异,但又不同之中又相同,浑然一体。简洁实用: 这是非常重要的,网络特殊环境下,尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的,满足使用者的要求,网页做得越适合使用,就越显示出其功能美;页面用色协调,布局符合形式美的要求: 布局有条理,充分利用美的形式,是网页富有可欣赏性,提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计,制作更完美的页面。将动态网页与静态网页结合起来

再后,调试过程,好多次本来在Deamweaver里好好的,把字调的好好的,位置很对,可在浏览器里御览就出毛病了,不是靠上了,就是靠下了,很不老实,经过再三调试,整理,加了好多表格,终于满意了。

通过温本周的实训,发现自己还有很多的不足。不过也实践中也学到了很多知识,比如表格的嵌套是非常重要的,模板的应用时非常便捷的。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

致   谢

本综合实训项目是在老师的悉心指导下完成的,他对本次实训工作倾注了大量的心血。两周来,老师深厚的专业背景、严谨的治学态度、平易宽厚的人格作风使我受益匪浅。感谢您对我的悉心教诲,使我顺利地完成了实训任务,在实训任务完成之际,衷心感谢老师对我的关心和培养!

感谢我同组同学及同班同学的帮助和关心!最后向审阅技术报告的老师致以深深的谢意!

相关推荐