() translation by (you can also view the original English article)
Köszöntünk a Web Design gyerekeknek cikksorozat második leckéjében!
Ebben a leckében megtanuljuk, hogy milyen előkészületekre és eszközökre van szükségünk mielőtt elkezdünk kódot írni Tuts+ város weboldalához. Ha elakadtál, vagy kérdésed van a leckével kapcsolatban, az oldal alján lévő hozzászólás részben felteheted azt.
Először is, nézzük meg közelebbről, mit is fogunk készíteni!
Vázlat készítése
Mielőtt elkezdenénk felépíteni az oldalt, az ötleteink felvázolása nagyon hasznos lehet. Ezzel az egyszerű feladattal rengeteg időt megtakaríthatunk mielőtt elkezdenénk a kódolást.
Lehet, hogy ami a fejünkben van, egyszerűen nem néz ki jól a papíron a valóságban. Lehet, hogy a vázlat készítése közben újabb kérdések, problémák merülnek fel. Vagy a tervünk túlzsúfolt? Sok ilyen jellegű probléma mutatkozhat meg a vázlatrajz készítése közben.
Az nem gond, ha először nem vagyunk elégedettek a rajzunkkal, igazából pontosan ez a célunk! Először azt szeretnénk, ha minden működne a papíron.
Vázlat a Tuts+ Város weboldalról
Szükségünk van egy weboldalra a turistáknak, hogy látogassák meg és megtudják, milyen üzletek, vállalkozások vannak a városban. Csoportosítsuk a vállalkozásokat logikus módon, a "hotelek" egy csoport, az "éttermek" egy másik. Akarunk majd linkeket a vállalkozások saját weboldalára, hogy a látogató rákattintva további részleteket tudhasson meg.
Van néhány kép, amiket használni fogunk, hogy barátságos hatást keltsen a városunkról.
Itt van a vázlat, ami a weboldal teljesen megtervezett színes előnézetéhez vezet:
Ez a pontos honlap, ami létre lesz hozva a semmiből! Elég ügyes.
Szerkesztők
HTML kód írásához (azok a titkos nyelvi elemek, amikről az első leckében beszéltünk) szükségünk van egy szövegszerkesztőre a begépeléséhez.
Ehhez jobb nem használni olyanokat, mint a Microsoft Word, egy egyszerű kód szövegszerkesztő megkönnyíti a munkánkat. Egy kódszerkesztő érteni fogja amit begépelünk és minden kódot a megfelelő színűvé alakít, amíg a Microsoft Word jobb mondjuk iskolai beszámolók írásához.
Van néhány jó, ingyenes kódszerkesztő, amely letölthető az internetről. Ha nem tudod, hogyan kell letölteni valamit, vagy nem vagy biztos, hogy kell-e, mindig az a legjobb ha megkérdezel egy felnőttet.
A Bluefish tökéletes a Windows rendszereket futtató számítógépekhez, míg az Atom megfelelő Mac-hez.
A következő leckében be fogjuk mutatni, hogy ez a szöveg mit jelent, de most itt van ezt a kis előretekintés, hogy tudd mit kell begépelned.
Fájlok, fájlok, fájlok
Mint azt már korábban megbeszéltük, egy weboldal csupán egy halom fájlból áll. Ezeknek a fájloknak ugyanabban a mappában kell lenniük, hogy a böngésző megkaphassa őket.
A Tuts+ város honlap tartalmazni fog egy HTML fájlt (.html kiterjesztéssel a végén), egy CSS fájlt (.css kiterjesztéssel a végén) és négy képet, amik az "images" nevű mappába lesznek elmentve. A képek mappája ugyanabban a fő mappában van, mint a HTML és a CSS fájlok.
A fájl kiterjesztés a betűk csoportja, ami a pont után jön a fájl nevében, ami elárulja milyen típusú a fájl:
Mint említettük, a képek a fő oldal mappájában lesznek mentve a "képek" nevű almappába így:
Az előző képen van egy town.svg (a .svg kiterjesztés csak egyfajta kép) nevű képünk, amit egy extra "images" nevű mappába tettünk. Ez talán segít rendbe tenni a dolgokat:
Mind a két megoldás helyes, de mi extra mappákat fogunk használni, mint a jobb oldali képen.
Böngészők
A munkánkat a böngészőben fogjuk megnézni, amiben most ezt a Tuts+ oldalt nézed!
Számos böngésző tölthető le ingyenesen, ha neked még nem lenne, például a Google Chrome és a Firefox. Ha Mac számítógépet használsz, akkor már egy Safari telepítve van, szép!
Nem az interneten, még
A weboldalunkat közvetlenül a saját számítógépünkön készítjük el és nem az Interneten. Ha emlékszel, az első leckénkben elmondtuk, hogy nem tudjuk megnézni a weboldalt az Interneten ha az nincs egy szerveren.
Az alábbi kép megmutatja, hogyan kellene kinéznie az elkészült weboldalnak lokálisan megnézve (nem az Interneten) a böngészőben. Ahelyett, hogy a webcím úgy nézne ki mint a www.tutsplus.com, az oldal helyi címét látjuk, ami egy kicsit másként néz ki.
Szép munka!
Ebben a leckében megnéztünk néhány fontos dolgot, ami segíteni fog felkészülni a weboldal kódjának megírására. Megnéztük, hogyan készítsük el a fájlokat és néhány eszközt mint a szövegszerkesztőt és a böngészőt.
A következő leckénkben a weboldalunk kódolási részébe fogunk belevágni! Meg fogjuk szervezni (Tudom, annyi szervezés!) és néhány kódot adunk a HTML fájlunkhoz. Ez az, ahol a móka elkezdődik!
Találkozunk a város körül!
