数字艺术设计基础专业课程设计方案报告.doc

数字艺术设计基础课程设计汇报题目：网页艺术设计系 别 教育技术系 专业班级 11级数字媒体1班 学生姓名 李旭阳 指导老师 朱世昕 提交日期 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: 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 HEIGHT: 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.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: 黑体; .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: #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 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.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; 首页 主页 收藏 联络 户外装备 户外资讯 驴友相册 驴友论坛 站内查找 搜索 今日热帖 骑行相册 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.offsetWidth - 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) ;骑行天下  |  手机版  |  帮助 作品完成和5月 制作人  李旭阳  李慧星  王树仁 六、 系统介绍或功效展示1.户外装备页面。2.户外装备页面下具体内容。3. 团体组员及简历姓名李旭阳性别男年纪22入课时间专业数字媒体班级一班专长熟悉ps和软件。负责事项网页ps制作和首页完成。网站公布。姓名王树仁性别男年纪23入课时间专业数字媒体班级一班专长画面和色彩搭配负责事项色彩搭配和页面布局。姓名李慧星性别男年纪23入课时间专业数字媒体班级一班专长Dw和.net软件负责事项网站页面实现七、 网站测试和公布1、测试超链接是否正确2、检验网页是否正确显示3、界面测试 现在通常人全部有使用浏览器浏览网页经历，用户即使不是专业人员不过对界面效果印象是很关键。假如你重视这方面测试，那么验证应用程序是否易于使用就很关键了。大家认为这是测试中最不关键部分，不过恰恰相反界面对不懂技术用户来说那相当关键，慢慢体会你会明白。 方法上能够依据设计文档，假如够专业话能够专业美工人员，来确定整体风格页面风格，然后依据这个能够页面人员能够生成静态HTML，CSS等甚至生成几套不用方案来讨论，或交给用户评审，最终形成统一风格页面/框架。注意不要靠程序员美术素养形成你web风格，那样可能会很糟糕。 关键包含以下多个方面内容： 站点地图和导航条 位置、是否合理、是否能够导航等内容布局 布局是否合理，滚动条等介绍说明 说明文字是否合理，位置，是否正确 背景/色调 是否正确、美观，是否符适用户需求； 页面在窗口中显示是否正确、美观（在调整浏览器窗口大小时，屏幕刷新是否正确）表单样式 大小，格式，是否对提交数据进行验证（假如在页面部分进行验证话）等 连接 连接形式，位置，是否易于了解等4、公布网站 一、进入Win7 控制面板，选择左侧 打开或关闭Windows功效 。 二、现在出现了安装Windows功效选项菜单，注意选择项目，我们需要手动选择需 要功效，下面这张图片把需要安装服务全部已经选择了，大家能够根据图片勾选功效。 三、安装完成后，再次进入 控制面板，选择 管理工具，双击 Internet(IIS)管理器 选项，进入IIS设置。 四、现在进入到IIS7控制面板。 五、选择 Default Web Site，并双击 ASP 选项。 六、IIS7中ASP 父路径 是没有启用，要 开启父路径，选择True，搞定父路径选项。 七、配置IIS7站点。 单击右边 高级设置 选项，能够设置网站目录。 八、点击右侧 绑定.，设置网站 端口 。 九、点击 默认文档， 设置网站默认文档。 5、访问、交流各自网站八、设计总结 经过这次网页课程设计深入激发了学习爱好，调动学习自觉性，自己动脑动手，跟小组组员们一起讨论，利用网络资源，结合教材和老师知道，经过本身实践，创作出极具风格网站。总体来说，就是让我受益匪浅。 在设计网页这几天里，我充足利用了这次设计机会，全身心地投入到网页设计海洋中，不停地学习和探索网页设计奥秘，不停地完善自我，提升设计水准。在这个过程中，我也深深体会到，想把页面做好并非一件轻易事，它包含网站专题选择，内容采集，图片处理，页面排版等等，还包含了数据库连接测试等一系列难点。此次课设还有很多不足地方，还需要我不停地学习、综合利用多种知识，努力设计出愈加好地Web页面。九、 参考文件1曾东，曾文权. Web开发技术-ASPM.清华大学出版社，2杨杰.浅析综合性高校数字媒体艺术专业课程设置J.安徽工业大学学报(社会科学版).03期 3严宝平.数字媒体艺术课程体系中软件工程应用J.大家.06期4神龙工作室.新编PHOTOSHOP7.0汉字版入门和提升.北京：人民邮电出版社，5游泽青.多媒体画面艺术基础. 北京：高等教育出版社，6于慧.静态网页编程出色案例教程.北京：电子工业出版社，7(美)A.Russell Jones著，高春蓉等译.ASP.NET从入门到精通.电子工业出版，.1