文档库
文档库 最新最全的文档下载
当前位置：文档库 › web网页设计课程设计报告

web网页设计课程设计报告

《web开发技术》课程设计

学院：工学院

专业：软件工程

班级： 1401

姓名：兰欣

学号： 2014011029

指导教师：姬广永

2015年12月31日

工学院课程设计评审表

《web开发技术》课程设计任务书

新疆行网站的设计

1设计目的

随着我国经济的迅速发展，人们的生活水平有了显著提高，假日经济和旅游经济已成为人们消费的热点。各地也把旅游业当作本地经济发展的重要支柱之一，从而带动别的经济产业的快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺少的工具，它的内容对于旅游胜地的宣传和旅游地的项目的开发的决策起着非常重要的作用。新疆拥有丰富的地域优势和民族民俗文化旅游资源，该网站通过首页、新疆简介、风土人情、吃在新疆、路线选择五个页面，文字与图片搭配来介绍新疆旅游。

2网站规划

网站的类型：旅游网站

网站主题：新疆行

网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。

使用的技术：Html、Div、CSS、JavaScript、Photoshop

网站栏目：首页、新疆简介、风土人情、吃在新疆、路线选择

网站结构示意图：

3站点首页设计

首页采用导航在主视觉下方的布局，导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点，让设计看上去完整、自然。在导航条下划分左中右三个内容区，分别用风景与简洁的文字来吸人眼球。在图片的选择上，一是体现出新疆旅游景点的特色，而是与主色调蓝色相呼应，是整体更协调。

网站主页效果图

首先在网上搜集大量的图片和文档进行整理，对进行图像处理，并制作了一些图像，进行保存用于网页设计。用Div对页面进行布局，用CSS对页面进行控制，最后再添加超链接以及特效。

主页源代码

新疆行

美景寻踪


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="

";

html += "

";

html += "

" ;

html += "

";

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 ="

" + 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(https://www.wendangku.net/doc/2a17600446.html,stIndexOf('.')+1).toLowerCase()=="swf";

var html = "";

if(isFlash){

html = "

+

"codebase='https://www.wendangku.net/doc/2a17600446.html,/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>"

+ ""

+ ""

+ ""

+ "

+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'>"

+"

";

} else {

var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";

var style = "";

if(this._box[idx].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 eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";

this._autoplay = setInterval(eventstr,this.autoplayer*1000);

}

}

}

var PPTBoxHelper =

{

count: 0,

instance: {},

getId: function() { return '_ppt_box-' + (this.count++); }

};

function moveElement(elementID,final_x,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

var xpos = parseInt(elem.style.left);

if (xpos == final_x ) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/5);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/5);

xpos = xpos - dist;

}

elem.style.left = xpos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

4网站其他页面及核心代码

子页延续了主页的布局，不过在导航栏下设左右两个分区，左边为二级导航栏，

右边为内容区。

新疆简介页面及其源代码

新疆简介

新疆概况

新疆维吾尔自治区，简称新，位于中国西北边陲，首府乌鲁木齐，是中国五个少数民族自治区之一，也是中国陆地面积最大的省级行政区，面积166万平方公里，占中国国土总面积六分之一。

新疆地处亚欧大陆腹地，陆地边境线5600多公里，周边与俄罗斯、哈萨克斯坦、吉尔吉斯斯坦、塔吉克斯坦、巴基斯坦、蒙古、印度、阿富汗斯坦八国接壤，在历史上是古丝绸之路的重要通道，现在是第二座“亚欧大陆桥”的必经之地，战略位置十分重要。新疆现有47个民族成分，主要居住有维吾尔、汉、哈萨克、回、蒙古、柯尔克孜、锡伯、塔吉克、乌兹别克、满、达斡尔、塔塔尔、俄罗斯等民族，是中国五个少数民族自治区之一。

新疆自汉朝以来就是中国不可分割的一部分，是中国神圣领土的一部分。公元前60年，西汉中央政权设立西域都护府，新疆正式成为中国领土的一部分。1884年清政府在新疆设省。1949年新疆和平解放。1955年10月1日成立新疆自治区，新疆现有14个地、州、市，89个县（市），其中33个为边境县（市）。

地理环境

新疆地处73°40′E～96°18′E，34°25′N～48°10′N之间。中国陆地面积第一大、面积第一大的省级行政区。

山脉与盆地相间排列盆地与高山环抱、喻称“三山夹二盆”。北部阿尔泰山，南部为昆仑山系；天山横亘于新疆中部，把新疆分为南北两半，南部是塔里木盆地，北部是准噶尔盆地。习惯上称天山以南为南疆，天山以北为北疆，把哈密、吐鲁番盆地为东疆。

新疆远离海洋，深居内陆，四周有高山阻隔，海洋气流不易到达，形成明显的温带大陆性气候。气温温差较大，日照时间充足（年日照时间达2500～3500小时），降水量少，气候干燥。

人口民族

截至2012年末，新疆总人口2232.78万人，其中少数民族人口约占60%。全区辖有14个地州市，其中包括5个自治州、7个地区、2个地级市；88个县（市），其中包括32个边境县（市）、6个民族自治县、5个县级直辖市；857个乡镇，其中包括42个民族乡。新疆生产建设兵团是自治区的重要组成部分，辖有14个师、175个农牧团场，总人口约257万人。

新疆是一个多民族聚居的地区，共有47个民族成份，其中世居民族有汉族、维吾尔族、哈萨克族、回族、柯尔克孜族、蒙古族、塔吉克族、锡伯族、满族、乌兹别克族、土克曼、俄罗斯族、达斡尔族、塔塔尔族13个。现在还有其余东乡族、壮族、撒拉族、藏族、彝族、布依族、朝鲜族等55个民族。



新疆是多宗教地区。主要宗教有伊斯兰教、佛教、喇嘛教（藏传佛教）、基督教、天主教、东正教和萨满教，其中伊斯兰教为维吾尔、哈萨克、回族、柯尔克孜、塔吉克、乌兹别克、土

克曼、塔塔尔、撒拉、东乡、保安等10多个民族所信奉。伊斯兰教在新疆社会生活中有着较大的影响。新疆宗教组织主要有伊斯兰教协会、伊斯兰经学院和佛教协会等。

交通

新疆位于祖国西北部边陲，地域辽阔，交通问题长期以来都是经济发展的一大瓶颈。通过50多年的建设已初步形成了以公路为基础，铁路为骨干，包括民用航空、输油气管道等四种运输方式相配合，内联区内各地（州、市）和县、外联国内西、中、东部地区以及周边国家的综合运输网络。截至2005年底，全疆公路通车总里程达到8．95万公里，其中高速公路541公里，一级公路883公里。首府乌鲁木齐到各地（州）首府都已实现二级以上高等级公路连接，全疆85个县（市）全部通柏油路。全疆铁路营运里程3009公里。

1985年新疆航空公司成立，2002年新疆航空公司并入中国南方航空公司。已拥有22个机场（含新建、迁建），为国内拥有机场数量最多的省份。其中乌鲁木齐地窝堡国际机场已成为中国第四大国际航空港。

新疆乌鲁木齐已与内地51个城市和6个国家和地区通航。已开辟了乌鲁木齐至北京、上海、广州、深圳、福州、厦门、海口、哈尔滨、大连、青岛、济南、西安、郑州、杭州、重庆、武汉、成都、昆明、张家界、敦煌等55条国内航线。又开辟了乌鲁木齐至阿拉木图、新西伯利亚、莫斯科、伊斯兰堡、德黑兰、比什凯克、叶卡捷琳堡7条国际航线。航线总长14万公里。
2014年11月16日，兰新高铁（乌鲁木齐南至哈密段）开通运营，标志着新疆正式进入高铁时代。动车开通后初期运行时速200公里，乌鲁木齐到哈密的运行时间由原来的5小时缩短至3小时左右。

风土人情页面及其源代码

相关文档
相关文档 最新文档

侵权投诉  © 2013-2023 www.wendangku.net  站点地图 | 手机版

闽ICP备11023808号-7  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈