A webdesign alapvető folyamata egy tervezővel kezdődik, aki egy weboldal tervét készíti el egy olyan programban, mint a Photoshop. A tervező ezután beszerzi az ügyfél visszajelzéseit, elvégzi a szükséges módosításokat, és megkapja a végső jóváhagyást. Ebben az útmutatóban a PSD-ből HTML-be konvertálási folyamatot vizsgáljuk meg.
Néhány évvel ezelőtt egy webdesigner boldogult kevés HTML-lel, egy kis CSS-sel és egy csipetnyi JavaScripttel a jó mérés érdekében. A modern weboldalak fordítása azonban nemcsak a jelölőnyelvet (azaz a HTML-t) és a stílusokat (azaz a CSS-t), hanem a weboldal dinamikus funkcióit - azaz a JavaScriptet és a jQuery-t - is alaposan meg kell érteni. Szinte lehetetlen olyan modern weboldalt találni, amely ne használna legalább némi JavaScriptet és jQuery-t. Ezenkívül az eszközök töredezettsége megköveteli, hogy a webdesignerek ne csak asztali számítógépekre, hanem mobilokra és táblagépekre is fejlesszenek. Szerencsére a webdesignerek ma már rengeteg keretrendszerrel és referenciával rendelkeznek, amelyek megkönnyítik az életüket.
Ebben az útmutatóban megtanulhatja, hogyan konvertálhat PSD sablont HTML-re néhány gyors és egyszerű lépésben. Nem igazán szeretem a kódolást - inkább tervező vagyok, és ez az első kódolási útmutatóm, ezért nagyon izgatott vagyok, hogy megmutathatom ezt. Minden tőlem telhetőt megteszek, hogy végigvezessem Önt a teljes folyamaton.
A PSD-ből HTML/CSS-be konvertáláskor vissza kell mennünk és vissza kell mennünk a Photoshopba (vagy bármely más képszerkesztő eszközbe) a méretek, távolságok és színek méréséhez. Természetesen szüksége lesz kedvenc kódszerkesztőjére és hibakereső eszközeire is. Én az Intype-ot használtam szövegszerkesztőként. Hibakereső eszközökhöz a Web Developer Toolbar és a Firebug programot ajánlom. Fontos, hogy a kódot minden lépésben különböző böngészőkben teszteljük, hogy naprakészek maradjunk a kódunkkal kapcsolatban.
Létre kell hoznia egy könyvtárat, és azon belül kell lennie egy `/images` könyvtárnak a képekhez és egy `/js` könyvtárnak a JavaScripthez. Továbbá exportálnunk kell a PSD fájlban használt képeket. Például a logót, ki kell választania a réteget a rétegpanelekből, másolni és beilleszteni egy másik dokumentumba, és CTRL + ALT + SHIFT + S gombokat kell megnyomnia, hogy elmenthesse a webes és eszközökhöz. A logó megfelelő fájltípusa .png legyen.
A PSD konverzió folyamata
A PSD-ből HTML-be történő konvertálás az a folyamat, amely során egy statikus Photoshop dokumentum (PSD) tervfájlt funkcionális, böngészőre kész HTML és CSS kóddá alakítanak át. Tartalmazza az oldal összes vizuális elemét, tipográfiáját, színeit, elrendezését, ikonjait, képeit és elrendezését, de ez csak egy kép. A webböngészők nem tudják megjeleníteni a PSD fájlokat. Ahhoz, hogy a terv élő legyen az interneten, egy fejlesztőnek manuálisan kell lefordítania minden vizuális elemet HTML jelölőnyelvvé és CSS stílusokká, amelyeket a böngésző meg tud érteni és megjeleníteni. Egy megfelelő PSD-ből HTML-be konvertálás végeredménye egy tiszta, szemantikus, reszponzív weboldal, amely pontosan úgy néz ki, mint az eredeti terv - eszközökön, böngészőkön és képernyőméreteken keresztül.
A böngészők nem tudják olvasni a PSD fájlokat. Ez a legalapvetőbb ok. A webböngészők, a Chrome, a Firefox, a Safari, az Edge HTML, CSS és JavaScript fájlokat jelenítenek meg. Nem tudják értelmezni a PSD fájlt. Ez rendkívül fontos a márkahűség és az ügyfelek elégedettsége szempontjából.
A PSD egy rögzített szélességű kép. A CSS média lekérdezésekkel rendelkező HTML dinamikusan alkalmazkodik bármilyen képernyőmérethez, egy 4K-s asztali monitorról egy 320 pixeles mobilképernyőig. A konverzióvá teszi a statikus tervet folyékonnyá és eszközfüggetlenné.
A szemantikusan írt HTML kód a tartalom szerkezetét és hierarchiáját kommunikálja a keresőmotorok felé. A fejléc címkék, alt attribútumok, strukturált adatok és szemantikus elemek megfelelő használata közvetlenül befolyásolja, hogy a Google hogyan indexeli és rangsorolja az oldalait.
Egy jól kódolt HTML oldal szerkeszthető, bővíthető és integrálható egy CMS-sel a jövőben. Ezzel szemben egy PSD fájl megköveteli, hogy a tervező végezzen minden változtatást. A kód rugalmasságot biztosít; a kép nem.
A hatékonyan kódolt HTML oldalak ezredmásodpercek alatt betöltődnek. A hatékony CSS, a tömörített képek és a tiszta jelölőnyelv mind hozzájárulnak a gyors betöltési időkhoz, ami a Google Core Web Vitals algoritmusának közvetlen rangsorolási tényezője.
1. lépés: Elemzés és előkészítés
Mielőtt bármilyen kódot írna, szánjon érdemi időt a terv elemzésére. Nyissa meg a PSD-t, és vizsgálja meg minden rétegét, csoportját és szakaszát. Jegyezze fel a használt rácsrendszert, az elrendezési mintákat, a tipográfiai skálát, és hogy mely elemek ismétlődnek az oldalakon. Azonosítsa azokat az elemeket, amelyek tisztán CSS-sel reprodukálhatók, szemben azokkal, amelyek kép-eszközöket igényelnek.
Professzionális tipp: a teljes projektidő 15-20%-át fordítsa elemzésre. Egy 10 órás projekt esetén a 2 órás előzetes elemzés nagyjából 5 óra utómunkát takarít meg.
A rétegeknek egyértelműen és logikusan kell elnevezve lenniük - nem pedig „Layer 47” vagy „Rectangle Copy 3”. A kapcsolódó elemeket mappákba kell csoportosítani (pl. „Header”, „Hero”, „Footer”). A rejtett rétegeket és a fel nem használt elemeket törölni kell.
Csak webbiztonságos betűtípusokat vagy Google Fonts betűtípusokat használjon - kerülje az obskúrus betűtípusokat, amelyeknek nincs webes megfelelője. Határozzon meg egy világos típusméretet: H1, H2, H3, body, caption - ne használjon ad-hoc betűméreteket. Az ágyazott betűtípus részleteit (név, súly, méret, sormagasság, betűköz) világosan jelölje meg.
Határozzon meg egy színpalettát, és jegyezze fel az összes HEX értéket kiemelten a PSD-ben. Jelölje világosan az interaktív állapotokat: hover, aktív, letiltott, fókusz gombokhoz és linkekhez.
Az ikonokat lehetőség szerint vektoros formátumban (SVG), nem raszterizáltként kell elkészíteni. A képeknek 2x felbontásúnak kell lenniük a retina kijelzők támogatásához.
Az egyedi textúrákat és háttereket, amelyeket nem lehet CSS-sel reprodukálni, világosan el kell különítani.
A konverzióra kész PSD:
- Rétegszervezés: Minden rétegnek egyértelműen és logikusan elnevezve kell lennie.
- Tipográfiai következetesség: Használjon webbiztonságos vagy Google Fonts betűtípusokat, és határozzon meg egy világos típusméretet.
- Szín- és stílusdokumentáció: Határozzon meg egy színpalettát és jegyezze fel az összes HEX értéket.
- Eszköztár tisztaság: Ikonok vektoros formátumban, képek 2x felbontásban.
- Reszponzív útmutatás: Külön artboardok vagy jegyzetek mobil és táblagép elrendezésekhez.
Egy jól elkészített PSD átadása 30-40%-kal csökkentheti a konverziós időt, és jelentősen csökkentheti az újraküldési ciklusokat.
2. lépés: Projekt beállítása és eszközök
Mielőtt egyetlen sort kódot írna, győződjön meg arról, hogy a fejlesztői környezete megfelelően be van állítva. A megfelelő eszközök a frusztráló folyamatot simává változtatják.
Design ellenőrző eszközök:
- Adobe Photoshop: az elsődleges eszköz a PSD fájlok megnyitásához és ellenőrzéséhez, az eszközök szeleteléséhez és képek exportálásához.
- Zeplin: design átadási eszköz, amely automatikusan kinyeri a CSS értékeket, elrendezést és eszközöket a PSD/Figma fájlokból.
- Avocode: hasonló a Zeplinhez, ellenőrzi a tervfájlokat és CSS snippeteket generál.
- GIMP: ingyenes alternatíva a Photoshophoz PSD fájlok megnyitásához és szeleteléséhez.
Kódszerkesztők:
- Visual Studio Code: a legszélesebb körben használt szerkesztő, kiváló HTML/CSS támogatással és bővítményekkel.
- Sublime Text: könnyű és gyors, jó egyszerű projektekhez.
- WebStorm: teljes IDE beépített élő előnézettel, ideális nagyobb projektekhez.
Böngésző tesztelő eszközök:
- Chrome DevTools: elemek ellenőrzése, reszponzivitás tesztelése, teljesítmény mérése valós időben.
- BrowserStack: tesztelje HTML-jét valós böngészőkben és eszközökön anélkül, hogy mindet birtokolná.
- Firefox Developer Edition: kiváló CSS Grid és Flexbox ellenőrző beépítve.
Validálási és teljesítmény eszközök:
- W3C Markup Validator: ellenőrzi a HTML-t hibák és szabványok szempontjából.
- Google PageSpeed Insights: méri a betöltési teljesítményt és a Core Web Vitals pontszámokat.
- WAVE Accessibility Tool: ellenőrzi az oldal hozzáférhetőségét.
- Can I Use (caniuse.com): ellenőrizze a böngésző támogatását CSS és HTML funkciókhoz, mielőtt használná őket.
Hozzon létre egy könyvtár mappát, és azon belül kell lennie egy `/images` könyvtárnak a képekhez és egy `/js` könyvtárnak a JavaScripthez. Továbbá exportálnunk kell a PSD fájlban használt képeket. Például a logót, ki kell választania a réteget a rétegpanelekből, másolni és beilleszteni egy másik dokumentumba, és CTRL + ALT + SHIFT + S gombokat kell megnyomnia, hogy elmenthesse a webes és eszközökhöz. A logó megfelelő fájltípusa .png legyen.
Készítsen egy tiszta, rendezett projektstruktúrát. Egy standard beállítás így néz ki:
project-root/├── index.html - a fő HTML fájl├── css/│ └── style.css - az összes CSS stílusa├── js/│ └── main.js - JavaScript és jQuery└── images/ - az összes kivont kép-eszköz└── fonts/ - egyéni webes betűtípusok, ha önállóan vannak tárolva
Egy tiszta mappastruktúra megakadályozza a fájl elérési útjának hibáit, rendben tartja az eszközöket, és megkönnyíti a projekt átadását egy másik fejlesztőnek később.
3. lépés: PSD szeletelés és eszközök kinyerése
A szeletelés azt jelenti, hogy azonosítani kell, mely részeket kell képfájlként létezniük, szemben azokkal, amelyek CSS-sel reprodukálhatók. Az aranyszabály: ha kóddal elvégezhető, akkor kóddal végezze el, gyorsabban töltődik be és könnyebben karbantartható.
Mit kell szeletelni és képként exportálni:
- Logók (SVG-ként exportálva, ha vektoros, PNG-ként, ha raszter).
- Egyéni ikonok, amelyeknek nincs ikon betűkészlet megfelelője.
- Dekoratív textúrák vagy háttér minták.
- Hős képek és fotók.
Mit NEM kell szeletelni (helyette CSS-sel reprodukálja):
- Színes gombok és alakzatok - használjon CSS `background-color` értéket.
- Átmenetek - használjon CSS `linear-gradient` vagy `radial-gradient` értéket.
- Keretek és árnyékok - használjon CSS `border` és `box-shadow` értéket.
- Lekerekített sarkok - használjon CSS `border-radius` értéket.
Képek exportálásakor: a fényképeket JPEG formátumban, az ikonokat és grafikákat PNG vagy SVG formátumban (veszteségmentes, támogatja az átlátszóságot), és minden retina-kész eszközt 2x felbontásban mentse.
4. lépés: HTML jelölőnyelv létrehozása
Kezdje a `DOCTYPE` deklarációval, és építse fel az oldal szemantikus vázát. A szemantikus HTML azt jelenti, hogy a megfelelő elemet használja a megfelelő tartalomhoz, nem csak div-eket mindenhez.
- Használjon `
` elemet a webhely fejlécéhez és navigációjához. - Használjon `
- Használjon `
` elemet a fő tartalomterülethez. - Használjon `
` elemet a különálló tartalom szakaszokhoz. - Használjon `
` elemet önálló tartalomdarabokhoz. - Használjon `
- Használjon `
Írja meg először a teljes HTML struktúrát, minden stílus nélkül. Ez biztosítja, hogy a jelölőnyelv tiszta és logikus legyen, mielőtt a CSS-t alkalmaznák.
A fejléc szakaszában vegye figyelembe a tetején lévő zöld vonalat, amely lefedi az egész képernyőt. Ennek érdekében a fejlécet egy másik konténerrel kell becsomagolnunk.
A szolgáltatás szakasz 2 oszlopot tartalmaz a webdesign és a vektor design számára. Figyelje meg, hogy a fenti szakaszok (diák, szolgáltatások és média) középre vannak igazítva.
A widget szakasz 3 oszlopra van osztva linkekhez, bloghoz és helyhez.
Vegye figyelembe, hogy a div-ek elnevezése minden szakaszban az elnevezésen alapul, amelyet korábban a PSD elrendezésének elemzésekor végeztünk. Szintén vegye figyelembe, hogy ez az elrendezés rögzített, 960 px szélességű. Tudom, hogy jobb lenne, ha ehhez a projekthez CSS keretrendszert használnánk.
Most koncentráljunk jobban a fejléc szakaszra. A fenti HTML-ben csak azt követtem, amit a Photoshopban láttam. Az első elem a logó. Mivel a logó kattintható, egy `` címkét tettem a `` belsejébe, amelyet a hívószám követ, amelyet egy `id="call"` azonosítójú div-ben helyeztem el.
Az összes CSS-t a `style.css` fájlba kell hozzáadni. A fenti CSS-ben, mivel visszaállítottuk a stílusokat, formáznunk kell a szöveges formátumokat. Tudom, hogy más betűtípust használtunk a fejlécünkhöz, és nem hiszem, hogy a Google Fonts támogatja a Kozuka Gothicot. De egyelőre Helvetica-ra cseréljük.
A fenti CSS-ben a `header-wrap` elemet 10 px-es zöld kerettel formáztam. Mivel egy div alapértelmezetten blokkos kijelzésű, ez kitölti a képernyő teljes szélességét. Ezután a fejlécet `margin: 0 auto;` értékkel középre igazítottam.
Ezután a logót rögzített szélességgel és magassággal formáztam. Balra is sodortam. A hívásnál jobbra sodortam, és 1 px szürke keretet, valamint 25 px jobb oldali párnázást alkalmaztam. Vegye figyelembe, hogy ezt az értéket a Photoshopba kell visszamennie, és használnia kell a Vonalzó eszközt (I) a távolság méréséhez.
Mivel a `h3` és `h4` elemeket 25 px alsó margóval formáztam az alap szöveges formátumunkban, vissza kell állítanunk és 0-ra kell változtatnunk.
Ezután a navigációt rögzített szélességgel, magassággal és átmenettel formáztam, és `clear: both;` alkalmaztam a fenti sodort elemek (logó és hívás) törléséhez. Minden `li` elem balra sodródik, kivéve az utolsó `li` elemet. Továbbá van egy bal és jobb kerete, kivéve az otthont. Nincs bal keret, és az utolsónál nincs jobb keret. Minden `a` elem 30 px-es párnázással balról és jobbról, 0-val felül és alul, 50-es magassággal, szövegárnyékkal, 50-es sor magassággal rendelkezik, hogy függőlegesen középre kerüljön.
Az `home` osztályhoz a szöveget kitoltam, és lecseréltem az otthon ikonra. Végül a keresési bevitelt lekerekített sugárral, zöld háttérrel, sötét kerettel a tetején és világos kerettel az alján formáztam.
Mielőtt ezt az IE régebbi verzióiban előnézetbe helyezné, győződjön meg róla, hogy a lent található kódot másolja és illeszti be HTML fájlunk fejléc szakaszába.
<p>Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu.</p><p>Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu.</p><p>Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu.</p>
5. lépés: CSS stílusok alkalmazása
A fenti HTML jelölőnyelvben hozzáadtam egy `slides_container` osztályt, ez fogja tartalmazni a dia elemeket, amelyeket egy div tartalmaz, amely tartalmaz egy képet, egy `slides-right` osztályú div-et, amely tartalmazza a dia címét, információját és az "olvasd el" linket. Hozzáadtam egy osztályt a `slide-heading` fejléchez, az `info` paragrafushoz és az `readmore` linkhez. Most formázzuk az összes elemet.
A fenti CSS-ben, mivel a `slides`, `service` és `media` elemeket a `container` div csomagolja be, először ezeket formázzuk, hogy középre kerüljenek.
A dia pozíciója `relative` értékre van állítva, hogy ez legyen a szülő elem. Ez hasznos, hogy a belső elemeket, az `prev`, `next` és a `pagination`-t abszolút módon tudjuk pozicionálni, amelyeket a JavaScript automatikusan generál.
A `slides_container` számára 315 px fix magasságot adtam, ami megegyezik a slider kép magasságával. A `slide-heading` számára a háttérképpel megegyező fix szélességet és magasságot adtam, és párnázást adtam, hogy a szöveg megfelelően igazodjon, valamint margót adtam, hogy helyet biztosítsak és helyesen igazodjanak. A `.info` számára fix szélességet adtam margóval az igazításhoz. A `.readmore` számára először külön margó stílust adtam, mivel csak a slider `readmore`-ja rendelkezik ezzel, és az elrendezés összes `readmore` linkje nem rendelkezik margóval balról.
A `pagination`, `prev` és `next` gombok automatikusan generálódnak a JavaScript által, hogy ezeket formázzuk, először azonosítanunk kell a címkét vagy az alkalmazott HTML osztály attribútumot. Most, hogy tudja az elemet, célozzuk meg a CSS-ben.
A `Pagination`-t abszolút módon pozicionáltam, 25 px-re az aljától és balról, továbbá `z-index: 99px;` értéket alkalmaztam - ez a `pagination`-t egészen a tetejére helyezi a többi elem fölé. Ha ezt nem alkalmazzuk, vegye figyelembe, hogy nem kattintható, mert a kép a `pagination` maga fölött van.
Ezután a `pagination` `li` elemeket balra sodortam, 10 px jobb margót adtam, háttérképet adtam fix szélességgel és magassággal. A háttér pozicionálását alapértelmezetten felülre állítottam, mivel az alapállapotú kép felül van, a jelenlegi vagy aktív állapothoz megfordítjuk a pozicionálást felülről alulra, és végül blokkszintű elemként jelenítjük meg, és elrejtjük a szöveget.
A `.next` és `.prev` esetében szinte ugyanazt tettük, mint a `pagination`-nál, de ezúttal jobbra vannak pozicionálva. Vegye figyelembe a bal oldalon lévő `prev-next.png` képet, ez tartalmazza az előnézeti gomb képét, a jobb oldalon pedig a következő gomb képét.
Most adjuk hozzá a szükséges jQuery szkripteket a fejlécbe.
Végül hozzá kell adnunk a JavaScript kódot, amely lehetővé teszi a slider működését az elrendezésünkben. Ezt a szkriptet közvetlenül a `.