Dreamweaver'da web tasarım yapmak

Evet photoshop'ta web sitemizin tasarımını yaptık, bu tasarımımızı slicelayarak save for web & devices diyerek minik küçük bölümlere resimler olarak web için optimize (web sayfalarında açıldığında yüklenmesi uzun sürmeyecek kadar düşük boyutlu ancak kalitesi olabildiğince iyi) photoshop'taki tasarımınızı save as diyip jpeg olarak kayıt ederseniz kaliteyi istediğiniz kadar düşürün save for web & devices komutu kadar iyi sonuç vermez o yüzden web sayfalarımız için hazırladığımız tüm görsellerde bu komutu kullanmanızı öneririm. (Files > Save for web & devices)



Bu işlem sonrasında elimize images isimli nur topu gibi bir klasörümüz oldu. Web sitemizde kullanacağımız tüm imageları bu klasörün içinde olması gerekmekte. Buraya kadar bir sorunumuz yok şimdi bu klasörü masa üzerindeki anaklasörümüzün içine atıyoruz. Ana Klasör ?!? Dreamweaver'a tanıtmamız gereken klasör sonuçta web sitemiz sadece imagelardan oluşmayacak. Videolar, sesler, flashlar, stil dosyaları, java script dosyaları web sitemizi oluşturmak için ihtiyacımız olabilecek diğer dosya türleri her biri için içleri boş olsada birer klasör açıp hepsini tek bir klasör altında toplarız. Daha önceki bir yazımda bu klasör hakkında bilgi vermiştim. Bu konu ile ilgili yazım için tıklayınız.

Bundan sonra yapmamız gereken işlem bu ana klasörü dreamweaver'a tanıtmak olacak dreamweaver'ı açıp ilk yapmamız gereken işlem Site > New Site demek yeni bir web sayfası yapmaya başladığımızda mutlaka yapmamız gereken bir işlemdir. Bu konu ile ilgili yazım için tıklayınız.

İşte kollarımızı sıvayıp işe başlayacağımız alana geldik. Şimdi ilk sayfamızın açıp biraz dreamweaver'ı kurcalayalım. Files > New komutu ile yeni bir döküman açmak istediğimizi söylersek karşımıza bir pencere çıkar size dreamweaver'ın en kötü özelliğini söyleyim her hangi bir şeyi tıkladığınızda size bir pencere açmasıdır. Peki bu pencereye bir bakalım.

Dreamweaver'da yeni HTML bir döküman açmak

 

Açılan pencereden Blank Page ---> HTML ---> None  Seçeneklerini seçtikten sonra Create düğmesine tıklarız.

Sonunda bir HTML açtık bomboş şimdi istediğimiz herşeyi yapabiliriz. Fakat bunları yapmadan önce ilk yapmamız gereken işlem sayfayı kaydetmek sayfamız daha önce nerede olduğunu bilmiyor bu yüzden yanında sağında solunda neler olduğunu bilmesini beklemememiz saçma olur. Unutmamamız gereken şey sayfalarımız birbirlerini göremiyorlar karanlık bir odada arkanda Ali önünde Veli var dedik ancak daha onu Ali ile Veli'nin olduğu odaya koymazsanız zavalli sayfanız Ali ile Veli'yi arar durur ancak bulamaz bu sayfayı tüm diğer klasörlerimizinde bulunduğu klasörün içine kaydetmemiz gerekir ki sonu gelmeyen bir körebe oyunundan kurtulsun. Nerede olduğunuzu bilmeyen birine yol sorduğunuzu düşünün sayfamıza daha nerede olduğunu söylemedik. Nerede olduğunu söylemek için onu kayetmemiz gerekmekte ana klasörümüzün içine zaten dreamwaever eğer site tanımlamamızı doğru yaptıysak dosyayı anaklasörün içine kayıt etmeyi önerecektir.

Genelde ilk oluşturduğumuz sayfa ana sayfamız olur ve bu sayfanın siteye girer girmez hemen açılmasını isteriz ancak bunu nasıl belireceğiz çok kolay sadece ilk açılmasını istediğimiz sayfaya index.html, default.html, main.html yada home.html ismini vermek yeterli olacak. En güvenlisi index.html ana sayfamızın adı index.html olursa sorun yaşama ihtimalimizde oldukça düşer. Peki neden şöyle düşünün bir kapıda güvenlik görevlisi olarak çalışıyorsunuz ve size sadece adı index.html olan ve tek başına gelmiş kişileri kapıdan içeri almanız söylenmiş adı ana sayfa olanı içeri almazsınız yada adı index.html olsa bile yanında arkadaşları ile gelirse yine içeri almazsınız yani herhangi bir klasörün içinde olmamalı ana klasörü içinde yanlız başına durmak zorunda peki ya durmazsa hangi sayfa gösterilir hiçbiri yani siteniz yayınlanmaz. Bu nedenle sayfanızın adı index.html olmalı ve ana klasörün içinde herhangi bir klasörün içinde bulunmamalı.

Tamam index.html olarak kaydetik bundan sonra yapmamız gereken hemen sayfamıza bir title vermek title vermek değince hemen html'yi açıcaz diye düşünmeyin çünkü bir önceki yazımı okuduysanız title'ı yani tarayıcının tepesinde gözüken yazıyı değiştirmek için html kodlarını kullanmıştık.

Ancak dreamweaver üzerinden bu işlemi gerçekleştirmek için sadece title kutusundaki Untitled Document ismini istediğimiz her hangi bir başlıkla değiştirmek ve inanamayacaksınız ama burada türkçe karakter kullanabiliyoruz. :)

Dreamweaver'da title'ı düzeltmek

Title olarak yazdıklarımız tarayıcının tepesinde gözükür.

Türkçe karakerleri nerelerde kullanabileceğimizi anlamanın en iyi yolu web sayfalarını kontrol etmektir. Esasında interneti sürekli kullandığımız için web sayfalarının nerelerinde türkçe karakter kullanılabileceğini çok net görebilmekteyiz. Örneğin resimlerin içinde durdukları klasörün adını göremediğimize göre burada türkçe karakter kullanmamalıyız. Ancak title'ı gayet net bir biçimde görebildğimizden burada gönül rahatlığıyla türkçe karaker kullanabiliriz. Ben eğer bu konuda teredütte kalırsam yaptığım şey internette yayın yapan türkçe bir siteye bakmak oluyor. Eğer o türkçe karakter kullanıyorsa ve sorun çıkmıyorsa benim içinde sorun çıkmaz.

Sayfayı kaydettik ve title'ı yazdık ve sayfanın tepesinde minik bir yıldız çıktı bu nedir????

Kaydedilmemiş döküman

Herhangi bir dökümanın üzerinde bir değişklik yaptığımızda tek bir nokta bile koysak en son işlemden sonra kaydedilmediğini göstermek için dökümanın yanında bir yıldız simgesi gözükür.


Yıldızı her gördüğümüzde dökümanı save etmemiz gerekmektedir. Eğer desing paneli açıksa yazdığımız her ne olursa tarayıcılar tarafından o şekilde şekilde gözükecektir.

Ne zaman ENTER tuşuna basarsak bir <p> etiketi açar yeniden ENTER'a bastığımızda p etiketini </p> kodu ile kapatarak yeni bir <p> yazarak yeni bir paragraf açar. Yani dreamweaver bizim için HTML kodu yazar esasında HTML dreamweaver!a ait bir uzantı olmasada dreamweaver tarafınandan yazılması kolay olan bir dildir.

O zaman dreamweaver!ın özellikler paneliyle biraz oynayıp çok basit bir site oluşturalım. Bir sonraki yazımda çok basit bir site oluşturmak için yapmamız gereknlerden bahsedeceğim.