ASP网站设计论文2

PAGEPAGEIIPAGE3旅游网站的开发与设计摘要在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。给客户发最新产品介绍，发样品等等资料。你现在还在用传真或给客户邮寄吗？公司新货上市了，想第一时间通知到所有卖家，电话一一通知吗？显然这些都是不行的网络就可以帮您简单快捷的实现。您只需通过邮件或聊天工具就可发送资料，只要几秒钟。新货上市，您只需将货品展现在企业网站上，所有客户都可第一时间看到，不管这个人在大洋彼岸还是亚洲或非洲的某个角落。做生意——效率就是我们的竞争优势。本文以“企业商业网站的设计与制作”为主题，运用了网页三剑客（Dreamweaver、Fireworks、Flash）及Photoshop等工具，收集了大量与网页设计有关的素材进行设计，并使用了超链接、框架、代码等网页设计技巧。人们也越来越依赖于网络上的信息，要想让更多的人了解你的企业，了解你的产品，扩大你的市场范围和份额，你必须了解和使用网络。关键词：Internet；企业商业网站；网页三剑客目录前言 1第1章 方案论证 21.1开发的意义和目的 21.2网页设计工具介绍 21.2.1FLASH概述 21.2.2Dreamweaver概述 31.2.3Fireworks概述 3第2章网站总体设计 42.1网站设计的基本步骤 42.2旅游网站的构思 42.3旅游网站模块结构 5第3章网站的具体设计 63.1网站首页的制作 63.2主页的制作 63.2.1动画的设计 73.2.2导航条的制作 73.2.3版权区设置 83.3各二级页面的设计 83.3.1短途休闲的制作 83.3.2长途度假的制作 93.3.3饮食天地的制作 103.3.4特别推荐的设计 113.4背景音乐设置 12第4章超链接设置以及调试运行 134.1超链接的设置 134.2调试运行 13结论 15致谢 16参考文献 17建东职业技术学院毕业设计（论文）PAGE2建东职业技术学院毕业设计（论文）PAGE1前言在经济飞速发展的今天，网络技术已成为丰富人们生活，拓展人类能力的创造性工具。网络及其应用也通过各种方式，融入到我国各行各业中。人们获取信息的方式越来越倾向于各类网站。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。Internet是一个信息的海洋，通过它您可以得到无穷无尽的信息，其中有不同类型的书库和信息资料，网络还可以提供政府、学校和公司等机构的详细信息和各种不同的社会信息，这写信息包罗万象，几乎无所不有。因此网站建设在Internet应用上的地位显而可见。阿里巴巴创始人马云说：21世纪，要么电子商务，要么无商可务。电子商务真的如此必要，迫在眉睫吗？我们一起来谈谈为什么要做电子商务？做电子商务能给我们带来什么看得见的好处？无非就是网络宣传，网络下单，那么网站就是您企业在网络的第一张名片。对于制作企业商业网页来说，要展示您的商品，关键就在于如何布置网站的内容。本文从课题的设计出发，探索如何建立好一个静态的商业网站。文中涉及到很多网页设计的具体方法和步骤，另外还介绍了部分网页设计的技巧及其运用。由于对网站的设计还无法达到驾轻就熟，所以制作的效果还有很多的不足，望大家多多提议。建东职业技术学院毕业设计（论文）PAGE12前言PAGE1方案论证1.1开发的意义和目的阿里巴巴创始人马云说：21世纪，要么电子商务，要么无商可务。电子商务真的如此必要，迫在眉睫吗？做电子商务能给我们带来什么看得见的好处？无非就是网络宣传，网络下单，那么网站就是您企业在网络的第一张名片。全世界大约有十几亿人在访问互联网，其中中国就占大约3.6亿网民。不管你是做什么买卖的，不管你的市场在国内还是国外，还是全球，这绝对是一个庞大的数字。网民不仅人多，更是最具商务潜力的人群。。做生意当中的许多周折无非就是跟他人取得联系并建立关系。精明的商人都知道，重要的不是你知道什么，而是你认识谁。每逢佳会，大家都要互递名片，而偶然的会见有时能谈成大宗交易——这种事儿每个商人都能讲出几件来。那么，如果你向几千个，甚至几百万个潜在客户和合作伙伴递出名片，并说这就是我所从事的工作，如果你需要我的服务，可以通过它跟我联系，这样将会产生何等效果也就可想而知了。你的合作伙伴，在网上可以清晰知道你是干什么的做什么产品并可以非常迅速的找到你。在网络上，你每天24小时都可以这样做。企业要发展，广告、公关必不可少，这个您必须认同。报纸豆腐干广告一天少则几千，多则上万。户外广告，高速广告一年数十万还不一定有效果。而网络一年只要几千，却获得无限生意机会。拿辰忆设计零元建站服务来说，一个月只收取380元的网站托管费用，企业一旦上了网，您不仅能获得买家采购信息，您更可以将自己公司和产品信息发布到互联网，买家随时可以找到您。最少的花费，却比任何营销手段都快捷、简便和经济。客户一般是不会积极主动地向公司反馈信息的。如公司在设计网站时，加入专门用于客户与公司联系的电子邮件和电子表格，由于使用极其方便。一般客户还是比较乐于使用这种方式与公司进行联系。因此，公司可以得到大量的客户意见和建议。来改善自己的产品不足和对客服服务的不周全。1.2网页设计工具网页三剑客网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Firework，Flash三个软件组成，俗称三剑客。之所以称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，式：利用Flash动画，可以生成Flash特有的.swf格式文件，它也能转换导出其他格式的式：利用Flash动画，可以生成Flash特有的.swf格式文件，它也能转换导出其他格式的媒体文件。图像或图像序列格式媒体文件。图像或图像序列格通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；较为流行的一种是在Fireworks中做好主要页面，然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。1.2.1FLASH概述Flash是美国Macromedia公司所设计的二维动画软件，全称MacromediaFlash（被Adobe公司收购后称为AdobeFlash），主要用于设计和编辑Flash文档。附带的MacromediaFlashPlayer，用于播放Flash文档。现在，Flash已经被Adobe公司购买，最新版本为：AdobeFlashCS5，播放器也更名为AdobeFlashPlayer。1.2.2Dreamweaver概述Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。1.2.3Fireworks概述AdobeFireworks可以加速Web设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库,并可与AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver和AdobeFlash软件省时集成。在Fireworks中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和Flash的其它资源。然后直接置入Dreamweaver中轻松地进行开发与部署。建东职业技术学院（论文）第2章网站总体设计2.1网站设计的基本步骤第一步是主页,它起到的是标题和目录的作用。主页的设计非常重要，它给人公司的第一印象，因此代表的是企业的形象，网站整体性能的高低。主页要在文件小、下载速度快、信息含量大的基础上，力求美观大方，主题鲜明，给人赏心悦目、一目了然的感觉，这样才能满足客户的各种需求，激起客户的兴趣，对网站进行进一步的访问。第二步是信息采集与整理，主要是与网站主题相关的各类文字，图像或信息，在用一些动画和按钮来制作网页的点缀。第三步定网页界面，主要由排版、目录结构和链接结构，是网站看起来清晰有条。第四步确定网站的风格，主要包括CI、版面布局、浏览方式、交换性、文字等风格。我对企业商务网站的主要风格运用白色，让网页给客户简洁,典雅，大气的感觉。2.2企业商务网站的构思我首先运用FLASH动画做标题栏，然后使用Fireworks制作按钮，将主页的字运用超链接到个子页面。然后超链接分别连接各自的二级页面上。然后运用模板工具，将总的模块划分为6个小模块，分别是首页，公司简介，产品展示，现货资源，客户留言，联系我们，然后将这6个模块运用超链接做好子页面。网站的模块划分如下图：首页联系我们客户留言现货资源产品展示公司简介首页联系我们客户留言现货资源产品展示公司简介首页图2.2.12.3企业商务网站模块结构本网站以“网站设计与制作”为主题，综合运用网页三剑客及Photoshop等工具，制作了一个共有15个网页的静态网站。站内分别制作了：公司简介，产品展示，现货资源，客户留言，联系我们等多个版块，并在主页中以横版导航形式呈现出来。下面分别介绍几个主要版块的设计思想和主要内容：（1）主页：主页通常会有整个网站的导航目录。在标题栏上我会运用Flash在制作一个动画，来引导主题，然后运用超链接来制作导航条，划分出二级页面的内容，可以通过超链接链接到各个页面。（2）公司简介：我主要用dreamweaver的模板工具把主页我需要的地方制成一个模板，然后用框架结构来超链接多个适合短途休闲的地方。其中我运用到背景图片的设计然后点击左边的框架主题就能浏览到具体介绍的页面。主要选到了乌镇、天目湖、千岛湖、狮子林、溱湖等几个热点风景区，运用代码添加背景音乐。（3）长途度假：长途度假我依然选择运用框架结构来设计，标题栏运用flash来制作动画，我觉得选择框架既简单又能更加清晰的给游客一种一目了然的感觉。主要选了九寨沟、日月潭、天池、海南岛等几个地区，以超连接的方式连接到main页面中。运用代码添加背景音乐。(4)饮食天地：旅游的游客享受美食是一种必不可少的一部分，我同样运用框架结构，收集热地区的美食然后作出最好的介绍，主要选到了四川、日月潭、新疆美食、天目湖等地区，标题栏依旧运用flash动画来制作，然后页面索性里添加背景以及在代码中添加背景音乐。（5）特别推荐：特别推荐是我给游客设计的推荐的几个比较有热点性的地方，其中我推荐了黄山，天目湖、先兵马俑三个地方，还是运用了框架的结构，在属性里面添加背景还有超链接。第3章网站的具体设计上一章中主要介绍了网站的总体规划和设计方向。在本章中将运用网页三剑客、Photoshop等工具对各板块进行具体设计与制作。3.1网站首页的制作主要运用Flash制作一个动画，然后做出古典画轴卷打开的效果，然后将景点一点一点的载入游客的眼中，能有种夺人眼球的效果，达到赏心悦目。制作过程：（1）运用Flash，先新建一个背景图层，选择背景颜色，然后将所选的图片导入舞台当中。再新建一个图层，插入关键帧画一个矩形跟舞台一样大，然后运用遮罩层来使图片有种打开的效果，然后新建图层，命名为左轴，画出画轴一样的矩形，然后选中画轴，选择编辑里面的直接复制，内容如图3.图3.1.1初始页面（2）然后新建图层三，命名为右轴，然后插入关键帧，插入复制好的矩形，然后运用补间动画使轴动起来。整个动画效果就形成了，最后加入音乐代码，具体代码内容如图3.1.2代码所示。图3.1.2声音代码3.2主页的制作制作主页：主页主要运用flash动画、fireworks制作的导航条，运用文字连接到二级网页。Flash的效果就是让“旅游”两个字在图面上滚动起来。然后运用fireworks来制作导航条，再运用声音添加背景音乐最后再制作内容栏的FLASH动画运行Flash软件。新建一个主场景大小调整为“800*600”的Flash文档。选择wenzi图层时间轴的第30帧后右击，在弹出的菜单中选择“转换为关键帧”菜单项。选择第1帧后右击，在弹出的菜单中选择“创建补间动画”菜单项，以45度角移动到刚出舞台的左上角，然后再新建一层输入第二帧，将第二章图片以从中间到两边放大的效果出现，运用补间形状在完成，再新建一层导入第三张图片，以旋转的形式来展示图片，运用补间动画制作。3.2.1动画的设计制作步骤：设计舞台的大小，然后导入选好的图片，在上面输入TT网，再新建一层输入文字“旅”，从第一帧到40帧之间分别插入四帧，没一帧都将字体旋转45度，然后每两帧之间运用补间动画，使字体转动起来。具体内容如图3.2.1所示。然后新建图层，输入文字游，运用同样的方法来制作“游”字滚动的效果。图3.2.1标题栏动画制作效果整个设计一共有四大模块，分别是“生活常识、科学文化、地理人文、娱乐趣事”。界面正中间分别点击后可进入每个模块里面的详细内容。再用Authorware创作一个交互式应用程序，当运行这个程序时，可以直接在屏幕上显示这一复杂的制作过程：运用图片演示运动方式；利用音乐声音显示动态感。通过多方位的表达，就会收到很好的使用效果。3.2.2导航条的制作运用fireworks来制作导航条，新建画布，然后编辑-新建按钮，在按钮画布里面画上圆角矩形，并且输入文字。运用fireworks来制作导航条：（1）新建舞台如然后编辑里面新建按钮，然后出现按钮舞台。再用矩形框画出想要图形的大小，然后运用输入工具写入“首页”然后制作“划过”、“按下”、“有效区域”等几个页面。在属性里面将链接、目标等属性里面填写，然后点击符合画布，这样一个Firework按钮就可以制作完成了，具体内容如图3.2.图3.2.（2）然后一次顺序制作“短途休闲”“长途度假”“饮食天地”“特别推荐”等几个按钮。（3）最后将制作好的动画和导航条放入Dreamweaver的表格中。如图3.2.3图3.2.33.2.3版权区设置版权的设计主要就是将我自己做的个人网页申明一个版权，然后加上联系方式以及版权拥有者的名字。如图3.2.4版权图所示。图3.2.43.3各二级页面的设计所谓二级页面的设计主要是对“短途休闲”、“长途度假”、“饮食天地”、“特别推荐”等几个页面，运用Flash、photoshop、Dreamweaver等工具进行设计。3.3.1短途休闲的制作短途休闲主要是运用Flash，Dreamweaver框架结构来制作。新建一个“上方固定，左侧嵌套”的框架集，单击“创建”按钮，完成创建。适当调整各框架的大小。打开“窗口”菜单栏下的“框架”面板。依次点击“topFrame”“leftFrame”“mainFrame”以及框架集部分，分别将各部分以“top.htm”“left.htm”“main.htm”“articles.htm”命名，保存在相应文件夹中。顶框架的制作，打开Flash工具，新建一舞台，并且调整好舞台的大小，然后将图片导入舞台，然后新建一图层，输入文字“短”然后插入关键帧，运用补间动画使其左右摆动，如图3-3-1所示：图3.3.1然后运用同样的方法制作出“游”“休”“闲”。主框架的制作添加背景图片，运用超链接将页面的字连接到具体的页面。最后将设计好的动画插入到框架，如图3.3.2（a）、（b）效果图所示：图3.3.2（a）框架效果图图3.3.2（b）框架效果图3.3.2长途度假的制作长途度假主要运用“上方固定，左侧嵌套”的框架集，单击“创建”按钮，完成创建。适当调整各框架的大小。打开“窗口”菜单栏下的“框架”面板。依次点击“topFrame”“leftFrame”“mainFrame”以及框架集部分，分别将各部分以“top.htm”“left.htm”“main.htm”“articles.htm”命名，保存在相应文件夹中。顶框架的制作，打开flash工具，新建舞台，调整好大小，然后导入图片，再新建一元件如图3.3.3新建元件所示。图3.3.3新建元件然后运用反射性填充色画出星星，然后在40帧上插入关键帧，在40帧上改变星星的大小，运用补间动画使星星闪烁起来。新建元件2，先延长五帧，然后插入关键帧，将元件1移到舞台的中，在40帧的地方插入关键帧，并延长5帧，运用补间动画，使星星闪烁。回到场景1，在图片上输入文字“长途度假”，将元件拖入舞台，这样星星闪烁的舞台就形成了。如图3.3.4所示。图3.3.4星星闪烁效果设计主框架，将天池，日月潭，九寨沟等地区运用超链接连接到三级页面上。然后点击就能在框架里面浏览到详细信息。最后将框架和所制作的动画来制作Dreamweaver长途旅行的效果图，具体内容如图3.3.5效果图所示。图3.3.5长途度假效果图3.3.3饮食天地的制作长途度假主要运用“上方固定，右侧嵌套”的框架集，单击“创建”按钮，完成创建。适当调整各框架的大小。打开“窗口”菜单栏下的“框架”面板。依次点击“topFrame”“leftFrame”“mainFrame”以及框架集部分，分别将各部分以“top.htm”“left.htm”“main.htm”“articles.htm”命名，保存在相应文件夹中。顶框架的制作，打开FLASH工具，打开Flash工具，新建一舞台，并且调整好舞台的大小，然后将图片导入舞台，然后新建一图层，输入文字美景，延长45帧，新建一图层，延长五帧，然后插入关键帧，输入美，然后在15帧和30帧处插入关键帧，在15出改变颜色的字体，然后运用补间动画，使字体改变颜色。图3.3.5然后再新建一层，在第15帧出插入关键帧，写上食，使用以上同样的方法使其颜色变动，具体内容如图3.3.5最后将框架和所制作的动画来制作Dreamweaver长途旅行的效果图，具体内容如图3.3.6效果图所示。图3.3.6美食美景效果图3.3.4特别推荐的设计特别推荐主要是运用“上方固定，右侧嵌套”的框架集，单击“创建”按钮，完成创建。适当调整各框架的大小。打开“窗口”菜单栏下的“框架”面板。依次点击“topFrame”“leftFrame”“mainFrame”以及框架集部分，分别将各部分以“top.htm”“left.htm”“main.htm”“articles.htm”命名，保存在相应文件夹中。顶框架的制作打开flash工具，新建一舞台，调整好大小，然后导入图片，然后输入“推荐”两个字，新建一图层，插入关键帧，输入“特”字。在40帧处插入关键帧，将字体移动位置，再延长20帧，使“特”字在图片上运动。新建一层，运用同样的方法制作“别”字。主框架的设计，运用超链接连接到详细的网页页面上，如图3.3.7所示。图3.3.7最后将框架和所制作的动画来制作Dreamweaver长途旅行的效果图，具体内容如图3.3.8效果图所示。图3.3.8特别推荐效果图3.4背景音乐设置将二级页面设计音乐特效，找到<body>,在其后插入以下代码：<body><bgsoundsrc="../music/p6.mp3"loop="1"/>运用代码插入音乐，使游客游览网页时有种身临其境的感觉。PAGE15第4章超链接设置以及调试运行4.1超链接的设置Dreamweaver制作主要是运用超链接实现的，将首页链接到子页面上来。如果是运用框架的话，最注重的是目标的链接。具体内容如图4.1.1图4.1.1一般网页的超链接都是运用属性里面的链接实现的，直接的链接到想转到的那个页面上，这样就可以设置好网页的跳转链接。主要的是运用框架的链接，依次点击“topFrame”“leftFrame”“mainFrame”要将left里面的内容在main里面显示出来，那么就得在链接目标中链接main这个目标，这样点击left里面的内容连接好以后会在main里面运行。如图4.1.2图4.1.2超链接设置最后在制作网页的时候要清晰的标明所制作网页的名称，以便在运用超链接的时候能够快速、清晰的链接。4.2调试运行作品完成之后，我进行调试的时候也出了很多错误，一开始只知道页面链接以后网页就可以了，可以跳转就行了，但是其中页面的丰满性是非常重要的，让我遇到最重要的问题就是页面的排版和色彩的调配，第一次给老师看的时候，老师说我的页面有点奇怪，就是色彩上不搭配。但是后我找人帮忙，再加上老师的点评，作品稍微有点起色了。在调试的过程中可以将作品进行进一步的美观。有不足的地方还可以修改，虽然早制作的过程中觉得已经布置的井井有条，没有一点空隙，没有一点参差不齐，可是在运行的时候就是那里多一快，这里有一快白的啊，所以在调试的过程修改的东西还是很多的。在制作的过程运用到框架的地方总是有点问题，在链接的时候没有把目标选好，主要是链接到mainFrame当中，这样在点击左栏的内容是，内容栏就会打开所链接的网页。在首页制作当中，由于我用Flash制作的古典的画轴打开的，在制作的时候有画布底纹，将Flash插入Dreamweaver里运行的时候后面总有底纹颜色在图片上，看不到图片的颜色，经过老师的教导知道了在参数中给到当中的参数。如图4.2图4.2.再次运行的时候画轴下面的底纹就没有了。在调试慢慢修改中网页逐步完成了。建东职业技术学院毕业设计（论文）结论毕业设计即将在本周结束，经过近两个月的努力，终于得以完成，心里十分欣喜。虽然不是太完善，但是这是自己精心努力的成果，自己第一次制作的网站，觉得很有意义。本文以“企业商业网站的设计与制作”为课题，主要围绕现代人们的旅游方向和人们需要所设计的，主要设为首页，公司简介，产品展示，现货资源，客户留言，联系我们等几个方面。在老师的细心指导以及多方书籍的考查下，综合运用网页三剑客和Photoshop等工具设计出了一个共有15张网页的精美网站。站内更设有多个版块供浏览者访问。通过本次毕业设计的制作，我了解到网站设计越来越接近一门艺术而不仅仅是一门技术。网站设计的优与劣主要在于网站设计者对网站总体内容的把握、设计方向、各版块的联系等等。资料了解以后我总结到：一个企业商业网站主要分为三部分：1,设计规划站点2，收集材料3，制作站点。从老师介绍的网页三剑客的书中和平时学习的过程中知道一个优美而又有主题的站点可以从站点的主题，站点的风格，使用对象，站点内容，实现手段等几个方面进行考。在这次制作的过程比较占优势的就是现在我们正好学习FLASH、PS这两门工具，正好能体现现学现用，在制作动画，画轴开展等一系列的都觉得不是太难，但是在制作按钮的时候就遇到一些问题了，本想添加FLASH按钮的，可是由于文件名出错，不可以用，于是书上介绍运用Fireworks制作按钮，这对我来说可能也是自学能力的挑战，Fireworks在课程中是没有教过的，然后我按照书上的步骤制作了按钮，虽然不是很好看，但基本功能能实现了，让我感到有点喜悦。在设计过程中，我通过查阅有关书籍，与同学交流和自学，使自己学到了不少知识，也经历看了不少艰辛，但收获同样巨大。在整个设计中我懂得了许多东西，也培养了我独立工作的能力，树立了对自己工作能力的信心，相信会对今后的学习工作生活有非常重要的影响。而且大大提高了动手的能力，使我充分体会到了在创造过程中探索的艰辛和成功的喜悦。虽然这个设计做的也不太好，但是在设计过程中所