Web Tasarımı Dersleri – 5
Stiller / CSS
:: Yeni Bir Stil Belgesi
Oluşturmak
harflerinin büyüklüğü, türünü, kalınlığını, italik ve altı çizgili oluşunu,
rengini, sağa mı sola mı yaslı olacağını vb. gibi özellikleri ayarlarız. Örneğin
bir Web sitenizde bir ziyaretçi formunuz var. Bu formda 15 tane textbox, 5 tane
dropdown menü, 2 tane de buton var. Siz bu form nesnelerinin hepsinde Verdana
fontunu, 10 punto ile, kahverengi renk tonunda ve 2 pixel çerçeve kalınlığında
kullanmak istiyorsunuz. Ne yapacaksınız? Bütün form nesneleri ile tek tek mi
uğraşacaksınız yoksa bizimle nasıl CSS oluşturulur ve nasıl kullanılır konusuna
mı eğileceksiniz?
Evet bütün form nesnelerini tek bir stil dosyası
ile biçimlendirebilirsiniz. Öncelikle bir stil dosyası oluşturursunuz ve
formunuzdaki öğeleri seçerek bu stil dosyasının özelliklerini almalarını
sağlarsınız. Bunun için CSS panelini kullanacağız.
Kolları sıvayalım ve CSS panelinde +
butonuna basalım.
Class seçeneğini seçelim. Eğer CSS
dosyamızın sadece bu sayfada kullanılmasını istiyorsak This Document Only
seçeneğini işaretleyelim. Ayrı bir dosya olarak kaydetmek için ise New Style
Sheet File seçeneğini seçeceğiz.
Fontumuz Verdana, puntosu 12, rengi koyu kırmızı
ve hiçbir dekorasyon kullanmadık. Bu şekilde stil atadığımızda linklerimizin
altındaki çizgi kaybolacaktır.
Bu adımda ise fare linkin üzerine geldiğinde
linkin renginin değişmesi olayını gerçekleştireceğiz. CSS panelinde +
butonuna basalım.
Selector Type seçeneklerinden Advanced
seçeneğini işaretleyelim ve Selector menüsünden a:hover öğesini
seçelim. Define in bölümü ilk haliyle kalsın. Ok butonuna basalım ve ayar
penceresine gelelim.
Bu pencerede yapacağımız ayarlar farenin linkin üzerine
geldiği zaman linkin alacağı hal ile ilgili. Yine fontumuz Verdana, puntosu 12,
farklı olarak rollover durumundaki rengi açık yeşil, dekorasyon olarak ta
stilimizde altı çizgiyi kullandık.
Şimdi sıra geldi bu stili uygulamaya. Herhangi
bir metin yazalım. Properties panelinden Link metin kutusundan bu
metne link verelim. Sonra bu linki seçelim CSS paneline gelelim ve stilimize sağ tıklayarak Apply komutunu
çalıştıralım.
Stilimiz linkimize uygulanmış olacaktır.
Klavyemizden F12’yi tuşlayalım ve belgemizi test edelim. Linkimizin üzerine
fare ile geldiğimizde rollover olayını göreceğiz.
:: Stil Belgesi Atamak
Daha önceden yaptığımız bir stil belgesini başka
bir çalışmamızda da kullanmak istiyorsak Attach Style Sheet komutunu
kullanacağız. Bu işlem için CSS paneline gelelim ve Attach Style
Sheet butonuna tıklayalım.
Açılan pencereden Browse butonuna
tıklayalım ve Stil belgemizi bulup Ok butonuna basalım.
Stili belgemize almak için Import, linkini
belgemize almak için Link seçeneğini seçelim ve OK butonuna
basalım. Önizleme yapmak istersek Preview butonuna tıklayacağız. Bu
adımlardan sonra daha önceden yapmış olduğumuz bir stil belgesini sayfamızda
kullanabileceğiz.
Behaviors İşlemleri
:: Tarayıcı/Sürüm Denetimi
Farklı tarayıcıları veya aynı tarayıcının farklı
sürümlerini ayrı sayfalara yönlendirmek için bu komutu kullanabilirsiniz. Tag
Inspector panelinden Behaviors bölümüne gelelim ve + butonuna
basalım. Açılan menüden Check Browser komutunu tıklayalım.
Bu komut ile ziyaretçiyi tarayıcısına göre
yönlendireceğiz. Örneğin bu uygulamada ziyaretçimizin tarayıcısı Netscape
Navigator’se ve versiyonu 4.0 veya ileri bir sürüm ise URL metin
kutusundaki adrese yönlendirilecektir. Eğer durum olumsuzsa, başka bir sürüm
ise Alt URL metin kutusundaki adrese yönlendirilecektir. Aynı durum IE
içinde geçerlidir.
:: Eklenti Denetimi
Siz sitenizi şahane Flash filmleri ile donattınız;
ama ziyaretçilerinizin sizin sayfalarınızda kullandığınız biçimleri izleyebilecek eklentileri var mı? Bunu anlamak için Tag Inspector
panelinden Behaviors bölümüne gelelim ve + butonuna basalım.
Açılan menüden Check Plugin komutunu tıklayalım.
yapılmasın istediğiniz eklentiyi seçin.
If found, go to URL: Plugin bulunursa bu metin kutusundaki adrese git.
Otherwise, go to URL: Plugin bulunmazsa bu metin kutusundaki adrese
git.
Bu komut ile web sayfalarınızda Flash filmleri
için, aynı Winamp’te olduğu gibi dur, şu kareye git, oynat, başa dön gibi
kontrolleri kullanabilirsiniz. Bunun için Tag Inspector panelinden Behaviors
bölümüne gelelim ve + butonuna basalım. Açılan menüden Control
Shockwave or Flash komutunu tıklayalım.
Önce belgemizde kontrol edeceğimiz bir Flash
filmimizin olması gerekiyor. Hemen Macromedia Flash’ta 50 kareden oluşan bir
film hazırlayalım. dosyaadi.swf olarak kaydedelim, Insert > Media >
Flash yönergesini izleyerek belgemize ekleyelim. Bu aşamada dikkat etmemiz
gereken durum filmimize mutlaka isim vermemiz gerektiğidir. Filmi seçelim ve Properties
panelinden isim verelim.
İsmimizi verdik şimdi ise belgemize 4 farklı olay
için (Play, Stop, Rewind, Go to frame) 4 adet buton ekleyelim. Insert >
Form > Button yönergesini izleyerek 4 adet buton ekledik. Şimdi
butonları seçelim ve yapacağı işleve göre Label metin kutusuna
isimlerini yazalım. Hepsinin Action’ı None olacak şekilde değiştirelim.
Şimdi ise Play butonumuzu seçelim,
Tag Inspector panelinden Behaviors bölümüne gelelim ve + butonuna
basalım. Açılan menüden Control Shockwave or Flash komutunu tıklayalım.
Movie alanında filmimizin ismini
göreceksiniz. Play butonu olduğuna göre Action seçenelerinden Play’i
işaretleyeceğiz. Filmi durdurmak için Stop, başa sardırmak için Rewind,
istediğimiz bir frame gitmesi içinde Go to frame seçeneğini
işaretleyerek butonlara aynı işlemleri uygulayalım. Farklı olarak Go to frame
metin kutusuna 50 den küçük bir değer gireceğiz. Çünkü bizim filmimiz 50
kareden oluşuyordu. Bu işlemin uygulama belgesini incelediğinizde işlemi daha
iyi kavrayacaksınız.
Yönlendirme
Web alanı alıp bir Web sitesi yapmıştınız. Çok tutuldu ve www.siteniz.com
uzantılı bir alan adı alarak yolunuza daha resmi yolardan devam edeceksiniz.
Peki ücretsiz alanınızı bilen ziyaretçilerinizi kaybetmeyi mi düşünüyorsunuz?
Tabii ki hayır. Siz de Dreamweaver’la ücretsiz alan adınızı ücretli alan adınıza yönlendireceksiniz. Böylece ücretsiz alan adı kullandığınız Web
sitenize gelen ziyaretçileriniz doğrudan yeni Web sitenize yönlendirilecek. Bu
işlem için Tag Inspector panelinden Behaviors bölümüne gelelim ve + butonuna basalım. Açılan menüden Go To URL komutunu tıklayalım.
URL metin
kutusuna yeni Web sitemizin adresini yazalım ve OK butonuna basalım.
Eski sayfamız açılır açılmaz yeni sayfamıza OnLoad komutu
ile yönlendirilecektir.
Menü
Form Nesneleri ve
İşlevleri bölümünde görmüş olduğumuz liste/menü burada da karşımıza çıktı.
Formlarla yaptığımız liste menüler belirttiğimiz Web adreslerine gitmek için
bir kaç satırlık küçük javaScriptlere ihtiyaç duyarlar. Bu sorunun üstesinden
Behaviors‘la geleceğiz.
Insert > Form >
List/Menu yönergesiniz izleyerek belgemize bir List/Menu formu ekleyelim.
Bu formu seçelim ve Tag Inspector panelinden
Behaviors bölümüne gelelim ve + butonuna basalım. Açılan menüden Jump Menu komutunu tıklayalım.
+ butonu ile öğe ekleyip, – butonu ile öğe silebilirsiniz.
Listedeki görünecek isimleri Text
metin kutusuna ilgili linkleri ise When
Selected, Go to URL metin kutusuna yazacağız. Yine menümüzün ince
ayarlarını Properties panelinden
yapabiliriz.
:: Yeni Pencere Aç
Belki çoğumuz sevmeyiz ama her Web sitesinde de görürüz.
Anasayfayla birlikte açılan ikinci küçük bir sayfa. Genelde reklam için kullanılırlar.
Aklımızda kötü bir izlenim bırakmışlardır. Fakat başka güzel yönleri de vardır.
Örneğin anasayfa üzerinde bir haber yayınlayacaksınız. Bütün haberi anasayfaya
yazamazsınız ya! Kısa bir bölümünü anasayfaya yazarız ve bu yazıya link
veririz. Bu linke tıklanınca haberin tamamı küçük bir pencerede çıkar. Böylece
sevimsiz olan bu küçük pencereleri sevimli hale getirip sayfalarımızda
kullanabiliriz. Şimdi bahsettiğimiz uygulamaya geçelim.
Tam metin bir haberi bir HTML belgeye kopyala/yapıştır
yöntemi ile getirelim ve bu belgeyi haber.htm olarak masaüstüne kaydedelim.
Yeni bir belge açalım. Bu haber metninden kısa bir paragraf alalım ve bir tablo
içine yapıştıralım. Metni seçelim, Properties
panelinden Link metin kutusuna #
işareti koyalım. Link verdiğimiz metni seçelim ve sonraki adımda Tag Inspector panelinden Behaviors bölümüne gelelim ve + butonuna basalım. Açılan menüden Open Browser Window komutunu
tıklayalım.
URL to Display : Tam metnin olduğu
HTML belgenin adresini yazacağız.
Window width : Metnin gösterileceği
pencerenin genişliği.
Window height : Metnin gösterileceği
pencerenin yüksekliği.
Attributes : Özellikler.
Navigation toolbar : Bu özelliği kullandığınız
taktirde açılan yeni, küçük pencere IE’ deki yön çubukları da olacaktır.
Location toolbar : Adres satırını gösterir.
Status bar : Durum çubuğunu
gösterir.
Menu bar : Menülerin
olduğu çubuğu gösterir. (Dosya, Görünüm…)
Scrollbars as needed : Bu sekmeyi işaretlediğimizde, belgemizdeki metin 400×350 pixellik
alana sığmadığı zaman kaydırma çubuğu ile pencereye sığmayan kısım
gösterilecektir. Aksi taktirde belgemizin aşağıya doğru uzunluğu ne olursa
olsun sadece 400×350 pixellik alana sığan metin gösterilecektir.
Resize handles : Pencerenin boyutunun
fare ile ayarlanabilmesini sağlar.
OK butonuna basın ve belgemizi kaydedip, test edelim. Fare
ile metnin üzerine geldiğimizde yeni pencere açılacaktır. Biz sadece fare ile
tıkladığımızda açılmasını istiyoruz. Bunun için Behaviors bölümünde OnMouseOver olan fare olayını OnClick’e çevireceğiz. Bu işlemden
sonra metne tıkladığımızda pencere istediğimiz özelliklerde açılacaktır.
:: Ses Dosyası
Çağır
Web sayfalarımızda grafik nesnesi kullanabildiğimiz gibi ses
dosyaları da kullanabilmekteyiz. Bu işlem için gerekli tek ön şart
kullanacağımız dosya formatını ziyaretçimizin Web tarayıcısının tanıması
gerektiğidir. Web’de en çok kullanılan iki format wav ve mid’dir. Bizde bu
işlem ile sayfamıza bir ses dosyası ekleyeceğiz. Bu işlem için Tag Inspector panelinden Behaviors bölümüne gelelim ve + butonuna basalım. Açılan menüden Play Sound komutunu tıklayalım.
Browse butonuna
basalım ve ses dosyasını belgemize ekleyelim ve OK butonuna basarak işlemlere adım adım devam edelim.
autostart : Seçenek “true” ise ses dosyası
otomatik olarak çalışacaktır.
loop : True seçeneğini seçtiysek
ses dosyası döngü halinde çalacaktır.
src : Ses dosyamızın bulunduğu
klasörün yolu.
– – –
Önceki derslere ulaşmak için tıklayın. Web tasarımı derslerimiz sürecek.
SDN
Yorumunuz gönderildi,
onaylandıktan sonra yayımlanacak.
ya bu dersler tam anlamıyla ne zaman biticek yani kaç bölüm daha var ben yazılım ödevi hazırlıyorumda burdan yararlanıyorum da şimdiden teşekkürler
ya bu dersler tam anlamıyla ne zaman biticek yani kaç bölüm daha var ben yazılım ödevi hazırlıyorumda burdan yararlanıyorum da şimdiden teşekkürler
Web tasarım derslerinin geri kalan kısmını tamamen tek dosyada vermeyi planlıyoruz.
Tek kelime harika gidiyor. Bence böyle devam edin. Bu siteyi yeni farkettim. Bu güzel anlatımlar için emeği geçenlerden Allah razı olsun. Dreamweaver’la daha neler yapılır paylaşın lütfen. Devamını bekliyoruz. Ellerinize sağlık..Arkadaşların görüntülü istediklerini okudum. Eğer bir imkan sunulursa ben de bunları hazırlayabilirim. Siz yeter ki devam edin. Allah’a emanetsiniz dostlar.
Harika anlatılmış. Ãœniversite öğrencisiyim bu bölümde okuyorum ama hocam bile böyle güzel anlatmamıştı doğrusu. Böyle güzel bir site için teşekkürler. Takip ediyorum ve emeği geçen herkese sonsuz teşekkür 🙂
Devamını bekliyoruz.
Ne zaman devamı ya? bir tarih verin bari.
Haftaya kalan derslerin tamamını tek bir Word belgesinde vereceğiz arkadaşlar.
İyi mesajlarınız için teşekkür ederim arkadaşlar. Ben DW 8’e baktım çok büyük bir yenilik getirmiyor. Temel mantık yine aynı. Değişik birşey gördüğümde mutlaka burada yazacağım. Herkese başarılar diliyorum …
hocam süper bi anlatım tebrik ediyorum
Vallahi çok işime yaradı saolasın 🙂
“Bilgi ayrıntıda gizlidir.” günler, geceler boyu Internet de dolaşıp da, amaçsız ve umutsuz karanlık sanal dünya da, sınırsız ve verimsiz çöplüğün içinde; yorgunluktan, şaşkın ve amaçsız bakınırken, ışıldayan “şeylerin” olması ne güzel.
İletişim Formu Olmadan,
Web siteniz eksik ve işlevsiz kalıyor.
Sitenizi sabırla ve özenle inşaa ettikten sonra sorunlarla karşılaşıyorsunuz.
1.web sitenizi, bilgi yetersizliği nedeni ile dw mx;aracılığı ile yayınlayamıyorsunuz.
2.I.Explorer çıldırtıyor.
3.Cuteftp ile aşıyorsunuz…,
4.İletişim Formu sorun oluyor. Binbir emekle aşıyorsunuz. Estetik karşınıza çıkıyor
Şimdi: pastel renklerin armonisi ile hazırlanmış-Biçimlendirilmiş Forum belgesi hazırlamak istiyorum. Fakat; kitap,dergi,internet’de bilgiye ulaşamıyorum.
anlatanın eline koluna sağlık fakat bana daha önceki konularda lazım nasıl ulaşabilirim
editör: http://shiftdelete.net/site/component/option,com_mamboezine/Itemid,63/ adresinde en altta bulabilirsiniz linlkleri.
Eline saglik abi insallah ogrenecez
ogrenemezsek yardimci olursun dimi?
merhab ben bir üniversite ögrencisiyim güzel bir konuya deginmiş ve de cok güzel acıklayıcı sekilde antatmıssınız tesekkürler devamını bekliyoruz
bu önceki css derslerini bulamadım. belirttiğiniz siteyi açtım, ama sayfann altında veya başka yerinde css derslerine rastlayamadım. başka isim altında mı geçiyor acaba
çok güzel anlatmışsınız
ama ben jump menüye,sayfalar arası bağlantı verdiğimde neden olmuyor bunu soracaktım