Ungazenza kanjani izethulo ze-HTML ngama-webslides

Emhlabeni lapho sibonise imibono yethu ku-intanethi Sekudingeka kakhulu futhi lapho ukwehluka kwamathuluzi kusiholele ekutheni sakhe izethulo ezimangazayo, ezimeni eziningi ezigcina zingahambisani neminye imithombo yezindaba, ngaphandle kokungabaza, Izethulo ze-HTML zizoqhubeka nokuba ngenye indlela kule ndawo.

Kepha akuyona imfihlo kunoma ngubani ukuthi ukwethula izethulo ezinhle ze-HTML kungathatha isikhathi eside futhi kudinge ulwazi oluthile oluthuthukile lwe-HTML, CSS, futhi kwezinye izimo iJavaScript. Kulezi zinkinga, kuvela ithuluzi elihle kakhulu amasayithi ewebhu.

Yini ama-webslides?

Ukuyibiza ngandlela thile njengomthombo ovulekile "uhlaka", olwenziwe yi- UJose Luis Antunez, lokho kuyasivumela dala izethulo ze-HTML ngokushesha futhi kalula. Ithuluzi linezinto ezibalulekile ongazenzela ezakho izethulo, ngokufanayo, ungathatha enye yezethulo zedemo futhi uzihlele ngendlela othanda ngayo ngemizuzu embalwa.

Izethulo ze-HTML engizenzile ngaleli thuluzi zizoba nobuhle obuhle. Kuyaphawuleka ukuthi leli thuluzi lidinga ulwazi oluyisisekelo lwe-HTML ne-CSS, ngakho-ke ilungele zonke izinhlobo zabasebenzisi, okufanele bagxile kokuqukethwe futhi kuncane kakhulu ekutheni bayilungiselela kanjani isethulo.

Ungalanda kanjani ama-webslides?

Ukulanda ama-webslides, vele wenze umyalo olandelayo kusuka enkombeni yakho oyithandayo:

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

Ungafaka futhi indawo yokugcina esemthethweni nge

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

Ngaphakathi kufolda yephrojekthi uzothola ama-js, i-css nama-demos adingekayo ukuqala ukudala izethulo zakho ze-HTML kalula.

Ungayisebenzisa kanjani i-webslides?

Inzuzo enkulu yama-webslides ukusebenzisa kwayo kalula, leli thuluzi lenza kube lula ukudala izethulo ngezinhloso ezahlukahlukene futhi uchungechunge lwalo lwedemo lusheshisa inqubo yokwenziwa kwesethulo ngamaphesenti aphezulu kakhulu.

Sithola ini uma silanda ama-webslides?

Uma ulanda ama-webslides sifinyelela amafolda ahlukahlukene, afaka amademo nezithombe (amadivayisi nama-logo).

• Ifolda ye-css izogcina izitayela zezethulo zethu
• Imibhalo yeJavascript edingekayo izogcinwa kufolda ye-js, kufaka phakathi i-webslide.js eyisisekelo lapho okwenziwa khona imilingo eminingi.
• Izithombe namafayela e-html amademo azogcinwa ezithombeni nakumafolda amademo ngokulandelana.

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

Ukwakha izethulo ze-HTML ngama-webslides

Kunezinzuzo ezi-2 eziyisisekelo lapho usebenzisa ama-webslides, esiwasho ngezansi:

• Ikhodi ihlanzekile futhi iyasabazeka. Kubandakanya nemakhaphu enembile ngokusetshenziswa kwama-nomenclature athandwa kakhulu. Akunasidingo sokusebenzisa amakilasi, noma ukusebenzisa ngokweqile isidleke.
• Ngamunye <section> Ku #webslides imele isilayidi. Ngakho-ke ubuqaba bulula ngokwedlulele.

Isilayidi 1  Isilayidi 1

Ngendlela efanayo singenza amaslayidi aqondile, engeza isitayela esime mpo

Amakilasi akha i-CSS yewebhu

• I-Typography: ukufika komhlaba, i-.text-data, i-text-intro ...
• Imibala Yangemuva: .bg-primary, .bg-apple, .bg-blue ...
• Izithombe ezingemuva: .ngemuva emuva, .ngemuva-maphakathi-ezansi…
• Amakhadi: .ikhadi-50, .ikhadi-40 ...
• Amabhulokhi aguquguqukayo: .flexblock.clients, .flexblock.metrics ...

Inwebela kuma-webslides

ama-webslides asivumela ukuthi sengeze izitayela ezintsha nokusebenza, ngokwesibonelo singangeza ezinye zezinsizakusebenza ezilandelayo:

• Unsplash
• popayi.css
• izinhlayiya
• pt

Ama-demos wesethulo se-HTML enziwe ngama-webslides

Ungabona uchungechunge lwamademo ezethulo ze-HTML ezenziwe ngama-webslides lapha. Ngokufanayo, lapho ulanda uhlaka ungafinyelela ukufakwa kwekhodi yedemo ngalinye kulawa.

Leli yithuluzi elizosivumela ukuthi sakhe izethulo ze-HTML ngokushesha nangokuqedela okuhle, kepha kuzosisiza nokuthi sigxile kokuqukethwe futhi sithole imiphumela ebesingayicabangi ngaphambili.