Multimedya Bileşenlerini Kullanmak

A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
7
Multimedya Bileşenlerini
Kullanmak
Macromedia Flash ve QuickTime filmleri gibi multimedya elemanları, sitenizde
sunduğunuz içeriği geliştirmenizde size yardımcı olabilir. Bu elemanları kullanarak
sitenizin ziyaretçilerine mesajınızı iletmek üzere sitenize animasyonlar ve videolar
ekleyebilirsiniz.
Bu derste Flash ve QuickTime filmlerini bir araya getiren Web sayfaları oluşturacaksınız.
Bu derste elde edilen sonucu görmek isterseniz, Lesson_07_Multimedia klasöründe
yer alan Completed alt klasöründeki index.html dosyasını açın.
Bu derste sayfalarınıza
multimedya elemanlarını
eklemeyi öğrenecek ve
buradakine benzer bir
sayfa oluşturacaksınız.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Farklı fontlara ve büyüklük değerlerine sahip metinleri hızlı bir şekilde oluşturmak
için Flash metinleriyle çalışacaksınız.
• Flash’tan düğme ve animasyon aktararak bunları sayfalarınıza ekleyeceksiniz
• Image Viewer’ı kullanarak bir slayt gösterisi hazırlayacaksınız.
• Sayfanıza bir QuickTime filmi ekleyeceksiniz.
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık yarım saat sürecektir.
Ders Dosyaları
Ortam Dosyaları:
Lesson_07_Multimedia/Images/Chakras.swf
Lesson_07_Multimedia/Images/Videos/
Başlangıç Dosyaları:
Lesson_07_Multimedia/index.html
Tamamlanmış Proje:
Lesson_07_Multimedia/Completed/
256 DERS 7
Flash Metni Oluşturmak
Sayfanıza bir konu başlığı eklerken metin kullanabilir ve bu başlığı bir şekilde gövde
metninden farklı olacak şekilde ayarlayabilirsiniz (örneğin bir heading etiketi olarak
biçimlendirerek) ya da bir resim oluşturarak bunu sayfanıza ekleyebilirsiniz. Metinlerin,
Web sayfalarında daha hızlı yüklenme gibi bir avantajı vardır, ama CSS ile kullanılsa
bile görünümle ilgili birtakım kısıtlamalar söz konusudur. Konu başlığı olarak resim
kullandığınızda eksik fontlarla ilgili sorunları çözebilirsiniz, ancak elinizin altında bir
resim programı olmayabilir veya istediğiniz resmi hazırlayacak vaktiniz olmayabilir.
Flash metinleri bu seçeneklerin her ikisinden de en iyi şekilde faydalanmanızı sağlar.
Bu şekilde, istediğiniz fontu kullanabilir ve metni doğrudan Dreamweaver içinde
oluşturabilirsiniz. Oluşturduğunuz metin küçük bir Flash dosyası olarak kaydedilir ve bu
dosyalar .SWF uzantısını kullanır.
Flash metinleri oluşturmak ve bunlarla çalışmak kolay ve hızlı bir yöntemdir,
ancak bu şekilde oluşturduğunuz bileşenleri sitenize eklemeden önce
ziyaretçilerin doğru eklentilere sahip olup olmayacağı konusunu iyice
düşünmeniz gerekmektedir.
1. Lesson_07_Multimedia klasöründeki index.html belgesini açın. Ekleme
noktasını belgenin üst kısmına yakın bir konumda bulunan Welcome to Yoga
Sangha metninin altında yeni, boş bir paragraf satırına yerleştirin. Insert araç
çubuğunun Common kategorisinde yer alan Media menüsüne tıklayın ve
menüden Flash Text’i seçin.
Flash ya da Flash Button seçeneklerine tıklamadığınızdan emin olun. Bu uygulamada
Flash metni oluşturma konusuyla ilgilidir. Flash seçeneği sayfanıza Flash filmleri
eklemenizi, Flash Button seçeneği de düğme oluşturmanızı sağlar. Bu seçeneklerin ikisi de
Flash metninden farklıdır.
Insert Flash Text iletişim kutusu açılacaktır.
Multİmedya Bİleşenlerİnİ Kullanmak 257
2. Aşağıda belirtilen seçenekleri anlatıldığı şekilde ayarlayın.
• Font menüsünden Comic Sans MS’i seçin. Eğer Comic Sans MS fontu yoksa başka bir
font seçin.
• Size metin alanına 22 yazın.
• Color kutusunu kullanarak #FFCC00 değerine sahip turuncu rengi seçin.
• Text penceresine Welcome to Yoga Sangha yazın.
• Rollover color (Rollover metni) alanına #FFFFCC yazın.
3. Save as metin alanına welcome.swf yazın ve ardından OK düğmesine tıklayın.
Insert Flash Text iletişim kutusu kapanacak, Flash metni belge penceresinde belirecek ve
Flash Accessibility Attributes iletişim kutusu açılacaktır.
258 DERS 7
Başlangıçta Save as metin alanına otomatik olarak varsayılan bir dosya adı
yazılacaktır. Bu varsayılan isim bir sayısal tanıtıcı ile birlikte oluşturulur (text1.
swf, text2.swf vs). Bu genel ismi, oluşturduğunuz Flash metni dosyasını
tanımlayacak bir isimle değiştirmeniz tavsiye edilir. Flash metninin
kaydedildiği varsayılan konum, bu Flash metnini eklediğiniz HTML
dosyasının bulunduğu klasördür. Dilerseniz başka bir klasöre de (örneğin
Resimler klasörüne ya da Ortam klasörüne) kaydedebilirsiniz.
4. Title metin alanına Welcome to Yoga Sangha yazın ve OK düğmesine tıklayın.
Buradaki diğer seçenekler Access key ve Tab index’tir (bunlarla ilgili ayrıntıları Ders 11’de
göreceksiniz). —Flash metni belgenizde belirecektir. Properties denetçisinde welcome.swf
Flash metin dosyasının niteliklerinin görüntülendiğine dikkat edin.
5. Belge penceresinde Flash metnini seçin ve tutamaçlardan birini sürükleyerek
metnin boyutlarını değiştirin.
Flash metnini hangi büyüklüğe getirdiğiniz önemli değildir. Bu, normal bir gövde
metni ya da bir Bitmap resmi değil de vektör tabanlı bir Flash metni olduğu için bunun
büyüklüğünü doğrudan belge penceresinde ayarlayabilirsiniz. Resim kalitesinde düşme
olacak diye endişelenmeden resmin boyutlarını istediğiniz gibi büyütebilir ya da
küçültebilirsiniz.
Dreamweaver’da resimleri yeniden boyutlandırabilirsiniz, ancak bu pek tavsiye edilmez,
çünkü çözünürlüğü ayarlayamazsınız. Fakat oluşturduğunuz Flash metni formundaki
resmi yeniden boyutlandırabilirsiniz, çünkü bu vektör tabanlı bir resimdir. Vektör tabanlı
resimler ölçeklendiğinde resmin bütünlüğünü korurlar, ama bitmap resimleri (GIF
dosyaları ve JPEG dosyaları gibi) bunu yapamaz.
Flash metnini yeniden boyutlandırırken boyut oranını korumak isterseniz
Shift tuşunu basılı tutun.
6. Artık Flash metninin üzerinde yer alan orijinal Welcome to Yoga Sangha
metnini silebilirsiniz. Dosyayı kaydedin ve Web tarayıcınızda önizleyin.
Metin, Dreamweaver’daki gibi görünecektir.
Flash metnine bir bağlantı ve rollover rengi de atayabilirsiniz. Properties
denetçisindeki Play düğmesi ile bu tür efektleri doğrudan Dreamweaver
içinde görebilirsiniz. Rollover’ları ve diğer etkileşimli elemanları Ders 8’de
göreceksiniz.
Multİmedya Bİleşenlerİnİ Kullanmak 259
Flash Metninde Değişiklik Yapmak
Dreamweaver’da Flash metni nesnelerini değiştirmek gayet basittir. Metni farklı bir
şekilde anlatma, farklı bir font kullanma ya da içerikte başka ayarlamalar yapma ihtiyacı
duyuyorsanız, bu metin nesnelerini değiştirmeniz gerekebilir.
1. Belge penceresinde Flash metnine çift tıklayın.
Metni seçemiyorsanız önce Properties denetçisindeki Stop düğmesine tıklayın.
Insert Flash Text iletişim kutusu açılacaktır.
2. Seçenekleri istediğiniz şekilde değiştirin ve yaptığınız değişikliklerin sonucunu
görmek için Apply düğmesine tıklayın. İşinizi bitirdiğinizde OK düğmesine
tıklayarak Insert Flash Text iletişim kutusunu kapatın.
Düzenlenmiş Flash metni sayfada yeniden oluşturulacak ve SWF dosyası güncellenecektir.
Flash Düğmeleri Eklemek
Metinler, düğmeler ve filmler gibi Flash nesnelerini kullanarak özel efektler elde
edebilirsiniz. Flash resimleri vektör tabanlı olduğundan bunların boyutu çok küçük
olabilir ve bu da eşdeğer normal resim dosyalarıyla karşılaştırıldığında bu resimlerin
kullanıcının Web tarayıcısına çok daha hızlı bir şekilde yüklenmelerini sağlar. Flash
metinlerine benzer şekilde, Flash düğmeleri oluşturmak için de bilgisayarınızda
Flash’ın yüklü olması gerekmez. Flash düğmelerini doğrudan Dreamweaver içinde
hazırlayabilirsiniz.
Flash düğmeleri, imlecin konumuna ve fare düğmesine basılıp basılmadığına bağlı olarak
çeşitli durumlarda bulunur. Göreceğimiz ilk durum, düğmenin imleç üzerinde değilken
sahip olduğu görünümüdür. İkinci durum, imleç düğmenin üzerine getirildiğinde, ama
farenin düğmesine basılmadığında ortaya çıkar. Üçüncü durum, imleç düğmenin üzerine
getirilip farenin düğmesine basılmasıyla oluşur. Dreamweaver’da bir dizi hazır düğme
stilini kullanarak Flash düğmeleri oluşturabilir ve bunların devamlılığını sağlayabilirsiniz.
1. index.html belge penceresinde, ekleme noktasını belgenin alt kısmına yakın bir
konumda yer alan Email:[email protected] satırının başına yerleştirin.
Bu sayfaya bir Flash düğmesi ekleyeceksiniz.
2. Insert araç çubuğunun Common kategorisindeki Media menüsüne tıklayın ve
Flash Button simgesini seçin.
260 DERS 7
Insert Flash Button iletişim kutusu açılacaktır.
3. Style listesinde aşağıya inerek Glass-Silver’ı seçin. Button text metin alanına
Email yazın. Font ve Size seçeneklerinin varsayılan ayarlarını değiştirmeyin:
Sırasıyla Verdana ve 12.
İletişim kutusunun üst tarafındaki Sample alanında düğme stilinin bir önizleme
görüntüsü oluşturulacaktır. İmleci bu örnek resmin üzerine getirerek nasıl çalıştığını
görebilirsiniz.
Gerekirse bu ayarlarda daha sonra değişiklik yapabilirsiniz. Bir sonraki uygulamada
bunun nasıl yapıldığını göreceğiz.
Bu uygulamada isteğe bağlı Link alanını boş bıraktığımıza dikkat edin.
4. Bg color metin alanına tıklayın ve #FFFFCC yazın.
Arka plan rengine ait #FFFFCC şeklindeki onaltılık tabanlı kod, bu düğmede
kullanılacak olan arka plan rengini temsil etmektedir. Düğmenin sayfanızın bir parçası
gibi görünmesini sağlamak amacıyla sayfanın arka planı için kullanılan rengin aynısını
seçersiniz.
Multİmedya Bİleşenlerİnİ Kullanmak 261
5. Save as metin alanına email-button.swf yazın, sonra da iletişim kutusunun sağ
üst kısmındaki OK düğmesine tıklayın. Flash Accessibility Attributes iletişim
kutusundaki Title alanına Email yazın.
Her zaman için Flash düğme dosyalarını adlandırmanız ve açık bir erişilebilirlik bilgisi
sağlamanız gerekir. Siz bunu yapmazsanız Dreamweaver düğmelerinize otomatik olarak
genel tipte isimler atar.
Siz ayarlarda değişiklik yaparken önizleme görüntüsü dinamik olarak
değişmez, sadece düğmenin stili görüntülenir. Değişiklikleri yaparken
düğmeyi görmek isterseniz Apply düğmesine tıklamanız gerekir. Bu durumda
değişiklikleri belge penceresinde görebilirsiniz.
Insert Flash Button iletişim kutusu kapanacak ve belgede sizin yaptığınız ayarlarla bir
düğme belirecektir. Yeni eklediğiniz için düğme seçili durumda olacaktır.
6. Düğme seçili durumdayken Properties denetçisindeki Play düğmesine tıklayın.
Play düğmesine tıkladığınızda belge penceresinde Flash düğmesine ait efektleri
görebilirsiniz. Düğme, Web tarayıcısındaki şekliyle belirecek ve seçim tutamaçları
kaybolacaktır. Play düğmesinin Stop düğmesine dönüştüğüne dikkat edin.
262 DERS 7
7. Belge penceresinde imleci Email düğmesinin üzerine getirin ve düğmeye tıklayın.
İmleç üzerine geldiğinde düğme rollover durumuna, tıklandığında da tıklanma durumuna
(farklı bir görünüm) geçecektir.
8. Properties denetçisindeki Stop düğmesine tıklayın. Dosyayı kaydedin ve Web
tarayıcınızda önizleyin.
Düğme, imlecin konumuna ve fare tıklamalarına göre Dreamweaver’da olduğu gibi durum
değiştirecektir.
Flash Düğmelerinde Değişiklik Yapmak
Düğme niteliklerinin birçoğunu istediğiniz zaman kolayca değiştirebilirsiniz.
1. Belge penceresinde yeni oluşturduğunuz Flash düğmesine çift tıklayın.
Insert Flash Button iletişim kutusu açılacaktır.
2. Flash düğmesinin ayarlarında değişiklikler yapın. Seçenekleri istediğiniz şekilde
ayarlayın.
Örneğin fontu Arial olarak değiştirebilirsiniz.
3. Değişiklikleri görmek için Apply düğmesine tıklayın. İşiniz bittiğinde OK
düğmesine tıklayın.
Flash kullanıp Dreamweaver dışında SWT Generator Template dosyaları oluşturarak Style
listesine kendi şablon düğmelerinizi ekleyebilirsiniz. Bu dosyaları Dreamweaver’a eklemek
için Dreamweaver program klasörünü açmanız ve dosyaları Configuration > Flash Objects >
Flash Buttons klasörüne yerleştirmeniz gerekir.
Flash Animasyonu Eklemek
Flash programını kullanarak vektör tabanlı resimler, animasyonlar ve filmler oluşturabilirsiniz.
GIF ya da JPEG dosyaları gibi bitmap tabanlı resimlerden farklı olarak, vektör tabanlı
resimlerde görüntülenen nesneleri ve resimlerin kendisini oluşturmak için matematiksel
formüller kullanılır.
Bitmap tabanlı resimlerde olduğu gibi belgelerinize Flash animasyonlarını da kolayca
ekleyebilirsiniz. Tabii bunun için söz konusu animasyonun mevcut olması gerekir. Bu tür
animasyonları doğrudan Dreamweaver içinde oluşturamazsınız, bunun için Flash kullanmanız
gerekir. Buradaki uygulamada kullanmanız için Flash’ta bir animasyon hazırlanmıştır.
1. Lesson_07_Multimedia klasöründeki chakras.html belgesini açın. Metnin üzerine
yeni bir paragraf ekleyin ve ekleme noktasını yeni satıra yerleştirin.
Paragraf sonu kullandığınızdan emin olun (satır sonu değil). Yeni bir metin bloğuna
ihtiyacınız olacak.
Multİmedya Bİleşenlerİnİ Kullanmak 263
2. Insert araç çubuğunun Common kategorisindeki Media menüsüne tıklayın ve Flash
simgesini seçin. Açılan Select File iletişim kutusunda Images/Chakras.swf dosyasını
seçin ve ardından Choose (Macintosh’ta) ya da Select (Windows’ta) düğmesine tıklayın.
Resimlerde olduğu gibi Assets panelini kullanarak belgelerinize Flash animasyonları da
ekleyebilirsiniz.
3. Object Tag Accessibility Attributes iletişim kutusundaki Title metin alanına chakras yazın.
Flash animasyonu sayfaya yerleştirilecektir.
4. Properties denetçisindeki Loop ve Autoplay seçeneklerinin işaretli olduğundan
emin olun. Animasyonu Dreamweaver’da izlemek üzere Play düğmesine tıklayın.
Animasyon dosyalarını Dreamweaver’da izlemek için Play düğmesine tıklayın. Test işlemi
bittikten sonra Stop düğmesine tıklayın.
Animasyonları seçim tutamaçlarını sürükleyerek yeniden boyutlandırabilirsiniz.
En boy oranını korumak için Shift tuşunu basılı tutun.
5. Properties denetçisindeki Stop düğmesine tıklayın. Dosyayı kaydedin ve Web
tarayıcınızda önizleyin.
Autoplay seçeneği, sayfa Web tarayıcısına yüklenir yüklenmez Flash animasyonunun
oynamaya başlamasına sebep olur. Properties denetçisindeki Loop seçeneğini işaretlediğiniz
için animasyon tekrar tekrar oynatılır.
Bir Flash animasyonu eklerken her zaman bir SWF dosyası seçtiğinizden emin olun.
FLA ya da SWT dosyası eklemeyin, çünkü bunlar Web tarayıcılarında görünmez.
264 DERS 7
Image Viewer’ın Kullanılması
Flash Elemanları sayfalarınıza hızlı bir şekilde etkileşim özellikleri eklemenizi sağlar.
Image Viewer adlı Flash elemanı, bir dizi resmi sunmak için kullanabileceğiniz bir slayt
gösterisi arabirimi oluşturur. Bu etkileşimli sunum formatı (Dreamweaver’da kolayca
yapılandırılabilir), slayt gösterisindeki her resim için bağlantı ve açıklama atama gibi pek
çok seçenek sunar.
Image Viewer, Dreamweaver 8’le birlikte gelen tek Flash elemanıdır. Daha
ileride Macromedia ya da üçüncü parti geliştiriciler tarafından ilave Flash
elemanları oluşturulabilir ve bunlar Macromedia’nın Web sitesi’ndeki
Developers Exchange bölümü aracılığıyla sunulabilir.
1. Lesson_07_Multimedia/about klasöründeki yogastudio.html dosyasını açın.
Insert araç çubuğunda Flash Elements kategorisini seçin ve Image Viewer
düğmesine tıklayın.
Save Flash Element iletişim kutusu açılacaktır.
2. Save as metin alanına yogastudio yazın ve dosyayı Lesson_07_Multimedia/
about klasörüne kaydedin.
Image Viewer Flash elemanı dosyası kaydedilecek ve Dreamweaver gerekli SWF uzantısını
otomatik olarak ekleyecektir. Eğer yeni yogastudio.swf dosyası Files panelinde hemen
belirmezse, dosya listesini güncellemek için panelin üst kısmındaki Refresh düğmesine
tıklayın.
Image Viewer belge penceresinde, ortasında Flash simgesi bulunan büyük gri bir yer
tutucu olarak belirecektir.
Multİmedya Bİleşenlerİnİ Kullanmak 265
3. Properties denetçisindeki Play düğmesine tıklayın.
Image Viewer şimdi belge penceresinde varsayılan ayarlarla görüntülenecektir. Image
Viewer’ın üst kısmında bir kontrol çubuğu göreceksiniz. Bu çubuk sol tarafta başlık için
bir boş alan, geçerli resmin numarasını görüntüleyen bir metin alanı (kullanıcı bir sayı
girerek farklı bir resme geçebilir) ve Geri, Oynat/Durdur ve İleri düğmelerini içerir.
Kontrol çubuğunun altında resim alanı yer alır.
4. Image Viewer’ı seçtiğinizde başlık çubuğundaki yazı Flash Element olarak
değişen Tag Inspector’da (Etiket Denetçisi), frameColor’ın karşısındaki renk
seçiciye tıklayın ve #666666 koduna sahip olan gri rengi seçin.
Image Viewer’la ilgili yapılandırma ayarlarının çoğunu Tag Inspector’da yapacaksınız. Tag
Inspector, Image Viewer devreye girdiğinde otomatik olarak açılır ve bu Flash elemanına
ait varsayılan başlangıç ayarlarını görüntüler.
Tag Inspector daraltılmış durumdaysa, onu tekrar genişletmek isterseniz
adının sol tarafındaki Genişletme/Toparlama düğmesine tıklayın. Tag
Inspector’ı ekranda görmüyorsanız Window > Tag Inspector komutunu seçin.
266 DERS 7
frameColor seçeneği, Image Viewer’ı çevreleyen kenarlığın rengini belirler. Kontrol
çubuğunda çeşitli gri tonları kullanılır. #666666 numaralı gri rengi daha koyu
tonlara karşılık gelir. Siz bir renk seçtikten sonra Flash elemanı otomatik olarak belge
penceresindeki yer tutucu resmine geçebilir. Aşağıdaki adımlarda, belge penceresinde
tekrar görünür hale getirmeden önce Image Viewer’ı yapılandırmaya devam edeceksiniz.
5. Menü düğmelerinin kullanılabilmesini sağlamak için önce Tag Inspector’da
frameShow seçeneğinin karşısındaki (No) değerine tıklayın. Ekrana gelen
menüye tıklayarak (Yes) seçeneğini işaretleyin.
frameShow seçeneği Image View’a ait kenarlık seçeneğini etkinleştirir.
Multİmedya Bİleşenlerİnİ Kullanmak 267
6. Tag Inspector’da frameThickness seçeneğinin değer alanına tıklayın ve
bu değeri 1 olarak değiştirin, sonra da değişikliği uygulamak için Return
(Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın. Image Viewer’ı tekrar
belge penceresinde görmek için Properties denetçisindeki Play düğmesine
tıklayın.
Kenarlığın genişliği bir piksel olacaktır. Ayrıca Image Viewer’ın etrafındaki gri dış hatta
dikkat edin.
Tag Inspector’daki bgColor seçeneğiyle tanımlanan Image Viewer’ın arka plan rengi
varsayılan durumda beyaz olarak ayarlanmıştır. Bu uygulamada arka plan rengini beyaz
olarak bırakmanız gerekiyor.
7. Tag Inspector’daki imageURLs seçeneğinin değer alanına tıklayın, sonra da
metin alanının sağında beliren Edit Array Values düğmesine tıklayın.
imageURLs seçeneği, Image Viewer’ın içereceği resimleri tanımlar. Bu seçeneği resimlerin
konumunu belirlemek için kullanmanız gerekiyor.
Flash elemanlarında görülen seri halindeki değerler dizi (array) olarak
adlandırılır. Image Viewer, dizileri resimler, resim açıklamaları ve URL
seçenekleri için kullanır.
268 DERS 7
Edit ‘imageURLs’ Array iletişim kutusu açılacaktır.
8. İmleç ilk öğeye ait satırın içindeyken onun sağında yer alan klasör simgesine
tıklayın. Select File iletişim kutusunu kullanarak Lesson_07_Multimedia/about/
Images klasörüne girin ve studio_photo.jpg dosyasını seçin.
Resimlere giden yolları temsil eden bu değerler tek tırnak içinde yazılacaktır. Image
Viewer’ın düzgün çalışabilmesi için bu tırnak işaretlerinin dahil edilmesi gerekir.
Eğer ilk açıldığında Edit ‘imageURLs’ Array iletişim kutusundaki Value
listesinde herhangi bir resim görüntüleniyorsa (‘img1.jpg’ şeklinde olabilir),
studio_photo resimlerini eklemeden önce tek tek seçip eksi (-) düğmesine
tıklayarak bu resmi ya da resimleri silin.
9. Yeni bir değer alanı eklemek için artı (+) düğmesine tıklayın ve studio_photo2.
jpg resmini seçin. Yeni değer alanları eklemeye devam ederek bunların
kaynaklarını studio_photo3.jpg, studio_photo4.jpg, studio_photo5.jpg, studio_
photo6.jpg ve studio_photo7.jpg olarak ayarlayın. OK düğmesine tıklayarak
Edit ‘imageURLs’ Array iletişim kutusunu kapatın.
Ekleme noktası son değer alanındayken Tab tuşuna basarak da listeye yeni
bir öğe ekleyebilirsiniz.
Şu anda Image Viewer’da yedi adet resim tanımlanmış olarak bulunmaktadır.
Multİmedya Bİleşenlerİnİ Kullanmak 269
10. Tag inspector’daki imageCaptions seçeneğinin değer alanına, ardından da
metin alanının sağında beliren Edit Array Values düğmesine tıklayın. Value
metin alanına ‘Yoga Sangha’ yazın (tekli tırnak işaretlerini yazdığınızdan emin
olun). Tab tuşuna basarak ya da (+) düğmesini kullanarak geri kalan resimler
için aynı resim açıklamasıyla altı yeni değer alanı daha ekleyin. OK düğmesine
tıklayın.
Resim değerlerindekine benzer şekilde Image Viewer’ın düzgün çalışabilmesi için
açıklamaların da tek tırnak içinde yazılması gerekir.
Resim açıklaması oluştururken kullanacağınız metinleri resimleri eklediğiniz sırayla
eklemeniz gerekir. Resimlerinizle açıklamaları aynı sırayla listelenmezse, açıklamalar (eğer
birbirlerinden farklı iseler) ve onlara karşılık gelen resimler doğru olarak eşleşmeyebilir.
Tag inspector’daki captionColor, captionFont ve captionSize seçeneklerini
kullanarak sırasıyla resim açıklamalarının rengini, font tipini ve büyüklüğünü
ayarlayabilirsiniz. Bu uygulama için resim açıklaması biçimlendirme
seçeneklerini varsayılan ayarlarında bırakmanız gerekiyor.
11. Tag inspector’daki Title seçeneğinin değer alanına tıklayın. Ardından metin
alanına Yoga Studio yazın ve Return (Macintosh’ta) ya da Enter (Windows’ta)
tuşuna basın. Image Viewer’ı belge penceresinde tekrar görüntülemek için
Properties denetçisindeki Play düğmesine tıklayın.
270 DERS 7
Başlık (Title) kontrol çubuğunun solundaki boşluğa yerleştirilecektir.
Tag Inspector’daki titleColor, titleFont ve titleSize seçeneklerini kullanarak
sırasıyla başlığın font rengini, font tipini ve büyüklüğünü ayarlayabilirsiniz. Bu
uygulama için başlık biçimlendirme seçeneklerini varsayılan ayarlarında
bırakmanız gerekiyor.
Varsayılan durumda resimler arasındaki geçişler Random, yani rasgele olarak
ayarlanmıştır. Geçiş efekti ayarını değiştirebilir ve transitionsType seçeneğinin değer
alanına tıklayarak buradaki menüden tekli bir geçiş efekti seçebilirsiniz. Bu uygulamada
geçiş ayarını Random olarak bıraktığınızda sayfayı bir Web tarayıcısında izlerken
veya Dreamweaver’da kontrol çubuğu düğmelerini kullanırken farklı geçiş efektlerini
görebilirsiniz.
Multİmedya Bİleşenlerİnİ Kullanmak 271
Belgenizin görünümü aşağıdaki örneğe benzeyecektir.
imageLinks seçeneğinin değer alanına, ardından da Edit Array Values
düğmesine tıklayarak resimlerle ilgili olarak bağlantı ekleme, değiştirme ya
da silme işlemlerini gerçekleştirebilirsiniz. Edit ‘imageLinks’ Array iletişim
kutusu, resimleri ve resim açıklamalarını ayarlarken kullandığınız iletişim
kutularına benzer. Her URL’in tek tırnak içinde yazılması gerekir. Yine resim
açıklamalarını eklerken olduğu gibi, bağlantıların doğru resimlerle
eşleşmesini sağlamak için bağlantıları da resimlerle aynı sırada eklemeye
dikkat etmeniz gerekir. Hedefler, bağlantıların nerede açılacağını tanımlar ve
imageLinkTarget seçeneğiyle ayarlanabilir. Varsayılan seçenek _blank’tir. Bu
seçeneği kullandığınızda bağlantılar yeni bir pencerede açılır.
12. Belge penceresinde Image Viewer dışında bir yere tıklayarak Image Viewer’ın
seçimini kaldırın. Belgeyi kaydedin, Web tarayıcınızda önizleyin ve Image
Viewer’ı test edin.
Web tarayıcısında izledikten sonra yogastudio.html belgesini kapatabilirsiniz.
Properties denetçisini kullanarak Image Viewer’ın büyüklüğünü
değiştirebilirsiniz.
272 DERS 7
Quicktime Filmlerini Gömmek
QuickTime, hem Macintosh’ta, hem de Windows’ta çalıştırılabilen, popüler, Internet’te
sıkça kullanılan bir video formatıdır. QuickTime filmleri basit birer video şeklinde de
olabilir, Flash elemanları ve 360 derecelik panorama görünümüne sahip etkileşimli QTVR
(QuickTime Virtual Reality) filmleri gibi etkileşimli elemanlar da içerebilir. QuickTime
filmlerini de Flash filmleri gibi kolayca ekleyebilirsiniz.
1. Lesson_07_Multimedia/explorations klasöründeki pose-demo.html dosyasını
açın ve ekleme noktasını belgedeki ilk üstbilginin altındaki boş satıra yerleştirin.
Insert araç çubuğunda Common kategorisini seçin, Media menüsüne tıklayın
ve Plugin’i seçin.
Dreamweaver QuickTime filmlerini birer eklenti (plug-in) olarak değerlendirir.
Select File iletişim kutusu açılacaktır. Bu kutu vasıtasıyla ilgili eklentiyi seçebilirsiniz.
2. Lesson_07_Multimedia/explorations/Videos/Yoga1.mov dosyasını bulun ve
Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayarak seçin.
Eklenti, 32x32 piksellik varsayılan büyüklük değeri ve <embed> etiketi kullanılarak sayfaya
gömülecektir. Eklentinin, belge penceresinde ortasında bir eklenti simgesi bulunan gri bir
kare olarak göründüğüne dikkat edin.
3. Eklenti seçili durumdayken Properties denetçisini kullanarak genişlik değerini
320, yükseklik değerini de 256 olarak değiştirin.
Multİmedya Bİleşenlerİnİ Kullanmak 273
İnternet’te kullanılmak üzere hazırlanan küçük QuickTime Web filmlerinin standart
boyutları 320 (genişlik) x 240 (yükseklik) pikseldir. QuickTime kontrolcüsünün yüksekliği
16 pikseldir. Bu yüzden filmin yüksekliğine 16 piksel eklemeniz gerekir. Film eklerken
kimi zaman filmlerin kırpılmış gibi göründüğü ya da kontrolcünün görünmediği
durumlarla karşılaşabilirsiniz. Böyle durumlarda genişlik ve yükseklik değerlerini
artırarak film için ayrılan alan miktarını artırmaya çalışın. Kendi filmlerinizi eklerken
filmin doğru boyutlarını kullandığınızdan emin olun ve kontrolcü için fazladan bir 16
piksel ekleyin.
4. Eklenti seçili durumdayken Properties denetçisindeki Parameters düğmesine
tıklayın.
Parameters iletişim kutusu açılacaktır.
5. Parameter sütununa tıklayın ve metin alanına controller yazın. Macintosh
kullanıcılarının Tab tuşuna bir kez, Windows kullanıcılarının ise iki kez basması
gerekir. true yazın ve OK düğmesine tıklayın.
Parametreler filmlerin özelliklerini tanımlar. True değeriyle bir controller parametresi
tanımladığınızda filmin altına QuickTime kontrolcüsünü dahil edersiniz. Bu değeri ya
True ya da False olarak ayarlayabilirsiniz. Kontrolcü için kullandığınızda True değeri
kontrolcünün etkinleştirilmesi, False değeri de kontrolcünün kapatılması anlamına gelir.
Bu parametreye True değerini atamazsanız ziyaretçileriniz kontrolcüyü göremeyebilir.
Ayarlayabileceğiniz diğer bir parametre autoplay’dir. Bu parametre, sayfa
yüklendikten sonra filmlerinizin hemen mi başlatılacağını, yoksa bunun
ziyaretçinin Play düğmesine basmasına mı bağlı olacağını belirler. Bu
parametreyi tanımlamak için Parameters listesine bir öğe eklemeniz gerekir.
Parameter metin alanına autoplay ve buna karşılık gelen değer alanına da
true ya da false yazın.
274 DERS 7
6. Belge penceresinde farklı bir yere tıklayarak eklentinin seçimini kaldırın.
Belgeyi kaydedin ve önizleyin.
Ziyaretçilerinize Web sitenizdeki materyali nasıl kullanacaklarını açıklamanız her zaman
için iyi bir alışkanlıktır.
Filmi Dreamweaver belge penceresinde görüntülemek için Properties denetçisindeki
Play düğmesine tıklayabilir ya da sayfayı Web tarayıcınızda önizleyebilirsiniz. QuickTime
filmlerinizi izleyebilmeniz için makinenizde QuickTime oynatıcısının (QuickTime
Player) kurulu olması gerekir. Apple’ın Web sitesinden (http://www.apple.com/quicktime)
QuickTime oynatıcısını ücretsiz olarak indirebilirsiniz.
pose-demo.html dosyasını kaydedip kapatabilirsiniz.
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Bir Flash metni oluşturdunuz (Sayfa 257–259).
• Flash metninde değişiklik yaptınız (Sayfa 260).
• Flash düğmeleri eklediniz ve bunların üzerinde değişiklik yaptınız (Sayfa 260–263).
• Bir Flash animasyonu eklediniz (Sayfa 263–264).
• Image Viewer aracını kullanarak bir slayt gösterisi oluşturdunuz (Sayfa 265–272).
• Sayfanıza bir QuickTime filmi eklediniz (Sayfa 273–275).
Multİmedya Bİleşenlerİnİ Kullanmak 275