Annyi programozási, stílus- és jelölőnyelv fejlesztésével a webdesign tanulása bonyolultabb, mint valaha. Szerencsére rengeteg eszköz áll rendelkezésre az induláshoz. Keressen néhány alapvető forrást, például online oktatóanyagokat vagy egy naprakész könyvet a webdesignról. Ha készen áll a kezdésre, kezdje elsajátítani a HTML és a CSS alapjait. Ezután elkezdheti felfedezni a fejlettebb webdesign nyelveket, például a JavaScriptet!
Lépések
1. módszer a 4 -ből: Webtervezési források keresése
1. lépés: Keressen online webdesign tanfolyamokat és oktatóanyagokat
Az internet tele van részletes információkkal a webdesignról, és nagy részük szabadon elérhető. Kezdheti azzal, hogy részt vesz néhány ingyenes online tanfolyamon az Udemy -n vagy a CodeCademy -n, vagy csatlakozhat egy kódolóközösséghez, például a freeCodeCamp -hez. Webes tervezési oktatóanyagokat is találhat a YouTube -on.
- Ha pontosan tudja, mit keres, próbálja meg a keresést meghatározott kifejezések használatával (pl. „Osztályválasztók a CSS oktatóanyagban”).
- Ha kezdő vagy, és nincs webes tervezési tapasztalata, kezdje a HTML és CSS kódolás alapjainak megismerésével.
Lépés 2. Nézze meg, hogyan kell osztályt venni egy helyi főiskolán vagy egyetemen
Ha főiskolára vagy egyetemre jársz, érdeklődj iskolád számítástechnikai tanszékén, vagy nézd meg a kurzuskatalógusodat, hogy vannak -e elérhető webdesign -tanfolyamok. Ha nem iskolába jár, ellenőrizze, hogy a közeli főiskolák vagy egyetemek kínálnak -e továbbképzési órákat webdesign témában.
Egyes egyetemek online webdesign órákat kínálnak, amelyek nyitottak bárki számára, aki beiratkozni szeretne. Keressen olyan webhelyeket, mint a Coursera.org, és találjon ingyenes vagy megfizethető webdesign órákat, amelyeket egyetemi oktatók tartanak
3. Szerezzen be néhány webdesign könyvet a könyvesboltból vagy a könyvtárból
Egy jó könyv a webdesignról felbecsülhetetlen értékű referencia lehet, amikor tanulja és alkalmazza mesterségét. Keressen naprakész könyveket az általános webdizájnról vagy konkrét kódolási formátumokról és nyelvekről, amelyeket szeretne megtanulni.
A webdesignról szóló magazinok és blogcikkek olvasása szintén jó módja az új technikák elsajátításának, az inspiráció megszerzésének és a legújabb trendeknek
4. lépés: Töltsön le vagy vásároljon webes tervező szoftvert
A jó webdesign -szoftver segíthet hatékonyabban és eredményesebben létrehozni a webhelyeket, és kiválóan alkalmas a kódolás, a szkriptek és más kulcsfontosságú tervezési elemek alkalmazásának csínját -bínját is megismerni. Előnyt jelenthet az alábbi eszközök használata:
- Grafikai tervező programok, például Adobe Photoshop, GIMP vagy Sketch.
- Webhely -építő eszközök, például WordPress, Chrome DevTools vagy Adobe Dreamweaver.
- FTP szoftver a kész fájlok szerverre történő átviteléhez.
5. lépés. Keressen néhány webhelysablont, amelyekkel játszhat az induláskor
Nincs semmi baj a sablonok használatával, amikor elsajátítja a webdesign alapjait. Keressen rá a kívánt weboldal -sablonokra, és nézze meg alaposan a kódot, hogy képet kapjon arról, hogyan állította össze a tervező az oldalt. Kísérletezhet a kód megváltoztatásával és saját elemek hozzáadásával a sablonhoz.
A kezdéshez keressen ingyenes webhelysablonokat, vagy kísérletezzen a webes tervezőszoftverhez mellékelt sablonokkal
2. módszer a 4 -ből: HTML elsajátítása
1. lépés. Ismerkedjen meg az alapvető HTML -címkékkel
A HTML egy egyszerű jelölőnyelv, amelyet a webhely alapelemeinek formázására használnak. Címkék használatával formázhatja webhelye különböző elemeit. A címkék minden elem előtt és után szögletes zárójelben jelennek meg, és útmutatást adnak arról, hogy az adott elem hogyan fog működni az oldalon. A címke bezárásához tegyen egy / -t az utolsó címke elé a szögletes zárójelek közé.
- Például, ha azt szeretné, hogy a szöveg egy része olyan legyen bátor, körülveszi az elemet a címkével, így: Ez a szöveg félkövér.
- Néhány gyakori címke: (bekezdés), (horgony, amely meghatározza a linkelt szöveget) és (betűtípus, amely segít meghatározni a szöveg különböző attribútumait, például méretét és színét).
- Más címkék határozzák meg a HTML dokumentum különböző részeit. Például arra szolgál, hogy olyan információkat tartalmazzon az oldalról, amelyek nem lesznek láthatók a néző számára, például kulcsszavakat vagy egy oldalleírást, amely megjelenik a keresőmotor találatai között.
2. lépés. Ismerje meg a címkeattribútumok használatát
Egyes címkéknek további információkra van szükségük annak meghatározásához, hogy hogyan kell működniük. Ez a kiegészítő információ megjelenik a nyitó címkében, és ezt „attribútumnak” nevezik. Az attribútum neve közvetlenül a címke neve után jelenik meg, szóközzel elválasztva. Az attribútum értékét az attribútumnévhez egy = jel csatolja, és idézőjelek veszik körül.
- Például, ha azt szeretné, hogy a szöveg egy része vörös legyen, akkor ezt a címke és a megfelelő betűszín -attribútum használatával teheti meg, például: Ez a szöveg piros.
- A HTML -címke attribútumokkal korábban rutinszerűen elért hatások nagy része, például a különböző betűszínek beállítása, ma jellemzően CSS -kódolással történik.
Lépés 3. Kísérletezzen beágyazott elemekkel
A HTML lehetővé teszi az elemek más elemeken belüli elhelyezését is a bonyolultabb formázás érdekében. Például, ha meg szeretne határozni egy bekezdést, majd dőlt betűket ír elő a bekezdésen belül, akkor ezt a következőképpen teheti meg:
Imádom a kódolást!
4. lépés. Ismerkedjen meg az üres elemekkel
A HTML egyes elemeihez nincs szükség nyitó és záró címkékre. Ha például képet szúr be, akkor csak egyetlen „img” címkére van szüksége, amely tartalmazza a címke nevét és minden egyéb szükséges attribútumot (például a képfájl nevét és bármely más alternatív szöveget, amelyet hozzá szeretne adni a kisegítő lehetőségekhez). Például:
5. lépés: Fedezze fel a HTML -dokumentum alapvető elrendezését
Annak érdekében, hogy HTML-alapú webhelye megfelelően működjön, tudnia kell, hogyan kell formázni az egész oldalt. Ez magában foglalja annak meghatározását, hogy html kódja hol kezdődik és hol végződik, valamint címkék használatával határozza meg, hogy a kód mely részei jelennek meg, és melyek azok, amelyek rejtett háttérinformációkat tartalmaznak. Például:
- A címke segítségével határozza meg oldalát HTML dokumentumként.
- Ezután tegye a teljes oldalt a címkék közé, hogy meghatározza a kód kezdetét és végét.
- Helyezzen a címkék közé minden olyan információt, amely nem jelenik meg a néző számára, például az oldal címét, kulcsszavait és az oldal leírását.
- A címkékkel határozza meg az oldal törzsét (azaz bármilyen szöveget és képet, amelyet látni szeretne).
3. módszer a 4 -ből: Ismerkedés a CSS -szel
1. lépés: A CSS használatával stílusokat alkalmazhat a HTML -dokumentumokon
A CSS egy stíluslap nyelv, amely lehetővé teszi különböző stílusok és design elemek alkalmazását a weboldalán. Például, ha egy adott betűtípust vagy szövegszínt szelektíven szeretne alkalmazni az oldal néhány szövegelemére, akkor létrehozhat egy CSS -fájlt. Ezután bárhová beillesztheti a CSS -fájlt a HTML -dokumentumba.
-
Például, ha azt szeretné, hogy egy CSS -fájl zöldre változtassa a HTML -dokumentum összes bekezdéselemét, létrehozhat egy.css fájlt, amely tartalmazza a következő sorokat:
- p {
- szín: zöld;
- }
- Ezután a fájlt olyan néven menti, mint a style.css.
- A stíluslap HTML -dokumentumra történő alkalmazásához üres hivatkozási elemként illessze be a címkékbe. Például:
2. lépés. Ismerkedjen meg a CSS -szabálykészlet elemeivel
A CSS -kód egyes darabjait „szabálykészletnek” nevezik. A szabálykészlet különböző elemeket tartalmaz, amelyek meghatározzák, hogy mit szeretne a kódja. Ezek tartalmazzák:
- A választó, amely meghatározza a stílusolni kívánt HTML -elemet. Például, ha azt szeretné, hogy a szabálykészlete befolyásolja a bekezdés elemeit, akkor a szabálykészletet a „p” betűvel kezdje.
- A nyilatkozat, amely meghatározza a stílusolni kívánt tulajdonságokat (például a betűszín). A nyilatkozat gömbölyű zárójelben található {}.
- A tulajdonság, amely meghatározza, hogy a HTML elem melyik tulajdonságát szeretné stílusolni. Például a címkén belül megadhatja, hogy a szöveg színét stílusba szeretné állítani.
- A tulajdonság értéke határozza meg, hogy hogyan szeretné megváltoztatni a tulajdonságot (pl. Ha a tulajdonság betűszín, akkor a tulajdonság értéke „zöld” lesz).
- Egyetlen deklaráción belül több különböző tulajdonságot módosíthat.
Lépés 3. Alkalmazza a CSS -t a szövegére, hogy a betűkészlet jól nézzen ki
A CSS akkor hasznos, ha különféle effektusokat alkalmaz a szövegére anélkül, hogy minden egyes tulajdonságot külön -külön kellene kódolnia HTML -ben. Kísérletezzen a különböző betűkészítési tulajdonságok megváltoztatásával a CSS -ben, beleértve:
- Betű szín
- Betűméret
- Betűcsalád (pl. A szövegben használni kívánt betűtípusok köre)
- Szöveg igazítása
- A vonal magassága
- Betűtávolságok
4. lépés. Kísérletezzen a dobozokkal és más CSS -elrendezési eszközökkel
A CSS akkor is hasznos, ha vonzó vizuális elemeket szeretne hozzáadni az oldalhoz, például szövegdobozokat és táblázatokat. Ezenkívül használhatja az oldal általános elrendezésének megváltoztatására és annak meghatározására, hogy a különböző elemek hol helyezkednek el egymáshoz képest.
Például megadhat olyan attribútumokat, mint például az elem szélessége és háttérszíne, szegélyt adhat hozzá, vagy olyan margókat állíthat be, amelyek helyet biztosítanak az oldal különböző elemei között
4. módszer a 4 -ből: Más tervezési nyelvek használata
1. lépés. Tanulja meg a JavaScriptet, ha interaktív elemeket szeretne hozzáadni oldalaihoz
A JavaScript kiváló nyelv a tanuláshoz, ha fejlettebb funkciókat szeretne hozzáadni webhelyeihez, például animációkat és előugró ablakokat. Vegyen részt egy tanfolyamon, vagy keressen online oktatóanyagokat arról, hogyan kódolhat JavaScriptben, és hogyan illesztheti be ezeket a kódolt elemeket weboldalaira | HTML segítségével.
A JavaScript használatának megkezdése előtt ismernie kell a HTML és CSS oldalak készítésének alapjait
2. lépés Ismerje meg a jQuery programot, hogy megkönnyítse a JavaScript kódolását
A jQuery egy JavaScript könyvtár, amely leegyszerűsíti a Java programozást azáltal, hogy lehetővé teszi számos előre kódolt JavaScript elem elérését. A jQuery nagyszerű eszköz, ha már ismeri a JavaScript kódolás alapjait.
A jQuery könyvtárhoz és sok más értékes forráshoz a jQuery.org, a jQuery Alapítvány webhelyén férhet hozzá
Lépés 3. Tanulmányozzon szerveroldali nyelveket, ha érdekli a háttér-fejlesztés
Míg a HTML, a CSS és a JavaScript ideális azoknak a webtervezőknek, akik arra összpontosítanak, amit a felhasználó lát és tesz a webhelyen, a szerver oldali nyelvek akkor hasznosak, ha jobban érdekli a színfalak mögötti munka. Ha szeretne tanulni a háttér-fejlesztésről, akkor összpontosítson olyan nyelvek tanulására, mint a Python, a PHP és a Ruby on Rails.
Ezek a nyelvek hasznosak a felhasználó által nem látott adatok kezeléséhez és feldolgozásához. Például a PHP segítségével biztonságos jelszó -létrehozó eszközök készíthetők a bejelentkezést igénylő webhelyeken
Súgófájlok
HTML Cheat Sheet
CSS csalólap
