数字媒体技术系网站前端设计与开发_网站前端设计毕业论文.pdf
《数字媒体技术系网站前端设计与开发_网站前端设计毕业论文.pdf》由会员分享,可在线阅读,更多相关《数字媒体技术系网站前端设计与开发_网站前端设计毕业论文.pdf(57页珍藏版)》请在咨信网上搜索。
1、前端设计毕业设计(论文)数字媒体技术系网站前端设计与开发摘要21世纪是信息高速发达的时代,网络作为当今最流行最方 便快捷的媒介也越来越被人们接受,并且融入我们的生活。随 着高校信息化建设的不断推进,网站的作用超越了传统的信息 获取,交流它更能体现组织机构的风采,性质。所以高校院系 建立本院系美观,专业,易于维护管理的网站已经势在必行。本论文主要围绕数字媒体技术专业的门户网站为开发主 题,最基本也是最必须的三个技能。前端的开发中,在页面的 布局时,HTML将元素进行定义,CSS对展示的元素进行定 位,再通过JavaScript实现相应的效果和交互。虽然表面看起 来这些很简单,但这里面需要掌握的东
2、西绝对不会少。在进行 开发前,需要对这些概念弄清楚,弄明白,这样在开发的过程 中才会得心应手。分析并解决实现中的若干技术问题;介绍了个性化页面的 背景及jsp+javascript+mysql系统的一般原理;阐述整个个 性化页面生成系统的系统结构及工作原理;分析了系统实现中 的特殊性,难点和重点;设计实现用户注册,用户登录,用户 管理等jsp页面。分析并解决实现中的若干技术问题;建立完 整的校园网站,进行测试并分析结果。该网站有效地实现用户通过JSP页面访问来进行用户注 册,登陆,并对网站内容进行有效的管理,提升了后期添加和 删除信息的有效性,具有一定的应用价值关键字:JSP;javascri
3、pt;网站美化;交互设计。ABSTRACTThe twenty-first Century is the rapid development of information age,network as the worlds most popular and most convenient media are increasingly accepted by people.Along with the information development,website functions beyond the traditional information acquisition,communica
4、tion which can better reflect the organization style,properties.So universities establish the departments,professional appearance,easy maintenance and management of the site has been imperative.This thesis mainly focuses on digital media technology major portal for the development of the theme,the t
5、hree most basic and necessary skills.Development of the front,in the layout of the page,HTML will define the elements,positioning CSS to display elements,and then through the JavaScript to achieve the corresponding effect and interaction.Although the surface looks like these are very simple,but it n
6、eeds to grasp things never.In the development,the need for these concepts clear,understand,so in the development process will be handy.The main work done in this article is as follows:(1)Introduces the background and general principle of JSP+Javascript+MySQL system personalized pages;(2)Introduces t
7、he structure and working principle of the entire personalization page production system;analysis of the particularity,the difficulty and key system;(3)The design and implementation of user registration,user login,user management and other JSP page.(4)Analyze and solve some technical problems in impl
8、ementation;(5)The establishment of a complete campus site,testing and analysis;The site effectively achieve the user through the JSP page access to user registration,login,and carry on effective management to the website content,enhance the effectiveness of the late addition and deletion of informat
9、ion,has a certain application value.Keywords:JSP;User login;JavaScript;Website Landscaping;Interaction Design目录摘要ABSTRACT第1章绪论.11.1 选题背景及意义.11.2 国内外旅游状况.41.3 研究内容和拟解决的问题.81.4本章小结.10第2章前端开发工具及相关技术.112.1 前端开发环境.112.2 前端开发工具.112.3 前端开发相关技术.132.3.1 Java script 简介.132.3.2 Java script 基本特点.132.3.3 CSS 简介.
10、142.3.4 JQuery.152.4本章小结.18第3章前端布局分析与设计.193.1 前端总体开发流程及设计.193.1.1分层开发.193.1.2代码编写.203.1.3内部测试与后续优化.213.2 前端UI设计.223.2.1模块分布.223.2.2颜色配置.243.2.3 CSS 元素.253.3交互设计与UI.273.4点,线,面的运用.283.4.1点的运用.283.4.2线的运用.293.5网站结构布局及设计.303.5.1网站首页结构.303.5.2 主题鲜明,富有特色.313.5.3 版式编排布局合理性.323.6网站前台页面设计.343.6.1 首页.343.6.2系
11、内概况.343.6.3系内新闻.353.7本章小结.35第4章主要功能的实现.354.!界面设计.354.2具体设计文档.364.3 前台新闻文摘显示.364.3.1网站装饰风格.37II4.3.2网站的链接结构.374.4 可视化设计.374.5 具体实现技术.384.5.1 CSS在数字媒体技术系网站中的应用实例.384.5.2应用JavaScript设计网页.384.6本章小结.42第5章总结.43参考文献.45致谢.32第1章绪论1.1 选题背景及意义如今的互联网已经渗透到我们生活的每个层面,网站的 内容越来越丰富全面,以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快
12、速获取,发布和传递信息。目前很多高校建立起了自己的网站这些网站的建立使得学 校可以突破传统的媒体的限制在网络上开辟的属于自己的新天 地。网络具有超时空性。网络超时空性是种“一人对一人,一人对多人,多人对一人,多人对多人”的传播方式1。超时 空性的形成正式由于在网络在时间层面,空间层面上的开放性 带来的。网络的超时空性使得高校网站对学校本身和外界社会 表现特定的功能,表现在网站有助于改变教育资源的分散性和 分布不均衡性,有效的将教育资源进行整合,从而使得教育资 源使用意义上的无限增长。网络具有的海量存储特性,网络能 形成一个巨大无比的数据库,世界上任何时间任何地点的任何 一件事都能成为网络的信息
13、被广泛传播。高校网站的海量存储特性可以从横向和纵向两方面分析:横向看高校网站往往设置多个板块,分别放置相关内容。不同 板块的信息相互独立,共同构成网站的内容。纵向看,同一个 板块的内部,内容并不是固定不变的,而是不断添加连续更新 的。大量的信息使得高校网站成为个巨大的数据库。交互性体现在高校网站通过设置留言板,论坛,发挥网络1交互的功能,在老师和学生之间建立起了交流渠道。高校网站正是以这些特点为基础,发挥了自己本身的资源 整合,信息传播,多方交流互动等方面的独特功能,成为一座 沟通桥梁。很多高校网站内容多姿多彩,板块,内容争妍斗艳。但不 外乎以一下几部分:学校介绍,新闻发布,招生信息,就业信
14、息,师资力量,科研成果,机构设置,教学素材等。高校网站 的建立和维护需要大量的物力和人,为何要投入去建网站 上?是因为如上所述的高校网站有的独特特性使得建设高校网 站势在必行。这些都促进了各个机构组织的信息化建设,随着高校信息 化建设的不断推进,网站的作用超越了传统的信息获取,交流 它更能体现组织机构的风采,性质。所以高校院系建立本院系 美观,专业,易于维护管理的网站。我们要创建我们本专业的网站数字媒体技术系的专业网 站,网站前端设计最基本的三个技能:HTML,CSS,JavaScript,PS矢量图像编辑技术。这个是前端开发中最基本也是最必 须的三个技能。前端的开发中,在页面的布局时,HTM
15、L将 元素进行定义,CSS对展示的元素进行定位,再通过JavaScript 实现相应的效果和交互。虽然表面看起来这些很简单,但这里 面需要掌握的东西绝对不会少。在进行开发前,需要对这些概 念弄清楚,弄明白,这样在开发的过程中会得心应手。2建立本系网站发挥的作用如下:(1)数字媒体技术系网站是数字媒体专业的“商标”。在这 个高度信息化的社会里,建立数字媒体技术系自己的网站是最 直接的宣传手端。网站的超时空特性,不仅能让本地区的人 们了解学院,更可让世界了解本专业。(2)数字媒体技术系网站巨大的教育资源,网站是实现教 育资源分配的桥梁,它使每一位教师和学生都能均等的得到培 训和受教育的机会,能极大
16、的提高教学效率。(3)数字媒体技术系网站能提供教学互动的全新方式,网 站使得教师与教师,教师与学生,学生与学生之间的交流有了 全新的方式,它不再受到传统课堂的制约。它可以使不同的学 院同处一室,共同讨论,共同提高。地理上的界限在这里模糊 和消失了,数字媒体技术系网站是真正没有围墙的系网站。(4)数字媒体技术系网站能够提供个性化的学习平台,不 同的学生理解世界的方式各不相同,认知世界有诸多方式。网 络提供的丰富资源可以使学生寻觅不同的教育方式,各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径,按自己 的速度接受教育与学习,学生将有机会享受最佳的教育机会,充分发掘自己的内在潜,培植独特的个
17、性和人格。(5)数字媒体技术系网站是最佳的教学研究室,数字媒体 技术系网站与教育类专门网站的有效链接,给本系教学研究带 来了一片新天地,各种优秀教案,专家论坛,网络观摩课,各3科素材,多媒体课件制作等内容为教师教研提供了极佳的平 台。有效地降低教研成本,提高效率。1.2 国内外旅游状况国外的专题院校网站的学习资源比较丰富,交互性和学习 支持服务做得都比较好,但是活动组织形式比较单。英国的学习网站建设得比较完备,无论从资源建设方面,还是从学习支持服务等方面都做得较好,商业性比较强。加拿大学习网站的网络学习导航做得比较形象,趣味性较 强,分类明确,专题资源集中。高校门户网站的访问量,一定程度上反映
18、了各高校的信息 化程度和水平。关于高校门户网站访问排名,有不少网站提供 相关的服务。总体来说,国内的各排名口碑评价不一,而“访 问流量监控”类的排名也会受到诸多因素干扰,不容易作为客 观评价网站的依据。具体如下表1-1所示:表!-!中国高校网站综合排名表排中文世网站信信息影数字资学术文章名名称界排名息量响料档发表世界世界案数情况排名排名量世世界界排排名4名1清华7743910416255收2上海1041282238126交通1收3北京1238510559176不24浙大182022876499225复旦25868234608187妗66山东26253328656312收47哈297061021
19、797239大28武汉352722031915335力09中科35873581605184大7IC)吉林364557064373095大学3国外的高校网站部分国际知名大学如哈佛大学(http:/www harvard edu/)排名第一,PRESENCE 网站信 息量世界排名第6,IMPACT网站信息影响力世界排名第1,OPENNESS数字资料档案数量世界排名第34,EXCELLENCE 学术文章发表情况世界排名第1;麻省理工学院(http:/www.mit.edu。排名第 2,PRESENCE 网站信息量世界排名第8,IMPACT网站信息影响力世界排名 第1,OPENNESS数字资料档案数量
20、世界排名第14,EXCELLENCE学术文章发表情况世界排名第!0;耶鲁大学(http:www.yale.edW)排名第 16,PRESENCE 网 站信息量世界排名第27,IMPACT网站信息影响力世界排名第 16,OPENNESS数字资料档案数量世界排名第246,EXCELLENCE学术文章发表情况世界排名第22;剑桥大学(http:www.cam.ac.uk/)排名第 20,PRESENCE 网站信息量世界排名第43,IMPACT网站信息影响力世界排名 第35,OPENNESS数字资料档案数量世界排名第94,EXCELLENCE学术文章发表情况世界排名第!2;牛津大学(http:/www
21、.ox.ac.uk/)排名第 25,PRESENCE 网 站信息量世界排名第109,IMPACT网站信息影响力世界排名 第37,OPENNESS数字资料档案数量世界排名第64,6EXCELLENCE学术文章发表情况世界排名第13;东京大学(http:/www.u-tokyo.ac.jp/)排名第 42,PRESENCE 网站信息量世界排名第96,IMPACT网站信息影响力世界排名 第103,OPENNESS数字资料档案数量世界排名第52,EXCELLENCE学术文章发表情况世界排名第20;从网站建设情况来看,国内关于校园网站建设较多,虽然 起步较国外晚,但是发展的速度很快,我国高校网站的建设还
22、 有很多不尽如人意的地方,其主要在于网站互动性的缺失,内 容方面没有国外院校网站那么多,是因为国内采取的形式较国 外的不同。在创新方面比较欠缺,交互性的形式少。问题主要 体现在这几个方面:(1)缺乏组织协调,各部门各自为政。由于网络内容建设 工作几乎全部下放到各部门,长期以来基本上一直处于种各 自为政的状态。各部门的网页风格迥异,都有各自不同的做法,不能做到统。这样做出来的网页形形色色,拼凑成一个个学 院,处室网站,显得很不协调。有必要加强组织协调工作,详 细规划,明确分,制定出相应的标准,彻底摒弃网站建设中 的随意性。(2)内容单薄,更新滞后。内容单薄可以说是很大的硬伤。各部门名义上都有了自
23、己的网站,但大多数部门网站能够提供 浏览的内容非常有限,特别是深层次的内容严重缺乏。另外,网上内容严重滞后,更新速度慢。有些部门的网站,时隔一年 7半载,其网页界面和内容仍是老样子。(3)重点失衡:重行政管理,轻教学科研。校园网最主要的 功能应该是要为教学,科研服务。但有些校园网上的内容有关 行政管理的偏多,而有关教学和科研的内容则相对较少。作为 个高校网站,这不能不说是重点失衡,本末倒置。(4)整个网站结构,层次不够清晰,使用不便。目前某些 校园网首页的栏目设计太过粗略,有些内容欠缺,部分栏目名 称及内容归类不够准确,整个结构显得有些混乱,结构层次偏 深,用户需经过多次点击才能看到想要的内容
24、。(5)部分网页制作粗糙,缺乏美感。高校网站,其页面应 简洁明了,一方面不要过于呆板,另一方面也要避免过于花哨,做到实用与美观的有机结合。(6)缺乏检索途径。传播学领域“互动性”研究的理论,为检视当前我国高校 网站之发展提供了一个可操作化的设计架构。“互动性”的内涵 做进步分析,对我国高校网站的建设做浅探,以增强人们 关于互联网传播机制的认知和理解,并推进我国高校网站的在“交互性”方面的建设。1.3 研究内容和拟解决的问题有多种方法会让个网站的外观令人惊叹的。在创建时也 有不同的设计趋势。由于网站是由他们的业务与其他很多人用 来获取信息的途径,所以很重要的设计是很有吸引力的。长期 8面对个设计
25、不当的网站是一件比较痛苦的事情。一旦我们拥 有了一个网站之后,我们会一定会看到它拥有专业的设计,它 可以实现我们的目的。排版创造性使用排版已被广泛的应用于网页设计排版中。这些 好的设计不只是使用的标准字体,而加上其使用自定义的字体。它使网站更具有可读性和吸引力。创造性地使用这种类型的方 式确实可以有效的使用户可以立即得到该网站的新消息,特别 是使用的字体是独无二的,颜色是比较突出的。(2)图片的切换效果研究大图的使用也是种趋势。这些图像是网站增加吸引力的 网。虽然,已被使用过,但是现今它仍然在使用,使用它更具 有现代感。使用这种设计的,设计出的网站也是比较抢眼的,特别是如果你有一个好的图片选择
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 数字 媒体 技术 网站 前端 设计 开发 毕业论文
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【曲****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【曲****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。