Sul on põneva väljakutse ees, et luua galeriivaade oma veebirakendusele. Selles õpetuses näitan ma, kuidas disain malli põhjal üle võtta, kohandada ja integreerida oma PHP rakendusse. Alustame samm-sammult, et tagada, et oled õigel teel.
Olulisemad tähelepanekud
- Laadi alla vajalikud lisamaterjalid, sealhulgas logo failid ja PSD-mall.
- Veenduge, et järgite piltide kasutamise seaduslikke nõudeid.
- Saage aru galeriilehe põhistruktuurist ja CSS-i ning JavaScripti integreerimisest.
- Looge staatiliste failide kaust, et parandada oma projekti korraldust.
Samm-sammuline juhend
Sisenege veebiarenduse põnevasse maailma, laadides kõigepealt alla vajalikud lisamaterjalid. See sisaldab logo kausta, kus leiate logo redigeeritava versiooni, ja PSD-malli kogu galeriiprojekti jaoks. Igaüks võib neid faile soovi korral kasutada, kuid pidage meeles, et tagatud pildid on mockup-id ja õigused edasise kasutamise jaoks veebis ei ole antud. Asendage need pildid oma omadega.
Avage järgmise sammuna fail galerie_index, et näha oma HTML- ja CSS-implementatsiooni toorest versiooni. Disain sisaldab erinevaid elemente, nagu külgne navigeerimisriba ja sisuala piltidega. Need elemendid on olulised meie lõpliku galeri esitlemiseks. Ülemises tööriistaribal leiate nuppe, mida te olete juba demo jaoks näinud. Pange aga tähele, et on olemas täiendavaid elemente, mida me selles teostuses ei kasuta.
Kopeerige lehe allika kood, et kleepida see faili bilder.phtml. Enne seda eemaldage foreach-tsükkel ja olemasolev dokument, kuna me töötame teistsuguse struktuuriga. Koodis on kaks JavaScripti faili: jQuery teek ja teie oma JS-funktsioon. Lisaks vajate CSS-faili, mis vastutab stiili eest. Pidage meeles, et peate lisama ka CSS-reegleid Internet Exploreri jaoks.
Kui vaatame koodi edasi, leiame musta tööriistariba ja külgriba. Külgribale on lisatud erinevad avataripildid ja võib-olla ka viimane sündmuste voog. Sel hetkel ei ole külgriba integreerimine siiski vajalik. Keskenduge esialgu galeri peamisele osale.
Oluline punkt on piltide loetelu, mida paigutatakse galeriisse mittetäielikku nimekirja (UL). See nimekiri on meie keskne objekt, millega me töötame. Selle põhjal on erinevad nimekirja elemendid (LI), ja me kohandame sisu kohe. Jäänud pildid, mis olid algsest disainist, saab siit eemaldada.
Kuna soovime pilte dünaamiliselt näidata, tuleb mängu foreach-tsükkel. Asetage tsükkel nimekirja elemendi ümber ja asendage olemasolev image-tag dünaamilise pildiga, mida soovite oma andmebaasist kutsuda.
Formaatige index.php, lisades vajalikud CSS- ja JS-failid päisesse. Praegu puudub juurdepääs neile failidele, seega lisage kaldkriips ja looge skin-kaust, et korraldada staatilised failid.
Looge skin-kaust ja lisage kõik failid mallist sinna. Sel viisil saavutab teie projekt parema struktuuri ning muudab muudatuste tegemise lihtsamaks. Skin-kaust peaks sisaldama kõiki vajalikke ressursse, mis vastutavad välise stiili eest.
Kui kõik on õigesti seadistatud, laadige leht uuesti. Nüüd peaksite nägema esimesi pilte, mis laaditakse teie mittetäielikust nimekirjast. Võib-olla peate veel mõned elemendid puhastama ja kohandama, näiteks lehe ja meeldimise valikud – neid me ei vaja esialgu.
Nüüd, kui põhijoon on loodud, saate planeerida täiendavaid funktsioone nagu üleslaadimise ja sisselogimise funktsioonid. Järgmises etapis käsitleme navigeerimist ja põhikohtade dünaamilist haldamist, et teie projekti veelgi täiustada.
Kokkuvõte – Efektiivne galeriivaate kujundamine PHP-s
Selles juhendis olete samm-sammult õppinud, kuidas luua galeriivaate disain PHP-s. Te mõistate nüüd vajalikke samme, et alustada määratud algoperatsioonide kogumiga, sealhulgas kataloogide ja CSS-failide haldamisega.
Küsimused ja vastused
Kuidas ma laadin vajalikku malli alla?Saate mallidest alla laadida, viidates antud allikale õpetuse lehelt.
Kuidas saan galeriis pilte asendada?Asendage malli pildid oma piltidega, et isikupärastada galeriid.
Kas ma saan külgriba kohandada?Jah, saate külgriba kohandada, kuid praeguses etapis ei ole see vajalik.
Mis on skin-kausta eesmärk?Skin-kaust on mõeldud organisatsiooniks kõikide staatiliste failide jaoks, mis puudutavad teie rakenduse disaini.
Kas ma vajasin jQuery-d oma projektis?Jah, jQuery-d kasutatakse galeriis teatud funktsioonide jaoks, seega on oluline, et teek oleks õigesti lisatud.
