Dreamweaver CS4 İle Web Sayfası Yapmak

Bu dersimizde dreamweaver cs4 kullanacağız. sebebi ise: daha önceki sürümlerde html1.0 mantığına göre çalışıp sizi yanlış yönlendirirken güncel sürüm html 4.0 standardına göre çalışıyor ve hata yapma oranı çok düşüyor.

Şimdi yeni başlayanlar için temel noktalara bakalım:

1. Dil Ayarı: Öncelikle Dil ayarını yaparsanız açtığınız dosyaları UTF-8 yapmasını engellersiniz.

Edit – Preferences (Ctrl + U) kısmını açın ve aşağıdaki iki yeri değişin.

deamviewer dil ayarları yapmak

Aşağıdaki ayar yeni dosyalarınızın direkt Türkçe ile başlamasını sağlar.

deamviewer de dosyaları direk türkçe başlatmak

 

2- Yeni Dosya : Yeni bir Web sayfası yaparken dosya tipi olarak HTML 4.0 seçmeniz sizin avantajınıza olacaktır. Fakat bu beraberinde başka şeyleri bilmeyi de gerektirir. Örneğin Html 4.0 ile mümkün olduğunca daha çok Css kullanmanız gerekir. Yeni teknoloji olduğu için bir şekilde öğreneceksiniz bari geç kalmış olmayalım.

Dosya-Yeni (File-New) diyerek dosya oluşturuyoruz. Sağdaki kısma dikkat edin. Html 4.0 sürümünü seçiyoruz.

deamweaver html 4.01 Transitional

 

3- Sağlı Sollu Bölme: Dw(dreamweaver) cs4 ile en sevdiğim özelliklerden biri yeni gelen pencere bölmeleyicinin dikine ayırması. Bunu açınca ne olduğunu anlayacaksınız.

Önce üstteki düğmelerden Split kısmına basın. sonra üst menülerden View > Split Vertically diyeceğiz.

dw4

Böylece Dreamweaver iki parçaya ayrılarak bize hem Dizayn tarafını hemde Kod tarafını gösteriyor. Belki şu aşamada kodlardan koruyor olabilirsiniz. ama ileride burası en sevdiğiniz bölüm olacak. Şimdilik sadeceDesign olarak kullanabilirsiniz. Ama Php öğrenmeye başlayınca bunun yerini unutursanız buradan bakabilirsiniz.

Web sayfası yapmaya başlıyoruz. Bunun için elinizde Resimler ve yazılarınız hazır olmalı. Örnek olarak masaüstüne yeni bir klasör yapın ve kullanacağız dosyaları içine koyun. size örnek olsun diye şuraya iki dosya koydum.

Dosyayı İndirmek İçin buraya tıklayınız.

Zipli dosyayı açıp içindekileri masaüstüne çıkarın. Aşağıdaki gibi üç dosya göreceksiniz. Arkaplan.jpg resmini sayfanın arkaplanı olarak kullanacağız. Beğenmediyseniz kendinize başka arkaplan bulabilirsiniz.

Şimdi Dreamweaver ile sayfa.html yazan dosyayı açın ve ilk basit sayfamızı yapmaya başlayalım.

1. Bölüm sayfa başlığı:

Yukarıda söylediğim ayarları yaptıysanız aşağıdaki gibi bir ekrana bakıyor olmanız gerekiyor.

Şimdi sayfanın sol tarafında işlem yapacağımız iki bölüm var Head ve body. Bu kavramlara alışmanız gerekiyor.

Head(Başlık): Sayfada direkt görünmeyen ama sayfa için gerekli kodların olduğu bölümdür. bunları birbirinden ayırmak için <head></head> şeklinde taglar kullanılmıştır. bu ikisi arasına yazılan hiçbirşey kullanıcıya görünmez.

Body(Gövde): Sayfanın içeriği buradadır. <body></body> arasına yazılır. Buraya yazdığınız Yazılar ekranda görünür.

Şimdi sayfada HEAD kısmına bir stil dosyası yazacağız. Hemen korkmayın. Aslında çok basit. Bir satır yazınca anlayacaksınız.

Soldaki </head> kelimesinin üzerine aşağıdaki kodları yazın. (Sonra görüntüyü tazelemek için F5 e basın)

<style>

body{background:url(arkaplan.jpg)}

</style>

Bunu yazdığınız anda sayfanın arkaplanı değişecektir. kelimelerin anlamını bilirseniz daha kolay anlarsınız.

body{ background: url() }

gövde { arkaplan: adresi ()}

Türkçe olsaydı herşey daha kolay olacaktı. Fakat bunun için elimizden birşey gelmiyor çünkü Css kuralları tüm dünyada aynı olmak zorunda.

Eğer sayfadaki yazıların rengini de değiştirmek isterseniz aşağıdaki kodu ekleyebilirsiniz:

<style>

body{background:url(arkaplan.jpg); color:blue }

</style>

 

2. Bölüm sayfaya yazı ve resim eklemek:

Sayfaya ekleyeceğiniz diğer bileşenler için kod kısmını kullanmanız gerekmiyor.
(Aslında css için de kodlara girmek gerekmiyor ama herşeyi bedavacılıkla yaparsanız işin aslını öğrenemezsiniz)

Sayfaya yazı eklemek için istediğiniz yazıyı <body> kelimesinden sonra yazmanız yeterlidir.

<body>
Deneme Yazısı
</body>

veya Sağ taraftaki Design kısmına ne yazarsanız direkt <body> içersinde oluşur.

Şimdi de sayfaya resim ekleyelim. Hadi bu sefer size kıyak geçeyim. Sağ taraftaki menülerden bir tıklama ile resmi ekleyelim.

Sağdaki images düğmesine basınca karşınıza resmin adını soran bir pencere gelecek.

Buradan animasyon isimli dosyayı seçin ve tamam diyin. bu sefer de resmin adını soran bir pencere gelecek. bunun esas amacı görme engellilerin kullandığı internet tarayıcılarda onlara resimde ne olduğunu söylemektir. Html 4 ile mutlaka girilmesi gerekir.

Resim için açıklamayı da girdiyseniz basit web sayfanız hazır demektir.

Şimdi bu sayfayı internete gönderip kullanıcılarınıza sunabilirsiniz. tabii bir internet sayfası için basit olduğunu düşünüyorsanız acele etmeyin daha yeni başladık ve öğreneceğimiz birçok konu var.

internet sayfasına dosyaları yollarken ftp programı kullanacaksınız. ve dikkat edin. sayfada kaç tane resim kullandıysanız hepsini FTP ile yollamanız gerekir.

Not: Alıntıdır. Düzenlenmiştir.