数字艺术设计基础课程设计报告.docx
《数字艺术设计基础课程设计报告.docx》由会员分享，可在线阅读，更多相关《数字艺术设计基础课程设计报告.docx（13页珍藏版）》请在冰豆网上搜索。
数字艺术设计基础课程设计报告
数字艺术设计基础课程设计报告
《数字艺术设计基础》课程设计报告
题目：
网页艺术设计
系别教育技术系
专业班级11级数字媒体1班
学生姓名李旭阳
指导教师朱世昕
提交日期2014年1月10日
一、设计目的
随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。
为了熟悉数字媒体艺术基础课程，掌握在网页中对数字媒体艺术的应用，学习Dreamwerver、Photoshop、Flash和A软件的使用，以及锻炼自己在审美和色彩搭配上的能力，掌握制作网站的基本流程和方法。
学会和团队配合，逐渐培养做一个完整项目的能力。
二、设计任务与要求
我们小组本次主要设计的是以“骑行天下”为主题的网页，作为一个公益网站，充分体现该活动的旅行文化和活动价值，以达到预期的目的。
通过对"骑行天下"网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。
三、网站整体设计
1、主题定位
以公益为主的激励人们骑行的“骑行天下”网站。
2、需求分析
给喜欢骑行的人一个聚集和交流的空间，同时吸引更多的人加入骑行这一活动。
3、结构设计
网站首页
户外装备
户外资讯
驴友相册
驴友论坛
4、栏目规划
首页：
将体现我们网站想表达的思想，同时将“驴友”最关心的问题和访问最多的标题放在首页。
户外装备：
提供最新的旅行装备并给出自己建议，同时将“驴友”推荐最多的装备置顶。
户外资讯：
这里有“驴友”最关心的问题，有同伴们的心得体会。
驴友相册：
收集骑行的照片，网友也可上传照片。
驴友论坛：
网友在这里提问由资深网友回答，同时也有网友间的交流。
5、网站设计风格设定
我们期望做出的网站有天下任我行的感觉，另外要表现出一定的个性，这里即一种动感。
此外还要使网页看上去简洁，这样有助于清新的风格的更好表达。
网站的页面上我们将骑行的画面与蓝天相结合，让人看了就有一种向往骑行的感觉，
6、网站色彩模式设定
配色以蓝色为主，在蓝色的基础上进行色相的调整，使之达到我们要表达的感觉：
清晰，简单大方。
我们组网页的主色为蓝色与白色，通过各种颜色的渐变构成了页面的各个部分，其中包括页眉，页脚以及各个主题框子，它们大都采用蓝色调。
之所以采用蓝色与白色作为主色，主要是因为我们想要表达的风格是清新，淡淡的蓝色看上去很宜人，而白色能给人纯洁的感觉。
俩者结合给人一种美好的感觉再加上美丽的骑行图片，看上去让人觉得世界很美好，骑行真自由。
四、网站详细设计
1、网站LOGO设计
我们给网站设计了俩个logo方便使用，一个放在页眉一个放在页脚。
此logo放在页眉它以简单的画笔勾勒而成方便记忆和传播。
此logo更加能体现一种动态美。
2、头部和导航栏设计
此模块主要体现网站的功能和实际内容。
3、搜索模块设计
4、侧边栏和主体部分的设计
5、页脚的设计
五、制作过程及技术要点
页面基本布局代码：
所有页面的风格一致只是在布局上有所差异，布局主要用div+css。
.middle{
HEIGHT:
170px;WIDTH:
1040px
}
.bottom{
HEIGHT:
90px;WIDTH:
1040px
}
.left1{
HEIGHT:
85px;FLOAT:
left;MARGIN-LEFT:
410px;WIDTH:
136px
}
.left2{
FONT-SIZE:
14px;FONT-FAMILY:
宋体;MARGIN:
50px44px22px55px
}
.right1{
HEIGHT:
30px;
FLOAT:
left;
WIDTH:
494px;
background-color:
#C8E2F4;
}
.right12{
HEIGHT:
30px;
BACKGROUND-IMAGE:
url（images/首页0_04.gif）;
FLOAT:
right;
WIDTH:
289px;
}
.right2{
HEIGHT:
55px;BACKGROUND-IMAGE:
url（images/首页0_06.gif）;FLOAT:
left;WIDTH:
494px
}
.right121{
FONT-SIZE:
14px;HEIGHT:
14px;FLOAT:
left;MARGIN:
8px0px10px40px;WIDTH:
50px
}
.right122{
FONT-SIZE:
14px;FLOAT:
left;MARGIN:
8px0px10px22px;WIDTH:
64px;
height:
12px;
}
.right123{
FONT-SIZE:
14px;FLOAT:
left;MARGIN:
8px0px10px26px
}
.right21{
FONT-SIZE:
14px;FLOAT:
left;MARGIN:
20px0px20px26px;WIDTH:
62px;
font-family:
黑体;
}
.right41{
FONT-SIZE:
14px;HEIGHT:
23px;FLOAT:
left;TEXT-DECORATION:
underline;MARGIN-TOP:
7px;WIDTH:
65px
}
.right5{
HEIGHT:
270px;
FLOAT:
left;
WIDTH:
494px;
background-color:
#9EC7E3;
}
.middlel1{
MARGIN-BOTTOM:
35px;HEIGHT:
95px;FLOAT:
left;MARGIN-LEFT:
75px;MARGIN-TOP:
40px;WIDTH:
105px
}
.middlel11{
FONT-SIZE:
14px;BORDER-TOP:
#cccccc1pxridge;HEIGHT:
30px;BACKGROUND-IMAGE:
url（images/001.gif）;BORDER-BOTTOM:
#cccccc1pxridge;FLOAT:
left;MARGIN:
0px;WIDTH:
105px
}
.middlel12{
HEIGHT:
30px;FLOAT:
left;WIDTH:
105px
}
.middle13{
BORDER-TOP:
#cccccc1pxridge;HEIGHT:
30px;BORDER-BOTTOM:
1pxridge;FLOAT:
left;WIDTH:
105px;BORDER-LEFT-COLOR:
#cccccc
}
.midder1{
HEIGHT:
170px;FLOAT:
left;WIDTH:
375px
}
.middler11{
MARGIN-BOTTOM:
10px;FONT-SIZE:
12px;HEIGHT:
12px;FLOAT:
left;MARGIN-LEFT:
60px;MARGIN-TOP:
10px;WIDTH:
315px
}
.bottom1{
HEIGHT:
80px;
BACKGROUND-IMAGE:
url（images/002%282%29.gif）;
MARGIN-LEFT:
50px;
MARGIN-TOP:
10px;
WIDTH:
960px;
background-repeat:
no-repeat;
}
.bottom11{
MARGIN-BOTTOM:
20px;HEIGHT:
40px;FLOAT:
left;MARGIN-LEFT:
100px;MARGIN-TOP:
20px;WIDTH:
370px
}
.bottom111{
MARGIN-BOTTOM:
4px;FONT-SIZE:
12px;HEIGHT:
12px;FLOAT:
left;COLOR:
#ffffff;MARGIN-TOP:
4px;WIDTH:
370px
}
.bottom112{
MARGIN-BOTTOM:
0px;FONT-SIZE:
12px;HEIGHT:
12px;FLOAT:
left;COLOR:
#000000;MARGIN-TOP:
8px;WIDTH:
370px
}
.right50{
HEIGHT:
270px;FLOAT:
left;WIDTH:
247px
}
.beijing{
BACKGROUND-IMAGE:
url（images/背景_07.gif）;
BACKGROUND-REPEAT:
repeat-x;
text-align:
left;
margin-right:
auto;
margin-left:
auto;
height:
900px;
width:
1040px;
}
首页