制作教程.docx

制作教程.docx

《制作教程.docx》由会员分享，可在线阅读，更多相关《制作教程.docx（55页珍藏版）》请在冰点文库上搜索。

制作教程

制作小组教程

目录

制作小组教程1

1.DVB普通模版制作2

1.1概述2

1.2学习目的2

1.3学习内容2

1.3.1PSD图分析3

1.3.2切图5

1.3.3在DreamweaverMX进行制作HTM页面6

1.3.4检查12

1.3.5结语12

2.DVB制作规范（fram）13

2.1主要内容13

2.1.1背景概述13

2.1.2PSD图分析13

2.1.3切图14

2.1.4创建和制作网页14

2.1.5总结20

3.视、音频的调用20

3.1视、音频的调用的代码20

3.2视、音频的调用的具体制作22

3.3视频的全屏播放25

4.焦点定位27

5.设置焦点颜色28

6.图片、文字滚动效果34

6.1iframe滚动的制作34

6.2marquee滚动效果37

7.焦点移动效果38

8.文件结构和命名规则40

8.1文件结构41

8.2文件命名41

9.内容页的制作41

9.1学习目的42

9.2内容页的制作42

9.3内容中带图片的编排实例讲解45

1.DVB普通模版制作

1.1概述

随着科技的发展、人民生活水平的提高、审美观不断的提升，作为数字电视的重要栏目数据广播，掌握其页面的制作技巧变得非常的有必要。

1.2学习目的

熟悉数据广播普通模版制作从PSD图到HTM文件制作。

1.3学习内容

第一步：

PSD图分析

第二步：

切图

第三步：

在DreamweaverMX进行制作HTM页面

第四步：

检查

结语

1.3.1PSD图分析

1、我们拿一张比较典型的PSD图来进行制作，可以看到页面分为左右结构，左边为栏目名称及栏目链接按钮，右边为标题及上下页按钮。

（图一）

2、进一步页面分析：

左边为栏目链接按钮,是否有交互效果（即鼠标经过效果）,确定有交互效果如下图二,故链接按钮区域必须通过切片工具切出图片以供制作。

（图二）

下图中右上红色框中为标题栏，要随时更新。

右下方黄色框中为上下页按钮并具有交互效果如下图三.所以上下页按钮我们也要通过切片工具切出图片以供制作。

（图三）

初步分析完成,先隐藏掉要切出的部分,再进行另存GIF格式图片（图四）存储底图。

注：

使用大图片的情况下：

尽量使用整块图片，避免小图琐碎拼凑。

图片输出一般为GIF格式效果较佳。

背景图片文件大小不要超过50K（除特殊情况外）。

（图四）

1.3.2切图

通过切片工具对栏目链接按钮及上下页按钮进行切图，为了表格制作的精简我们把栏目链接按钮左右各多切出一些（如图五）。

我们先在宽620pixels及高506pixels的位置各拉一条辅助线（为什么要这样做呢？

后面表格制作时们再说明）在切片的同时可以灵活运用辅助线来帮助我们进行切图，当然切片亦可辅助我们的表格制作。

例：

表格的大小，位置的确定等。

（图五）

切好图之后把按钮图片进行逐一另存GIF格式图片（包括交互前和交互后）得到（图六）一系列图片文件。

（图六）

1.3.3在DreamweaverMX进行制作HTM页面

新建HTM页面，在页空白处点击鼠标右键设置页面属性（图七），左边界和顶部边界一定要设置为0，否则会出现滚屏现象即页面上下晃动。

注：

对于网页和该网页中包含的图片等文件,尽量使用比较接近的命名，首页必须使用index.htm命名。

比如：

网页名字为：

index.htm

网页中的图片为：

index.gif、index.jpg……

（图七）

得到（图八）：

（图八）

制作表格

3.1插入620*506表格。

注：

在绘制表格时，可绘制大小为640x526的表格。

因为集成了iPanel2.0的浏览器的部分STB支持这样的定义。

但建议在不清楚具体环境的情况下，内容页尺寸（长、宽）应该≤屏幕显示尺寸（长、宽）20。

例如：

屏幕显示尺寸为640x526，在制作时，内容页最大表格尺寸应该为：

长≤620宽≤506（单位：

pixels）。

3.2进行表格拆分如下（图九）.

（图九）

3.3在左边单元格插入等宽表格,并进行拆分为6行，设置行高（图十）。

注：

尽量定义好各表格单元格的尺寸。

因为电脑的硬件环境资源非电视所能及，由于环境资源的限制，嵌入机顶盒中的浏览器在识别表格性能上跟IE还有差距（目前2.0的版本对表格定义大有改进）。

（图十）

3.4在后面五行单元格插入栏目链接按钮（图十一）。

注:

如无交互效果只需插入图片即可

（图十一）

3.5得到（图十二）。

（图十二）

3.6同样的方法逐一插入栏目链接按钮得到如（图十三）。

（图十三）

3.7进行右边标题及上下页表格制作。

插入一个包括标题及上下页按钮的总表格即右下单元格等大小的全新表格（图十四）,并进行如图拆分单元格（图十五），中间单元格为标题栏，下面为上下页按钮单元格。

（图十四）

（图十五）

并对标题栏进行单元格拆分即进行标题位置确定（图十六）,五行标题，注意行与行之间有一定的间距，并对标题位置进行填充背景颜色（为了页面更加美观可以视情况而定）。

（图十六）

在下面单元格插入等宽，高为上下页按钮高度的表格，并进行拆分为上下页按钮位置进行定位（图十七）。

（图十七）

4、表格制作完成,把上下页按钮插入指定表格,方法同插入栏目链接按钮一样得到如（图十八）。

（图十八）

5、进行标题填充,整个页面基本完成（图十九）。

（图十九）

1.3.4检查

在仿真工具或数字电视上进行检查页面，最终确定无误。

注：

仿真工具为我公司研发的辅助制作并完全模拟电视显示效果的软件。

1.3.5结语

1）在模版的制作过程中注意表格的大小，以免撑破总的表格长宽造成滚屏现象。

2）充分利用表格属性栏的上下左右居中对齐，能够很好的精减页面的表格数量。

3）希望大家在不断的练习中，掌握更多的制作技巧，制作出更加精美的数据广播页面。

2.DVB制作规范（fram）

2.1主要内容

第一步：

背景概述

第二步：

PSD图分析

第三步：

切图

第四步：

创建和制作网页

总结

2.1.1背景概述

对一个刚刚接触到数字电视制作的的初级者来说，最想做的就是制作出自己满意的电视网站，可是制作类型繁多，电视网站和传统电脑网页又有区别，手边资源如此稀少，又该如何下手呢？

为了迈出第一步，接下来就以深圳天威视窗为主题来讲解我们数字电视网页制作中常用的一种做法：

“fram结构”。

2.1.2PSD图分析

深圳天威视窗的应用结构相对比较简单（图1）（列举其中一个频道692鹏城车市为例），主要分为左右结构，左边是整个频道的栏目例表，共6个栏目，右边上面是一个广告位，右中是当前栏目的条目内容。

由于整个栏目内容比较多，为了避免页面文件重复使用，减少整个网站的文件数量，提高浏览速度，根据客户的需求，所以我们采用fram框架的结构来制作。

（图1）

2.1.3切图

根据PSD的分析，我们决定采用左右式的框架结构，对于（图1）这样整体的页面我们需要做相应的调整，以图中明显的竖线为分界，将整个图片分为左右两个部分，另外还有一些小图标是需要与背景图分离的：

1.左边的栏目按钮条需要切出，因为按钮有交互效果，所以需要切两次，一次是交互前效果的，一次是交互后效果的；

2.上一页、下一页、返回按钮由于是活动的，需要切出来；

3.广告位的图片方便随时更换，需要切出来；

4.最后，将左边的底图和右边的底图分开保存；

注意：

切按钮的时候一定要注意按钮的大小，不能太大，也不能太小，适中既可；由于左边栏目的按钮有交互效果，需要切2次，所以在保存切片一定要注意两次切片一定要保证一致，要不然，在交互的时候会有移位现象；在保存的底图的时候，图片不宜过大，要权衡图片大小与质量的关系，大的背景图保持在50K以下。

最终切完图片，保存后文件夹的图片如图2所示。

（图2）

2.1.4创建和制作网页

本节将详细介绍整个网站的制作过程，大家只需要跟着步骤进行操作就可以完成应用的制作。

大家都知道frame结构的页面都是由一个框架页和两个被调用的内容页组成的，所以我们的制作也是从内容页开始。

首先制作左边的栏目页,我们给他命名为left.htm页面。

设置页面属性，背景平铺，左边界和顶部边界设为“0”。

1、根据psd图上原来栏目按钮的位置和个数创建表格，如图5所示，设置整个表格的宽度和背景图片大小一样，为174，高度不设，但是最高不能超过506px。

最后根据psd图上按钮的位置设定每个单元格的高度。

注意；由于我们采用的电视制式是640*526，为了避免出现上下左右滚动的情况，我们把整个表格的长和宽减小了20像素，所以我们的表格的长和宽是620*506。

（图5）

1、表格创建好了，设置表格的属性，如图6所示。

（图6）

技巧1：

在设置表格的时候，要尽量多使用属性，活用这些属性，比如：

居中对齐，居左居右等等；这样可以减少表格，使表格尽量精简。

2、设置好了表格，插入按纽有交互效果，所以在插入按纽的时候单击“

”，弹出对话框，设置如图7所示，点击“确定”完成交互效果按纽的制作。

（图7）

3、全部按钮设定好之后，left.htm页面就制作完成，如图8效果。

（图8）

4、现在我们制作右边框架的页面（也就是right.htm页面），和制作left.htm页面一样，先创建好表格。

由于该边页面的结构由三部门组成，上面是广告位，中间是条目内容，下面是翻页按钮（上一页、下一页等等）所以可以将表格拆分成三行一列。

如图9所示

注：

由于左边的页面占去了整个表格宽度的174px,所以右边的页面表格宽度则是：

640-174-20=446px，高度也是不能超过506px。

（图9）

1.看到图9后，可能会问：

“中间怎么没有添加条目内容的表格？

”这是因为这些条目内容是变动的，可能一页有很多条，也可能一页只有一两条，所以为了灵活方便的控制一个页面的条目数，这时候就是可以在中间的表格再插入一个多行的表格，来制作条目内容。

这样right.htm页面就制作完成。

如图10所示。

（图10）

8．这样框架左右两边的页面都制作好了，现在开始制作框架页面，点击“文件”下“新建文挡”，在“类别”列表中选择“框架集”选项，在“框架集”列表中选择“垂直拆分”，点击“创建”如图11所示。

（图11）

2.创建完框架网页后，需要定义框架集的属性，如标题，宽度等。

具体操作如下：

A.单击框架页面，在属性面板中设置左右框架的大小，如图12所示。

（图12）

B．设置好左右框架的连接，如图13所示。

（图13）

C.连接好，看下总体效果，如图14所示。

（图14）

D．给左边按钮加上连接，如图15所示。

注意：

在加链接的时候一定要注意选择后面的“目标”选项。

如要实现左边点击按钮操作，右边框架内的页面响应，则必须在目标选项中选择mainframe。

（图15）

3.连接加上去后，现在基本上一个完整的frame结构的页面就做好了，下面用防真工具来看一下最终的效果，如图16所示

2.1.5总结

通过本案例的学习，介绍了frame结构数据广播页面的制作流程，为读者详细介绍了每个步骤，对于刚开始接触数据广播制作的读者来说，熟练掌握这些功能，应用到数据广播的制作当中，还要多加练习，活用frame,一定能做出丰富多彩的数据广播，这样就可以开始制作frame结构的网页了。

3.视、音频的调用

3.1视、音频的调用的代码

　　现在的数据广播应用中，为了增加内容的丰富性以及可观赏性，需要加入大量的视、音频的运用，相关代码为：

把这段代码加入到页面的之间可以实现对视、音频的调用（如图1-1）：

（图1-1）

代码括号里面的数字是调用视、音频必备的参数，它们分别对应的意思是：

1、调用视、音频的代码

iPanel.Media.av（service_id,pcr_pid,emm_pid,video_pid,audio_pid,audio_ecm_pid,video_ecm_pid）;【所有的值是10进制的整数】

　　2、设置视频窗口的大小的代码

iPanel.Media.videoControl（"fullscreen"）;（视频满屏播放时使用）

iPanel.Media.setPosition（视频窗口左上角顶点的X坐标,视频窗口左上角顶点的Y坐标,视频窗口右下角点的X坐标,视频窗口右下角点的Y坐标）;（如图1-2）

（图1-2）

3.2视、音频的调用的具体制作

单独调用音频时，需要在调用代码参数中的“audio_pid”的位置，写入在OCG客户端调用音频流时所设置的“audio_pid”值，其他的“pid”值在这里不需要设置都写为“0”，例如在OCG客户端把调用的音频流“audio_pid”值设置为“33”，在页面中调用这个音频流时的代码就是：

（如图1-3）

（图1-3）

在视频与网页结合的情况下，视频是处于网页的最底层，所以我们在切割PSD图时，要把需要视频窗口的位置的内容删除再保存，使之透明，让视频窗口的位置镂空，从而达到能够显示视频的效果。

（如图1-4）

（图1-4）

现在来具体制作一个视频调用的页面，首先新建一个htm页面，在其“页面属性”中把“左边界”“顶部边界”的数值都设为“0”，在它的中加入使背景透明的语句：

“bgcolor="transparent"”，最后这个页面的属性的代码为：

（如图1-5）

（图1-5）

回到设计图操作窗口，插入一个640px*526px的表格，用先前保存的背景图作为这个表格的背景（如图1-6），再在这个表格里面做其他需要的内容。

（图1-6）

制作好htm页面后，切换到“显示代码视图”模式，在这个页面的与之间插入调用视、音频的语句：

（如图1-7）

（图1-7）

单独调用视频时，需要在“video_pid”的位置，写入在OCG客户端调用视频流时所设置的“video_pid”值，同时在设置视频窗口大小的代码中，在相应参数的位置写入视频窗口两个点的参数，其他的“pid”值在这里不需要设置都写为“0”，例如设置视频流的“video_pid”设置为“49”，视频窗口左上角顶点的参数是“58,126”，右下角点的参数是“236,184”，在htm页中调用这个视频流时的代码是：

（如图1-8）　

（图1-8）

视、音频一起调用时，需要在调用代码里写入“video_pid”值和“audio_pid”值，在设置视频窗口大小的代码中，在相应参数的位置写入视频窗口两点的参数。

例如播放的音频的“audio_pid”值设置为“33”，播放的视频的“video_pid”值设置为“49”，那么调用视、音频的代码就是（如图1-9）：

（图1-9）

3.3视频的全屏播放

首先新建一个空白的htm页，在其中加入使背景透明的语句：

“bgcolor="transparent"”。

在设置调用视频的全屏播放时，有2种定义视频大小的方法：

3.3.1

在制作应用时，是根据电视的标准（640px*526px）来做页面，所以应用的每一个页面的大小也都不超过这个标准长度和宽度，因此要达到视频满屏播放，只需要把视频窗口左上角顶点的参数写为起始点（0,0），右下角点的参数写为（640,526），就可以实现全屏播放：

（如图1-10）

（图1-10）

3.3.2

另一种方法是在页面的script语言中，写入全屏播放的语句，只需要在页面中加入下面的代码就可以实现了：

（如图1-11）

（图1-11）

总结：

在视频的调用中要注意的几点是：

　　　1、属性中“bgcolor”必须为“"transparent"”；

　　　2、背景图上的视频窗口位置必须是镂空透明的；

　　　3、调用的视、音频的PID值要填写正确（要和在客户端设置的值一样）；

　　　4、视频窗口的左上角顶点和右下角点的X、Y坐标要正确。

4.焦点定位

在电视上点击一个连接过后，新打开的页面的焦点框的位置总是默认在最左边的第一个连接上，为了更方便的操作，在页面中加入定义焦点位置的代码，以达到在新打开的页面上，焦点框默认在这个页面最理想、最符合逻辑的连接上。

　　对于一个有多个连接的页面，在定义焦点框的位置时，有如下2个步骤：

4.1.在的上一行加上代码：

　　　　document.all.link1.focus（）;

4.2.在想要定位的链接代码中的里面加上“id="link1"”，

比如：

　　例如在一个页面的前面加上这段javascript代码，并且在第3个连接的中加入“id="link1"”（如图2-1）

（图2-1）

打开这个页面后，焦点框默认显示在第3个连接上：

（如图2-2）

（图2-2）

5.设置焦点颜色

大家都知道应用中的页面都是五颜六色的，而每一种机顶盒的焦点框颜色都是统一的一种，例如很多时候按钮设计成黄色，而正好焦点框的颜色也是黄色，这时就不容易看出焦点的移动位置，为了避免这种结果，ipanel也自主研发了一段javascript代码，来定义不同页面的焦点颜色。

其中包含了对2种不同连接的焦点框颜色的定义：

1、图片连接；2、文字连接。

这段代码中的颜色"#0024FF"可以根据你实际需要的的焦点框颜色而进行相应的更改。

5.1.设置图片连接的焦点框颜色，在的中间加上：

iPanel.defaultFocusColor="#0024FF"

例如，在这个页面中没有加入设置图片焦点框颜色的代码，图片的焦点框在电视上表现的颜色为默认的橘黄色，焦点框在“走进淄博”上，焦点框的颜色和图片的颜色很相近，很难分辨出来（如图3-1）

（图3-1）

现在在这张页面的前加入设置图片焦点框颜色的代码，把焦点框的颜色设定为：

“#0024FF”。

（如图3-2）

（图3-2）

加入之后，焦点框在电视上显示的颜色为蓝色，这样焦点框的颜色可以很明显的和图片以及地图的颜色分开，从而很清楚的知道当前页面的焦点框在哪个连接上。

（如图3-3）

（图3-3）

5.2.设置文字连接的焦点框颜色，在的中间加上：

iPanel.activeColor="#0024FF"

例如在一个页面中，没有写入改变文字连接焦点框颜色的代码，它的文字连接焦点框在电视上显示的颜色为默认的橘黄色：

（如图3-4）

（图3-4）

现在需要改变文字连接焦点框的颜色，那么，在页面的与之间加上这段代码，就可以实现改变文字连接焦点框的颜色：

（如图3-5）

（图3-5）

5.3.加入设置文字连接焦点框颜色的代码后，在代码里设置的颜色是"#0024FF"，那么在电视上显示的颜色为蓝色：

（如图3-6）

（图3-6）

在一个页面同时有图片连接和文字连接时，可以把2种定义颜色的代码写在一个

例如在这个页面里写入这段代码：

（如图3-7）

（图3-7）

　　在电视上焦点框显示的颜色都是蓝色：

（如图3-8）

（图3-8）

这2种连接的焦点框颜色可以根据实际情况的需要，分别设置成不同的颜色。

（如图3-9）

（图3-9）

在电视上显示的效果为，图片连接的焦点框颜色为蓝色，文字连接的焦点框颜色为红色：

（如图3-10）

（图3-10）

6.图片、文字滚动效果

我们经常使用的滚动效果有iframe和marquee两种。

iframe滚动比较常用，比如说同一个页面里点击不同的链接会出现相应的滚动信息，或者是文字和图片过大过多的情况使用。

Marquee使用比较方便，主要用在做小滚动条或者小字幕广告上，代码比较简单。

缺点就是不利于在制作的时候控制表格。

6.1iframe滚动的制作

例如要在index.htm中的左上角方框区域做iframe滚动（图1）

图1

6.1.1先选择左上角方框区域需要制作滚动效果的单元格，以得到这个单元格的宽和高，假设它的属性是width="162"height="102"。

6.1.2iframe滚动效果需要通过代码调用另一个页面来实现，现在先制作被调用的“bdy.htm”页面。

如图2所示，首先画一个两行的