艺术网页设计毕业设计说明.docx

艺术网页设计毕业设计说明.docx

《艺术网页设计毕业设计说明.docx》由会员分享，可在线阅读，更多相关《艺术网页设计毕业设计说明.docx（24页珍藏版）》请在冰豆网上搜索。

艺术网页设计毕业设计说明

西京学院

本科毕业设计说明书

题目：

西京学院艺术学院网页设计

教学单位：

艺术学院

专业：

艺术设计0801

学号：

01

姓名：

吴志玲

指导教师：

严晖

2021年5月

摘要

本论文将对西京学院艺术学院网页设计与制作的方式、制作工具等展开研究和探讨。

为了表现艺术学院的艺术气氛，整个网页采纳中国传统的水墨风格，并对在设计与制作进程中所碰到的问题进行记录并说明，通过对艺术网页的设计，进一步把握Dreamweaver,Flash,Fireworks,Photoshop,Coreldraw,Illustrator等设计软件的运用，学会利用基础的html语言、div+css样式做页面布局的排版和Javascript脚本的运用，把咱们在学校所学的理论知识，运用到客观实际中去，以便能够达到拓展自身的知识面，扩大与社会的接触面。

关键词：

网页；水墨；html；div+css；Javascript

Abstract

ThispaperwillbehelpfulfortheXijingUniversityArtCollegewebpagedesignandproductionmethods,productiontoolssuchasresearchandinvestigation.Inordertoreflecttheartacademyartatmosphere,theentirewebpageusingtraditionalChineseinkpaintingstyle,andinthedesignandproductionprocessoftheproblemsencounteredwererecordedanddescribed,throughtheartofwebpagedesign,furtherunderstandtheDreamweaver,Flash,Fireworks,Photoshop,Coreldraw,Illustratorandotherdesignsoftwareapplications,learntousebasichtmllanguage,div+cssstylestypesettingandpagelayoutusingJavascriptscript,weinschooltolearnthetheoreticalknowledge,applytotheobjectivereality,inordertomeettheexpandingtheirknowledge,expandsocialcontacts.

Keyword：

Webpage;ink;html;div+css;Javascript

引言

在那个高科技发达的时期，人类生活处处离不开网络。

它成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活、学习等方方面面发挥着重要的作用。

因为网络宣传本钱低，传播范围广而且速度快，给人们生活带来极大的方便，促使国内外各大公司与机构纷纷创建自己的宣传网站、购物网站与学习交流平台。

固然，学校也不例外，为了让大伙儿更了解学校的情形，各大学校领导都在网页上花了很多心思，一个好的机构就应该有一个好的网页，因为宜的网页也是一个好公司勤学校的门面，直接阻碍大伙儿对它的观点。

由于此刻利用网络的人愈来愈多，为了知足人们的需求，大量的网页被成立起来，现在人们的生活水平在提高，人们对网页的要求也不简简单单是传递信息了，人们希望阅读网页的同时也是一种欣赏，一个漂亮、有个性的网页往往很受人欢迎。

1选题来源

选择西京学院艺术学院网页设计的目的有五点：

第一、本人很喜爱网页设计，目前的工作确实是软件公司里的美工，所做的工作确实是设计网页和设计网页元素、按钮、UI设计等。

第二、西京学院艺术学院网页是并世无双的，我不用担忧列位教师对我的作品有剽窃嫌疑。

第三、即将离开母校，希望给学校和自己都留下一个美好纪念。

第四、希望把自己在大学四年的作品以网页的形式归纳和保留起来。

第五、艺术设计（装璜）专业并无把网页设计开为必修课，而网页设计又比较有难度，我个人比较喜爱挑战高难度，于是就自学网页，以此来证明自己的能力。

2前期的预备工作

市场调查

为了做好西京学院艺术学院网页，我花了大量的时刻对艺术网页进行调查，在公共眼中，艺术学院的网页应该是什么样子的呢？

通过询问周围的同窗、朋友或亲人和网络发帖等形式，我了解到，80%的人都以为，艺术学院的网页应该以水墨为主，做出复古中国风的风格；10%的人以为应该很专门、很抽象才能表现艺术感；5%的人以为应该做出大自然清楚的感觉，或是以奔跑的动物为主题，才能表现艺术学院的活跃与生机，3%的人以为应该用淡颜色为主，颜色太深让人感觉很繁重而失去气氛；其他的人那么以为艺术学院的网页应该和市场上的网页没有太大区别，毕竟是一个学院的网页而非个人网页，因此不能做的太个性，以转达信息为主。

除此之外，我还很认真的观看了西京学院艺术学院的网页，我发觉艺术学院网页引导页的歌若是不手动暂停就可不能停，也可不能随着打开下一页而暂停，必需返回引导页才能关掉，一个专业做网页的朋友告知我，一个教育型的网页是不能增加音乐的，就算增加，必需时刻很短，而且还会自动暂停。

第二，做网页时还要学会留白，尤其是艺术网页，才能给人与想象的空间，还要有明确风格，才能能给阅读者对该学校留下深刻的印象，艺术学院的网页风格应该是表现活跃的学习气氛又不失形象的。

设计思路

第一，在对西京学院艺术学院网页设计与实现的进程中，咱们应当依照具体的情形，找出最正确的建设方案，考虑多方面的利益和因素，成立一个平安可行功能壮大，易于同窗们学习与交流的网络平台。

第二，西京学院艺术学院是以艺术教育为基础的机构，因此网页的设计离不开对作品的展现。

因为艺术学院的专业比较多，因此对展现作业设计时必然要以专业进行归类治理，让大伙儿一目了然。

既然是增进大伙儿学习，那么就应该有论坛等交流平台，同窗们能够自主的发表个人的观点和意见，能够分享自己的作品和他人的优秀作品，一路谈论和探讨学习上或生活中碰到的问题。

再次，在网页上设计转动条，显示网页最近的通知及新闻要点，及艺术学院最近的重大事件与动态，起到更好提示、警告和的宣传作用。

3关于网页

网页设计对人材的要求

网页设计看似很简单，而做起来却是一个很棘手的问题。

一样一个好的网页都是一个团队做出来的，若是想一个人独立完成整套网页的设计与制作是比较艰巨的。

很多平面设计大师能够做出了很漂亮的网页界面，却无法独立完成网页的后期操作，因此一个优秀的网页设计师不但要会ps,coreldraw,Illustrator等平面设计软件，还有学会利用Dreamweaver,Flash,Fireworks网页三剑客、基础的html语言和div+css样式做页面布局的排版，同时还有学会利用JavaScript脚本和熟悉更多的运算机语言。

因此，做一套网页的价钱通常高过一套包装、一套VI或一个logo，因为网页不但有设计含量，还有技术含量，这并非是每一个设计师都能够做的到的。

因此人们为了做出完美的网页，开始分工合作，不同的人材聚集在一路，组成一个团队，于是就有了现在的前台和后台。

前台，其实确实是是网页的美工部份，包括网页设计师设计的首页和子页面的效果图、按钮等，属于设计网页前台部份。

后台确实是在前台的基础上完成添加更新网站的内容，例如登岸系统的操作和留言板的提交设置等。

网页设计的进展前景

随着网络时期的进展，网络媒体慢慢成为信息时期的第四大媒体，使得更多的企业加入互联网营销行列，网站开发与网络营销人材成为以后相当长时刻内的紧缺人材。

各行各业都涌现出的成千上万的优秀网站，他们利用网站来进行宣传、娱乐、产品资讯发布、论坛交流、资料下载等等。

如腾讯、新浪、天涯、迅雷等网站，网站开发带来的商机也如雨后春笋般涌现。

就拿自己找工作的体会来讲，我无数次给广告公司投简历，都是石沉大海。

就算有面试打来都是那些专业制作网站的公司或软件公司，而这些公司我全然都没有投简历，是他们主动找的我，而且工作职位都是美工。

开的工资也比平面设计的高，去公司后很受重用，三个月后就转正了，涨了工资又还交了五险一金，还双休。

公司既然情愿把一个在校生转正，能够看出公司对美工的重用，也说明的美工这行急缺人材，网页设计这行以后的进展是超级可观的。

4艺术学院网页的特殊性

艺术学院作为走在艺术前沿的教育机构，本身具有独特的个性，要求网站风格表现其独特的艺术气氛，准确、有创意的网页能够表现艺术学院特色。

艺术学院网页与一样的网站类型相较有具特殊性。

要紧表此刻：

（1）受众群的特殊性。

学校网站要紧对象是学生、教师、家长、和其他关切教育和酷爱漂亮术的人士。

（2）网站功能的特殊性。

艺术类院校网站是学校进行社会推行的媒介，是校园师生互动的良好平台，是校外人士了解学校的窗口。

（3）非盈利性。

.

学校网站的要紧职责是对外被社会了解，对内营造踊跃学术气氛和增进良好沟通互动平台。

在国外，很多艺术网页都是以表现作品或学生学习为主，大量的采纳学生作品和学生正在作画的各类照片，以表现学院的学习气氛和艺术气氛。

在国内，很多艺术网页都是以中国传统的水墨画为主题来表现中国博大精深的文化。

5网页的制作与计划

做网页的步骤

第一，构思好网页的风格，依照风格搜集大量的备用素材，我做的是水墨风格的，那么我搜集的素材都是水墨或中国风的图片。

新建一个文件夹，将要用到的素材放在指定的文件夹下，也能够从头建站点成立文件。

用Dreamweaver制作网页，第一件事确实是要先成立站点，方便以后好治理。

打开MacromediaDreamweaver8，左键单击“站点”，选择“新建站点”，新建站点以后弹出“编辑文件”菜单，然后给新建的站点命名，如图5.1.1：

给站点命名后，会弹出选择途径文件，按着个人要求选择就能够够了，选择文件夹途径后，会弹出效劳器的选择一项，选“否”，然后再弹出远程效劳器菜单，选择“无”

即可。

图5.1.1

开发软件

做网页必备的三个软件Dreamweaver,Flash,Fireworks，也称为网页三剑客。

Dreamweaver确实是专业制作网页的软件，Flash是制作网页动画成效的软件，Fireworks是对网页成效图进行切割的软件。

除这三个软件，还有ps,coreldraw,Illustrator，CSGet等，网页需要美化的图片和按钮都离不开ps,网页的界面成效图页先利用ps做出来以后，才能用Fireworks进行切割；coreldraw主若是用于做一些矢量图，例如网页logo或其它的小图标等；Illustrator也成为AI，它能够矢量图和位图之间自由转换，我最

经常使用的格式确实是.eps，若是在做图片的时候不用背景，那么.eps倒在PS里是透明模式。

除此之外，还有CuteSWFGet、那个软件也做动态网页时比较经常使用的，一样利用那个软件能够快速的下载经常使用的动画成效，只要输入动画的网址，那个动画就很轻松的下下来了。

做网页时，若是想很清楚的明白，两个Table之间的距离，Picpick确实是再好只是的软件的了，它就像咱们在做几何题时用的直尺一样的方便。

Picpick除那个功能还有截取图片、编辑图片，还有取色、调色的功能，有放大镜功能，还有手写做草稿的功能，Picpick与Dreamweaver搭配起来，确实是壮大的网页制作软件了。

固然，能用的软件固然不止这些，只是关于我那个新手来讲，我目前用的确实是这些软件。

功能结构

本专题网页中，要紧设计了网页的首页、学院概况、新闻资讯、教学科研、党群建

设、学生工作、作品欣赏、交流平台、留言九个导航。

该网页重点子链接是登录和注册

模块、学院概况、作品展现、交流平台；如图

图5

网页的主题思想

本网页属于教育机构网页，目的确实是要提供给学习者一个舒适的学习平台。

网页的主题思想确实是一切为了学习者能够通过本网站能够更好、更快、更舒适地学习，同时宣传咱们艺术学院的网页，让更多的校外人士了解西京学院艺术学院。

网页布局设计

本网页以黑色和红色作为要紧色调，配上复古的水墨成效，形成独特的中国风，使阅读者在视觉上产生眼前一亮的视觉成效。

本网页在布局上简单而又不显单调，朴素而又不失优雅。

采纳图文结合的方式让学习者能够更直观地学习，让校外人士在了解艺术学院的同时也在欣赏艺术。

6网页的制作进程

网页前期的设计方案

从开始做毕业设计到此刻，我总共做了4套方案。

第一套，是淡蓝色网页，给人一种清新的感觉，还有几条漂亮的金鱼，原意是想表现艺术学院的学子们无拘无束的艺海里畅游（如图），但指导老师严教师说这不像是艺术学院的网页，像一个科技类公司的网页，因此PASS掉了。

第二个方案是在banner上就展现艺术作品，并在banner的背景上的背景上增加大雁塔，以此突出这是一个地址在西安的艺术学院的网页。

为了使网页又有个性，我利用复古的牛皮纸做正文背景，但严教师说那个设计方案看上去不大气（如图），需要再改改，建议我用水墨风格，因此那个方案也被PASS掉了。

持续做了两个方案，严教师都说不行，尽管时刻快来不及了，严教师仍是让我继续做下一个方案，赶时刻也要做出来，能够看得出严教师比较追求完美，严教师果然很“严”，她的严厉让我不断的进步，在教师的指点下，我开始做第三套方案（如图）,依照教师的建议，我采纳红色和黑的水墨设计中国传统风格的网页。

这套网页严教师看了以后还算比较中意，但背景太深，和网页正文有些不和谐，感觉很拘谨、不大气，在严教师的指点下去掉了网页背景，并在网页的美化及内容上做了大量的处置和修改，精心的完成整套网页的设计。

图

图

图

网页的要紧内容

第一选定要用的水墨素材，在那个地址我选的是竹叶，竹叶放在网页的顶部，感觉专门大气，在用CorelDRW和PS结合做了一个“艺术学院”的印章（见图6.2.1）；印章，寓意被人认可，是一种权限，篆体字的印章也是中国古文化的象征。

祥云，也是中国古文化的符号，代表热情、祥和；为了使网页在很漂亮的同时加倍也成心义，我在每一个banner的背景里都增加了印章和祥云图案，印章也代表一种权限，因此展此刻banner的中心，也容易给人留下深刻的印象；为了不阻碍要紧内容，banner背景的祥云采纳的是透明图案（如图）。

西京学院艺术学院采纳专门大气的书法字体，加上艺术学院的口号“艺海无涯，德信载渡”和西京学院的校训“诚”“健”“博”“能”结合，与英文组合在一路，整体感觉很有气魄（如图）。

引导页的处置中，并无加入大量的资料和图片，给人一种简单而有大气的感觉，大量的留白也给人无穷的想象、给阅读者留下悬念，通过“ENTER”引导读者进入下一

个页面（如图6.2.3）。

图6.2.1

图6.2.2

图6.2.3

在整个网页的设计进程中，每一个页面都很清楚的展现导航条，以便于阅读者快速的预览和查找。

网页的每一个页面的水墨画都有转变，首页的banner采纳的时西安的大雁塔，希望阅读者一看到大雁塔，就明白该学院是在西安，首页的左上角提供了公告展现，

用红色的转动字体使之加倍夺目，首页还显现简要的新闻资讯信息和作品展现等，

让学习者对本学习网站有个初步的熟悉；制作成效如图6.2.4。

图6.2.4

学院概况部份要紧介绍学校的大体信息、院系领导、机构设置、办事指南、规章制度，banner的屋子是西京学院艺术学院的艺舫，也是艺术学院的标志建筑之一，以此代表艺术学院，用在学院概况再好只是了；制作成效如图6.2.5。

图6.2.5

同窗们在学习碰到了问题都能够发到交流平台上大伙儿一路讨论，或也能够向教师提问，为此，还专门设置了交流平台，同窗们能够在交流平台上谈论艺术的各类话题，也能够上传自己的作品让大伙儿欣赏，固然，也能够分享好的作品让大伙儿欣赏。

有了交流

平台，艺术网页就活跃起来了，如图6.2.6。

图6.2.6

代码的运用

首页的公告栏，是采纳从下往上循环转动的模式，该代码是在自学Dreamweaver教程中学到的，学有所用，感觉公告栏为了引人注目就应该是转动的。

所用代码：

·有关08届毕业生答辩的通知！

·2021五一放假通知！

·2021清明放假通知！

·2021年开学通知！

·烈火祝贺!

·共青团艺术学院总支委员会第是十三期团

·2020年“十一”国庆放假通知，在那个地址，一个td就表示一个表格，网页的结构确实是由一个个table组成的，把代码写在table里才起作用。

所有页面的导航都采纳div+css样式操纵的，因为页面太多，利用div+css样式会快很多，那个知识也是我在自学教程上学到的。

若是想一个模块的样式都一样，那么咱们只需要给该模块新建一个ID或class即可。

以下代码该网页的导航代码，用的确实是class命名，其中class="daohang"操纵整个table的属性。

首页

学院概况

新闻资讯

教学科研

党群建设

学生工作

作品欣赏

交流平台

留言

网页首页的新闻资讯自动跳图模块用的是JS代码，JS代码对我那个新手来讲确信是可不能写的，因此为了表现出成效，只能从网上下载，下载后也是是同事教我用的。

此刻总算明白，利用JS的原理，其实跟div+css样式差不多，也是操纵整个模块的属性，只是JS是从外文件导入的，也确实是说JS有自己的文件夹，在通过命名才得以运用，而div+css样式的所有代码都在网页本身。

以下是新闻模块自动跳动图的JS代码：

left">