婚庆网实训报告

网页制作实训

报告题目： 婚庆网页制作院（系）： 信息工程系专业: 学生姓名: 学号： 指导教师: 时间: 一、实训目的1、巩固和加强网页制作与网站设计的理论知识，为动态编写后续课程的学习奠定必要的基础。2、使学生掌握网页制作与网站设计各个相关软件之间相互的关系；3、熟悉和掌握网站建设的界面设计、可用性分析。4、熟悉和掌握架设网站，完成测试，调试和维护的方法。5、通过实战，提高动手能力，提高分析问题和解决问题的能力。6、提高资料收集和文档写作、整理能力。二、实训要求1、动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构，栏目数不少于4。2、制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。3、所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。网站页面制作过程中要求使用的内容有：文本及图像的设置、Flash动画的插入、创建CSS样式、为页面添加行为、使用时间轴创建动画效果、运用各种类型的超链接、制作留言板及实现交互效果等。（1）必须有导航栏；（2）要求合理的应用JavaScript、行为制作特效。（3）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。（4）所有页面要求内容充实、布局合理、网站整体页面颜色要搭配协调、美观大方。（5）各个页面之间导航清晰、链接准确无误，不要存在空链接或错误链接。4、网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。5、网站要有一定原创内容；必须保证页面的风格统一，尽量使用模板或框架结构完成。6、在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。7、实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。8、实训环境为Windows2000及以上版本的操作系统，网页制作软件为Dreamweaver，根据需要运用PhotoshopCS处理图像，运用Flash制作动画。三、实训内容1、指导老师提供题目供学生选题，学生也可更改，但必须经指导老师核可。2、进行需求分析，主要任务是确定网站主题，并复习在实训中可能涉及的基本知识。2、准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。3、设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。4、创建本地网站，建立网站的目录结构。5、制作首页、二级子页、内容页，丰富页面内容并创建超级链接。。7、测试与浏览网页。8、书写《实训报告书》。四、实验步骤1、网站主题我的网站的主题在于从各个方面全面的介绍婚庆公司的服务,包括每个页面都有介绍不同的介绍资料。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅粉色，给人带来一种舒适温馨的感觉。最重要给浏览者好的欣赏感受。自信心。2、网站材料网站材料来源主要是从各大婚庆公司网站上搜集所要的网页信息,包括图片、文字、相关的资料。同时，通过查询相关的书籍、百度等方式学习网页的布局，css配置和网页特效等，用以制作出更加精美的页面。想要做好自己的网站，就要尽量搜集材料，搜集材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。3、网站规划我的网站共有6个主页面：首页、婚纱摄影、婚宴酒店、婚礼婚庆、婚纱礼服钻戒首饰、美容化妆和蜜月旅行。每一个页面用统一的背景，以保证网站统一的页面风格。如下图：网站整体色为浅粉色和紫色，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位置的设计也是重要的一个部分，根据具体内容决定大体结构，相同的风格调用CSS设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了图片轮播，用以达到更好的浏览效果。4、网站的制作工具做网页时主要使用的是Deamweaver8软件。另外，为了处理网页中的其他元素，还使用了Photoshop、GifAnimator等软件。4、制作网站的网页素材、风格、模版都设计好以后，下一步就是具体的制作网页。制作网站时，首先在网页制作时所需的各个元素都进行统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“image”文件夹存放图片专用的，网页中的CSS样式文件及javascript文件也进行统一管理。4.2、网站首页（index）如下图：以导航栏为边界，上方为网站logo标志，下面为一个幻灯片组件，给浏览者好的视觉享受。幻灯片制作过程：首先在网上收集下载背景图片，，仿照课本例9-2给出的幻灯片播放示例并加以修改，以收集的图片做为内容，使浏览者进入页面起就能浏览到我们想让他优先知道的信息。

幻灯片下方左侧以纵向导航栏的方式呈现有关婚礼策划案的选项，右侧采用图文混编的方式展现一些婚礼策划案的图片及价格信息，最下方采用表格中插入图片的方式展现婚礼真实案例情况，并且鼠标悬停时会出发js效果显示真实婚礼案例真实婚礼案例接下来展示部分子网页:展示价格部分采用了多个＜div＞标签进行排版布局，对前2组词通过css控制进行加粗处理并修改“全部”二字的背景颜色。下方添加＜inputtype二〃radio〃＞单选框标签制成一个选择排序的样式r--"T::价格念部r--"T::价格念部20002000-30003000-40004000-5000500“60006000以上［服装念部念部全送不全送念部当前排序二，按发布时间按价格 按点击量iL__

下方采用简单的插入图片加文字排版形成以下效果:4698元套系4698元套系服袋全部外祟全部内景全部底片全部价格面议4698元套系服袋全部外景全部内景全部底片全部价格面议4698元套系4698元套系服袋全部外祟全部内景全部底片全部价格面议4698元套系服袋全部外景全部内景全部底片全部价格面议服袋全部外星全部内景全部底片全部价格面议4698元套系服袋全部外星全部内景全部底片全部价格面议该子网页的所有文字及图片均添加了超链接标签方便以后使用，但为了追求效率故不再编写二级子网页子网页2：分为侧边导航栏，幻灯片播放及图文混编3个部分，均根据书本例子改编做成她&他故事婚庆公司爱度一生婚礼策划两小无猜婚礼策划响亮婚礼策划婚庆套系价格¥0.8万以下¥0.8-1575¥1.5-3万 ¥3-5万¥5她&他故事婚庆公司爱度一生婚礼策划两小无猜婚礼策划响亮婚礼策划婚庆套系价格¥0.8万以下¥0.8-1575¥1.5-3万 ¥3-5万¥5万以上一生斯爱酒店星级会所俱乐部餐标3000-4000元,…桌数1。桌以下,10卓许愿树紫色浪漫【金色万丽】北京佳苑酒店星级四星级餐标2000元以下2卓数10桌以下,10卓中宇世纪大酒店星级五星级餐标4000元以上桌数10桌-20桌5总结通过这次实训对这门课程的学习，做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。回顾这次网页设计，感慨颇多，的确，从选题到开始制作，从理论到实践，用时5天，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。通过这次课程设计使我懂得了理论与实际相结合是很重要的，只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。难免会遇到