2011-08-08 03:19:46 +00:00
<!DOCTYPE html>
<!-- [if lt IE 7]> <html class="no - js ie6" lang="en"> <![endif] -->
<!-- [if IE 7]> <html class="no - js ie7" lang="en"> <![endif] -->
<!-- [if IE 8]> <html class="no - js ie8" lang="en"> <![endif] -->
<!-- [if gt IE 8]><! --> < html class = "no-js" lang = "en" > <!-- <![endif] -->
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
2011-08-11 12:16:39 +00:00
< title > Getting Started with deck.js< / title >
2011-08-08 03:19:46 +00:00
< meta name = "description" content = "A jQuery library for modern HTML presentations" >
< meta name = "author" content = "Caleb Troughton" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
<!-- Core and extension CSS files -->
< link rel = "stylesheet" href = "../core/deck.core.css" >
< link rel = "stylesheet" href = "../extensions/goto/deck.goto.css" >
< link rel = "stylesheet" href = "../extensions/menu/deck.menu.css" >
< link rel = "stylesheet" href = "../extensions/navigation/deck.navigation.css" >
< link rel = "stylesheet" href = "../extensions/status/deck.status.css" >
<!-- Theme CSS files (menu swaps these out) -->
< link rel = "stylesheet" id = "style-theme-link" href = "../themes/style/web-2.0.css" >
< link rel = "stylesheet" id = "transition-theme-link" href = "../themes/transition/horizontal-slide.css" >
<!-- Custom CSS just for this page -->
< link rel = "stylesheet" href = "introduction.css" >
< script src = "../modernizr.custom.js" > < / script >
< / head >
2011-08-11 05:31:32 +00:00
< body class = "deck-container" >
2011-08-08 03:19:46 +00:00
< div class = "theme-menu" >
< h2 > Themes< / h2 >
< label for = "style-themes" > Style:< / label >
< select id = "style-themes" >
< option selected value = "../themes/style/web-2.0.css" > Web 2.0< / option >
< option value = "../themes/style/swiss.css" > Swiss< / option >
< option value = "../themes/style/neon.css" > Neon< / option >
< option value = "" > None< / option >
< / select >
< label for = "transition-themes" > Transition:< / label >
< select id = "transition-themes" >
< option selected value = "../themes/transition/horizontal-slide.css" > Horizontal Slide< / option >
< option value = "../themes/transition/vertical-slide.css" > Vertical Slide< / option >
< option value = "../themes/transition/fade.css" > Fade< / option >
< option value = "" > None< / option >
< / select >
< / div >
2011-08-11 05:31:32 +00:00
< div class = "slide" >
2011-08-11 12:16:39 +00:00
< h1 > Getting Started with deck.js< / h1 >
2011-08-11 05:31:32 +00:00
< / div >
< div class = "slide" >
< h2 > How to Make a Deck< / h2 >
< ol >
< li >
< h3 > Write Slides< / h3 >
2011-08-11 12:16:39 +00:00
< p > Slide content is simple HTML.< / p >
2011-08-11 05:31:32 +00:00
< / li >
< li >
< h3 > Choose Themes< / h3 >
2011-08-11 12:16:39 +00:00
< p > One for slide styles and one for deck transitions.< / p >
2011-08-11 05:31:32 +00:00
< / li >
< li >
< h3 > Include Extensions< / h3 >
2011-08-11 12:16:39 +00:00
< p > Add extra functionality to your deck, or leave it stripped down.< / p >
2011-08-11 05:31:32 +00:00
< / li >
< / ol >
< / div >
< div class = "slide" >
< h2 > The Markup< / h2 >
< p > Slides are just HTML elements with a class of < code > slide< / code > .< / p >
< pre > < code > < div class=" slide" >
2011-08-11 12:16:39 +00:00
< h2> How to Make a Deck< /h2>
< ol>
< li>
< h3> Write Slides< /h3>
< p> Slide content is simple HTML.< /p>
< /li>
< li>
< h3> Choose Themes< /h3>
< p> One for slide styles and one for deck transitions.< /p>
< /li>
…
< /ol>
2011-08-08 03:19:46 +00:00
< /div> < / code > < / pre >
2011-08-11 05:31:32 +00:00
< / div >
< div class = "slide" >
< h2 > Style Themes< / h2 >
2011-08-11 12:16:39 +00:00
< p > Customizes the colors, typography, and layout of slide content.< / p >
2011-08-11 05:31:32 +00:00
< pre > < code > < link rel=" stylesheet" href=" /path/to/css/style-theme.css" > < / code > < / pre >
< h2 > Transition Themes< / h2 >
2011-08-11 12:16:39 +00:00
< p > Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But < strong > you< / strong > aren’ t using < em > those< / em > browsers to give your presentations, are you… < / p >
2011-08-11 05:31:32 +00:00
< pre > < code > < link rel=" stylesheet" href=" /path/to/css/transition-theme.css" > < / code > < / pre >
< / div >
< div class = "slide" >
< h2 > Extensions< / h2 >
2011-08-11 12:16:39 +00:00
< p > Core gives you basic slide functionality with left and right arrow navigation, but you may want more.< / p >
2011-08-11 05:31:32 +00:00
< ul >
< li class = "slide" >
2011-08-17 03:30:44 +00:00
< strong > deck.goto< / strong > : Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.
2011-08-11 05:31:32 +00:00
< / li >
< li class = "slide" >
2011-08-17 03:30:44 +00:00
< strong > deck.menu< / strong > : Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view.
2011-08-11 05:31:32 +00:00
< / li >
< li class = "slide" >
2011-08-17 03:30:44 +00:00
< strong > deck.navigation< / strong > : Adds clickable left and right buttons for the less keyboard inclined.
2011-08-11 05:31:32 +00:00
< / li >
< li class = "slide" >
2011-08-17 03:30:44 +00:00
< strong > deck.status< / strong > : Adds a page number indicator. (current/total)
2011-08-11 05:31:32 +00:00
< / li >
< / ul >
2011-08-17 02:28:05 +00:00
< p class = "slide" > Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files.< / p >
2011-08-11 05:31:32 +00:00
< / div >
< div class = "slide" >
< h2 > Nested Slides< / h2 >
< p > That last slide had a few steps. To create substeps in slides, just nest them:< / p >
< pre > < code > < div class=" slide" >
< h2> Extensions< /h2>
2011-08-11 12:16:39 +00:00
< p> Core gives you basic slide functionality...< /p>
2011-08-11 05:31:32 +00:00
< ul>
< li class=" slide" >
< h3> deck.goto< /h3>
< p> Adds a shortcut key to jump to any slide number...< /p>
< /li>
< li class=" slide" > ...< /li>
< li class=" slide" > ...< /li>
< li class=" slide" > ...< /li>
< /ul>
2011-08-08 03:19:46 +00:00
< /div> < / code > < / pre >
2011-08-11 05:31:32 +00:00
< / div >
< div class = "slide" >
< h2 > Other Elements: Images< / h2 >
< img src = "http://placekitten.com/600/375" alt = "Kitties" >
< pre > < code > < img src=" http://placekitten.com/600/375" alt=" Kitties" > < / code > < / pre >
< / div >
< div class = "slide" >
< h2 > Other Elements: Blockquotes< / h2 >
< blockquote cite = "http://example.org" >
< p > Food is an important part of a balanced diet.< / p >
< p > < cite > Fran Lebowitz< / cite > < / p >
< / blockquote >
< pre > < code > < blockquote cite=" http://example.org" >
< p> Food is an important part of a balanced diet.< /p>
< p> < cite> Fran Lebowitz< /cite> < /p>
2011-08-08 03:19:46 +00:00
< /blockquote> < / code > < / pre >
2011-08-11 05:31:32 +00:00
< / div >
< div class = "slide" >
< h2 > Other Elements: Video Embeds< / h2 >
2011-08-11 12:16:39 +00:00
< p > Embed videos from your favorite online video service or with an HTML5 video element.< / p >
2011-08-08 03:19:46 +00:00
2011-08-11 05:31:32 +00:00
< iframe src = "http://player.vimeo.com/video/1063136?title=0&byline=0&portrait=0" width = "400" height = "225" frameborder = "0" > < / iframe >
2011-08-08 03:19:46 +00:00
2011-08-11 05:31:32 +00:00
< pre > < code > < iframe src=" http://player.vimeo.com/video/1063136?title=0& amp;byline=0& amp;portrait=0" width=" 400" height=" 225" frameborder=" 0" > < /iframe> < / code > < / pre >
< / div >
< div class = "slide" >
< h2 > Digging Deeper< / h2 >
2011-08-11 12:16:39 +00:00
< p > If you want to learn about making your own themes, extending deck.js, and more, check out the < a href = "../docs/" > documentation< / a > .< / p >
2011-08-08 03:19:46 +00:00
< / div >
2011-08-12 02:55:26 +00:00
< a href = "#" class = "deck-prev-link" title = "Previous" > ← < / a >
< a href = "#" class = "deck-next-link" title = "Next" > → < / a >
2011-08-11 05:31:32 +00:00
< p class = "deck-status" >
< span class = "deck-status-current" > < / span >
/
< span class = "deck-status-total" > < / span >
< / p >
< form action = "." method = "get" class = "goto-form" >
< label for = "goto-slide" > Go to slide:< / label >
< input type = "number" name = "slidenum" id = "goto-slide" >
< input type = "submit" value = "Go" >
< / form >
2011-08-08 03:19:46 +00:00
< script src = "//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" > < / script >
< script > window . jQuery || document . write ( '<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js">\x3C/script>' ) < / script >
<!-- Deck Core and extensions -->
< script src = "../core/deck.core.js" > < / script >
< script src = "../extensions/menu/deck.menu.js" > < / script >
< script src = "../extensions/goto/deck.goto.js" > < / script >
< script src = "../extensions/status/deck.status.js" > < / script >
< script src = "../extensions/navigation/deck.navigation.js" > < / script >
<!-- Specific to this page -->
< script src = "introduction.js" > < / script >
< / body >
< / html >