トップ  > メモ一覧  > カテゴリ「Slidy」の絞り込み結果 : 1件

1件中 1 〜 1 表示  1 

No.976 使い方・いろいろ



本家のページと共に、以下のサイトを参考・・・。

 本家のスタイルシートがいまいちなので、今回はWWW WATCHからダウンロードしたテンプレートを利用させていただくことにしました。こちらの方がFooterが広くて私湖のみのデザインです。

 また、背景画像のワンポイントは透明感のある+ Little Eden +のフリー素材を使わせていただきました。

 素晴らしい情報と素材を提供してくれた皆さんに感謝!


http://www.potto.client.jp/htmlslidymaker/


[]Slidyでスライド作成Add Star


最近、よくみかけるようになったブラウザでのスライドを作ってみる。


1.W3.orgより「slidy.js」と「slidy.css」をダウンロード

http://www.w3.org/Talks/Tools/Slidy/#(1)

今回はすべて揃ったslidy.zipダウンロードしてきた。でも必要なものは上記の2つのみ。


2.表示用htmlを作成する。

slidy.zipの中にtemplete.htmlというのがあったのでそれを書き換えるだけでOK。


ちなみにtemplete.htmlを書き換えてシンプルにしたのがこちら。

templete2.html

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>たいとる</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="Copyright &#169; 2007 (haradago)" />

<!--"slidy.js"の格納先を指定	-->
<script src="slidy.js" type="text/javascript">
</script>
</head>
<body>
<!-- this defines the slide background -->

<!--ヘッダ部の記述	-->

<div class="background">
  <div class="header">
  <!-- sized and colored via CSS -->
  </div>
  <!-- hidden style graphics to ensure they are saved with other content -->
  <div class="footer">

  <!-- modify the following text as appropriate -->
  haradago<br />
  イベント, 場所, 日時
  </div>
</div>



<div class="slide cover">
<div class="header">
<h1>ヘッダ1</h1>
</div>
<h2>イベント, 場所, 日時</h2>
</div>

<!--以下より表示したいコンテンツを記述-->
<div class="slide">
<h1>haradago1</h1>
page1
</div>

<div class="slide">
<h1>haradago2</h1>
page2
</div>

<div class="slide">
<h1>haradago3</h1>
page3
</div>


</body>
</html>

div タグの slide の属性1つにつき1ページとなる。




 

引用元

更新:2009/06/01 00:33 カテゴリ: プレゼン  > Slidy ▲トップ
1件中 1 〜 1 表示  1 

FuelPHP

Mac

フロントエンド開発

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

Python

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0