《数字艺术设计基础课程设计报告.doc》由会员分享，可在线阅读，更多相关《数字艺术设计基础课程设计报告.doc（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、数字艺术设计基础课程设计报告题目：网页艺术设计系 别 教育技术系 专业班级 11级数字媒体1班 学生姓名 李旭阳 指导教师 朱世昕 提交日期 2014年1月 10日 一、设计目的随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，网站在当今时代被越来越多的人用来宣传。为了熟悉数字媒体艺术基础课程，掌握在网页中对数字媒体艺术的应用，学习Dreamwerver、Photoshop、Flash和A软件的使用，以及锻炼自己在审美和色彩搭配上的能力，掌握制作网站的基本流程和方法。学会和团队配合，逐渐培养做一个完整项目的能力。二、设计任务与要求我们小组本次主要
2、设计的是以“骑行天下”为主题的网页，作为一个公益网站，充分体现该活动的旅行文化和活动价值，以达到预期的目的。通过对骑行天下网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握网站设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。三、网站整体设计1、主题定位 以公益为主的激励人们骑行的“骑行天下”网站。2、 需求分析 给喜欢骑行的人一个聚集和交流的空间，同时吸引更多的人加入骑行这一活动。3、 结构设计网站首页户外装备驴友论坛驴友相册户外资讯4、 栏目规划 首页：将体现我们网站想表达的思想，同时将“驴友”最
3、关心的问题和访问最多的标题放在首页。 户外装备：提供最新的旅行装备并给出自己建议，同时将“驴友”推荐最多的装备置顶。 户外资讯：这里有“驴友”最关心的问题，有同伴们的心得体会。 驴友相册：收集骑行的照片，网友也可上传照片。 驴友论坛：网友在这里提问由资深网友回答，同时也有网友间的交流。5、 网站设计风格设定 我们期望做出的网站有天下任我行的感觉，另外要表现出一定的个性，这里即一种动感。此外还要使网页看上去简洁，这样有助于清新的风格的更好表达。 网站的页面上我们将骑行的画面与蓝天相结合，让人看了就有一种向往骑行的感觉，6、 网站色彩模式设定 配色以蓝色为主，在蓝色的基础上进行色相的调整，使之达到
4、我们要表达的感觉：清晰，简单大方。我们组网页的主色为蓝色与白色，通过各种颜色的渐变构成了页面的各个部分，其中包括页眉，页脚以及各个主题框子，它们大都采用蓝色调。之所以采用蓝色与白色作为主色，主要是因为我们想要表达的风格是清新，淡淡的蓝色看上去很宜人，而白色能给人纯洁的感觉。俩者结合给人一种美好的感觉再加上美丽的骑行图片，看上去让人觉得世界很美好，骑行真自由。四、网站详细设计1、网站LOGO设计我们给网站设计了俩个logo方便使用，一个放在页眉一个放在页脚。此logo放在页眉它以简单的画笔勾勒而成方便记忆和传播。此logo更加能体现一种动态美。2、 头部和导航栏设计此模块主要体现网站的功能和实际
5、内容。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: 50px 44px 22px 55px .right1
6、 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: l
7、eft; MARGIN: 8px 0px 10px 40px; WIDTH: 50px.right122 FONT-SIZE: 14px; FLOAT: left; MARGIN: 8px 0px 10px 22px; WIDTH: 64px; height: 12px; .right123 FONT-SIZE: 14px; FLOAT: left; MARGIN: 8px 0px 10px 26px.right21 FONT-SIZE: 14px; FLOAT: left; MARGIN: 20px 0px 20px 26px; WIDTH: 62px; font-family: 黑体; .
8、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.middle
9、l11 FONT-SIZE: 14px; BORDER-TOP: #cccccc 1px ridge; HEIGHT: 30px; BACKGROUND-IMAGE: url(images/001.gif); BORDER-BOTTOM: #cccccc 1px ridge; FLOAT: left; MARGIN: 0px; WIDTH: 105px.middlel12 HEIGHT: 30px; FLOAT: left; WIDTH: 105px.middle13 BORDER-TOP: #cccccc 1px ridge; HEIGHT: 30px; BORDER-BOTTOM: 1px
10、 ridge; 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.
11、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: 4p
12、x; WIDTH: 370px.bottom112 MARGIN-BOTTOM: 0px; FONT-SIZE: 12px; HEIGHT: 12px; FLOAT: left; COLOR: #; 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; marg
13、in-left: auto; height: 900px; width: 1040px; 首页 主页 收藏 联系 户外装备 户外资讯 驴友相册 驴友论坛 站内查找 搜索 今日热帖 骑行相册 var speed = 30; var tab = document.getElementById(demo); var tab1 = document.getElementById(demo1); var tab2 = document.getElementById(demo2); tab2.innerHTML = tab1.innerHTML; function Marquee() if (tab2.o
14、ffsetWidth - tab.scrollLeft = 0) tab.scrollLeft -= tab1.offsetWidth else tab.scrollLeft+; var MyMar = setInterval(Marquee, speed); tab.onmouseover = function () clearInterval(MyMar) ; tab.onmouseout = function () MyMar = setInterval(Marquee, speed) ;骑行天下 | 手机版 | 帮助 作品完成与2012年
15、5月 制作人 李旭阳 李慧星 王树仁 六、 系统介绍或功能展示1.户外装备页面。2.户外装备页面下的详细内容。3. 团队成员及简历姓名李旭阳性别男年龄22入学时间2011专业数字媒体班级一班特长熟悉ps以及软件。负责事项网页ps制作以及首页的完成。网站发布。姓名王树仁性别男年龄23入学时间2011专业数字媒体班级一班特长画面和色彩搭配负责事项色彩搭配和页面布局。姓名李慧星性别男年龄23入学时间2011专业数字媒体班级一班特长Dw和.net软件负责事项网站页面的实现七、 网站的测试与发布1、测试超链接是否正确2、检查网页是否正确显示3、界面测试 现在一般人都有
16、使用浏览器浏览网页的经历，用户虽然不是专业人员但是对界面效果的印象是很重要的。如果你注重这方面的测试，那么验证应用程序是否易于使用就非常重要了。很多人认为这是测试中最不重要的部分，但是恰恰相反界面对不懂技术的客户来说那相当关键，慢慢体会你会明白的。 方法上可以根据设计文档，如果够专业的话可以专业美工人员，来确定整体风格页面风格，然后根据这个可以页面人员可以生成静态的HTML，CSS等甚至生成几套不用的方案来讨论，或者交给客户评审，最后形成统一的风格的页面/框架。注意不要靠程序员的美术素养形成你的web风格，那样可能会很糟糕。 主要包括以下几个方面的内容： 站点地图和导航条 位置、是否合理、是否
17、可以导航等内容布局 布局是否合理，滚动条等简介说明 说明文字是否合理，位置，是否正确 背景/色调 是否正确、美观，是否符合用户需求； 页面在窗口中的显示是否正确、美观（在调整浏览器窗口大小时，屏幕刷新是否正确）表单样式 大小，格式，是否对提交数据进行验证（如果在页面部分进行验证的话）等 连接 连接的形式，位置，是否易于理解等4、发布网站 一、进入Win7的 控制面板，选择左侧的 打开或关闭Windows功能 。 二、现在出现了安装Windows功能的选项菜单，注意选择的项目，我们需要手动选择需 要的功能，下面这张图片把需要安装的服务都已经选择了，大家可以按照图片勾选功能。 三、安装完成后，再次
18、进入 控制面板，选择 管理工具，双击 Internet(IIS)管理器 选项，进入IIS设置。 四、现在进入到IIS7控制面板。 五、选择 Default Web Site，并双击 ASP 的选项。 六、IIS7中ASP 父路径 是没有启用的，要 开启父路径，选择True，搞定父路径选项。 七、配置IIS7的站点。 单击右边的 高级设置 选项，可以设置网站的目录。 八、点击右侧的 绑定.，设置网站的 端口 。 九、点击 默认文档， 设置网站的默认文档。 5、访问、交流各自的网站八、设计总结 通过这次网页课程设计进一步激发了学习兴趣，调动学习的自觉性，自己动脑动手，跟小组成员们一起讨论，运用网络
19、资源，结合教材和老师的知道，通过自身实践，创作出极具风格的网站。总体来说，就是让我受益匪浅。 在设计网页的这几天里，我充分利用了这次设计的机会，全身心地投入到网页设计的海洋中，不断地学习和探索网页设计的奥秘，不断地完善自我，提高设计水准。在这个过程中，我也深深体会到，想把页面做好并非一件容易的事，它包括网站主题的选择，内容的采集，图片的处理，页面的排版等等，还包括了数据库连接测试等一系列难点。本次课设还有许多不足的地方，还需要我不断地学习、综合运用各种知识，努力设计出更好地Web页面。九、 参考文献1曾东，曾文权. Web开发技术-ASPM.清华大学出版社，20072杨杰.浅析综合性高校数字媒体艺术专业课程设置J.安徽工业大学学报(社会科学版).2011年03期 3严宝平.数字媒体艺术课程体系中的软件工程应用J.大家.2012年06期4神龙工作室.新编PHOTOSHOP7.0中文版入门与提高.北京：人民邮电出版社，20065游泽青.多媒体画面艺术基础. 北京：高等教育出版社，20036于慧.静态网页编程精彩案例教程.北京：电子工业出版社，20067(美)A.Russell Jones著，高春蓉等译.ASP.NET从入门到精通.电子工业出版，2002.1