九寨沟旅游网站的设计报告
一、介绍
超链接是网页中最活泼、最有吸引力的一种元素。表单用于特殊的信息，使用户和网站进行交互，使你找到用户的详细信息。表格在许多工作中有着广泛的应用。框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面内容。网页制作的高级技术包括：在网页中插入FLASH动画，JavaScript制作网页的动态效果。网页中使用插件，以及创建、发布和管理站点等技术。Web页面往往是具有各种各样的页面元素、丰富的内容和复杂的布局。因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。
二、概述
1. 网站名称：“九寨沟旅游网站”
2. 步骤：
(1) 确立主题
(2) 收集资料
(3) 创建网站
(4) 编辑网页
(5) 美化网页
三、目的
运用已经掌握的知识完成一个网站。通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。
四、要求
有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。
五、设计工具
Dreamweaver、Flash、fireworks、Photoshop等。
六、站点构思
1.整体构思：
本网站主题为：九寨沟旅游景点。总共有网页22个。主页是一个总目录的网页，里面加有网页动画效果“滚动字幕”及Flash动画，本站几个主要分网页分别为：网站首页、九寨文化、景点聚焦、精品旅游、版权声明、联系方式。还有许多子网页。
2、功能设计图设计：
3、页面构思
下面介绍一下网站中的几个网页的制作。
九寨文化中的九寨简介页面，背景色采用跟主页一样的白色，白色的背景可以给人朴实、淡雅、干净的感觉，无疑是最好的选择，与环保网站的主旨相一致。上方为Flash动画与链接页，左下方是用Photoshop处理过的图片，与主页是一致的。右边的标题是用Photoshop制作的图片，这样制作丰富了页面内容，使整个页面条理清晰。最后的“相关传说”标题，即可以链接到九寨简介页面。
景点聚焦页面，背景色与Flash动画，链接页与主页保持一致。这一页的主要内容是用表格形式来固定的，边框设置为1，颜色为蓝色。表格宽度与Flash宽度一致。整个页面清晰有致，比较大方，浏览者可以清楚的看到九寨沟所有有名景点。
联系方式页面，左下方的图片与右边的标题都是用Photoshop制作的，在联系方式中还添加了一个outlook express电子邮件，方便用户与公司的联系，用户可以直接点击给公司发送邮件。outlook express作为全球范围内的联机通讯软件，已经被越来越多的人所接受，无论是与同事和朋友交换电子邮件，还是加入新闻组进行思想与信息的交流，Outlook Express都已成为不可或缺的助手。所有页面整齐划一，设计风格保持一致，加上白色的背景，给人朴实、淡雅、干净、简洁、明了、大方的感觉。
六、 所用各技术的特点
1.Dreamweaver : Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。
Dreamweaver的主要特点：最佳的制作效率、网站管理、无可比拟的控制能力、所供即所得、可以制作模版、全方位的呈现
2.FlashMX: Macromedia公司出品的Flash是制作网页动画的利器。F1ash是网络多媒体制作工具而不是网页编辑工具。F1ash是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和JavaScript一起创作出具有强大交互性的网页动画。
Flash是一种绘制矢量图形和创作互动多媒体动画的软件。它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。Flash创建的动画集可以插入到html文档中，也可以单独制作网页。使网页的效果更加完美。
七、 网页制作的优缺点
比较明确，风格统一。并运用了一些其它的设计软件加以辅助设计。使网页更加具有动感，形式丰富。就内容而言，比较丰富。大量运用了图片，并进行了文字说明，做到了图文并茂。但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。
八、部分源代码
首页源代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>九寨沟旅游</title>
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var 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 (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+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 && 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;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
//-->
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:200px;
top:561px;
width:168px;
height:256px;
z-index:1;
}
.STYLE1 {font-size: 24px}
a:hover {
color: #66FF00;
}
a:hover {
color: #666600;
}
a:hover {
color: #33FF00;
}
.STYLE2 {color: #FFFFFF}
.STYLE3 {
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','image/qiepian/d2-1.jpg','image/qiepian/d1-1.jpg','image/qiepian/d3-3.jpg','image/qiepian/x1_r2_c6.jpg','image/qiepian/d5.jpg','image/qiepian/d4.jpg','image/qiepian/d2.jpg','image/qiepian/d1.jpg','image/qiepian/d3.jpg');MM_CheckFlashVersion('7,0,19,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<table width="1080" height="185" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="495"><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',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" 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="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','','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_swapImgRestore()"><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','','image/qiepian/d1-1.jpg',1)"></a></td>
<td width="117"><a href="路线.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','image/qiepian/d1.jpg',1)"><img src="image/qiepian/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)"></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" 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>
<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" border="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" background="image/qiepian/22_r1_c2.png"><marquee scrollamount="3" id="scrollared" onMouseOver="scrollared.stop()" onMouseOut="scrollared.start()" loop="-1">九寨沟位于四川省阿坝藏族羌族自治州 九寨沟县境内，是白水沟上游白河的支沟，以有九个藏族村寨（所以又称何药九寨）而得名。九寨沟海拔在2千米以上，遍布原始森林，沟内分布一百零八个湖泊，有“童话世界”之誉；九寨沟为全国重点风景名胜区，并被列入世界遗产名录。20##年5月8日，阿坝藏族羌族自治州九寨沟旅游景区经国家旅游局正式批准为国家5A级旅游景区。</marquee></td>
<td width="35"><img src="image/qiepian/22_r1_c3.png" width="35" height="25"></td>
</tr>
</table></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:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1080" height="300" align="texttop">
<param name="movie" value="flash/shui.swf">
<param name="quality" value="high">
<embed src="flash/shui.swf" width="1080" height="300" align="texttop" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
<tr>
<td height="5" colspan="5"><img src="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="0" cellspacing="0">
<tr>
<td align="center"><h1>友情链接</h1>
<hr></p></td>
</tr>
<tr>
<td align="center"><a href="http://www.schow.cn/?bdclkid=gZ__JalFypvv7GqcMmhgVHtYH8PK0gscPidWwbKva6vP" target="_blank" class="STYLE1">青旅旅游网</a></td>
</tr>
<tr>
<td align="center"><a href="http://www.57go.com/jiuzhaigou/jingdian.html" target="_blank" class="STYLE1">四川旅游网</a></td>
</tr>
<tr>
<td align="center"><a href="http://www.dreams-travel.com/abroad/seaisland/" target="_blank" class="STYLE1">海道旅游网</a></td>
</tr>
<tr>
<td align="center"><a href="http://www.uzai.com/" target="_blank" class="STYLE1">悠哉旅游网</a></td>
</tr>
<tr>
<td align="center"><a href="http://www.cncn.com/" target="_blank" class="STYLE1">欣欣旅游网</a></td>
</tr>
<tr>
<td align="center"><a href="http://www.17yny.com/?bdclkid=rs4_JKkAmjTv7GBMMmhgVHfylfuK0gseh2kfS-4RG_jP" target="_blank" class="STYLE1">云南旅游网</a></td>
</tr>
</table></td>
<td colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="750" height="422" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" 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="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/3d&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="750" height="422" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</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" background="image/qiepian/qqq3_r1_c2.png">
<marquee scrollamount="3" id="scrollared" onMouseOver="scrollared.stop()" onMouseOut="scrollared.start()" loop="-1">
<font color="#000000">九寨沟蓝天、白云、雪山、森林、尽融于瀑、河、滩、缀成一串串宛若从天而降的珍珠；篝火、烤羊、锅庄和古老而美丽的传说，展现出藏羌人热情强悍的民族风情。九寨沟，一个五彩斑斓、绚丽奇绝的瑶池玉。</font></marquee>
</td>
<td width="60"><img src="image/qiepian/qqq3_r1_c3.png" width="59" height="25"></td>
</tr>
</table> </td>
<td width="7" rowspan="2"> </td>
</tr>
<tr>
<td colspan="4" align="center" bgcolor="#66FF00"><h1 class="STYLE2"> </h1>
<h1 class="STYLE2"><span class="STYLE3">贵州商业高等专科学校</span></h1>
<h4 class="STYLE4">计算机应用技术09-1班</h4>
<p><a href="http://www.honer.tk/" target="_blank">www.honer.tk</a></p>
<p> </p></td>
</tr>
<tr>
<td width="314"> </td>
<td width="15"> </td>
<td width="474"> </td>
<td width="276"> </td>
<td> </td>
</tr>
</table>
<p> </p>
<bgsound src=music/bg.mp3>
</body>
</html>