Uyenza njani inkcazo ye-HTML nge-webslides

Kwilizwe apho bonisa izimvo zethu kwi-intanethi iye yafuneka ngakumbi kwaye apho ukwahlukahlukana kwezixhobo kusikhokelele ekwenzeni imiboniso emangazayo, ethi kwiimeko ezininzi iphele ingahambelani namanye amajelo eendaba, ngaphandle kwamathandabuzo, Inkcazo ye-HTML baya kuqhubeka nokuba lolunye uhlobo kule ndawo.

Kodwa ayiyomfihlo nakubani na ukuba ukwenza iintetho ezintle ze-HTML kungathatha ixesha elide kwaye kufuna ulwazi oluphambili lwe-HTML, i-CSS kwaye kwezinye iimeko iJavaScript. Ukusuka kwezi ngxaki, isixhobo esihle sivela ukuhla kwewebhu.

Yintoni i-webslides?

Kukuyibiza ngandlela ithile njengomthombo ovulekileyo "isakhelo", esenziwe ngu UJose Luis Antunez, iyasivumela Yenza intetho ye-HTML ngokukhawuleza nangokulula. Isixhobo sinezinto ezibalulekileyo kuwe ukuze wenze ezakho iingcaciso-ntetho, ngokufanayo, ungathatha enye yeentetho zeedemo kwaye uzenzele ukuthanda kwakho kwimizuzu embalwa.

Inkcazo ye-HTML endiyenzileyo ngesi sixhobo iya kuba nobuhle obunomtsalane. Kubalulekile ukuba uqaphele ukuba esi sixhobo sifuna ulwazi olusisiseko lwe-HTML kunye ne-CSS, ke kufanelekile kuzo zonke iintlobo zabasebenzisi, ekufuneka bejolise kumxholo kwaye kuncinci kakhulu kwindlela abayilungiselela ngayo intetho.

Uyikhuphela njani i-webslides?

Ukukhuphela i-webslides, yenza nje lo mthetho ulandelayo kulawulo lwakho oluthandayo:

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

Unokwenza kwakhona indawo yokugcina esemthethweni nge

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

Ngaphakathi kwifolda yeprojekthi uza kufumana ii-js, i-css kunye needemo eziyimfuneko ukuqala ukwenza eyakho intetho ye-HTML ngokulula.

Uyisebenzisa njani i-webslides?

Olona loncedo lukhulu kwii-webslide kukusebenziseka kwayo, esi sixhobo senza ukuba kube lula ukwenza iintetho ngeenjongo ezahlukeneyo kunye noluhlu lwedemo olukhawulezisa inkqubo yokudala umboniso ngepesenti ephezulu kakhulu.

Sifumana ntoni xa sikhuphela i-webslides?

Xa ukhuphela i-webslides singena kwiifolda ezahlukeneyo, ezibandakanya iidemo kunye nemifanekiso (izixhobo kunye neelogo).

• Ifolda ye-css iya kugcina izimbo zemiboniso yethu
• Kwifolda ye-js imibhalo yeJavacript eyimfuneko iya kugcinwa, kubandakanya i-webslide.js esisiseko apho kulapho kwenziwa khona uninzi lomlingo.
• Imifanekiso kunye neefayile ze-html zeedemo ziya kugcinwa kwimifanekiso nakwifolda yedemo ngokulandelelana.

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

Ukwenza iintetho ze-HTML nge-webslides

Kukho izibonelelo ezi-2 ezisisiseko xa usebenzisa i-webslides, esiyichaze apha ngezantsi:

• Ikhowudi icocekile kwaye inokonakala. Ikwabandakanya ukumakisha okunomdla kunye nokusetyenziswa kwezona magama zidumileyo. Akukho sidingo sokusebenzisa iiklasi, okanye ukusebenzisa indlwana ngaphezulu.
• Ngamnye <section> Kwi #webslides ibonisa isilayidi. Ke ubuhedeni bulula kakhulu.

UMboniso weSilayidi 1  UMboniso weSilayidi 1

Ngendlela efanayo sinokwenza izilayidi ezime nkqo, ukongeza isitayile esime nkqo

Iiklasi ezenza i-websides CSS

• Uhlobo lokuchwetheza:. -Ukufika kumyalezo, .text-data, .text-intro ...
• Imibala engasemva: .bg-zaseprayimari, .bg-apile, .bg-luhlaza ...
• Imifanekiso engasemva: .umva ongemva.
• Amakhadi: .ikhadi-50, .ikhadi-40 ...
• Iibhloko eziguqukayo: .flexblock.clients, .lexlex.metrics ...

Ukolula kwii-webslides

ii-webslides zisivumela ukuba songeze iindlela ezintsha kunye nokusebenza, umzekelo sinokongeza ezinye zezixhobo zilandelayo:

• Unsplash
• dlalisa.css
• amasuntswana
• pt

Idemo ye-HTML yokubonisa eyenziwe nge-webslides

Ungabona uthotho lweedemo zeentetho ze-HTML ezenziwe ngewebhu apha. Ngendlela efanayo, xa ukhuphela isakhelo unokufikelela kwikhowudi nganye yezi demos.

Esi sisixhobo esiya kusivumela ukuba senze imiboniso ye-HTML ngokukhawuleza kwaye sigqibe ngokugqibeleleyo, kodwa iya kusinceda ukuba sigxile kumxholo kwaye siphumeze iziphumo esingakhange sizicinge ngaphambili.