web网页设计专业课程设计方案报告.doc

《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对页面进行控制，最终再添加超链接和特效。
主页源代码
//EN" "">

新疆行

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;</p><p style='padding:5px 0px;'>9、a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

src="images/map1.gif" width="190" height="150" >
ref="#">屯——乔尔玛——那拉提——巴音布鲁克rc="images/fengguang2.jpg">pan>宾馆酒店 x 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{
clearboth; 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="lass='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'> document.write(html);
},
_init : function (){
var picstyle= "";
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var imageHTML="";
var flashbox = "";
for(var i=0;i var parame = this._box[i];
flashbox += this.flashHTML(parame.url,this.width,this.height,i);
imageHTML ="\""+eventstr+".mouseoverPic("+i+")\"> 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 = "44、idth+"' height='"+height+"'>"
+ ""
+ ""
+ ""
+ "45、"
+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'>"
+" ";
} else {
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var style = "";
if(this._box[idx"
+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'>"
+" ].href){
style = "cursor:pointer"
}
html="";
}
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