Ha weboldalakat szeretne tervezni és létrehozni, akkor ez a folyamat sokkal könnyebb lesz, ha előre megtervezi. A tervezési szakaszban a tervező és az ügyfél együtt dolgozhatnak, hogy megtalálják az igényeiknek megfelelő formátumot és elrendezést. A tervezési folyamat befolyásolja a webhely stílusát vagy stílusát, mondhatni, ez a legfontosabb szempont a webdesignban, különösen, ha üzleti célokra szolgál.
Lépés
1. rész a 4 -ből: Az alapstruktúra létrehozása
1. lépés. Határozza meg a webhely funkcióját
Ha személyes webhelyet hoz létre, akkor valószínűleg már tudja a választ. Ha azonban webhelyet hoz létre egy másik szervezetnek, cégnek vagy személynek, meg kell tudnia, hogy mit akarnak, és a webhely működését. Minden, amit itt megad, a weboldal elkészülte után lép hatályba.
- Szükséges a webhely Storefront? Kell -e hozzászólni a felhasználókhoz? A felhasználónak később fiókot kell létrehoznia? A weboldal cikke orientált? Vagy képorientált? Mindezek és más kérdések segítenek az oldal tervezésében és kialakításában.
- Ez a tervezési folyamat rajzolható, különösen akkor, ha nagyvállalatról van szó, és sok ember vesz részt a projekt létrehozásában.
Lépés 2. Hozzon létre egy webhelytérkép -diagramot (oldaltérképet)
A webhelytérkép diagramja hasonló a folyamatábrához, amely bemutatja, hogy a felhasználók hogyan mozognak egyik oldalról a másikra. Ebben a szakaszban nincs szüksége weboldalra, csak egy általános fogalomfolyamatra. Számítógépes program segítségével diagramokat készíthet, vagy vázlatot készíthet papíron. Használja ezt az ábrát a hierarchikus elrendezés és a weblap -kapcsolat fogalmának bemutatására.
3. lépés: Próbálja ki a kártya rajzolási módszerét
A csoportos webfejlesztés egyik népszerű módja, hogy számos kártyát használva mindenki elvárásait megtudja. Vegyen elő sok jegyzetkártyát, és írja le mindegyikre egy -egy weboldal alapvető tartalmát. Rendezze el ezeket a kártyákat csapatával, hogy megtalálja a legjobb koncepciót. Ez a módszer akkor használható, ha másokkal együttműködik a weboldalak létrehozásában.
4. lépés Használjon papírt, hirdetőtáblát vagy táblát
Ez egy eredeti tervezési módszer kis költségvetés mellett, gyorsan törölheti vagy eltolhatja a tartalmat, és módosíthatja a folyamatot. Rajzolja papírra a webdesignját, majd kösse össze a papírokat cérnával, vagy rajzoljon vonalakat a táblára. Ez a módszer nagyon alkalmas ötletbörzékhez.
5. lépés Tartalomleltár létrehozása
Valójában inkább a weblapok újratervezésénél célszerűbb használni, mint az új webtervezéseknél. Illessze be az összes kész tartalmat vagy weboldalt egy táblázatba. Jegyezze fel az egyes tartalomrészek vagy oldalak célját, ezzel a listával határozza meg, hogy mit kell eltávolítani és mit kell megtartani. Egyszerűsítheti a web szerkezetét, és később leegyszerűsítheti az újratervezési folyamatot.
2. rész a 4 -ből: Alap HTML vázlat létrehozása
1. lépés. Hozzon létre drótvázat a weblaphierarchia létrehozásához
Az alapvető HTML sablon az Ön által létrehozott webhely tervrajza, amely csak a legalapvetőbb címkéket és minta (blokkok/sablonok) tartalmat használja. Ez a keretrendszer megválaszolja a kérdést: „Mi látható a weben és hol?” A vázlat létrehozásakor nincs szükség formázásra és stílusra.
- A stílusbeállítás kiválasztása előtt megtekintheti a tartalom szerkezetét és folyamatábráját alapvető körvonalakkal.
- Az alapvető HTML -sablonok nem statikusak, mint a PDF -ek vagy képek, gyorsan átpörgetheti a minta tartalmát, és új struktúrákat hozhat létre.
- Az alapkeret interaktív, amely mind a webfejlesztőknek, mind az ügyfeleknek előnyös. Mivel ez az alapvető keretrendszer egyszerű HTML -kóddal van megírva, továbbra is navigálhat rajta, és tudja, hogyan működik a weblapváltás. Ezt PDF -szel nem lehet megtenni.
2. lépés: Próbálja ki a Grey Box módszert
Blokkolhatja vagy kiemelheti weboldalának tartalmát a Grey Boxban, a legfontosabb tartalom a tetején található. Rendezze a tartalmat egy oszlopba. Például, ha az oldal „A cégről”, akkor a céggel kapcsolatos részletes információk vannak felül, majd a személyzet listája, majd az elérhetőségek stb.
Ez nem tartalmazza a fejléceket és a lábléceket. A szürke doboz a weben megjelenő tartalom vizuális megjelenítése
Lépés 3. Próbáljon ki egy alaprajz -készítő programot
Különféle programok használhatók az alapvető webkeret létrehozásának folyamatában. A webprogramozási kód (nyelv) mennyisége, amelyet el kell sajátítania, minden program esetében eltérő. Néhány nagyon népszerű program:
- Mintalabor. Ez az oldal az „atomtervezés” elkötelezettje, minden tartalom „molekulának” minősül, amely nagyobb weboldalt alkot.
- Ugrásábrák. Ez a weboldal webes tervezési és keretezési szolgáltatásokat nyújt. Ezek a webhelyek fizetősek, és előfizetést igényelnek, de gyorsan létrehozhat webes keretrendszereket anélkül, hogy sok webprogramozási kódot kellene elsajátítania.
- Wirefy. A Wirefy egy másik webhely, amely „atomtervezést” kínál. A webfejlesztők ingyenesen beszerezhetik az eszközt.
4. lépés: Használjon egyszerű HTML -jelölést
Egy jó alap sablon könnyen konvertálható az eredeti webhelyre. A sablon létrehozása során ne gondoljon túl sokat a webes stílusra. Használjon könnyen érthető és megváltoztatható jelölést.
Egy egyszerű alaprendszer sokkal jobb. A jelölés létrehozásának célja egy szerkezet felépítése. A vizuális megjelenés később beállítható a CSS és a speciális jelölések segítségével
5. lépés Hozzon létre egy alapvető vázlatot minden weboldalhoz
Lehet, hogy kísértést érez, hogy minden weboldalt egyenlő alapvonalakkal egyenlővé tegyen. Valójában ez csak egyszerűvé és unalmassá teszi webhelyét. Hozzon létre egy különböző körvonalat minden oldalhoz, és megérti, hogy minden oldalnak saját tervezésre van szüksége.
3. rész a 4 -ből: Tartalom létrehozása
1. lépés: A weboldal létrehozása előtt készítse elő a tartalmat
Sokkal könnyebb lesz megtekinteni a webnézet előnézetét, ha már rendelkezik valódi tartalommal, minta vagy helyőrző helyett. Nem kell túl sok tartalomnak lennie, de a makettje sokkal jobban fog kinézni, ha az eredeti kép egy példányát használja.
Nem kell rendelkeznie a cikk összes anyagával, de legalább tényleges címsorral kell rendelkeznie
2. lépés. Ne feledje, hogy a nagyszerű tartalom nem csak szöveg
Az Internet sokkal összetettebb, mint egy egyszerű szöveges weboldal. Különféle tartalmakra van szüksége ahhoz, hogy nagyszerű webhelyet hozzon létre, amely vonzza és meghívja a látogatókat. Például:
- Kép.
- Hang.
- Videók.
- Webtovábbítás vagy webfolyam (Twitter)
- Facebook integráció
- RSS
- Webes hírcsatorna
Lépés 3. Kérjen segítséget egy profi fotóstól
Ha fényképeket szeretne elhelyezni webhelyén, akkor az első benyomás, amelyet webhelyéről kap, sokkal jobb lesz, ha professzionális fotózással töltik fel. Egy jó fotó többet ér, mint húsz gyenge minőségű fotó.
Keressen egy friss diplomát a fotózás művészetéből olcsóbb megoldásként, mint egy profi fotós, aki régóta foglalkozik ezzel a szakmával
4. lépés Írjon minőségi cikkeket
A weboldalon található írott tartalom határozza meg a webes forgalom mértékét. Bár ebben a tervezési folyamatban nem kell túl sokat aggódnia a tartalom létrehozásáért, nem árt, ha elkezd gondolkodni rajta, mert a webhely működése után is rendszeresen szüksége lesz tartalomra.
A cikk tartalmán kívül írásos anyagok is rendelkezésre állnak, amelyekre a weboldal összeállítása során is szükség van. Például elérhetőségi adatok, cégnév vagy bármi más, amelyet többször fognak használni a webhelyen
4. rész a 4 -ből: A fogalmak weboldalakká alakítása
1. lépés. Rendezze el az alapelemeket
Ez az elemek elrendezése a webhely minden oldalára vonatkozik, például a fejlécekre, lábjegyzetekre és navigációs menükre. Állítsa be nagyon egyszerű stílusban, így ellenőrizheti az összes oldal megjelenését. Ez különösen akkor hasznos, amikor előrehalad a webes elrendezési folyamatban.
Ne aggódjon túl sokat a részletek miatt, próbálja meg előnézetben (előnézetben) látni a fejlécet
2. lépés: Hozzon létre egy egyszerű elrendezést
Kezdje azzal, hogy eltolja az óra pozícióját az alaprajz oszlopról az oldal tényleges helyére. Például érdemes a minta navigációs menüt az oldal bal oldalára, a címsorok listáját pedig jobbra helyezni.
Mielőtt továbblépne a következő lépésre, kísérletezzen több oldallal kapcsolatos webes elrendezésekkel. Hagyja, hogy mások is megnézzék, hogy az Ön által létrehozott elrendezés él -e
Lépés 3. Hozzon létre egy makettet
Használjon olyan programot, mint a Photoshop, és készítsen mintákat vagy mintaoldalakat webhelyéről. Használja útmutatóként az elrendezést, amelyet összeállított. Egy képfeldolgozó programmal gyorsabbá teheti a maketteket, és elérheti a kívánt eredményeket. Ezeknek a képeknek az eredményei később referenciaként használhatók a webes programozási kód írásának folyamatában.
Tegye a tényleges tartalmat a makettbe, hogy jól nézzen ki
4. lépés. Cserélje ki a minta fogalmát az eredeti tartalomra
Tartalmak és elemek hozzáadása a weboldalakhoz. Egyelőre ne izgassa a webes stílus beállításait, csak rakjon össze mindent a megfelelő helyre. Ez segít áttekinteni a később elvégzett webes stílusmódosításokat.
5. lépés. Hozzon létre egy webes stílusú útmutatót
Nagyon fontos a stílusok keverékének fenntartása, különösen a nagy webhelyek esetében. Ha a webhely üzleti célokat szolgál, és már rendelkezik saját márkájával vagy stílusával, akkor ezt be kell építeni a webhely kialakításába. A weboldal stílusútmutatójának létrehozásakor vegye figyelembe a következőket:
- Navigáció
- Fejjegyzet
- Bekezdés
- Dőlt karakter
- Merész karakter
- Linkek (aktív, inaktív, lebegés)
- Képhasználat
- Ikon
- Gomb
- lista
6. lépés. Alkalmazza a webstílust
Ha megtalálta a megfelelő stílust és formatervezést, hajtsa végre. A CSS az egyik legegyszerűbb módja a stílusok weboldalon vagy az oldalon való megvalósításának. Tekintse meg a következő utasításokat, hogy jobban megértse a CSS használatának részleteit.
