પગલું 1: પ્રારંભ કરવું
ગૂગલ વેબ ડીઝાઈનર એ વેબમાસ્ટર્સ માટે મફત વિકાસ વાતાવરણ છે જે વેબ પૃષ્ઠો બનાવવાની ક્ષમતા પ્રદાન કરે છે, જેમાં CSS3 અને HTML5 નો ઉપયોગ કરીને બેનરો જેવી વ્યક્તિગત વસ્તુઓનો સમાવેશ થાય છે. આ સાધનનો ઉપયોગ કરવા માટે, સૌ પ્રથમ, તમારે અધિકૃત સાઇટથી ઇન્સ્ટોલેશન ફાઇલ ડાઉનલોડ કરવાની અને ઇન્સ્ટોલ કરવાની જરૂર છે.સત્તાવાર સાઇટથી Google વેબ ડિઝાઇનર ડાઉનલોડ કરો
કાર્યક્રમ સ્થાપન
- હવે પૃષ્ઠ પર જવા માટે ઉપર પ્રસ્તુત કરેલી લિંક પર ક્લિક કરો અને "વેબ ડીઝાઈનર ડાઉનલોડ કરો" બટનને ક્લિક કરો. નોંધો કે પ્રોગ્રામ ફક્ત વિન્ડોઝ 7 અને પછીનાં સંસ્કરણોને સપોર્ટ કરે છે.
- સેવ પૉપ-અપ વિંડો દ્વારા, તમારા કમ્પ્યુટર પર કોઈ સ્થાન પસંદ કરો અને નીચેનાં પેનલ પર ચિહ્નિત કરેલા બટનનો ઉપયોગ કરો.
- ફક્ત ફાઇલને સાચવ્યાં સાથે ફોલ્ડર પર જાઓ અને ખુલ્લા કરવા માટે ડાબી માઉસ બટન પર ડબલ ક્લિક કરો. પરિણામે, ઇન્સ્ટોલેશન વિન્ડો ખોલવી જોઈએ.
ઇન્સ્ટોલેશન પ્રક્રિયા પોતે સંપૂર્ણપણે સ્વચાલિત મોડમાં કરવામાં આવે છે, બધી કાર્યકારી ફાઇલોને સિસ્ટમ ડિસ્ક પરના અન્ય પ્રોગ્રામ્સ સાથે ડિરેક્ટરીમાં સાચવી રહ્યું છે.
સત્તાધિકાર
- જો તમે ઇન્ટરનેટ પર અથવા સામાન્ય રીતે પ્રોજેક્ટ્સને સાચવવા માંગતા હો, તો ખાસ કરીને Google ની આંતરિક સેવાઓ માટે બેનર બનાવો, તે વધારાની રીતે અધિકૃતતા કરવા યોગ્ય છે. આ કરવા માટે, પ્રોગ્રામને યોગ્ય આયકનનો ઉપયોગ કરીને ચલાવો, સ્વાગત વિંડો બંધ કરો અને ટોચની પેનલ પર "લૉગિન" બટનને ક્લિક કરો.
- Google એકાઉન્ટમાંથી ડેટાનો ઉલ્લેખ કરો, "આગલું" ક્લિક કરો અને જો જરૂરી હોય તો પુષ્ટિ કરો. તે પછી, એકાઉન્ટને તરત જ ઉમેરવામાં આવશે, કેટલીક વ્યક્તિગત સેટિંગ્સની જરૂર છે.
બદલવાની સેટિંગ્સ
- તૈયારી સાથે સમજીને, ભવિષ્યમાં કાર્યને સરળ બનાવવા માટે સૉફ્ટવેરની મૂળભૂત સેટિંગ્સમાં ફેરફાર કરવા માટે હવે ઇચ્છનીય છે. ટોચની પેનલનો ઉપયોગ કરીને, સંપાદન મેનૂને વિસ્તૃત કરો અને સૂચિના અંતમાં "સેટિંગ્સ" પસંદ કરો.
- "મુખ્ય" ટેબ પર, તમે પ્રોગ્રામના પ્રારંભિક વર્તનને ઝડપથી ખોલવા માટે, બનાવેલ ટેમ્પ્લેટ્સને સાચવવા માટે ફોલ્ડરને અસાઇન કરી શકો છો, તેમજ બનાવતી વખતે જાહેરાતના સ્પષ્ટીકરણ માટે ડિફૉલ્ટ મૂલ્યો સેટ કરી શકો છો.
- નીચેનું પૃષ્ઠ "લેઆઉટ દૃશ્ય મોડ" એ સંપાદકના દેખાવ પરિમાણો શામેલ છે. પ્રસ્તુત સેટિંગ્સને બદલવું, તમે તત્વોની વધુ સચોટ સ્થિતિ માટે ગ્રીડ અને બંધનકર્તા ઑબ્જેક્ટ્સને સમાયોજિત કરી શકો છો.
- ગૂગલ વેબ ડીઝાઈનરમાં તેની સેટિંગ્સ સાથે કોડ એડિટર છે. આમ, "કોડ વ્યૂઅર" ટૅબ પર, તમે ડિઝાઇન શૈલીને અસાઇન કરી શકો છો, ફોર્મેટિંગ પરિમાણોને સેટ કરી શકો છો અને કાર્યોમાં કી બાઈન્ડિંગ્સ ઉમેરી શકો છો.
- છેલ્લું ટેબ "વિસ્તૃત" ફક્ત બે પરિમાણો ધરાવે છે - "લૉગિંગ" અને "એપ્લિકેશન સ્કેલ". પ્રથમ કિસ્સામાં, શામેલ ફેરફાર લોગ બનાવશે, જ્યારે બીજી આઇટમ તમને સંપાદકના કાર્યક્ષેત્ર માટે નવું માનક સ્કેલ સેટ કરવાની મંજૂરી આપે છે.
સાવચેત રહો! જો તમે ખૂબ સ્કેલ સેટ કરો છો, તો સ્ક્રીન પરની જગ્યાની અભાવ સાથે સમસ્યાઓ મહત્વપૂર્ણ વસ્તુઓ માટે દેખાઈ શકે છે.
કોઈપણ ફેરફારો કોઈ રીતે અથવા અન્યને પ્રોગ્રામના પુનઃપ્રારંભની જરૂર છે. જો તમે સંપાદક સાથે કામ કરવાનું પ્રારંભ કરો છો, તો દરેક ટૅબ્સ પરની અલગ આઇટમનો ઉપયોગ કરીને સેટિંગ્સને ફરીથી સેટ કરવાની શક્યતા વિશે ભૂલશો નહીં.
પગલું 2: બેનર બનાવવું
પ્રોગ્રામને રૂપરેખાંકિત કરીને, તમે Google વેબ ડિઝાઇનર માટેના તમામ વિકલ્પોનો ઉપયોગ કરીને બેનર પર કામ કરવાનું પ્રારંભ કરી શકો છો. જો કે, ચાલો નોંધીએ કે આ ઉપાય વિશિષ્ટપણે દ્રશ્ય સંપાદક તરીકે છે, જે તમને ફક્ત તૈયાર કરેલા ઘટકો પોસ્ટ કરવા દે છે જે અલગથી બનાવવામાં આવે છે, ઉદાહરણ તરીકે, ફોટોશોપમાં.સાધનો સાથે કામ કરે છે
- લેઆઉટ તૈયાર કર્યા પછી, તમારે સાધનોથી પરિચિત થવાની જરૂર છે. મુખ્ય ધ્યાનની ટોચની પેનલ પર, સૂચિ "જુઓ" પાત્ર છે, જે સહાયક તત્વોને સક્ષમ અને અક્ષમ કરવા દે છે.
- "વિન્ડો" મેનૂ દ્વારા, તમે અસ્થાયી રૂપે કોઈ ચોક્કસ ઇન્ટરફેસ ઘટકને અક્ષમ કરી શકો છો. ઉદાહરણ તરીકે, જો તમે સ્ટેટિક બેનર બનાવવા માંગતા હો, તો "ટાઇમલાઇન" ફક્ત દખલ કરશે, અને તેથી યોગ્ય ટિકને દૂર કરવું શ્રેષ્ઠ છે.
- મુખ્ય સંપાદક સાધનો ડાબા સ્તંભમાં રજૂ કરવામાં આવે છે. અમે દરેક વિકલ્પને ધ્યાનમાં લઈશું નહીં, કારણ કે બનાવતી વખતે બધી વસ્તુઓનો ઉપયોગ કરવામાં આવતો નથી, જો કે, અમે પોતાને પ્રયોગ કરવાની ભલામણ કરીએ છીએ.
- ટૂલબારની પાસે ઘણા યોગદાન સાથે "જાહેરાતકાર જાહેરાતો" રજૂ કરવામાં આવે છે. ખાસ ધ્યાન એક અથવા અન્ય બેનર ઑબ્જેક્ટ, અને "CSS" સાથેની ક્રિયા માટે જવાબદાર "ઇવેન્ટ્સ" માટે જવાબદાર છે, જ્યાં શૈલી પરિમાણો સેટ છે.
- પ્રોગ્રામનો જમણો ભાગ પણ એવા સાધનોનો સમૂહ ધરાવે છે જે તમને પદાર્થો, પદાર્થો, ગુણધર્મો અને ફક્ત સ્તરોની રંગ, માળખું નિયંત્રિત કરવાની મંજૂરી આપે છે. કાર્યોના મુખ્ય સમૂહની જેમ, વિન્ડોઝ પ્રોજેક્ટ બનાવવાની પ્રક્રિયામાં સ્વતંત્ર રીતે અભ્યાસ કરવા માટે વધુ સારું છે.
- જો જરૂરી હોય, તો "ટાઇમલાઇન" નો ઉપયોગ કરીને એનિમેટેડ બેનર બનાવી શકાય છે. તે જ સમયે, સંપાદકના મુખ્ય ક્ષેત્રનું સંચાલન કરવા માટે, ક્લેમ્પિંગ સ્પેસ અને એલસીએમ, તેમજ સ્કેલ પરિમાણો સાથેના બ્લોકનો ઉપયોગ કરો.
એક લેઆઉટ ભરવા
- બેનર બનાવવું હંમેશાં પૃષ્ઠભૂમિથી શરૂ થાય છે, અને તેથી, લેઆઉટ તૈયાર કર્યા પછી, "પ્રોપર્ટીઝ" ટૅબ ખોલો અને પૃષ્ઠ બ્લોકમાં, "ભરો" પેટા વિભાગનો ઉપયોગ કરો. ગ્રેડિયેન્ટ અથવા સંપૂર્ણ પારદર્શક પૃષ્ઠભૂમિ સહિત કોઈપણ રંગને ઇન્સ્ટોલ કરવું ખૂબ જ શક્ય છે.
- કતારમાં આગળ, અગાઉથી તૈયાર કરેલ ગ્રાફિક તત્વો ઉમેરો. તમે તળિયે પેનલ પર "+" આયકનને ક્લિક કરીને ઑબ્જેક્ટ લાઇબ્રેરી ટૅબ પર આ કરી શકો છો.
- ઇચ્છિત ગ્રાફિક ફાઇલો પસંદ કરો અને ખોલો ક્લિક કરો. આ બધી જ જરૂરી સ્તરો માટે એક જ સમયે કરી શકાય છે, અને અલગથી, આ ક્રિયાઓ પુનરાવર્તન.
- સમાવવા માટે, ઑબ્જેક્ટ લાઇબ્રેરી ટૅબ પર ઇચ્છિત છબીને ક્લેમ્પ કરો અને સંપાદકને મુખ્ય ક્ષેત્રમાં ખેંચો.
તમે ઑબ્જેક્ટના સ્થાનને સામાન્ય ડ્રેગ અને સક્રિય પસંદગી સાધન સાથે સ્કેલિંગથી નિયંત્રિત કરી શકો છો. જો જરૂરી હોય, તો તમે હંમેશાં માર્ગદર્શિકાઓનો ઉપયોગ કરી શકો છો.
- વર્કસ્પેસમાં અથવા માળખાકીય સંપાદક ટૅબ પર ગ્રાફિક ફાઇલ પસંદ કરીને, "ગુણધર્મો" ખોલો. પૃષ્ઠભૂમિના કિસ્સામાં વધુ શક્યતાઓ કરતાં ઘણી વધુ શક્યતાઓ છે, ઉદાહરણ તરીકે, સરહદ સેટિંગ્સ અથવા ઇન્ડેન્ટ્સ.
- જો બૅનર ડિઝાઇન ટેક્સ્ટની હાજરી માટે પ્રદાન કરે છે, તો તમે સ્ટાન્ડર્ડ ગૂગલ વેબ ડિઝાઇનર ટૂલનો ઉપયોગ કરીને યોગ્ય વસ્તુ ઉમેરી શકો છો. ડાબા ફલક પર "ટી" આયકન પર ક્લિક કરો, મુખ્ય સંપાદક વિંડો પર ક્લિક કરો અને અક્ષરોની ઇચ્છિત સેટ દાખલ કરો.
ટેક્સ્ટને નિયંત્રિત કરવા માટે, "માળખાકીય સંપાદક" ટેબ પર સ્તર પસંદ કરો, "ટેક્સ્ટ" વિસ્તૃત કરો અને યોગ્ય પરિમાણો સેટ કરો.
એનિમેશન સુયોજિત કરી રહ્યા છે
- "ટાઇમલાઇન" બ્લોકમાં, તમે એનિમેશનની અસરો ઉમેરી અને ગોઠવી શકો છો. પ્રારંભ કરવા માટે, "+" આયકન સાથે "આયકન ઉમેરો" બટનને ક્લિક કરો.
- ફ્રેમ્સ વચ્ચે ".5s" આયકનને ક્લિક કરો અને તમને જરૂરી પરિમાણો સેટ કરો. ઉદાહરણ તરીકે, તમે સંક્રમણની અવધિ અને શૈલી બદલી શકો છો.
- "સમયરેખા" પરના દરેક વ્યક્તિગત બ્લોક સંપૂર્ણપણે અન્ય લોકોથી સ્વતંત્ર છે. એનિમેશન બનાવવા માટે, કેટલીક આઇટમ્સને તમારા વિવેકબુદ્ધિમાં બદલો અને પ્લે બટનનો ઉપયોગ કરીને પરિણામ તપાસો.
સંપાદન પ્રક્રિયા પૂર્ણ કર્યા પછી, પુનરાવર્તિત બટનનો ઉપયોગ કરો. આ એક અનંત એનિમેશન બનાવશે.
ઘટનાઓ ઉમેરી રહ્યા છે
- લેઆઉટ સાથે સમજીને, તમારે વ્યક્તિગત તત્વો અથવા સંપૂર્ણ બેનર માટે સંક્રમણ ઇવેન્ટ્સ ઉમેરવાની જરૂર છે. આ કરવા માટે, સેક્ટર ઇન્સ્પેક્ટર કૉલમમાં, ઇવેન્ટ્સ ટેબ ખોલો અને નીચે પેનલ પર "+" આયકન પર ક્લિક કરો.
- "હેતુ" સૂચિમાંથી ખોલેલી વિંડોમાં, કોઈ ઑબ્જેક્ટ પસંદ કરો જે સંદર્ભિત કરવામાં આવશે.
- ઇવેન્ટ પૃષ્ઠ પર, "માઉસ" પૃષ્ઠને વિસ્તૃત કરો અને "ક્લિક કરો" પસંદ કરો. પરિણામ માટે જરૂરિયાતો પર આધાર રાખીને, તમે વિવિધ સ્થાપનોને ભેગા કરી શકો છો.
- "ઍક્શન" સૂચિમાંથી આગળ, ગૂગલ ઘોષણા ખોલો અને "સંક્રમણ" મૂલ્યને સેટ કરો. આવી પસંદગી તેને બનાવશે જેથી વપરાશકર્તા તમને ઇન્ટરનેટ પર આવશ્યક વિશિષ્ટ પૃષ્ઠ પર જાય.
- "પ્રાપ્તકર્તાની" તરીકે, એક સિંગલ "જીડબલ્યુડી-એડી" સંસ્કરણ પસંદ કરો.
- "ઓળખ" માં છેલ્લા તબક્કે. સૂચકાંકો »શૉર્ટકટની લિંકને તપાસો અને ઇચ્છિત પૃષ્ઠને સ્પષ્ટ કરીને" URL "ભરો. બચાવવા માટે "ઑકે" નો ઉપયોગ કરો.
સ્રોત કોડ સાથે કામ કરે છે
- જેમ આપણે ઉલ્લેખ કર્યો છે તેમ, ગૂગલ વેબ ડીઝાઈનરમાં બિલ્ટ-ઇન કોડ એડિટર શામેલ છે. તે ટોચની પેનલની જમણી બાજુ પર "કોડ" બટનનો ઉપયોગ કરીને સક્ષમ કરી શકાય છે.
- તમે ફક્ત વિઝ્યુઅલ એડિટરનો ઉપયોગ કરીને બૅનર માળખામાં ફેરફાર કરી શકો છો, પણ પ્રોજેક્ટ ફાઇલમાં કોડ સાથે સીધી રીતે કામ કરી શકો છો. જ્યારે નાના ઘટકોની ટોળું ગોઠવવું અથવા પ્રોગ્રામ દ્વારા પ્રદાન કરાયેલ ઇવેન્ટ્સ ઉમેરવા જ્યારે આ ખૂબ ઉપયોગી થઈ શકે છે.
વર્ણવેલ ક્રિયાઓ એપ્લિકેશનને ધ્યાનમાં લીધા વિના, બેનર બનાવવા માટે પૂરતી હોવી જોઈએ. તે જ સમયે, તમે આ સાધનોને સંયોજિત કરીને ક્ષમતાઓને નોંધપાત્ર રીતે વિસ્તૃત કરી શકો છો.
પગલું 3: સમાપ્તિ
જ્યારે બેનર પૂર્ણ થાય છે અને સાઇટ પર પ્લેસમેન્ટ માટે તૈયાર થાય છે, ત્યારે તમે છેલ્લા પગલા પર જઈ શકો છો. સૌ પ્રથમ, વાસ્તવિક વેબ પૃષ્ઠ પરનું તમારું કાર્ય કેવી રીતે લાગે છે તે ચકાસવું તે યોગ્ય છે.પૂર્વદર્શન
- ટોચની પેનલ પર, વધારાની મેનૂ ખોલવા માટે પૂર્વાવલોકન બટનને ક્લિક કરો. અહીં તમે બ્રાઉઝરને સ્પષ્ટ કરી શકો છો કે જેની સાથે બેનર ખોલવામાં આવશે.
- બધા કાર્યો ખોલતી વખતે અને બેનર દેખાવને સાચવવામાં આવે છે, પરંતુ કેટલીક સુવિધાઓ સાથે. ઉદાહરણ તરીકે, જો તમે એનિમેશનની અનંત પુનરાવર્તનને ઇન્સ્ટોલ કર્યું હોય, તો પણ બધું અહીં ફક્ત એક પુનરાવર્તન કરવામાં આવશે.
- જો જરૂરી હોય, તો તમે હંમેશાં અન્ય લોકોને પરિણામ દર્શાવી શકો છો. આ કરવા માટે, "શેરિંગ લિંક મેળવો" પસંદ કરો અને Google એકાઉન્ટની ઍક્સેસની પુષ્ટિ કરો.
પરિણામે, ઉપર વર્ણવ્યા પ્રમાણે આવા મોડમાં બેનરને જોવા માટે સ્ક્રીન પર એક લિંક દેખાશે. અલબત્ત, જો તમારી પાસે એકાઉન્ટ હોય તો જ શક્ય છે.
જાળવણી અને પ્રકાશન
- પ્રોજેક્ટને સાચવવા માટે, પહેલા ફાઇલ મેનૂ ખોલો અને સાચવો વિકલ્પનો ઉપયોગ કરો. તે પછી, સ્રોત ફાઇલ કમ્પ્યુટર પર સાચવવામાં આવશે અને પછીથી ખોલી શકાય છે.
- તમે પ્રોગ્રામના ઉપલા જમણા ખૂણામાં "પ્રકાશિત" મેનૂ ખોલીને અને સેવના સ્થાનોમાંથી એક પસંદ કરીને સાઇટ પર મૂકવા માટે એક પ્રોજેક્ટ તૈયાર કરી શકો છો.
- પ્રકાશન વિંડોમાં તમારા વિવેકબુદ્ધિથી, ફક્ત ઇચ્છિત ચેકબૉક્સને છોડીને પરિમાણોને બદલો, અને "પ્રકાશિત કરો" ને ક્લિક કરો. આ રીતે બચત પ્રોજેક્ટના કદને ધ્યાનમાં લીધા વિના ઝડપથી થાય છે.
પરિણામે, ફોલ્ડર સાચવેલી જગ્યાએ મળી શકે છે. સાઇટ પર બેનરની પ્લેસમેન્ટ સાઇટના નિર્ભરતામાં અલગ પડે છે અને સામાન્ય રીતે તે બનાવટની પ્રક્રિયાથી સંબંધિત નથી.