html幻灯片带工具栏_如何使用开发人员友好的工具幻灯片创建网站-CSDN博客

html幻灯片带工具栏

This article was created in partnership with BAWMedia. Thank you for supporting the partners who make SitePoint possible.

本文是与BAWMedia合作创建的。 感谢您支持使SitePoint成为可能的合作伙伴。

Let’s start with this scenario. You need to create a fantastic website for your client, you want to do so quickly, and your client is hoping for the same.

让我们从这种情况开始。您需要为您的客户创建一个出色的网站，您想要快速创建一个网站，而您的客户也希望这样做。

How about creating a website from scratch with HTML and CSS? It's an option, but it also takes too much time – not to mention effort.

如何使用HTML和CSS从头开始创建网站？这是一个选择，但它也花费了太多时间–更不用说付出努力了。

Slides offers a different approach for web designers, and developers as well.

幻灯片为网页设计师和开发人员提供了另一种方法。

What's so different about Slides? Read on.

幻灯片有何不同？继续阅读。

1.幻灯片：创建网站的独特方法 (1. Slides: A Unique Approach to Creating Websites)

Slides is an advanced static website builder that is easy to use. It's unique in the sense that it's unlike any website builder you've likely used before.

幻灯片是一种易于使用的高级静态网站构建器 。从某种意义上说，它是独一无二的，它不同于您以前使用过的任何网站构建器。

Slides lets you customize your design as you're creating it. When you have the design you want, you can customize it even further if you wish.

幻灯片可让您在创建设计时自定义设计 。拥有所需的设计后，您可以根据需要进一步自定义它。

It's simply a matter of selecting slides you want to use. Then, you can add panels, features, and settings, and download the result.

只需选择要使用的幻灯片即可。然后，您可以添加面板，功能和设置，并下载结果。

Do you have additional customizations in mind? It's simply a matter of opening the HTML file and using your favorite code editor. You can add features you or your client might want.

您还有其他自定义的想法吗？只需打开HTML文件并使用您喜欢的代码编辑器即可。您可以添加您或客户可能想要的功能。

With Slides 4, you can create designs that fit right in with the latest trends. You can also add your own custom scripts, and incorporate a host of other improvements.

借助Slides 4，您可以创建适合最新趋势的设计。您还可以添加自己的自定义脚本，并结合其他许多改进。

2.幻灯片功能 (2. Slides Features)

A powerful generator to do the heavy lifting. The Slides Generator is a tool that makes it easy for you to create a high-quality, animated website. You can create a retina-ready, responsive website in minutes. The app gives you the capability to export ready-to-use code.
强大的发电机来完成繁重的工作。 幻灯片生成器是一种工具，可让您轻松创建高质量的动画网站。您可以在几分钟内创建一个视网膜就绪的响应式网站。该应用程序使您能够导出即用型代码。
180+ slides to choose from. Pick a layout to start from and mix and match slides to create your website, exactly as you envisioned it.
180多种幻灯片可供选择 。选择一个布局作为起点，并混合和匹配幻灯片以创建您的网站，完全按照您的设想。
Powerful modules. Modules that are easy to set up and customize contribute to making page-building a quick and easy task. The Slides Framework's handful of powerful modules do just that.
强大的模块。 易于设置和自定义的模块有助于使页面构建成为一项快速而轻松的任务。 Slides Framework的一些功能强大的模块正是这样做的。

Development made easy. Development becomes a much easier task when you're not starting from scratch. All the important stuff has already been built and is ready for you to customize to fit your needs.
开发变得容易。 当您不从头开始时，开发就变得容易得多。所有重要的内容都已经构建，可以根据您的需要进行自定义。
Popular integrations. Intercom, MailChimp, Typeform, Google Maps, SoundCloud, just to name a few. This great collection of integrations will take your selling capabilities to the next level.
流行的集成。 对讲，MailChimp，Typeform，Google Maps，SoundCloud，仅举几例。大量的集成将使您的销售能力更上一层楼。

3.如何使用幻灯片 (3. How to Use Slides)

Everything starts with the Generator. It is an intuitively-designed tool that will save you hours of work. Although the Generator is easy to work with, you'll find the links to its manual.

一切始于发电机。 这是一个直观设计的工具，可以节省您的工作时间。尽管Generator易于使用，但您会找到其手册的链接。

You can also see some sample solutions, and templates that are helpful in getting started. In any event, you'll be building pages and websites like a pro before you know it.

您还可以看到一些示例解决方案和有助于入门的模板。无论如何，您会像专业人士一样建立网页和网站。

Choosing which slides to use. This is the first step, and choosing the right slides to get your project underway is not a problem.

选择要使用的幻灯片。 这是第一步，选择正确的幻灯片来进行项目并不是问题。

This is thanks to a filtering menu that covers headers, features and form. It also includes price, video, and other categories.

这要归功于包含标题，功能和表单的过滤菜单。它还包括价格，视频和其他类别。

When you select the slides you want, click on the first of the three buttons displayed in the upper right corner.

选择所需的幻灯片后，单击右上角显示的三个按钮中的第一个。

This will allow you to duplicate, delete, and change a slide's style to minimalistic. Alternatively, you can drag and drop them to change the order.

这将允许您复制，删除幻灯片并将其样式更改为简约样式。或者，您可以拖放它们以更改顺序。

The slides are great, but not necessarily complete. What's missing is animation. Animation can transform a quality website into one that is truly outstanding. While every slide has a default animation, you can change it by simply clicking on a style you'd prefer to use.

幻灯片很棒，但不一定完整 。缺少的是动画。动画可以将高质量的网站转变为真正出色的网站。尽管每张幻灯片都有默认的动画，但是您可以通过单击想要使用的样式来更改它。

With a few more clicks you can select from a selection of effects options.

再点击几下，您可以从多种效果选项中进行选择。

Choosing the panels. It takes more than a collection of stunning pages to make an award-winning website. UX considerations, especially navigation, must be taken into account.

选择面板 。制作一个屡获殊荣的网站不仅仅需要一系列令人惊叹的页面。必须考虑用户体验，尤其是导航。

Choosing one of many available header panels is the first thing you need to do. Simply copy its code and add it in the HTML if you wish. The same applies to the footer panel. Select what you want, select its settings, and you're good to go.

首先，需要选择许多可用的标题面板中的一个。只需复制其代码，然后将其添加到HTML中即可。页脚面板也是如此。选择所需的内容，选择其设置，一切顺利。

Choosing navigation. There are various ways you can help users navigate through the slides. Maybe your website doesn't require any special navigation features at all. But if it does, you can choose dots or arrows as navigation aids.

选择导航 。您可以通过多种方式帮助用户浏览幻灯片。也许您的网站根本不需要任何特殊的导航功能。但是，如果可以，则可以选择点或箭头作为导航辅助。

Setting styles. This feature allows you to choose from a selection of pre-defined typography styles. It makes customizing a website to match a client's branding guidelines an easy task.

设置样式 。此功能使您可以从预定义的字体样式中进行选择。它使定制网站以匹配客户的品牌指南变得容易。

There are several code-related customizations you can do to complete your project, such as preloading content or optimizing assets. Creating a simplified mobile version of your site works too.

您可以执行多种与代码相关的自定义操作，以完成项目，例如预加载内容或优化资产。创建网站的简化的移动版本也可以。

One final task: downloading the HTML template. Before uploading the template you've designed onto the live website, you'll want to download it. Add whatever specific images or colors your client wants – and you're done!

最后一项任务：下载HTML模板。 在将您设计的模板上传到实时网站之前，您需要下载它。添加客户想要的任何特定图像或颜色-完成！

为什么现在应该尝试幻灯片 (Why You Should Try Slides Now)

Before going through the main reasons you should use Slides, check out this video with the static site generator in action:

在说明您应该使用幻灯片的主要原因之前，请先观看此视频，其中包括正在使用的静态网站生成器：

The best reason for trying Slides should be obvious once we've summed up what's been discussed.

一旦总结了所讨论的内容，尝试使用幻灯片的最佳理由应该显而易见。

With Slides, you can create awesome, professional-looking websites – every time.
借助幻灯片，您可以每次创建出色的，外观专业的网站。
Slides is quick and easy to use. It's quicker than WordPress in terms of loading speed and much quicker than writing HTML/CSS from scratch.
幻灯片快速且易于使用。就加载速度而言，它比WordPress更快，并且比从头开始编写HTML / CSS快得多。
This page and website builder is remarkably intuitive to use.
该页面和网站构建器使用起来非常直观。
No PHP, no databases, or server dependencies to worry about; you don't need them.
无需担心PHP，数据库或服务器依赖项；您不需要它们。
There's a great selection of beautiful, customizable slides to use.
有很多漂亮的，可自定义的幻灯片可供使用。
Selecting the top and bottom panels and transition animations? Choosing navigation styles? All of that takes but a click of the button.
选择顶部和底部面板以及过渡动画？选择导航样式？所有这些只需单击按钮即可。
Preview as you build – a great time saver.
在构建时进行预览–节省大量时间。
Your websites will load crazy-fast. Search engines (and users) love it.
您的网站将快速加载。搜索引擎(和用户)喜欢它。

All in all, the Slides framework is a great resource to have at your fingertips. This is whether you're a designer, a developer, or an expert in both disciplines. You can always expect to get attractive designs and clean code. Enjoy building amazing websites for your clients with Slides.

总而言之，Slides框架是一个唾手可得的好资源。这就是您是这两个领域的设计师，开发人员还是专家。您总是可以期望获得有吸引力的设计和简洁的代码。享受通过Slides为您的客户构建出色的网站 。