web网页设计课程设计报告
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《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;
}