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 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

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

2. Common

3. Forms

4. Frames

Bu bölüm çerçeve oluşturmaya yarar şekillerde görülen biçimlerde çerçeveler oluşturabilirsiniz.

5. Head

6. İnvisbles

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.

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.

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 dura

Copyright © Vedobay.Com - En Duygusal Ask Siirleri Burada Tüm hakları saklıdır.

Yayınlanma: 2007-07-08 (309 okunma)