Profesyonel bir Web Sitesi Yapalım Hemen Şimdi

Bir önceki dersimizde Table (Tablo) kullanarak web sitesi yapmak için bir başlangıç yapmıştık.
Aslında Word programı kullanan ve burada Tablo yapmayı bilenler için bu anlatacaklarımız hiç de yabancı şeyler değil.

Ben bu derste anlatacaklarımızın ne kadar önemli ve gerçek bilgiler olduğunu size göstermek için şöyle bir yol izleyeceğim. İnternette bu işten para kazanan Profesyonel bir sitenin aynısını burada beraberce yapacağız.

Aşağıdaki linki tıklayıp siteyi açalım.

http://www.domeinnaamreseller.nl

Gördüğünüz gibi bu site öyle amatör bir site değil. Domain name yani alan adı satıyor. İşi bu. Bu işten para kazanıyor. Yabancı bir site. Profesyonel bir e-ticaret sitesi. Ne kadar sade, derli toplu değil mi? Her tarafında bir şeyler yanıp sönen janjanlı siteler sadece bizde var.

Şimdi önce siteye bir göz atalım. Site bizim bir önceki dersimizde anlattığımız tablo gibi yapılmış. Yalnız bizim tablomuz üç sütunluydu yani sol, orta ve sağ sütünları vardı. Bu site ise iki sütunlu; sol ve sağ. Soldaki sütunu menü olarak kullanmış. Biliyorsunuz site içindeki diğer sayfalara gidebilmek için konulan linklere menü deniliyor. Sağ sütunu ise içerik sütunu olarak kullanmış.

Sayfamızdaki tablo ekran genişliğinden küçük.  Tablonun sayfayı ortalaması sağlanmış. Bu sebeple sağ ve sol taraf boş kalmış.

Soldaki linklere tıkladıkça sayfalar değişiyor, fakat sitenin ana tasarımı hep aynı kalıyor. Demek ki böyle bir sayfayı şablon gibi hazırlayıp, diğer sayfalarda sadece içerik kısmını yani sağdaki sütünun içindeki bilgileri değiştirdikmi iş tamam. Üstte amblem konulan bir bölüm var. Altta ise adres, copyright(telif hakkı) bilgileri vs. var. Bir önceki dersimizde zaten bunları belirtmiştik. Hadi o zaman ne duruyoruz. Sitemizi yapmaya başlayalım.

Siteyi yapmaya başlamadan size daha önceki derslerde söylediğim bir püf noktasını tekrar hatırlatmak istiyorum. Bu sitenin kodlarını biz nasıl görüyoruz. Site üzerinde sağ tıklayıp açılan menüde "Kaynağı Görüntüle" yi tıklıyoruz, ya da explorer'in üstündeki "Görünüm" menüsünü tıklayıp burada açılan menüde "Kaynak"  yazısını tıklıyoruz. Web sitesinin kodları Not Defteri (Not Pad) programında karşımıza çıkıyor.Yani bizim burada yazacağımız kodlar aslında orda gördüğünüz kodlar. Benim burada yapacağım o kodları bir sıra dahilinde size anlatmak.

Önceki derslerimizde gösterdiğimiz web sayfamıza ait ana kodları tekrar buraya koyalım.

Bir önceki derste Table yapmayı görmüştük. O bilgilerin ışığında bu sitenin şablonunu oluşturan Table'ı aşağıya çıkaracağım.

Önce bir iki ufak ilave yapalım. Geçen derste tablomuzun genişliğini, yüksekliğini, border(kenar çizgisi) kalınlığını ve rengini ayarlayan özellik kodlarını görmüştük. Burada bir iki özellik kodu daha kullanacağız.

Tablomuzun veya tablomuzu oluşturan satırların veya bu satırlar içerisindeki hücrelerin arkaplan(background) rengini bgcolor koduyla ayarlıyoruz. Renkleri doğrudan renklerin ingilizce isimleriyle yazabiliyoruz. Ya da altı harf veya rakamdan oluşan özel renk kodları ile yazıyoruz.

bgcolor = red yazdıkmı rengimiz kırmızı oluyor
ya da bgcolor = #fff000 şeklinde renk kodları ile yazıyoruz.
Burada renk kodlarının önüne # işareti koyarak bilgisayarın burda yazılanı renk olarak algılamasını sağlıyoruz.

Önümüzdeki derslerde renklerin ingilizce isimlerini ve renk kodlarının listesini vereceğim. Şimdilik bu kadar bilmeniz yeterli.

Aşağıya kodlarını yazacağım şablon Table'ın içerisinde bir de cellpadding=0 ile cellspacing=0 gibi iki ayrı özellik var. Bu da şimdilik ayrıntı. Ana yapıyı bir halledelim. Ayrıntıya sonra gireriz.

Table kodlarımız içerisinde bir de align = center yazıyor. Bu kod sayesinde tablomuz sayfayı ortalayacak. Çünkü tablomuzun genişliği ekrandan küçük. Tablomuzun genişliğini 700 piksel yapmışlar. 1024 x 768 çözünürlükte sayfanın kullanılabilir genişliği 1000 piksel civarında. Yani tablomuzu ortalayınca sağda ve solda 150'şer piksellik boşluk kalıyor.

Bir de valign diye bir özellik var. valign = top yazdıkmı o bölümde yazılanlar hücrenin üst tarafına doğru hizalanıyor.

Şimdi hemen tablomuzu verelim. Tablomuzun içerisindeki border kalınlığını border=1 olarak yaptım tasarım belli olsun diye. Siz bunu sonradan border=0 olarak değiştirirsiniz.

İşte bu kadar sitemizin ana tasarımı hazır. Bu Table kodlarını web sitemizin ana kodlarındaki <body>   ve  </body> etiketleri arasına koyalım. Sayfamız aşağıdaki şekli alsın. Sonrada bunu daha önceki derslerimizde anlattığımız gibi burdan kopyalayıp Not Defteri Programının içine yapıştıralım ve default.html adıyla kaydedelim.

Sayfamızı internet explorerda açalım bakalım nasıl görünecek. Ben de merak ettim doğrusu.

Ben baktım güzel olmuş. Önümüzdeki derste kaldığımız yerden devam edeceğiz.

Tabi siz bu arada sitemizi çevrenize tavsiye etmeye devam edin. Arkadaşlarınıza sitemizi tavsiye eden emailler gönderin. Sitemizin ziyaretçi sayısı artmayınca moralimiz bozuluyor. Bu kadar çaba boşuna mı diye üzülüyoruz.