aeyStudio.com
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
3 D Küb Yapımı
PSP - Rollover Image Yapımı
Paslı Zemin Yapımı
Efektler
Fireworks Kısa Yollar
PSP - Boru Yapımı
PSP - Arayüz Yapımı
Pixel Desenler (Pixel Patterns)
Filitreler
PSP - Image Map Hazırlama

Site Bilgileri
Sitede 27 kategoride, toplam 92 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.903
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / ImageReady / ImageReady Tanıtımı / ImageReady - Pencereler

ImageReady - Pencereler
RSS Feed: ImageReady - Pencereler (Dersler)
Eklenme Tarihi: 07.11.2005 - 19:50   (İzlenme: 69533)
Yorumları Oku (-)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır

Sayfalar:

ImageReady - Image Map Sekmesi
Üçüncü sıradaki "Image Map" sekmesini inceleyelim;

Buradaki Image Map'i açıklamaya bir örnek ile başlarsak; diyelim ki bir imajınız var, ancak bunu bölüp parçalara ayırıp, web sayfanızı hazırlama aşamasında HTML kodunu düzenlerken hücreler ayırıp, bu parçalarıda hücrelerin içine koymak istemiyorsunuz, yada bir manzara resmi vb. üzerinden bütünün bozmadan ama çeşitli yerlerinden başka sayfalara link vermek istiyorsunuz. İşte bu aşamada Image Map, bir nevi imajınızın haritasını çıkarmak için yardımınıza hazır, bekliyor. Konuyu daha anlamak için aşağıdaki örnek resmi inceleyelim:

"Image Map" Örnek Resmi.
İmaj Penceremizde, öncelikle beyaz zemin (background) üzerinde kırmızı renkte dikdörtgen şeklinde bir imajımız, üzerinde de üst kenara yakın ve seçili bir alan içinde "Ana Sayfa" yazısı ile alt kenarına ve yakın yine seçili ancak renkli bir alan içinde "ImageReady" yazısını görüyoruz.
İşte bu seçili alanlar, imaj üzerinden link verebileceğimiz alanlardır. Örneğimizdeki üstteki seçili alandan, web sayfamızın "Ana Sayfa"sına, alttaki seçili alandan da "ImageReady" konusu ile ilgili sayfasına link verdik.
Daha iyi anlamak için, bu imajı nasıl hazırladığımızı görelim; Öncelikle evvelce "ImageReady-Penceler.PSD" isimli ve PSD formatında kaydettiğimiz imajımızı açtık.
Sonra Layer Penceresine gidip, yeni bir Layer yarattık (Layer 1).
Daha sonra, Araç Kutusundan Marquee Tool'u seçip , bir dikdörtgen çizdik. Swatches' dan seçtiğimiz kırmızı renge "Paint Bucket Tool" (G) ile bu dikdörtgenimizi içine tıklayarak boyadık .
Şimdi artık "imaj haritamızı" çıkarabiliriz:Tekrar Araç Kutusuna gidip, buradan "Rectangle Image Map Tool" (P) 'u seçtik. Layer 1 deki kırmızı renkli dikdörtgenmizin üst kenarına yakın bir yerden yine bir dikgörtgen şeklinde çizerek seçili alan olan ilk "Image Map" imizi yarattık. Araç Kutusundan "Type Tool" (T) ' ile ilk Image Map 'in içine "Ana Sayfa" yazdık.
Daha sonra tekrar Araç Kutusundan "Rectangle Image Map Tool" (P) 'u seçip yukarıda anlattığımız yolu izleyerek ancak ilki ile karışmaması için bu defa kırmızı imajımızın altına doğru ikinci Image Map'imizi de yaratarak içine "ImageReady" yazdık.
İmajımızda, üzerinde işlem yapacağımız Image Map'leri Araç Kutusundaki, "Image Map Select Tool" ' adlı Seçim Aracı ile seçerek tespit ediyoruz. İşlem yapmak üzere ile seçtiğimiz Image Map, yukarıdaki örnek remimizde de görüleceği gibi kenar ve köşelerinde küçük kareler olan seçim çizgileri ile belirleniyor, seçilmeyenler ise "Hoop...Burada bir Image Map var!.." diyerek kenarları renkli bir alan olarak kalıyor.
Artık bu iki adet Image Map seçili alanlarına link vermeye sıra geldi.
Önce üzerinde "Ana Sayfa" yazılı ImageMap_01 isimli alanımıza ait olan ve sayfanın üst tarafındaki "Image Map Penceresi Görünümü" resmimizde gösterilen Image Map Penceresindeki boş alanları dolduralım. Burası tamamen HTML kodu yaratmaya yarar. Name: İsteğinize bağlı olarak bir isim verebilirsiniz. Biz aynen bıraktık. URL: link vereceğiniz adresin URL sini yazın. Target: Link verdiğiniz adrese ait web sayfasının nasıl açılmasını istediğinizi belirliyebilirsiniz (_blank,_ self, _parent, _top). Alt:Mouse üzerine gelince belirecek olan açıklamayı yazabilirsiniz. Dimensions Bölümü: Link verdiğimiz seçili alanların pixel cinsinden ölçüleridir. X:Seçili alanın, İmaj Penceresinin sol kenarından uzaklığını, Y: Seçili alanın, İmaj Penceresinin üst kenarına olan uzaklığını, W:Seçili alanın enini, H: Seçili alanın yüksekliğini belirler.
Hepsi bu kadar, artık ayarlarınız da tamamsa, Varsayılan -Default- Browser'ınızda , Java Script kodu ile beraber "Image Map" özelliğini görebilirsiniz.
*İleride tekrar kullanmak üzere, "ImageReady-Penceler.PSD" isimli imajımızı File > Save (Ctrl+S) ile PSD Formatında kaydedelim.

Alanların seçimini animasyonda görmek için Tıklayın!





Yazan: Yorum:
Bu ders için yorumlar yok

RSS Feed: ImageReady - Pencereler (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar