This article was peer reviewed by Ralph Mason, Giulio Mainardi, and Mikhail Romanov. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
本文由Ralph Mason ， Giulio Mainardi和Mikhail Romanov进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！
Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.
演示是向观众提供信息的最佳方法之一。 该格式简短明了，由可消化的小块组成，这使得正在讨论的任何主题都引人入胜且易于理解。 演示文稿可以包含由许多不同元素表示的各种数据，例如表格，图表，图表，插图，图像，视频，声音，地图，列表等，所有这些都为这种表达媒介提供了极大的灵活性。
Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:
尤其是在网络上，演示文稿在很多情况下都派上用场，并且您可以使用许多工具来创建漂亮的工具。 今天，我将向您介绍WebSlides-一个小型紧凑的库，其中包含一组很好的即用型组件，您可以利用它们来构建精心制作且引人入胜的Web演示文稿：
WebSlides “is about telling the story, and sharing it in a beautiful way.”
WebSlides“是讲故事，并以优美的方式分享。”
In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.
实际上，WebSlides的主要优点之一就是您可以通过各种不同方式精美地分享您的故事。 使用一个和一个相同的体系结构-40多个带有语义类的组件以及干净且可扩展的代码-您可以创建项目组合，登录，长格式，访谈等。
Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash, Animate.css, Animate On Scroll, and so on.
此外，您还可以通过将WebSlides与第三方服务和工具(如Unsplash ， Animate.css ， Animate On Scroll等)结合使用来扩展其功能。
WebSlides is easy to learn and fun to use. Let’s see it in action now.
WebSlides易于学习且易于使用。 让我们现在来看一下它。
To get started, first download WebSlides. Then, in the root folder, create a new folder and call it presentation. Inside the newly created presentation folder, create a new file and call it index.html. Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):
首先，请首先下载WebSlides 。 然后，在根文件夹中，创建一个新文件夹，并将其命名为presentation 。 在新创建的presentation文件夹中，创建一个新文件，并将其命名为index.html 。 现在，输入以下代码，其中包含对WebSlides文件的所需引用(确保文件路径与您的设置中的文件夹结构相对应)：
<!doctype html> <html> <head> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet"/> <!-- CSS Base --> <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css"/> <!-- CSS Colors --> <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css"/> <!-- Optional - CSS SVG Icons (Font Awesome) --> <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css"/> <body> <!-- PUT WEBSLIDES PRESENTATION CONTENT HERE --> <script src="../static/js/webslides.js"></script> <script> window.ws = new WebSlides(); </script> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <script defer src="../static/js/svg-icons.js"></script> </body>Now, you’re ready to go.
现在，您准备好了。
In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator.
在本节中，您将创建一个简短但完整的演示文稿，它解释了为什么SVG是Web图形的未来。 注意：如果您对SVG感兴趣，请查看我的文章： SVG 101：什么是SVG？ 以及如何在Adobe Illustrator中优化和导出SVG 。
You’ll be working step by step on each slide. Let’s get started with the first one.
您将在每张幻灯片上逐步进行操作。 让我们从第一个开始。
The first slide is pretty simple. It contains only one sentence:
第一张幻灯片非常简单。 它仅包含一个句子：
<article id="webslides"> <!-- First slide --> <section class="bg-gradient-r aligncenter"> <h1>Why SVG Is the Future of Web Graphics?</h1> </section> <!-- Second slide --> <section> ... </section> <!-- Third slide --> <section> ... </section> <!-- etc. --> </article>Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter, to apply a radial gradient background and to align the slide content to the center respectively.
<article id="webslides">每个父<section> <article id="webslides">创建一个单独的幻灯片。 在这里，您已经使用了WebSlides的军械库中的两个类，即bg-gradient-r和aligncenter ，以应用径向渐变背景并将幻灯片内容分别与中心对齐。
The second slide explains what SVG is:
第二张幻灯片解释了SVG是什么：
<section> <div class="wrap"> <div class="content-left"> <h2>What Is SVG?</h2> <p class="text-subtitle">Scalable Vector Graphics</p> <hr> <p class="text-intro">SVG is an XML-based vector graphic format used to display a wide range of graphics on the Web.</p> <p class="text-intro">SVG documents are just plain text files and can be created and edited in every text editor.</p> </div> <div class="content-right"> <img src="traffic-lights.png"> </div> </div> </section>The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.
上面的代码使用content-left和content-right类将内容分为两列。 另外，为了使上述类起作用，您需要使用wrap类包装所有内容。 在左侧，代码使用text-subtitle来使文本全部大写，并使用text-intro来增加字体大小。 右侧包括一个说明性图像。
The next slide uses the grid component to create two columns:
下一张幻灯片使用网格组件创建两列：
<section class="aligncenter"> <h2>SVG Is Future-Proof</h2> <p class="text-subtitle">As long as the W3C sets the global industry standards, it seems that SVG will continue to be the de-facto standard for vector graphics in the browser.</p> <hr> <div class="grid"> <div class="column"> <p class="text-intro" style="text-align: left">SVG is a W3C standard. This makes SVG future-proof. Technologies are rapidly changing. What's here today could be gone tomorrow. But SVG will most likely be around for a long time.</p> </div> <div class="column"> <figure class="browser"> <img src="standard.png"> </figure> </div> </div> </section>The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.
上面的代码段显示了如何使用grid和column类创建具有两列的网格。 在第一列中， style属性将文本向左对齐(请注意<section>元素上的aligncenter类如何级联到其.column子元素，这将使幻灯片内的所有文本居中对齐)。 在第二列中， browser类使说明性图像看起来像屏幕截图。
In the fourth slide, use the grid component again to split the content into two columns:
在第四张幻灯片中，再次使用网格组件将内容分为两列：
<section> <h2 class="aligncenter">SVG Is the Best Graphic Format for the Web</h2> <hr> <div class="grid"> <div class="column"> <p class="text-intro">What makes SVG so preferable for the Web is its remarkable usefulness and unlimited flexibility. It's the only one graphic format which most closely and completely responds to the current web development demands such as <em>scalability, responsibility, interactivity, programmability, and accessibility</em>.</p> </div> <div class="column"> <p class="text-intro">As a graphic format SVG perfectly suits the needs of the web because it satisfies both designers and developers. An illustration can be easily created by a designer with any vector software, and then, the exported SVG can be transferred to a developer who can add animation or some other interactivity.</p> </div> </div> </section>In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:
在此幻灯片中，分别使用content-left和content-right类将content-left一半放在左侧，将另一半放在右侧：
<section> <div class="wrap"> <div class="content-left"> <h2>SVG Usage Is Growing</h2> <p class="text-subtitle">Over the last year SVG usage has doubled.</p> <hr> <p>As of 2014 SVG usage is growing continuously (image below) and it has doubled over the last year (right image).</p> <img src="svg-usage-numbers.png"> </div> <div class="content-right"> <img src="svg-usage.png"> </div> </div> </section>In this slide, use the background class to embed an image as a background with the Unsplash service. Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap">:
在此幻灯片中，使用background类通过Unsplash服务将图像嵌入为背景。 使用bg-trans-light类，将标题放在浅色透明背景上。 文本的颜色显示为白色，因为幻灯片使用bg-black类为黑色的背景，因此默认颜色是相反的，即黑色为白色而不是黑色为白色。 另外，为了使文本在图像前面可见，请用<div class="wrap"> ：
<section class="aligncenter bg-black"> <span class="background" style="background-image:url('https://source.unsplash.com/ICW6QYOcdlg/800x600')"></span> <div class="wrap"> <h2 class="bg-trans-light"><em>SVG Solves the Most Important Problems in Modern Web Development</em></h2> </div> </section>In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight, which is one of WebSlides’ built-in CSS animations:
在此幻灯片中，将说明文字放在其默认大小的40％的左侧，并将说明性图像放在右侧(在<img>元素上使用alignright和size-40类)。 对于本幻灯片和接下来的三张幻灯片，请使用slideInRight ，它是WebSlides的内置CSS动画之一：
<section class="slideInRight"> <div class="wrap"> <img src="responsive.jpg" class="alignright size-40"> <h3>1. Scalability</h3> <p class="text-subtitle">SVG is like an infinitely scalable canvas</p> <p>Because of its vector nature an SVG drawing can scale and adapt to any size without loosing sharpness. In contrast, raster-based formats, such as GIF, JPG, and PNG, are static and have fixed dimensions. Although techniques for responsive images are good, they still can not compete with the SVG's ability to scale infinitely. No matter what device you use, SVG will adapt and scale perfectly keeping the graphic's visual appearance intact.</p> </div> </section>Do a similar thing here:
在这里做类似的事情：
<section class="slideInRight"> <div class="wrap"> <img src="interactivity.jpg" class="alignright size-40"> <h3>2. Interactivity</h3> <p class="text-subtitle">SVG Drawings are dynamic and interactive</p> <p>SVG is fully scriptable. It can be manipulated with CSS and/or JavaScript. An SVG graphic can be animated and can respond to user actions.</p> </div> </section>This slide also uses a similar structure:
该幻灯片也使用类似的结构：
<section class="slideInRight"> <div class="wrap"> <img src="svg-market-position.png" class="alignright size-40"> <h3>3. Performance</h3> <p class="text-subtitle">SVG is the preferred image format for high traffic sites</p> <p>Because SVG is just plain text, in most cases the file size will be smaller compared to its bitmap counterparts (JPEG and PNG). So the impact on web page performance will be minimized.</p> </div> </section>Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:
在这里，将内容再次分为左右。 在第二个<p>标记中，使用内联style属性调整font-size和line-height属性。 这样做将覆盖默认情况下应用于该元素的text-intro类样式。 在右侧，使用<div class="wrap size-80">为SVG代码示例创建一个容器：
<section class="slideInRight"> <div class="wrap"> <div class="content-left"> <h3>4. Accessibility</h3> <p class="text-subtitle">SVG text is real and editable</p> <p style="font-size: 1.8rem; line-height: 3.2rem">SVG files are text-based and can be searched and indexed. This makes them readable by screen readers, search engines and other devices. The ability of SVG to bring visuals to those who cannot see, extends its reach into many domains that pixel-based graphics just cannot go.</p> </div> <div class="content-right"> <div class="wrap size-80"> <pre><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 200 100"> <text x="10" y="20">SVG offers real and editable text</text> </svg> </pre> </div> </div> </div> </section>Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:
在这里，利用一些您已经用来说明浏览器对SVG的支持的类：
<section class="aligncenter"> <h2>SVG Has Very Good Browser Support</h2> <p class="text-subtitle">The browser support for SVG is 97% and above</p> <hr> <div class="wrap"> <img src="caniuse.png"> </div> </section>In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:
在此幻灯片中，以图片库的形式展示SVG的一些用例。 为此，请对flexblock和gallery类使用无序列表。 画廊中的每个物品都标有li标签：
<section> <h2>SVG Has Many Different Use Cases</h2> <hr> <ul class="flexblock gallery"> <li> <a href="#"> <figure> <img alt="Thumbnail" src="illustration.jpg"> <figcaption> <h2>Plain Illustrations</h2> </figcaption> </figure> </a> </li> <li> <a href="#"> <figure> <img alt="Thumbnail " src="icons.jpg"> <figcaption> <h2>Logos and Icons</h2> </figcaption> </figure> </a> </li> <li> ... </li> ... </ul> </section>This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:
本节显示了典型的SVG工作流程，因此您需要使用flexblock和steps类，它们将内容显示为一系列步骤。 同样，每个步骤都放在li标签内：
<section> <h2>The SVG Workflow Is Straightforward</h2> <ul class="flexblock steps"> <li> <span> <svg class="fa-file-image-o"> <use xlink:href="#fa-file-image-o"></use> </svg> </span> <h2>01. Draw</h2> <p>Draw your graphic in a vector editing program such as Adobe Illustrator</p> </li> <li> <div class="process step-2"></div> <span> <svg class="fa-file-code-o"> <use xlink:href="#fa-file-code-o"></use> </svg> </span> <h2>02. Export</h2> <p>Export the drawing as an SVG file</p> </li> <li> ... </li> </ul> </section>For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.
对于第一个步骤之后的每个步骤，您需要添加process-step-#类。 这将添加一个三角形，指向下一步。
In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn:
在最后一张幻灯片，使用WebSlides内置CSS动画，即，另一个zoomIn ：
<section class="zoomIn bg-black"> <span class="background" style="background-image:url('https://source.unsplash.com/fPkvU7RDmCo/800x600')"></span> <div class="wrap"> <h2 class="aligncenter">Start Coding SVG Today!</h2> </div> </section>Congratulations! You’re done. You can see the final outcome here:
恭喜你！ 你完成了。 您可以在此处查看最终结果：
See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上带有 SitePoint( @SitePoint )的WebSlides的Pen HTML和CSS演示 示例 。
Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.
等等！ 您刚刚创建了一个美观，功能齐全且响应Swift的Web演示文稿。 但这只是冰山一角，使用WebSlides和许多其他WebSlides功能可以快速创建更多功能，而我在本简短教程中没有介绍。
To learn more, explore the WebSlides Components and CSS architecture documentation, or start customizing the demos already available to you in the downloadable folder.
要了解更多信息，请浏览WebSlides组件和CSS体系结构文档 ，或开始自定义可下载文件夹中已经可用的演示。
Then, focus on your content and let WebSlides do its job.
然后，专注于您的内容，并让WebSlides完成其工作。
翻译自: https://www.sitepoint.com/how-to-create-beautiful-html-css-presentations-with-webslides/
相关资源：WebSlides轻松制作HTML幻灯片演示