影视前端的设计与开发【字数：9622】
影视鉴赏是人们在观看影视节目时产生的复杂又微妙的精神活动，这一过程通过真实的艺术形式来引起众人的观看感受，使观众理解影片的内容、思想内涵，从而达到生理并心理全方位的满足和升华，并进一步加深对生活的本质的认识，以此获得美的艺术熏陶。此次毕业设计围绕影视前端作为开发主题。首先是创意草图的绘制，其次是效果图的呈现，最后运用HTML5与CSS3、JQuery实现网页介绍电影、挖掘电影的教育意义，使之发挥寓教于乐的功能。通过网页和鼠标滚动特效来一步步揭示电影的题名、导演、演员、艺术价值、社会价值，以及影片中的点睛之笔等内容。论文将会概述制作过程中出现的软件，介绍网站设计开发所用到的相关技术，并重点阐述网站定位，其设计风格和功能。最后对此次毕业设计进行总结与思考。
目录
1.绪论 1
1.1课题研究背景 1
1.2课题研究目的 1
1.3课题研究意义 2
2.相关技术和制作软件的介绍 3
2.1相关技术介绍 3
2.1.1 HTMl5简介 3
2.1.2 CSS3简介 3
2.1.3 Bootstrap简介 3
2.1.4 JavaScript简介 4
2.1.5 Jquery简介 4
2.2制作软件的介绍 4
2.2.1 草图设计软件 4
2.2.2 页面设计软件 5
2.2.3 网页编辑器 6
3.网站规划与设计 8
3.1 网站规划 8
3.1.1 网站定位 8
3.1.2 网站目标 8
3.2 设计风格 8
3.2.1 色彩搭配 8
3.2.2 logo设计 9
3.2.3 版面布局设计 10
3.2.4 文字设计 15
3.3 设计功能 15
3.3.1 UI功能 16
3.3.2 图片轮播 17
4.网站开发与实现 19
4.1 实现侧边栏导航布局 19
4.1.1内容相同部分 19
4.1.2内容不同部分的部分代码说明 20 *好棒文|www.hbsrm.com +Q: &351916072&
4.2 实现视差滚动布局 23
4.2.1 滚动显示标题 23
4.2.2 滚动介绍电影内容 23
5.总结与思考 25
参考文献 26
致谢 27
1.绪论
1.1课题研究背景
网页设计的发展早已从以前的纯文本，转化为如今的图文并茂、视听元素、多媒体互动共享的时代。科技的日新月异对网页设计提出了新的要求：网页设计不仅要在功能上不断完善，还要在视觉效果上不断创新，展现各自的特性，给浏览者带来全新的体验。
网页设计是网页设计师在当前时间段，可以获得的制作技术和艺术鉴赏能力作为基本要求，按照制作的目的和所需要的要求，自主自觉地对网页构成的要素进行有规划有目的的创造性的思维活动。网页设计已经成为了设计和艺术皆极其重要的组成元素，同时也是这两个活动的重要分支；更重要的是，随着网络技术的不断发展，网页设计也在快速革新和进步。网页设计不仅仅是一种制作的技术，更是艺术和设计的和谐统一和新的发展；一个好的网页在带给用户强烈的视觉体验的同时，也能很好的起到信息传递的功能。
网页的视觉设计是对视觉设计的一种继承和延伸。为了更好的抓住用户眼球，网页必须具有足够好的视觉感受，以及信息传达和引导用户视觉关注度的设计。用户一贯的视觉生理和心理特征，让用户更喜爱简洁、趣味、个性、有用性的网页设计；其中，好的色彩搭配可以加强情感感染力，增加文字的统一性，突出交互设计的体验，创造丰富的板式格局，帮助网页建立个性化的形象，同时帮助浏览者记忆和解读网站传达的信息。
另外，与时俱进的网络技术能够对网页视觉体验进行统计和及时反馈，并随着审美和实用性的不断变化，网站开发者可以依此不断完善自己的网站，以此来获得用户的好感和支持；这种网页设计的完善性，对维持一个网站的关注度有着极其重要的作用。
1.2课题研究目的
电影拥有强大的艺术感染力，对人们的生活和思想起着无法忽视的作用；由此，电影的“营业主义上加一点良心”、寓教于乐的功能就格外重要。
本次毕业设计选取《少年派的奇幻漂流》作为介绍电影，通过网页设计开发介绍电影的基本信息（包括题名，导演，演员，角色，幕后人员），影片内容简要概述，影片预告片，影片的社会评价和艺术评价等内容；通过网页的导航实现页面之间的链接来实现页面的跳转，利用鼠标的滚动来控制画面的切换和运动，让你不需要视频也可以感受电影的动态效果，领略电影的艺术风采，探索电影的动画奥秘。
1.3课题研究意义
影视鉴赏是人们在观看影视节目时产生的复杂又微妙的精神活动，这一过程通过真实的艺术形式来引起众人的观看感受，使观众理解影片的内容、思想内涵，从而达到生理并心理全方位的满足和升华，并进一步加深对生活的本质的认识，以此获得美的艺术熏陶。
本课题通过网页实现电影的艺术鉴赏，使人清晰明了的了解《少年派的奇幻漂流》的基本信息，简介内容和相关评价；更能突出网页设计的强大功能，不需要视频，通过鼠标在网页中的滚动效果同样可以实现观看视频的快感。
本次毕业设计使本人充分发现了Boostrap和jQuery的强大功能，Bootstrap的框架搭建和jQuery的UI交互特效使得网页代码能够更简洁，更有效的实现网页设计的各项功能。
2.相关技术和制作软件的介绍
2.1相关技术介绍
2.1.1 HTMl5简介
HTML5是最新的HTML标准，专为承载丰富的web语言设计，并且无需额外的插件；他拥有新的涵义和元素，同时也删除了一些冗余的元素以便敲写更为简单易懂的代码；在web应用程序的搭建上，HTML5提供了新的元素和API使之简化，并且可以用本地存储代替cookie，这是HTML无法做到的；更重要的是，HTML5是跨平台的，在各种设备（PC，平板，手机，电视机等）上都能运行，而且可以在网页上直接调试和修改代码，省去了又要打开代码编辑器的时间和运行空间。
目录
1.绪论 1
1.1课题研究背景 1
1.2课题研究目的 1
1.3课题研究意义 2
2.相关技术和制作软件的介绍 3
2.1相关技术介绍 3
2.1.1 HTMl5简介 3
2.1.2 CSS3简介 3
2.1.3 Bootstrap简介 3
2.1.4 JavaScript简介 4
2.1.5 Jquery简介 4
2.2制作软件的介绍 4
2.2.1 草图设计软件 4
2.2.2 页面设计软件 5
2.2.3 网页编辑器 6
3.网站规划与设计 8
3.1 网站规划 8
3.1.1 网站定位 8
3.1.2 网站目标 8
3.2 设计风格 8
3.2.1 色彩搭配 8
3.2.2 logo设计 9
3.2.3 版面布局设计 10
3.2.4 文字设计 15
3.3 设计功能 15
3.3.1 UI功能 16
3.3.2 图片轮播 17
4.网站开发与实现 19
4.1 实现侧边栏导航布局 19
4.1.1内容相同部分 19
4.1.2内容不同部分的部分代码说明 20 *好棒文|www.hbsrm.com +Q: &351916072&
4.2 实现视差滚动布局 23
4.2.1 滚动显示标题 23
4.2.2 滚动介绍电影内容 23
5.总结与思考 25
参考文献 26
致谢 27
1.绪论
1.1课题研究背景
网页设计的发展早已从以前的纯文本，转化为如今的图文并茂、视听元素、多媒体互动共享的时代。科技的日新月异对网页设计提出了新的要求：网页设计不仅要在功能上不断完善，还要在视觉效果上不断创新，展现各自的特性，给浏览者带来全新的体验。
网页设计是网页设计师在当前时间段，可以获得的制作技术和艺术鉴赏能力作为基本要求，按照制作的目的和所需要的要求，自主自觉地对网页构成的要素进行有规划有目的的创造性的思维活动。网页设计已经成为了设计和艺术皆极其重要的组成元素，同时也是这两个活动的重要分支；更重要的是，随着网络技术的不断发展，网页设计也在快速革新和进步。网页设计不仅仅是一种制作的技术，更是艺术和设计的和谐统一和新的发展；一个好的网页在带给用户强烈的视觉体验的同时，也能很好的起到信息传递的功能。
网页的视觉设计是对视觉设计的一种继承和延伸。为了更好的抓住用户眼球，网页必须具有足够好的视觉感受，以及信息传达和引导用户视觉关注度的设计。用户一贯的视觉生理和心理特征，让用户更喜爱简洁、趣味、个性、有用性的网页设计；其中，好的色彩搭配可以加强情感感染力，增加文字的统一性，突出交互设计的体验，创造丰富的板式格局，帮助网页建立个性化的形象，同时帮助浏览者记忆和解读网站传达的信息。
另外，与时俱进的网络技术能够对网页视觉体验进行统计和及时反馈，并随着审美和实用性的不断变化，网站开发者可以依此不断完善自己的网站，以此来获得用户的好感和支持；这种网页设计的完善性，对维持一个网站的关注度有着极其重要的作用。
1.2课题研究目的
电影拥有强大的艺术感染力，对人们的生活和思想起着无法忽视的作用；由此，电影的“营业主义上加一点良心”、寓教于乐的功能就格外重要。
本次毕业设计选取《少年派的奇幻漂流》作为介绍电影，通过网页设计开发介绍电影的基本信息（包括题名，导演，演员，角色，幕后人员），影片内容简要概述，影片预告片，影片的社会评价和艺术评价等内容；通过网页的导航实现页面之间的链接来实现页面的跳转，利用鼠标的滚动来控制画面的切换和运动，让你不需要视频也可以感受电影的动态效果，领略电影的艺术风采，探索电影的动画奥秘。
1.3课题研究意义
影视鉴赏是人们在观看影视节目时产生的复杂又微妙的精神活动，这一过程通过真实的艺术形式来引起众人的观看感受，使观众理解影片的内容、思想内涵，从而达到生理并心理全方位的满足和升华，并进一步加深对生活的本质的认识，以此获得美的艺术熏陶。
本课题通过网页实现电影的艺术鉴赏，使人清晰明了的了解《少年派的奇幻漂流》的基本信息，简介内容和相关评价；更能突出网页设计的强大功能，不需要视频，通过鼠标在网页中的滚动效果同样可以实现观看视频的快感。
本次毕业设计使本人充分发现了Boostrap和jQuery的强大功能，Bootstrap的框架搭建和jQuery的UI交互特效使得网页代码能够更简洁，更有效的实现网页设计的各项功能。
2.相关技术和制作软件的介绍
2.1相关技术介绍
2.1.1 HTMl5简介
HTML5是最新的HTML标准，专为承载丰富的web语言设计，并且无需额外的插件；他拥有新的涵义和元素，同时也删除了一些冗余的元素以便敲写更为简单易懂的代码；在web应用程序的搭建上，HTML5提供了新的元素和API使之简化，并且可以用本地存储代替cookie，这是HTML无法做到的；更重要的是，HTML5是跨平台的，在各种设备（PC，平板，手机，电视机等）上都能运行，而且可以在网页上直接调试和修改代码，省去了又要打开代码编辑器的时间和运行空间。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/ysl/szmt/159.html
