搜索
华北科技学院计算机学院综合性实验实验报告课程名称网页制作A实验学期2012至2013学年第一学期学生所在系部计算机学院年级2010级专业班级计科B103学生姓名韩海艳学号201007014331任课教师邵铁君实验成绩计算机学院制华北科技学院计算机学院综合性实验报告第1页《网页制作A》课程综合性实验报告开课实验室：信息楼基础六实验室2012年11月20日实验题目综合网站的规划、设计与制作一、实验目的云南旅游网站的规划、设计与制作二、设备与环境1、硬件：计算机2、软件：Dreamweaver、Flash、Fireworks三、实验内容在本次的网页设计与制作中，我们组的主题是云南旅游的景点简介。云南作为一个少数民族聚居的特色省，有许多著名旅游景点，并且都展现出独具民族风情的文化风俗。因此，如果要将云南的各个景点详细的介绍给大家，在很短的时间里很难完成。所以，在这次的网页设计里，我们选取了四个比较吸引人的地方进行了介绍，由于时间与篇幅的原因，一些内容没有写入网页，同时也有许多方面缺乏考虑。1.网站规划1）网站目标我们组设计的云南旅游网站的目标是让想要去云南旅游的人们了解云南的一些著名的特色城市，也仅限于那些无暇查找关于云南旅游的详细资料的人。我们网站针对这些人，提供了四个适合休闲娱乐的景点，包括西双版纳，香格里拉，大理和丽江，从而让他们快速的了解一些关于云南的信息。2）栏目设置①首页的设计由于云南景点很多，而我们只选取了四个景点进行了介绍，显然不能满足很多人的需求。我们在首页中对云南的旅游景点进行了一些概括，尽可能的让人们知道云南都有哪些旅游景点，与此同时，我们简单的介绍了云南这个省，并插入一段视频《印象云南》让人们更好的感受云南的民族风情。除此之外，附加了我们制作人的名字。用一个可折叠面板将这些内容组合起来，使网页看起来清晰明了，不至于杂乱。主页的设计在主页中，我们设计了一个flash动画实现对四个景点的选择，将其放在首页的右侧。点击华北科技学院计算机学院综合性实验报告第2页四个小球，都会链接到相应的网页上。另外，在flash动画的左侧，添加了一首诗，从而使页面看起来更吸引人。对景点的介绍，用四个框架实现。景点的介绍是从三个方面进行的，分别是：该地的旅游景点，本地的风俗文化以及本地的美食。如果人们想要了解另外一个地方，可以通过网页左边的链接查找关于另外一个地方的信息。③站点目录结构：如右图所示网页的流程图：如下华北科技学院计算机学院综合性实验报告第3页2.设计1)链接的结构首先，打开这个网页，看到的是网站的首页，是一个对云南整体概括的一个页面，点击进入键后，进入对四个景点选择的网页，该网页供人们选择自己感兴趣的地方。只需点击四个小泡泡即可进入自己喜欢的地方。图（1）图（2）现以进入丽江页面为例，在进入该地点的网页后，人们可经过选择顶部的按钮了解自己想要了解的信息，包括丽江的风景，文化，美食。如图（3）。华北科技学院计算机学院综合性实验报告第4页图（3）如果游客想了解到大理，西双版纳，香格里拉这三个地方的信息，可通过点击页面左侧的按钮链接到这三个网页；若想返回首页，点击左侧“返回”安按钮即可。如图（4）。图（4）（2）Logo等图标的设计网页中一共用到了四个图标，分别在四个地方的浏览页面中。图标中为该地的代表物或者是对该地的抽象化描述。例如：由于香格里拉被人们描述为“最接近天堂的地方”，故其Logo用月亮和星星加以抽象画描述，如图（5），丽江的美可以洗涤人们的心灵，故将其描述为“让我丢失灵魂的地方”，并旁附丽江的市花菊花。如图（6）。与此类似，大理的图标和西双版纳的图标都是可以代表该地的事物。图标的设计均用fireworks完成。图（5）图（6）3.制作我主要负责了网页中的Fireworks的制作，其体现作用细分如下：华北科技学院计算机学院综合性实验报告第5页(1)主要使用Fireworks每个网页的导航、按钮和图片的修改。1.使用了Fireworks软件的文本变形功能通过克隆等手段制作出了具有倒影发光等多重效果的文字，再运用保存，就形成了具有倒影效果的文字图片。2.给文本添加路径，使文字环绕钢笔所画的路径走，LOGO中的图片都是这样添加效果的3.运用了Fireworks软件的多边形套索工具将需要的素材图片扣出需要的部分，复制粘贴到画布里，再将画布背景色改变，添加文字，保存得到图像和文字效果的图片。4制作导航条，打开编辑中的插入按钮，根据提示自己画一个有圆度的矩形或从库中拖拽一个制作好的按钮，加入渐变，调节到自己想要的效果，插入文字并给通过滤镜给其加入效果发光、阴影等。，（2）Dreamweaver部分1.建立站点并管理站点，在站点中实现了对文件夹的建立，对文本，图片的编辑，删除，复制等。2.建立网页文档，实现对网页的页面属性的设置，实现在网页中插入和编辑文本，图像。3.建立文本超链接和图像超链接，4.通过制作导航条将介绍的其他景点链接起来，鼠标滑过时会有不同的文本效果，点击链接可以浏览到你想要的其他景点主页面。5.图片不能加入锚点，所以经过大家的讨论，我们通过加入热区，点击链接。四、实验结果及分析这次的网页设计，站点为“印象云南”，就是云南的一些旅游景点，总体设计基本上达到了我们预想的目标，通过我们的网站游客可以了解到关于大理，丽江，香格里拉，西双版纳这四个地方的相关信息，比如美食，该地的著名景点，风俗文化，特色节日等。同时还可以欣赏一些云南的风景图片和关于云南的视频。但由于网页数的限制和能力范围只是介绍了四个地方的小部分内容，也只是有云南的一小部分。每个地方的介绍不是很全面，内容不是很详尽；该地的天气虽然显示，但因为是从网上下载的一段代码，因此会有其他网页的出现等等。很多设想的效果并没有实现，一些手法还很稚嫩。总而言之，网页中还有很多地方要进一步的改进。在设计“印象云南”网页的过程中，我们深刻体会到网站的重复性比较大，因为对每个地方的介绍方面都是大同小异的。在设计的初始阶段，我们希望介绍每个地方的页面的布局都不相同，华北科技学院计算机学院综合性实验报告第6页每个人都来设计出自己理想中的页面，这样可以使人们在浏览网页时，可以保持对每个网页的一种新鲜感，防止一种枯燥的感受。但最终想到这样对每个人的负担太重，在有限的时间里难以完成，而且作为一个整体，布局相同是可以的。因此制作过程中完全可以使用模板，但在制作过程中有一些flash如果指定为相同的尺寸会影响效果，所以放弃了使用模板的方法。我们用框架实现了对每个地方的介绍，用框架的好处是清晰明白，但也带来了一些不便。比如对topframe，leftfrome，mainframe的颜色搭配，同时受IE浏览器所能显示的最大高度的限制，使mainframe中的内容的大小受到限制。经过测试，我们想到了一种解决办法，将mainframe中的图片背景固定在一个位置，将topframe和leftframe中的颜色尽量设置的与mainframe中的颜色匹配，即通过吸管从mainframe中选一种背景颜色。最关键的是将topframe和leftframe中的空白尽量填满，这样使得整个页面看起来不仅很充实，而且也不是很突兀。我意识到一个人的力量，能力精力很有限。同组人之间的讨论交流时常会使我们有新的设计观点的出现，从而解决很多困难瓶颈。很多事情需要大家合作，就像在介绍美食时，美食、文化、景点这三个网页设计不同，但是想不出什么好的办法，经过讨论沟通，我们想到了用层和表格一起来布局。还有很多困难都在我们讨论的过程中迎刃而解。经过这次制作“印象云南”网页我体会到，学习网页制作不能一蹴而就，它是一个循序渐进的积累过程。想要更快更好地学习网页制作，除了需要勤奋努力外，还需要培养自己的审美能力以及美术基础。下面是我学到一点经验。⑴在学习制作网页前应对网页制作的各类软件进行一些了解，有很多的软件不相兼容，或是在不同的版本上播放不出效果，所以选择自己使用的合适软件，很重要。⑵网页制作的学习应遵循由易到难的规则，先从简单的入手，再慢慢提升制作难度，以达到逐步提高网页制作能力的目的。⑶在学习过程中，不能一味地去学习理论知识，应将书本知识与实际操作相结合。这样既能加深对知识点的印象，也能提高学习的兴趣。⑷在学习时除了按书中提供的实例进行练习外，还应在该实例的基础上有自己的创意。⑸网页制作不能千篇一律地按一种固定的模式进行操作，应有独特的风格，这样才能体现出与众不同的魅力，以吸引浏览者，提高网页人气。⑹运用模板制作网页可提高制作速度与效率，这也是统一网页风格的一个快捷方便的途径，千万不可忽视模板的效用。⑺要善于借鉴别人的优点，取长补短，多上网浏览，将风格独特、别具匠心的网页保存下来。⑻要有好的审美眼光，在颜色的搭配，背景图片的放置问题上要认真。⑼团队合作的重要性，大家只有一起齐心协力，分工明确，各尽其责，才能很快的做完，但华北科技学院计算机学院综合性实验报告第7页同时也要有包容，相互之间，有分歧，讨论来解决，不能一意孤行，一个好的网页设计需要大家的共同努力，需要一个好的团队。教师评价评定项目ABCD评定项目ABCD算法正确界面美观，布局合理程序结构合理操作熟练语法、语义正确解析完整实验结果正确文字流畅报告规范题解正确其他：评价教师签名：年月日