Banner létrehozása a Google Web Designer-en

1. lépés: Első lépések

A Google Web Designer egy ingyenes fejlesztési környezet a webmesterek számára, amelyek képesek weboldalak létrehozására, beleértve az egyes elemeket, például a CSS3-t és a HTML5-et használó bannereket. Az eszköz használatához először is letöltenie kell a telepítőfájlt a hivatalos webhelyről és telepítenie kell.

Töltse le a Google Web Designer-t a hivatalos webhelyről

Program telepítése

1. Kattintson a fent bemutatott linkre, hogy menjen a most oldalra, és kattintson a "Web Designner" gombra. Ne feledje, hogy a program csak Windows 7 és újabb verziókat támogat.



2. A Mentés felbukkanó ablakban válasszon ki egy helyet a számítógépen, és használja az alsó panelen megjelenő gombot.



3. Menjen a mappába, csak mentette a fájlt, és kattintson duplán a bal egérgombra a nyílás végrehajtásához. Ennek eredményeképpen meg kell nyitni a telepítési ablakot.

   

   A telepítési eljárást teljesen automatikus üzemmódban végzik, mentve az összes munkadarabot a könyvtárba a rendszerlemez más programjaival.

Engedélyezés

1. Ha azt szeretnénk, hogy mentse projektek az interneten vagy általában, hozzon létre egy banner kifejezetten a Google belső szolgáltatásokat, akkor ezen felül érdemes elvégezni engedélyt. Ehhez futtassa a programot a megfelelő ikon használatával, zárja be az üdvözlő ablakot, és kattintson a "Bejelentkezés" gombra a felső panelen.



2. Adja meg az adatokat a Google Fiókból, kattintson a "Tovább" gombra, és erősítse meg, ha szükséges. Ezt követően a fiókot azonnal hozzáadja, anélkül, hogy bizonyos beállítást igényelne.

A beállítások módosítása

1. Miután megértette az előkészületet, most kívánatos, hogy módosítsa a szoftver alapbeállításait, hogy megkönnyítse a munkát a jövőben. A felső panel használata, bontsa ki a Szerkesztés menüt, és válassza a "Beállítások" lehetőséget a lista végén.



2. A "Main" lapon módosíthatja a program kezdeti viselkedését a projektek gyors megnyitásához, hozzárendelheti a mappát a létrehozott sablonok mentéséhez, valamint az alapértelmezett értékek beállításához a bejelentés létrehozásakor.



3. A következő lap "Elrendezés nézet mód" tartalmazza a szerkesztő megjelenési paramétereit. A bemutatott beállítások módosítása esetén beállíthatja a rácsot és a kötő objektumokat az elemek pontosabb pozícionálásához.



4. A Google Web Designer kódszerkesztője van a beállításokkal. Így a „Code Viewer” lapon lehet rendelni a design, meg a formázási paramétereket, és adjunk hozzá billentyűtársításokat feladatokat.



5. Az utolsó lap "Extended" csak két paramétert tartalmaz - "naplózás" és "alkalmazási skála". Az első esetben a beilleszkedés létrehoz egy váltási naplót, míg a második elem lehetővé teszi, hogy új szabványos skálát állítson be a szerkesztő munkaterületére.

   Légy óvatos! Ha túl sok méretet állít be, a képernyőn lévő hely hiánya problémái megjelenhetnek a fontos elemeknél.

Bármilyen módosítás történt, vagy más, a program újraindítása. Ha csak elkezdi dolgozni a szerkesztővel, ne felejtse el, hogy a beállítások külön tételek használatának lehetősége a lapok mindegyikének külön elemet használva.

2. lépés: Banner létrehozása

A program konfigurálásával elkezdheti dolgozni a banneren a Google Web Designer összes lehetőségével. Ugyanakkor vegye figyelembe, hogy ez a jogorvoslat kizárólag vizuális szerkesztővel rendelkezik, amely lehetővé teszi, hogy csak olyan kész elemeket küldjön, amelyek külön-külön jönnek létre, például a Photoshopban.

Dolgozzon eszközökkel

1. Az elrendezés elkészítése után meg kell ismernie az eszközöket. A legfontosabb figyelem felső részén a "Nézet" lista megérdemli, lehetővé téve a segédelemek engedélyezését és letiltását.



2. Az "Ablak" menüben ideiglenesen letilthatja az adott interfész elemet. Például, ha statikus banneret szeretne készíteni, az "idővonal" csak megzavarja, ezért a legjobb, ha eltávolítja a megfelelő kullancsot.



3. A főszerkesztő eszközöket a bal oldali oszlopban mutatjuk be. Nem fogjuk figyelembe venni az egyes lehetőségeket, mivel nem minden elemet használunk a létrehozáskor, azonban azt javasoljuk, hogy kísérletezzen magának.



4. Az eszköztár mellett több hozzájárulást mutat be "bejelentő hirdetések". KÜLÖNLEGES FIGYELMEZTETÉS A "Események" megérdemlik az egyik vagy egy másik banner objektummal, és a "CSS" -t, ahol a stílusparaméterek be vannak állítva.



5. A program jobb oldali része is olyan eszközöket is tartalmaz, amelyek lehetővé teszik az objektumok, a tulajdonságok, a tulajdonságok és egyszerű rétegek színét, szövegét, szerkezetét. Mint a legfontosabb funkciókészlet, az ablakok jobban tanulnak önállóan a projekt létrehozásának folyamatában.



6. Szükség esetén az "idővonal" használata animált banner létrehozható. Ugyanakkor, hogy kezelje a szerkesztő fő területét, használjon rögzítőhelyet és LCM-t, valamint egy méretű paramétert tartalmazó blokkot.

Elrendezés kitöltése

1. A banner létrehozása mindig a háttérrel kezdődik, ezért az elrendezés elkészítése után nyissa meg a "Tulajdonságok" fület és az oldalblokkot, használja a "Töltse ki" alszakaszokat. Elfogadható bármilyen színt, beleértve a gradienst vagy egy teljesen átlátszó hátteret is.



2. A sorban továbbadják az előre elkészített grafikus elemeket. Ezt az Objektumkönyvtár lapon az alsó panel "+" ikonra kattintva teheti meg.



3. Válassza ki a kívánt grafikus fájlokat, majd kattintson a Megnyitás gombra. Ezt egyszerre lehet elvégezni az összes szükséges réteghez, és külön-külön, megismételjük ezeket a műveleteket.



4. Elfogadni, rögzítse a kívánt képet az Objektumkönyvtár lapon, és húzza a szerkesztőt a fő területre.

   

   Az objektum helyét szokásos húzással és méretezésével vezérelheti aktív választóeszközzel. Szükség esetén mindig útmutatókat használhat.



5. A grafikus fájl kiválasztásával a munkaterületen vagy a Strukturális szerkesztő lapon nyissa meg a "Tulajdonságok" lehetőséget. Sokkal több, mint több lehetőség, mint a háttér, például a határ menti beállítások vagy francia bekezdések esetén.



6. Ha a banner tervezés a szöveg jelenlétét írja elő, akkor hozzáadhatja a megfelelő elemet a Standard Google Web Designer eszköz használatával. A bal oldali ablaktáblán kattintson a "T" ikonra, kattintson a Főszerkesztő ablakra, és adja meg a kívánt karakterkészletet.

   

   A szöveg vezérléséhez válassza ki a "Structural Editor" lapot, bontsa ki a "szöveget", és állítsa be a megfelelő paramétereket.

Az animáció beállítása

1. Az "Idővonal" blokkban hozzáadhatja és konfigurálhatja az animáció hatását. A kezdethez kattintson az "Ikon hozzáadása" gombra a "+" ikonnal.



2. Kattintson a ".5s" ikonra a keretek között, és állítsa be a szükséges paramétereket. Például megváltoztathatja az átmenet időtartamát és stílusát.



3. Minden egyes blokk az "idővonalon" teljesen független másoktól. Animációk létrehozásához változtasson meg néhány elemet a mérlegelési jogkörébe, és ellenőrizze az eredményt a lejátszás gomb segítségével.

   

   A szerkesztési folyamat befejezése után használja az Ismétlés gombot. Ez végtelen animációt hoz létre.

Események hozzáadása

1. Miután megértette az elrendezést, átmeneti eseményeket kell hozzáadnia az egyes elemek vagy az egész banner egészére. Ehhez az ágazati felügyelő oszlopban nyissa meg az Események fület, és kattintson az alsó panel "+" ikonjára.



2. A "Cél" listából megnyíló ablakban válasszon ki egy objektumot, amely hivatkozni fog.



3. Az eseményoldalon bontsa ki az "egér" oldalt, és válassza a "Kattintás" lehetőséget. Az eredmény követelményeitől függően különböző berendezéseket kombinálhat.



4. Tovább a "Akció" listából, nyissa meg a Google Nyilatkozatot, és állítsa be az "Átmenet" értéket. Ilyen választás meg fogja tenni annak érdekében, hogy a felhasználó az interneten szükséged van-e az adott oldalra.



5. "Címzett "ként válasszon ki egy" GWD-AD "verziót.



6. A mező utolsó szakaszában "Azonosodik. Mutatók »Ellenőrizze a kapcsolatot a helyi, és töltse ki az»URL«megadásával a kívánt oldalt. Az "OK" segítségével mentheti el.

Munka forráskóddal

1. Amint említettük, a Google Web Designer beépített kódszerkesztőt tartalmaz. Engedélyezhető a "Code" gomb segítségével a felső panel jobb oldalán.



2. A bannerszerkezet módosítása nemcsak a vizuális szerkesztőt használhatja, hanem közvetlenül a kóddal kapcsolatos kóddal is működik. Ez nagyon hasznos lehet a kis elemek sokasága, vagy a program által nem biztosított események hozzáadásakor.

A leírt műveleteknek elégségesnek kell lenniük a banner létrehozásához, függetlenül az alkalmazástól. Ugyanakkor jelentősen bővítheti a képességeket az eszközök kombinálásával.

3. lépés: befejezés

Ha a banner befejeződött, és készen áll az oldalra való elhelyezésre, akkor az utolsó lépéshez megy. Először is érdemes megnézni, hogyan néz ki a valódi weboldalon a munkáját.

Előnézet

1. A felső panelen kattintson az Előnézet gombra a Kiegészítő menü megnyitásához. Itt megadhatja a böngészőt, amellyel a banner megnyílik.



2. Az összes funkció megnyitásakor és a banner megjelenése megmarad, de bizonyos funkciókkal. Például, még akkor is, ha az animáció végtelen ismétlését telepítette, minden itt csak egy iteráció van.



3. Szükség esetén mindig bemutathatja az eredményt más embereknek. Ehhez válassza a "Megosztási hivatkozás megszerzése" lehetőséget, és erősítse meg a Google-fiókhoz való hozzáférést.

   

   Ennek eredményeképpen egy link jelenik meg a képernyőn, hogy megtekinthesse a banner ilyen üzemmódban a fent leírt módon. Természetesen csak akkor lehetséges, ha fiókja van.

Megőrzés és közzététel

1. A projekt mentéséhez először nyissa meg a Fájl menüt és használja a Mentés opciót. Ezt követően a forrásfájl mentésre kerül a számítógépen, és később megnyitható.



2. Projektet készíthet a webhelyen a program jobb felső sarkában lévő "közzététel" menü megnyitásával, valamint a mentés egyik helyének kiválasztásával.



3. Változtasd meg a paramétereket a kiadvány ablak tetszése, hogy csak a kívánt jelölőnégyzeteket, és kattintson a „Közzététel”. A mentés tehát gyorsan történik a projekt méretétől függetlenül.

   

   Ennek eredményeként a mappa megtalálható a mentési helyen. A helyszínen a banner elhelyezése eltér a helyszín függvényében, és általában már nem tartozik a teremtési eljáráshoz.