资源描述
《web开发技术》课程设计
学 院： 工学院
专 业： 软件工程
班 级： 1401
姓 名： 兰欣
学 号： 011029
指导老师： 姬广永
12月31日
工学院课程设计评审表
学生姓名
兰欣
专业
软件工程
年级
学号
设计题目
新疆行旅游网站
评价内容
评价指标
评分
权值
评定
成绩
业务水平（含答辩）
有扎实基础理论知识和专业技能；能够综合利用所学HTML、CSS、JavaScript等知识和Dreamweaver开发工具进行WEB站点计划、设计和制作；能够依据网站计划，搜集、整理相关素材；独立进行试验工作，学会调试、公布、管理网站，并能利用所学知识和技能去发觉和处理实际问题；主页版面内容、结构和链接设计清楚合理；考虑页面整体布局、视觉效果、页面尺寸和框架等原因，保持网站整体设计风格一致。
40
课程设计汇报(设计说明书)质量
综述简练完整；结论严谨合理；试验正确，分析处理科学；文字通顺，技术用语正确，符号统一，编号齐全，书写工整规范，图表完备、整齐、正确；结果有应用价值；工作中有创新意识；对前人工作有改善或突破，或有独特见解。
30
工作量、
工作态度
按期完成要求任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实
30
累计
100
指导老师评语
设计题目：新疆行旅游网站
指 导
老 师
姬广永
参 加
学 生
兰欣
设 计
目
综合利用所学HTML及CSS、JavaScript等知识，使用Dreamweaver编辑网页，Flash 设计动画，Photoshop或FireWorks处理图形，制作出专题鲜明、结构清楚、图文并茂、含有专业水平网站。
设 计
内 容
1、确定所要制作网站类型、专题、规模和要使用技术。
2、计划网站栏目、风格，画出站点计划层次图，建立站点目录。
3、依据网站计划，搜集、整理相关素材。
4、对网站用到文本、图片、动画等多媒体素材进行处理。
5、制作设计网站首页、二级页面、三级页面。
6、主页版面内容、结构和链接设计要清楚，醒目。
7、考虑页面整体布局、视觉效果、页面尺寸和框架等原因，保持网站整体设计风格一致。
8、网站调试：网站各个页面完成后，对站点进行调试。
9、网站公布：网站建设好后，公布到网站服务器。
设 计
要 求
《web开发技术》课程设计要求学生所制作网站，标准上一人一题。
确需团体合作方能完成大型或较为复杂网站，可由多人进行共同合作开发，通常最多不超出3人，但需在课程设计汇报中写明分工，明确每名学生应独立完成任务，而且课程设计汇报关键介绍自己所做内容，和同组学生课程设计汇报70%以上不一样，使每名学生全部受到较全方面训练。
《web开发技术》课程设计任务书
新疆行网站设计
1设计目标
伴随中国经济快速发展，大家生活水平有了显著提升，假日经济和旅游经济已成为大家消费热点。各地也把旅游业看成当地经济发展关键支柱之一，从而带动别经济产业快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺乏工具，它内容对于旅游胜地宣传和旅游地项目标开发决议起着很关键作用。新疆拥有丰富地域优势和民族民俗文化旅游资源，该网站经过首页、新疆介绍、风土人情、吃在新疆、路线选择五个页面，文字和图片搭配来介绍新疆旅游。
2网站计划
网站类型：旅游网站
网站专题：新疆行
网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。
使用技术：Html、Div、CSS、JavaScript、Photoshop
网站栏目：首页、新疆介绍、风土人情、吃在新疆、路线选择
网站结构示意图：
banner
导航条
3站点首页设计
首页采取导航在主视觉下方布局，导航放在banner下面好处是能够填补banner中设计素材截断缺点，让设计看上去完整、自然。在导航条下划分左中右三个内容区，分别用风景和简练文字来吸人眼球。在图片选择上，一是表现出新疆旅游景点特色，而是和主色调蓝色相呼应，是整体更协调。
网站主页效果图
首先在网上搜集大量图片和文档进行整理，对进行图像处理，并制作了部分图像，进行保留用于网页设计。用Div对页面进行布局，用CSS对页面进行控制，最终再添加超链接和特效。
主页源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新疆行</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<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;
}
</script>
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<script type="text/javascript" src="js/pptBox.js"></script>
</head>
<body>
<div id="container">
<div id="banner"><img src="images/banner.jpg"></div>
<div id="globallink">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">新疆介绍</a></li>
<li><a href="fengtu.html">风土人情</a></li>
<li><a href="eat.html">吃在新疆</a></li>
<li><a href="route.html">路线选择</a></li>
</ul>
<br>
</div>
<div id="left">
<div class="map">
<img src="images/map1.gif" width="190" height="150" ></a><br>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="images/tuijian1.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="images/tuijian2.jpg"></a></li>
<li><a href="#">吐鲁番</a></li>
<li><a href="#"><img src="images/tuijian3.jpg"></a></li>
<li><a href="#">天山天池</a></li>
</ul>
<br>
</div>
</div>
<div id="middle">
<!--begin -->
<div id="xxx" >
<script>
var box =new PPTBox();
box.width =390; //宽度
box.height = 260;//高度
box.autoplayer = 3;//自动播放间隔时间
//box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
box.add({"url":"images/1.jpg"})
box.add({"url":"images/2.jpg"})
box.add({"url":"images/3.jpg"})
box.add({"url":"images/4.jpg"})
box.show();
</script>
</div>
<!--end -->
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<marquee><ul>
<li><a href="#"><img src="images/beauty1.jpg"></a></li>
<li><a href="#"><img src="images/beauty2.jpg"></a></li>
<li><a href="#"><img src="images/beauty3.jpg"></a></li>
<li><a href="#"><img src="images/beauty4.jpg"></a></li>
</ul>
</marquee>
<br>
</div>
<div id="route">
<h3><span>线路精选</span></h3>
<ul>
<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
<li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
</ul>
<br>
</div>
</div>
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3>
<p><a href="#" title="点击看大图"><img src="images/fengguang1.jpg"></a></p>
<p><a href="#" title="点击看大图"><img src="images/fengguang2.jpg"></a></p>
</div>
<div id="food">
<h3><span>特色小吃</span></h3>
<ul>
<li><a href="#">烤羊肉串</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">抓饭</a></li>
<li><a href="#">酸奶疙瘩</a></li>
</ul>
<br>
</div>
<div id="life">
<h3><span>宾馆酒店</span></h3>
<ul>
<li><a href="#">天缘酒店</a></li>
<li><a href="#">海德酒店</a></li>
<li><a href="#">银全部大饭店</a></li>
<li><a href="#">鸿福大饭店</a></li>
<li><a href="#">友好大酒店</a></li>
<li><a href="#">南山庄园</a></li>
<li><a href="#">如家宾馆</a></li>
</ul>
<br>
</div>
</div>
<div id="footer">
<p>兰欣©版权全部</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS代码
@charset "utf-8";
body {
margin:0px;
padding:0px;
text-align:center;
font-size:12px;
background:#2286c6;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:780px;
text-align:left;
}
div br{
display:none;
}
#globallink{
margin:0px; padding:0px;
}
#globallink ul{
list-style:none;
padding:0px; margin:0px;
}
#globallink li{
float:left;
text-align:center;
width:156px;
}
#globallink a{
display:block;
padding:9px 6px 11px 6px;
background:url(../images/button1.jpg) no-repeat;
margin:0px;
}
#globallink a:link, #globallink a:visited{
color:#004a87;
text-decoration:underline;
}
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(../images/button1_bg.jpg) no-repeat;
}
#left{
float:left;
width:200px;
background-color:#FFFFFF;
margin:0px;
padding:0px 0px 5px 0px;
color:#d8ecff;
}
#left div{
background-color:#5ea6eb;
margin:0px 5px 0px 5px;
}
.map{
margin:0px 5px 0px 5px;
background-color:#5ea6eb;
}
#left div h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#bbddff url(../images/icon2.gif) no-repeat 5px 7px;
}
#today{
padding:0px 0px 10px 0px;
}
#today ul{
list-style:none;
margin:-5px 0px 0px 0px;
padding:0px;
}
#today ul li{
text-align:center;
}
#today ul li img{
border:1px solid #FFFFFF;
margin:8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#today ul li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#middle{
background-color:#FFFFFF;
margin:0px 0px 0px 2px;
padding:5px 0px 0px 0px;
width:400px; float:left;
}
#middle div{
margin-left:5px;
margin-right:5px;
position:relative;
}
#middle h3{
margin:0px; padding:0px;
height:41px;
}
#middle h3 span{
display:none; /* 文字去掉，换成图片 */
}
#beauty{
margin:15px 0px 0px 0px;
padding:0px;
}
#beauty h3{
background:url(../images/picture_h1.gif) no-repeat;
}
#beauty ul, #route ul{
list-style:none;
margin:8px 1px 0px 1px;
padding:0px;
}
#beauty ul li{
float:left;
width:97px;
text-align:center;
}
#beauty ul li img{
border:1px solid #4ab0ff;
}
#route{
clear:both; margin:0px;
padding:5px 0px 15px 0px;
}
#route h3{
background:url(../images/route_h1.gif) no-repeat;
}
#route ul li{
padding:3px 0px 0px 30px;
background:url(../images/icon1.gif) no-repeat 20px 7px;
}
#route ul li a:link, #route ul li a:visited{
color:#004e8a;
text-decoration:none;
}
#route ul li a:hover{
color:#000000;
text-decoration:underline;
}
#right{
float:left;
margin:0px 0px 1px 2px;
width:176px;
background-color:#FFFFFF;
color:#d8ecff;
}
#right div{
position:relative;
margin-left:5px;
margin-right:5px;
background-color:#5ea6eb;
}
#right div h3{
font-size:12px;
padding:4px 0px 2px 15px;
color:#003973;
margin:0px 0px 5px 0px;
background:#bbddff url(../images/icon2.gif) no-repeat 5px 7px;
}
#map{
margin-top:5px;
}
#map p{
text-align:center;
margin:0px;
padding:2px 0px 5px 0px;
}
#map p img{
border:1px solid #FFFFFF;
}
#food{
padding-top:10px;
}
#food ul, #life ul{
list-style:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li, #life ul li{
background:url(../images/icon1.gif) no-repeat 3px 9px;
padding:3px 0px 3px 12px;
border-bottom:1px dashed #EEEEEE;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
color:#d8ecff;
text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
color:#000000;
text-decoration:none;
}
#life{
padding-top:10px;
padding-bottom:5px;
margin-bottom:5px;
}
#footer{
background-color:#FFFFFF;
margin:1px 0px 0px 0px;
clear:both;
position:relative;
padding:1px 0px 1px 0px;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px 4px 5px;
background-color:#5ea6eb;
}
#footer p a{
color:#FFFFFF;
text-decoration:none;
}
#jianjie{
float:left;
padding:10px 10px 10px 10px;
width:560px;
background-color:#FFFFFF;
}
.font1{
font-size: 14px;
color: #000;
line-height: 18px;
text-indent: 2em;
font-weight: normal;
}
.font2{
font-size:18px;
font-weight:bold;
color:#000;
text-indent:2em;
}
.clear{ clear:both;}
.mainbox{
overflow:hidden;
position:relative;
}
.flashbox{
overflow:hidden;
position:relative;
}
.imagebox{
text-align:right;position:relative;z-index:999;
}
.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;}
.defimg{background-image:url(../images/02.png)}
.curimg{background-image:url(../images/01.png)}
JS代码
function PPTBox()
{
this.uid = PPTBoxHelper.getId();
PPTBoxHelper.instance[this.uid] = this;
this._$ = function(id){return document.getElementById(id);};
this.width = 390;//宽度
this.height = 260;//高度
this.picWidth = 15;//小图宽度
this.picHeight = 12;//小图高度
this.autoplayer = 4;//自动播放间隔（秒）
this.target = "_blank";
this._box = [];
this._curIndex = 0;
}
PPTBox.prototype =
{
_createMainBox : function (){
var flashBoxWidth = this.width * this._box.length + 5;
var html="<div id='"+this.uid+"_mainbox' class='mainbox' style='width:"+(this.width)+"px;height:"+(this.height+2)+"px;'>";
html += "<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'></div>";
html += "<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight+2)+"px;top:-"+(this.picHeight+20)+"px;'></div>";
html += "</div>";
document.write(html);
},
_init : function (){
var picstyle= "";
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var imageHTML="";
var flashbox = "";
for(var i=0;i<this._box.length;i++){
var parame = this._box[i];
flashbox += this.flashHTML(parame.url,this.width,this.height,i);
imageHTML ="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\" onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>" + imageHTML;
}
this._$(this.uid+"_flashbox").innerHTML = flashbox;
this._$(this.uid+"_imagebox").innerHTML = imageHTML;
},
_play : function(){
clearInterval(this._autoplay);
var idx = this._curIndex+1;
if(idx>=this._box.length){idx=0;}
this.changeIndex(idx);
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay = setInterval(eventstr,this.autoplayer*1000);
},
flashHTML : function(url,width,height,idx) {
var isFlash = url.substring(url.lastIndexOf('.')+1).toLowerCase()=="swf";
var html = "";
if(isFlash){
html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-' "
+ "codebase=',0,19,0' width='"+width+"' height='"+height+"'>"
+ "<param name=\"movie\" value=\""+url+"\" />"
+ "<param name='quality' value='high' />"
+ "<param name='wmode' value='transparent'>"
+ "<embed src='"+url+"' quality='high' wmode='opaque' pluginspage=''"
+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"
+" </object>";
} else {
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var style = "";
if(this._box[idx].href){
style = "cursor:pointer"
}
html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>";
}
return html;
},
changeIndex : function(idx){
var parame = this._box[idx];
moveElement(this.uid+"_flashbox",-(idx*this.width),1);
var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div");
imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg";
imgs[this._box.length-1-idx].className = "bitdiv curimg";
this._curIndex = idx;
},
mouseoverPic:function(idx){
this.changeIndex(idx);
if(this.autoplayer>0){
clearInterval(this._autoplay);
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay = setInterval(eventstr,this.autoplayer*1000);
}
},
clickPic:function(idx){
var parame = this._box[idx];
if(parame.href&¶me.href!=""){
window.open(parame.href,this.target);
}
},
add:function (imgParam){
this._box[this._box.length] = imgParam;
},
show : function () {
this._createMainBox();
this._init();
if(this.autoplayer>0){
var events
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
