web网页设计课程设计报告
《web开发技术》课程设计
学院：工学院
专业：软件工程
班级：1401
姓名：兰欣
学号：29
指导教师：姬广永
2015年12月31日
工学院课程设计评审表
《web开发技术》课程设计任务书
新疆行网站的设计
1设计目的
随着我国经济的迅速发展，人们的生活水平有了显着提高，假日经济和旅游经济已成为人们消费的热点。各地也把旅游业当作本地经济发展的重要支柱之一，从而带动别的经济产业的快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺少的工具，它的内容对于旅游胜地的宣传和旅游地的项目的开发的决策起着非常重要的作用。新疆拥有丰富的地域优势和民族民俗文化旅游资源，该网站通过首页、新疆简介、风土人情、吃在新疆、路线选择五个页面，文字与图片搭配来介绍新疆旅游。
2网站规划
网站的类型：旅游网站
网站主题：新疆行
网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。
使用的技术：Html、Div、CSS、JavaScript、Photoshop
网站栏目：首页、新疆简介、风土人情、吃在新疆、路线选择
网站结构示意图：
3站点首页设计
首页采用导航在主视觉下方的布局，导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点，让设计看上去完整、自然。在导航条下划分左中右三个内容区，分别用风景与简洁的文字来吸人眼球。在图片的选择上，一是体现出新疆旅游景点的特色，而是与主色调蓝色相呼应，是整体更协调。
网站主页效果图
首先在网上搜集大量的图片和文档进行整理，对进行图像处理，并制作了一些图像，进行保存用于网页设计。用Div对页面进行布局，用CSS对页面进行控制，最后再添加超链接以及特效。
主页源代码
margin:0px;
}
#globallink a:link, #globallink a:visited{
color:#004a87;
text-decoration:underline;
}
#globallink a:hover{
color:#FFFFFF;
text-decoration:underline;
background:url(../images/ 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/ 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/ 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/ no-repeat;
}
#route ul li{
padding:3px 0px 0px 30px;
background:url(../images/ 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/ 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/ 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/}
.curimg{background-image:url(../images/}
JS代码
function PPTBox()
{
= ();
[] = this;
$ = function(id){return (id);};
= 390;lickPic("+i+")\" onmouseover=\""+eventstr+".mouseoverPic("+i+")\">
}
$+"_flashbox").innerHTML = flashbox;
$+"_imagebox").innerHTML = imageHTML;
},
_play : function(){
clearInterval;
var idx = +1;
if(idx>= (idx);
var eventstr = "['"++"']._play()";
= setInterval(eventstr,*1000);
},
flashHTML : function(url,width,height,idx) {
var isFlash = ('.')+1).toLowerCase()=="swf";
var html = "";
if(isFlash){
html = "";
} else {
var eventstr = "['"++"']";
var style = "";
if[idx].href){
style = "cursor:pointer"
}
html="";
}
return html;
},
changeIndex : function(idx){
var parame = [idx];
moveElement+"_flashbox",-(idx*,1);
var imgs = $+"_imagebox").getElementsByTagName("div");
imgs[ = "bitdiv defimg";
imgs[ = "bitdiv curimg";
= idx;
},
mouseoverPic:function(idx){
(idx);
if>0){
clearInterval;
var eventstr = "['"++"']._play()";
= setInterval(eventstr,*1000);
}
},
clickPic:function(idx){
var parame = [idx];
if&&!=""){
,;
}
},
add:function (imgParam){
[ = imgParam;
},
show : function () {
();
();
if>0){
var eventstr = "['"++"']._play()";
= setInterval(eventstr,*1000);
}
}
}
var PPTBoxHelper =
{
count: 0,
instance: {},
getId: function() { return '_ppt_box-' + ++); }
};
function moveElement(elementID,final_x,interval) {
if (! return false;
if (!(elementID)) return false;
var elem = (elementID);
if {
clearTimeout;
}
if (! {
= "0px";
}
var xpos = parseInt if (xpos == final_x ) {
return true;
}
if (xpos < final_x) {
var dist = ((final_x - xpos)/5);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = ((xpos - final_x)/5);
xpos = xpos - dist;
}
= xpos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+interval+")";
= setTimeout(repeat,interval);
}
4网站其他页面及核心代码
子页延续了主页的布局，不过在导航栏下设左右两个分区，左边为二级导航栏，右边为内容区。
新疆简介页面及其源代码
这里圣传一句话,新疆的羊走的是黄金大道,吃的是天然中草药,喝的是天山雪水,也就是矿泉水,肉能不香嘛~新疆的羊全身都是宝。
抓饭维吾尔语称“波劳”。其原料有大米、羊肉、胡萝卜、洋葱和清油(植物油)。抓饭的花样很多，人们除了用羊肉做抓饭外，还用牛、马、鸡、鹅、雪鸡、野鸡等肉来做抓饭。除此而外，还用葡萄干、杏干、桃皮子等干果做抓饭，称这为荤抓饭或素抓饭。
馕的品种很多，大约有五十多个。常见的有肉馕、油馕、窝窝馕、芝麻馕、片馕、希尔曼馕等等。馕的一般做法跟汉族烧饼很相似。在面粉（或精粉）中加少许盐水和酵面，和匀，揉透，稍发，即可烤制。添加羊油的即为油馕；用羊肉丁、孜然粉、胡椒粉、洋葱末等佐料拌馅烤制的乃为肉馕；将芝麻与葡萄汁拌和烤制的叫芝麻馕，等等。
新疆大盘鸡。辣椒、鸡肉、洋芋、大葱，其大盘鸡在取其浓浓的乡土风味，成为新疆菜式的一种标志，因此新疆人对起源也就格外关心起来。上世纪末，先是乌鲁木齐市郊的柴窝堡打出“正宗柴窝堡大盘鸡”的旗号与沙湾争持；本世纪初，又有伊宁市加入进来，打出“伊犁大盘鸡”号令周边地区并向外延展，欲三分天下。一源清流，遂成混水。沙湾是大盘鸡的故乡，也是大盘鸡每一味可口菜品的真实故乡。说沙湾大盘鸡就是从沙湾的土里直接长出来的，也不为过。
拌面，维吾尔语叫“兰格曼”。是新疆美食的一张名片，吃拌面游新疆成为许多游客新疆之旅难忘的细节。拌面，俗称拉条子：一种不用擀、压的方法而直接用手拉制成的
小麦面制品，加入了佐餐的拌面菜，是新疆各族群众都喜欢的一种大众面食，特别是维吾尔族和回族等民族的拉条子别有一番风味。新疆气候寒冷，小麦生长期长，面粉筋道，有嚼头，最适宜做拉条子。