×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。




HTML Slidyの使い方


資料:ぽっと
URL: http://www.potto.client.jp/

  JavaScript をONにし,矢印キー(← →)やマウスのクリックでスライドを送って読んで下さい。最下部の"contents"をクリックするとページのリストが表示され,ページを選ぶことができます。

はじめに

 この資料は W3C 製のHTMLプレゼンツールである"HTML Slidy"の簡単な使い方です。私が開発した"HTML Slidy Maker"で生成したファイルの直接編集や操作するときにご利用下さい。詳しくは以下の公式サイトをご覧下さい。

公式サイト: W3C Slide show Tools

HTML Slidyのキー操作

 "HTML Slidy"のキー操作は以下の通りです。

マウスクリック,スペースキー 次のスライド
"←" or "Page Up"キー 前のスライド
"→" or "Page Down"キー 次のスライド
”Home”キー 先頭のスライド
”End”キー 先頭のスライド
"C"キーまたは”contents?”をクリック コンテンツテーブルの表示
"F11"キー フルスクリーン
”F”キー フッタの表示と非表示の切り替え
”A”キー 全てのスライド表示の切り替え
”S”キー フォントサイズを小さく
”B”キー フォントサイズを大きく


XHTMLの雛形

 HTML SlidyのXHTMLの雛形は以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/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="http://www.w3.org/Talks/Tools/Slidy/slidy.css" /> 
  <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" 
   type="text/javascript"></script> 
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
</head>
<body>
   ... your slides marked up in XHTML ...
</body>
</html>

基本ルール


<meta name="copyright" 
content="Copyright &#169; 2005 your copyright notice" /> 

Incremental表示

 リスト要素などをマウスをクリックするごとに表示する方法は<ul class="incremental"> とclass を"incremental"とします。



<ul class="incremental"> 
  <li>First point</li> 
  <li>Second  point</li> 
  <li>Third point</li> 
</ul> 

アウトライン表示



  1. Topic 1
    1. subtopic a
    2. subtopic b
  2. Topic 2
    1. subtopic c
    2. subtopic d

<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>