九寨沟旅游网站的设计报告_第1页
九寨沟旅游网站的设计报告_第2页
九寨沟旅游网站的设计报告_第3页
九寨沟旅游网站的设计报告_第4页
九寨沟旅游网站的设计报告_第5页
已阅读5页，还剩6页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、九寨沟旅游网站的设计报告一、介绍超链接是网页中最活泼、 最有吸引力的一种元素。 表单用于特殊 的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在 许多工作中有着广泛的应用。框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的 Web页面，使用Wet页面显示一 致的用户界面和灵活的页面内容。 网页制作的高级技术包括： 在网页 中插入FLASH动画，JavaScript制作网页的动态效果。网页中使用 插件，以及创建、发布和管理站点等技术。Web页面往往是具有各种 各样的页面元素、 丰富的内容和复杂的布局。 因此仅仅使用到一种或 者两种网页制作技术，不可能创作出一个优秀的

2、Wet页面，一个美观 而实用的Web页面往往需要综合利用各种技术。二、概述1. 网站名称：“九寨沟旅游网站”2. 步骤：(1) 确立主题(2) 收集资料(3) 创建网站(4) 编辑网页(5) 美化网页三、目的运用已经掌握的知识完成一个网站。 通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweavei制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。四、要求有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。五、设计工具Dreamweaver Flash、fireworks、Photoshop 等。六、站点构思

3、1.整体构思：本网站主题为：九寨沟旅游景点。总共有网页22个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及Flash动画, 本站几个主要分网页分别为：网站首页、九寨文化、景点聚焦、精品 旅游、版权声明、联系方式。还有许多子网页。3、页面构思下面介绍一下网站中的几个网页的制作。九寨文化中的九寨简介页面， 背景色采用跟主页一样的白色， 白 色的背景可以给人朴实、淡雅、干净的感觉，无疑是最好的选择，与 环保网站的主旨相一致。上方为 Flash 动画与链接页，左下方是用 Photoshop 处理过的图片，与主页是一致的。右边的标题是用 Photoshop 制作的图片，这样制作丰富了页面内

4、容，使整个页面条理 清晰。最后的“相关传说”标题，即可以链接到九寨简介页面。景点聚焦页面，背景色与 Flash 动画，链接页与主页保持一致。 这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为蓝色。表格宽度与 Flash 宽度一致。整个页面清晰有致，比较大方，浏 览者可以清楚的看到九寨沟所有有名景点。联系方式页面， 左下方的图片与右边的标题都是用 Photoshop 制 作的，在联系方式中还添加了一个 outlook express 电子邮件，方便 用户与公司的联系，用户可以直接点击给公司发送邮件。 outlook express 作为全球范围内的联机通讯软件，已经被越来越多的人所接

5、受，无论是与同事和朋友交换电子邮件， 还是加入新闻组进行思想与 信息的交流， Outlook Express 都已成为不可或缺的助手。所有页面 整齐划一，设计风格保持一致，加上白色的背景，给人朴实、淡雅、 干净、简洁、明了、大方的感觉。六、 所用各技术的特点I.Dreamweaver : Dreamweaver 是美国 MACROMED公司开发的集网页制作和管理网站于一身的网页编辑器， 它是第一套针对专业网页设 计师特别发展的视觉化网页开发工具， 利用它可以轻而易举地制作出 跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器， 其代码简洁、 兼容性

6、和整体功能都很 强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简 便。Dreamweave啲主要特点：最佳的制作效率、网站管理、无可比 拟的控制能力、所供即所得、可以制作模版、全方位的呈现 2.FlashMX: Macromedia 公司出品的 Flash 是制作网页动画的利器。 Flash是网络多媒体制作工具而不是网页编辑工具。Flash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它 制作出美观的网页动画。 可以让制作者随心所欲地实现各种创意， 并 且可以和 JavaScript 一起创作出具有强大交互性的网页动画。Flash 是一种绘制矢量图形和

7、创作互动多媒体动画的软件。它可 以用少量的矢量数据就可以描述相当复杂的对象， 所以生成的文件尺 寸小，便于在网上传输。 Flash 创建的动画集可以插入到 html 文档 中，也可以单独制作网页。使网页的效果更加完美。七、网页制作的优缺点比较明确， 风格统一。 并运用了一些其它的设计软件加以辅助设 计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量 运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚 接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。八、部分源代码首页源代码<html><head><meta http-equiv=&q

8、uot;Content-Type" content="text/html; charset=gb2312" /><title> 九寨沟旅游 </title></style><script type="text/JavaScript"><!-function MM_swapImgRestore() /v3.0var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=ai)&&x.oSrc;

9、i+) x.src=x.oSrc; function MM_preloadImages() /v3.0var d=document; if(d.images) if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i+)if (ai.indexOf("#")!=0) d.MM_pj=new Image; d.MM_pj+.src=ai;function MM_findObj(n, d) /v4.01var p,i,x

10、; if(!d) d=document; if(p=n.indexOf("?")>0&&parent.frames.length) d=parent.framesn.substring(p+1).document; n=n.substring(0,p);if(!(x=dn)&&d.all) x=d.alln; for (i=0;!x&&i<d.forms.length;i+) x=d.formsin;for(i=0;!x&&d.layers&&i<d.layers.length

11、;i+) x=MM_findObj(n,d.layersi.document);if(!x && d.getElementById) x=d.getElementById(n); return x;function MM_swapImage() /v3.0Array;x.oSrc=x.src;var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new for(i=0;i<(a.length-2);i+=3)if (x=MM_findObj(ai)!=null)document.MM_srj+=x; if(!x.oSrc

12、) x.src=ai+2;function MM_CheckFlashVersion(reqVerStr,msg)with(navigator)var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") = -1);var isWin = (appVersion.toLowerCase().indexOf("win") != -1);if (!isIE | !isWin)var flashVer = -1;if (plugins

13、&& plugins.length > 0)var desc = plugins"Shockwave Flash" ? plugins"Shockwave Flash".description : "" desc = plugins"Shockwave Flash 2.0" ? plugins"Shockwave Flash 2.0".description :desc;if (desc = "") flashVer = -1;elsevar descA

14、rr = desc.split(" ");var tempArrMajor = descArr2.split(".");var verMajor = tempArrMajor0;descArr4.split("r");var tempArrMinor = (descArr3 != "") ? descArr3.split("var verMinor = (tempArrMinor1 > 0) ? tempArrMinor1 : 0;flashVer = parseFloat(verMajor + &

15、quot;." + verMinor);/ WebTV has Flash Player 4 or lower - too low for videoelse if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;var verArr = reqVerStr.split(",");var reqVer = parseFloat(verArr0 + "." + verArr2);if (flashVer < reqVer)if (confir

16、m(msg) window.location" /-></script><style type="text/css"><!- #Layer1 position:absolute; left:200px; top:561px; width:168px; height:256px; z-index:1;.STYLE1 font-size: 24pxa:hover color: #66FF00;a:hover color: #666600;a:hover color: #33FF00;.STYLE2 color: #FFFFFF.ST

17、YLE3 color: #000000;font-weight: bold;.STYLE4 color: #000000; #Layer2 position:absolute;left:166px;top:188px;width:1083px;height:310px;z-index:1;visibility: hidden;-></style></head><body bgcolor="#000000" onLoad="MM_preloadImages('image/qiepian/d4-1.jpg','

18、;image/qiepian/d2-1.jpg','image/qiepian/d 1-1.jpg','image/qiepian/d3-3.jpg','image/qiepian/x1_r2_c6.jpg','image/qiepian/d5.jpg','imag e/qiepian/d4.jpg','image/qiepian/d2.jpg','image/qiepian/d1.jpg','image/qiepian/d3.jpg');MM_ CheckF

19、lashVersion('7,0,19,0',' 本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在 下载它？ ');"><table width="1080" height="185" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="495"&g

20、t;<img src="image/qiepian/x1_r1_c1.jpg" width="495" height="160"></td><td width="117"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','image/qiepian/d4-1.jpg&#

21、39;,1)"></a><a href="index.html" target="_parent" onMouseOver="MM_swapImage('Image8','','image/qiepian/d5.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="image/qiepian/d5-1.jpg" name="Image8&quo

22、t; width="116" height="160" border="0"></a></td><td width="117"><a href="xx1/ 框 架 .html" target="_blank" onMouseOver="MM_swapImage('Image9','','image/qiepian/d4.jpg',1)" onMouseOut=&

23、quot;MM_swapImgRestore()"><img src="image/qiepian/d4-1.jpg" name="Image9" width="116" height="160" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8',

24、'','image/qiepian/d2-1.jpg',1)"></a></td><td width="117"><a href=" 景 点 聚 焦 .html" target="_parent" onMouseOver="MM_swapImage('Image10','','image/qiepian/d2.jpg',1)" onMouseOut="MM_swapIm

25、gRestore()"><img src="image/qiepian/d2-1.jpg" name="Image10" width="116" height="160" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','',&#

26、39;image/qiepian/d1-1.jpg',1)"></a></td><tdwidth="117"><ahref=" 路 线 .html"onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('Image11','','image/qiepian/d1.jpg',1)"><img src="image/qiep

27、ian/d1-1.jpg" name="Image11" width="116" height="160" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','image/qiepian/d3-3.jpg',1)"><

28、/a></td><td width="117"><a href=" 版 权 .html" target="_blank" onMouseOver="MM_swapImage('Image12','','image/qiepian/d3.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="image/qiepian/d3-3.jpg"

29、; name="Image12" width="116" height="160" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','image/qiepian/x1_r2_c6.jpg',1)"></a></td

30、><td width="5"><img src="image/qiepian/x1_r2_c7.jpg" width="5" height="158"></td></tr><tr><td height="25" colspan="7" align="left" valign="middle"><table width="1080" b

31、order="0" cellpadding="0" cellspacing="0"><tr><td width="335" height="25"><img src="image/qiepian/22_r1_c1.png" width="335" height="25" align="absmiddle"></td><td width="715&q

32、uot; background="image/qiepian/22_r1_c2.png"><marquee scrollamount="3" id="scrollared" onMouseOver="scrollared.stop()" onMouseOut="scrollared.start()" loop="-1">九寨沟位于四川省阿坝藏族羌族自治州 九寨沟县境内，是白水沟上游白河的支沟，以有九个藏族村寨(所 以又称何药九寨)而得名。九寨沟海拔在 2 千

33、米以上，遍布原始森林，沟内分布一百零八个湖泊，有“童 话世界”之誉；九寨沟为全国重点风景名胜区，并被列入世界遗产名录。2007年 5月 8日，阿坝藏族羌族自治州九寨沟旅游景区经国家旅游局正式批准为国家 5A 级旅游景区。 </marquee></td><td width="35"><img src="image/qiepian/22_r1_c3.png" width="35" height="25"></td></tr></table&g

34、t;</td></tr></table><table width="1080" height="933" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td colspan="5" align="center"><object classid="clsid:D27CDB6

35、E-AE6D-11cf-96B8-444553540000" codebase=" 9,0" width="1080" height="300" align="texttop"><param name="movie" value="flash/shui.swf"><param name="quality" value="high"><embed src="flash/shui.sw

36、f" width="1080" height="300" align="texttop" quality="high" pluginspage=" type="application/x-shockwave-flash"></embed></object></td></tr><tr><td height="5" colspan="5"><img src=

37、"image/qiepian/33.png" width="1080" height="5"></td></tr><tr><td colspan="2" background="image/sc11.jpg"><table width="181" height="233" border="0" align="center" cellpadding="

38、;0" cellspacing="0"><tr><td align="center"><h1> 友情链接 </h1><hr></p></td></tr><tr><td align="center"><a href=" target="_blank" class="STYLE1"> 青旅旅游网 </a></td><

39、;/tr><tr><td align="center"><a href=" target="_blank" class="STYLE1"> 四川旅游网 </a></td></tr><tr><td align="center"><a href="http:/www.dreams- target="_blank" class="STYLE1"> 海

40、道旅游网 </a></td></tr><tr><td align="center"><a href=" target="_blank" class="STYLE1">悠哉旅游网 </a></td></tr><tr><td align="center"><a href=" target="_blank" class="STYLE1&

41、quot;>欣欣旅游网 </a></td></tr><tr><td align="center"><a href=" target="_blank" class="STYLE1"> 云南旅游网 </a></td></tr></table></td><td colspan="3"><object classid="clsid:D27CDB6E-

42、AE6D-11cf-96B8-444553540000" codebase=" ,0" width="750" height="422" id="FLVPlayer"><param name="movie" value="FLVPlayer_Progressive.swf" /><param name="salign" value="lt" /><param name="quali

43、ty" value="high" /><param name="scale" value="noscale" /><param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/3d&autoPlay=true&autoRewind=true" /><embed src="FLVP

44、layer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/3d&autoPlay=true&a utoRewind=true" quality="high" scale="noscale" width="750" height="422" name="FLVPlayer" salign=&quo

45、t;LT" type="application/x-shockwave-flash" pluginspage=" /></object></td></tr><tr><td colspan="4" align="center"><table width="1079" border="0" cellpadding="0" cellspacing="0"><tr><td width="395"><img src="image/qiepian/qqq3_r1_c1.png" width="395" height="25"></td><td width="624

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论