5. ÇOKLU ORTAMBİLEŞENLERİ
5.1 Animasyon Ekleme
5.1.4. Param Eklemek
Shockwave ve SWF dosyalarını, ActiveX denetimlerini ve Java uygulamalarını denetlemek için özel parametreler tanımlanabilir. Parametreler farklı nesne türlerine ait özel nitelikleri ayarlar. Object, embed ve applet etiketleriyle kullanılır.
Parametre eklemek için sayfada parametreler içerebilecek nesne (Shockwave filmi, ActiveX denetim) seçilir. Daha sonra Ortak menü grubu içinde yer alan Ortam açılır menüsünden Param seçeneği seçilir.
50
DEĞERLER ETKİNLİĞİ
İnternet bağımlılığı konusunda sekiz kriterden beşini yaşayanların internet bağımlısı olarak tanımlanmaktadır. Aşağıdaki maddeleri okuyarak internet konusundaki durumunuzu tespit ediniz. İnternette uzun süre vakit geçirmenin sorumluluklarımızı aksatması konusunda düşüncelerinizi arkadaşlarınızla paylaşınız.
1. Zihnin sürekli olarak internette olup bitene takılı kalması. Günlük aktiviteleri ve sorumlulukları aksatacak şekilde internet ile ilgili aşırı zihinsel uğraşı olması ve dikkati başka yere vermekte zorlanma.
2. İnternette kalma süresinin giderek artması ile daha fazla oranda internet kullanma ihtiyacı duyma.
3. İnternet kullanımını kontrol etme, azaltma ya da tamamen bırakmaya yönelik başarısız girişimlerin olması.
4. İnternet kullanımının azaltılması ya da tamamen bırakılması durumunda huzursuzluk, moral bozukluğu ya da sinirlilik, dikkat dağınıklığı, motivasyon düşüklüğü, isteksizlik, titreme, terleme gibi duygu durum değişikliği yaşama.
5. “Birkaç şeye bakacağım, 1 saati geçmez.” gibi düşünceler ile başlayıp internette kalma süresinin başlangıçta planlanandan daha uzun sürmesi.
6. Aşırı internet kullanımı nedeniyle aile, okul, iş ve arkadaş çevresiyle sorunlar yaşama.
İlişkilerin bozulması, sosyal hayattan uzaklaşma.
7. “Daha 1 saat bile olmadı, yeni başladım” gibi internette kalma süresi konusunda çevresindekilere yalan söyleme.
8. Aile, okul, ikili ilişkiler, maddi sorunlar, sorumluluklar gibi alanlarda yaşanan sıkıntılardan, problemlerden, olumsuz duygulardan uzaklaşmak için internette vakit geçirme.
DEĞERLER ETKİNLİĞİ
51
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( ) Shocwave’in uzantısı “.swf” dir.
2. ( ) Activex internette kullanılan bir video oynatıcısıdır.
3. ( ) Sayfamızda bulunan resmi harici bir resim düzenleme editöründe düzenleyemeyiz.
4. ( ) Web sayfasına ses dosyası eklemek için Common menü grubu içindeki Media açılır menüsünün altında bulunan Plugin düğmesine tıklarız.
5. ( ) Flash video dosyalarının uzantısı Jpg dir.
ÖLÇME VE DEĞERLENDİRME
52
ÖĞRENME FAALİYETİ–6 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla web sayfası içine yerleştirilen ögeler üzerinde bağlantılar oluşturur.
ARAŞTIRMA
Web sitesinde site haritasının ne olduğunu araştırınız.
6. LİNK (BAĞLANTI) İŞLEMLERİ
Bağlantılar sayesinde hazırlanan birçok sayfa birbirleriyle ilişkili hâle getirilebilir. Bir tıklama ile istenilen yere gidilebilir. Bu sayede tasarlamış olan sayfalar arasında ve sayfa içinde istendiği gibi dolaşılabilir. Link işlemleri 4 farklı kategoride toplanabilir.
Site içerisindeki farklı sayfalara link verme
Web sayfası içerisindeki farklı alanlara link verme
Site dışına link verme
E-mail adreslerine link verme
6.1 Metinlere Bağlantı Ekleme
Köprü oluşturmak için ilgili metin veya nesneyi fare ile seçtikten sonra Properties penceresindeki Link alanına adres girişi yapılması gerekir.
Görsel 6.1 Metne link verme
Link verilecek sayfanın ismi ve uzantısı buraya yazıldıktan sonra enter tuşu ile link verilmiş olur.
Hazırlanan web sitesi çok fazla sayfadan oluşuyor ve link verilecek sayfanın ismi hatırlanmıyor ise farklı yollarla da link verme işlemi yapılabilir.
1.Yol: Daha önceki konularda site tanımlama işlemini anlatılmıştı. Tanımlaması yapılan bir web sitesi tasarımında link verme işlemi oldukça kolaylaşmaktadır. Sağ tarafta
ÖĞRENME FAALİYETİ–6
53
bulunan panellerden files paneli web sitesinin tüm dosya yapısı tutulmaktadır. Buradan link vermek istenen sayfa link alanının üzerine getirilerek otomatik şekilde link verme işlemi yapılmış olur.
Görsel 6.2 Metne link verme yöntem-1
2.Yol: Link vermek için diğer bir yöntem de properties panelindeki Point-to-File aracı ile link verme işlemidir. Bunun için Point-to-File aracının üzerinde Mouse sol tuşuna basılı tutarak hareket ettirildiğinde Mouse imlecinin olduğu yere kadar bir ok işareti çıkar. Bu ok işaretini istenen dosyanın üzerine götürülüp bırakıldığında link verme işlemi otomatik gerçekleşmiş olur.
Görsel 6.3 Metne link verme yöntem-2
NOT: Eğer site dışında başka bir siteye link verilmek isteniyorsa yine Link alanına sitenin tam adresi yazılmalıdır. Örneğin, http://www.meb.gov.tr
6.2. Bağlantı Özelliklerini Düzenleme
Sayfadaki bağlara ait yazı tipi, renk ve stil düzenlemeleri Page Properties penceresinde bulunan Link (CSS) alanından yapılabilir.
Burada yapılan düzenlemeler sayfadaki tüm linkleri etkiler. Farklı linklere farklı özelikler vermek isteniyorsa ileriki konularda görülecek CSS kullanılarak özellik verilmelidir.
54
Görsel 6.4 Link(bağlantı) özelliklerini ayarlama penceresi
Link Font: Bağlantı verilen Text’lerin (metin) Font tipinin ayarlandığı bölümdür. Eğer burada farklı font vermek istenmiyorsa bu alan ve size alanı boş geçilebilir.
Link Color: Sayfa ilk yüklendiğinde ve verilen link henüz kullanıcı tarafından tıklanmadığında bağlantıların göründüğü renk.
Rollover Links: Kullanıcı imleci linkin üzerine getirdiğinde linkin alacağı renk.
Active Links: Kullanıcı linke tıkladığı anda linkin alacağı renk. Bu kısım genelde rollover link ile aynı renkte seçilir.
Underline Style: Varsayılan olarak, bir web tarayıcısında görüntülenen bağlantıların altı çizilidir. Çoğu tasarımcı, Never Underline’yi (Asla Altını Çizme) seçerek bağlantılı metin altında otomatik olarak görünen alt çizgiyi kaldırmayı tercih eder. Ziyaretçilere alt çizginin görsel ipucu verilebilir. Show underline only rollover (Linkin üzerine gelince altını çiz) en çok tercih edilen link verme şeklidir.
6.3. Bağlantı Adreslerinin Açılış Şekilleri
Web tasarım editörü ile oluşturulan sayfalardaki bağlar ile açılacak olan sayfanın
açılış şekli Properties penceresinde bulunan Target alanından belirlenebilir.
55
Görsel 6.5 Link (bağlantı) açılış tipleri
_blank: Bağlı sayfayı, yeni bir pencerede açar.
_parent: Bağlı sayfayı, köprünün bulunduğu sayfada açar.
_self: Bağlı sayfayı, köprünün bulunduğu çerçevede açar.
_top: Bağlı belgeyi tam büyüklükte bir pencerede açar
6.4. Resimlere Bağlantı verme
Sayfaya eklenen resimlere link verilebilir. Bunun için ilgili resim seçilip Properties penceresinde bulunan link alanında daha önce öğrenilmiş olunan link verme yöntemlerinden biri kullanılarak bağlantı verilebilir.
6.5. Etkin Resim Noktaları Oluşturma
Sayfada bulunan resimlere köprüler oluşturulabildiği gibi resimlerin üzerindeki belirli alanlara da köprüler atanabilir. Bu işlemi yapmak için resim üzerinde etkin resim noktaları oluşturmak gerekmektedir. Etkin resim noktaları dikdörtgen, daire ya da çokgen şeklinde oluşturulabilir.
Etkin resim noktası oluşturmak için ilgili resim seçildikten sonra Özellikler penceresinde bulunan daire, dikdörtgen ve serbest çizim araçlarından ( ) biri seçilerek resim üzerinde link verilecek alan çizilip bu alana link verilebilir.
Aşağıdaki örnekte harita üzerinde bir şehre link verilecektir. Önce Serbest çizim aracı seçilip Mouse tuşuna basılarak link verilecek noktalar bırakılır. Kapalı bir alan oluşturulur.
Eğer “Please describe the image map in the “alt” filed……” gibi bir uyarı mesajı gelir ise burada kast edilen şudur: Çizeceğiniz resmin ne olduğu ile ilgili alt başlıklı alana tanımlayıcı bir başlık giriniz. Alt kısma Elazığ yazıldıktan sonra çizime devam edilir.
56
Görsel 6.6 Örnek etkin noktası oluşturma
Eğer resim üzerinde birden fazla etkin nokta oluşturulduysa hotspot tool seçim aracı ile etkin noktalarını seçilebilir. Seçilen etkin noktanın bilgileri Properties panelinde görünür.
Görsel 6.7 Etkin resim noktası seçimi
57
6.6. Named Anchor (Çapa) Ekleme
Web tasarım editöründe hazırlamış olunan sayfa içerisinde farklı başlıklardan oluşan uzunca bir metin varsa ve tıklandığında ilgili bölüme gitmesi isteniyorsa bunun için named anchor (çapa) kullanılır.
Named Anchor’a insert → named anchor menü yolundan ya da insert panelinde yer alan common sekmesindeki çapa işaretine tıklanarak ulaşılabilir.
Görsel 6.8 Named Ancor (Çapa) ekleme
Çapa işlevinin daha iyi anlaşılabilmesi için sayfanın uzun olması gerekmektedir. Bunun için sayfanın en üst kısmına “Sayfa Başı” diye yazılır. Daha sonra yazının baş kısmına gelip çapa işaretine tıklandığında bu alana bir etiket verilmesini isteyen bir pencere gelecektir.
Buraya belirleyici bir etiket verilir. Boşluk ve Türkçe karakter vermekten sakınılır.
Görsel 6.9 Örnek Named Ancor (çapa) ekleme
Daha sonra sayfada kaydırma çubuğu görünene kadar enter tuşu ile imleç aşağı indirilir.
Bu kısma da “Sayfa Başına Git” yazılır. Yazılan yazı seçilip Link bölümüne daha önce verilen etiketin ismi yazılıp enter tuşu ile onaylanır. Burada dikkat edilmesi gereken kısım ismin başına # işareti getirilmesidir.
Görsel 6.10 Named Ancor (çapa) link verme
58
Sayfa test edildiğinde sayfa başına git kısmına tıklandığında sayfanın yukarı doğru kayarak sayfa başı yazısına geldiği görülecektir.
6.7. E-Posta Bağlantıları
Sayfalar içinde istenen noktalara e-posta bağlantısı eklenebilir. E-posta bağlantısı eklemek için; ilgili nesne ya da metin seçildikten sonra Properties panelinde bulunan Link alanına “mailto:” ifadesi ile başlayan e-posta adresi girilmelidir.
Görsel 6.11 E-posta bağlantısı ekleme
Insert panelinde yer alan common sekmesindeki alandan da aynı işlemi yapılabilir.
Link verilmek istenen metin seçilip E-mail Link tuşuna basılarak gerekli alan doldurulur. 3.
Bir yol da Insert menü grubu içindeki E-mail Link düğmesine tıklanarak açılan pencereden de aynı işlemler yapılır.
Görsel 6.12 E-posta bağlantısı ekleme
59
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( )Web tasarım editörü ile sayfalarınızı oluşturduktan sonra bu sayfalar arasında bağlantılar oluşturabiliriz.
2. ( )Bağlantı oluşturacağımız metni ya da nesneyi seçtikten sonra Properties bağlantılar oluşturabiliriz.
3. ( )Sayfamızdaki bağlara ait yazı tipi, renk ve stil düzenlemelerini Page Properties penceresinde bulunan Category listesindeki Link (Css) seçeneği ile yapılır.
4. ( )Köprü adreslerinin açılış şekilleri, Properties panelindeki bulunan Target seçeneği ile düzenlenir.
5. ( )Etkin resim noktaları ile sayfalara resim eklenir.
6. ( )Çok uzun yazı ya da bölümlerden oluşan sayfalarda belli noktalara yer imi ekleyerek köprü oluşturmak içeriğe ulaşmayı kolaylaştırır.
DEĞERLENDİRME
Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise bir sonraki materyale geçmek için öğretmeninize başvurunuz.
ÖLÇME VE DEĞERLENDİRME
60
CEVAP ANAHTARLARI
ÖĞRENME FAALİYETİ-4’İN CEVAP ANAHTARI
KAYNAKÇA
https://forums.adobe.com/ (Erişim Tarihi: 09.07.2019)
https://www.umutd.com/dreamweaver-cs6-dersleri/ (Erişim Tarihi: 11.07.2019)
megep.meb.gov.tr Bilşim teknolojileri alanı web tasarım ve programlama dersi modülleri. (Erişim Tarihi: 11.07.2019)
Udemy - Yeni Başlayanlar İçin Adobe Dreamweaver Temel Kod Eğitimi – Fatih Gök (Erişim Tarihi:13.07.2019)
https://www.vidobu.com/egitim/dreamweaver-cc-baslangic-rehberi/4243/dreamweaver-site-kurulumu/ (Erişim Tarihi: 13.07.2019)
https://www.oreilly.com/library/view/dreamweaver-cs6-the/9781449326999/ch06s04.html (Erişim Tarihi: 14.07.2019)
David Sawyer McFarland, Dreamweaver CS6: The Missing Manual, boks.google.com (Erişim Tarihi: 15.07.2019/ 13.00)