Web Sitesi Nasıl Yapılır? (Örneklerle Site Yapım Aşamaları)

Kendinize özel siteler yapmak arzusunda iseniz, bu yazıyı dikkatle okumanızı öneriyorum. Çünkü bu yazımda web tasarımına yeni başlayanların bilmeleri gereken aşamalara değinmek istiyorum.

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.

Test Aşaması

Sonra siteyi test ediyoruz, tasarımda veya programlamada hatalar varsa gideriyoruz.

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.

Kolay gelsin.

  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Hocam eline koluna sağlık çok güzel anlatım ama dediğin gibi tasarım olayında insanın becerisi gerekeriyor çoğumuzda orda takılıyodur heralde...
:kirp:katılıyorum arkadaşım
Bu ders fikir kurmam açısından cok önemli geldi silere minnettarım. :)
slm,Kardeş, flash larımı swf olarak front peace de nasıl kaydedicem ,sayfaya, bi yardımcı oluver ,lütfen.slm
süper bir yazı oolmuş teşekkürler...
emeğine sağlık güzel anlatım ben normalde grafikerim 10 yıldır yapıyorum grafikte bu aralar webmasterlığa merak saldım grafikde pek sorunum olmuyor bende kodlama'da takılıyorum biraz
güzel anlatım site hangi programda hazırlanmıştır ayrıca photoshop yerine corel de çıkartsak gine aynı sonucu alırız bir eksisi oluru siteyi dreamvaerdemi yoksa başka bir programdmı tasarladınız tsarlamak için kulanılan resimlei kolonları hangi pogramda hazırladınız....!
hocam birde corel demi daha iyi sonuç alırız firewoks tmı biliyorsunuz firewoks çok tercil edilmiyor bunu sebebi nedir...?
Arkadaşlar, bu yazı fikir vermek amacıyla yazılmıştır, yazı ile birebir ilgisi olmayan sorularınızı Forum alanında sorabilirseniz daha kısa sürede cevap alabilir ve sorununuzu çözebilirsiniz.
1998 den belli hep aynı mantık Acele edin ;)
çok faydalı paylaşımlar yapıyosun sürekli.bir sorum olcak.bu derste flash ta yaptıın header tasarımı haricinde tüm işlemleri fireworks tamı yaptın acaba.(photoshopuda hariç tutuyorum)yani kodlama ve sitenin oluşumu fireworks işimi?sağol
meraba arkadaşlar anlatım gerçekten güzel bende bu meslek için yeniyim web tasarım ögrenmek istiyorum. Bu konu hakkında hiç birşey bilmiyorum bu siteyi de arkadaşım önerdi çok site gezdim ama bu kadar içerikli anlatm görmedim.Bu siteten çok şey öğreneceğim tabi sizlerinde yardımıyla nerden başlamam gerek önce ondan başlayalım yardımcı olursanız çoooook sevinirim .... :-dusun:
Güzel makale. Ama ders olması için biraz daha açılmalı. Teşekkürler klavyene sağlık.
elinize sağlık çok yararlı oldu
yazı kesinlikle faydalı ancak table ile site yapmanın tarihe karıştığını siz de tahmin edersiniz. yıldırım bobinaj bir revizyona mı gitse acaba :)
hocam bu flash ta benım ıng odevı ıcın nasıl buton yapabılırım cok merak edıyorum yardımcı olursanız sevınırım...
yararlı oldu benim için sağolun
Gördüğüm kadarı ile arkadaşlarımızın birçoğu dersten yola çıkarak genel sorular yöneltiyorlar. Bu konu çok kapsamlı bir konu. Burada bir iki kelime ile ifade etmemiz çok zor. Bu nedenle bu konu ile ilgili sorularınızı Forum bölümünde ilgili bölümlerde dile getirirseniz hem daha hızlı yardım alacaksınız, hem de daha doyurucu ve çok sayıda cevap elde edeceksiniz.
emeğiniz için teşekkür ederim. Derste bahsi geçen ürün güncelleme dosyalarına nasıl ulaşabilirim?
ya benim bu tarz konulara merakım var ama dersten hiç bir şey anlamdım
gerçekten süper bir çalışma olmuş teşekkürler
ben anlamıyorum bu işlerden ama bir yerlerden başlamalı :) o yüzden bu bana yeterli değil gende teşekkürler emek her zaman saygı hakeder....
ben veb tasarımına yeni başlamış biri olarak çok beğendim teşekkürler..
slm arkadaslar ben aranıza yenı katıldım ve hiç bişey bılmıorum web hazırlamak için hangi proğramlar gerekıoo yardımcı olursanız sevınırım ben nereden alacagım programlarılütfen yardım edın simddiden teseurler
aynen :kirp:
fena değil :)
BENCE ÇALIŞMA GÜZEL AMA NEYİ NEREYE NASIL YAPTIN HİÇ BELLİ DEİL GALİBA AMAÇ DERS DEİL
bu web tasarımı için özel bi program mı gerekli varsa adı ne programın
arkadaşlar ben burda bahsi geçen fotoshopta site yapmak hakkında çok çok yeniyim nerden öğrenebilirim?
Merhaba, web sitesini kurmak icin para odemek gerekiyor mu?
scripti paylaşsanız tam süper olacak
benm bunu gbi site açmak için bi program yüklemem gerekiyomu?henüz dha ilk yapışım bna yardımcı olun lütfen!!
Mükemmel bir anlatım çok teşekürler
Paylaşım için teşekkürler.benim site hazırlama konusunda sorunum yok şuan.fakat bannerdaki esnek hatların nasıl yapıldığını bilmiyorum.bu konuda bana yardımcı olursanız sevinirim.hepinize iyi çalışmalar ve daimi başarılar diliyorum.
hocam güzl yazmışsınız tamamda kodlama kısmını nasılyapacağımız hakkında biraz bilgi verin.Ana sayfa hakkında iyi kötü bir planımız var
Arkadaşım eline sağlık site süper olmuş. Ama temeli ve nasıl yapılacağını anlatmassan kimse siteyi yapamaz.
merhaba. arkadaşım çok güzel anlatmışsın konuyu fakat takıldığım bir nokta var? bu çizdiğimiz sayfayı nasıl internette yayınlayacağız. Teşekkürler
flash mx de yorum eklemeyi bilen varsa lütfen cevap yazsın...kodları söylemeniz bile yeterli
çok güzel anlatmışsınız ama benim size bir sorum olacak frame siz sadece katmanlar la nasıl link kurulabilir lütfen cevap yazarsanız çok sevinirim
hocam eLınıza sagLık cok guseL anLatmıssınız..
selam çok güzel olmuş beğendim ve benim site üzerinde çalışmalar yaptım ve sizlere sunuyorum
çok iyi anlatmışssın mahaşallah
bende yeni başladım ama istekliyim bu işte.:) umarım iyi birşeyler çıkarabilicem. siteniz bana iyi bir kaynak olacak gibi görünüyor. teşekkür ederim konu ve e-dergi için. acaba site adresimizi vererek yorum almamaız mümkünmü? teşekkürler...
çok güzel eline sağlık
hocam fikir vermek ne demek ilham kaynağı oldunuz resmen sağolun
Arkadaşlar Sitem Var ama tasarımbilmiyorum bana yardım edecek varmı?
Buton Nasıl Yapılıyor Yardım Edermisiniz ? ?
Anlatım güzel olmuş.Fakat benimde bir sorum olacak Ben web tasarımda Frontpage kullanıyorum.ASP bilgimde var fakat ileri düzey deil.En büyük hedefim kaliteli bir yapıya sahip yönetim paneli hazırlamak.Fazla uzatmayım bu tasarımda layer kullanımı varmı?Yoksa sadece tablolama sistemimi.Ben layer kullandığım zaman kodlama yaparken pek verimli olmuyor.O yüzden tablolama ile bu tip bir web sitesi hazırlanabilirmi?Pek web tasarımda iyi değilim.Kodlamada iyiyim.O yüzden bilgi verirseniz iyi olur...
Ben bir önceki mesajımda belirttiğim gibi fazla web tasarımda iyi değilim.Ama şunu oluştur.Buton yap fln deseler hepsini yaparım.Yani anlayacağınız projem iyi deil.İşte burdada zaten o konuyo değim almışsınız güzel olmuş.Ben resim montajında sadece fireworks kullansam tasarımda gerçekten iyi bir güzellik sağlayabilirmiyim.Cevaplarsan hocam sevinirim.Bu tür web tasarım bilgilerinizi ihmal etmeyin gerçekten bu tip bilgiler insanı çok geliştiriyor.Hepinize teşekkürler!!!
Resimle ilgili çalışmalarınızda Photoshop öneririm.
:agla:suandada hiç bir bilgisi olmayan bir insan bunları nasılyapabilir sitenin adını link leri ve daha ince ayrıntıyı nasıl yapabilir
Sevgili arkadaşlar, sorularınızın birçoğunu bu kısımda cevaplamam mümkün değil, en iyisi forum bölümünde sorun derim. Orada hepimiz elimizden geldiğince cevaplamaya çalışacağız.
bu çalışma daha ayrıntılı dersler şeklinde açıklarsanız seviniriz. Sayın Hocam çalışmlarınızda başarılar dilerim. Ramazan ayınızın mutluluklarla geçmesini temenni ederim...
en güzel animasyon photoshop ve flas ile olmaktadır unutmayalım
dreamwearde nasıl yapılacak bu web sayfası ya neden acıkca anlatan bır sıte yok bununla ılgılı butun sıtelerı taradım
hocam emeğinize son derece saygı duyyorum ama biraz daha adım adım anlatmış olsanız, bende dahil bu tür programları bilmeyipte öğrenmeye yeni yeni başlayan arkadaslar için çok faydalı olacaktır. teşekkür ediorrum. inşallah birgün bende bu işi kapınca bilgilerimi sizlerle paylaşmaktan mutluluk duyacağım
emeğinize sağlık, yaptım güzel oldu ama kod arkasında, tasarım biraz dandik oldu,
helal olsun :D
wlla hiç yardımcı omadınız sitenin iskletini yaada kodlarını verseydiniz programcının yaptıgı programı upload yapsaydınız:sasir:
teşekkürler siracel abi mukemmel olmus sade ve kolay bi tasarım ayı zamanda göze hoş görunen iyi bir tasarım elıne sagllık dıkkatle okudum inceledım teşekkürler
Güzel paylaşım eline koluna sağlık bende web tasarımı yapmak istiyorum fireworksta tasarımıda yapıyorum ama benim takıldıgım kısım anasayfaya yapmış oldugum tasarımdan fazla yazı eklersem sayfadaki resimler parçalanıyor onu nasıl düzeltebilirim :(
sağolun emeklerinize sağlık
bnde web tasarım okuorum ama hiç görsel becerim yok hani bi ürünle ilgili reklam hazırlıycaqımda baya üzerinde düşünmek zornda kalıorum :( asp.net görüyrz şimdi o dha berbat bi konu uuff keşkee bu bölüme girmeseydim o kadr eglenceli bi şey deil bilen için eglenceli =( :-dusun:
hocam gerçekten çok güzel olmuş. emeğinize sağlık.
hocam bana bir web tasarım program ismi önerirmisin.Merak sardı bir tane yapıp denemek istiyorum mümkünse anlaşılır bir program olursa sevinirim.Teşekkürler
Arkadaşlar Buraya konuyla alakalı veya alakasız sorularınızı yazmayın yorum yapın sadece. Eğer ki sormak istediğiniz soru varsa Forum bölümünden konuya uygun sorunuzu yazınız en kısa zamanda ilgili yönetici size cevap verecektir. Önemli yorumlar vardır diye okudum sürekli soru çıktı.
ellerine sağlık hocam bu benimn ilk mesajım oda sana kısmetmiş:D:D:D
teşekürler hocam işe yarar paylaşım saolasın.
videolu olması gerçekten çok iyi olur..
MERHABA ARKADAŞLAR , Ben şimdiye kadar hiç site yapmadım.ama ö ğrenmek istiyorum işe nası başlamam gerek
Teşekkürler..
ben 2 yıldır bilqisayar okuyorum. web sitesi yapmayı merak ettim we bana yardım eder misiniz ?
şimdiden teşekkr ederim
Teşekkürler...
[i]slm 17 yaşında bir öğrenciyim okulda bize dreamweaver çok az öğrettiler visual studio kullanıyoruz ve kendi başımıza site yapmadık sürekli css indirip çalıştık şimdi bir yerde çalışıyorum beni yetiştirmek için yanına alan bi mühendis bana resmi bi site yap dedi elimde sadece visual studio var fireworks ve flas yok nasıl resmi bi site yapacam ve elimdekide css resmi bi site olurmu lütfen yardım ?[/i]
Güzel bir yazı olmuş elinize sağlık.
Bilgilendirici ve öğretici bir çalışma emeğinize sağlık.. eğer kendi web sitesini kurmak isteyen ve bu konuda eğitim almak isteyen olursa arkadaşlar websitesi-nasil-yapilir.blogspot.com.tr adresine bir göz atmanızda fayda olabilir.
Merhaba Arkadaşlar. Bildiğiniz gibi hayatımızda büyük yer kaplayan internetin temel parçası olan web sitelerinde sizinde yeriniz olmasını istiyorsanız size sunduğumuz HTML ve CSS eğitimleri ile web sitelerin temel bileşenlerini öğrenmiş olursunuz. Eğitim sonunda Weeb Adminli (Yönetici Panel) bir siteye sahip olacaksınız ve bununla kalmayıp kazanacağınız sertifika ile iş imkanlarınızda artacaktır. Weeb Admin sizlere şöylece kısa bir özet geçmek olursa oluşturduğunu veya oluşturduğumuz web sitesini modüller mantığı ile parçalara bölerek daha hızlı ve kolay bir kullanım sağlamaktadır.
Merhaba, Web sitesi nasıl yapılır ve yapım aşamalarını çok güzerl anlatmış arkadaş. Değerli paylaşımı için teşekkür ediyoruz. birNC olarak bizde bu çalışmalar sonucunda ortaya çıkan projeleri paylaşmak istedik. Buyrun >> https://www.birnc.com.tr/web/referanslar

Yukarı Git