Oprettelse af et banner på Google Webdesigner

Trin 1: Kom godt i gang

Google Web Designer er et gratis udviklingsmiljø for webmastere giver mulighed for at oprette websider, herunder individuelle emner som bannere ved hjælp af CSS3 og HTML5. For at bruge dette værktøj, først og fremmest, skal du downloade installationsfilen fra den officielle hjemmeside og installere.

Download Google Webdesigner fra den officielle hjemmeside

installation Program

1. Klik på linket præsenteret ovenfor for at gå til den nu Side, og klik på "Hent Webdesigner" knappen. Bemærk at programmet kun understøtter Windows 7 og nyere versioner.



2. Gennem Gem pop-up-vindue, skal du vælge et sted på din computer og bruge knappen markeret på det nederste panel.



3. Gå til mappen med blot gemt filen og dobbeltklik på venstre museknap for at udføre åbningen. Som et resultat, bør åbnes installationsvinduet.

   

   Installationsproceduren selv udføres i fuldautomatisk tilstand, sparer alle de arbejdende filer til den mappe med andre programmer på system disk.

Bemyndigelse

1. Hvis du vil gemme projekter på internettet eller i almindelighed, skal du oprette et banner specielt til Googles interne tjenester, er det desuden værd at udføre godkendelse. For at gøre dette, skal du køre programmet ved hjælp af relevante ikon, tæt på velkomst-vinduet og klik på knappen "Log ind" på det øverste panel.



2. Angiv data fra Google-konto, skal du klikke på "Næste" og bekræft om nødvendigt. Efter dette, vil kontoen blive straks tilføjes, uden at det kræver nogle individuelle indstillinger.

Ændring af indstillinger

1. Efter at have forstået med forberedelse, er det nu ønskeligt at foretage ændringer i de grundlæggende indstillinger af softwaren til at lette arbejdet i fremtiden. Brug det øverste panel, udvide menuen Rediger og vælg "Indstillinger" i slutningen af ​​listen.



2. På "Main" fanen, kan du ændre den oprindelige adfærd af programmet til hurtigt at åbne projekter, tildele en mappe til at gemme de oprettede skabeloner, samt sæt standardværdier for specifikationen af ​​meddelelsen, når du opretter.



3. Følgende side "layout view mode" indeholder udseende parametre redaktøren. Ændre de præsenterede indstillinger kan du justere gitteret og bindende objekter mere præcis placering af elementerne.



4. Google Web Designer har en kodeditor med sine indstillinger. Således på fanen "Code Viewer" kan du tildele designstilet, indstille formateringsparametrene og tilføje nøglebindinger til opgaver.



5. Den sidste fane "Extended" indeholder kun to parametre - "Logging" og "Application Scale". I det første tilfælde vil inkluderingen oprette en ændringslog, mens den anden vare giver dig mulighed for at indstille en ny standardskala til editorens arbejdsområde.

   Vær forsigtig! Hvis du sætter for meget skala, kan der forekomme problemer med manglende plads på skærmen for vigtige elementer.

Eventuelle ændringer foretaget en eller anden måde eller andet kræver en genstart af programmet. Hvis du bare begynder at arbejde med editoren, skal du ikke glemme muligheden for at nulstille indstillingerne ved hjælp af et separat emne på hver af fanerne.

Trin 2: Oprettelse af et banner

Ved at konfigurere programmet kan du begynde at arbejde på banneret ved hjælp af alle muligheder for Google Web Designer. Lad os dog bemærke, at dette middel udelukkende er som en visuel editor, så du kun kan sende færdige elementer, der er oprettet separat, for eksempel i Photoshop.

Arbejde med værktøjer

1. Efter at have udarbejdet layoutet, skal du være bekendt med værktøjerne. På øverste panel af hovedhjælpen fortjener listen "visning", der giver mulighed for at aktivere og deaktivere hjælpelementerne.



2. Gennem menuen "Vindue" kan du midlertidigt deaktivere et bestemt interfaceelement. For eksempel, hvis du vil lave et statisk banner, vil "Timeline" kun blande sig, og derfor er det bedst at fjerne det relevante kryds.



3. Hovedredaktørværktøjerne er præsenteret i venstre kolonne. Vi vil ikke overveje hver mulighed, da ikke alle varer bruges, når vi opretter, men vi anbefaler at eksperimentere dig selv.



4. Ved siden af ​​værktøjslinjen præsenteres "Annoncerannoncer" med flere bidrag. Særlig opmærksomhed fortjener "begivenheder" ansvarlig for handling med et eller andet bannerobjekt, og "CSS", hvor stilparametrene er indstillet.



5. Den højre del af programmet har også et sæt værktøjer, der giver dig mulighed for at styre farven, teksten, strukturen af ​​objekter, egenskaber og enkelt lag. Ligesom det vigtigste sæt af funktioner er vinduerne bedre at studere uafhængigt i processen med at oprette et projekt.



6. Hvis det er nødvendigt, kan du bruge "Timeline" oprettes et animeret banner. På samme tid for at styre det vigtigste område af redaktøren, bruge et klemplads og LCM, samt en blok med skala parametre.

Fyldning af et layout

1. Oprettelse af et banner starter altid med baggrunden, og efter at have udarbejdet et layout, skal du åbne fanen "Egenskaber" og i sidenblokken, bruge "Fill" -midlet. Det er helt muligt at installere enhver farve, herunder en gradient eller en fuldt gennemsigtig baggrund.



2. Yderligere i køen, tilføj grafiske elementer udarbejdet på forhånd. Du kan gøre dette på fanen Objektbibliotek ved at klikke på ikonet "+" på bundpanelet.



3. Vælg de ønskede grafikfiler, og klik på Åbn. Dette kan gøres både på en gang for alle de nødvendige lag og separat gentage disse handlinger.



4. For at imødekomme, klemme det ønskede billede på fanen Objektbibliotek og træk editoren til hovedområdet.

   

   Du kan styre placeringen af ​​objektet med almindeligt træk og skalering med et aktivt valgværktøj. Om nødvendigt kan du altid bruge vejledninger.



5. Ved at vælge en grafisk fil i arbejdsområdet eller på fanen Structural Editor, skal du åbne "Egenskaber". Der er meget mere end flere muligheder end i tilfælde af baggrunden, for eksempel grænseindstillinger eller led.



6. Hvis Banner Design giver tilstedeværelse af tekst, kan du tilføje det relevante emne ved hjælp af værktøjet Standard Google Web Designer. Klik på ikonet "T" på venstre rude, klik på vinduet Hovedredigering og indtast det ønskede sæt tegn.

   

   For at styre teksten skal du vælge laget på fanen "Structural Editor", udvide "Teksten" og indstille de relevante parametre.

Indstilling af animationen

1. I "TimeLine" -blokken kan du tilføje og konfigurere virkningerne af animation. For at starte, klik på knappen "Tilføj ikon" med ikonet "+".



2. Klik på ikonet ".5s" mellem rammerne og indstil de parametre, du har brug for. For eksempel kan du ændre varigheden og stilen på overgangen.



3. Hver enkelt blok på "timeline" er helt uafhængig af andre. For at oprette animationer, ændre nogle elementer til din diskretion og kontrollere resultatet ved hjælp af play-knappen.

   

   Efter endt redigering proces, skal du bruge Repeat-knappen. Dette vil skabe en endeløs animation.

Tilføjelse begivenheder

1. Efter at have forstået med layoutet, skal du tilføje overgangseffekter begivenheder til enkelte elementer eller hele banneret som helhed. For at gøre dette, i Sektor Inspector kolonne, skal du åbne fanen Hændelser, og klik på ikonet "+" på bundpladen.



2. I det vindue, der åbnes fra "Purpose" liste, skal du vælge et objekt, der vil blive refereret.



3. På event siden, udvide "Mus" siden og vælg "Klik". Afhængig af kravene til det resultat, kan du kombinere forskellige installationer.



4. Yderligere fra "Action" liste, skal du åbne Google-erklæringen og indstille "overgang" værdi. Et sådant valg vil gøre det, så brugeren går til den specifikke side, du har brug for på internettet.



5. Som en "modtager", skal du vælge en enkelt "GWD-AD" version.



6. På den sidste etape i feltet "IDENTIF. Indikatorer »Check linket til genvejen og udfylde 'URL' ved at angive den ønskede side. Brug "OK" for at gemme.

Arbejde med kildekode

1. Som vi nævnte, indeholder Google Webdesigner en indbygget kode editor. Det kan aktiveres ved hjælp af knappen "Kode" på højre side af det øverste panel.



2. Du kan foretage ændringer i banneret struktur ved at bruge ikke kun den visuelle editor, men også direkte arbejder med koden i projektet fil. Dette kan være meget nyttigt, når justering et stort antal små elementer eller add begivenheder ikke tilbydes af programmet.

De beskrevne tiltag bør være helt nok til at skabe et banner, uanset hvilket program. På samme tid, kan du markant udvide funktionaliteten ved at kombinere disse værktøjer.

Trin 3: Afslutning

Når banneret er afsluttet og klar til placering på sitet, kan du gå til det sidste trin. Først og fremmest er det værd at tjekke, hvordan dit arbejde på den rigtige webside ser ud.

Eksempel

1. På det øverste panel, skal du klikke på knappen Eksempel for at åbne ekstra menu. Her kan du angive den browser med hvilken banneret vil blive åbnet.



2. Når du åbner alle funktioner og udseendet af banneret bevares, men med nogle funktioner. For eksempel, selvom du installerede en uendelig gentagelse af animationen, vil alt være begrænset her kun en iteration.



3. Om nødvendigt kan du altid demonstrere resultatet til andre mennesker. For at gøre dette skal du vælge "Få et delingslink" og bekræfte adgangen til Google-konto.

   

   Som følge heraf vises et link på skærmen for at se banneren i en sådan tilstand som beskrevet ovenfor. Selvfølgelig er det kun muligt, hvis du har en konto.

Bevarelse og publikation

1. For at gemme projektet skal du først åbne filmenuen og bruge indstillingen Gem. Derefter gemmes kildefilen på computeren og kan åbnes efterfølgende.



2. Du kan udarbejde et projekt til at placere på webstedet ved at åbne menuen "Udgiv" i øverste højre hjørne af programmet og vælge en af ​​placeringen af ​​gemmen.



3. Skift parametrene i publikationsvinduet efter eget valg, efterlad kun de ønskede afkrydsningsfelter, og klik på "Udgiv". Besparelse sker således hurtigt uanset projektets størrelse.

   

   Som følge heraf kan mappen findes i SAVE-stedet. Placeringen af ​​banneret på stedet adskiller sig fra områdets afhængighed, og generelt tilhører ikke længere oprettelsen.