Bildreamweaver

Dreamweaver şu anda piyasada bulunan en kaliteli ve kullanışlı html editörlerinden birisidir. Program WYSIWYG (What You See Is What You Get- Ne görüyorsan onu elde edersin) özelliğine sahip bir program olması sonucu da kodlarla uğraşmadan herhangi html sayfasını inşa edebilmekteyiz. Tabi bununla birlikte programda kodlarla çalışma imkanı da var ve hatta ikisini beraber yaparak kodlara müdahale edebileceksiniz. Programın arayüzü ilk bakışta karmaşık gibi görünüyor olsada biraz kullandıktan sonra alışacağınıza eminim. Bu konuda eksi olarak düşünebileceğimiz tek şey menülerin yerleşik olmaması diyebiliriz. Ama menüleri isteğimize göre kapatıp Kısaca araç çubuklarından ve menülerden başlayarak konularımıza giriş yapalım Bu dersimizde dreamweaverin temel öğelerini tanıyacağız ve basit bir web sayfası oluşturmayı öğreneceğiz. Bu işlem için öncelikle Dreamweaver'ın arayüzünü ve ilk etapta kullanacağımız panelleri tanıyalım. Eğer Word kullanmayı biraz biliyorsanız Dreamweaver' da temel yazı yazma ve nesne ekleme işlemlerini yapacağımız beyaz ekran sizi fazla şaşırtmayacaktır. İlk sayfamızı bu alana birkaç text yazarak ve bu textin rengini büyüklüğünü değiştirerek yapacağız yani tamamen word teki işlemler ile aynı. Burada gördüğünüz gibi ana bir ekran ve iki adet panel görmektesiniz. bu panellerin yanındaki açıklamalardan da anlaşılacağı gibi birisi Properties(özellikler) ve diğeri de Object(nesneler) paneli. Pencerenin en üst kısmında da Title yazan alana sayfamızın başlığını yazıyoruz. Eğer Object ve Properties panellerini kaybederseniz Window menüsünden tekrar yandaki gibi aktif hale getirebilirsiniz. Veya bu panellerin seçili olduğu halde ekranda görünmemeleri gibi bir durum ile karşılaşırsanız Window menüsünün altlarında göreceğiniz Arrange Panels butonuna basmanız panellerinizi geri kazanmanız için yeterli olacaktır. TÜRKÇE KARAKTERLER KULLANIMI İnternette ve Dreamweaver da Türkçe karakterlerin gösterilmesi için birkaç ayarlama yapılması gerekmektedir. Öncelikle Html dökümanlarında şu kodlar bulunmalıdır. <meta http-equiv="content-type" content"text/html; charset=iso-8859-9"> <meta http-equiv="content-type" content"text/html; charset=windows-1254"> Bu kodlardan ilki Macintosh'larda Türkçe karakterlerin düzgün görülebilmesi için ikincisi ise windows ortamında düzgün görülebilmesi içindir. Bu karakterleri çoğaltarak yaptığınız sayfanın kodları arasına yerleştirin. Dreamweaver'da Türkçe karakterleri görebilmek için ise Edit>Preferences'e girilip altta resimdede görülen menünün açılması sağlanmalı ve oradan sol tarafta bulunan menülerden Fonts/Encoding seçilmelidir. Burada yapılacak ayarlar şöyledir. Default Encoding ve Font Setting özellikleri Other yapılmalı ve Proportional Font, Fixed Font ve Code İnspector ayarlarını sonlarında (Türkçe) bulunacak şekilde ayarlayıp OK tuşuna tıklayıp Dreamweaver'ı yeniden başlatarak işlemimiz tamamlanmış olacaktır. Fontların Size (Büyüklüklerini) kendi isteğinize göre ayarlayabilirsiniz. Bu sorunu çözmek için yapmanız gereken ise edit menüsünden Preferences butonuna basmak ve aşağıdaki adımları takip etmek olacaktır.Bu ayarlamaları yaptıktan sonra Dreamweaverden birkez çıkıp tekrar girmeniz sorunu çözmek için yeterli olacaktır. Bu problemi de çözdükten sonra sıra geldi bir web sayfası yapmaya.... bu iş için önce sayfanıza bası yazılar yazın mesela bu benim ilk web sayfam hoşgeldiniz gibi. bu yazıları yazdıktan sonra Özellikler panelini kullanarak yazımızın rengini büyüklüğünü ve fontunu değiştirelim. Hizalama butonlarını kullanalım veyazımızı istediğimiz tarafa yaslayalım Bu işlemden sonra sıra sayfamızın arkaplan rengini değiştirmeye geldi tabiki illada benim sayfam beyaz olacak demiyorsanız. bu iş için iki yol var ya ekranda boş biryerde farenin sağtuşuna tıklayarak karşınıza çıkan menüden Page Properties'i yda Modify menüsünden Page Prorerties'i tıklayın sonuç aynı yere çıkacaktır. Buradan da sayfanızın başlığını değiştirebileceğininzi fark etmişsinizdir sanırım. Ayrıca bu resimde şimdilik anlamını bilmediğimiz bazı şeyler var ama önemli değil zamanı geldiğinde öğreneceğiz. Bütün bu işlemlerden sonra sayfamızı kaydedelim ve internet explorer dan bir görelim. SAYFA ÖZELLİKLERİ Dreamweaverda sayfa özelliklerini ayarlamak için Modify>Page Properties veya ctrl+j tuş kombinasyonunu kullanarak aşağıda resimde görülen menünün çıkması sağlanmalıdır. Bu menüde; Title sayfanızı tanımlayan ismi yazacağınız bölümdür ve browserlarda en üstte çıkar. Background İmage sayfanın arka planını resim eklemek için kullanılır. Background sayfanın arka planını renklendirmek için kullanılır. Text sayfada kullanılan yazıların rengini belirtmek için kullanılır. Visited Links ziyaret edilmiş link rengini değiştirmenize yarar. Links linklerinizin görünen rengini belirler. Active Links o anda kullanılan link yani link tıklantıdğı zaman görülen rengi değiştirmek için kullanılır. Left Margin sayfa içerisinde bulunan nesnelerin (yazı, resim, tablo vs.) sayfanın sol tarafına olan uzaklığını belirlemede kullanılır. Top Margin sayfanın üst kenara olan uzaklığını belirlemek için kullanılır. Margin Width sayfanın eni ile ilgili margin ayarları yapmanızı sağlar. Margin Height sayfanın boyu ile ilgili margin ayarları yapmanızı sağlar. Document encoding sayfada kullanılacak olan dil karakterinin tanımlaması burada yapılır. Tracing İmage anlamı izleyen şekildir. Sadece dreamweaver içerisinde görünen ve tarayıcı içerisinde görünmeyen bir resim ekler sayfanıza. İmage Transparancey tracing image'ın transparan ayarlarını yapmaya yarar ARAÇ ÇUBUKLARI Araç çubuklarını insert menüsünü tamami ile içinde barındıran (insert araç çubuğu diye adlandırıyorum) araç çubuğundan başlayarak tanımaya çalışalım 1. Character 1. Line break : 2. Non-breaking space : 3. Copyright : 4. Registered trademark : 5. Trademark : 6. Pound : 7. Yen : 8. Euro : 9. Left quote : 10. Right quote : 11. Em-dash : 12. Other character Bir alt satıra geçmek için kullanılır. Ekstra boşluk için kullanılır. © ® ™ £ ¥ € “ ” — Bunlara benzer diğer karakterler 2. Common 1. İmage : 2. Rollover image : 3. Table : 4. Tabular data: 5. Dtaw layer : 6. Navigasyon bar : Resim eklemek için kullanılır. Aktif resimler oluşturmamızı sağlar. Normal resim ve mouse üzerine gelince çıkacak resim belirleyebiliriz ve resme link verebiliriz. Tablo oluşturmak için kullanılır. Baska web dökümanlarından veriler almanızı sağlar. Layer dediğimiz katmanları oluşturmaya yarar. Rollover image'ın biraz daha geliştirilmiş hali. 7. Horizontal rule : 8. Email link : 9. Date 10. Server-side include : 11. Fireworks html : 12. Flash : 13. Flash button : 14. Flash text : 15. Shockwave : 16. Generator : Yatay çizgi. E-mail linki vermemizi sağlar. Gün, ay, yıl şeklinde tarih ve saat eklemek için kullanılır. Büyük site sayfalarında ortak olan kısımları diğer sayfalara daha kolay eklemek için kullanılır. Fireworks programı ile yapılan html sayfalarını import etmek için. Flash programıyla yapılan nesneleri sayfaya eklemek için kullanılır. Hazır flash butonlarını sayfada kullanmak için. Hazır flash yazıları kullanmak için. Shockwave eklemek için kullanılır. Flash, gif, jpeg, mov, png türü dosyalar ekleyip bunlara parametreler (kodlar) eklememizi sağlar. 3. Forms 1. Form : 2. Text field : 3. Button : 4. Checkbox : 5. Radio button : 6. List/menu : 7. File field : 8. İmage field : 9. Hidden field : 10. Jump menu : Form alanı açmak için kullanılır. Yazı alanı açmak için kullanılır. Formlar için buton oluşturmaya yarar. İşaretleme butonu oluşturur. Yuvarlak işaretleme butonu oluşturur. Liste şeklinde açılan menü oluşturur. Dosyalara gözatmak için menü oluşturur. Resim alanı oluşturur. Formlar için saklama alanı oluşturur. Liste şeklinde link menüsü oluşurmaya yarar. 4. Frames Bu bölüm çerçeve oluşturmaya yarar şekillerde görülen biçimlerde çerçeveler oluşturabilirsiniz. 5. Head 1. Meta : 2. Keywords : 3. Description : 4. Refresh : 5. Base : 6. Link : Özel bir meta tagı eklemek için kullanılır. Sitenin arama motorları tarafından bulunmasını sağlayan anahtar kelimeleri yazmak için kullanılır. Arama motorları için sitenin kısa tanımını ve içeriğini yazmanızı sağlar. Sayfanın belli aralıklarla yeniden yüklenmesini sağlamak için kullanılır. İnternet sayfanızın gerçek adresini belirtmek için kullanılır. Güncel sayfa ile başka sayfalar arasında bağlantı sağlamak için kullanılır. 6. İnvisbles 1. Named anchor : 2. Script : 3. Comment : Sayfa içinde herhangi bir yere link verebilmek için Link verilecek yere isim yazmakta kullanılır. Sayfaya script dilleri ile yazılan kodlar eklemek için kullanılır. Kodlar arasına yorum eklemek için kullanılır. Sayfada görünmez. 7. Special Bu bölüm ise sayfaya applet, plugin ve activex denetimlerini eklemenizi sağlar. Menüleri Tanıyalım Şimdi yukarıda gördüğünüz özellikler araç çubuğunu tanıyalım. 1. Format : 2. Size : 3. Renk Bölümü : 4. Bold ve İtalik : 5. Hizalama : 6. Listeleme : 7. Girinti : 8. Link : 9. Target : Yazılarımızın paragraf mı başlık mı olacağını buradan seçebiliriz. Yazılarımızın büyüklüğünü belirlemek için kullanırız. Yazılarımızın rengi buradan belirlenir. B ile bold yani kalın I ilke italik yazılar yazarız. Yazılarımızın sağa sola veya ortaya hizalanmasını sağlar. Sıralı ve sırasız listeler oluşturmak için kullanılır. Yzaılarımıza sağ veya sol girinti vermek için kullanılır. Herhangi bir şeye link vermek için burası kullanılır. Eğer link vermiş isek onun nerede açılacağını burada belirtiriz. Bu araç çubuğu kullandığınız nesnelere göre değişmektedir. Mesela tablo kullanıyorsanız tablo ile ilgili özellikler gösterilir, resim kullanıyorsanız resim ile ilgili özellikler gösterilir vb. Bunlar ilgili konularda anlatılacaktır. Bu gördüğünüz araç çubuğu ise sayfanızda kullanmak için oluşturduğunuz html ve css stillerini listeler ve kullanımınıza sunar, behaviors paneli ise dreamweaver ile birlikte gelen hazır JavaScript ve form bileşenlerini barındırır ve kullanımınıza sunar. Tabi bunlara ileride daha detaylı şekilde gireceğiz. Bu araç çubuğu ise iki paneli barındırır. Reference panelinde html , css ve javascript kodları örnekler halinde listelenmiş ve kullanım şekilleri açıklanmıştır. Güzel bir kaynak olarak kullanılabilir. Assets paneli ise sayfalarınızda kullanmış olduğunuz resimler, renkler, linkler, flash animasyonları, shockwave ile yapılmış çalışmalar, movieler(film,fragman vb.) scriptler ve kalıpları listeleyerek başka yerlerde kullanmanızı kolaylaştırmaktadır. Ayrıca favori olarakta bu tür şeyleri listeleyebilirsiniz. Bu araç çubuğu ise sayfanızda kullanmış olduğunuz frameleri (çerçeve), layersları kontrol etmeniz için yardımcı olmaktadır. Ayrıca history paneli ilede yaptığınız çalışmaları geri alma imkanı vermektedir. Yukarıdaki resim ise Dreamweaver'da sayfanın en altında görülmektedir. Sol tarafında çalıştığınız nesne ile ilgili kullanılan kodlar görülmektedir. Sağ tarafta ise, ilk simgeden başlayarak, site haritasının açılmasını sağlamakta, 2, 3, 4 ve 5. simgeler yukarıda bahsedilen panellerin (assets, html style, css style behaviors ve history) açılmasını sağlamakta ve son simge ise code inspector'unun açılmasını sağlamaktadır. Code inspector ile istediğimiz yerlere kod yazma imkanı sağlanmıştır. SİTE HARİTASI OLUŞTURMA Dreamweaver ile çalışmalarımıza başlamadan site haritanızı oluşturmanızı tavsiye ederim. Bu ne işinize yarayacak? Dreamwever yaptığınız çalışmaları harita şeklinde kaydederek sizin çalışmalarınızı kolaylaştırmıştır. site haritası ile yapmış olduğunuz çalışmalar çevresel olarak kaydedilip bir şema oluşturulmaktadır. Bu şekilde belgelerinize ulaşmak ve üzerinde değişiklikler yapmanız kolaylaşmakta ve daha sonra bu çalışmalarınız internete gönderilirken size kolaylıklar sağlamaktadır. Hatta internet üzerinden sayfalarınızı site haritası ile daha kolay şekilde kontrol edebileceksiniz. Site haritası oluşturmak için öncelikle tüm site çalışmalarınızı içerisine kaydedeceğiniz bir klasör oluşturun. Daha sonra Dreamweaver'ın üst bölümünden Site>New Site'yi tıklayın. Karşınıza yukarıdaki resimde olduğu gibi bir pencere açılacaktır. Site name bölümüne site haritasını belirtecek bir isim yazın, Local Root Folder bölümüne ise oluşturduğunuz yeni klasörün yolunu, yanındaki dosya simgesine tıklayarak, gösterin, Http Address bölümüne isterseniz sitenizin internet adresini yazabilirsiniz. Bu kadarını yaparak site haritasını oluşturmuş olursunuz. Yaptığınız tüm çalışmaları yeni oluşturduğunuz klasöre kaydetmelisiniz. Site haritanız hazır bundan sonra yaptığınız tüm çalışmalar şema halinde site haritasına kaydedilecektir. Tabi site haritası siz çalışırken hep açık olmalı.        Linkler yani bağlantılar bir web sitesi oluşturabilmek için bilinmesi gereken en önemli konudur. Bildiğiniz üzere geçen dersimizde sadece tek bir web sayfası yamıştık. Taktir edeceğiniz gibi internetteki siteler sadece bir sayfadan ibaret omuyor bazen onlarca bazen yüzlerce bazende binlerce sayfadan oluşan sitelere rastlamanız mümkün. Bu kadar sayfayı ana bir çatı altında toplamak ve bu sayfalar arasında geçişler yapabilmek için linkleri iyi bir şekilde öğrenmek gerekiyor.       biz linkler konusuna girerken daha çok kendi sitemiz içerisinde başaka bir sayfaya bağlantı yapma meselesi üzerine konuştuk ama işin daha başka boyutları olduğunu hatıratmak lazım sanırım. Mesela sayfanızda intenetteki bir siteye link vermek isterseniz farklı bir method yada size e-mail gönderebilmeleri için bir link yapmak isterseniz başka bir metod veya sayfanız içinde bir bölümden başka bir bölüme link vermek isterseniz yine başka birmetod kullanmanız gerekecektir.İşi daha fazla uzatmadan bu link çeşitlerini maddeler halinde yazalım isterseniz. 1-Site içi sayfalar arası linkler 2-İnternette bir siteye link (mesela yahoo yada hotmail sayfasına) 3-Ziyaretçinin size mail gönderebilmesi için e-mail linkleri 4-Sayfa içi linkler Şimdi bu link çeşitlerini sırasıyla açıklamaya çalışalım. Site içinde sayfalar arası linkler Yandaki şekle dikkatli bir şekilde bakarsak index isimli bir ana sayfa ve buna bağlı diğer üç sayfa bulunduğunu göreceğiz. İşte site içi linklerin temel mantığı bu resimde gzli. Bir ana sayfaya alt sayfaların bağlantısını yapmak. Tabiki alt sayfalardan ana sayfaya yada daha alt sayfalara bağlantı yapmak da mümkün. Ama biz işi fazla karmaşılaştırmadan bu şekildeki gibi bir bağlantıyı nasıl yapacağımızı gösterelim isterseniz. Öncelikle ilk yapmanız gereken sitenizi oluşturacağınız ve tüm resim ve dosyalarınızın içinde bulunacağı bir klasör oluşturmak. Bu işlemi sembolüne tıklayarak yada File menüsünden New Folder ifadesini seçerek sonra karşımıza gelen şeklindeki yeni klasörün ismini şeklinde kendi ismimizde yada istediğimiz bir isimde değiştirerek yapacağız. Bu işlem bittikten sonra sitemizde kullanacağımız tüm resimleri bu klasörün içerisine kopyalamamız lazım. Daha sonra da sitemizin ana sayfasını ve alt sayfalarını teker teker oluşturarak aynı klasörün içerisine kaydetmemiz gerekiyor.Bu işemleride tamamladıysanız sıra geldi sayfaları birbirine bağlamaya. Bu arada şunuda söylemek lazım ana sayfamız olacak olan giriş sayfasının ismi mutlaka index.html şeklinde olmalı.Alt sayfalar için böyle bir şart yok ama lat sayfaların ismi içinde uyulması gereken bazı kurallar var. 1-Dosya isimleri küçük harfle oluşturulmalı 2-Dosya isimlerinde ş,ı,ç,ğ,ü,ö gibi türkçe karakterler kesinlikle kullanılmamalı 3-Dosya isimleri birden fazla kelimden oluşuyorsa kelimeler arasında boşluk bırakılmamalı bu kurallara uymanız linklerin sağlıklı bir şekilde çalışması için gereklidir. sayfalarımızı yandaki gibi tek tek oluşturup kalsörümüze kardettiysek index.html sayfasını Dreamweaver da açalım.Daha sonra link vermek istediğimiz yazıyı aşağıdaki gibi seçelim. sonra yine aşağıdaki şekilde olduğu gibi özellikler panelinde Link yazısının karşısındaki klasör resmine birkez tıklayalım Şimdi karşımıza "Selcet File" isimli bir pencere gelecek gelecek bu pencereden bağlantı yapmak istediğimiz dosyayı aşağıdaki gibi seçelim. ve enter tuşuna basalım. Link verdiğimiz yazının rengi değişecek ve altı çizilecektir. Aynı şekilde diğer link vermek istediğimiz yazıları da tek tek seçip aynı işlemleri tekrarlayalım. Tüm linkleri yaptıktan sonra alt sayfalarımızı Dreamweaver'da açarak sayfaların en altına yazmış olduğumuz ana sayfaya dönüş yazısını seçerek index.html dosyasına link verelim. Link verilen yazıyı seçtiğinizde özellikler penceresinde yandaki resimde gördüğünüz gibi link vermiş olduğumuz dosya nın adı ve uzantısını görürsünüz. Eğer linkinizde herhangi bir hata varsa bu yazıyı silerek link işlemini tekrarlayınız. Daha sonra da linklerin çalışıp çalışmadığını test etmek için My Computer'den Hard diski oradan da Klasörünüzü seçin klasörün içinden de index.html. isimli dosyayı seçip Enter tuşuna bastığınızda sayfanız Internet Explorer da gösterilecektir burada linklerinize tıklayarak test ediniz. Linklerinizi düzgün yaptıysanız yazının üzerine geldiğinizde fare imleci el şeklini alacaktır. Bu bu yazıda bir link olduğu anlamıdan gelir. Şimdi fareyi tıkayın ve link verdiğiniz sayfaya gidin buradan da ana sayfaya dönüş için yaptığınız linke tıklayarak ana sayfaya dönün. evet bu iş bu kadar....Sıra geldi diğer linklere... Site Dışı Linkler web sayfamızdan internetteki bir sayfaya link vermek istediğimiz sitemiz dışına bir bağlantı yapmamız gerekir. bu tür bir bağlantı yapmak için link vereceğimiz sitenin ismini sayfamıza yazalım. Sonra bu yazıyı fare ile seçerek properties yani özellikler panelinde Link yazısının karşısındaki kutucuğa sitenin tam adresini yazalım. Burada dikkat etmemiz gereken bir husus var, Örneğin Fatih Üniversitesi'ne link vermek istersek link kısmına www.fatih.edu.tr yazmanız yeterli olmayacak ve linkiniz çalışmayacaktır. Adresi tam olarak http://www.fatih.edu.tr şeklinde yazmamız gerekiyor. yandaki örneğe bakarsanız bunu daha iyi anlayabilirsiniz. bu örnekte dikkatinizi çekmesi gereken bir nokta daha var bu da "Target : _blank " ifadesi. Eğer verdiğiniz linkin yeni bir sayfada açılmasını istiyorsanız target olarak _blank'i seçmeniz lazım. Bu genellikle internete verilen linklerede sık kullanılan bir özelliktir. E-mail Linkleri Web sayfalarında görmüşsünüzdür sayfayı tasarlayan kişi genellikle " E-mail Gönderin, Bize Yazın, Görüşlerinizi yazın vb." şeklinde yazılar ile kendisine e-mail atılmasını ister ve siz bu linke tıkladığınızda bilgisayarınızda Outlook programınız çalışır ve gönderilecek kişi kısmında o kişinin e-mail adresi yazar bu hemen hemen herkesin başına gelmiştir sanırım. İşte bu şekilde linklerin nasıl yapıldığını bu bölümde öğrenmeye çalışacağız. Sayfamızda e-mail linki oluşturmanın iki yolu var birinci yol; aynı internette bir siteye link verdiğimiz zaman yaptığımız gibi link vereceğimiz yazıyı yazıyoruz (mesela E-mail Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna mailto:mbasti@fatih.edu.tr gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz. Aynı aşağıdaki şekilde gördüğünüz gibi... İkinci e-mail linki ekleme metodu iste object panelini kullanmak.Bu daha kolay bir yöntem. Bunun için sayfada herhangi bir yazı yazmıyoruz sadece mail linkini vermek istediğimiz yere fareyi konumlandırıyoruz sonra object panelinden insert E-mail link butonuna basıyoruz. buradan da karşımıza aşağıdaki pencere gelecek bu pencerede üst tarafa linkin yazısını alt tarafa da email adresimizi yazıyoruz. Ve enter tuşuna basıyoruz Sayfa İçi Linkler Bazen web sayfalarımız çok uzun olabilir bu gibi durumlarda sayfamızın kolay kullanılabilir olamsını sağlamak için sayfada bir bölümden diğer bir bölüme, sayfanın sonundan başına link vermemiz gerekir.(örneğin bir bu sayfada bu teknik kullanılmıştır.) Bunun için yapmamız gereken önce object panelimizin görünümünü değiştirmek olacaktır. Sonra sayfada link vereceğimiz bölümlere işaret koymamız gerekiyor. İşaret kyacağımız yere fareyi konumlandırdıktan sonra çapa işaretine tıklıyoruz karşımıza aşağıdaki gibi bir pencere gelecektir. Bu pencerede Name yazan yere bir isim vermemiz gerekiyor bu isimde türkçe karekter kullanmamaya dikkat edelim. sonra da yine enter... Şimdi işaret koyduğumuz yere sayfanın istediğimiz yerinde link verebiliriz. Link vermek için link yazısını seçelim (biz sayfanın sonunda başına link verdiğimizi varsayıyoruz.) Properties panelinde link kutucuğuna şeklinde diyez ve sonrasında da az önce çapaya verdiğimiz ismi yazıyor ve enter tuşuna basıyoruz. (diyez işaretini çıkartmak için klavyeden Alt Gr tuşu ile birlikte 3 tuşuna basınız.) Şimdi sayfamızı kaydedip internet explorer da test edebilirz.. LİNK VERME Dreamweaver da yazılarımıza ve resimlerimize link vermeyi görelim. Önce yazılarımıza nasıl link verebiliriz bunu belirleyelim. Öncelikle yazmış olduğumuz bir yazıyı seçili duruma getirmeliyiz. Daha sonra aşağıdaki resimdede görüldüğü gibi Link bölümüne; eğer bu bir adres ise http://www.webgezegeni.kolayweb.com şeklinde yazarak adresi girmeliyiz. Adres değilde bir resim olabilir veya başka sayfalarınıza gidilmesi için link veriyor olabilirsiniz yani bu sizin kendi dosyalarınız arasında olabilir. O zaman yandaki dosya simgesini tıklayarak resmin veya sayfanın olduğu yeri gösterebilirsiniz. Burada dikkat edilecek nokta şudur. Resim çalışma klasörünüzün içinde yer almalı. Bu klasör içinde başka bir klasör içerisinde olması farketmez.Olayı daha ayrıntılkı anlatalım. Çalışmalarınızı kaydetmek için bir dosya oluşturdunuz mesela Web diye bir dosya olsun. Bu dosyanın içerisinde resimlerinizi ayrı bir dosyaya koymuş olabilirsiniz buna da resimler diye bir ad verdiniz. Sayfalarınız ile resimleriniz farklı yerlerde olacaktır. Eğer herhangi bir sayfanızda bir resme link verecek olursanız dosyanın yolu şu olmalıdır (resmin adı araba.jp olsun) resim/araba.jpg yani link bölümüne bunu yazmalısınız. Site haritası yapmamış iseniz dosya simgesine tıklayıp resmin yerini tanıttığınız zaman file:///C|/resimler/araba.jpg gibi birşeyler çıkacaktır. Bu şekilde bir link verilmesi sonucu dosyalarınız internete gönderildiği zaman resmin görülmemesine yol açacaktır. Örneklerimizi artıralım. Web klasörümüz ana klasör olsun içerisinde resimler klasörü resimlerin olduğu ve dreamwever derslerinin olduğu dreamweaver diye bir klasör olsun ve içerisinde de dr1.htm diye bir sayfa olsun. dr1.htm sayfasında bir resme link verecek olursak ve bu resim resim dosyasının içinde motor.jpg olacak olursa bunun link verirken yolu ../resimler / motor.jpg olmalıdır. Resimdede gördüğünüz gibi dr1.htm sinde motor.jpg linki için öncelikle bir alt klasöre inmeliyiz. Bunu ../ ile yaparız. bunu yapınca web klasörünün içerisine gelmiş oluruz. Daha sonra resimler klasörüne girip motor.jpg yi gösteririz. Toplam olarak ../resimler/motor.jpg yazmış olduk. Her alt klasöre inerken ../ kullanılır. Bunu artırabiliriz. ../../resimler/motor.jpg gibi. Bu durumda dreamweaver klasörünün içinde başka bir dosya varmış ordan geliyormuşuz gibi. Resimler klasörünün içinde başka bir klaör olursa (webresimleri gibi bir klasör varsa) buraya gelmek için resimler/webresimleri/kitap.jpg gibi olur. Burada şunuda hatırlatayım bu her şey için geçerli. İlla ki link verme olayı değildir bu. Sayfaya resim eklerkende aynı şey olmalı. Şu üstte görülen resmi sayfaya eklerken bende aynı yolu kullanmaktayım. .Bu resim olacak diye birşey yok. . Sayfa açılınca çalması için ses dosyası eklersiniz, flash animasyon eklersiniz vs. hep aynı şekilde yolunun tarifini yapmalısınız. Şimdi biraz da resimlere link vermeyi anlatalım. Önce resimi ekleyelim. Nasıldı. İnsert>image değil mi? Daha sonra menümüzden link yerini tıklayıp yukarıda anlattığım kıstaslara göre istediğimiz linki verebiliriz. Peki sayfa içerisinde link vereceksek. Alttaki Yukarı Çık Linki gibi. Bunu iki şekilde yapabiliriz. Link olarak #top yazmak bu üst demektir. Yani bir yazının veya resmin link bölümüne #top yazarsak buna tıklanınca üste çıkacaktır. İkinci yol ise Named Anchor kullanmak. Araç çubuğumuzdan İnvesibles'i seçip ordan da İnsert Named Anchor'u veya İnsert>İnvesible Tags>Named Anchor'u seçerek yapabiliriz. Bu nedir? Anchor Demir Atma anlamındadır. Sayfamızın herhangi bir yerine resim ekler gibi bir şey ekliyoruz ve bir isim veriyoruz ama bu tabi browserlarda görünmüyor. Bu ismi de link olarak kullanıp oraya gidilmesini sağlıyoruz. Artık bu nesneyi nereye koyacağınız size kalmış. Sayfa içerisinde nereye gidilmesini isterseniz oraya bu nesnemizi koyabilirsiniz. İsim bölümüne türkçe karakter kullanmadan birşeyler yazıp mesela galeri olsun link vereceğiniz şeyin link bölümüne de #galeri yamak işte bu kadar basit. Bununla ilgili örnek sayfa isterseniz şu sayfaya gidiniz. Bu sayfanın en üstünde duran listeler bu tür linklere örnektir ve ordada konu ile ilgili değişik açıklamalar mevcuttur. Şimdi linklerle ilgili Target konusunu açıklayalım. Target ile linklerimizin nerede açılacağını belirleriz. Burada; _blank _self _top _parent Bağlantı yeni bir pencerede açılır. Bağlantı aynı pencere içerisinde açılır. Bağlantı aynı pencere içerisinde en üstten itibaren açılır. Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. Text linklerinizin altı çizili olmasın istemiyor ve üzerlerine gelince renklerinin değişmesini istiyor iseniz. Konu ile ilgili şu sayfaya gidebilirsiniz. FLASH BUTTON Dreamweaver içerisinde bulunan hazır flash butonlarını kullanarak sayfalarınızı renklendirebilirsiniz. Bunun için Common araç çubuğundan İnsert Flash Button'u veya İnsert>İnteractive İmages>Falsh Button seçilerek aşağıdaki resimdeki gibi bir menü karşınıza çıkar. Bu menüde; Sample Butonun görünen halidir. Style bu bölümde hazır butonlar vardır zevkinize göre birini seçebilirsiniz. Button Text butonunuzun üzerinde görünecek olan yazıyı buraya yazarsınız. Font yazının karakterini belirlemek için kullanılır. Size yazının boyutudur. Link vereceğiniz linki belirtir. Target linkinizin nerede açılacağını belirtir. Bg Color Arka plan rengi için kullanılır. Save As ise butonunuzu kaydetceğiniz yeri ve butonun ismini belirler. Bu bilgileri girdikten sonra OK tuşuna basarak Flash butonunuz hazırlanmış olur. Not: http://www.macromedia.com/exchange adresinden yeni eklenen buttonları edinmeniz mümkün. FLASH TEXT Sayfalarınıza Flash ile yapılmış, üzerine geldiğiniz zaman rengi değişebilen link yazıları ekleyebilirsiniz. Bunun için Common araç çubuğundan İnsert Flash Text'i veya İnsert>İnteractive İmages>Flash Text kombinasyonunu kullanarak aşağıdaki resimde ki gibi bir menünün açılmasını sağlarsınız. Bu menüde Font yazınızın karakterini, Size boyutunu, Alttaki semboller Bold(kalın), İtalic, ve sağa, sola, ortaya hizalamanızı, Color yazınızın normal rengini, Rollover Color yazının üzerine gelince alacağı rengi Text yazmak istediğiniz yazıyı, Link vermek istediğiniz linki, Target nerede açılmasını istiyorsanız orayı belirtmenizi, Bg Color arka plan rengini, Save As ise oluşturduğunuz butonu kaydetmenizi sağlar. TEXT VE LİNK BİÇİMLENDİRME 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. Text'lerinizi biçimlendirmek için öncelikle text'i seçili hale getirin. Text üzerindeki ayarların büyük bir kısmını kısmını Propery Inspector menüsünden rahatlıkla ve zaman açısından da kolaylık sağlaması bakımından buradan yapmanız faydalı olacaktır. Seçtiğiniz yazının büyüklüğünü '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 'Unordered List', sıralanmanın 1 2 3 şekline olmasını sağlayan 'Ordered List' 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 geniş yazı biçimlendirme ayarlarına ulaşmak için Text menüsüne tıklamanız yeterli olacaktır. RESİM EKLEMEK Önce Object panelinden yandaki gibi insert image butonunu tıklayalım. Karşımıza aşağıdaki pecere çıkacaktır. Bu pencere bizim sayfaya ekleyeceğimiz resimi seçmemize yardımcı olan ve resmi görmemizi de sağlayan bir penceredir. Resmimizi seçelim ve Select butonuna basalım. Burada dikkat etmemiz gereken iki husus var; 1.Ekleyeceğimiz resim kaydettiğimiz web sayfası ile aynı klasörde olmalı 2.Resim ekleyeceğimiz sayfa önceden mutlaka kaydedilmiş olmalı. Eklediğimiz resmin özerine fare ile birkez tıklayarak resmi seçebilir sonrada resmimizin boyutlarını kenarlardaki siyah karecikleri kullanarak değiştirebiliriz. Resmi seçtiğimizde aynı zamanda Properties yani özellikler panelimizin görünümü değişecektir. Şimdi bu paneli kullanarak resmimize çerçeve ekleyebilir yada fare üzerine geldiğğinde resim hakkında bilgi veren açıklama yazısı ekleyebiliriz. Yine yazılarda olduğu gibi sağa sola yaslama ve ortalama işlemeleri de yapabiliriz. Dreamweaver'da image'dan kasıt sayfalarımıza resim eklemektir. Bunun için uzantısı .gif , .jpg, .jpeg, .png olan dosyalarınızı web sayfalarına ekleyebilirsiniz. Sayfalarınıza İmage eklemek için İnsert>İmage 'dan ulaşabilirsiniz. Ya da tuş kombinasyonlarında Ctrl+Alt+I ilede image menüsüne erişirsiniz.Yada objectlerden butonuna tıklayarakda ulaşabilirsiniz. Bu işe yeni başlayan tasarımcıların karşılaştıkları genel sorunlardan birisi resim eklediği halde o resimin browser'da görünmemesi. Bunun sebebi ise eklediği image'ın o dosyaya ait klasörün alt klasöründe olmaması. Yani siz sayfanıza bir resim ekliyorsanız ve resim bulunduğu dosyada resim.htm ise o resimin resim.htm ile aynı klasörde olması ya da resim.htm dosyasının alt klasöründen biri olan diyelimki images isimli bir klasörde olması gerekir. Resim eklemek için ; 1. İnsert>İmage tıklayın. 2. Prewiev'a bakarak ekleyeceğiniz resim dosyasını seçin. 3. Relative to seçeneğinin karşısındaki ifadeyi Document yapın. 4. Select'e tıklayın.  5. Resiminiz eklendi. Resim üzerinde değişiklik yapmak için ; 1. Resim'in üzerine 1 kez tıklayarak onu seçili yapın. 2. Properties'den istediğiniz değişiklikleri yapın. 3. Örenğin fare üzerine gelince farenin hemen alt kısmında yazı çıkmasını istiyorsanız resim seçili iken propertiesden alt seçeneğinin karşılığını girerseniz o yazı görünecektir. 4. Öreneğin resimin boyutlarını değiştirmek istiyorsanız bunu resim seçili iken resim üzerinde çıkan kalın çizgilerden büyültüp küçülterek yani istediğiniz boyutlara getirerek ya da properties'de W ve H seçeneklerinin karşılıklarını girerek düzenleyebilirsiniz. 5. Öreneğin resiminize link vermek istiyorsanız seçili iken İnsert>Link'i yada Properties'de Link yazısının karşılığına resime tıklandığında gideceği yeri yazmanız yeterli olacaktır. 6. Ayrıca yine resim seçili iken Align ayarlarını Properties'den yapmanız mümkün. Resim Ekleyelim Sayfalarımıza resim eklemek için İnsert İmage veya Common araç çubuğundan İnsert İmage tıklanmalıdır. Açılan menü sayesinde sayfanıza ekleyeceğiniz resmi seçerek sayfanıza ekleyebilirsiniz. Sayfanıza bir resim eklediğiniz zaman properties araç çubuğumuzdaki özelliklerimize gözatalım. Yukarıdaki resimde görülen menünün çıkması için resim seçili olmalıdır. Burada W resmin enini H boyunu belitmek için kullanılmaktadır. Sol üst köşede İmage 4k yazısının altındaki boşluk resme isim vermek için kullanılır. Src resmimizin bulunduğu yeri göstermektedir. Link ile resmimize livk verebilmekteyiz. Align resmimizi sayfa içerisinde Left (sola), Center (ortaya), Right(sağa) olacak şekilde hizalamaızı sağlar. Alt resmin üzerine mouse ile gelindiği zaman çıkacak yazıyı gösterir. Yukarıdaki Motor resminde olduğu gibi. V Space resmimize üst ve alttan boşluk bırakmak içindir. H Space sağ ve soldan boşluk vermek içindir. Target eğer resmimize link verildi ise bunun nerede açılacağını belirtir. Bu konu linkler bölümünde açıklanacaktır. Low Src Eğer büyük bir resim kullanmış iseniz bunun açılması biraz zaman alacaktır. 2-bitlik bir ön resim koyarak ziyaretçilerinizin ne görecekleri hakkında fikir edinmelerini sağlayabilirsiniz. Border resme kenarlık eklemek için kullanılır. Edit resmi bilgisayarınızda kayıtlı bir programda düzenlemeniz için resmi o programda açar. Borderın yanındaki semboller ise resmi hizalamak için. Sol alt köşede bulunan Map ise ileride anlatılacaktır. JUMP MENÜ EKLEMEK Sayfaya Jump menü eklemek Web sayfalarında çok sık gördüğümüz Jump menu, liste şeklindeki bir form alanındaki değerlerden istenileni seçerek ilgili linke gitmemizi sağlayan bir özelliktir. Bknz. Örnek sayfa Bir jump menü yapmak için öncelikle object menüyü Forms görünümüne getirelim. Jump menüyü sayfada nereye eklemek istiyorsak imlecimizi oraya konumlandıralım. Sonra Formas menüsünden insert jump menüye tıklayalım. (resim1) Karşımıza resim2 deki gibi bir pencere gelecektir.    Burada; Menu items: ekleyeceğimiz linklerin ve adlarının göründüğü alan, Text: Ekleyeceğimiz linkin adı, menü öğesi. When Selected, Go To URL: O seçenek seçildiğinde gidilecek olan sayfa. Open URLs In: Gidilecek linkin hangi pencerede açılacağı. Eğer frameli bir sayfa ise burada seçeceğimiz değer target taki gibidir. Örneğin mainFrame seçmek gibi. Frame yoksa Main Window seçili kalabilir. Option seçeneklerinde ise; Insert Go Button After Menu: Listemizin sağına bir go butonu ekler. Linki seçtiğimizde go butonuna tıkladıktan sonra sayfaya gidilir. Bu seçenek seçili değil olarak bırakılırsa, linki seçtiğimiz an ilgili sayfaya gidecektir. Select First Item After URL Change: İsmindende anlaşılacağı üzere,link değişse de Jump Menünün ilk elemanı hep görünen eleman durumundadır. Seçeneklerin anlamlarını gördüğümüze göre, örneğimizi yapmaya başlayabiliriz. İlk olarak text alanına about yazıyoruz. Go to URL ye about.htm tanımlıyoruz. Bu örneğimiz Frame li olmadığı için menu name i aynı bırakıyoruz. Go butonlu liste olsun diye de options tan ilk seçeneği seçiyoruz. Sonra üstteki + butonu ile ikinci linkimiz içinde aynı değerleri giriyoruz. Bu işlemi kaç tane linkimiz var ise tekrarlıyoruz. Linklerimizi tamamladıktan sonra Ok tuşuna basıp işlemimizi tamamlıyoruz. (resim3) Sayfamızı kaydediyoruz. Şimdi örneğimize browserda bakabiliriz. Varsayalım ki Jump menünüzde hata var ve düzeltmek istiyorsunuz ozaman sayfaya eklediğiniz Jump Menüyü seçiyorsunuz ve Properties panelinden List Value butonuna tıklıyorsunuz buradan jump Menünüzü edit edebilirsiniz. Hadi kolay gelsin.... İMAGE MAP EKLEMEK Diyelimki sayfanızın herhangi bir bölümüne bir resim eklediniz ve bu resim üzerinde tümüne değilde kendi istediğiniz,kendi seştiğiniz bir bölüme tıklandığında o linke gitsin. Yani İmage Map tüm resime link vermiyor. Siz nereyi isterseniz oraya link veriyor (Harika değil mi?). İmage Map'i kullanmak için ; 1. Resiminizi seçin. 2. Properties'de resimde görüldüğü gibi bir bölüm görmüş olmanız lazım. Kırmızı ile işaretli olan bölümü gördüyseniz devam edebiliriz. 3. Bu 3 simgeden bir tanseinin üzerine 1 kez tıklayın. 4. Sonra resiminizin üzerine gelin ve link vermek istediğiniz alanı seçin ve properties'den gitmesini istediğiniz linki, browserın neresinde açılcağını ve o link üzerine gelindiğinde hangi yazı çıkmasını istediğiniz gibi ayarları yapmanız mümkün.Şimdi sıra uygulama yapmada. Kolay gelsin... Image Map(Resim Haritaları) Image map, bir resme birden fazla link vermek amacıyla kullanılır. Resmin belirli bölümleri kare, daire yada poligon alanlarla seçilerek linkler verilebilir. Bu işlemi gerçekleştirmek için image map kullanılır. Şimdi örnek resmimiz üzerinde bir uygulama yapalım. İlk olarak Resim1 deki resimi sayfamıza ekliyoruz. (object menüsünden insert image ile) Resmimizi seçiyoruz. Properties penceresine baktığımızda sol alt köşede map alanı görülecektir. Bu alanda; Map: Map adı herhangi bir isim veriyoruz. Pointer Hotspot Tool: ok şeklindeki simge. Oluşturduğumuz map alanlarını taşımak amacıyla kullanılır. Ayrıca yapılan bir poligonal seçimi iptal etmek işlevinde de kullanılır. Rectangular Hotspot Tool: Dörtgen şeklinde bir map alanı belirlemek için kullanılır. Oval Hotspot Tool: Dairesel bir map alanı belirlemek için kullanılır. Polygon Hotspot Tool: Çokgen bir alan seçmek için kullanılır. Örneğimizde Hakan Ünsal, Okan ve Hakan Şükür' de Polygon Hotspot, Arif te ise Oval Hot spot kullanacağız.   ilk olarak map adını verdikten sonra polygon Hotspot butonuna basıyoruz, mouse ile Hakan Ünsal' ı seçecek şekilde bir polygon çiziyoruz. Bu işlemi bitirdikten sonra properties da Link kısmına hunsal.htm linkini, target değerine eğer frame kullanıyorsak target ifadesini (mainFrame v.b.), Alt alanına ise (mouse link üzerine gelince görünecek olan mesaj) Hakan Ünsal yazıyoruz. Aynı işlemi Okan ve Hakan Şükür içinde gerçekleştiriyoruz. Bunu yapmadan önce polygon seçimini pasif hale getirmek için   pointer hotspot ile resmin boş bir alanına bir kez tıklıyoruz. Aksi takdirde Hakan Ünsal' ın üzerindeki polygonun devamını çizme hatası ortaya çıkabilir. Son olarak Arif in resminin üzerine Oval Hotspot ile bir daire çizelim. Properties' dan Oval hotspot u seçtikten sonra bir daire çiziyoruz. Sonra Pointer Hotspot ile bu daireyi istediğimiz yere konumlandırıyoruz. Linki, target ve alt değerini giriyoruz. Image map imiz artık hazır. Kaydedelim ve örneğimize göz atalım. ROLLOVER İMAGE Fare ile üzeirne gelindiğinde önceden hazırlanan image'ın değişmesini ve link verildiyse eğer o linke gitmesini sağlar. Dreamweaver'ın bu özelliği de işlerimizi kolaylaştırmakta olup yine ustalığını göstermekte. Bence en yakın zamanda dreamweaver hakkındaki bilgilerinizi arttırın.Tabi bu işe gönül verdiyseniz. Bu seçeneğe ulaşmak için ; İnsert>İnteractive İmages>Rollover İmages 'dan veya Object nesnesinden direkt Rollover İmage'a tıklayarak ulaşabilirsiniz. Karşınıza şu menü çıkması gerekiyor ; Orginal Image bölümüne asıl olan image'ı seçmeniz, Rollover Image bölümüne fare üzerine geldiğinde görünmesi gereken image'ı seçmeniz When Clicked, Go To Url bölümünede fare üzerine tıklanıldığında hangi linke gitcekse onu yazmanız gerekiyor.Tabi bütün bu işlemler yapıldıktan sonra ok butonuna basmayı unutmayacağınıza eminim. ROLLOVER TEXT İMAGE 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 Extension ile, Head tagları arasına yazacağımız kodlar ile veya Css Styles'ler ile yapmamız mümkün. Dreamweaver sen harikasın. Örneğin Head tagları arasına yazacağımız Style kodu ile nasıl yapacağımıza bakalım.Öncelikle yeni bir döküman açın ve F10 ile html bölümündeki head tagları arasına şu kodları yazın. <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> Buradaki kodlarda color yazılarının yanındaki kodları istediğiniz renk kodunu kafanıza göre girerek veya rengin kodunu bilmiyorsanız o rengin ingilizce karşılığını yazarak kendi isteğinize göre değiştirebilirsiniz. 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. Burada ; 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. Önemli : Bu arada yine telaşa kapılmayın.Çünkü yaptıklarınız dreamweaver'da görünmeyebilir ama unutmayınki browserda mutlaka görünecektir. Şimdi gelelim Extension ile nasıl yapıldığına.Arkadaşlar bu Extensionlar gerçekten işimizi kolaylaştırıyor bu nedenle diğer extensionlarıda en yakın zamanda elde edin. Öncelikle Text Link Rollover Extension 'u bilgisayarınıza indirin. Sonra bu zip dosyasını açın ve çalıştırın.Yani kurun.Sonra dreamweaver'da object menüsünde birşey görmeniz gerekiyor. Işte şekilde de göreceğiniz üzere kırmızı daire içersinde işaretlenmiş olan şey sizin az önce kurduğunuz extension.Işte buna 1 kez tıklayın. Resim 1 Extension menüsündeki açıklamalar şu şekilde ; 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. Resim 2 Diğer bir yöntemde Css Styles ile; Css Styles'i açıyoruz.New Style diyoruz ve Type kısmından Use CSS Selector'ü seçili yapıyoruz.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. SWAP İMAGE   Yanda gördüğünüz swap image ile yapılmış bir örnektir. Soldaki resimlerin üzerine geldiğiniz zaman sağda duran resim değişmektedir. Aslında sağda değişşen resmi büyük yapabilirdim ama sayfanın boyutu artacaktı. Siz isterseniz resimlerin büyük halini yapabilirsiniz. Böyle etkileşimli bir menü yapmak için en az 5 resim dosyasına ihtiyacınız var. 2tanesi solda duran resimler için 1 tanesi sağda duran tek resim için kalan 2 si ise solda ki resimlerin üzerine gelince sağda çıkacak olan resimlerdir. Ben örneğimde 3 resim dosyası kullandım çünkü üzerlerine gelince çıkan resimler aynı. Siz büyüklerini kullanmak isterseniz bu sayı 5'e çıkar. Burda önemli olan konu sağda ki resimle çıkacak olan resimler ayunı boyutlarda olmalı yoksa resimlerin kalitesi bozulmakta. Eğer gerekli dosyalar hazırsa örneğe başlayalım. Öncelikle bir tablo oluşturup resimlerinizi yerleştirin. Daha sonra resimleri adlandırın. Nasılmı resmi seçili hale getirdiğinizde özellikler araç çubuğunda sol üzt köşedeki resim görülen bölümün yanına herhangi bir isim yazarak resimleri adlandırın ve hepsine ayrı isimler verin. Mesela ben a,b ve c isimlerini kullandım. Bu işlemi bitirdikten sonra ilk resmimizi (a resmi) seçip Behaviors menüsünden Swap İmage'ı seçin. (Window>Behaviors + sembolüne basarak>Swap İmage) Aşağıdaki gibi bir menü çıkar karşınıza. Her resim için aynı işlemleri ayrı ayrı yapacağız. Bu menüde; İmages bölümü sayfa içerisinde bulunan tüm resim dosyalarınızı görüntüler. Yani çok fazla şey varsa şaşırmayın. Bizim için önemli olan isim verdiklerimiz. a resminin üzerine gelince ben c resminin değişmesini istiyorum onun için burada image"c"'yi seçiyorum. Set Source to buraya ise değişecek resmi gösteriyorum. Diğer ayarlamalarla oynamanıza gerek yok. OK tuşuna basınca a resmi için işlem tamam. Şimdi b remi için aynı işlemi tekrarlayıp Ok tuşuna basarak komple işlemi bitirmiş oluruz. Bu şekilde etkileşimli menümüz hazırlanmış olur. Bununla ilgili hazırlamış olduğum örneği inceleyebilirsiniz. 10 tane güzel otomobil resmi Swap image ile yapılmış bir örnek. Zip'li halde dosyadadır boyutu ise 341kb ortalama 1 dakika içerisinde indirirsiniz. İndirmek için tıklayınız. META TAGLAR Meta_Tag'lar arama motorlarında sitenizin üst sıralrada görünmesinde yardımcı olur. Meta Tag içersine yazacağınız her bir şey Head tagı arasına meta kodları içersinde kaydolur. Sayfalarınıza Meta Tag eklemek için İnsert>Head Tags'a ve buradanda az sonra açıklayacağım menülerden birtanesine tıklamanız yeterli olacaktır. İşte bu seçeneklerin anlamları ; Meta: Ekleyeceğeiniz özel bir Tag için kullanın. Keywords: Sitenizin arama motorlarında bulunması için gerekli olan anahtar kelimeleri girin. Description: Sitenizin Arama motorlarında görünecek olan kısa tanımı, içerik v.s. Refresh: Sayfanın belli aralıklarla tazelenmesini (yeniden yüklenmesini) sağlayan tag. Link: Sayfanızın arama motorlarında görünecek olan adresi. Eğer sitenizin hitini artırmak istiyorsanız Meta_Tag'lar tam size göre. TABLO KULLANIMI Web sayfanıza yeni bir tablo eklemek için yapmanız gereken objects (nesneler) panelinden insert table butonuna birkez tıklamak... Bu işlemden sonra karşımıza ekleyeceğimiz tablonun özelliklerini belirtmemiz gereken aşağıdaki gibi bir pencere çıkacaktır . bu pencerede tablomuzun satır ve sütun sayısı gibi bilgileri girdikten sonra ok tuşuna basalım. Tablomuz sayfamıza eklenecektir. Şimdi sıra eklediğimiz tablonun özelliklerini değiştirmeye daha doğrusu geliştirmeye geldi. Tablomuzun özelliklerini değiştirmeden önce sayfaya niçin tablo ekleriz konusuna gelelim.   Bir web sayfasında tablo iki amaç için kullanılır; 1.) Word ve Excel de ne amaçla kullanıyorsanız onun için. Yani sayfamızda tablo şeklinde gösterdiğimizde daha kolay anlaşılacak olan bir veri var ise bunu tablo kullanarak gösteririz.Örneğin aşağıdaki tablo gibi... Sanırım buna benzer tabloları word te de kullanmışsınızdır.eğer bu tür hiç tablo görmediyseniz kendinizi fazla yormayın ve vakit erken iken siz bu web tasarımı işinden vazgeçin:-)) 2.) Tabloların ikinci kullanılış amacı ise web sayfalarının dizaynını kolaylaştırmak ve tabloyu bir dizayn aracı olarak kullanmaktır. Mesela bir web sayfasında resimleri ve yazıları aynı anda yan yana kullanmak istiyorsunuz bu gibi durumlarda tablolar en büyük yardımcılardır. Ama burada dikkat edilmesi gereken en önemli nokta bu tabloların border’larının (çerçeve) sıfır olmasıdır. Aşağıda bu tür tablolara bir örnek görüyorsunuz... Bu tablonun çerçevelerine dikkat ederseniz kesik çizgilerden oluştuğunu görürsünüz. Bu çizgiler İ. Explorer da görünmez. Çünkü Border değeri (çerçeve) sıfırdır. Şimdi de sıra tablomuzun üzerinde değişiklik yapmaya geldi(mesela satır sayısını değiştirmek hücrelerin genişliklerini değişitirmek hücrelerin arka plan renkleri ile oynamak vb) değişiklik yapmak için önce tabloyu seçmeniz lazım. Tabloyu seçmek için tablonunsol üst köşesine gelin ve fare dört taraflı ok işareti şeklinde iken tıklayın. aşağıdaki gibi bir özellikler pencereniz olacak.... Bu penceredeki her değeri teker teker değiştirin ve tablonuzdaki değişiklikleri gözlemleyin... Burada tablonuz ile ilgili yapamayacağınız değişiklik yoktur... Bütün bu işlemlerden sonra sayfanızı kaydedip internet tarayıcınızdan görebilrisiniz... Web sayfalarında table kullanmak her yönden işinizi kolaylaştıracaktır. Mesela örnek vereyim,bu sayfada gördüğünüz en üstteki tables yazısı şuan okudğunuz yazı, eklediğinim resimler falan herbirisi ayrı bir tablo içersinde ve border'ı yani dış tablo kenarının kalınlığı 0(sıfır). Size önerim her yaptığınız bir işlemi tablo içersinde kullanın. Böylece yapmış olduğunuz diğer işlemleri falan bozmadan düzenleyebilirsiniz. Tablo eklemek için İnsert>Table veya Ctrl+Alt+T tuş kombinasyonuyla veya Window>Objekts'ten tablo simgesine tıklayarak ulaşabilirsiniz.Bu durumda karşınıza şu menü çıkacak. Bu menüde ; Columns(Sütun): dikey aşağıya doğru uzanan kolonlardır, Rows(Satır): Yatay sıralar, With: Table ın genişliği, Border: Kenar çizgilerinin kalınlığı (eğer bunu o olarak girerseniz borderlar görünmez, bu tüm uygulamalar için geçerlidir), Cell Pladding: Table'ın hücrelerinin gevşeklik payı, Cell Spacing: Hücreler arası boşlukğun değeri Kendi ayarlarınızı yaptıktan sonra Ok butonuna basınız. Örneğin 3 satır 3 sütundan oluşan ve borderının 1 olduğu bir tablo aşağıdaki gibi görüncektir.                   Bu tabloların içersinde istediğiniz değişikliği yapabilir ve ekleyebilirsiniz. Seçtiğiniz bir tablonun üzerindeki değişikliği Property Inspector ile yapabilirsiniz. ...:::Property Inspector:::... Property Inspector'ü sağ alt köşesindeki ok işaretine basarak geniş özellikli ve az özellikli seçeneklerine göre ayarlayabilirsiniz. Ayrıca Commands>Format Table seçeneğine tıklayarak tablolarınızdaki yazıların stillerini , backgroundlarını , alignlerini , yazı stylerini , borderı v.s. özellikleri kendi isteğinize göre düzenleyebilirsiniz. Commands>Format Table seçeneğine tıkladığınızda aşağıdaki görünümünü elde etmeniz gerekiyor. Not - 1: Tablonuzun özelliklerini aynı word te olduğu gibi AutoFormat özelliğini kullanarak değiştirebilirsiniz. Bunun için tabloyu seçin ve Commands menüsünden Format seçeneğini tıklayın ve buradan beğendiğiniz bir sitili seçin... Not - 2:Tablonuzun yada herhangi bir hücrenin arkaplanına resim ekleyecekseniz önce sayfanızın kaydedilmiş olması gerektiğini unutmayınız.. FRAMELER Web sayfalarında frameler bir browser penceresinde (yani internet explorer vb.) birdan fazla web sayfasını aynı anda göstermektir. Daha önce girdiğiniz web sayfalarında muhakkak görmüşsünüzdür bazı web sayfalarının bazı bölümleri sürekli sayfada sabit olarak durur özellikle sayfanın menü kısmı ve üstte bulunan reklam banner kısmı buna en güzel örnektir. İşte bu tür bazı yerleri hiç değişmeyen sayfalar oluşturmamnın yolu sayfada frame kullanmaktan geçer. Web sayfanızı framelere ayırmak için yapmanız gereken objects (nesneler) panelinden Common yazısının hemen yanındaki aşağıya doğru küçük ok işaretine bir kez tıklamak... Bu ok işaretine tıkladığınızda karşınıza bir menü gelecek buradan "Frames" seçeneğini seçin. Frames seçeneğini seçtiğimizde karşımıza hangi tür bir frame seçeceğimizibelirlemeye yarayan pencere gelecektir. Burada tek yapmanız gereken size uygun bir frame çeşidini seçmek.Frame çeşidini seçtiğinizde sayfanız hemen framelere ayrılacaktır. Bu işlemden sonra DW ekranında gördüğünüz her bir çerçeve ayrı bir web sayfasıdır aslında. Şimdi bu sayfaların teker teker bd color larını değiştirirseniz hepsinin bir birinden bağımsız sayfalar olduğunu daha iyi anlarsınız. Frame bir sayfa içersinde birden fazla sayfa kullanımı demektir. Örneğin bu framelerden bir tanesi sabit kalıp aynı sayfa içersinde siz o frame içersindeki likler tıklayarak yine aynı sayfa içersindeki diğer frame içersinden linkine tıkladığınız sayfayı açabilirsiniz. Buda size ve kullanıcılara zaman açısından yardımcı olur. Frame eklemek için Insert>Frame menüsünden istediğiniz frame'i ekleyebilirsiniz.Ya da objects nesnesinden en üst butona 1 kez tıklayarak Frames'i seçerseniz kısayoldan ulaşmanızı sağlarsınız. Shift+F2'ye basarak ya da Widow>Frames'den Frameminizi aktif hale geitrin. Objects nesnesine tıklayıp Frames 'i seçtiğiniz zaman yandaki gibi bir menü elde etmeniz gerekiyor. Frames'i aktif hale getirdikten sonra bunula ilgili ayarları yine Property Inspector'den yapabilirsiniz. Eğer framelerinizde kaydırma çubuğu olmasını istemiyorsanız Property Inspector menüsünden Scrool seçeneğini No yapın. Oluşturduğunuz frameleri kaydederken her bir frame'i ayrı bir htm sayfası olarak kaydedeceksiniz. Yani her bir frame ayrı bir htm sayfasıdır. Kaydederken File>Save Frame menüsünü kullanmanız gerekiyor. Her bir frame'i ayrı ayrı kaydettikten sonra geldi sıra tüm bu framelerin dış kalıbını oluşturan bütün frameleri birlikte kaydetmeye.Bunun içinde File>Save All Frame menüsünü kullanmanız gerekecek.Tüm bu işlemleri yaptıktan sonra framelerimiz artık hazır bizi bekliyor olacak.  Framenizin borderının görünmesi için borderının görünmesini istediğiniz frame'i seçip Property Inspector'den Borders yazan seçeneği Yes yapın. Yaptıgınız her bir freme'i kaydederken File>Save Frame As olarak kaydedin. Diyelimki bir frame içersindeki bir yazı veya resim gibi bir nesneye link verecekseniz ; Linki verdikten sonra Property Inspector'deki Target yazan yerden size uygun olanı seçmeniz gerekiyor.Ben size bu seçeneklerin anlamlarını veriyorum ; _Blank: Tıklanan sayfayı hiç bozmadan yeni bir navigator penceresi açarak linki o pencere içinde açar. _self: Varsayılan ayarladaki framei açar. _top: En dıştaki framei değişmesini sağlayarak tüm framerlin yerini alan tek bir sayfa açılmasını sağlar (örnek sağ taraftaki menüdeki ana sayfa ve bölümler linkleri gibi) _mainFrame: Ana Framei değişmesini sağlar (eğer sol taraftaki menu üzerindeki bir linke tıklandığında sağ taraftaki ana sayfanın değişmesini istiyorsanız bunu kullanacaksınız) _leftFrame, _ rightFrame, topFrame ... eklediğiniz framelere göre istediğiniz frame'in değişmesini sağlayabilirsiniz. Benden tavsiye, açın bir yeni dosya ve bu seçenekleri tek tek deneyin. Öğrendiklerimiz kavramamaız için uygulama yapmamız çok şart. Bu arada unutmadan, framelerinizi en son olarak Save All Frame olarak kaydetmeniz gerekiyor... Şimdi sıra geldi sayfamızı kaydetmeye. Eğer siz eğer üç parçadan oluşan bir frame modeli seçtiyseniz görünen 3 adet ve de görünmeyen bir adet olmak üzere toplam 4 web sayfası kaydetmeniz gerekir. (Görünmeyen dediğimiz sayfa bu frameset dediğimiz kontrol sayfasıdır. Bu üç sayfa görünen üç sayfanın ekranda nekadar yer kaplayacağını ayarlayan ve bu sayfaları birarada tutan sayfadır.) Kaydetme işlemi için File menüsünden Save All Frames demek sayfayı ilk defa kayıt ediyorsak en mantıklı yoldur. DW size o anda handi sayfayı kaydettiğini kaydettiği sayfayı çerçeve içerisine alarak gösterecektir (ilk önce kontrol sayfası, sonra mainframe, ...) buna göre sayfalara mantıklı isimle vererek kayıt işlemini tamamlayın.   Sayfamızı tasarladıktan sonra sıra geldi linklerimizi vermeye... Link vermek için önce link verebileceğimiz sayfaların ve frameli sayfanın menü için kullanacağımız frame' inde linkin yazılarının hazır olması lazım. Yazıyı seçtikten sonra link verip sonrada link yazısının hemen yanındaki "Target " bölümünden "main frame" seçeneğini seçerseniz linkin ana pencerede açılmasını sağlarız bu işlemi yapmazsanız linkiniz menünün bulunduğu pencerede açılacaktır ki buda hiç hoş olmayan bir görünüm ortaya çıkarır. Target bölümünden _blank parametresi linki yeni bir pencere olarak açar _parent paremetresi de linkimizi ana pencerede (yani frameler kabolur onun yerinde) açmaya yarar... Frame Kullanımı Sayfalarınızda devamlı olarak sabit kalan yerler olabilir bunları her defasında sayfalara tek tek yerleştirmek yerine ayrı bir sayfa haline getirip frame olarak kullanabilirsiniz. Bu sayede hem tekrar tekrar yazmaktan kurtulur hemde bu bölümün her sayfaya ekstra yük getirmesini önleyebilirsiniz. Frame oluşturmak için Frames araç çubuğunu kullanabileceğiniz gibi İnsert>Frames bölümünden istediğiniz türde frameyi seşme yoluna da gidebilirsiniz. Bu menüyü göremiyorsanız Window>Frames'i etkin hale getirin veya shift+f2 tuş kombinasyonunu kullanın. Bu menü ile istediğimiz frameyi seçip gerekli özelliklerini ayarlayabileceğiz. Özelliğini ayarlamak istediğimiz framenin üzerine tıklamamız yeterli olur. Herhangi bir frame seçili iken Properties araç çubuğunun şekli yukarıdaki gibi olacaktır. Src ilgili framenin yerini göstermektedir. Borders frame kenarlıklarının görünüp görünmeyeceğini belirlemek içindir. Scrool framenin kenarlarında aşağı yukarı ve sağa sola dğru hareket ettirme çubuklarının çıkıp çıkmayacağını gösterir. No Resize tekrar boyutlandırma (otomatik). Border Color border görünecek ise rengini belirlemek içindir. Margin With framenin en olarak sayfaya marjinini ayarlamak için, Margin Heith ise boy olarak ayarlamak içindir. Birde ayrıca sayfa üzerinde frame çizgisini tıkladığınız zaman properties menüsünde çıkan özellikler vardır. Bu özelliklerde farklı olmamak üzere tüm framelerle ilgili ortak ayarlama yapmak için kullanılabilir. Eğer frame kullanıcak iseniz Wiev>Visual Aids>Frame Borders'ı aktif hale getirin ki frame çizgileriniz Dreamweaver içerisinde görünsün. Kaç tane frame kullandı iseniz o kadar yeni sayfa açmış olursunuz kaydederken de frameset olarak kaydedersiniz. Şimdi framelerde link verme olayını anlatalım. Framelerinizden birisi sadece linkler içeriyor olabilir ve siz bu linklerin diğer frame veya framelerden başka birisi içinde açılmasını sağlamak istiyor olabilirsiniz. Bunu Target ile yaparız. Linklerin yanında görülen target bölümünden istediğiniz frameyi seçerek linklerinizin o frame içerisinde açılmasını sağlamış olursunuz. CSS STYLES Css styles ile sayfalarınızda kullandığınız metinlere vereceğiniz şekiller, fontlar , sizin istediğiniz renklerde görünmesi , tüm metin özelliklerinin sizin ayarlayacağınız şekilde görünmesi ve bunun web browserlarında herhangi bir değişime uğramaması için css styles'e ihtiyacınız olacaktır. Mesela sayfanızda metinler bolca kullanılmışsa siz bu metinlerin özelliklerini tek tek ayarlamak zorunda kalmazsınız. Öreneğin bir başlık ve bunun alt başlığı ve bunun açıklamasını otomatik olarak ayarlayabilirsiniz. Bir css styles hazırladığınız zaman da bunu daha sonra hazırlayacağınız sayfalarda da tek tek ayarlamak yerine bir kerede kullanabilirsiniz. Css styles menüsüne ulaşmak için Window>Css Styles veya klavyeden Shift+F11 ' ebasınız. Şimdi sıra kendi css styles'lerimizi belirlemeye... Css Styles aktif iken yukarıda resimdede göreceğiniz üzere sağ üst köşedeki siyah ok işaretine bir kez tıklayın.Açılan menüden New Style'i seçin ve karşınıza şu menü çıkacak. Bu menüde name bölümüne istediğiniz ismi yazabilirsiniz. Önemli olan Define In bölümündeki New Style Sheet File seçeneğini seçmeniz ve ok butonuna basmanız. Bundan sonra açılcak menüde size hazırlayacağınız style'in hangi isimle kaydedeciğinizi soracak. Stylenizi dosyalarınızın bulunduğu bölüme kaydedin.Bundan sonra karşınıza beklediğimiz asıl menü çıkcak ve siz bu menüden istediğiniz özellikteki seçenekleri seçecekciniz ve css stylenizi oluşturacaksınız. Yukarıda gördüğünüz menüyle karşılaşmanız gerekecek.Ben burada bu menü hakkında bahsetmek istemiyorum çünkü herşey açık. Sayfanızda belirleyeceğiniz font, yazı boyutu, style, renk , bacground rengi, tabloların kalınlığı, yazıların altı çizili mi olcak v.s. bunlar size kalmış. Ok butonuna bastıktan sonra css styleniz hazır. Önemli : Mesela diyelimki siz bir sayfanızda yazı boyutunu (size) 5 yaptınız.Css stylenizdede bu boyut 2 diyelim. İşte bu esnada css styleniz devre dışı kalır.Ama siz css style'de herhangi bir özelliği belirlemediyseniz, mesela css 'de underline seçili değil ama sayfanızda siz bir yazını altını çizdiniz diylim işte o zaman css stylenizde herhangi bir değişiklik olmaz.Bilmem anlatabildim mi? Css Style Css Style ile sayfalarınızda kullanıcağınız başlıklarınızın boyutları, yazı tipi textlerinizin yine aynı şekilde boyutları, tipleri, linklerinizin renkleri, boyutları veya sayfanızın diğer özellikleri gibi özellikler ayarlanarak bunun tüm sayfalarınız için geçerli olması sağlanıp her sayfanız için bunlarla tek tek uğraşmak zahmetinden kurtulmuş olursunuz. Bu menüyü eğer göremiyorsanız Window>Css Styles veya shift+F11 tuş kombinasyonunu kullanabilirsiniz. Yeni bir Css Style için bu menünün alt tarafında görünen + işaretli sembolü tıklamalısınız. Karşınıza aşağıdaki gibi bir menü çıkacaktır. Make Custom Style ile Name bölümüne bir isim yazıp kendinize göre bir Css Style oluşturabilirsiniz. Redefine Html Tag Html tagları için özel Css Styleleri belirlemek için kullanılabilir. Use Css Selector ise linkleriniz için Css Styleler hazırlamanızı sağlar. Burada seçeceğiniz menuler a:active linkinizin aktif rengini belirlemek için, a:hover linklerinizin üzerine gelince alacağı rengi belirlemek için, a:link link rengini belirlemek için, a:visited ise gezilmiş link rengini belirlemek için yapılabilecek Css Style özelliklerini belirlemenize yarar. Linklerle ilgili bir örnek yapalım. New Style oluşturalım ve içerisinden Use CSS Selector'ü seçelim. Daha sonra a:link'i seçip OK tuşuna basıp Css Style'mizi kaydedelim. Kaydettikten sonra karşımıza aşağıdaki resimdeki gibi bir menü gelir. Bu menüde; Font Yazınızın karakterini belirlemenizi, Size yazının boyutunu belirlemenizi, Weight yazınıza en ayarları yapmanızı, Variant da small-caps seçilerek yazınızın büyük harfler haline gelmesini (ama normale göre biraz kısa), Case ; capitalize ile yazının baş harfinin büyütülmesini, uppercase ile tüm harflerin büyütülmesini, lowercase ile tüm harflerin küçültülmesini, Style ile yazınıza italic ve opligue(biraz değişik italik) ayarları yapmanızı, Line Height ile yazınızın yükseklik ayarını yapmanızı, Color verilecek renk ayarlarını yapmanızı sağlar. Decoration ile ise linkinizin underline altı çizili, overline üstü çizili, line-through linkin çizili, blink çizgisiz olmasını sağlar. Eğer linkerinizin altı çizili veya hiçbir şekilde çizgili olmasını istemiyorsanız none'u da seçebilirsiniz. Bu ayarlamaları yaparak linkinizin görünen rengini değiştirmiş oldunuz. Şimdi üstüne mouse ile gelince çıkmasını istediğiniz rengi ayarlayalım. Şimdi a:hover'ı seçip istediğimiz ayarlamaları yapalım. Daha sonra a:active için düzenlemelerinizi yapın ve en son a:visited için ayarlamalarınız yapın. Burda dikkat edeceğiniz iki nokta var birincisi bu sıralamaya göre ayarlamalarınızı yapın yani a:link, a:hover, a:active, a:visited sırasına uyun bunun nedeni bu sıralamaya uyulmassa yaptığınız ayarlamalar düzgün çalışmıyor. (en azından benim bilgisayarımda öyle oldu.) İkinci nokta ise bunları yaparken hepsi için ayrı ayrı Css oluşturmayın yani bir css oluşturduktan sonra bunların hepsini aynı css içerisinde yapabilirsiniz. Yani a:linki yaptıktan sonra a:hovera geçerken yeni bir css dosyası daha kaydetmenize gerek yok aynı dosya üzerinde bütün ayarlamalarınızı yapabilirsiniz. Bu şekilde üzerine gelince rengi değişen linklerimiz oldu hatta altları veya üstleri çizili. Siz nasıl isterseniz BEHAVİORS Bu panel sayesinde dreamweaver içerisinde bulunan hazır Java Script ve form elemanlarından yararlanabilirsiniz. Burada kısaca en çok işinize yarayabilecek olanlarına kısaca değinelim. Panelde görülen + tuşuna basarak kullanabileceğiniz özellikleri görebilirsiniz. Tabi bunun için bir resmi veya başka bir nesneyi seçili hal getrimelisiniz ki menünüz ortaya çıksın. 1.Go To URL yönlendirme yapmanızı sağlar. Mesela bir resmin üzerine gelindiği zaman başka bir sayfaya yönlendirilmesi sağlayabilirsiniz. Yapmanız gereken resmi seçili hale getirip + tuşuna basarak Go To URL yi seçmek. Daha sonra çıkan menüde URL kısmına gidilmesini istediğiniz yeri yazmalısınız. İlla ki bir adres olması gerekmez bir resmin yerini de belirtip resmin açılmasını sağlayabilirsiniz. Aşağıdaki örnekte olduğu gibi. Mouse ile üzerine gelince resim açılacaktır. Tıklamadan mouse ile üzerine gelince resim açılıyor. Buraya adres de yazılabilir. 2.Open Browser Window pop-up menü oluşturmanızı sağlar. Bu komut ile istediğiniz boyutta ve istediğiniz özellikte( kaydırma çubukları, menüsü, status barı olmayan sayfalar) yeni bir sayfa açılmasını sağlayabilirsiniz. Bir sayfa açıldığında yanında küçük küçük sayfalar açıldığını (reklam sayfaları) görmüşsünüzdür. İşte bu tür sayfaları yapabilirsiniz. Bunu yaparken karşınıza yukarıda resimde olduğu gibi bir menü ile karşılaşırsınız. Bu menüde; URL to Display açılacak olan sayfanın yerini belirtmeniz için kullanılır. Window Width açılacak yeni sayfanın enini rakamsal olarak belirtmenizi sağlar. Window Height boyunu belirlemenizi sağlar. Atributes bölümünde ise sayfanın diğer özelliklerini ayarlamanız için konulmuş seçenekler bulunur. Burada hiç birşey işaretlenmezse hiçbir özelliği olmayan bir sayfa açılır. Navigasyon Toolbar İleri,geri, yenile gibi tuşların olduğu menünün sayfada yeralmasını sağlar. Menü bar sayfada menü bölümünün olmasını sağlar. Location Toolbar sayfada adres girilen bölümün yeralmasını sağlar. Scroolbars as Needed sayfada aşağı ve yukarı, sağa ve sola oynatma çubuklarının çıkmasını sağlar. Status Bar alt bölümde bulunan status barın çıkmasını sağlar. Resize Handles sayfanın büyüklüğünün değiştirilmesini sağlar. (ziyaretçi tarafından) Window Name açılan sayfaya bir isim vermenizi sağlar. 3.Play Sound sayfanızda müzik çalmasını sağlar. Açılan pencerede çalmasını istediğiniz müzik dosyasının yerini göstermeniz yeterlidir. Yalnız kullandığınız dosya türünün MIDI olmasına dikkat edin bu sayade hızlı yüklenmesini sağlarsınız. 4.Pop-up Message uyarı mesajları yazmanızı sağlar. Mesela birresimin üzerine gelindiği zaman bir mesaj çıkmasını sağlayabilirsiniz. Bunun için resmi seçili hale getirip Pop-up Message'ı seçerek istediğiniz mesajı yazabilirsiniz. Resmin üzerine gelince yazdığınız mesaj çıkacaktır. 5. Set Text>Set Text of Status Bar Browserın alt tarafında bulunan status barda belirecek olan bir yazı yazmanızı sağlar. Çıkan menüye status barda çıkmasını istediğiniz mesajı yazmanız yeterlidir. FORMLAR İnternet sayfalarında çokça kullanılan özelliklerden birisi de formlardır. Dreamweaverda da formları kullanabilmek için Forms araç çubuğundan faydalanabilirsiniz. Yalnız sayfanıza eklediğiniz formlar html sayfalarında direkt olarak çalışmayacaktır. Çalışabilmeleri için bilgisayarların yorumu şarttır. Bilgisayarların yorumunu sağlamak için asp, php, cgi gibi diller kullanılmalıdır. Yani şu anda sayfanıza koyduğunuz formları çalıştırabilmek için bu tür bir dili bilmelisiniz ve sayfanıza uygulamalısınz. (En yakın zaman da bu dillerle ilgili derslerimizi de sayfalarımızda görebilirsiniz.) Bu menüde bu dillere ihtiyaç olmadan çalışabilecek olan Jump Menu'den bahsedelim. Resmimizde en alt sağda görüle nok işaretli sembol. Bu menü ile hızlı erişim menüleri yapabilirsiniz. Alltaki örneğe bakın. Formun Üstü Formun Altı Bu tür menüler oluşturmak için İnsert Jump Menu simgesini tıklamalısınız. Karşınıza çıkan menüde; Menu İtems yaptığınız linklerin listelemesini yapar. Text Linkin menüde görünen ismidir. Örnekte Dreamweaver ve Html gibi menü içerisinde görülen yazıdır. When Selected, Go To URL gidilecek link yazılır. Open URLs In eğer framelerden oluşan sayfalarınız varsa hangi framede açılacağını belirtmek için kullanılır. Menu Name menüye isim vermek için kullanılır. İnsert Go Button After Menu menünüzün yanına Go (git) butonu koyar ve bu şekilde linklere gidilmesini sağlar. Select First İtem After URL Chance İlk başta bulunan linkin daha sonra aktif olmasını sağlar. Şimdi ikinci linki oluşturmak için resimde üstte görülen + sembolüne basarak aynı işlemleri tekraralarız. 3. ve 4. ..... için hep + tuşu ile işlemlerin yeniden tekrarlanması gerekir. Layer Kullanımı Layerları bir tablonun hücreleri gibi düşünebilirsiniz. Bu da demek oluyor ki tablolar ile yaptığınız herşeyi layerlar ile de yapabilirsiniz ve hatta daha fazlasını. Mesela ziyaretçilerinizin hareket ettirebileceği layerlar gibi. Sayfanıza layer eklemek için Common araç çubuğundan Draw Layer'ı veya İnsert>Layer kombinasyonunuzu kullanabilirsiniz. Bu durumda mouse'unuzun imleci + şeklini alacak ve istediğiniz büyüklükte ve yerde bir layer oluşturabileceksiniz. Yalnız şunu hatırlatalım. Layerlar İnternet Explorer 4 ve üzeri Netscape'nin ise yeni versiyonlarında çalışabilir. Oluşturduğunuz layer'ı aynı tabloda olduğu gibi herşeyi yapmakta kullanabilirsiniz. Layerla ilgili ayarlama yapabilmek için onu seçili duruma getirdikten sonra özellikler araç çubuğumuzdan istediğimiz ayarları yaparız. Bu ayarlar neler? Layer ID bölümü layer için vereceğiniz ismi buraya yazarsınız. Eğer isim vermez iseniz program otomatik olarak layer1,2.. şeklinde isimler atar. L (Left) Layerın sol tarafa olan uzaklığı buradan belirtilir. T (Top) Layerın üst tarafa olan uzaklığını belirtmek için kullanılır. W (Width) Layerın genişliğini belirtmek için kullanılır. H (Height) Layerın boyunu belirlemek için kullanılır. Z-Index Sayfada birden fazla ve üst üste kullanılmış layer varsa hangisinin üstte görüneceğini belirtmek için kullanılır. Bu değeri fazla olan üstte görünecektir. Bg İmage layerın arka planına resim eklemek için kullanılır. Vis Layerın görünüp görünmeyeceğini belirlemek için kullanılır. Bg Color layerın arka planını renklendirmek için kullanılır. Tag layerın hangi dile göre kodlanacağını belirtmek için kullanılır. Herhangi bir oynama yapılmasına gerek yoktur. Overflow layer içerisinde bulunan nesnelerin layerın dışına taşması sonucu yapabileceğiniz işlemleri barındırır. İçerinde bulunan karakterler; Visible layer içerisinde bulunan nesnelerin tümünü görünteleyecek şekilde olmasını sağlar. Hidden layer boyutunca nesneler görünür yani taşanlar görünmeyecektir. Scroll taşan nesnelerin görüntülenebilmesi için kaydırma çubuğu çıkarmak için kullanılır. Auto taşan nesne varsa kaydırma çubuğu çıkar taşan nesne yoksa çıkmaz. İsterseniz layer kullanarak tarayıcı üzerinde hareket ettirebileceğimiz resim oluşturalım. Yandaki örnekteki gibi. (Tarayıcınız desteklemiyor ise çalışmayacaktır.) Resmin üzerine basılı tutarak onu istediğiniz yere taşıyabilirsiniz. İlk önce bir layer oluşturup içerisine herhangi bir resim yerleştirelim. Daha sonra resmi seçili hale getirip Behaviors araç çubuğundan + sembolüne basarak Drag Layer'ı seçelim. Karşınıza çıkan menüde; Layer hareket kazandıracağınız layerı seçmenizi sağlar. Movement hareket özelliğini belirlemek için kullanılır. Unconstrained seçili ise layer istenilen şekilde hareket ettirilmekte özgürdür. Constrained seçilerek hareket ettirilme alanınnı belirleyebilirsiniz. Drop Target layerın left(sol) ve top(üst) uzaklıklarını belirtmek için kullanılır. Eğer siz herhangi bir yere koydu iseniz buranın ayarlamasını otomatik yapmak için Get Current Position'a basarak ayarlarsınız. Advanced menüsünde ise; Drag Handle resmin üzerine basılarak hareket ettirilecek olan yerlerini belirlemenizi sağlar. Entire layer seçili ise resmin üzerinde herhangi bir noktaya basılarak resim hareket ettirilebilir. Area Within Layerı seçerekte resmin üzerine basılarak hareket kazandırılacak bölümlerini belirlemeniz sağlanır. While Dragging seçilerek Yandaki menüden Leave on Top seçilirise layer en üstte görünür. Restore z-index seçilirse layer sıralamasına uyulacaktır. Diğerleri ise java eklemek için kullanılmaktadır. Sizde bu şekilde değişik layerlar oluşturabilirsiniz Non Breaking Space Html dilinde yazdığınız yazılar arasına ekstra boşluk bırakmak için non breaking space (&nbsp;) kullanmak zorundasınız. Dreamweaver da bunu kolaylaştırmak için kısayollar kullanmıştır. Characters araç çubuğundan İnsert Non-breaking Space veya İnsert>Special Characters>Non-breaking Space'i seçerek sayfanızda ekstra boşluklar kullanabilirsiniz. Veya ctrl+shift+space tuş kombinasyonu ile de ekstra boşluk bırakabilirsiniz Line Break Html dilinde alt satırlara geçebilmek için Line Break kullanmalısınız. Alt paragrafa geçmek için aynen yazı editörlerinde (word gibi) olduğu gibi enter kullanmak yeterlidir amaalt satıra geçmek için başka bir yöntem kullanılmaktadır. Line Break (br) kullanmak için Characters araç çubuğundan Br simgeli İnsert Line Break veya İnsert>Special Characters>Line Break ve/veya shift+enter tuş kombinasyonu kullanılabilir. 27