dreamweaver-rollover-resimlerilecalismak

Dreamweaver ve Rollover Resimler İle Çalışmak

Çok resmi oldu biraz basitleştirirsek fareyle bir resmin veya linkin üzerine gittiğinizde başka bir resmin görünmesi olayıdır.Rollover kavramını bu şekilde açıkladıktan sonra bir örnekle olayı pekiştirelim, bir rollover resim eklemek için;

Yeni bir doküman açın bunu kaydedin. Arkasından bu dokümanı kaydettiğiniz dizinle aynı dizine ya da alt dizinlerinden birine (images/ klasörü olabilir mesela) kullanacağınız rollover image için gerekli resim dosyalarını kaydetmelisiniz. İki adet resim dosyasına ihtiyacımız var; Orginal image ve rollover image.

Resim dosyalarımızı hazırladıktan sonra rollover image operasyonuna başlayabiliriz;

Insert panelden "Common" sekmesi altında yer alan Image düğmesinin bir alt düğmesi olan Rollover image düğmesine yada Insert / Image Object / Rollover image menüsü ile Rollover image iletişim penceresini açıyoruz.

 

Dreamweaver Insert Panelden Rollover Image düğmesine tıklıyoruz

Insert Panelden Rollover Image düğmesine tıklıyoruz

Şimdi ayarları yapmaya başlıyoruz, sırasıyla;

Dreamweaver Insert Rollover Image iletişim penceresi

Insert Rollover Image iletişim penceresi


 

  • İmage Name: Rollover image objesine bir isim vermek zorundayız. Buna spesifik bir isim verebilirsiniz fakat çok da önemli değil DW bizim için zaten bir isim vermiş. Eğer sayfa içerisinde çok fazla rollover resim kullandıysanız anlamlı isimler kullanmak işleri kolaylaştırabilir.

  • Orginal image: Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz. Bu resim linkimizin asıl resmini teşkil ediyor. Yani, fare imleci linkin üzerinde değilken görünecek resim.

  • Rollover image: Bu ise fare imleci linkin üzerine gittiğinde görünecek resmi ifade ediyor.

  • Preload Rollover image: Rollover resimlerin yüklenmesi uzun sürebilir ve bu süre zarfında ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak rollover image arka planda yükleninceye kadar, orginal image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun ortadan kalkmış olur.

  • Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen yazı, açıklama vs...

  • When Clicked Goto URL: Eğer rollover resmimize link vermek istiyorsak buraya ilgili dosyanın adresini yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.

 

Orgina image ve Rollover image resim dosyalarının adresleri yine resim ekleme konusunda anlatılan ilkeler doğrultusunda olmalıdır.

Tüm ayarları uygun şekilde yaptıktan sonra OK diyip rollover resmimizi sayfamıza dâhil edebiliriz. Rollover resimler DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test edebilirsiniz.

 

Dreamweaver Örnek bir rollover image çalışmasının görünümü

Örnek bir rollover image çalışmasının görünümü


 

 

Rollover image ve Orginal image dosyaları arasında bir bütünlük olması çoğu zaman çok profesyonel etkiler ortaya çıkmasına sebep olabilir. Örneğin yazı renklerinin veya arka fon renklerinin değişmesi veya nesnelerin deforme olması her zaman için iyi bir izlenim bırakan efektlerdir.

Navigation Bar kullanımı

Sitenizde ziyaretçilerin kolayca dolaşabilmeleri ve aradıkları bölümü rahatça bulabilmeleri için bir navigasyon menüsü kullanmak en mantıklı çözümdür. Bu menüyü sadece tablo ve text-linkleri kullanarak yapabileceğiniz gibi göze daha hoş görünmesi adına resim ve/veya rollover resimler ile de yapabilirsiniz.

Eğer navigasyon menüsü için rollover tabanlı bir çözüm düşünüyorsanız her link için ayrı ayrı rollover resim eklemek zor olacaktır. Bu gibi durumlarda DW'ın kullanışlı araçlarından biri olan Insert Navigation Bar'ı kullanabilirsiniz.

Navigation bar kullanmak için;

Yeni bir doküman açın ve kaydedin. Rollover resimler ile çalışırken yaptığımız gibi resim dosyalarını önceden hazırlamış olmamız gerekmektedir. Hazırlanması gereken resimler şu şekilde sıralanabilir;

  • Up image: Rollover resimlerde gördüğümüz Orginal image ile aynı işleve sahip resim dosyasını belirtir. Yani fare imleci linkin üzerinde değilken görünene resim.

  • Over image: Fare imleci linkin üzerine geldiğinde görünecek resmi belirtir.

  • Down image: Fare ile linke tıklandığı anda görünecek resmi belirtir. (Genelde Over image deki ile aynı dosyayı kullanmak iyi bir sonuç verir fakat farklı da olabilirler)

  • Over While Down Image: Bu ise Over Image'in linke tıklandıktan sonraki versiyonu diyebiliriz. Yani diyelim ki linke bir kez tıklandı ve tıklandığı anda Down Image devreye girdi, işte bundan sonra Over image devre dışı kalacağından onun yerini bu dosya alır yani işlevi Over image ile aynıdır.

Yeri gelmişken belirtelim Down image ve Over While Down Image, Frame kullanılarak yapılmış navigasyon menülerinde bir işleve sahiptir. Yani navigasyon menüsünün sabit kaldığı ve değişmediği durumlar için geçerlidir.

 

Resim dosyalarını isimlendirirken son ekler kullanmak işleri oldukça kolaylaştıracaktır. Örneğin navigasyon barın ana sayfa linki için;

Up image: menu_anasayfa_a.gif
Over image: menu_anasayfa_b.gif
Down image: menu_anasayfa_c.gif
Over While Down Image: menu_anasayfa_d.gif

Gibi bir isimlendirme ile karışıklıklardan kurtulabilirsiniz.

Dosyalarımız da hazırsa navigation menümüzü yapalım. Insert paneldeki Image düğmesinin bir alt düğmesi olan Navigation Bar düğmesi veya Insert / Image Object / Navigation Bar menüsü ile sayfanıza navigasyon menüsü eklemeye başlayabilirsiniz.

 

Insert panelden Navigation Bar düğmesine tıklıyoruz

Insert panelden Navigation Bar düğmesine tıklıyoruz


 

Şimdi ayarları yapmaya başlıyoruz, sırasıyla;

 

Insert Navigation Bar iletişim penceresi

Insert Navigation Bar iletişim penceresi


 

  • Nav. Bar Elements: Navigasyon menüsü öğelerini belirtir. Buradan + ve - düğmelerini kullanarak yeni bir öğe ekleyebilir ya da çıkarabilirsiniz. Düzenlemek istediğiniz öğenin üzerine tıklamanız yeterli olacaktır.

  • Element Name: Her öğenin bir ismi olmalıdır. Buraya öğeyi en iyi tanımlayan ismi girmelisiniz. Boşluk ve Türkçe karakter kullanmamaya dikkat etmelisiniz.

  • Up, Over, Down, Over While Down image'lerin neler olduğunu yukarda belirtmiştik. Uygun resimleri seçmelisiniz.

  • Altermate Text: Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile gidildiğinde görünen yazı, açıklama vs...

  • When Clicked Goto URL: Eğer elemente link vermek istiyorsak buraya ilgili dosyanın adresini yazabiliriz yada "Browse..." a tıklayıp dosya seçebiliriz.

    • ..in: Bu kısım Target kısmıdır. Kullandığınız Framelere göre bunu nasıl düzenleyeceğiniz Frame konusunda ayrıntılı bir biçimde anlatılmıştır.

  • Options

    • Preload images : Rollover resimlerin yüklenmesi uzun sürebilir, ve bu süre zarfında ziyaretçi linkin üzerinde fare ile gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği kullanarak Over image arka planda yükleninceye kadar, Up image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun ortadan kalkmış olur.

    • Show Down Image Initialy: Bir öğeye tıklandığında ziyaretçinin hangi sayfayı gezdiğini vurgulamak için bu seçeneği kullanabiliriz. Örneğin ziyaretçi linkler kısmını gezerken Linkler elementinin Down image gösterilmelidir ki, ziyaretçi o anda gezdiği sayfanın linkler sayfası olduğunu anlayabilsin. Eğer Frame kullanmıyorsanız bu seçenek ile navigasyon menüsü eklediğiniz sayfaya ait elemente tıklayıp bu seçeneği işaretlerseniz bu sayfada bu sayfaya ait elementin Down image'i varsayılan olarak yüklenecektir. Bu şekilde anlatınca biraz karışık oluyor fakat bir örnek yapıp daha iyi anlayabilirsiniz.

  • Insert : Horizontaly (yatay) - Verticaly (dikey) burada navigasyon menüsünün yatay mı yoksa dikey mi olacağını belirtiyoruz.

  • Use Table: her zaman işaretli kalması gereken bir noktadır. Menünün daha düzgün görünmesini sağlayacaktır.

 

Eğer baştan Show Down Image Initialy seçeneğini işaretlemeyi unuttuysanız Nav barı ekledikten sonra ilgili elementin üzerine bir kez tıklayıp Behaviors Panelden / Set Nav Bar Image seçeneğini kullanabilirsiniz.

Tüm ayarları uygun bir biçimde yaptıysanız OK diyip vanigasyon barınızı sayfaya dahil edebiliriz. . Menü resimleri DW içinde sabit görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test edebilirsiniz.

 

Her sayfada sadece bir Nav. Bar kullanabilirsiniz. Önceden eklediğiniz bir Nav. Bar üzerinde değişiklik yapmak için; tekrar Insert / Oöage Objects / Navigation Bar menüsü ile yeni bir nav. Bar ekliyormuş gibi yapmalısınız. DW size "Each page can only have one Navigation Bar, an done already exist on this page Would you like to modify the existing one?" şeklinde sayfada zaten var olan nav. Barı düzenlemek isteyip istemediğiniz soracaktır. Buna olumlu yanıt vererek önceden eklediğiniz nav. Barı düzenleyebilirsiniz.

 

Her sayfada sadece bir navigasyon menüsü olabilir

Her sayfada sadece bir navigasyon menüsü olabilir





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: Eric Jones( ericjonesmyemailgmail.com ), 28.07.2022, 01:51 (UTC):
My name_s Eric and I just found your site tr.gg.

It_s got a lot going for it, but here_s an idea to make it even MORE effective.

Talk With Web Visitor _ CLICK HERE https://boostleadgeneration.com for a live demo now.

Talk With Web Visitor is a software widget that_s works on your site, ready to capture any visitor_s Name, Email address and Phone Number. It signals you the moment they let you know they_re interested _ so that you can talk to that lead while they_re literally looking over your site.

And once you_ve captured their phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation_ and if they don_t take you up on your offer then, you can follow up with text messages for new offers, content links, even just _how you doing?_ notes to build a relationship.

CLICK HERE https://boostleadgeneration.com to discover what Talk With Web Visitor can do for your business.

The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today!

Eric
PS: Studies show that 70% of a site_s visitors disappear and are gone forever after just a moment. Don_t keep losing them.
Talk With Web Visitor offers a FREE 14 days trial _ and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now_ don_t keep them waiting.
CLICK HERE https://boostleadgeneration.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://boostleadgeneration.com/unsubscribe.aspx?d=tr.gg

Yorumu gönderen: Eric Jones( ericjonesmyemailgmail.com ), 21.07.2022, 23:35 (UTC):
My name_s Eric and I just came across your website - tr.gg - in the search results.

Here_s what that means to me_

Your SEO_s working.

You_re getting eyeballs _ mine at least.

Your content_s pretty good, wouldn_t change a thing.

BUT_

Eyeballs don_t pay the bills.

CUSTOMERS do.

And studies show that 7 out of 10 visitors to a site like tr.gg will drop by, take a gander, and then head for the hills without doing anything else.

It_s like they never were even there.

You can fix this.

You can make it super-simple for them to raise their hand, say, _okay, let_s talk_ without requiring them to even pull their cell phone from their pocket_ thanks to Talk With Web Visitor.

Talk With Web Visitor is a software widget that sits on your site, ready and waiting to capture any visitor_s Name, Email address and Phone Number. It lets you know immediately _ so you can talk to that lead immediately_ without delay_ BEFORE they head for those hills.

CLICK HERE http://boostleadgeneration.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

Now it_s also true that when reaching out to hot leads, you MUST act fast _ the difference between contacting someone within 5 minutes versus 30 minutes later is huge _ like 100 times better!

That_s what makes our new SMS Text With Lead feature so powerful_ you_ve got their phone number, so now you can start a text message (SMS) conversation with them_ so even if they don_t take you up on your offer right away, you continue to text them new offers, new content, and new reasons to do business with you.

This could change everything for you and your business.

CLICK HERE http://boostleadgeneration.com to learn more about everything Talk With Web Visitor can do and start turing eyeballs into money.

Eric
PS: Talk With Web Visitor offers a FREE 14 days trial _ you could be converting up to 100x more leads immediately!
It even includes International Long Distance Calling.
Paying customers are out there waiting.
Starting connecting today by CLICKING HERE http://boostleadgeneration.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://boostleadgeneration.com/unsubscribe.aspx?d=tr.gg

Yorumu gönderen: Eric Jones( eric.jones.z.mailgmail.com ), 12.07.2022, 19:24 (UTC):
Good day,

My name is Eric and unlike a lot of emails you might get, I wanted to instead provide you with a word of encouragement _ Congratulations

What for?

Part of my job is to check out websites and the work you_ve done with tr.gg definitely stands out.

It_s clear you took building a website seriously and made a real investment of time and resources into making it top quality.

There is, however, a catch_ more accurately, a question_

So when someone like me happens to find your site _ maybe at the top of the search results (nice job BTW) or just through a random link, how do you know?

More importantly, how do you make a connection with that person?

Studies show that 7 out of 10 visitors don_t stick around _ they_re there one second and then gone with the wind.

Here_s a way to create INSTANT engagement that you may not have known about_

Talk With Web Visitor is a software widget that_s works on your site, ready to capture any visitor_s Name, Email address and Phone Number. It lets you know INSTANTLY that they_re interested _ so that you can talk to that lead while they_re literally checking out tr.gg.

CLICK HERE http://boostleadgeneration.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

It could be a game-changer for your business _ and it gets even better_ once you_ve captured their phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation _ immediately (and there_s literally a 100X difference between contacting someone within 5 minutes versus 30 minutes.)

Plus then, even if you don_t close a deal right away, you can connect later on with text messages for new offers, content links, even just follow up notes to build a relationship.

Everything I_ve just described is simple, easy, and effective.

CLICK HERE http://boostleadgeneration.com to discover what Talk With Web Visitor can do for your business.

You could be converting up to 100X more leads today!

Eric
PS: Talk With Web Visitor offers a FREE 14 days trial _ and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now_ don_t keep them waiting.
CLICK HERE http://boostleadgeneration.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://boostleadgeneration.com/unsubscribe.aspx?d=tr.gg

Yorumu gönderen: Eric Jones( eric.jones.z.mailgmail.com ), 25.06.2022, 06:38 (UTC):
Hi, my name is Eric and I_m betting you_d like your website tr.gg to generate more leads.

Here_s how:
Talk With Web Visitor is a software widget that_s works on your site, ready to capture any visitor_s Name, Email address and Phone Number. It signals you as soon as they say they_re interested _ so that you can talk to that lead while they_re still there at tr.gg.

Talk With Web Visitor _ CLICK HERE https://jumboleadmagnet.com for a live demo now.

And now that you_ve got their phone number, our new SMS Text With Lead feature enables you to start a text (SMS) conversation _ answer questions, provide more info, and close a deal that way.

If they don_t take you up on your offer then, just follow up with text messages for new offers, content links, even just _how you doing?_ notes to build a relationship.

CLICK HERE https://jumboleadmagnet.com to discover what Talk With Web Visitor can do for your business.

The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today!

Try Talk With Web Visitor and get more leads now.

Eric
PS: The studies show 7 out of 10 visitors don_t hang around _ you can_t afford to lose them!
Talk With Web Visitor offers a FREE 14 days trial _ and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now_ don_t keep them waiting.
CLICK HERE https://jumboleadmagnet.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://jumboleadmagnet.com/unsubscribe.aspx?d=tr.gg

Yorumu gönderen: Eric Jones( eric.jones.z.mailgmail.com ), 25.06.2022, 06:17 (UTC):
Hello, my name_s Eric and I just ran across your website at tr.gg...

I found it after a quick search, so your SEO_s working out_

Content looks pretty good_

One thing_s missing though_

A QUICK, EASY way to connect with you NOW.

Because studies show that a web lead like me will only hang out a few seconds _ 7 out of 10 disappear almost instantly, Surf Surf Surf_ then gone forever.

I have the solution:

Talk With Web Visitor is a software widget that_s works on your site, ready to capture any visitor_s Name, Email address and Phone Number. You_ll know immediately they_re interested and you can call them directly to TALK with them - literally while they_re still on the web looking at your site.

CLICK HERE https://jumboleadmagnet.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works and even give it a try_ it could be huge for your business.

Plus, now that you_ve got that phone number, with our new SMS Text With Lead feature, you can automatically start a text (SMS) conversation pronto_ which is so powerful, because connecting with someone within the first 5 minutes is 100 times more effective than waiting 30 minutes or more later.

The new text messaging feature lets you follow up regularly with new offers, content links, even just follow up notes to build a relationship.

Everything I_ve just described is extremely simple to implement, cost-effective, and profitable.

CLICK HERE https://jumboleadmagnet.com to discover what Talk With Web Visitor can do for your business, potentially converting up to 100X more eyeballs into leads today!

Eric
PS: Talk With Web Visitor offers a FREE 14 days trial _ and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now_ don_t keep them waiting.
CLICK HERE https://jumboleadmagnet.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://jumboleadmagnet.com/unsubscribe.aspx?d=tr.gg



Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Siten:
Mesajınız:

İletişim: msn076@hotmail.com
 
www.capkin-power.tr.gg
 
Buqün 42 ziyaretçi (78 klik) Ziyaret etti
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol