3. Dreamweaver Ve Katmanlar
Sayfaya yeni bir katman eklemek
• Öncelikle yeni bir doküman açın ve kaydedin
Daha sonra Insert paneldeki Layout sekmesi altında yer
alan Draw Layer seçeneği ile istediğiniz boyutta bir katman
çizebilir ya da Insert / Layer seçeneği ile
sayfanıza Absolute olarak pozisyonlandırılmış bir katman
ekleyip biçimlendirebilirsiniz.
6.5.2014 3
4. • Draw layer düğmesi ile bir katman çizebilirsiniz
• Draw Layer seçeneğine tıkladığınız anda fare
imleci + işaretine dönüşecektir ve size serbest bir dikdörtgen
çizme olanağı sağlayacaktır.
6.5.2014 4
5. • Ayrıca Insert Panelde Common ve Layout sekmelerinde yer
alan "Insert Dıv Tag" düğmesi ile doğrudan DIV
ekleyebilirsiniz. Bu DIV'ler Draw layer seçeneğinin aksine
durağan içerik elemanları olup sayfa ara yüz tasarımının
temelini oluşturmaktadırlar.
• DW, DIV için bir iletişim penceresini ekrana getirip bizden ilgili
ayarları yapmamızı isteyecektir.
6.5.2014 5
6. • Burada geçen Insert seçenekleri DIV tagının sayfaya nasıl
ekleneceğini belirtiyor. "Wrap around selection" seçeneği
seçili olan içeriğin etrafını saran bir DIVekleyecektir. Aynı
şekilde listedeki diğer seçenekleri de deneyerek amacınıza
uygun olan ekleme türünü seçebilirsiniz.
• Bir katman seçtiğinizde Properties paneli aşağıdaki hali
alacaktır. Bileşenleri şu şekilde sıralanabilir;
6.5.2014 6
7. • Katmanlar ile ilgili değişiklikleri Properties panelinden
yapabilirsiniz
• LayerID: Sadece bu katmana özgü özel bir isim.
• T: Katmanın üst kenara olan uzaklığı.
• L: Katmanın sol kenara olan uzaklığı.
• H: Katmanın yüksekliği.
• W: Katmanın genişliği.
6.5.2014 7
8. Dreamweaver Ve Klavye Kısayolları
Klavye kısayollarının yönetimi
• DW içerisinde Edit / Keyboard Shortcuts menüsü ile DW
kısayollarını yeniden yapılandırabiliyorsunuz.
• Edit / Keyboard Shortcuts menüsü ile DW kısayollarını
yeniden yapılandırabiliyorsunuz
6.5.2014 8
9. Klavye kısayolları
• Ok tuşlarının kullanımı sadece Windows kullanıcıları için
geçerlidir.
• Windows içerisindeki "Control (CTRL)" tuşu yerine
"Macintosh" kullanıcıları "Command", "Enter" tuşu yerine
ise "Return" tuşunu kullanabilirler.
Paneller arası geçiş
• Doküman penceresi içerisinde
çalışırken Control+Alt+Tab ile panel grubu odaklaması
değiştirebilirsiniz. Odaklanamanın hangi panelde olduğunu
panel başlığı çevresindeki kesikli çizgilerden oluşan
çerçeveden anlayabilirsiniz.
Tekrar Control+Alt+Tab kombinasyonu ile sonraki panele
geçebilirsiniz.
6.5.2014 9
10. • Bir önceki panele dönmek için ise Control+Alt+Shift+Tab tuş
kombinasyonunu kullanabilirsiniz. Bu tuş kombinasyonları ile
kod görünüm ve tasarım görünüm arasındaki geçişleri de
yapabilmeniz mümkün.
6.5.2014 10
11. Frameler ile çalışırken
• Doküman penceresinde çalışırken "Alt+Üst ok" tuş
kombinasyonu ile aktif frame odaklanılabilir. "Alt+Üst ok"
kombinasyonuna basmaya devam ederek Frameset seçimi de
yapmak mümkündür.
• "Alt+Aşağı ok" ile alt framelere (child frames) odaklama
yapılabilir. "Alt+Sağ-Sol ok" tuşları ile frameler arası geçiş
yapılabilir.
Tablolar ile çalışrken
• Tablo içerisinde ok tuşları yada Tab tuşu ile hücreler arası
geçiş yapabilirsiniz. "Control+A" (Windows) ya da
"Command+A" ile hücreyi seçebilirsiniz. Tüm tabloyu
seçmek için bu tuş kombinasyonuna iki kez basmanız
yeterli olacaktır.
• Bir tablodan çıkmak için üç defa "Control+A" (Windows) ya
da "Command+A" kombinasyonuna basmanız yeterlidir.
6.5.2014 11
12. Kısayollar tablosu
File Menüsü
Komut Windows Macintosh
Yeni Döküman Control+N Command+N
Bir HTML
dosyası aç
Control+O, Yada Site dosya
menüsünden doküman penceresine
sürükleyin
Command+O
Frame'in içine
aç
Control+Shift+O Command+Shift+O
Kapat Control+W Command+W
Kaydet Control+S Command+S
Farklı Kaydet Control+Shift+S Command+Shift+S
Linkleri Kontrol
et
Shift+F8 Command+F8
Geçerlilik
kotrolü yap
Shift+F6 Command+F6
Çıkış Control+Q Command+Q
6.5.2014
12
13. Edit (Düzen) Menüsü
Komut Windows Macintosh
Geri al Control+Z Command+Z
Tekrar yap Control+Y ya da Control+Shift+Z Command+Y ya da Command+Shift+Z
Kes Control+X ya da Shift+Del Command+X ya da Shift+Del
Kopyala Control+C ya da Control+Ins Command+C ya da Command+Ins
Yapıştır Control+V ya da Shift+Ins Command+V ya da Shift+Ins
Özel yapıştır Control+Shift+V Command+Shift+V
Temizle Delete Delete
Tümünü Seç Control+A Command+A
Üst etiket seç
(Parent tag)
Control+[ Command+[
Alt etiket seç
(Child tag)
Control+] Command+]
Bul ve Değiştir Control+F Command+F
Sonrakini bul F3 Command+G
Seçileni bul Shift+F3 Shift+F3
Satıra git Control+G Command+G
Code Hınts göster Control+Space Command+Space
Kod içeri al Control+Shift+> Command+Shift+>
Kod dışarı al Control+Shift+< Control+Shift+<
Harici editörü aç Control+E Command+E
Özellikler Control+U Command+U
6.5.2014 13
14. View (Görünüm) Menüsü
Komut Windows Macintosh
Yakınlaş Control+=
Uzaklaş Control+-
100%
yakınlaşma ya
daanı
Control+Alt+1
Seçimi sığdır Control+Alt+0
Hepsini sığdır Control+Shift+0
Genişliğe sığdır Control+Shift+Alt+0
Görünüm
modunu
değiştir
Control+`
Tasarım
görünümünü
zatele
F5
Server Debug Control+Shift+G
Live Data Control+Shift+R
Genişletilmiş
tablo modu
F6
Layout Mod Control+F6
6.5.2014
14
15. Yardım almak
Komut Windows Macintosh
Dreamweaver
Yardım Konuları
F1 F1
ColdFusion
yardım
Control+F1 Command+F1
Referanslar Shift+F1 Shift+F1
6.5.2014 15
16. Dreamweaver Ve Formlar
Dreamweaver ile Form kullanımı
• Formların genel mantığını kavradığımıza göre artık DW ile
nasıl formları kullanacağımıza geçebiliriz. DW içerisinde
formlar Insert (Object) panel altındaki "Forms" sekmesinde
yer almaktadır.
• Insert panelde yer alan Forms sekmesi ile sayfanıza
form elemanları ekleyebilirsiniz
6.5.2014 16
17. • Form: Yeni bir Form yaratır. DW içerisinde bir Formun etki
alanı kırmızı ince bir çizgi ile belirtilir.
• Text Field: Kayıt ya da üye girişi gibi işlemler sırasında veri
girişi yapılan (ad, soyad, email, kullanıcı adı veya parola gibi)
metin alanlarını formumuz içerisine eklememize olanak
sağlar.
• Hidden Field: Formlardaki gizli alanlardır. Bunlar kullanıcı
tarafından görünmez fakat form içerisinde kullanıcıya
yansımaması gereken bilgilerin iletilmesinde kullanılır.
• Textarea: Biraz önce belirttiğimiz text field'ların çok satırlı ve
daha çok bilgi alabilen türü. İşlev aynı diyebiliriz.
• Check Box: Formlardaki inisiyatife bağlı opsiyonlarda
işaretlenebilir (Tick) bileşenler yaratmamızı sağlar.
6.5.2014 17
18. • Radio Button: Çoktan seçmeli opsiyonlarda sadece bir
cevabın seçilebileceği durumlar yaratmamızı sağlar. Böyle
çok seçenekli bir uygulama yapmak için isimleri aynı
değerleri farklı seçenekler eklenerek kullanıcının sadece
bir tanesini seçmesi sağlanabilir.
• Radio Group: Toplu olarak Radio button ekleme işlemini
büyük ölçüde kolaylaştıran çok güzel bir araç.
• List Menu: Dropdown menü olarak da bilinen çok
opsiyonlu açılır menuler yapmamızı sağlar.
• Image Field: Standart butonlardan sıkılanlar için
buton yerine resimde kullanabilecekleri güzel bir
özellik.
6.5.2014 18
19. • File Field: Form aracılığıyla dosya yollama (Web Upload)
işlemleri için kullanılan form bileşenidir.
• Button: Bir formdaki girilen verilerin ACTION'da belirtilen
sayfaya iletilmesini (submit) sağlayan yada forma girilen tüm
verileri sıfırlayan (reset) gibi işlemleri üstlenen formların en
önemli bileşenlerinden biri.
• Label: Genelde Radio button ve Check Box'lar için olmak
üzere tüm form elemanları için kullanılan etiket olayı.
6.5.2014 19
