城晚报记者 李丽

虎年大年初一，8部电影逐鹿春节档，其中3部动画片全部来自广东出品，里面就有诞生17年、播出超过5000集的《喜羊羊与灰太狼》全新大电影《筐出未来》。

2005年，黄伟明执导的第一部《喜羊羊与灰太狼》正式播出。该剧讲述了羊羊族群与灰太狼家族之间斗智斗勇的故事，在小观众中大受欢迎，导演黄伟明也因此被外界称为“喜羊羊之父”。2009年，在小荧屏火了4年之后，《喜羊羊与灰太狼》推出了首部大电影《喜羊羊与灰太狼之牛气冲天》，该片一炮而红，获得了1亿元的高票房。在接下来的6年里，这个动画IP又先后推出了《虎虎生威》《兔年顶呱呱》《开心闯龙年》《喜气洋洋过蛇年》《飞马奇遇记》《羊年喜羊羊》，加上《牛气冲天》，共上映了6部十二生肖主题的贺岁电影。但2016年春节，喜羊羊大电影却意外“失约”大银幕。

阔别7年之久，喜羊羊大电影再次回归春节档大银幕——没走生肖系列的老路，而是捧出了一部篮球题材的全新喜羊羊大电影《筐出未来》。电影里，喜羊羊和他的小伙伴们组成“守护者队”，和以新角色“虎翼”为主力的“烈虎队”在篮球场展开激烈厮杀。在这个过程中，每个角色都必须面对自己的弱点。值得一提的是，影片在上映前的两轮点映中表现不俗：淘票票开分9.5，微博大V推荐度93%，虎扑期待值99%，点映票房突破1000万元。

“不敢说打造什么‘宇宙’，只是想看看这个十多年的IP还能不能做出点新花样。”近日，《喜羊羊与灰太狼之筐出未来》在广州举行首映礼，“喜羊羊之父”黄伟明接受了羊城晚报记者的独家专访，透露过去七年来的创作轨迹，并展望这个老牌动画IP的未来。

团队里的年轻人说，他们想拍打篮球

羊城晚报：在《喜羊羊与灰太狼之筐出未来》之前，《喜羊羊与灰太狼之筐出胜利》的剧集已经播出一年，并且很受欢迎，豆瓣评分高达8.5。篮球这个题材，你们最初是怎么想到的？

黄伟明：因为我们团队里几个动画导演都很爱打篮球。这不奇怪，现在很多年轻人都喜欢打篮球。当时我们正在找新选题，然后他们就提出能不能做篮球。当时的场景，就很像现在电影里喜羊羊和沸羊羊跟教练说“我要打篮球”一样，他们说：“导演，我们要拍打篮球。”

羊城晚报：你当时立刻同意了吗？

黄伟明：当时我觉得这个想法很特别，但也有风险。比方说，不打篮球的观众会看吗？我说，可以，只要你们能做出一个不打篮球的人也喜欢的东西。

羊城晚报：让不打篮球的人也喜欢，这一点你们觉得要如何做到呢？

黄伟明：其实篮球动画里不止有一场场的赛事，我们更注重呈现各个角色之间的关系以及他们的成长。

羊城晚报：在TV版里展现人物关系和成长，空间自然足够，大电影版怎么办？

黄伟明：确实，TV系列60集可以讲很多故事。90分钟的电影时间很短，我们必须把握住很多小细节。在这部大电影里，我们其实藏了很多前后呼应的小彩蛋，甚至每一个道具的出场都有它的特殊意义，比如贴纸、相框、门钥匙这些小道具。点映的时候我们也开心地看到，除了那些紧张的篮球比赛，观众确实通过我们设计的细节感受到了角色的情感和成长。

羊城晚报：你们现在团队里年纪最小的成员是多大？

黄伟明：没特地统计过，但现在“00后”都有了。其实这十几年，有很多人参与到这个IP中，他们中有的就是因为小时候喜欢喜羊羊才进入团队。

头大手脚短没法投篮，要赋予肌肉感

羊城晚报：虎翼这个角色，在过去的喜羊羊系列里从未出现过。角色设计初衷是什么？

黄伟明：首先肯定因为是虎年嘛，我们想设计一个老虎的角色。然后我们希望他作为喜羊羊一个亦敌亦友的存在，最好看起来就很厉害的样子。最后我们给他起名叫虎翼，是想祝福大家在新的一年里如虎添翼。这个角色非常受欢迎，现在已经有不少“粉丝”了，我们肯定会在以后的故事里再让他出场。

羊城晚报：我们发现跟过去的《喜羊羊与灰太狼》相比，《筐出未来》里羊和狼在形体上有些不一样。

黄伟明：确实，以前的角色都是头大手脚短，但这样就没办法投篮了，所以我们加长了他们的手脚，并且赋予他们肌肉感，让角色看起来更有能量。当然我们也不是一下子进行很大的变化，而是在一些镜头里去调整角色身形的比例。

羊城晚报：运动题材有一个天生优势，就是它具备天然的戏剧冲突。

黄伟明：对，运动题材本身就是强冲突，节奏比较紧张，再加上我们在剧情的设定上又做了一些跌宕起伏的设定。尽管一场比赛的结局不过就是你赢或者我赢，但在这个过程里怎么去呈现，这就是可以让我们尽情发挥的地方了。

羊城晚报：做体育题材的动画，在制作上比较难的地方在哪里？

黄伟明：我们做篮球，最大的压力就是不希望胡乱做。虽然动画片表现起来肯定比现实更夸张，但我们还是希望每一幕都能根据现实的篮球规则、姿势包括投篮动作来设计。我们会翻阅很多资料，像我自己虽然不打篮球，但现在也对篮球大大小小的规则都滚瓜烂熟了。我们希望既然做了，就要做得比较标准，尽量做出一部经典的篮球动画电影。

七年没来贺岁档，要做就要做最好的

羊城晚报：过去7年没做《喜羊羊》贺岁大电影，为什么？

黄伟明：其实这7年，我们TV版也做得很好。大电影停了7年，原因就是想着要么不做，要做就做一个最好的，这次我们找到感觉了。

羊城晚报：制片人在首映礼上说，《筐出未来》剧本总共改了37稿，分镜做了74版，最后整部电影的镜头有2142个。要不是规定了不许再改，可能团队还想改得更多，甚至会赶不上大年初一跟观众见面。

黄伟明：对，就像制片人说的，这背后都是“累水”——大家累出的汗水。 改了那么多版，因为刚开始的剧本比较散，慢慢地有一些线拿掉了，又有一些增加进来。在分镜的时候也是不断改，总之就是一个不断修整、不断创作的过程。

羊城晚报：运动题材的动画，日本等一些国家很擅长，我们怎么做出自己的特色？

黄伟明：我们希望在各方面都做出自己的特点，特别是在故事上。其实我们都是在讲身边人的故事，无论孩子还是大人，都能在片子里找到代入感和共鸣。广州首映礼上，有家长说，他从片中的父子关系里，学会了作为一个爸爸要怎么去关心自己的儿子。片中有一段灰太狼跟虎翼爸爸的对话，很多父母都表示他们看完之后感触良深。还有虎翼的爸爸是个外卖员，他工作的时候还会受到顾客“差评”，这些都是来自生活现实。

羊城晚报：片中还通过虎翼父子展现了一种家长和孩子之间的普遍矛盾，家长气孩子不好好念书，孩子则觉得家长不懂自己。

黄伟明：我女儿第一次看完电影之后就跟我说：“爸爸，里面有一句话就是你平时经常跟我说的。”我问她是哪一句，但她到现在都不肯告诉我。（笑）其实无论是关心小朋友的功课，还是注重小朋友的梦想，这两种关注本身都没有错，只是爱的表现形式不同。这也正是我们想通过一场场篮球赛去真正表达的东西——那些相互的爱和理解，以及遇到困难不要气馁，热爱就是你继续下去的理由，等等。

无论哪个年代的观众，都爱善良美好

羊城晚报：听说你们还会做TV版的足球系列？

黄伟明：对，我们想做一个“运动英雄”系列，此外还会有冒险系列，总之会不断尝试一些新的领域，看看这个十几年的IP能做出什么不一样的新选题。

羊城晚报：十几年下来，觉得你们面对的观众有什么变化吗？

黄伟明：曾经的那批观众都长大了。北京点映会上，以前看喜羊羊长大的观众，现在都是带着他们的儿子、女儿来看。我们希望今天的喜羊羊能带给各个年龄段的观众情感能量。

羊城晚报：面对新一代的观众，要给他们什么不一样的东西？

黄伟明：其实喜羊羊这个IP核心的东西从来没变，就是美好、善良、励志……无论哪个年代，这都是人们心底里最接受的东西。就像我们这次的大电影里完全没有反派，没有那种你死我活，但大家还是看得很开心。

羊城晚报：片中比赛结束后，喜羊羊跟灰太狼击掌的时候，两人有段对话：“我们认识多久了？”“我们认识5000多集了。”这个梗是你们在跟老观众打招呼吗？

黄伟明：对，就是好玩。说认识多少年没意思，不如说认识多少集这样好玩。就相当于我们在跟那些看着喜羊羊成长的观众说声“大家好”。

羊城晚报：近年来，不少国漫作品相继在市场上取得了成功。作为“国漫老字号”，喜羊羊与灰太狼系列如何应对新的挑战？

黄伟明：我觉得还是把每一个作品都做好，不要因为自己是“老字号”就松懈。其实我们并不想算自己有多少过去的观众基础，因为我们希望哪怕是以前从没看过喜羊羊系列的人，看到这部电影也会喜欢。这是我们做这部大电影的初衷。

羊城晚报：隔了7年重回贺岁档，今年有三部动画作品同场竞争，有没有信心？

黄伟明：还是那句话，先做好自己。现在我们已经收获了不少好评，我自己还是挺开心的，起码作品做出来之后受到了认可。希望春节档真正到来的时候，还会有更多的观众去选择并喜欢我们的作品。

来源： 羊城晚报

网页设计与制作》

大作业报告

学院：**学院

姓名：

学号：

专业:

摘要：宫崎骏（Miyazaki Hayao，1941年1月5日-），日本知名动画导演、动画师及漫画家， 出生于东京都文京区，1963年进入东映动画公司，1985年与高烟勋共同创立古卜力工作案，其出品的动漫电影以精湛的技术、动人的故事和温暖的风格在世界动漫界独树一帜，能与美国迪士尼、 梦工厂的作品相比肩，受到全世界不分种族、不分国籍、不分文化的各类观众的一致好评。其动国作品大多涉及人类与自然之间的关系、和平主义及女权运动。宫崎骏在日本动画界占有超重里级 的地位，更在全球动画界具有无可替代的地位，迪士尼称他为“动画界的黑泽明，《时代周刊》评价他为全球最具影响力的人物。

下面是我对web简单的一个应用，利用dreamwave工具，和photoshop软件设计了一个具有个人风格的个人网站，首先我先从网站设计的方向和目的、网站设计中涉及的知识点、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个完整的网站制作过程。本论文详细的介绍了整个网站设计的全过程。虽然还有一些不足之处，但页面整体比较美观大方，具有线上店铺风格，效果良好。

设计主要包括以下几个版块：

1.人物介绍板块

2.采访视频板块

3.手稿欣赏板块

4.主要作品模块

网站规划思想

宫崎骏（Miyazaki Hayao，1941年1月5日-），日本知名动画导演、动画师及漫画家， 出生于东京都文京区，1963年进入东映动画公司，1985年与高烟勋共同创立古卜力工作案，其出品的动漫电影以精湛的技术、动人的故事和温暖的风格在世界动漫界独树一帜，能与美国迪士尼、 梦工厂的作品相比肩，受到全世界不分种族、不分国籍、不分文化的各类观众的一致好评。其动国作品大多涉及人类与自然之间的关系、和平主义及女权运动。宫崎骏在日本动画界占有超重里级 的地位，更在全球动画界具有无可替代的地位，迪士尼称他为“动画界的黑泽明，《时代周刊》评价他为全球最具影响力的人物。

作为宫崎骏的动画迷，我结合课上所需的HTML网页知识设计一个介绍宫崎骏的网页，包含图文、视频等多种素材可以选择。

网站的目录结构如下：

css ------存放CSS文件

imgs ------存放图片文件

js -------存放js文件

index.html -----------人物介绍页面

yinyue.html -----------采访视频页面

shougao.html ---------手稿欣赏页面

liuyan.html---------主要作品页面

综合知识的运用情况

1. 层的使用：在这次网页设计过程中，使用了大量表格网格布局，便于有规则得排列尺寸相近的图片

2、使用链接：为方便读者的查阅，在各页面n****栏都设置了页面链接。

3、插入跳转菜单为了使读者能快捷的回到自己感兴趣的页面，于是在各个页面都插入了跳转菜单。

网页中涉及的知识点

1、可视化网站设计制作软件dreamweaver的熟练使用，站点的创建、导入以及管理；

　　2、主页的创建和设置，模块的保存与应用和子网页的创建、完成；

　　3、用photoshop软件对图片素材进行必要的处理；

　　4、网站整体布局和超链接的添加；

遇到的问题及解决办法

难点:

1.body背景图片显示问题

2.页面美观度不够高，Dreamewver CS6软件应用不够熟练，软件中所涉及得制作方法以及工具没有更好的应用。

解决办法：

1.配色原则：避免网页杂、乱，有时候单一色彩不为也是一种独特，用色柔和，减少视觉混乱，对比度强的色彩不能应用于一般网站。

2.字体问题：字体是整个网页最醒目的部分，若字体不协调会给人一种枯燥的感觉，避免用杂色字体，防止浏览者眼花缭乱。

3.制作习惯：制作一个网页首要的是完美的构思，应该先构思好再动手制作，素材搜集完整，根据主题选材，不能脱离主题，确保所用材料与主题相关。

4.完整性：网站的基本格式完整，相关链接，友情链接必不可少，这也增加了网页的方便性

5.合适选取适当尺寸的背景图片非常重要

网页截图

首页（index.html）:使用了

HTML5结构标签，对宫崎骏的事迹进行了高度概括。

头部:（一个顶部图片和n****）

中间:

尾部:

2 采访视频:使用video标签嵌入一个本地mp4视频

3手稿欣赏:使用无框线的三行两列的表格对手稿进行布局排列

4 主要作品：使用带有框线和背景色的表格对主要作品进行罗列，内部文字居中，超链接加蓝色下划线。

心得与体会：

建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。首先，我们要确立网站主题。网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于像我这样的个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。

然后，我们要找材料。明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

找到材料后，我们还要规划网站。一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。

做好以上三步之后，我们就要选择合适的制作工具。尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，在这里，我们一般都是用有“网络三剑客”之称的Dreamweaver、Fireworks、flash来制作网页，对于图片部分的处理，个人觉得Photoshop比较好用。

最后，我们就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。网页做好之后，就要发布到Web服务器上，才能够让全世界的朋友观看，还要不断地进行宣传，这样才能让更多的朋友认识它。

以上就是我对于网页制作的一些个人心得，由于本人的技术还不是很成熟，还存在很多的不足(如：背景过于单调和网页布置不合理)。选择学习这门课是很正确的选择，虽然在以后不会再有机会去上了，但我还是会通过各种方式继续页设计和制作的，同时很感谢带我入门的徐兵老师，让我有机会去学习有关网页的知识，谢谢！

• 录

1. 搞清浏览器作用
2. 搞清什么是HTML
3. html作用
4. html我们涉及哪些基础知识
5. 常见html单词及单词功能作用有哪些
6. html结构
7. html与CSS关系
8. 1、搞清浏览器作用

浏览器主要作用是浏览网页作用，在DIV+CSS制作开发时候仍然是浏览我们制作开发重构网页作用。浏览器可测试我们开发的CSS网页兼容性、网页效果、因开发疏忽导致错误等作用。

在CSS测试（CSS工具）里常用浏览器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、苹果Safari、Opera主流浏览器。至于傲游、360浏览器因为他们使用你系统自带的IE内核，所以不必考虑，只要支持你浏览器版本即支持类似这2款浏览器

2、搞清什么是HTML

html是hypertext markup language的缩写，即超文本标记语言。可以这样理解，HTML文件是一定规则规律以html\htm等命名后缀名的文本文件。

3、html作用

HTML作用，通过一定html自身语法结构（html结构），显示文字、图片、动画（flash）、视频或音频音乐。而CSS则是配合html实现漂亮的各式各样的页面内容。

4、html我们涉及哪些基础知识

Html扩展名、html源代码、DOCTYPE、html结构、head标签、charset

5、常见html单词及单词功能作用有哪些

a、B(strong)：加粗

b、P：换行实例：<p>我是第一段内容</p><p>我是第二段内容</p>

c、Br：提行实例：我是第一排<br />我是第二排内容

d、px：像素、长度宽度单位

实例：width:30px; 宽度30像素

e、ul、ol、li列表标签实例：

<ul> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> <ol> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ol>

f、div与span：都是html标签

实例：<div>我占一行</div><span>我多长占多长位置</span>

两者区别：DIV占用1整排，而SPAN所占位置是内容多少占用多长长度

g、img：图片引用标签

<img src="/css-images/css-logo.gif" />图片标签

h、dl dt dd：CSS的另类表格组合

实例：

<dl>

<dt>我是标题</dt>

<dd>列表一</dd>

<dd>列表二</dd>

</dl>

j、title：标题标签

实例：<title>标题</title>

特点，在一个网页内只能使用一次（只能出现一次）

6、html结构 - TOP

这里Html结构可用于每次新建制作网页模板使用。

旧html结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DIVCSS5标题</title>

</head>

<body>

具体网页呈现内容

</body>

</html>

经过CSS教程网的DIVCSS5优化后的HTML结构（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

<title>标题</title>

<meta name="keywords" content="关键字" />

<meta name="description" content="网页描述" />

<link href="这里CSS文件引入地址" rel="stylesheet" type="text/css" />

内容www.divcss5.com提供

7、html与CSS关系 - TOP

搞清楚html与CSS关系很重要，也是认识CSS基础。html与CSS关系解释：HTML内放置显示网页要显示的具体内容（图片、文字、动画等）而CSS是控制HTML内这些具体内容的怎么显示、怎么排版、颜色、大小、宽度、高度、左右布局等显示样式。

以上7点是学习CSS的html基础，可能还不完善，但是在以后运用的时候DIVCSS5会给大家详细、本简单CSS教程分为15节，此节DIV CSS教程以文字内容为主，以后会穿插更多实例和图例、跟我做的内容希望对大家能有帮助。