《数字艺术设计基础课程设计报告》由会员分享，可在线阅读，更多相关《数字艺术设计基础课程设计报告（13页珍藏版）》请在金锄头文库上搜索。
1、数字艺术设计基础数字艺术设计基础课程设计报告课程设计报告题目：网页艺术设计系系 别别 教育技术系 专业班级专业班级 11 级数字媒体 1 班 学生姓名学生姓名 李旭阳 指导教师指导教师 朱世昕 提交日期提交日期 2014 年 1 月 10 日 大同大学教育科学与技术学院课程设计报告0一、设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。为了熟悉数字媒体艺术基础课程，掌握在网页中对数字媒体艺术的应用，学习Dreamwerver、Photoshop、Flash 和 A 软件的使用，以及锻炼自己在审美和色彩
2、搭配上的能力，掌握制作网站的基本流程和方法。学会和团队配合，逐渐培养做一个完整项目的能力。二、设计任务与要求我们小组本次主要设计的是以“骑行天下”为主题的网页，作为一个公益网站，充分体现该活动的旅行文化和活动价值，以达到预期的目的。通过对“骑行天下“网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。三、网站整体设计1 1、主题定位以公益为主的激励人们骑行的“骑行天下”网站。2、需求分析给喜欢骑行的人一个聚集和交流的空间，同时吸引更多的人加入骑行这一
3、活动。3、结构设计4、栏目规划首页：将体现我们网站想表达的思想，同时将“驴友”最关心的问题和访问最多的标题放在首页。户外装备：提供最新的旅行装备并给出自己建议，同时将“驴友”推荐最多的装备置顶。网站首页网站首页户外装备户外装备户外资讯户外资讯驴友相册驴友相册驴友论坛驴友论坛大同大学教育科学与技术学院课程设计报告1户外资讯：这里有“驴友”最关心的问题，有同伴们的心得体会。驴友相册：收集骑行的照片，网友也可上传照片。驴友论坛：网友在这里提问由资深网友回答，同时也有网友间的交流。5、网站设计风格设定我们期望做出的网站有天下任我行的感觉，另外要表现出一定的个性，这里即一种动感。此外还要使网页看上去简洁
4、，这样有助于清新的风格的更好表达。网站的页面上我们将骑行的画面与蓝天相结合，让人看了就有一种向往骑行的感觉，6、网站色彩模式设定配色以蓝色为主，在蓝色的基础上进行色相的调整，使之达到我们要表达的感觉：清晰，简单大方。我们组网页的主色为蓝色与白色，通过各种颜色的渐变构成了页面的各个部分，其中包括页眉，页脚以及各个主题框子，它们大都采用蓝色调。之所以采用蓝色与白色作为主色，主要是因为我们想要表达的风格是清新，淡淡的蓝色看上去很宜人，而白色能给人纯洁的感觉。俩者结合给人一种美好的感觉再加上美丽的骑行图片，看上去让人觉得世界很美好，骑行真自由。四、网站详细设计1、网站 LOGO 设计我们给网站设计了俩
5、个 logo 方便使用，一个放在页眉一个放在页脚。此 logo 放在页眉它以简单的画笔勾勒而成方便记忆和传播。此 logo 更加能体现一种动态美。2、头部和导航栏设计大同大学教育科学与技术学院课程设计报告2此模块主要体现网站的功能和实际内容。3、搜索模块设计4、侧边栏和主体部分的设计5、页脚的设计五、制作过程及技术要点页面基本布局代码：所有页面的风格一致只是在布局上有所差异，布局主要用 div+css。.middle HEIGHT: 170px; WIDTH: 1040px大同大学教育科学与技术学院课程设计报告3.bottom HEIGHT: 90px; WIDTH: 1040px.left1
6、 HEIGHT: 85px; FLOAT: left; MARGIN-LEFT: 410px; WIDTH: 136px.left2 FONT-SIZE: 14px; FONT-FAMILY: 宋体; MARGIN: 50px 44px 22px 55px.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 HE
7、IGHT: 55px; BACKGROUND-IMAGE: url(images/首页 0_06.gif); FLOAT: left; WIDTH: 494px.right121 FONT-SIZE: 14px; HEIGHT: 14px; FLOAT: left; MARGIN: 8px 0px 10px 40px; WIDTH: 50px大同大学教育科学与技术学院课程设计报告4.right122 FONT-SIZE: 14px; FLOAT: left; MARGIN: 8px 0px 10px 22px; WIDTH: 64px;height: 12px;.right123 FONT-S
8、IZE: 14px; FLOAT: left; MARGIN: 8px 0px 10px 26px.right21 FONT-SIZE: 14px; FLOAT: left; MARGIN: 20px 0px 20px 26px; 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;
9、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: #cccccc 1px ridge; HEIGHT: 30px; BACKGROUND-IMAGE: url(images/001.gif); BORDER-BOTTOM: #cccccc 1px ridge; FLOAT: left; MARGIN:
10、0px; WIDTH: 105px大同大学教育科学与技术学院课程设计报告5.middlel12 HEIGHT: 30px; FLOAT: left; WIDTH: 105px.middle13 BORDER-TOP: #cccccc 1px ridge; HEIGHT: 30px; BORDER-BOTTOM: 1px ridge; FLOAT: left; WIDTH: 105px; BORDER-LEFT-COLOR: #cccccc.midder1 HEIGHT: 170px; FLOAT: left; WIDTH: 375px.middler11 MARGIN-BOTTOM: 10px
11、; 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; MA
12、RGIN-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大同大学教育科学与技术学院课程设计报告6.bottom112 MARGIN-BOTTOM: 0px; FONT-SIZE: 12px; HEIGHT: 12px; FLOAT: left; COLOR: #000000; MARGIN-TOP: 8px; WIDT
13、H: 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;首页主页 收藏 大同大学教育科学与技术学院课程设计报告7联系 户外装备 户外资讯驴友相册 驴友论坛站内查找 搜索 今日热帖 骑行相册 var speed = 30;va
14、r tab = document.getElementById(“demo“);var tab1 = document.getElementById(“demo1“);var tab2 = document.getElementById(“demo2“);tab2.innerHTML = tab1.innerHTML;function Marquee() if (tab2.offsetWidth - tab.scrollLeft 骑行天下 | 手机版 | 帮助 作品完成与 2012 年 5 月 制作人 李旭阳 李慧星王树仁 6 6、系统介绍或功能展示系统介绍或功能展示1.户外装备页面。2.户外
15、装备页面下的详细内容。大同大学教育科学与技术学院课程设计报告93.团队成员及简历姓名李旭阳性别男年龄22入学时间2011专业数字媒体班级一班特长熟悉 ps 以及 软件。负责事项网页 ps 制作以及首页的完成。网站发布。姓名王树仁性别男年龄23入学时间2011专业数字媒体班级一班特长画面和色彩搭配负责事项色彩搭配和页面布局。姓名李慧星性别男年龄23入学时间2011专业数字媒体班级一班大同大学教育科学与技术学院课程设计报告10特长Dw 和.net 软件负责事项网站页面的实现7、网站的测试与发布1、测试超链接是否正确2、检查网页是否正确显示3、界面测试 现在一般人都有使用浏览器浏览网页的经历，用户
16、虽然不是专业人员但是对界面效果的印象是很重要的。如果你注重这方面的测试，那么验证应用程序是否易于使用就非常重要了。很多人认为这是测试中最不重要的部分，但是恰恰相反界面对不懂技术的客户来说那相当关键，慢慢体会你会明白的。 方法上可以根据设计文档，如果够专业的话可以专业美工人员，来确定整体风格页面风格，然后根据这个可以页面人员可以生成静态的 HTML，CSS 等甚至生成几套不用的方案来讨论，或者交给客户评审，最后形成统一的风格的页面/框架。注意不要靠程序员的美术素养形成你的 web 风格，那样可能会很糟糕。 主要包括以下几个方面的内容： 站点地图和导航条 位置、是否合理、是否可以导航等内容布局 布局是否合理，滚动条等简介说明 说明文字是否合理，位置，是否正确 背景/色调 是否正确、美观，是否符合用户需求； 页面在窗口中
