Ustvarjanje in prilagajanje pasice v Google Web Designer

1. korak: Kako začeti

Google Web Designer je brezplačno razvojno okolje za spletne skrbnike, ki omogoča ustvarjanje spletnih strani, vključno s posameznimi elementi, kot so pasice, s pomočjo CSS3 in HTML5. Za uporabo tega orodja morate najprej prenesti namestitveno datoteko z uradnega spletnega mesta in jo namestiti.

Prenesite Google Web Designer z uradne strani

Namestitev programa

1. Kliknite zgornjo povezavo, da odprete glavno stran programske opreme in pritisnete gumb Prenesite Web Designer... Upoštevajte, da program podpira samo Windows 7 in novejše različice.
2. Skozi pojavno okno "Shrani" izberite mesto v računalniku in uporabite označeni gumb na spodnji plošči.
3. Pojdite v mapo z datoteko, ki ste jo pravkar shranili, in dvokliknite levi gumb miške, da jo odprete. Posledično bi se moralo odpreti namestitveno okno.

   Sam postopek namestitve se izvede v popolnoma samodejnem načinu, pri čemer se vse delovne datoteke shranijo v imenik z drugimi programi na sistemskem disku.

Pooblastilo

1. Če želite shraniti projekte v internetu ali na splošno ustvariti pasico posebej za interne Googlove storitve, morate dodatno opraviti pooblastilo. Če želite to narediti, zaženite program z ustrezno ikono, zaprite pozdravno okno in kliknite gumb "Vstopiti" na zgornji plošči.
2. Vnesite podatke iz Google Računa, kliknite "Naprej" in po potrebi potrdite. Po tem bo račun takoj dodan brez posebnih nastavitev.

Spremenite nastavitve

1. Po opravljeni pripravi je zdaj priporočljivo spremeniti osnovne nastavitve programske opreme, da si olajšate delo v prihodnosti. Z zgornjo vrstico razširite meni "Uredi" in izberite razdelek "Nastavitve" na koncu seznama.
2. V zavihku "Osnovno" spremenite lahko začetno vedenje programa za hitro odpiranje projektov, dodelite mapo za shranjevanje ustvarjenih predlog in med ustvarjanjem nastavite tudi privzete vrednosti za vrsto oglasa.
3. Naslednja stran Način pogleda postavitve vsebuje možnosti za videz urejevalnika. S spreminjanjem predstavljenih nastavitev lahko prilagodite mrežo in posnetke predmetov za natančnejše pozicioniranje elementov.
4. Google Web Designer ima urejevalnik kod z lastnimi nastavitvami. Torej, na zavihku "Način pogleda kode" lahko dodelite vizualni slog, nastavite možnosti oblikovanja in dodate naloge za tipke.
5. Zadnji zavihek "Napredno" vsebuje samo dva parametra - "Vodenje revij" in Lestvica uporabe... V prvem primeru bo omogočanje ustvarilo dnevnik sprememb, drugi element pa vam omogoča, da nastavite novo standardno lestvico za delovni prostor urejevalnika.
   

   Bodi previden! Če jo nastavite za preveliko, boste morda imeli težave z nezadostnim prostorom na zaslonu za pomembne predmete.

Vse spremembe, ki so narejene na tak ali drugačen način, zahtevajo ponovni zagon programa. Če šele začnete delati z urejevalnikom, ne pozabite na možnost ponastavitve nastavitev z ločenim elementom na vsakem od zavihkov.

2. korak: ustvarite pasico

Po konfiguraciji programa lahko začnete delati na pasici z uporabo vseh funkcij Google Web Designer. Vendar ne pozabite takoj, da to orodje deluje izključno kot vizualni urejevalnik in vam omogoča, da samo pripravljene elemente, ki so ustvarjeni ločeno, umestite na primer v Photoshop.

Preberite tudi: Ustvarjanje pasice v Adobe Photoshop

Priprava postavitve

1. Če želite ustvariti nov projekt, uporabite povezavo "Ustvari datoteko" v začetnem oknu. Za ponovno odpiranje lahko uporabite element "Ustvari" v meniju "Mapa".
2. V bloku "Oglasi" izberite "Pasica" in izpolnite glavno polje "Ime", brez katerega ne bo mogoče prihraniti. Navedete lahko tudi lokacijo pripravljenega projekta.
3. Uporaba spustnega seznama "Kontekst" nastavite eno od možnosti, odvisno od prihodnje uporabe pasice. Enako ločljivost lahko spremenite z uporabo menija "Mere".

   Po potrebi lahko dimenzije postavitve prilagodite sami. Če želite to narediti, nastavite parameter "Po meri" in določite želeno ločljivost.

   S potrditvijo polja "Odzivna postavitev", vam ni treba skrbeti glede velikosti, saj se bo oglas po dodajanju na spletno mesto raztegnil v skladu z nadrejenim blokom.

4. Možnosti prilagajanja lahko razširite, če izberete drug zavihek, pa naj bo to "Razširitev" ali "Vmesni oglas"... Teh možnosti ne bomo upoštevali, ker bo za primer dovolj že standardna postavitev.

   Upoštevajte ločeno "Pasica AMPHTML" , če želite prilagoditi oglase za mobilne naprave. To bo pospešilo nalaganje oglasov, vendar bo blokiralo nekatere funkcije urejevalnika.

Delo z orodji

1. Po pripravi postavitve se morate seznaniti z orodji. Na zgornji plošči je glavna pozornost seznam "Pogled"za omogočanje in onemogočanje pomožnih elementov.
2. Skozi meni "Okno" lahko začasno onemogočite ta ali tisti element vmesnika. Če želite na primer narediti statično pasico, "Časovna os" bo samo ovira, zato je najbolje, da počistite ustrezno polje.
3. Glavna orodja za urejanje so predstavljena v levem stolpcu. Ne bomo upoštevali posamezne možnosti, saj pri ustvarjanju niso uporabljeni vsi elementi, vendar priporočamo, da preizkusite sami.
4. Zraven orodne vrstice je "Oglasni inšpektor" z več prispevki. Zaslužite si posebno pozornost "Razvoj"odgovoren za dejanja s tem ali onim predmetom pasice in "CSS"kjer so nastavljeni parametri sloga.
5. Na desni strani programa je tudi nabor orodij, ki omogočajo upravljanje barv, besedila, strukture predmetov, lastnosti in samo plasti. Tako kot glavni nabor funkcij je tudi med ustvarjanjem projekta bolje preučiti okna.
6. Po potrebi s "Časovna os" lahko ustvarite animirano pasico. V tem primeru za nadzor glavnega področja urejevalnika uporabite vpeto preslednico in LMB ter blok s parametri lestvice.

Polnjenje postavitve

1. Ustvarjanje pasice se vedno začne iz ozadja, zato po pripravi postavitve odprite zavihek "Lastnosti" in v bloku "Stran" uporabite pododdelek "Napolni"... Tu lahko nastavite katero koli barvo, vključno z gradientom ali popolnoma prozornim ozadjem.
2. Nadalje morate v vrstnem redu zavoja dodati vnaprej pripravljene grafične elemente. To lahko storite na zavihku Knjižnica predmetovs klikom na ikono «+» na spodnji plošči.
3. Izberite zahtevane grafične datoteke in kliknite "Odprto"... To lahko storite naenkrat za vse potrebne sloje ali ločeno, pri čemer ponovite navedena dejanja.
4. Za izvedbo postavitve pridržite želeno sliko na jezičku Knjižnica predmetov in povlecite v glavno področje urejevalnika.

   Položaj predmeta lahko nadzirate z običajnim vlečenjem in spreminjanjem velikosti z aktivnim orodjem za izbiro. Po potrebi lahko vedno uporabite vodnike.

5. Z izbiro grafične datoteke v delovnem prostoru ali zavihku "Strukturirani urejevalnik", odprto "Lastnosti"... Tu je veliko več možnosti kot v primeru ozadja, na primer nastavitve obrobe ali oblazinjenje.
6. Če vaše oblikovanje pasic zahteva besedilo, lahko s standardnim orodjem Google Web Designer dodate ustrezen element. Kliknite ikono "T" na levi plošči kliknite v glavnem oknu urejevalnika in vnesite želeni nabor znakov.

   Za nadzor besedila izberite plast na zavihku "Strukturirani urejevalnik", razširite "Besedilo" in nastavite ustrezne parametre.

Nastavitev animacije

1. V bloku "Časovna os" lahko dodajate in prilagajate animacijske učinke. Najprej pritisnite gumb Dodaj ikono z ikono «+».
2. Kliknite ikono ".5 s" med okvirji in nastavite želene možnosti. Lahko na primer spremenite trajanje in slog prehoda.
3. Vsak posamezen blok vklopljen "Časovna os" je popolnoma neodvisen od drugih. Če želite ustvariti animacije, spremenite nekatere elemente, kot želite, in z gumbom za predvajanje preverite rezultat.

   Po končanem postopku urejanja uporabite gumb "Ponoviti"... To bo ustvarilo neskončno animacijo.

Dodajanje dogodkov

1. Po obravnavi postavitve morate dodati prehodne dogodke za posamezne elemente ali celotno pasico kot celoto. Če želite to narediti, v stolpcu "Oglasni inšpektor" odprite zavihek "Razvoj" in kliknite ikono «+» na spodnji plošči.
2. V odprtem oknu s seznama "Cilj" izberite predmet, ki bo deloval kot povezava.
3. Na strani "Dogodek" razširiti "Miška" in izberite "Kliknite"... Glede na zahteve za rezultat lahko kombinirate različne nastavitve.
4. Dalje s seznama "Zakon" Odpri Googlovo obvestilo in nastavite vrednost "Prehod"... Takšna izbira vam bo omogočila, da uporabnika obišče določeno spletno stran, ki jo potrebujete.
5. Kot "Prejemnik" izberite eno samo predstavljeno možnost "Gwd-ad".
6. Zadnji korak na terenu »Ident. kazalniki " nastavite povezavo do bližnjice in izpolnite "URL"z določitvijo želene strani. Če želite shraniti uporabo "V REDU".

Delo z izvorno kodo

1. Kot smo že omenili, Google Web Designer vsebuje vgrajen urejevalnik kod. Vklopite ga lahko s pomočjo gumba "Koda" na desni strani zgornje plošče.
2. Strukturo pasic lahko spremenite z uporabo ne samo vizualnega urejevalnika, temveč tudi neposrednega dela s kodo v datoteki projekta. To je lahko zelo koristno pri poravnavi številnih drobnih predmetov ali dodajanju dogodkov, ki jih program ne zagotavlja.

Opisana dejanja bi morala biti dovolj za ustvarjanje pasice, ne glede na področje uporabe. Hkrati pa lahko s kombiniranjem omenjenih orodij možnosti znatno razširite.

3. korak: Dokončanje

Ko je pasica končana in pripravljena za postavitev na spletno mesto, lahko nadaljujete do zadnje stopnje. Prvi korak je preveriti, kako izgleda vaše delo na pravi spletni strani.

Predogled

1. V zgornji vrstici kliknite "Predogled", da odprete dodaten meni. Tu lahko določite brskalnik, s katerim se bo pasica odprla.
2. Ko se odpre, se ohranijo vse funkcije in videz pasice, vendar z nekaterimi posebnostmi. Na primer, tudi če nastavite, da se animacija ponavlja za nedoločen čas, bo tukaj vse omejeno na samo eno ponovitev.
3. Če je potrebno, lahko rezultat vedno pokažete drugim. Če želite to narediti, izberite "Pridobite povezavo do skupne rabe" in potrdite dostop aplikacije do vašega Google Računa.

   Posledično se na zaslonu prikaže povezava za ogled pasice v enakem načinu, kot je navedeno zgoraj. Seveda je to mogoče le, če imate račun.

Ohranjanje in objava

1. Če želite shraniti projekt, najprej odprite meni z datotekami in uporabite možnost "Shrani"... Po tem se izvirna datoteka shrani v računalnik in jo lahko odpre pozneje.
2. Projekt za umestitev na spletno mesto lahko pripravite tako, da odprete meni "Objavi" v zgornjem desnem kotu programa in izberite eno od lokacij shranjevanja.
3. Spremenite parametre v oknu za objavo po svojem okusu, tako da pustite le potrebna polja, in kliknite "Objavi"... Tako prihranite hitro, ne glede na velikost projekta.

   Nastalo mapo najdete na mestu za shranjevanje. Postavitev pasice na spletno mesto se razlikuje glede na spletno mesto in na splošno ni več povezana s postopkom ustvarjanja.