热门推荐: 述职报告  例文  心得体会  报告 
  • 文章求助
  • 会员申请
  • 在线支付
  • 投稿加入
  • 通知公告:

    公文范文网欢迎您
    栏目导航

    网页实训报告

    发布时间:2020-09-15 18:03:34   浏览量:   关键词: 实训报告 实训 网页 报告

    衢州学院

     网页设计实训报告

     网页设计与网站开发

     圣诞快乐

     12计算机2班

     金家辉

     指导教

     蒋晓丹

     完成时间

     2014年1月15日

      TOC \o "1-5" \h \z \o "Current Document" 1实训目的 f 1 -

      \o "Current Document" 2实训意义 」-

     3网站的设计与制作 -..1 -

     3.1网站的运行环境 -1 -

      \o "Current Document" 3.2网站的概要设计(网站主题,网站规划,网站结构,网站风格、特色、网站结构图) -1 -

      \o "Current Document" 3.3网站的详细设计 -2-

      \o "Current Document" 3.4网站的改进方法或升级方案 -8 -

      \o "Current Document" 4个人总结 二.9 -

     1实训目的通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

     掌握规划网站的内容结构、目录结构、链接结构的方法。

     熟练掌握网页制作软件Dreamweaver的基本操作和使用技能。

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

     熟练掌握网页贞面布局的各种方法。

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

     熟练掌握在网页中插入图像、flash动画、背景音乐的方法。

     掌握建立各种形式超级链接的方法。

     掌握表单网页制作方法。

     掌握网页特效的制作方法。

     掌握网站测试的方法。

     训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动

     手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、 图像资料、

     flash动画和网页特效等。

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

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

     训练和培养团队协作精神和共同开发网站的综合能力。

     2实训意义

     《网页设计》实训是教学过程中重要的实践性教学环节。它是根据专业教学 计划的要求,在教师指导下对学生进行的网页制作专业技能的训练, 培养学生综

     合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转 化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力 的培养过程。因此,加强实践教学环节,搞好实训教学,对实现本专业的培养目 标,提高学生的综合素有着重要的作用。

     3网站的设计与制作

     3.1网站的运行环境

     3.2网站的概要设计(网站主题,网站规划,网站结构,网

     站风格、特色、网站结构图)

     1、网站主题

     我的网站的主旨在于从各个方面全面的介绍圣诞节。

     同时,网站里的每一个 网页都有统一的风格,每一个网页的主题色彩都是黑色跟红色, 用以展示圣诞节 喜庆的效果。最重要的是做出自己的风格,给浏览者好的欣赏感受。

     2、 网站规划

     我的网站共有6个主贞面:首页、圣诞起源、圣诞传说、圣诞风俗、圣诞图 片、圣诞故事。每个页面用统一的背景图片跟背景音乐, 以保证网站统一的风格。

     3、 网站结构

     网站由首页、圣诞起源、圣诞传说、圣诞风俗、圣诞图片、圣诞故事构成, 其中圣诞图片栏目中还有圣诞玻璃球、圣诞铃铛、圣诞礼物这 3个内容。如图

     3-1所示:

     INDEX

     圣诞起源||圣诞传说| |圣诞风俗| |圣诞I图片| |圣诞故事 . I . , I , I I圣诞玻璃球I |圣诞松铛| |圣诞礼物

     图3-1网站结构图

     4、 网站风格

     网站整体色调为黑色,然后点缀其他不同的颜色相配, 突出主题,颜色没有 过多,过杂,用以避免给人一种杂乱的感觉。版面设计十分灵活,根据各部分内 容的不同适当的自由设计。网页布局主要用表格来定位。位子的设计也是重要的 一个部分,根据具体内容决定字体风格,相同的风格多次调用是用 CSSS计一个 样式,一保证随时、准确的调用。另外,为了网页的布局的协调,我加入适当的 FLASH?画,用以达到更好的浏览效果。

     5、 网站特色

     我觉得我的网页设计的最大特色就是色彩淡雅, 布局协调,结构活晰。观之, 给人以活丽,纯朴的感觉。

     3.3网站的详细设计

     素材、风格、模板都设计好以后,下一步就是具体的制作网页。制作网站时, 首先要做的就是站点的规划,建立一个本地站点“ 234金家辉”,建立的各个贞

     面都应该放在本地站点中,在网页制作时所需的各个元素都进行了统一的管理, 建立统一的文件夹放同一类型的文件,我在制作时建立了 “file ”文件夹来存放 图片。首页我设计了一个模板用丁方便的制作其他网页,设计的模板如图 3-2

     所示:

     图3-2模板效果图

     根据自己的网页风格,在网上搜集合适的图片,另外网页的贞宽一般没有超 过900像素,以保证左右不出现滚动条。设计时,我在第一行插入了一个一行三 列的表格,在表格中间插入了 Christmas的Gif动画,左右两边插入了 2个铃铛 的Gif动画来达到对称以及节日的气余。背景用了星空的 GIF动画,我还添加

     了背景音乐。背景音乐代码如下:

     <bgsound src="file/4.mid" loop="-1">

     在右边我还设置了返回首页的超链接以方便浏览者更好的浏览, 其超链接代

     码如下:

     <div class="ZZ" id="apDivT'>

     <div align="right"><a href="../index.html"> 返回首页 </a></div>

     </div>

     根据模板我建立了主贞,效果如图 3-3所示:

     图3-3主贞效果图

     为了使页面连接活晰,在首页靠右的地方插入了 5个超链接,分别是圣诞起 源、圣诞传说、圣诞风俗、圣诞图片、圣诞故事,当点击任意链接都会跳转到相

     应的页面。在第一张跟第二张图片上我还加入了交换图像行为, 当鼠标移到任意

     一张图片上时,图片会变成另外一张,一开鼠标图片变回原样。其代码如下:

     <td width="33%"><img src="Images/49.gif" width="286" height="191" id="Image1" onmouseover="MM_sw apImage('ImageT,”,'Images/48.gif,1)

     onmouseout="MM_swapImgRestore()" /></td>

     第二个页面是圣诞起源,效果如图 3-3所示:

     图3-3圣诞起源效果图

     圣诞起源主要内容是介绍圣诞的起源, 我插入了一个一行三列的表格,在表

     格的左右分别插入了烟花的 Gif动画,然后在中间写上主要内容,在最下面我插 入了一段飘雪的Flash动画来增加气余。其代码如下:

     <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="347" height="269">

     <param name="movie" value="file/飘雪.swf" />

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

     <param name="wmode" value="opaque" />

     <param name="swfversion" value="8.0.35.0" />

     <!--此param标签提示使用 Flash Player 6.0 r65和更高版 本的用户下载最新版本的 Flash Player。如果您不想让用户力■到该提示,请将其

     删除。-->

     <param name="expressinstall" value="Scripts/expressInstall.swf" />

     <!--下一个对象标签用丁非IE浏览器。所以使用IECC将 其从IE隐藏。-->

     <!--[if !IE]>-->

     <object type="application/x-shockwave-flash" data="file/ 飘 雪.swf" width="347" height="269">

     <!--<![endif]-->

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

     <param name="wmode" value="opaque" />

     <param name="swfversion" value="8.0.35.0" />

     <param name="expressinstall

     value="Scripts/expressInstall.swf" />

     <!--浏览器将以下替代内容显示给使用 Flash Player 6.0和

     更低版本的用户。-->

     <!--[if !IE]>-->

     </object>

     <!--<![endif]-->

     </object>

     第三个页面是圣诞传说,效果如图 3-4所示:

     苗用司智3, ,洒柬.拓“点丁母

     苗用司智3, ,洒柬.拓“点丁母?基染特上池州片町马出特驰构于天压目雨.S8 ,豪*峥!一嗟,用厘地i辜:专> 拥异联再氓.至:建寺.仲同丁成白湖,也诃再响痔至谁食k.

     /垒徨毛乂的悖窟囹

     * 腊 g 匚 ..

     ,由圣宅古位而和 所:.怪聪A也隐I泓!* 跄生速大专汩雷暴督擀撤,收上,靠.忙**提;;:3 E而圣哽:驻仙甫鞋世?T.耳年箜窗日公星血 色』蔑在曰*星成匕圣■手拮空由州肉也妇虱隔普虫事女壬作无和芝k云开始理双怒.全苴成我代片日电拦壬亲IM由白胡子和I混.前不目的国陷政 ItM虽甫走A也右了不储I南隽.在袒凶『棒亢域睥■理具心具粒在法于i深身.g汶瑚辛匹匕滞.据,&翌人们忙?亍方,忸果整瑛蜉.杵若 徊利壬畀土女畀.开基子!曾一Ifr子■而H误T.-MB学再:财朽步通其于订二洁-革二胳二了新年.底方一f呈样fi|节日,圣谨艺匕已始成W 圣讶节茶主尊宾言if明暖.也tf IMS.拉酷而讦革刃渣仰绿握点? i?摆子送y史虫乐洲■员的*埋位凸祝恒中-,

     T 做播&以序有一个心地担即膜祝灌孑啪芒雀卜犯了也和垂依三个虫JL.宜令经呻:了不壬萎帛W*K7.由鸟困此养点初尊L ffi/J.iHlHTtl

     Tife制一万旅*里生名成*:.心他只?!#白嵌携. 91网在打营^ - -

     -snipn-*. +11*1T1r[Fti^*:4t±-frIIfLitlP- +H0*?FEB?

     图3-4圣诞传说效果图

     这个页面跟上面的一样也是插入了一段 Flash动画,左右插入了跟内容相关的图

     片。

     第四个页面是圣诞风俗,效果如图 3-5所示:

     T中国.hi*帔予国节径『■近月可的,,#『一竺;齿iBhhR比的官节日汽策,抵『增她■南恨理hl l州一带,由十岫和香谨,汗他won,可 虐一■的1?.虽tM归弥成也虬 力日时毋节作由一*谊丈旧眩的日子了-相HJLilfHH:家一粘学iS节的一也也芹目吧?1上目站日谊一血 有敬急目偿升削早=h 帝井如办 夫丁够R牝I的孕七学区可m翩跆t?砒井?刎嫌会的住4国的队强物瓠tn婚.饰:m母功卜汁:罚4待wkl Hnm博斗旃酸虹

     贝?'“-磐费^切吐叫伺目.(5#六日血 瞰iWk mljt的siti脚faxtv. _由.虬#虬 访.主的捌孙..tax岫 也%十反蛤.也心础吗?反豆+

     贝?

     蓬但胃,

     十角第「编躁黯脚部逃勰瞬噩'癖怦呻布致同础加咿.?珂麒泗至啪卧孕坤犀,

     十角第

     m矗嬲;嬲%曹龄槌卧小呼初耐啊待上旭队平林列在就T盼孑早上畔%旁

     图3-7圣诞礼物效果图

     当点击圣诞铃铛时,会跳转到圣诞铃铛的页面,效果如图 3-8所示:

     图3-8圣诞铃铛效果图

     当点击圣诞玻璃球时,会跳转到圣诞玻璃球的页面,效果如图 3-9所示:

     图3-9圣诞玻璃球效果图

     最后一个页面是圣诞故事,效果如图 3-10所示:

     圣诞故事

     蔬传电,削起了早向土虱伽辰倡匡引T*芒即圣亏,JfifEfiHfflSiS.成 者画i

     蔬传电,削起了早向土虱伽辰倡匡引T*芒即圣亏,JfifEfiHfflSiS.成 者画i■虫人跑息,砌]从K■尚上穿过恒BL透匹K¥; .4* &单影生由1 ?成回.这,..■■.虹 拙曲 ^4; iF ".蛙刘嘛?河砂,;;向顺I!璧宝出,用■■邮? -jrt,:: £ipfi此

     忡粒澄的白色mET不作独!岗曲也 翎过来Sfc如白失A lETt嗦哄Fl妆的巳狭, ftzriran.胃咎为后,低于南干苫时芟推而堀世的头,谚看着整#蹄瓦、

      E—H— 皿—白陷的酋朋加早布片 嶂市飞

     ''W焉酒TE

     .飞曲巨幸嘛,列不御隹Emm中

     交瞽描群笛生黯俗骤珍|?新洒

     一 —— :的Fr甘,飞成广 -

     复幽明钊叫电匡空!pm谜t,m暇弱度上味下开!ni

     诃螺云波j丽丽威£7,了,管£而加]瞄袖龙印而更毒务门加税眼部右■博

     打,*僵下古11绍?

     当汀伽无,■ftSflfteiwpW.哈由好啊潭更扣屑配,BF/t rWMen&te+H

     ,^ITlft. I寸冲息忙倾■甘转.?

     育UT即抑蝴修渐殳『它们苗蜀础的株吾队但棒■贝兄?SWH必!MM伟IH在岛 在矛恒之中.当它们帮HRlWg皆跑祖,收好僧盯抻是桂在找由头皓里讥的,

     + ' .枚¥rl..要蓄桐行早好了8=1暇i圣囱节的即:

     在诅H快¥平.

     州酒是概

     M园m并目己

     一.一聆等?可啊血mq?

     §—1*皿底谅买11.倾顺聿玄翦的t 的和场不浩酊^迎 时一些ti害.折压字祝

     I刨】如 制]迎来得快财完唱近的JViwT^F且在H皑用,希戒止iffife义原告

     至他111的调口裳舀式的*西.目到白己的虱里丢.

     图3-10圣诞故事效果图

     在这个页面我加入了一段高尔基的长篇故事,来供那些喜欢阅读的浏览者 们。

     其中每个页面我都设置了统一的 CSS样式,确保字的颜色、大小都能统一,给

     浏览者带来活晰的感觉。其代码如下:

     .q {

     font-family:"华文新魏";

     font-size: 14px;

     color: #0FF;

     图3-11版权效果图

     上图3-11是版权信息,尽量用简洁的语言和稳重的色彩,给人留下活新, 简练的感觉。版权信息标名了作者和版权用以提高内容的可读性和使内容充实, 既突出网站的主色调,乂给人以凝重的感觉。

     上传测试网站

     网页制作完毕以后,要进行反复的测试,保存后在 IE浏览器上反复运行自

     己的网站,用以发现设计中的缺陷并及时改正。

     3.4网站的改进方法或升级方案

     4个人总结

     通过这次实训对这门课程的学习, 做好网页,并不是一件容易的事,它包括 网页的选题、内容采集整理、 图片的处理、 页面的排版设置、 背景及其整套 网页的色调等很多东西。

     所以我得出一下总结:

     一、准备资料和挑选符合目的主题的合适素材

     做网页当然要收集、准备资料。在网上多转转,看到什么漂亮的网页,把 它保存起来, 作为以后自己设计主贞时的参考。另外,还包括搜集美化主贞可 能要用到的各种材料,如背景、小动画图标等等。可以在硬盘上建一个文件夹, 下分“图片、声音、动画”等文件夹, 养成上网时看到有创意、新鲜的图像,

     就按鼠标右键存入你硬盘相应文件夹的习惯,时间一长就拥有了 一个可观的图 库,等做网页时随手拈来或加以修改就成你自己的东西了。

     二、 规划好整个网站

     主贞的设计应以醒目优先,应该令人一目了然,切勿堆砌太多不必要的细节, 或使画面 过于复杂。切记,页面给人的第一观感最为重要!在网上到处浏览网 站的人很多,如果你的主贞给人的第一印像没有吸引力, 彳艮难令他们深入观赏,

     而且他们恐怕再也不会访问你的网站了。

     三、 善用图片,增强艺术效果

     我记得老师说过网页的迷人之处之一, 要算它上面能点缀许多漂亮的图片。

     精美的图片设计,可以使自己的网页增辉不少,令人过目不忘。图片的内容应有 一定的实际作用,切忌 虚饰浮夸,同时还要注意与文字的颜色搭配。最佳的图 像集美观与资讯于一身。

     四、善于借鉴他人主贞制作中的设计技巧

     由于在网上用浏览器浏览任何主贞时,都能查看到该主贞制作时所编写的 绝大部分网页编程源代码。因此,如果想知道并掌握一些优秀的主贞采用的设计 技巧,试着将其源代码 调出来仔细揣摩,并模仿着一步一步去实现。

     

    Top