Multimedya Bileşenlerini Kullanmak
Transkript
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:info@yogasangha.com 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