Paghimo sa usa ka bandila sa ibabaw sa Google Web Designer

Lakang 1: Pagsugod

Google Web Designer mao ang usa ka libre nga development nga palibot alang sa Webmasters sa paghatag sa abilidad sa paghimo og mga panid sa web, lakip na ang tagsa-tagsa nga mga butang sama sa mga bandila sa paggamit sa CSS3 ug HTML5. Sa paggamit niini nga himan, una sa tanan, nga kamo kinahanglan nga i-download ang instalar file gikan sa opisyal nga site ug sa-instalar.

Download Google Web Designer gikan sa opisyal nga site

instalar Program

1. I-klik ang link nga gipresentar sa ibabaw sa pag-adto ngadto sa KARON Page ug i-klik ang "Download Web Designer" button. Matikdi nga ang mga uloabaga programa lamang Windows 7 ug sa ulahi nga mga bersyon.



2. Pinaagi sa Save pop-up bintana, pagpili sa usa ka dapit sa ibabaw sa imong computer ug sa paggamit sa button gimarkahan sa ubos panel.



3. Lakaw ngadto sa folder uban sa lang maluwas ang file ug double click sa wala mouse button sa pagbuhat sa pag-abli. Ingon sa usa ka resulta, ang instalar bintana kinahanglan nga giablihan.

   

   Ang instalar pamaagi sa iyang kaugalingon mao ang gihimo sa bug-os nga automatic mode, sa pagluwas sa tanan nga mga nagtrabaho file ngadto sa directory sa ubang mga programa sa sa sistema sa disk.

authorization

1. Kon kamo gusto nga sa pagluwas sa mga proyekto diha sa Internet o sa kinatibuk-an, paghimo og usa ka bandila ilabi alang sa internal nga mga serbisyo sa Google, kini mao ang dugang bili sa pagpahigayon pagtugot. Sa pagbuhat niini, modagan sa programa sa paggamit sa tukma nga icon, duol sa welcome bintana ug i-klik ang "Login" button sa ibabaw sa tumoy panel.



2. Hingalan sa mga data gikan sa Google account, i-klik ang "Sunod" ug nagpamatuod kon gikinahanglan. Human niana, ang mga asoy nga diha-diha dayon dugang pa, nga walay nagkinahanglan sa pipila indibidwal nga mga kahimtang.

usab-usab nga mga kahimtang

1. Ingon nga nakasabut sa pagpangandam, kini mao ang karon madanihon sa paghimo sa pagbag-o sa nag-unang mga engaste nga sa software aron sa pagpahigayon sa buhat sa umaabot. Pinaagi sa paggamit sa ibabaw panel, pagpalapad sa Edit Menu ug pagpili "setting" sa katapusan sa mga listahan.



2. Sa tab "Main", nga imong mahimo sa pag-usab sa inisyal nga kinaiya sa mga programa sa dali nga bukas mga proyekto, assign sa usa ka folder sa pagluwas sa gibuhat sa templates, ingon man usab sa set remate mga hiyas alang sa paghingalan sa pahibalo diha nga ang pagmugna.



3. Ang mosunod nga panid "Layout panglantaw mode" naglakip sa dagway lantugi sa mga editor. Ang pag-usab sa gipresentar engaste, nga kamo mahimo adjust sa grid ug pagbugkos butang alang sa mas tukma nga positioning sa mga elemento.



4. Ang Google Web Designer adunay usa ka editor sa code sa mga setting niini. Sa ingon, sa tab nga "Code Viewer", mahimo nimong i-assign ang istilo sa disenyo, ibutang ang mga parameter sa pag-format ug pagdugang mga yawe nga pagbugkos sa mga buluhaton.



5. Ang katapusang tab nga "gipalapdan" adunay duha ra nga mga parameter - "pag-log" ug "aplikasyon scale". Sa una nga kaso, ang paglakip maghimo usa ka log sa pagbag-o, samtang ang ikaduha nga butang nagtugot kanimo nga magbutang usa ka bag-ong sumbanan nga sukod alang sa lugar nga trabaho sa editor.

   Pag-amping! Kung imong gipahimutang ang daghang sukod, ang mga problema sa usa ka kakulang sa wanang sa screen mahimong makita alang sa hinungdanon nga mga butang.

Ang bisan unsang mga pagbag-o nga gihimo sa pipila ka paagi o uban pa nanginahanglan usa ka restart sa programa. Kung magsugod ka lang sa pagtrabaho sa editor, ayaw kalimti ang bahin sa posibilidad nga i-reset ang mga setting gamit ang usa ka lahi nga butang sa matag usa sa mga tab.

Lakang 2: Paghimo usa ka Banner

Pinaagi sa pag-configure sa programa, mahimo ka magsugod sa pagtrabaho sa bandila gamit ang tanan nga mga kapilian alang sa Google Web Tigdisenyo. Bisan pa, matikdan naton nga kini nga solusyon eksklusibo ingon usa ka biswal nga editor, nga nagtugot kanimo sa pag-post lamang nga mga andam nga mga elemento nga gihimo nga gilain, sa mga Photoshop.

Pagtrabaho uban ang mga himan

1. Human sa pag-andam sa layout, kinahanglan nimo nga pamilyar ang mga himan. Sa kinatas-ang panel sa panguna nga atensyon, ang lista nga "View" takos, nga nagtugot sa pag-ayo ug pag-disable sa mga elemento sa auxiliary.



2. Pinaagi sa menu nga "Window", mahimo nimo nga temporaryong pag-disable ang usa ka partikular nga elemento sa interface. Pananglitan, kung gusto nimo maghimo usa ka static banner, ang "Timeline" mahimong manghilabot, ug busa kini labing maayo nga tangtangon ang angay nga tinta.



3. Ang mga nag-unang mga gamit sa editor gipresentar sa wala nga kolum. Dili namon hunahunaon ang matag kapilian, tungod kay dili tanan nga mga butang gigamit sa paghimo, bisan pa, girekomenda namon ang pag-eksperimento sa imong kaugalingon.



4. Sunod sa toolbar gipresentar nga "Mga Adsign Ads" nga adunay daghang mga kontribusyon. Ang espesyal nga atensyon angay nga "mga panghitabo" nga responsable sa paglihok sa usa o usa pa nga butang sa bandila, ug ang "CSS", diin ang mga parameter sa estilo gitakda.



5. Ang husto nga bahin sa programa adunay usab usa ka hugpong sa mga himan nga nagtugot kanimo sa pagkontrol sa kolor, teksto, istruktura sa mga butang, kabtangan ug yano nga mga layer. Sama sa mga nag-unang hugpong sa mga gimbuhaton, ang mga bintana mas maayo nga magtuon nga independente sa proseso sa paghimo og usa ka proyekto.



6. Kung kinahanglan, ang paggamit sa "timeline" mahimong buhaton usa ka animated nga bandila. Sa parehas nga oras, sa pagdumala sa panguna nga lugar sa editor, paggamit usa ka wanang sa clamping ug lcm, ingon man usa ka bloke nga adunay sukod nga mga parameter.

Pagpuno sa usa ka Layout

1. Ang paghimo sa usa ka bandila kanunay nga nagsugod sa background, ug busa, pagkahuman nag-andam sa usa ka layout, ablihi ang tab nga "mga kabtangan", gamita ang "pun-on" nga subseksyon. Posible nga ma-install ang bisan unsang kolor, lakip ang usa ka gradient o usa ka hingpit nga transparent background.



2. Dugang pa sa pila, idugang ang mga graphic nga elemento nga giandam nang daan. Ikaw makahimo niini sa Object Library tab pinaagi sa pagklik sa "+" icon sa ubos panel.



3. Pilia ang gitinguha nga mga graphic file ug i-klik ang Open. Mahimo kini nga dapat sa makausa alang sa tanan nga kinahanglan nga mga sapaw, ug gilain, gisubli kini nga mga aksyon.



4. Aron ma-accommodate, i-clamp ang gitinguha nga imahe sa tab sa LIBRARYA sa BUTANG ug I-drag ang editor sa panguna nga lugar.

   

   Mahimo nimong kontrolon ang lokasyon sa butang nga adunay naandan nga pag-drag ug pag-scale sa usa ka aktibo nga himan sa pagpili. Kung kinahanglan, mahimo ka kanunay nga mogamit mga giya.



5. Pinaagi sa pagpili sa usa ka graphic file sa workspace o sa Tab Tab sa istruktura, ablihi ang mga "kabtangan". Adunay labi pa ka labi pa ka daghan nga posibilidad kaysa sa kaso sa background, pananglitan, mga setting sa border o indents.



6. Kung ang laraw sa banner naghatag alang sa presensya sa teksto, mahimo nimong idugang ang angay nga butang gamit ang standard nga Google Web Designer Tool. I-klik ang icon "T" sa wala bildo, i-klik sa mga nag-unang bintana editor ug mosulod sa gitinguha nga hugpong sa mga karakter.

   

   Aron makontrol ang teksto, pilia ang layer sa tab nga "istruktura nga editor", pagpalapad sa "teksto" ug gibutang ang angay nga mga parameter.

Pagpahimutang sa animation

1. Sa "timeline" block, mahimo nimong idugang ug i-configure ang mga epekto sa animation. Sa pagsugod, i-klik ang "Idugang Icon" nga butones nga adunay "+" nga icon.



2. Pag-klik sa icon nga ".5s" taliwala sa mga bayanan ug gibutang ang mga parameter nga imong gikinahanglan. Sama pananglit, mahimo nimo mabag-o ang gidugayon ug istilo sa transisyon.



3. Ang matag indibidwal nga block sa "talaan sa panahon" bug-os nga independente sa uban. Aron sa paghimo sa animation,-usab sa pipila ka mga butang sa imong pagkabuotan ug check ang resulta sa paggamit sa button play.

   

   Human sa pagkompleto sa usba sa proseso, sa paggamit sa Balika button. Kini ang paghimo sa usa ka walay katapusan nga animation.

sa pagdugang sa mga panghitabo

1. Ingon nga nakasabut sa Layout, nga kamo kinahanglan aron sa pagdugang sa mga hitabo nga kausaban alang sa tagsa-tagsa nga mga elemento o sa bug-os nga bandila nga ingon sa usa ka bug-os nga. Sa pagbuhat niini, sa Sector Inspector Column, bukha ang mga tab Events ug i-klik sa "+" icon sa ubos panel.



2. Sa bintana nga abli gikan sa "Katuyoan" listahan, pagpili og usa ka butang nga pakisayran.



3. Sa pahina Hitabo, pagpalapad sa panid "Mouse" ug pagpili "I-klik". Depende sa mga kinahanglanon alang sa resulta, nga kamo mahimo combine lain-laing mga installations.



4. Dugang pa gikan sa "Action" listahan, bukha ang mga Google Declaration ug gibutang sa "transisyon" bili. Ang maong usa ka pagpili himoon kini aron nga ang user moadto sa piho nga panid nga imong gikinahanglan diha sa Internet.



5. Ingon sa usa ka "nakadawat", pagpili sa usa ka ka "GWD-AD" nga bersyon.



6. Sa katapusan nga yugto sa kapatagan "Identif. Indicators »Susiha ang link ngadto sa laktod, ug pun-on gikan sa" URL "pinaagi sa paghimo sa gitinguha nga panid. Gamita ang "OK" sa pagluwas.

Buhat uban sa source code

1. Samtang kita nga gihisgotan, Google Web Designer naglangkob sa usa ka gitukod-sa code editor. Kini nga nakahimo pinaagi sa paggamit sa "Code" button sa too nga kiliran sa tumoy panel.



2. nga imong mahimo sa paghimo sa kausaban sa estraktura bandila sa paggamit sa dili lamang sa mga visual editor, apan usab sa direkta nga nagtrabaho uban sa mga code sa proyekto file. Kini mahimong mapuslanon kaayo sa dihang aligning sa usa ka panon sa katawohan sa mga gagmay nga mga elemento o add mga panghitabo nga wala gihatag sa programa.

Ang gihulagway mga lihok kinahanglan nga na igo sa paghimo sa usa ka bandila, sa walay pagtagad sa mga aplikasyon. Sa samang panahon, kamo makahimo sa kamahinungdanon sa pagpalapad sa kapabilidad pinaagi sa paghiusa niini nga mga himan.

Lakang 3: Pagkompleto

Sa diha nga ang bandila nahuman ug andam alang sa placement sa site, nga imong mahimo sa pag-adto ngadto sa katapusan nga lakang. Una sa tanan, kini mao ang bili pagsusi kon sa unsang paagi ang imong buhat ibabaw sa mga tinuod nga web page mga tinan-awan sama sa.

Preview

1. Sa ibabaw sa kinatumyan panel, i-klik ang button Preview sa pag-abli sa mga Dugang Menu. Ania ang imong mahimo hingalan sa browser nga ang bandila pagabuksan.



2. Kung giablihan ang tanan nga mga gimbuhaton ug ang dagway sa bandila gipreserbar, apan sa pipila ka mga bahin. Pananglitan, bisan kung imong gibutang ang usa ka walay kinutuban nga pagsubli sa animation, ang tanan limitado dinhi usa ra ka pag-ayo.



3. Kung kinahanglan, mahimo nimo kanunay nga ipakita ang sangputanan sa ubang mga tawo. Aron mahimo kini, pilia ang "Pagkuha usa ka Link sa Sharing" ug kumpirmahi ang pag-access sa Google Account.

   

   Ingon usa ka sangputanan, ang usa ka link makita sa screen aron matan-aw ang bandila sa ingon nga mode sama sa gihulagway sa ibabaw. Siyempre, posible ra kung adunay usa ka account.

Pagpreserbar ug Publikasyon

1. Aron ma-save ang proyekto, una nga buksan ang file sa file ug gamita ang kapilian nga I-save. Pagkahuman niana, ang gigikanan nga file maluwas sa kompyuter ug mahimong mabuksan sa ulahi.



2. Mahimo ka mag-andam sa usa ka proyekto nga ibutang sa site pinaagi sa pagbukas sa menu nga "I-publish" sa taas nga tuo nga suok sa programa ug pagpili sa usa sa mga lokasyon sa pagluwas.



3. Pag-usab sa mga parameter sa bintana sa publikasyon sa imong pagkabuotan, gibiyaan lamang ang gitinguha nga mga checkbox, ug i-klik ang "Pahayag". Ang pagtipig sa ingon nahitabo dali ra sa kadak-an sa proyekto.

   

   Ingon usa ka sangputanan, ang folder mahimong makit-an sa lugar gawas sa lugar. Ang pagbutang sa bandila sa site lahi sa pagsalig sa site ug sa kadaghanan wala na sakop sa pamaagi sa paglalang.