Efektyvus galerijos vaizdo pateikimas PHP

Tu esi prieš įdomų iššūkį, sukurti Galerijos vaizdą savo žiniatinklio programai. Šiame mokyme parodysiu, kaip perimti dizainą iš šablono, pritaikyti jį ir integruoti į savo PHP programą. Eikime kartu žingsnis po žingsnio, kad įsitikintume, jog esi teisingame kelyje.

Svarbiausios įžvalgos

1. Parsisiųsk reikiamą papildomą medžiagą, įskaitant logotipo failus ir PSD šabloną.
2. Įsitikink, kad gerbi teisines nuostatas dėl vaizdų naudojimo.
3. Suvokite pagrindinę galerijos puslapio struktūrą ir CSS bei JavaScript integravimą.
4. Įkurkite statinių failų katalogą, kad pagerintumėte projekto organizaciją.

Žingsnis po žingsnio vadovas

Ženkite į įdomų žiniatinklio kūrimo pasaulį, pirmiausia parsisiųsdami reikiamą papildomą medžiagą. Tai apima logotipo katalogą, kuriame rasite redaguojamą logotipo versiją, taip pat PSD šabloną visam galerijos projektui. Kiekvienas gali naudoti šiuos failus, kaip nori, tačiau turėtumėte pasirūpinti, kad įdėti vaizdai yra maketai ir teisės jų tolesniam naudojimui internete nėra suteiktos. Pakeiskite šiuos vaizdus savuoju.

Atidarykite failą galerie_index, kad pamatytumėte savo HTML ir CSS įgyvendinimo žaliąją versiją. Dizainas apima įvairius elementus, tokius kaip šoninė navigacijos juosta ir turinio srities su vaizdais. Šie elementai svarbūs, kad galėtume pristatyti mūsų galutinę galeriją. Viršutinėje įrankių juostoje rasite mygtukus, kuriuos jau žinote iš demonstracijos. Tačiau atkreipkite dėmesį, kad yra papildomų elementų, kurių šio įgyvendinimo metu nenaudosime.

Kopijuokite puslapio kodą, kad įklijuotumėte jį į failą bilder.phtml. Prieš tai pašalinkite foreach ciklą ir esamą dokumentą, kadangi dirbsime su kita struktūra. Kode bus dvi JavaScript failai: jQuery biblioteka ir jūsų pačių JS funkcija. Be to, jums reikės CSS failo, kuris atsakingas už stilių. Atminkite, kad taip pat turite pridėti CSS nurodymus Internet Explorer.

Žiūrint toliau į kodą, matome juodą įrankių juostą ir šoninę juostą. Šoninė juosta apima įvairius avatarų vaizdus ir galbūt srauto galimus naujausius įvykius. Šiuo metu nereikia integruoti šoninės juostos. Pirmiausia koncentruokite dėmesį į pagrindinę galerijos dalį.

Svarbiausias punktas yra vaizdų sąrašymas, kuris bus išdėstytas nelengvoje sąrašo (UL) galerijoje. Šis sąrašas yra mūsų centrinis objektas, su kuriuo dirbsime. Yra įvairių sąrašo elementų (LI), kuriais remsimės, ir mes netrukus pritaikysime turinį. Likusius vaizdus, kurie buvo naudojami pradiniam dizainui, galima čia pašalinti.

Norint dinamiškai rodyti vaizdus, taikomas foreach ciklas. Įdėkite ciklą aplink sąrašo elementą ir pakeiskite esamą image-tag'ą dinamišku vaizdu, kurį norite gauti iš savo duomenų bazės.

Formatavimo index.php pridėkite reikiamus CSS ir JS failus į antraštę. Šiuo metu trūksta prieigos prie šių failų, todėl pridėkite brūkšnį ir sukurkite skin katalogą, kad organizuotumėte statinius failus.

Sukurkite skin katalogą ir įdėkite visus šablono failus ten. Tokiu būdu jūsų projektas pasieks geresnę struktūrą, ir bus lengviau atlikti pakeitimus. Skin katalogas turėtų apimti visas reikiamas išteklius, atsakingus už išorinį stilizavimą.

Kai viskas teisingai sukonfigūruota, atnaujinkite puslapį. Turėtumėte dabar matyti pirmuosius vaizdus, kurie apkraunami iš jūsų nesusisteminto sąrašo. Gali būti, kad dar turėsite išvalyti ir pritaikyti keletą elementų, pavyzdžiui, puslapiavimą ir "Like" parinktis – jų mums kol kas nereikia.

Dabar, kai pagrindinis dizainas paruoštas, galite planuoti papildomas funkcijas, kaip įkėlimo ir prisijungimo funkcijas. Kitame žingsnyje rūpinsimės navigacija ir dinamine bazinių URL valdyba, kad tobulintume savo projektą.

Santrauka – Efektyvus galerijos vaizdo kūrimas PHP

Šiame vadove žingsnis po žingsnio išmokote, kaip sukurti galerijos vaizdo dizainą naudojant PHP. Dabar suprantate būtinus žingsnius, kad pradėtumėte su nustatytu pradiniu šalių komplektu, įskaitant katalogų ir CSS failų tvarkymą.