Hvordan lage HTML-presentasjoner med nettbilder

I en verden der vise våre ideer på internett har blitt stadig mer nødvendig, og hvor mangfoldet av verktøy har ført til at vi lager fantastiske presentasjoner, som i mange tilfeller ender med å være inkompatible med noen medier, uten tvil, HTML-presentasjoner de vil fortsette å være det universelle alternativet på dette området.

Men det er ingen hemmelighet for noen at å lage vakre HTML-presentasjoner kan ta lang tid og kreve noe avansert kunnskap om HTML, CSS og i noen tilfeller JavaScript. Fra disse problemene dukker det opp et utmerket verktøy nettsider.

Hva er nettsider?

Det er å kalle det på en eller annen måte et open source "framework", laget av Jose Luis Antunez, som tillater oss lage HTML-presentasjoner raskt og enkelt. Verktøyet har det viktigste for deg å lage dine egne presentasjoner. På samme måte kan du ta en av demopresentasjonene og tilpasse den etter eget ønske i løpet av få minutter.

HTML-presentasjonene jeg laget med dette verktøyet, vil ha en imponerende estetikk. Det er verdt å merke seg at dette verktøyet krever veldig grunnleggende kunnskap om HTML og CSS, så det er ideelt for alle typer brukere, som bare skal fokusere på innholdet og veldig lite på hvordan de forbereder presentasjonen.

Hvordan laste ned nettsider?

For å laste ned nettsider, utfør bare følgende kommando fra favorittkatalogen din:

wget https://github.com/jlantunez/webslides/archive/master.zip

Du kan også klone det offisielle depotet med

git clone https://github.com/jlantunez/webslides.git

Inne i prosjektmappen får du de nødvendige js, css og demoer for å enkelt kunne lage dine egne HTML-presentasjoner.

Hvordan bruker jeg nettsider?

Den største fordelen med web-lysbilder er brukervennligheten, dette verktøyet gjør det virkelig enkelt å lage presentasjoner med forskjellige mål, og demoseriene øker prosessopprettingsprosessen med en veldig høy prosent.

Hva får vi når vi laster ned nettsider?

Når du laster ned nettsider får vi tilgang til forskjellige mapper, som inkluderer demoer og bilder (enheter og logoer).

• Css-mappen lagrer stilene til presentasjonene våre
• De nødvendige javaskriptene vil bli lagret i js-mappen, inkludert det grunnleggende webslide.js som er der det meste av magien gjøres.
• Bildene og html-filene til demoer lagres i henholdsvis bilder og demomapper.

webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

Opprette HTML-presentasjoner med nettbilder

Det er to grunnleggende fordeler når du bruker nettbilder, som vi nevner nedenfor:

• Koden er ren og skalerbar. Det inkluderer også intuitiv markering med bruk av de mest populære nomenklaturene. Det er ikke nødvendig å bruke klasser, eller overforbruk hekkende.
• Hver <section> i #webslides representerer det et lysbilde. Så paginering er ekstremt enkel.

Lysbilde 1  Lysbilde 1

På samme måte kan vi lage vertikale lysbilder, og legge til en vertikal stil

Klasser som utgjør websidene CSS

• Typografi: .text-landing, .text-data, .text-intro ...
• Bakgrunnsfarger: .bg-primær, .bg-eple, .bg-blå ...
• Bakgrunnsbilder: .background, .background-center-bottom ...
• Kort: .card-50, .card-40 ...
• Fleksible blokker: .flexblock.clients, .flexblock.metrics ...

Utvides til web-lysbilder

websklier lar oss legge til nye stiler og funksjoner, for eksempel kan vi legge til noen av følgende ressurser:

• Unsplash
• animere.css
• partikler.js
• pt

HTML-presentasjonsdemoer laget med web-lysbilder

Du kan se en serie demoer av HTML-presentasjoner laget med web-lysbilder her. Tilsvarende når du laster ned rammeverket, kan du få tilgang til kodingen av hver av disse demoene.

Dette er et verktøy som lar oss lage HTML-presentasjoner raskt og med flotte finish, men det vil også hjelpe oss å fokusere på innholdet og oppnå resultater som vi ikke forestilte oss før.