Dreamweaver Dersleri

Arayüz ve kullanım
Dreamwaver'ı en verimli biçimde kullanabilmek için öncelikle arayüz konusunda bilgi sahibi olmamız gerekmektedir. Bu anlamda en çok işimize yarayacağını zannettiğimiz başlıca kısımlar şunlardır:
Toolbar: Buradan sayfayı yaparken kullancağınız arayüzü seçebilirsiniz. Show Code View diyerek kodları inceleyebilir yada 'ben koddan anlamam kardeşim' derseniz Design View'i kullanabilirsiniz. Odamı olmadı o zaman Show Code and Design View diyerek aynı zamanda hem görüp hemde kodlamanız mümkün. Title kutucuğuna Sitenizin adını yazmanız yeterli olacaktır. Preview/debug in Browser Diyerek sayfanızın Web Tarayıcınızda nası bişeye benzediğini görebilirsiniz. References Buttonu size sıkıştığınız anlarda ingilizce olarak kısa ipuçları vermeye yarar. View Option Butoonu ile kenarlara cetvel yerleştirebilir (Rulers), Klavuz çizgileri görüntüleyebilir (Grid), devreye sokabilir (Vusual Aids) Basit yardımcıları devreye sokabilirsiniz.
Objects panel: Bu pencere yardımıyla sitenize çeşitli mataryeller ekleyebilirsiniz. Örnek olarak Table, resim, layer, rollover resim ekleme gibi işlemleri bu kısımdan yapabilirsiniz. Üst kısmındaki ufak oka tıklayarak deişik mataryel gurplarını görüntüleyebilirsiniz. (Characters, Common, Forms, Frames, Head, Invısıbles, Special)
Property Inspector: Bu pencere sayfamıza eklediğimiz her türlü dökümanın genel özelliklerini değiştirmemize ve yönetmemize yarar. Örnek olarak insert ettiğiniz bir resimin sağa mı yoksa sola mı hizalanması gerektiği veya bir table ın background renginden borderına kadar tüm özelliklerini değiştirmek için bu penceriyi kullanabilirsiniz. İşlerinizi kolaylaştırmak ve hızlandırmak için çok kullanışlı bir araçtır.
Document Window: Burası sizin arenanız. Sayfayı buraya yapıyorsunuz anlıyacağınız. Macromedia Dreamweaver WYSWYG (What You See What You Get/Ne Görürsen Onu Alırsın) mantığına dayanan bir program olduğu için bu alan bizim için çok önemli.
Floating Panel: bu pencere ise sayfa ile ilgili ince ayarların yapıldığı kısımdır. Adından da anlaşılacağı üzere, değişken bir paneldir. Yani aktif duruma getirdiğiniz özelliklerle ilgili ayarlar bu panel üzerinde sıra ile değişir. CSS styles, Fames, vs....


Text, Link ve Biçimlendirme
Sayfanın en sade ve en önemli kısımlarından biri olan Textler bilinmesi gereken en temel konuların başında gelir. Sayfanızdaki text ve linklerin renklerinin uyum içinde olması ziyaretçileri hem hoşnut eder hemde sayfanızın kolay anlaşılır bir biçimde olmasını sağlar.
Textleri biçimlendirmek için:
- Yazdığınız paragraf yada kelimeyi seçili durumua getiriniz.
- Ayarların büyük bir kısmını Propery Inaspector üzerinden yapabiliriz. Bunun için özellikle bunun üzerinde yoğunlaşmamız mantıklı olacaktır.
- Seçtiğiniz yazının büyüklüğü 'size', onun solundaki yazi tipi 'Font Familiy', sağındaki font rengi 'Font color', üzerine tıklandığında açılacak olan URL 'Link', ne tarafa hizalanacağını belirten 'Align' Buttonları, Alt alta uzayan satırların listemi 'List' yoksa sıralanmış 1 2 3 şekline giden açıklamalar şekline olacağı 'Ordered' ayarları, İçerden yada dışardan başlamasını sağlayan 'text 'Outdent', 'text Indent' ayarları, textin kalın olmasını sağlayacak 'bold', eğik olmasını sağlayacak 'italic' en çok işimize yarayanlarıdır.
- Daha çok ayarı değştirmek ve texti biçimlendirmek için 'Text' menüsünü kullanabilrsiniz.


Non Breaking Space (Ekstra Boşluk)
Dreamweaver'da ve diğer HTLM editörlerinin çoğunda extra boşluk bırakmak genelde problem yaşanan bir aktivitedir. Dreamweaver'da bu problemi aşmak için basit bir klavye kısayolunu kullanmamız mümkün. Extra boşluk bırakmak için:
- Extra boşluk bırakmak istediğiniz metin alanına farenin sol tırnağıyla tıklayınız
- İster CTRL+Shift+Space (boşluk) tuş kombinasyonuyla, ister insert/Special Characters/Non Breaking Space menüsü ile extra boşluğunuzu bırakabilirsiniz. odamı olmadı; Property İnspector üzerinden Special Characters grubundan İnsert Non Breaking Space

butonuna tıklayarak aynı işlevi yerine getirebilirsiniz.
- Bu yöntemlerden birini kullanarak istediğiniz kadar extra boşluk bırakabilirsiniz.

Line Break (Bir Alt Satıra Geçmek)
Dreamweaver'da yeni bir paragrafa başlamak için Enter tuşuna basmamız yeterli. Fakat bir alt satıra geçmek istediğimiz zaman daha farklı bir yol izlemek zorundayız. Bir alt satıra geçmek için:
- Bir alt satıra geçmek istediğiniz metin alanına farenin sol tırnağıyla tıklayınız.
- Shift+Enter tuş kombinasyonuyla veya İnsert/Special Characters/Line Break menüsü ile bir alt satıra geçebilirsiniz Property İnspector üzerinde Special Characters grubundaki İnsert Line Break butonu ile de aynı sonuca ulaşabilirsiniz.
- Burada dikkat edilmesi gereken; bırakılan Line Breaklerde geçilen her alt satır yine Line Break bıraktığınız paragrafa bağlı bir alt satır yaratır. Yani bıraktığınız her Line Breakde geçtiğiniz her alt satır yine bağlı olduğu paragrafın özelliklerini taşır.

Object Panel ve kullanımı
Object Panel Dreamweaver'ın en önemli bileşenlerinden biridir. Bu panel sayesinde Tablelar, imageler, rollover imageler, fırmlar, özel karakterler... gibi bi çok elementi sayfanıza dahil edebilirsiniz.

Object Paneldeki başlıca buttonlar ve görevleri şöyle sıralanabilir:




Insert Copyright (©)
Insert Form

Insert Named Anchor
Insert Em-Dash (—)
Insert Text Field

Insert Script
Insert Euro (€)
Insert Button

Insert Content
Insert Poud (£)
Insert Checkbox

Insert Registered Tradernark (®)
Insert Radio Button

Insert Applet
Insert Quote (“”)
Insert List Menü

Insert Plug-in
Insert Tradermark (™)
Insert File Field

Insert ActiveX
Insert Line Break (Shift+Enter)
Insert Image Field
Insert Non Breaking Space
Insert Hidden Field
Insert Other Crackter
Insert Jump Menü

Insert image
Insert Left Frame
Insert Rollover image
Insert Right Frame
Insert Table
Insert Top Frame
Insert Tabular data
Insert Botton Frame
Draw Layer
Insert Left-Top Corner And Top Frames
Insert Navigator Bar
Insert Left And Nested Top Frame
Insert Horizontal Rule
Insert Top And Nested Left Frame
Insert E-mail Link
Split Frame Center
Insert Date

CSS Styles eklemek için:
- Windows/CSS Styles penceresini eğer aktif değilse aktif duruma getiriniz.
- Bir Floating Panel açılacaktır. Bu panel üzerinden CSS style'leri yönetebilir yeni style'lar ekleyebilirsiniz. Yeni bir style eklemek için: Panelin sağ üst köşesindeki ok tuşuna bir defa tıklayınız.
- Açılan menüden New Style diyoruz. Karşımıza çıkan kutucukta Style'ın adını istediğiniz gibi değiştirebilirsiniz. Alttaki seçeneklerden style'in türünü belirleyebilirsiniz. Biz bu kısma hiç dokunmacağız, en alttaki seçenekte ise yeni bir css dosyası oluşturacağımızı belirterek (NEW STYLE SHEET FILE) OK buttonuna tıklıyoruz.


- İlk oluşturulan CSS style'de Dreamweaver bizden bir tane css style belgesi oluşturmamızı isteyecektir. Bu dosyanın adını verdikten sonra (örnek: html dosyaları ile aynı klasör altına styleler.css olarak kaydedebilirsiniz) save diyebilirsiniz.
- Şimdi karşımıza çıkacak olan pencereden style'imizin özelliklerini belirteceğiz. Biz sadece genel özellikleri belirtip noktalıyacağız. Siz daha sonra isterseniz tüm özellikleri değiştirip (bgcolor, font color, underline, puntolar arası genişlik, satırlar arası genişlik vs vs) farklı kombinasyonlar yaratabilirsiniz. Buradan Font boyutunu, family kısmını ve diğer ayarları kendinize göre seçtikten sonra OK diyebilirsiniz. artık sayfanızda bir css style eklediniz ve css styles dosyası (stles sheet) attach etmiş olduk.


- Eğer bu styler.css dosyasını hazırladığınız diğer sayfalarda da kullanmak isterseniz; CSS Styles panelinden Sağ üst köşedeki ok işaretine tılayarak Attach Style Sheet demelisniz. Bundan sonra dosyayı belirleyip ekleyebilirsiniz.

NOT: Eğer hazırladığınız bir CSS Style uyguladığınız text in CSS style'de belirlenmiş özelliklerinden birini Property Inspector üzerinden tekrar değiştimeye kalkarsanız, (yani CSS style özelliklerinde büyüklüğü 12 piksel olarak verilmiş bir text'in büyüklüğünü siz tekrar +3 gibi bşey olarak değiştirirseniz) CSS style devre dışı kalacaktır. Fakat şunu belirtelim: CSS style de belirtilmemiş özelliklerden birini değiştitrirseniz herhangi bir aksaklık çıkmayacaktır.


Rollover Text-linkler CSS stylelerin belkide en çok bilinen özelliklerinden biri olan rollover text-linkler, oldukça çok dile getirilen problemlerden biri. Bu özellik elbette Dreamweaver'da da mevcut. Dreamweaver'da bu işi yapmanın bir çok yolu olduğuda bir gerçek.
Bu özelliği basitleştiren Extension ların yanı sıra <HEAD> tagları arasına ekleyeceğiniz STYLE kodları ile de bu olayı gerçekleştirmek oldukça kolay. Sırayla bir bilinen bu tekniklerin hepsinie bir göz atalım isterseniz.
STYLE Koduyla:
- Sayfanızı Dreamweaver ile açtıktan sonra Code View'a geçerek <HEAD>...</HEAD> tagları arasına şu kodu yerleştirrmelisiniz:

<style type="text/css">
<!--
a:link {text-decoration: none; color: #006600;}
a:active {text-decoration: none; color: #ff0000;}
a:visited {text-decoration: none; color: darkgreen;}
a:hover {text-decoration: underline; color: #339900;}
//-->
</style>

- Daha sonra burada geçen color komutlarının karşısına kendi renklerinizin kodlarını veya ingilizce isimlerini yazarak kendi isteğiniz doğultusunda düzenleyebilirsiniz.
- Bir çok arkadaşın da takıldığı gibi linklerde altçizgi sorununuda bu kod sayesinde halledebiliriz. Örneğin linklerinizde altçizgi olmamasını ama üzerine gidince altçizgi (underline) çıkmasını istiyorsanız, bu kodda olduğu gibi; a:hover komutundaki text-decoration: komutu karşısına underline yazmalısınız.
- Uyguladığınız renkler Dreamweaver da göünmeyecektir ama Browser'ınızla kontrol edip sonuçları değerlendirmeniz mümkün.

NOT: a:link = linklerin rengi
a:active = linke tıklandığı anda çıkan renk
a:visited = ziyaret edilmiş link rengi
a:hover = linkin üzerine gidildiğinde değişen rollover renk
text-decoration komutları ise linklerin altıçizgilimi yoksa çizgisiz mi olması gerektiğini belirten komuttur.

On MauseOver: linkin üzerine gelince değişecek renk
On MauseOut: linklerin rengi
Visited Link: ziyaret edilmiş likin rengi.
- Tüm bu ayarları yaptıktan sonra OK diyip extension'ın kodu sayfanıza otomatik olarak eklemesini sağlayabilirsiniz.

CSS Style Editörü ile:
Bu yöntem ise biraz önce Extension yardımı ile anlattığımız yöntemin deyim yerindeyse manuel olarak yapılmasıdır.
- CSS style ediötrünü açık deyilse açıyoruz. Windows/CSS Styles veya Shift+F11
- New Style diyoruz ve açılan iletişim kutusundan Type kısmını Use CSS Selector'ü işaretliyoruz.
- Selector ksımında ise yanındaki drop down menüden yaralanarak ekleyeceğimiz style'a göre birinini seçiyoruz.
- OK dedikten sonra açılacak olan pencereden gerekli ayarları yaptıktan sonra tekrar OK diyip Style'ımızı tamamlıyoruz.


Bu üç yöntemden biri mutlaka sizi çözüme ulaştıaracaktır.

YAV BU Dreamweaver NEREDNEN İNDİRİCEZ.......

limewire bearshare gibi programlardan indirebilirisn yada www.download.com www.download.de gibi sitelerden aratabilirsin.

emeğine sağlık

Paylasim icin tsk ederim Klavyene Saglik Hocam !

Saygilarimla*

tşkler