ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

sunu (Dreamweaver-2)

•Download as PPTX, PDF•
•
Merve Aydın
Merve Aydın
1 of 20
Downloaded 11 times
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ırabiliyorsunuz 6.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 et Shift+F8 Command+F8 Geçerlilik kotrolü yap Shift+F6 Command+F6 Çıkış Control+Q Command+Q 6.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 modu F6 Layout Mod Control+F6 6.5.2014 14
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
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

More Related Content

sunu (Dreamweaver-2)

  • 2. Ä°ÅŸlenecek Konular  Dreamweaver Ve Katmanlar  Dreamweaver Ve Klavye Kısayolları  Dreamweaver Ve Formlar 6.5.2014 2
  • 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