• 看到领克02实车以后 我知道钱包捂不住了 2019-10-28
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-10-23
  • 确认过眼神 济南这些项目强强联合置业不容错过 ——凤凰网房产济南 2019-10-23
  • 萨拉赫缺阵 埃及队遭“绝杀” 2019-10-21
  • 我发现从五+年代农业用化肥农药,在六+年代几百年长的柿树几乎死光。没人研究! 2019-10-21
  • 【理上网来·喜迎十九大】全面从严治党的核心是加强党的领导 2019-10-20
  • LADY咔咔(37)我的乌克兰媳妇儿名爵ZS 2019-10-20
  • 赤裸裸的嗜血,比英国圈地运动疯狂多了[福尔摩斯] 2019-10-18
  • 光明日报:“互联网+农产品”不能一哄而上 2019-10-18
  • 瑞典民众庆祝世界杯胜利时发生枪击 致4人受伤 2019-10-16
  • 中国资本市场开放出大招 跨境证券投资更便利 2019-10-16
  • 中国足球,就是笑博士的“责权利平滑对接”改革的必然结果! 2019-10-13
  • 2017年度合肥市政务微信十强名单公布 2019-10-13
  • 全世界球迷进入“世界杯时间”,足球与美酒一同为世界带来快乐世界杯 中国 2019-10-10
  • 被曝资金链紧张、大规模裁员 小黄车快黄了? 2019-10-10
  • slanted W3C logo
    Cover page images (keys)

    070期特码开奖结果:HTML Slidy: Slide Shows in HTML and XHTML

    Dave Raggett, <[email protected]>




    Hit the space bar or swipe left for next slide

    Slide Shows in HTML and XHTML

    For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:

    <div class="slide"> 
     ... your slide content ...
    </div>
    
    <div class="handout">
     ... stuff that only appears in the handouts ...
    </div>
    

    What you need to do

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "//www.gzifj.tw/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="//www.gzifj.tw/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
      <title>Slide Shows in XHTML</title> 
      <meta name="copyright" 
       content="Copyright &#169; 2005 your copyright notice" /> 
      <link rel="stylesheet" type="text/css" media="screen, projection, print" 
       href="//www.gzifj.tw/Talks/Tools/Slidy2/styles/slidy.css" /> 
      <script src="//www.gzifj.tw/Talks/Tools/Slidy2/scripts/slidy.js" 
       charset="utf-8" type="text/javascript"></script> 
      <style type="text/css"> 
        <!-- your custom style rules --> 
      </style> 
    </head>
    <body>
       ... your slides marked up in XHTML ...
    </body>
    </html>
    

    To get the W3C Blue Style

    The head element should include the following link to the style sheet:

    <link rel="stylesheet" type="text/css" media="screen, projection, print"
     href="//www.gzifj.tw/Talks/Tools/Slidy2/styles/w3c-blue.css" /> 
    

    The body element's content should start with the following markup:

    <div class="background"> 
      <img id="head-icon" alt="graphic with four colored squares"
        src="//www.gzifj.tw/Talks/Tools/Slidy2/graphics/icon-blue.png" /> 
      <object id="head-logo" title="W3C logo" type="image/svg+xml"
        data="//www.gzifj.tw/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img
       src="//www.gzifj.tw/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif" 
       alt="W3C logo" id="head-logo-fallback" /></object>
    </div> 
    

    This adds the logos on the top left and right corners of the slide.

    You are of course welcome to create your own slide designs. You can provide different styles and backgrounds for different slides (more details later).

    Use the meta element with name="copyright" for use in the slide show footer:

    <meta name="copyright" 
    content="Copyright &#169; 2005-2009 W3C (MIT, ERCIM, Keio)" /> 
    

    Upgrading from previous versions of Slidy

    To use it off-line

    Timing Your Presentation

    Generate a Title Page

    If you want a separate title page with the W3C blue style, the first slide should be as follows:

    <div class="slide cover"> 
     <img src="//www.gzifj.tw/Talks/Tools/Slidy2/graphics/keys.jpg" 
      alt="Cover page images (keys)" class="cover" /> 
     <br clear="all" />            
     <h1>HTML Slidy: Slide Shows in XHTML</h1> 
     <p><a href="//www.gzifj.tw/People/Raggett/">Dave Raggett,</a> 
     <a href="mailto:[email protected]">[email protected]</a></p> 
    </div> 
    

    The w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

    This technique can be used to assign your slides to different classes with a different appearence for each such class.

    Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

    <div class="background foo">
       ... background content ...
    <div>
    
    ...
    
    <div class="slide foo">
       ... slide content ...
    <div>
    

    Incremental display of slide contents

    For incremental display, use class="incremental", for instance:

    which is marked up as follows:

    <ul class="incremental"> 
      <li>First bullet point</li> 
      <li>Second bullet point</li> 
      <li>Third bullet point</li> 
    </ul> 
     
    <p class="incremental">which is marked up as follows:</p> 
     
    <pre class="incremental"> 
     ... 
    </pre> 
    

    An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.

    Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.

    Create outline lists with hidden content

    You can make your bullet points or numbered list items into outlines that you can expand or collapse

    <ol class='outline'>
      <!-- topic 1 starts collapsed -->
      <li>Topic 1
        <ol>
            <li>subtopic a</li>
            <li>subtopic b</li>
        </ol>
      </li>
      <!-- topic 2 starts expanded -->
      <li class="expand">Topic 2
        <ol>
            <li>subtopic c</li>
            <li>subtopic d</li>
        </ol>
      </li>
    </ol>
    

    Make your images scale with the browser window size

    For adaptive layout, use percentage widths on images, together with CSS positioning:

    <div class="slide"> 
      <h1>Analysts - "Open standards programming will become 
      mainstream, focused around VoiceXML"</h1> 
      <!-- use CSS positioning and scaling for adaptive layout --> 
      <img src="trends.png" width="50%" style="float:left" 
       alt="projected growth of VoiceXML" /> 
    
      <blockquote style="float:right;width: 35%"> 
        VoiceXML will dominate the voice environment, due to its 
        flexibility and eventual multimodal capabilities 
      </blockquote><br clear="all" /> 
     
      <p style="text-align:center">Source Data Monitor, March 
      2004</p> 
    </div> 
    

    To work around a CSS rendering bug in IE relating to margins, you can set display:inline on floated elements.

    Incremental display of layered images

    These can be marked up using CSS relative positioning, e.g.

    <div class="incremental" 
     style="margin-left: 4em; position: relative"> 
      <img src="graphics/face1.gif" alt="face" 
       style="position: static; vertical-align: bottom"/> 
      <img src="graphics/face2.gif" alt="eyes" 
        style="position: absolute; left: 0; top: 0" /> 
      <img src="graphics/face3.gif" alt="nose" 
        style="position: absolute; left: 0; top: 0" /> 
      <img src="graphics/face4.gif" alt="mouth" 
        style="position: absolute; left: 0; top: 0" /> 
    </div> 
    

    You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on skyzyx.com. My thanks to ACID2 for the graphics.

    face eyes nose mouth

    How to center content vertically and horizontally

    Within the div element for your slide:

    <div class="vbox"></div>
    <div class="hbox">
    Place the content here
    </div>
    

    and style it with the following:

    div.vbox {
      float: left;
      height: 40%; width: 50%;
      margin-top: -220px;
    }
    div.hbox {
      width:60%;  margin-top: 0;
      margin-left:auto; margin-right:auto;
      height: 60%;
      border:1px solid silver;
      background:#F0F0F0;
      overflow:auto;
      text-align:left;
      clear:both;
    }
    

    The above styling is included in w3c-blue.css, which is designed to be used with slidy.css, but you are encouraged to develop your own style sheet with your own look and feel.

    Include SVG Content

    Inclusion of SVG content can be done using the object element, for example:

    Indian Office logo

    has been achieved by:

    <object data="graphics/example.svg" type="image/svg+xml" 
      width="50%" height="10%" title="Indian Office logo"> 
        <img src="graphics/example.png" width="50%" 
              alt="Indian Office logo" /> 
    </object> 
    

    This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly. Providing such a fall back is very important! Don't forget the alt text for people who can't see the image.

    However, there are caveats, see the next slide!

    Caveats with SVG+object

    Adobe has recently withdrawn support for its SVG Viewer, so you are recommended to consider alternatives. If you still using the Adobe SVG viewer you should be aware of bugs when using the it with IE, Namely:

    Additional Remarks

    Localization and automatic translation

    Slidy now includes support for localization

    "es":this.strings_es, "ca":this.strings_ca, "cs":this.strings_cs, "nl":this.strings_nl, "de":this.strings_de, "pl":this.strings_pl, "fr":this.strings_fr, "hu":this.strings_hu, "it":this.strings_it, "el":this.strings_el, "jp":this.strings_ja, "zh":this.strings_zh, "ru":this.strings_ru, "sv":this.strings_sv
    // for each language there is an associative array
      strings_es: {
        "slide":"pág.",
        "help?":"Ayuda",
        "contents?":"índice",
        "table of contents":"tabla de contenidos",
        "Table of Contents":"Tabla de Contenidos",
        "restart presentation":"Reiniciar presentación",
        "restart?":"Inicio"
      },
      help_es:
        "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
        "o Re pág y Av pág. Use S y B para cambiar el tama?o de fuente.",
    

    Note: Slidy now works with current slides translated into French. Use right mouse button to open frame without Google header. To disable automatic translation of the content of particular elements add class="notranslate", see breaking the language barrier.

    Future Plans

    Recent additions have included a table of contents, and a way to hide and reveal content in the spirit of outline lists. The script has been rewritten to make it easier to combine with other scripts, e.g. for UI controls, and support swipes for navigation on touch screen devices. Further work is anticipated on the following:

    If you have comments, suggestions for improvements, or would like to volunteer your help with further work on Slidy, please contact Dave Raggett <[email protected]>

    Acknowledgements

    Note that while Slidy and S5 were developed independently, both support the use of the class values "slide" and "handout" for div elements. Slidy doesn't support the "layout" class featured in S5 and Opera Show, but instead provides a more flexible alternative with the "background" class, which enables different backgrounds on different slides.

    Acknowledgements

    The following people have contributed localizations:

    The following people have contributed bug reports:

    Douglas Crockford for jsmin which was used to minify the script before compressing it with gzip.

  • 看到领克02实车以后 我知道钱包捂不住了 2019-10-28
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-10-23
  • 确认过眼神 济南这些项目强强联合置业不容错过 ——凤凰网房产济南 2019-10-23
  • 萨拉赫缺阵 埃及队遭“绝杀” 2019-10-21
  • 我发现从五+年代农业用化肥农药,在六+年代几百年长的柿树几乎死光。没人研究! 2019-10-21
  • 【理上网来·喜迎十九大】全面从严治党的核心是加强党的领导 2019-10-20
  • LADY咔咔(37)我的乌克兰媳妇儿名爵ZS 2019-10-20
  • 赤裸裸的嗜血,比英国圈地运动疯狂多了[福尔摩斯] 2019-10-18
  • 光明日报:“互联网+农产品”不能一哄而上 2019-10-18
  • 瑞典民众庆祝世界杯胜利时发生枪击 致4人受伤 2019-10-16
  • 中国资本市场开放出大招 跨境证券投资更便利 2019-10-16
  • 中国足球,就是笑博士的“责权利平滑对接”改革的必然结果! 2019-10-13
  • 2017年度合肥市政务微信十强名单公布 2019-10-13
  • 全世界球迷进入“世界杯时间”,足球与美酒一同为世界带来快乐世界杯 中国 2019-10-10
  • 被曝资金链紧张、大规模裁员 小黄车快黄了? 2019-10-10
  • 免费股票推荐 三分彩实时开奖 安徽十一选五助手 仲博彩票平台是不是骗子 四川金7乐18051355期 娱网棋牌安卓版下载 湖南幸运赛车71期直播 网络棋牌作弊器真的吗 尼克斯vs雷霆历史记录 北京11选5开奖结果查