[OPERA]OPERA SHOW介绍
2004-12-26 22:22 | 陆行鸟X
Opera 是什么？你大概听说过，他是一个小巧而快速的web浏览器。
Opera Show呢？这是一个你决想不到的功能：用opera来做幻灯展示。
将浏览器和幻灯机整合在一起，绝对是一个让人心动不已的功能。
而制作这种网页所需要的只是对HTML和CSS一点点的了解。
优点：
1. Opera浏览器内建的功能，快就一个字
2. 使用的是标准html标记，和其他软件生成的文档相比要小
3. 轻轻松松在网上发布自己的演示
4. 和其他幻灯软件比，opera show 要便宜多了（浏览器自身是免费的）
5. 不会有缭乱的效果
opera是怎么做到的呢。秘密就在级联样式表2。级联样式表（css）用于描述web文档的表现形式，
目前最新的标准为css2，相对于css1，增加了许多新的特性。其中一个就是对不同媒体（如screen，handheld和projection）应用不同的css。
operashow使用的是projection media。
当你开启Opera show后，opera浏览器会寻找文档中对projection的描述，
如果发现存有这样的信息，便会应用其指定的css，从而改变文档的外观。
让我们从下面的代码开始了解Opera Show：
第一行表示此css是为媒体projection定制的（@media projection{}），也就是Opera Show所查找的内容。当Opera找到此标记后，会在Show模式中用用其后面的CSS显示文档。
.screen和.projection用于控制文档的显示内容，本文后面会有介绍。
接下来的内容用于控制分页，背景，字体等信息。
首先看字体和颜色的定义：
css最常用的功能就是改变文本字体和颜色，font-size:150%;意为字体的大小为正常大小的1.5倍。font-famliy则指定了所用的字体。
第一行的background为文档指定了一个背景图片。
color标记则用于指定文字颜色。
这些属性被设置在body内，从而所有的html元素都会继承这些设置
分页：
展示的页面，总是需要正确的被划分。一般情况下，浏览器会显示一个网页所包换的所有内容，当内容超过一个屏幕，右侧会出现一个滚动条以调整文档。
在Opera Show模式下，opera浏览器会把网页分成不同的页面，这就需要用标记注明在什么地方进行分页。
如在上面的示例代码所表示的信息为：每一个projection标记结束后进行分页
这样，OperaShow一次只显示到一个被标示为projection的块(div标记)结束时，下一个标示为projection的div会在新的页面显示，从而达分页的目的。
注：在全屏模式中，由于opera没有滚动条，需要使用箭头键和page up/page down导航，最好在制作时就有标明。
对于那些需要分段展示的媒体，在CSS2中被定义为Paged Media，详细概念请查阅官方
隐藏和显示区域：
也许你已经注意到了，在展示画面中，文档的内容和浏览器的内容并不一样。
这就是css的一个高级应用。当然并不是每个展示都需要隐藏内容的
现在再回过头看看最开始的代码：
意思是，当当前媒体是projection时，这些代码会显示标记为projection的区域，隐藏screen的区域。当媒体发生变化时，触发一组反向设置：
从而达到变脸的效果
由于Opera Show Format的内容比较多，本来想学点写点，发现越看越多-__-b
在此就不一一演示了，总之依靠其丰富的内建功能和脚本语言，动态菜单，动态导航，自动跳转之类的是小菜一碟，做一个和ppt相媲美的展示并不是难事。
话说回来，以Opera目前的普及率，或许没有什么实际意义，不过这却为online demostration提供了一个新的思路。
下面是我写的一个简单演示：
演示
如何察看：
在opera浏览器里按下F11，对，就是全屏的快捷键，如果你的网页内包含展示信息，就会显示展示页的内容。
IE就算了吧，虽然F11也是全屏，但不会有什么变化的。
相关资料：
部分翻译自operashow的官方介绍，为了保持文章的一致，不一一注明出处：
http://www.opera.com/support/tutorials/operashow/
Opera Show Center，有技术文档和当量的小工具：
http://my.opera.com/community/dev/operashow/
css2的介绍页：
http://www.w3.org/TR/REC-CSS2/intro.html
最后唠叨一下Opera 浏览器，真的很不错XD
用User Mode模拟文本浏览器看网站也很有趣
另外7.x的用户界面感觉很挤，虽然可以定制。。。反正我是半天才搞懂
建议用8beta
-
Opera Show呢？这是一个你决想不到的功能：用opera来做幻灯展示。
将浏览器和幻灯机整合在一起，绝对是一个让人心动不已的功能。
而制作这种网页所需要的只是对HTML和CSS一点点的了解。
优点：
1. Opera浏览器内建的功能，快就一个字
2. 使用的是标准html标记，和其他软件生成的文档相比要小
3. 轻轻松松在网上发布自己的演示
4. 和其他幻灯软件比，opera show 要便宜多了（浏览器自身是免费的）
5. 不会有缭乱的效果
opera是怎么做到的呢。秘密就在级联样式表2。级联样式表（css）用于描述web文档的表现形式，
目前最新的标准为css2，相对于css1，增加了许多新的特性。其中一个就是对不同媒体（如screen，handheld和projection）应用不同的css。
operashow使用的是projection media。
当你开启Opera show后，opera浏览器会寻找文档中对projection的描述，
如果发现存有这样的信息，便会应用其指定的css，从而改变文档的外观。
让我们从下面的代码开始了解Opera Show：
@media projection
{
.screen {
display:none;
}
.projection {
display: block;
padding:65px 200px 0px 24px
page-break-after: always;
}
body {
background:#47557b url(operashowbg.jpg) fixed;
padding:0;
margin:0;
font-family:'trebuchet ms',arial,sans-serif;
font-size:150%;
color:#fff;
}
}
第一行表示此css是为媒体projection定制的（@media projection{}），也就是Opera Show所查找的内容。当Opera找到此标记后，会在Show模式中用用其后面的CSS显示文档。
.screen和.projection用于控制文档的显示内容，本文后面会有介绍。
接下来的内容用于控制分页，背景，字体等信息。
首先看字体和颜色的定义：
css最常用的功能就是改变文本字体和颜色，font-size:150%;意为字体的大小为正常大小的1.5倍。font-famliy则指定了所用的字体。
第一行的background为文档指定了一个背景图片。
color标记则用于指定文字颜色。
这些属性被设置在body内，从而所有的html元素都会继承这些设置
分页：
展示的页面，总是需要正确的被划分。一般情况下，浏览器会显示一个网页所包换的所有内容，当内容超过一个屏幕，右侧会出现一个滚动条以调整文档。
在Opera Show模式下，opera浏览器会把网页分成不同的页面，这就需要用标记注明在什么地方进行分页。
如在上面的示例代码所表示的信息为：每一个projection标记结束后进行分页
这样，OperaShow一次只显示到一个被标示为projection的块(div标记)结束时，下一个标示为projection的div会在新的页面显示，从而达分页的目的。
注：在全屏模式中，由于opera没有滚动条，需要使用箭头键和page up/page down导航，最好在制作时就有标明。
对于那些需要分段展示的媒体，在CSS2中被定义为Paged Media，详细概念请查阅官方
隐藏和显示区域：
也许你已经注意到了，在展示画面中，文档的内容和浏览器的内容并不一样。
这就是css的一个高级应用。当然并不是每个展示都需要隐藏内容的
现在再回过头看看最开始的代码：
@media projection {
.screen {display:none; }
.projection {display: block; }
}
意思是，当当前媒体是projection时，这些代码会显示标记为projection的区域，隐藏screen的区域。当媒体发生变化时，触发一组反向设置：
@media screen {
.projection { display : none }
.screen { display : block }
}从而达到变脸的效果
由于Opera Show Format的内容比较多，本来想学点写点，发现越看越多-__-b
在此就不一一演示了，总之依靠其丰富的内建功能和脚本语言，动态菜单，动态导航，自动跳转之类的是小菜一碟，做一个和ppt相媲美的展示并不是难事。
话说回来，以Opera目前的普及率，或许没有什么实际意义，不过这却为online demostration提供了一个新的思路。
下面是我写的一个简单演示：
演示
如何察看：
在opera浏览器里按下F11，对，就是全屏的快捷键，如果你的网页内包含展示信息，就会显示展示页的内容。
IE就算了吧，虽然F11也是全屏，但不会有什么变化的。
相关资料：
部分翻译自operashow的官方介绍，为了保持文章的一致，不一一注明出处：
http://www.opera.com/support/tutorials/operashow/
Opera Show Center，有技术文档和当量的小工具：
http://my.opera.com/community/dev/operashow/
css2的介绍页：
http://www.w3.org/TR/REC-CSS2/intro.html
最后唠叨一下Opera 浏览器，真的很不错XD
用User Mode模拟文本浏览器看网站也很有趣
另外7.x的用户界面感觉很挤，虽然可以定制。。。反正我是半天才搞懂
建议用8beta
-
       |