Web Tasarım NasıL YapıLır? En ince DeTayına Kadar Anlattım [ResimLi AnLaTım]

[Admin]

Son zamanlarda artık hemen hemen herkes, kendi sitesini yapmanın bir
yolunu aramaya başladı. Kimi template 'edit'liyor, kimi üstünkörü site
bozması bir şeyler yapıyor, kimi de gerçekten uğraşıyor, güzel
çalışmalar çıkarıyor. İnternetteki kaynaklardan öğrenebildiği kadarıyla
herkes bir şeyler döktürmeye gayret ediyor.

Eğer siz, "ben uğraşamam kardeşim, site mite yapmak için program filan
öğrenemem, herhangi bir hazır site bile benim işimi görür" diyorsanız,
basit bir blog sitesi kurmayı deneyebilirsiniz. Ama kendinize özel
siteler yapmak arzusunda iseniz, yazımızın bundan sonraki kısmını
dikkatle okumanızı öneriyorum. Çünkü bu yazımda web tasarımına yeni
başlayanların bilmeleri gereken aşamalara değinmek istiyorum.

Örnek bir çalışma ile başlayalım.

Ön Hazırlık Aşaması

Mesela bu yazımızda bir elektrik firmasını ele alalım ve onun üzerinden gidelim.

Yıldırım Elektrik Bobinaj firması bizden müşterilerinin kendilerine
kolayca ulaşabileceği ve ürünlerin ön planda olduğu bir web sitesi
yapmamızı istiyor. Ürünlere daha sonra ekleme-çıkarma yapılmasını, yani
dilediği zaman bir kategori ve ürün eklemek çıkarmak istiyor.

İlk önce yapacağımız site ile ilgili dokümanları temin ediyoruz.
Ürünleri ve kategorileri belirliyor, "Hakkında" kısmı için
kullanacağımız metni ve adres telefon gibi iletişim bilgilerini
alıyoruz. Bizden istenen çok da aşırıya kaçmadan sadelik üzerine kurulu,
kullanışlı bir web sitesi oluşturulması. Varsa diğer bilgilere de
ulaşıyor ve ön hazırlık kısmını tamamlıyoruz. Böylece sitemiz dört
kısımdan oluşacak: Ana Sayfa, Hakkımızda, Referanslar, İletişim. Ürünler
ise başlı başına bir modül olacak.

Tasarım Aşaması

Artık sitenin yapısını belirlememiz gerekiyor. Bunun için önce bir
karalama ile plan yapmamız lazım, ki sonrasında bunu tasarım haline
getirebilelim.



Photoshop yardımı ile sitede kullanacağımız materyalleri temizliyoruz.
Bunun için Fireworks'ü kullanmanızı önermem, tırtıklı bir şekilde
temizleme yapacaktır. En iyisi Photoshop'tur.



Tasarım çalışmamızda Fireworks kullanıyorum. Siz isterseniz Photoshop da
kullanabilirsiniz, ama Fireworks kadar bu konuda pratik olmadığını
belirtmek isterim. Tasarımımı tamamlıyorum:



Şimdi bu tasarımın diğer sayfalarda görünümünü yapalım. Referanslarımız kısmı aşağıdaki gibi olacak:



Ürünlerden birine tıklandığında aşağıdaki gibi görünecek:



Tasarım işi sizin becerinize kalmış zaten. Tasarım yaparken çok güzel
görünüyor diye öyle herşeyi doldurmayın. Çünkü firma sahibinin bizden
isteği, sitenin kullanışlı olması, sitesine giren birinin gerekli
bilgileri elde edebilmesi.

Bir düşünün: Bir bobinaj arıyorsunuz ve Google'dan buldunuz siteyi,
girdiniz diyelim. Sitenin açılışında uzun süren bir animasyon, yanıp
sönen bir sürü saçma sapan hareketli nesneler var. Ana sayfaya geldiniz
yine aynı. Ne kadar etkileyici olursa olsun, o an için size bir anlam
ifade eder mi tüm bunlar? Yoksa sadece ürünle mi ilgilenirsiniz? İşte bu
düşüncelerle lüzumsuz gif animasyonlar, anlamsız resimler, çok farklı
keskin renkler web tasarımında uzak durulması gereken unsurlar olarak
karşımıza çıkıyor. Sadece amaca ulaşın, yeterli.

Tasarım kısmını tamamladım ve kendi mantığıma uygun şekilde
dilimliyorum. Dilimleme yaparken flash yapacağım kısmı tam olarak
kesiyorum. Başlıkları dilimlerle belirliyorum.

Hiçbir zaman Fireworks'ten HTML'ye dönüştürülmüş dosyalarla
çalışmadığımdan Dilimlediklerimi (sadece kullanacaklarımı) farklı
resimler halinde kaydediyorum.

Dreamweaver'da yeni bir sayfa oluşturuyorum. Genel olarak CSS kullanarak
oluşturduğum div'leri boyutlandırarak sayfa yerleşimini yapıyorum.

Sonra Flash programını açarak header bölgesi olarak belirlediğim kısmın
boyutunu ayarlıyorum ve daha sonra Fireworks'te bu alandaki tüm
parçaları ile kopyalayarak Flash içine yapıştırıyorum. Flash,
Fireworks'teki bir nesneyi veya nesneleri movie klip olarak, png
formatına import edecektir. Yapmanız gereken kopyala yapıştır yapmaktır.
Header'i istediğimiz hareket ve efektleri vererek sade bir şekilde
yapıyoruz.

Kodlama Aşaması

Bundan sonra programcı devreye giriyor. Soldaki ürünler menüsüne uygun
şekilde kodlamayı yapıyor. Birine tıkladığınızda o kategorideki ürünler
geliyor, ayrıca belirlenmiş olan kontrol panelinden kategori ve ürün
eklenebilir hale getiriyor.



Referanslar kısmını da benzer şekilde hallettikten sonra web sitesini
herhangi bir FTP programı vasıtası ile hostingine atıyoruz.



Sonuç:

Basit içerikli bir siteyi hazırlarken yukarıda bahsettiğimiz aşamaları
takip ederiz genelde. Sizlere fikir vermesi açısından gelen soru ve
talepleri de göz önünde bulundurarak böyle bir yazı hazırlama ihtiyacı
doğdu. Umarım bir fikir vermiş ve yararlı olmuştur.

EMEGE SAYGI KONUYU YANLIS YERE ACTIYSAM AFFOLA KONUYU TASIRSINIZ TEŞEKKÜRLER.