Dreamweaver-2

6.5.2014 1

İşlenecek Konular

Dreamweaver Ve Katmanlar

Dreamweaver Ve Klavye Kısayolları

Dreamweaver Ve Formlar

6.5.2014 2

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

• 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

• 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

• 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

• 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

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ırabiliyorsunuz6.5.2014 8

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

• 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

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

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

etShift+F8 Command+F8

Geçerlilik

kotrolü yapShift+F6 Command+F6

Çıkış Control+Q Command+Q6.5.2014

12

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

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 moduF6

Layout Mod Control+F66.5.2014

14

Yardım almak

Komut Windows Macintosh

Dreamweaver

Yardım KonularıF1 F1

ColdFusion

yardımControl+F1 Command+F1

Referanslar Shift+F1 Shift+F1

6.5.2014 15

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

• 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

• 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

• 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

Dersimiz Bitti!

Teşekkürler…

6.5.2014 20