Tövbe]{aR

Bilmeyen Arkadaşlar İçin Dreamweaver İle Profesyonel Web Siteleri Nasıl
Yapılır Birlikte İşleyeceğiz. Dreamweaver Programımızı Açalım. İlk Önce
Programı Açar Açmaz Yapmamız Gereken En Önemli Unsur ;
Page Properites ’ a Gireriz. Sayfanın Alt Yapısını Oluşturacağız.
Türkçe Karakter (ç,ı,ş,ü....)ler En Sinir Sorundur Genelde.
Sayfamızın Alt Yapısından Yani Page Properites ’ tan Bunu Kolaylıkla
Halledebiliriz. İlk Önce Page Properites ’ a Tıklayınca Karşımıza
Açılan Panel Solda Category Sekmesi Appearance Sekmesi
Bulunur. Buradan Sayfanın Default (Varsayılan) Olarak Göreceği Şeyleri
Ayarlayabiliriz. Mesela Panelin Sağında Page Font Sekmesinden Varsayılan
Fontumuzu Yanında BI Harflerinden Kalın veya İtalic (Eğer İstenirse),
Altındaki Sekmeden Büyüklüğünü, Hemen Altından Default (Varsayılan)
Yazı Rengini, Background (Arkapalan Rengini) Hemen Altından
Background İmage (Arkaplan Resmini) Ayarlayabiliriz. Son Olarak En
Altta 4 Seçenek Daha Vardır. Bunlar ;

Left Margin
Top Margin
Bottom Margin
Right Margin
Sayfaya Yerleştireceğimiz Her Nesnenin Sayfaya Hizalamasıdır. Mesela
Top Margin 0 Yaparsak Sayfamıza Koyacağımız Her Nesne Sayfanın
Üst Kısmına Yapışır. Hiç Boşluk Olmaz. 1 Yaparsak Bir Piksellik Bir Boşluk
Bırakır ve Nesneleri Öyle Koyar. Aynı Şekilde Left (Sol) Right (Sağ)
Bottom (Aşağı) Boşluklarını Ayarlar. Bunu Deneyerek Görürseniz Daha İyi
Anlayabilirsiniz. Biz Burada Margin Ayarlarına Dokunmayacağız. Bırakalım
Default Olarak Kalsın. Ya da Kendinize Göre Ayarlayın.
Bu Ayarlar Değişkendir. Yani Sizin İsteğinize Kalmış.
Küçük Bir İpucu
Sayfanızda Kullanacağınız Font Style Her Zaman

Arial
Tahoma
Verdana
Olmasında Yarar Vardır. Çünkü Bu 3 Yazı Karakteri Her Windows
Kullanan Bilgisayarda Mevcuttur. Şekil Diye Değişik Yazı Karakteri
Kullanırsanız ve Eğer Web Sitenizi Açacak Kişinin Bilgisayarında
Sizin Sayfanızda Kullandığınız Yazı Karakteri Yoksa Karkaterler
Bozuk Çıkar. Bu da Hiç Hoş Olmaz.
Evet Konumuza Dönelim. Appearance Sekmesinde İşimiz Bitti.
Şimdi Gelelim Link Sekmesine. Sayfada Sadece Tasarladığımız
Ya da Hazır Kullandığımız Buttonlara Değil Yeri Gelince Yazdığımız
Yazılarada Link Veririz. İşte Bu Sekmede Link Verilen Yazıların Hallerini
Ayarlarız. Font Style de Verdiğim İpucu Bunun İçinde Geçerlidir.
Öncelikle Link Font Sekmesi Vardır En Üstte. Oradan Default (Varsayılan)
Link Font Style Ayarlarız.(Arial, Verdana Vs..)
Altta Dört Adet Renk Seçeneği Vardır.

Link
Rollover Link
Visited Link
Active Link
Şimdi Bunları Tek Tek İnceleyelim.
Link
Sayfada Link Verdiğimiz Yazıların Alacağı Renktir. Mesela Default Font
Rengimiz Beyaz ise Linkimiz Kırmızı Ayarlarız. Böylece Sayfada Link Verilen
Yazılar Diğerlerinden Ayırt Edilmiş Olur.
Rollover Link
Linkimiz Kırmızıydı Değil mi ?
Evet Mouse Üzerine Gelince Fontun Alacağı Renktir. Kırmızıyken Üstüne
Gelince Siyah Olması Gibi.
Visited Link
Ziyaret Edilen Link Rengidir. Linkin Üzerine Tıklayınca Aldığı Renktir.
Active Link
Aktif Olan Link Rengidir.
Son Olarak Underline Style Sekmesi Vardır.
Burada 4 Seçenk Vardır Bunlar ;

Always Underline
Never Underline
Show Underline Only On Rollover
Hide Underline On Rollover
Şimdi Bunları Tek Tek İnceleyelim.
Always Underline
Her Zaman Altı Çizgili Anlamına Gelir. Yani Sayfada Link Verdiğimiz Textler
Her Zaman Altı Çizgili Görünür.
Never Underline
Hiçbir Zaman Altı Çizgili Olmasın ! Demektir.
Show Underline Only On Rollover
Mouse Linkin Üstüne Gelince Altı Çizgili Olsun Demektir.
Hide Underline On Rollover
Bunu Tam Olarak Bende Bilmiyorum. Ama Gizli Linklerin Üstüne Gelince
Altı Çizgili Ol ! Gibi Bişey Olması Lazım. Pekte Önemli Bir Unsur Değildir.
Daha Sonra Headings Sekmesi Gelir. Burada Alt Alta Heading 1,2,3 Vs..
Göreceksiniz. Yanındaki Seçenekleri Açdığınızda Sayılar ve XSmall , Large
Gibi Değerler Görürsünüz. Html Bilenler Bilirler. Bilmeyenler İçin Kısaca Bir
Değineyim.
Bu başlık komutudur. Fakat TİTLE ile bağdaştırılamaz. TİTLE Explorer çubuğundaki başlıktır bildiğiniz gibi. <h1></h1> ise arasına yazılanları belli boyutlara alır. <>arasındaki h1 in değerini 1-6 arasında değiştirmek mümkündür.

<h1>En Büyük Başlık</h1>

<h2>Başlık 2</h2>

<h3>Başlık 3</h3>

<h4>Başlık 4</h4>

<h5>Başlık 5</h5>

<h6>Başlık 6</h6>

Şeklinde değişik boyutlarda başlıklar elde ederiz. Headings Sekmesi de
Bu İşe Yarar.
Konumuza Dönelim.
Title Encoding...
İşte Geldik En Can Alıcı Noktaya. Türkçe Karakterlerimizin Olduğu Gibi Çıkması
İçin Title Sekmesinin Altında Encoding Sekmesi Vardır. Burada Yandaki
Seçeneklerden Türkçe (Windows) Seçilir. Artık Sayfamızın Alt Yapısı Hazırdır. Ok
Basarız ve Tasarıma Başlarız.
Şimdi İse Buradan Seçtiklerimizi Bir Arada Görmek İçin Üst Kısımda 3 Sekme
Vardır. Design / Code / Split
Buradan Code ye Tıklarız ve Üst Kısımda Bir Takım Kodlar Görürüz. Aşağıdaki Gibi
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
<!--
bOdy,td,th {
font-family: Courier New, Courier, mono;
font-size: 14px;
color: #000000;
}
bOdy {
background-color: #FFFFFF;
}
a {
font-family: Times New Roman, Times, serif;
font-size: 18px;
color: #000000;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0099FF;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #FF3333;
}
-->
</style></head>
Burada Aşağıdaki Kod Sayfa Alt Yapısının En Üstünde Yazılıdır.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
Son Kısımdaki charset=iso-8859-9> Sayfanın Türkçe Olmasını Sağlayan
Koddur. Eğer iso-8859-9 Yerine Utf-8 Yazsaydı İngilizce Olurdu. Neyse
Sadece Bilinmesi Açısından Söyledim Her Dilin Bunun Gibi Ayrı Ayrı Kodu
Vardır.
Alt Kısımında Ki Kodlarda Bakıldığında Anlaşılır Aslında En Başından Default Link
Renkleri Yazı Fontları Size Ları Falan Ayarlanmıştır. Buna CSS Denir. CSS ler Style
Dosyalarıdır. Şimdi Sayfamız Alt Yapısı Oluştuğuna Göre Sayfamızı Tasarlamaya
Başlayabiliriz.
Tekrar Birlikteyiz. Dreamweaver ile Web Tasarım Püfleri [1] ’ de Sayfamız
Altyapısına Değinmiştik. CSS ler Oluşturmuştuk. Herşey Hazırdı. Şimdi
Sayfamızı Tasarlayacağız. Öncelikle Dreamweaver ’ da Web Sitesi
Yapmaya Başlarken İlk Olarak Yapmamız Gereken Nedir ?
Buna Değineceğiz. İlk Olarak Yapmamız Gereken Tablo Oluşturmaktır.
Neden Tablo ?
Güzel Bir Örnekle Soruyu Cevaplandırayım. Bir Bina Yapmaya Başlarken
Önce Temel Kazılır Değil mi ? Daha Sonra Kolonlar Dikilir. Demir Büyük
Teller. Yani Bir Anlamda İskeleti Olmadan Bina Olmaz. İşte Web
Sayfalarınında İskeleti Tablolardır. Tablolar Olmadan Sayfamıza
Yerleştireceğimiz Objeler Düzenli Durmaz. Bu Bakımdan Tablolara İhtiyaç
Vardır. Tablo Oluşturacağız Fakat Kenar Kalınlık Parametresi Olan
Border 0 Yapacağız. Böylece Sayfamızın İskeleti (Tablosu) Olacak
Lakin Sayfada Görünmeyecek. Üstte Common Sekmesinde
Soldan Dördüncü Sıraya Tıklıyoruz. (Table)
Karşımıza Bir Panel Açılacak
Burada En Üstte
Rows ve Columns Seçenekleri Vardır. Burada Rows Satır Columns Sütun
Anlamına Gelmektedir. Altında da Border Vardır. Kenar Kalınlığı Bunu 0 Yapıyoruz. Sayfamızda Tablo Olacak Ama Görünmeyecek. Genelde Bir Web Sayfası İçin En İdeal İki Şablon
Vardır. Şimdi Bunları İnceleyelim.
Şablon 1
4 Satır 1 Sütun ’ dan Oluşur.
Genişlik 800 Yükseklik 600 Olarak Ayarlanır. Table Panelinde Sadece
Width (Genişlik) Değeri Vardır. Buradan 800 Ayarlarız. Yüksekliğini İse
Tabloyu Seçeriz ve Elimizle Daraltır Genişletir Ayarlarız.
Şablon 2
3 Satır 2 Sütundan Oluşur. Yine Genişlik 800 Yükseklik 600 İdealdir.
Fakat Şablon 1 de Belirtmedim. Bunlar Değişkendir. Yani 800*600
Olacak Diye Bir Kaide Yoktur. Kendinize Göre Ya da Sayfanızda Neler
Yayınlayacaksanız Buna Göre Büyük Ya da Daha Küçük Ayarlayabilirsiniz.
O Size Kalmıştır. Şimdi Verdiğim Her İki Şablon Örneğinide İnceleyelim.
Şablon 1 Hakkında
Şablon Biri Tarif Ettiğim Şekilde Oluşturduk. Peki Neden 4 Satır ?
1. Satır Banner İçin Ayrılmıştır. Standart Olarak 200 Piksell Yükseklik
Verilir ve Buraya Reklam Banneri Eklenir. Reklam Banner Ları Hazırlarken
En Professional İki Program Photoshop ve Flash Yardımı İle Yapabiliriz.
Hemen Onun Altındaki 2.Satıra Menu Çubuğu Koyulur. Buttonlar Ortalama
40 Piksel Yükseklik Seçilir. Onun Altındaki 3.Satır Sayfamızda
Yayınlayacaklarımız. Yani Sayfamızın Gövdesidir. Onun Altındaki
4.Satır Copyright Çubuğudur. Menu Çubuğu İle Aynı Renklerden Oluşması
En Doğrusudur.
Şablon 2 Hakkında
3 Satır 2 Sütundur. Üst Kısım Yükseklik 200 Piksell Banner ’ a Ayrılmıştır.
Altındaki İse 1.Sütun Solda Menu ’ ye Ayrılmıştır. 2.Sütun ise Sayfanın
Gövdesidir.
Altındaki 3.Satır İse Copyright Çubuğudur. Şimdi Farkındayım İkinci


Şablon Biraz Karışık Oldu. Bazı Soru İşaretleri Oluşturdu Kafamızda.
Sorulardan Biri Şu ;
3 Satır İki Sütun Tablo Oluşturduk Fakat Sadece 2.Satırın Sütunları
Açıklandı. İşte Solda Menu Sütunu Solda Gövde.
Banner de İki Sütundan Oluşuyo. Şimdi Burada Tablo nun En Üst ve En Alt
Satırlarındaki Sütunları Birleştirip Tek Sütun Haline Getireceğiz.
Bunu Nasıl Yapacağız. Şöyle Collspan ve Rowspan Denilen İki Kod Vardır.
Collspan Sütun Birleştirmeye Yarar. Rowspan Satır Birleştirmeye Yarar.
Bunları Kodlardan Ayarlamak Mümkündür Elbet Ama Biz Dreamweaver
Kısayolları Yardımı İle Yapacağız. E Kodlardan Yapsaydık Neden Editör
Kullanalım ki )
Üstteki Bannerin Yer Alacağı Sütunu Birleştirmek için İki Sütunuda Mouse
Yardımı İle Seçili Hale Getiririz. Sonra Altta Programın En Altında
Properites Alanı Var Orada Solda En Altta Küçük Bir İcon Var.
Ona Tıklarız ve Sütunlarımız Birleşir. Aynı İşlemi Copyright Çubuğunun
Yer Alacağı En Alt Satır İçinde Yaparız. Ortadaki Sütun Birleşmeyecek.
Çünkü 2. Şablon da Menu Üstte Değil Solda Olacaktır.
Neyse Konudan Kopmayalım. Tablomuzu Oluşturduktan Sonra
Tasarımımızı Yaparız. Tasarım Size Kalmıştır. Yaratıcılığınızı Konuşturun.
Fakat Bir İki Nacizhane Tavsiyem Olacak Kabul Eder Ve Kullanırsanız.
Web de En Önemli Unsurlardan Biride Sayfanızın Hızlı Açılmasıdır.
Bu Nedenle Button Bile Kullanmasanız Yeridir. Button Kullanmayın
Dediysem Yani Herhangi Bir Flash Button Ya da Ps de Yapılmış Button
Kullanmayın. Tabi Sitenizin Amacına Göre. Eğer Siteniz Portal İse
Yani Bir Tasarım Sitesi Falan Değilde Bu Benim Şahsi Fikrimdir.
Herhangi Bir Konuda Bilgilendirme Amaçlı İse Görsellik Pek Önemli Değilde
Sitenin İşlevi Önemli İse Yani Sitenin İşlevi Kullanıcıyı Çekecek Düzeyde
Bir Site İse (Örneğin Program Download Siteleri) Sadece Yazılara Link
Vermek Yeterlidir. CSS ler Kullanarak Yazılara Link Verirsek Çok Hoş
Buttonlar Haline Gelirler. Mesela Sayfa Arkaplanı Siyah Link Rengi Beyaz
Üstüne Gelince Kırmızı Oluyo. Bir Portal İçin Gayet Hoş Olur. Eğer Bir Web
Design Sitesidir İşlevinden Çok Tasarım Önemlidir. O Zaman Kullanın En İyi
Button Tasarımlarınızı. Bannerlar da Tavsiyem Yine Web Sayfalarınızın Hızlı
Açılması İçin Resim Kullanmanız. Ama Sitenizin Amacına Göre Harika Flash
Bannerlar da Kullanabilirsiniz. Eğer İstenirse Dreamweaver Hazır Flash
Buttonlarından da Kullanabilirsiniz. Üstte Common Sekmesinde Flash
Button Sekmesinden Buttonlara Bakıp Kendinize Uygun Olanı
Seçebilirsiniz. Button Ekleme Panelinde Buttonun Üstünde Yazacak Yazıyı
Yazının Tipini Boyutunu Linkini Verebilirsiniz.

chrome

Teşekkürler.....