Creació d'un banner a Google Web Dissenyador

Pas 1: Introducció

Google Web Designer és un entorn de desenvolupament lliure per als administradors web que ofereixen la possibilitat de crear pàgines web, incloent articles individuals com banners utilitzant CSS3 i HTML5. Per utilitzar aquesta eina, en primer lloc, ha de descarregar l'arxiu d'instal·lació des del lloc oficial i instal·lar.

Descarregar Google Web Designer des del lloc oficial

la instal·lació de el programa

1. Feu clic a l'enllaç presentat amunt per anar a l'EMPRESA de pàgina i feu clic al botó "Descarregar Web Designer". Recordeu que intervé el programa només les versions de Windows 7 i posteriors.



2. A través de la finestra pop-up a Desa, seleccioneu un lloc en l'equip i utilitzar el botó marcat en el panell inferior.



3. Anar a la carpeta amb només guardat l'arxiu i feu doble clic al botó esquerre de l'ratolí per dur a terme l'obertura. Com a resultat, s'ha d'obrir la finestra d'instal·lació.

   

   El procediment d'instal·lació en si es realitza en manera totalment automàtica, l'estalvi de tots els fitxers de treball a directori amb altres programes en el disc de sistema.

Autorització

1. Si voleu desar els projectes a Internet o en general, crear un banner específicament per als serveis interns de Google, que és, a més, la pena fer l'autorització. Per a això, executi el programa usant la icona apropiat, prop de la finestra de benvinguda i feu clic al botó "Iniciar sessió" en el panell superior.



2. Especificar les dades del compte de Google, feu clic a "Següent" i confirmi si cal. Després d'això, es va afegir immediatament el compte, sense requerir alguns ajustaments individuals.

Modificació de la configuració

1. Havent comprès amb la preparació, que ara resulta convenient per a realitzar canvis en la configuració bàsica del programari per facilitar el treball en el futur. Utilitzant el panell superior, s'expandeixi el menú Edita i seleccioneu "Configuració" a la fi de la llista.



2. A la pestanya "Principal", pot canviar el comportament inicial de el programa per obrir ràpidament els projectes, assignar una carpeta per a guardar les plantilles creades, així com els valors predeterminats per a l'especificació de l'anunci quan es crea.



3. La següent pàgina "mode de vista de disseny" conté els paràmetres d'aspecte de l'editor. Modificació de la configuració presentats, es pot ajustar la reixa i objectes d'enllaç per obtenir més posicionament precís dels elements.



4. Google Web dissenyador té un editor de codi amb la seva configuració. Per tant, a la pestanya "Codi Visor", pot assignar l'estil de disseny, configurar els paràmetres de format i afegir enllaços de tecles a les tasques.



5. L'última pestanya "estès" conté només dos paràmetres - "registre" i "escala d'aplicació". En el primer cas, la inclusió crearà un registre de canvis, mentre que el segon element li permet establir una nova escala estàndard per a l'àrea de treball de l'editor.

   Ves amb compte! Si s'estableix massa escala, problemes amb la falta d'espai a la pantalla poden aparèixer els elements importants.

Qualsevol canvi realitzat d'una manera o altra requereixen un reinici de el programa. Si vostè acaba de començar a treballar amb l'editor, no us oblideu sobre la possibilitat de restablir la configuració utilitzant una línia separada per cadascuna de les pestanyes.

Pas 2: Creació d'una bandera

Mitjançant la configuració de el programa, pot començar a treballar al banner utilitzant totes les opcions de Google Web Designer. No obstant això, notem que aquest recurs és exclusivament com un editor visual, el que li permet enviar només els elements prefabricats que es creen per separat, per exemple, en Photoshop.

Treballa amb eines

1. Després de preparar el disseny, cal conèixer les eines. Al panell superior de l'atenció principal, la llista "Vista" es mereix, el que permet activar i desactivar els elements auxiliars.



2. Mitjançant el menú "Finestra", pot desactivar temporalment un element de la interfície en particular. Per exemple, si vostè vol fer un banner estàtic, la "línia de temps", només va a interferir, i per tant el millor és treure el senyal apropiada.



3. Les principals eines d'edició es presenten a la columna esquerra. No considerarem cada opció, ja que no tots els elements s'utilitzen quan es crea, però, es recomana experimentar vostè mateix.



4. A la banda de la barra d'eines es presenta "anuncis de l'anunciador" amb diverses contribucions. Especial atenció mereixen els "esdeveniments" responsables de l'acció amb un o altre objecte bandera, i "CSS", on s'estableixen els paràmetres d'estil.



5. La part dreta de el programa també té un conjunt d'eines que li permet controlar el color, text, l'estructura dels objectes, propietats i simplement capes. A l'igual que el conjunt principal de funcions, les finestres són millors per a estudis de forma independent en el procés de creació d'un projecte.



6. Si cal, l'ús de la "línia de temps" es pot crear un banner animat. A el mateix temps, per gestionar la zona principal de l'editor, utilitzar un espai de subjecció i LCM, així com un bloc amb paràmetres d'escala.

Omplir un disseny

1. La creació d'una pancarta sempre comença amb el fons, i per tant, després de preparar una presentació, obriu la pestanya "Propietats" i en el bloc de pàgina, utilitzeu l'apartat "Farcit". És molt possible instal·lar qualsevol color, incloent un degradat o un fons totalment transparent.



2. A més a la cua, afegir elements gràfics preparades per endavant. Vostè pot fer això a la pestanya Biblioteca d'objectes fent clic a la icona "+" al panell inferior.



3. Seleccioneu els fitxers gràfics desitjats i feu clic a Obre. Això es pot fer tant a la vegada per a totes les capes necessàries, i per separat, repetint aquestes accions.



4. Per donar cabuda, subjectar la imatge desitjada a la pestanya Biblioteca d'objectes i arrossegament l'editor de la zona principal.

   

   Es pot controlar la posició de l'objecte amb arrossegar habitual i escalat amb una eina de selecció activa. Si cal, sempre es pot utilitzar guies.



5. A l'seleccionar un fitxer gràfic a l'espai de treball o en la fitxa Editor estructural, obrir les "Propietats". Hi ha molt més que més possibilitats que en el cas de el fons, per exemple, la configuració de frontera o guions.



6. Si el disseny de la bandera preveu la presència de text, pot afegir l'element apropiat amb l'eina estàndard de Google Web Designer. Feu clic a la icona "T" al panell esquerre, feu clic a la finestra principal de l'editor i introdueixi el conjunt desitjat de caràcters.

   

   Per controlar el text, seleccioneu la capa a la pestanya "Editor estructural", s'expandeixi el "text" i establir els paràmetres adequats.

Configuració de l'animació

1. En el bloc "línia de temps", pot afegir i configurar els efectes d'animació. Per començar, feu clic al botó "Afegeix icona" mitjançant el símbol "+".



2. Feu clic a la icona ".5S" entre els marcs i establir els paràmetres que necessita. Per exemple, pot canviar la durada i l'estil de la transició.



3. Cada bloc individual a la "línia de temps" és completament independent dels altres. Per crear animacions, canviar alguns elements a la seva discreció i comprovar el resultat utilitzant el botó de reproducció.

   

   Després de completar el procés d'edició, utilitzeu el botó de repetició. Això crearà una animació sense fi.

Addició d'esdeveniments

1. Havent comprès amb la disposició, cal afegir esdeveniments de transició per als elements individuals o tot el banner en el seu conjunt. Per això, en la Columna inspector Sector, obriu la pestanya Esdeveniments i feu clic a la icona "+" al panell inferior.



2. A la finestra que apareix a la llista "Propòsit", seleccioneu un objecte que es fa referència.



3. A la pàgina d'esdeveniments, expandiu la pàgina "ratolí" i seleccioneu "Clic". Depenent dels requisits per al resultat, es poden combinar diferents instal·lacions.



4. A més de la llista "Acció", obriu la Declaració de Google i establir el valor de "transició". Tal elecció es farà de manera que l'usuari va a la pàgina específica que necessita a Internet.



5. Com un "receptor", seleccioni una sola versió "DAS-AD".



6. En l'última etapa al camp "Ident. Indicadors »Consultar l'enllaç per a l'accés directe i omplir 'URL' especificant la pàgina desitjada. Utilitza "OK" per desar.

Treball amb el codi font

1. Com hem esmentat, Google Web Designer conté un predefinit editor de codi. Es pot activar mitjançant el botó "Codi" al costat dret de el panell superior.



2. Pot realitzar canvis en l'estructura de pancarta utilitzant no només l'editor visual, sinó també treballar directament amb el codi a l'arxiu de projecte. Això pot ser molt útil quan s'alinea una multitud de petits elements o esdeveniments add no previstos pel programa.

Les accions descrites han de ser més que suficient per crear un banner, independentment de l'aplicació. A el mateix temps, es pot ampliar significativament les capacitats mitjançant la combinació d'aquestes eines.

Pas 3: Finalització

Quan la bandera està acabat i llest per a la seva col·locació en el lloc, es pot anar a l'últim pas. En primer lloc, val la pena comprovar com el seu treball al web real, es veu com a pàgina.

Vista prèvia

1. Al panell superior, feu clic al botó de vista prèvia per obrir el menú addicional. Aquí podeu especificar el navegador amb el qual es va obrir la bandera.



2. A l'obrir totes les funcions i l'aparició de la bandera es conserven, però amb algunes característiques. Per exemple, fins i tot si s'ha instal·lat una repetició infinita de l'animació, tot s'ha de limitar aquí només una iteració.



3. Si cal, sempre es pot demostrar el resultat a altres persones. Per a això, selecciona "Obtenir un ús compartit d'enllaç" i confirmi l'accés al compte de Google.

   

   Com a resultat, un enllaç apareixerà a la pantalla per veure la bandera en la manera d'una tal com es va descriure anteriorment. Per descomptat, és possible només si té un compte.

Preservació i publicació

1. Per guardar el projecte, primer obriu el menú Arxiu i utilitzeu l'opció Desa. Després d'això, l'arxiu d'origen es guarda en l'equip i es pot obrir posteriorment.



2. Pot preparar un projecte per al lloc al lloc obrint el menú "Publicar" a la cantonada superior dreta de el programa i seleccionar un dels llocs de l'operació de desar.



3. Canviar els paràmetres a la finestra de la publicació a la seva discreció, deixant només les caselles de verificació desitjades i feu clic a "Publica". Estalviant així succeeix ràpidament sense importar la mida de el projecte.

   

   Com a resultat, la carpeta es pot trobar al Desar el lloc. La col·locació de la bandera al lloc difereix de la dependència de el lloc i, en general, ja no pertany a el procediment de creació.