Kuinka tehdä HTML-esityksiä verkkosivuilla

Maailmassa, jossa Näytä ideoitamme Internetissä on tullut yhä tarpeellisemmaksi ja missä työkalujen monimuotoisuus on johtanut meidät luomaan upeita esityksiä, jotka monissa tapauksissa ovat lopulta yhteensopimattomia joidenkin tiedotusvälineiden kanssa, epäilemättä HTML-esitykset ne ovat edelleen yleinen vaihtoehto tällä alalla.

Mutta kenellekään ei ole salaisuus, että kauniiden HTML-esitysten luominen voi viedä kauan ja vaatia jonkin verran edistynyttä tietoa HTML: stä, CSS: stä ja joissakin tapauksissa JavaScriptistä. Näistä ongelmista syntyy erinomainen työkalu, jota kutsutaan web-dioja.

Mikä on dioja?

Sitä kutsutaan jotenkin avoimen lähdekoodin "kehykseksi", jonka on tehnyt Jose Luis Antunez, joka antaa meille mahdollisuuden luoda HTML-esityksiä nopeasti ja helposti. Työkalulla on välttämätöntä, jotta voit tehdä omia esityksiä, samoin voit ottaa jonkin esittelyesityksistä ja mukauttaa sitä mieleisesi muutamassa minuutissa.

Tällä työkalulla tekemilläni HTML-esityksillä on vaikuttava esteettisyys. On syytä huomata, että tämä työkalu vaatii hyvin perustiedot HTML: stä ja CSS: stä, joten se on ihanteellinen kaikentyyppisille käyttäjille, joiden tulisi keskittyä vain sisältöön ja hyvin vähän esityksen valmisteluun.

Kuinka ladata verkkosivuja?

Voit ladata verkkosivuja suorittamalla seuraavan komennon suosikkihakemistostasi:

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

Voit myös kloonata virallisen arkiston

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

Projektikansiosta saat tarvittavat js, css ja demot, jotta voit helposti luoda omia HTML-esityksiä.

Kuinka käyttää dioja?

Verkkosivujen suurin etu on helppokäyttöisyys, tämän työkalun avulla on todella helppoa luoda esityksiä eri tavoitteilla, ja sen demosarja nopeuttaa esityksen luomisprosessia erittäin suurella prosentilla.

Mitä saamme, kun lataamme verkkosivuja?

Kun lataamme verkkosivuja, käytämme erilaisia ​​kansioita, jotka sisältävät esittelyjä ja kuvia (laitteet ja logot).

• Css-kansio tallentaa esitystyylimme
• Tarvittavat javascriptiot tallennetaan js-kansioon, mukaan lukien perustavanlaatuinen webslide.js, jossa suurin osa taikuudesta tehdään.
• Demojen kuvat ja HTML-tiedostot tallennetaan vastaavasti kuvien ja demojen kansioihin.

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

HTML-esitysten luominen verkkosivuilla

Verkkosivujen käytössä on 2 perustavaa hyötyä, jotka mainitsemme alla:

• Koodi on puhdas ja skaalautuva. Se sisältää myös intuitiivisen merkinnän käyttämällä suosituimpia nimikkeistöjä. Luokkia tai liikakäyttöä ei tarvitse käyttää.
• Kukin <section> #webslidesissa se edustaa diaa. Joten sivutus on erittäin yksinkertaista.

Dia 1  Dia 1

Samalla tavalla voimme tehdä pystysuuntaisia ​​dioja lisäämällä pystysuuntaisen tyylin

Luokat, jotka muodostavat websides CSS: n

• Typografia: .text-landing, .text-data, .text-intro ...
• Taustavärit: .bg-ensisijainen, .bg-omena, .bg-sininen ...
• Taustakuvat: .tausta, .tausta-keskipohja ...
• Kortit: .card-50, .card-40 ...
• Joustavat lohkot: .flexblock.clients, .flexblock.metrics ...

Laajentaminen verkkosivuille

verkkosivujen avulla voimme lisätä uusia tyylejä ja toimintoja, esimerkiksi voimme lisätä joitain seuraavista lähteistä:

• Unsplash
• animoida.css
• partikkelit.js
• pt

Web-dioilla tehdyt HTML-esittelydemot

Näet sarjan esityksiä HTML-esityksistä, jotka on tehty verkkosivuilla täällä. Vastaavasti, kun lataat kehyksen, voit käyttää näiden demojen koodausta.

Tämä on työkalu, jonka avulla voimme luoda HTML-esityksiä nopeasti ja hienosti, mutta se auttaa meitä myös keskittymään sisältöön ja saavuttamaan tuloksia, joita emme vielä kuvittaneet.