Ha szeretné kifejleszteni és létrehozni egy webhelyet, akkor minden sokkal könnyebb lesz, ha időt töltesz a tervezésre. A tervezési szakasz lehetővé teszi a fejlesztő és az ügyfél együttműködését, amíg meg nem találja az igényeinek megfelelő formátumot és elrendezést. A tervezési folyamat befolyásolja a helyszín stílusának választását, és esetleg a webdesign legfontosabb szempontja, különösen az üzleti életben.

Lépések

1. rész:

Alapvető struktúra létrehozása

egy. Határozza meg a webhely funkcionalitását. Ha létrehoz egy webhelyet magának, akkor valószínűleg már tudja a választ erre az elemre. Ha létrehoz egy webhelyet egy másik személynek, egy cégnek vagy szervezetnek, meg kell tudnia kideríteni, hogy mit várnak a webhelyről és annak funkcionalitásáról. Minden, amit itt dönt, hatással lesz az utolsó webhelyre.

Szükség van egy elektronikus áruházra? Felhasználói megjegyzésekre van szüksége? Ha a felhasználók fiókot használnak? Szüksége van egy weboldalorientált webhelyre? Képorientált? Mindezek és sok más kérdés segíteni fogja a webhely tervezését és szerkezetét.
Lehet, hogy hosszú folyamat, különösen a nagyvállalatok számára, amelyek nagyszámú részt vesznek a projektben.

2. Hozzon létre egy weboldal térképi rendszert. Térkép séma - Blokkdiagramként, megmutatja, hogyan mozognak a felhasználók egy oldalról a másikra. Ezen a ponton még csak nincsenek oldalak, csak az ötletek teljes áramlása. Használhat egy számítógépes programot, hogy létrehozzon egy diagramot, vagy vázolja fel magad egy papírlapra. Használja a webhelytérkép-sémát, hogy megmutassa, hogyan képzeli el a weboldalak és kommunikáció hierarchiáját (kapcsolatok).

A kép címe A weboldal 3. lépése 3. lépés

3. Próbálja ki a kártyákat. A csoport népszerű módszere a kártya halmozásainak használata, hogy megtudja az egyesek tökéletes megközelítését. Vegye ki a kártyák kötegét a jegyzetekhez, és küldje el az egyik oldal fő tartalmát mindegyikben. Hagyja, hogy a csapat szervez kártyákat, hogy azok a leghasznosabbak legyenek. A legjobb helyzetekben van, amikor együttműködik másokkal egy weboldal létrehozásához.

A kép címe A weboldal 4. lépése 4. lépés

4. Használjon papírt és hirdetőtáblát vagy táblát. Ez a tervezés eredeti alacsony költségvetési módja, lehetővé teszi, hogy gyorsan törölje vagy mozgassa a tartalmat, és átirányítsa azt. Rajzoljon a papírra, és csatlakoztassa őket egy sorozattal, vagy rajzoljon egy áramkört a táblán. Nagyszerű a brainstorminghoz.

öt. Készítsen leltár tartalmat. Sokkal könnyebb újrafeldolgozni, mint az új webhelyek. Adja meg a tartalom vagy a meglévő oldalak minden részét a táblázatkezelőben. Rögzítse mindegyik kinevezését, majd használja ezt a listát, hogy meghatározza, hogy mi történik és mi marad. Ez segít csökkenteni a legjobb részt, és egyszerűsíti az újratervezés folyamatát.

4. rész: 4:

HTML-keret létrehozása

egy. Hozzon létre egy keret (oldalstrukturális rendszerek), hogy segítsen a hierarchiában. A HTML-keret egy Bonecloth Future webhely, amely csak a legegyszerűbb címkéket és blokkokat használja a tartalom bemutatásához. A kérdésre válaszol: "Mi van a képernyőn, és hol?". A formázás és a stílus teljesen figyelmen kívül hagyja a keretben.

A keret lehetővé teszi a tartalom és az áramlás szerkezetét, amíg a stílus kiválasztása.
A HTML-keretek nem statikusak, mint PDF fájlok vagy képek, lehetővé teszik, hogy gyorsan mozgassa a tartalmi blokkokat egy új struktúra létrehozásához.
A keret interaktív, amely mind a fejlesztő, mind az ügyfél számára előnyös. Mivel a keret egy egyszerű HTML-ben van írva, akkor még mindig mozoghat, és úgy érzi, hogy az oldalak között fut. Ez az, amit nem lehet kifejezni a PDF koncepcióján keresztül.

2. Próbálja ki a szürke dobozos módszert (szürke mező). Helyezze az oldal tartalmát szürke mezőkbe, a legfontosabb tartalommal a tetején. A blokkok egy oszlopban találhatók, a tetején lévő oldalon található tartalom legfontosabb része. Például, ha az oldal a cég (kb.

Nem tartalmazza a felső és a láblécet. A szürke mezők csak az oldalon található tartalom vizuális ábrázolása.

Kép cím szerinti terv A weboldal 8. lépés

3. Próbálja meg használni a WireFraming programot. Számos olyan program van, amely segíthet az interaktív tervezési prototípus (drótváz) létrehozásában. A forráskód ismerete mennyisége a programtól a programig változik. Íme néhány a legnépszerűbb programok:

Pattern Lab.Ez az oldal specializálódott "Atomtervezés", Ahol a tartalom minden egyes része úgy tűnik, hogy "molekula", ami nagy oldalt alkot.

Jumpcharts. Ez az oldalirányítási szolgáltatás tervezési szolgáltatási oldal egy interaktív tervezési prototípushoz.Fizetett előfizetést igényel, de lehetővé teszi, hogy gyorsan felépítse az oldalak blokkdiagramjait, anélkül, hogy túl sokat kellene dolgozni a kóddal való együttműködésről.

Wirefy. Wirefy másik rendszer"atomprojekt". Minden eszköz ingyenes a fejlesztők számára.

Kép cím szerinti terv A weboldal 9. lépés

4. Használjon egyszerű HTML jelölést. A jó keret könnyen átalakítható a tényleges webhelyre. Ne aggódj általában a stílusban az interaktív prototípus kialakításának folyamatában. Ehelyett használja a jelölést, amely könnyen megérthető és változhat egy kis erőfeszítéssel.

"Kevesebb" azt jelenti, hogy "több" egy kerettel. A cél az, hogy egyszerűen építsünk egy szerkezetet. A megjelenés később módosítható a CSS és a kiterjesztett jelöléssel.

öt. Készítsen egy keretet az Ön webhelyének minden oldalára. Lehet, hogy csábító lehet, hogy egy egyszerű keret és azt mondja: "Hűvös, minden oldalra alkalmazhatom, ez megfelel nekem". Valójában ez egy rendes és unalmas helyszín létrehozásához vezet. Töltsön időt az egyes oldalak interaktív prototípusának kialakítására, és hamarosan meg fogja találni, hogy minden oldalnak saját szervezeti "igények".

3. rész: 4:

Tartalom létrehozása

egy. Készítsen néhány tartalmat a webhely létrehozása előtt. Sokkal könnyebb lesz látni, hogy az oldalstílus hogyan néz ki, ha az üres mezők helyett valódi tartalma van. Nem kell túl sok információra van szüksége, de minden sokkal jobban néz ki az elrendezéseknél, ha van ilyen anyagi cikkek és eredeti képek.

Nem kell a cikk ömlesztett részét, de legalább igazi címsorokat kell kapnia.

Kép cím szerinti terv A honlap 12. lépés

2. Ne feledje, hogy a jó tartalom több, mint a szöveg. Internet - sokkal több, mint egyszerű szöveges webhelyek. Ahhoz, hogy kiemelkedjen a niche-ben, sokféle típusú tartalomra van szüksége ahhoz, hogy vonzza és tartsa a látogatókat. Néhány lehetséges tartalom a memorizáláshoz:

Fotók.

Hang

Videó

Szálak vagy patak (Twitter)

Facebook integráció

RSS (angolul. Tényleg egyszerű szindikáció - Szabványosított tartalomrendszer)

Csatorna tartalom hírek

Kép cím szerinti terv A honlap 13. lépés

3. Válasszon profi fotósot. Ha fotókat ad hozzá webhelyére, akkor professzionális fotózással az első benyomások sokkal jobb lesz. Egy jó fotó több mint 20 rossz.

A kezdő fotósok munkája sokkal olcsóbb lesz, mint a tapasztalt szakemberek munkái.

Kép cím szerinti terv A honlap 14. lépés

4. Írjon minőségi cikkeket. Az Ön oldalán írt tartalom határozza meg a hatalmas mennyiségű webforgalmat. Bár nem kell túl sokat kell aggódnod a tartalom megteremtéséről a tervezési folyamat ebben a szakaszában, akkor nem fog fájni és gondolni rá, mivel a tartalomnak rendszeresen meg kell teremtenie, amikor "Inspirációs élet" A helyszínen.

Miután a cikkek sok dolgot írnak, amit valószínűleg a weboldal létrehozásának folyamatában fog használni. Ez magában foglalhatja az elérhetőségi adatait, a cégneveket vagy valami mást, amelyet több helyen használnak a webhelyen.

4. rész 4:

Az ötletek forgatása az oldalon

egy. Közös elemek kifejlesztése. Ezek azok a dolgok, amelyek az egyes fekenként láthatóak, például: felső és lábálló, navigációs menü. Hozzon létre egy nagyon egyszerű stílust, így láthatja, hogy az összes oldala hogyan fog megjelenni velük a helyszínen. Nagyon hasznos lesz az elrendezés létrehozásának folyamata során.

Ne aggódj túlságosan a részletekről, de próbálja meg, hogy szinte ugyanaz, mint minden végsőnek kell lennie.

Kép cím szerinti terv A honlap 16. lépés

2. Alapterv létrehozása (szállás). Indítsa el az útmutató keretét az egyik oszlopról az általánosan elfogadott helyeken az oldalon. Például a navigációs blokkot az oldal bal oldalára és a fejlécek listájára mozgathatja - jobbra.

Folytassa a kísérletezést több oldal elhelyezésével, mielőtt továbblépne. Hagyja, hogy mások ellenőrizzék őket, hogy lássák, hogyan vannak szervetlenek.

Kép cím szerinti terv A honlap 17. lépés

3. Hozzon létre egy elrendezést. Használja a programot (mint a Photoshop), hogy hozzon létre egy elrendezést több oldaloldalon. Használja az elrendezést, amelyet útmutatóként választott. A programban sokkal gyorsabban dolgozhat, hogy szerkessze a képeket, és mindent megkapjon ebben az űrlapon, amennyire szüksége van. Ez lehetővé teszi, hogy ezeket a képeket referenciaként használja, amikor a tényleges kód jön.

Adja hozzá ezt a tartalmat az elrendezéshez, hogy megbizonyosodjon arról, hogy minden jól néz ki.

4. Cserélje ki a blokkok tartalmát. Indítsa el a rendszert és az elemeket az oldalhoz. Ne aggódj a stílus miatt, csak helyezzen mindent a megfelelő helyre. Ez segít megtudni, hogy a stílus változásai működnek-e.

öt. Stílus útmutató létrehozása. Nagyon fontos, hogy fenntartsák a kötőanyagot, különösen a nagy helyszíneken. Ha az oldal egy olyan vállalkozás számára van, amely már vizuális márkázást tartalmaz, akkor be kell vonni a webhelytervezésbe. A kézikönyvben figyelembe vett dolgok:

Navigáció

Fejlécek (

,

, STB.)

Bekezdések

Dőlt betűk (dőlt)

Bolding (félkövér)

Referenciák (aktív, inaktív, lebegő)

Kép használata

Ikonok

Gombok

Felsorol

6. Alkalmazza a stílusodat. Amint a webhely stílusa és tervezése, eljött az idő, hogy hajtsa végre. A CSS az egyik legegyszerűbb módja a stílusnak az egész oldalra vagy az egész webhelyre. Olvassa el ezt az útmutatót a CSS használatával kapcsolatos részletekért.