Zeki KAYNAK
Üye
- Kayıt
- 12 Aralık 2010
- Mesaj
- 374
- Tepki
- 5
Arkadaşlar ben bir web programcı değilim ancak forumda gezerken birçok arkdaşımızın çok çok
basit şeylerde takıldığını gördüm ve bir arkadaşımın ricası için basitçe tasarladığım bir web
sitesinin yapımını resimli anlatım olarak sizlerle paylaşmak istedim.
Şunu belirtmek isterimki bu tamamen bana aittir. Tablo kullanarak yapımı basit ama etkili bir site yapacağız.
Artık tablo yerine Div kullanılsada ben sizleri fazla kasmamak için öyle yapmadım.
Umarım birilerinin işine yarar.
Öncelikle ihtiyacımız olan programları paylaşmak istiyorum.
Adobe Dreamweaver CS5
Adobe Photoshop CS5
Wamp Server
bu üç programın bilgisayarınızda kurulu olduğunu varsayarak başlıyoruz.
Önce Başlat > Programlar > Wamp Server > Start Wamp Server
tıklıyoruz. Sağ alt köşedeki saatin yanında hız göstergesine benzer bir ikon belirecektir.
Sağ alt köşedeki ikona sol tuşla tıklayıp oradan da Start All Serviices tuşuna basıyoruz.
Devam etmeden önce bu programı neden kurduğumuzu ve ne işimize yaradığını söyleyim
Wamp Server bir local sunucu kurmanızı sağlar. Yani bir hosting satın almadan kendi
bilgisayarınızın içinde kendi web sitenizi internette geziniyormuş gibi görmek için
kullanılır. Ayrıca standart tarayıcılar ile php kodlarını yorumlayamadığı için php ve mysql
kullanarak oluşturduğunuz bir siteniz varsa internete upload etme sıkıntısı olmadan sitenizin
işleyişini kontrol edebilirsiniz.
Şimdi devam edelim öncelikle Wamp Server kurulduktan sonra eğer değiştirmediyseniz default
olarak c: dizininzin içinde wamp adında bir klasör oluşturur.
Şimdi wamp klasörüne girin ve oradan www klasörüne girin.
www klasörü World Wide Web teriminin kısaltılmışıdır yani webte gezerken sitelerin başında
www nin. Burada herhangi bir dosya varsa silebilirsiniz.
Ardından Dreamweaver programımızı açalım.
Açılan ana ekrandan Dreamweaver Site bağlantısına tıklayalım. Eğer ana ekranınızı görünmemesi
için daha önce ayarladıysanız. Window menüsünden Files'ı aktifleştirin yada F8 tuşuna basarak
files maneger'a ulaşın ve oradan da tekrar Manage Site'ı aktif hale getirin.
Dreamweaver Site'a tıladığınızda karşınıza Site Setup for Unnamed Site 1 isminde bir pencere
çıkacak. Buradaki alanları aşağıdaki gibi doldurun lütfen.
Site Sekmesi
Site Name : Bir Site İsmi Yazın
Local Site Folder : www klasörünüzü seçin yani burada standart olarak C:\wamp\www\
yazmalı
Server Sekmesi
Server sekmesinde önce alttaki artı tuşuna basarak yeni server oluşturuyoruz.
Önümüze gelen pencerede
Site Name : Bir Site İsmi Yazın
Connect Using : Buradan Local / Network ü seçiyoruz.
Server Folder : Tekardan www klasörünüzü seçin.
Web Url : http://127.0.0.1/
Save tuşuna basıp çıkıyoruz.
Diğer iki sekmede yapmamız gereken ayar yok. İkinci kez save diyerek çıkıyoruz.
ve site manager dan işimiz böylece bitiyor.
Şimdi öncelikle bir web sitesinde olmazsa olmaz şeyleri bilmemiz gerekiyor.
Bir web sitesi hangi çözünürlükte olursa olsun sorunsuz görüntülenmelidir.
İkincisi hızlı açılmalıdır.
Ve mümkün olduğunca güzel görünmelidir.
Bu bir grafik tasarım değilde bir web tasarım konusu olduğundan bu bölümü ben önemsemeden
geçiyorum.
Şimdi öncelikle dreamweaver dan yeni bir sayfa açıyoruz. Hiçbirşey yapmadan hemen boş
sayfamızı Ctrl + S ile kaydediyoruz.
Burada dikkat etmeniz gereken şey şu. Sayfanızı mutlaka wamp server www klasörüne
kaydetmelisiniz. Bu bir. Bir ikincisi ise sayfa isminiz kesinlikle index.html olmalıdır.
Web sayfanızın sorunsuz kullanılması için ana sayfa dosyanızın adınızın
HTML ve HTM için index.htm ve index.html
PHP ve ASP dosyaları için Default.php şeklinde isimlendirilmelidir.
Aski taktirde ana sayfanız görüntülenmeyecektir.
Bu ufak dipnotu verdikten sonra index dosyamıza devam edelim. Şimdi öncelikle sayfamızın dil
ayarını yapalım.
Herhangi bir yerde sağ tıklayıp Page Properties a giriyoruz ve oradan en alttaki Title
Encoding'e tıklayıp aşağıdaki gibi Türkçe'yi seçiyoruz ve Tamam diyip çıkıyoruz.
Ardından önce sayfa arka planımızı ayarlıyoruz. Ben bunun için alttaki arka plan resmini
kullanıyorum.
Şimdi yapmamız gereken şey arka planımızı her çözünürlükte aynı olacak şekilde ayarlamak.
Bunu sayfa ayarlarına girip yapamayacağımızdan kodlarla yapacağız. Tabi bundan önce arka plan
için kullanacağınız resmi www klasörünün içinde images adına bir klasör oluşturup oraya
atıyoruz.
Dreamweaver'ın kodlama sekmesine geçiyoruz.
<head></head> kodlarının arasına şunları yazıyoruz.
background-image: url(images/blackback.jpg);
yazısının olduğu yeri kendi arka plan dosyanıza göre değiştirin. Ardından sayfanızı kaydedin.
Burada şimdilik işimiz bitti artık photoshop'a geçip tasarımımızı yapabiliriz.
Ben yukarıdaki gibi bir ana sayfa ayarladım kendime.
Burada dikkat etmeniz gereken şey ögelerin sağdan ve soldan başladığı ve bittiği yerin eşit
olması. Tabiki eşit olmasa da olur ama eşit olması size ciddi bir kolaylık sağlayacaktır.
Şimdi bu tasarımı slice olarak bölüp html ye geçirmekten başka işimiz kalmadı.
Aşağıdaki resimde sitenin nasıl bölündüğünü görebilirsiniz. Çerçeveye alınmış her alan bir
dosya olacak şekilde bölünecek önce resmi inceleyin.
Yukarıda gördüğünüz gibi dosyamızı html ye geçirmek için slice tool ile 42 parçaya böldüm.
Yani bu site yüklenirken 42 küçük png dosyasının yükleneceği anlamına geliyor.
Burada projemizi nasıl bölüyor isek dreamweaverda da aynı şekilde geri birleştirip sitemizi
tamamlayacağız.
Şimdi bölme işini bitirmek için slice ayarlandıktan sonra photoshopta Save For Web menüsünden
tüm slicelar seçili halde iken PNG 24'ü seçip sonra herhangi bir klasöre kaydedeceksinz.
Ancak bunu yapmadan önce photoshop'ta sitenizin arka planını gizli konuma getirip projenin
transparan arka plana sahip olmasını sağlayın daha sonrada Save for Web işlemini yapın.
Save For Web işlemini yaptığınız klasörün içinde images adında bir klasör oluşacak. Bu
klasörün içindeki tüm dosyaları kesip www klasörünüzün içindeki images klasörüne taşıyın ve
ardından dreamweaver a geçip index dosyanızı yeniden açın.
Şimdi ilk olarak Insert menüsünden Table'a tıklayıp alttaki ayarları yazıp ok tuşuna basın.
Şimdi tablomuzu oluşturduk. Farketti iseniz eğer en üstte ne sol kenara yapışmış şekilde
geldi. Bunun nedeni arka plan ayarlarken yazdığımız kodlar. Bunu daha o zamanda ayarlamıştık.
Şimdi üstteki slice ların nasıl bölündüğüne bakın tablomuzu aynen bu şekile getirmemiz
gerekiyor. Alttaki resimleri incelerseniz nasıl bu hale geldiğini göreceksinz.
Bu işlem sonunda tablomuz ikiye bölünmüş olacak farklı şekillerde bu işlemi daha çok
yapacağız
Şimdi devam edelim.
Bu şekilde en üsteki menümüzün alanını oluşturmuş olduk. Şimdi kalanını halledelim.
Resimlerden takip edin.
Bunun ardından en son yaptığımız satırın içine geliyoruz ve 3 kez TAB tuşuna basarak altta
doğru 3 satır daha açıyoruz. Tablo aşağıdaki duruma geliyor.
Normalde şuan bulunduğumuz satırı da ikiye bölmemiz lazım fakat şuan bunu yapmayacağız
nedenini ileride anlatacağım.
Şimdi son olarak 3 kez daha TAB tuşuna basıyoruz ve son 3 satırımızı oluşturuyoruz.
Bu işlemin ardından tablomuz şöyle görünecek.
Şimdi tablomuzu oluşturduğumuza göre slice ile tablomuzu bir karşılaştırıp hani image
dosyasının nereye gireceğini bir görelim.
Sitedeki sliceların numaralarına göre tablonun içini dolduracağız aşağıdaki resimdeki
karşılaştırmayı inceleyin
Gördüğünüz gibi her image dosyasının yeri belli
Yanyana birden çok image olan yerlerde yani 3,4,5,6,7,8,9,10,11,12,13,14,15 numaralı image
dosyalarının olduğu gibi tüm resimleri yan yana yan yana eklemeniz yeterli olacaktır bunların
aralarını tablo ile ayırmanız gerekli değil.
Şimdi geçelim image ları yerlerine yerleştirmeye üstten sıra ile doğru image dosyasını doğru
yere yerleştirirseniz siteniz sorunsuz tamamlanacaktır.
Alttaki resimleri takip ediniz.
Resmi seçtikten sonra karşınıza küçük bir pencere çıkacak buraya hiçbirşey yapmadan OK'leyip
geçin.
Bundan sonra diğer image dosyalarınıda tablodaki yerlerine sırası ile yerleştiriyoruz. Ve
Sonunda...
Şimdi yapılması gereken 2 şey var tabloları arasını ayarlamak ve orta alanı ayarlamak
Öncelikle tablo boşluğu ile başlayalım.
Tablonuzun sağ taraftaki yukarıdan aşağı inen son çizgisinin üstüne farenizi getirdiğiniz
zaman fare her iki tarafada bakan bir ok haline gelecektir. Bu halde iken bir kez tıklayıp
tablonun tamamını seçili hale getireceksiniz. Resme Bakın.
Bundan sonra yapmamız gereken şey tablomuzun içindeki boşlukları gidermek bunun için
öncelikle hemen logomuz ile butonlar arasındaki üstten alta doğru olan çizgiyi tutup sola
doğru çekebildiğimiz kadar çekiyoruz. Ardından sitenin sağdaki tıkladığımız yerinden tutup
onuda sola doğru çekiyor ve olan boşlukların gitmesini sağlıyoruz.
Artık son CRTL + S işlemimizi yapıp sitemizi kontrol ediyoruz.
Tarayıcımızı açıp oraya 127.0.0.1 yazıp enter'a basıyoruz. Sonuç...
Ta Ta Ta Tammm
Böylelikle web sitemiz bitmiş oluyor.
Ortadaki boş kısımı dilediğiniz gibi doldurmakta özgürsünüz. Diğer sayfalarıda benzer şekilde yapıp link verip tamamen bitmiş bir siteniz olabilir.
Ben sadece temel kurulumu anlattım anlamadığınız biryer olursa yada takıldığınız yardımcı olmaya çalışırım.
Kolay gelsin.
Kullanmak yada incelemek isteyen olursa alttaki linkten PSD ve site dosyalarını çekebilirler.
Hotfile.com: One click file hosting: site.rar
basit şeylerde takıldığını gördüm ve bir arkadaşımın ricası için basitçe tasarladığım bir web
sitesinin yapımını resimli anlatım olarak sizlerle paylaşmak istedim.
Şunu belirtmek isterimki bu tamamen bana aittir. Tablo kullanarak yapımı basit ama etkili bir site yapacağız.
Artık tablo yerine Div kullanılsada ben sizleri fazla kasmamak için öyle yapmadım.
Umarım birilerinin işine yarar.
Öncelikle ihtiyacımız olan programları paylaşmak istiyorum.
Adobe Dreamweaver CS5
Adobe Photoshop CS5
Wamp Server
bu üç programın bilgisayarınızda kurulu olduğunu varsayarak başlıyoruz.
Önce Başlat > Programlar > Wamp Server > Start Wamp Server
tıklıyoruz. Sağ alt köşedeki saatin yanında hız göstergesine benzer bir ikon belirecektir.
Sağ alt köşedeki ikona sol tuşla tıklayıp oradan da Start All Serviices tuşuna basıyoruz.
Devam etmeden önce bu programı neden kurduğumuzu ve ne işimize yaradığını söyleyim
Wamp Server bir local sunucu kurmanızı sağlar. Yani bir hosting satın almadan kendi
bilgisayarınızın içinde kendi web sitenizi internette geziniyormuş gibi görmek için
kullanılır. Ayrıca standart tarayıcılar ile php kodlarını yorumlayamadığı için php ve mysql
kullanarak oluşturduğunuz bir siteniz varsa internete upload etme sıkıntısı olmadan sitenizin
işleyişini kontrol edebilirsiniz.
Şimdi devam edelim öncelikle Wamp Server kurulduktan sonra eğer değiştirmediyseniz default
olarak c: dizininzin içinde wamp adında bir klasör oluşturur.
Şimdi wamp klasörüne girin ve oradan www klasörüne girin.
www klasörü World Wide Web teriminin kısaltılmışıdır yani webte gezerken sitelerin başında
www nin. Burada herhangi bir dosya varsa silebilirsiniz.
Ardından Dreamweaver programımızı açalım.
Açılan ana ekrandan Dreamweaver Site bağlantısına tıklayalım. Eğer ana ekranınızı görünmemesi
için daha önce ayarladıysanız. Window menüsünden Files'ı aktifleştirin yada F8 tuşuna basarak
files maneger'a ulaşın ve oradan da tekrar Manage Site'ı aktif hale getirin.
Dreamweaver Site'a tıladığınızda karşınıza Site Setup for Unnamed Site 1 isminde bir pencere
çıkacak. Buradaki alanları aşağıdaki gibi doldurun lütfen.
Site Sekmesi
Site Name : Bir Site İsmi Yazın
Local Site Folder : www klasörünüzü seçin yani burada standart olarak C:\wamp\www\
yazmalı
Server Sekmesi
Server sekmesinde önce alttaki artı tuşuna basarak yeni server oluşturuyoruz.
Önümüze gelen pencerede
Site Name : Bir Site İsmi Yazın
Connect Using : Buradan Local / Network ü seçiyoruz.
Server Folder : Tekardan www klasörünüzü seçin.
Web Url : http://127.0.0.1/
Save tuşuna basıp çıkıyoruz.
Diğer iki sekmede yapmamız gereken ayar yok. İkinci kez save diyerek çıkıyoruz.
ve site manager dan işimiz böylece bitiyor.
Şimdi öncelikle bir web sitesinde olmazsa olmaz şeyleri bilmemiz gerekiyor.
Bir web sitesi hangi çözünürlükte olursa olsun sorunsuz görüntülenmelidir.
İkincisi hızlı açılmalıdır.
Ve mümkün olduğunca güzel görünmelidir.
Bu bir grafik tasarım değilde bir web tasarım konusu olduğundan bu bölümü ben önemsemeden
geçiyorum.
Şimdi öncelikle dreamweaver dan yeni bir sayfa açıyoruz. Hiçbirşey yapmadan hemen boş
sayfamızı Ctrl + S ile kaydediyoruz.
Burada dikkat etmeniz gereken şey şu. Sayfanızı mutlaka wamp server www klasörüne
kaydetmelisiniz. Bu bir. Bir ikincisi ise sayfa isminiz kesinlikle index.html olmalıdır.
Web sayfanızın sorunsuz kullanılması için ana sayfa dosyanızın adınızın
HTML ve HTM için index.htm ve index.html
PHP ve ASP dosyaları için Default.php şeklinde isimlendirilmelidir.
Aski taktirde ana sayfanız görüntülenmeyecektir.
Bu ufak dipnotu verdikten sonra index dosyamıza devam edelim. Şimdi öncelikle sayfamızın dil
ayarını yapalım.
Herhangi bir yerde sağ tıklayıp Page Properties a giriyoruz ve oradan en alttaki Title
Encoding'e tıklayıp aşağıdaki gibi Türkçe'yi seçiyoruz ve Tamam diyip çıkıyoruz.
Ardından önce sayfa arka planımızı ayarlıyoruz. Ben bunun için alttaki arka plan resmini
kullanıyorum.
Şimdi yapmamız gereken şey arka planımızı her çözünürlükte aynı olacak şekilde ayarlamak.
Bunu sayfa ayarlarına girip yapamayacağımızdan kodlarla yapacağız. Tabi bundan önce arka plan
için kullanacağınız resmi www klasörünün içinde images adına bir klasör oluşturup oraya
atıyoruz.
Dreamweaver'ın kodlama sekmesine geçiyoruz.
<head></head> kodlarının arasına şunları yazıyoruz.
Kod:
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: url(images/blackback.jpg);
height:100%;
width: 100%;
}
html{
margin:0;
padding:0;
height:100%;
width: 100%;
}
</style>yazısının olduğu yeri kendi arka plan dosyanıza göre değiştirin. Ardından sayfanızı kaydedin.
Burada şimdilik işimiz bitti artık photoshop'a geçip tasarımımızı yapabiliriz.
Ben yukarıdaki gibi bir ana sayfa ayarladım kendime.
Burada dikkat etmeniz gereken şey ögelerin sağdan ve soldan başladığı ve bittiği yerin eşit
olması. Tabiki eşit olmasa da olur ama eşit olması size ciddi bir kolaylık sağlayacaktır.
Şimdi bu tasarımı slice olarak bölüp html ye geçirmekten başka işimiz kalmadı.
Aşağıdaki resimde sitenin nasıl bölündüğünü görebilirsiniz. Çerçeveye alınmış her alan bir
dosya olacak şekilde bölünecek önce resmi inceleyin.
Yukarıda gördüğünüz gibi dosyamızı html ye geçirmek için slice tool ile 42 parçaya böldüm.
Yani bu site yüklenirken 42 küçük png dosyasının yükleneceği anlamına geliyor.
Burada projemizi nasıl bölüyor isek dreamweaverda da aynı şekilde geri birleştirip sitemizi
tamamlayacağız.
Şimdi bölme işini bitirmek için slice ayarlandıktan sonra photoshopta Save For Web menüsünden
tüm slicelar seçili halde iken PNG 24'ü seçip sonra herhangi bir klasöre kaydedeceksinz.
Ancak bunu yapmadan önce photoshop'ta sitenizin arka planını gizli konuma getirip projenin
transparan arka plana sahip olmasını sağlayın daha sonrada Save for Web işlemini yapın.
Save For Web işlemini yaptığınız klasörün içinde images adında bir klasör oluşacak. Bu
klasörün içindeki tüm dosyaları kesip www klasörünüzün içindeki images klasörüne taşıyın ve
ardından dreamweaver a geçip index dosyanızı yeniden açın.
Şimdi ilk olarak Insert menüsünden Table'a tıklayıp alttaki ayarları yazıp ok tuşuna basın.
Şimdi tablomuzu oluşturduk. Farketti iseniz eğer en üstte ne sol kenara yapışmış şekilde
geldi. Bunun nedeni arka plan ayarlarken yazdığımız kodlar. Bunu daha o zamanda ayarlamıştık.
Şimdi üstteki slice ların nasıl bölündüğüne bakın tablomuzu aynen bu şekile getirmemiz
gerekiyor. Alttaki resimleri incelerseniz nasıl bu hale geldiğini göreceksinz.
Bu işlem sonunda tablomuz ikiye bölünmüş olacak farklı şekillerde bu işlemi daha çok
yapacağız
Şimdi devam edelim.
Bu şekilde en üsteki menümüzün alanını oluşturmuş olduk. Şimdi kalanını halledelim.
Resimlerden takip edin.
Bunun ardından en son yaptığımız satırın içine geliyoruz ve 3 kez TAB tuşuna basarak altta
doğru 3 satır daha açıyoruz. Tablo aşağıdaki duruma geliyor.
Normalde şuan bulunduğumuz satırı da ikiye bölmemiz lazım fakat şuan bunu yapmayacağız
nedenini ileride anlatacağım.
Şimdi son olarak 3 kez daha TAB tuşuna basıyoruz ve son 3 satırımızı oluşturuyoruz.
Bu işlemin ardından tablomuz şöyle görünecek.
Şimdi tablomuzu oluşturduğumuza göre slice ile tablomuzu bir karşılaştırıp hani image
dosyasının nereye gireceğini bir görelim.
Sitedeki sliceların numaralarına göre tablonun içini dolduracağız aşağıdaki resimdeki
karşılaştırmayı inceleyin
Gördüğünüz gibi her image dosyasının yeri belli
Yanyana birden çok image olan yerlerde yani 3,4,5,6,7,8,9,10,11,12,13,14,15 numaralı image
dosyalarının olduğu gibi tüm resimleri yan yana yan yana eklemeniz yeterli olacaktır bunların
aralarını tablo ile ayırmanız gerekli değil.
Şimdi geçelim image ları yerlerine yerleştirmeye üstten sıra ile doğru image dosyasını doğru
yere yerleştirirseniz siteniz sorunsuz tamamlanacaktır.
Alttaki resimleri takip ediniz.
Resmi seçtikten sonra karşınıza küçük bir pencere çıkacak buraya hiçbirşey yapmadan OK'leyip
geçin.
Bundan sonra diğer image dosyalarınıda tablodaki yerlerine sırası ile yerleştiriyoruz. Ve
Sonunda...
Şimdi yapılması gereken 2 şey var tabloları arasını ayarlamak ve orta alanı ayarlamak
Öncelikle tablo boşluğu ile başlayalım.
Tablonuzun sağ taraftaki yukarıdan aşağı inen son çizgisinin üstüne farenizi getirdiğiniz
zaman fare her iki tarafada bakan bir ok haline gelecektir. Bu halde iken bir kez tıklayıp
tablonun tamamını seçili hale getireceksiniz. Resme Bakın.
Bundan sonra yapmamız gereken şey tablomuzun içindeki boşlukları gidermek bunun için
öncelikle hemen logomuz ile butonlar arasındaki üstten alta doğru olan çizgiyi tutup sola
doğru çekebildiğimiz kadar çekiyoruz. Ardından sitenin sağdaki tıkladığımız yerinden tutup
onuda sola doğru çekiyor ve olan boşlukların gitmesini sağlıyoruz.
Artık son CRTL + S işlemimizi yapıp sitemizi kontrol ediyoruz.
Tarayıcımızı açıp oraya 127.0.0.1 yazıp enter'a basıyoruz. Sonuç...
Ta Ta Ta Tammm
Böylelikle web sitemiz bitmiş oluyor.
Ortadaki boş kısımı dilediğiniz gibi doldurmakta özgürsünüz. Diğer sayfalarıda benzer şekilde yapıp link verip tamamen bitmiş bir siteniz olabilir.
Ben sadece temel kurulumu anlattım anlamadığınız biryer olursa yada takıldığınız yardımcı olmaya çalışırım.
Kolay gelsin.
Kullanmak yada incelemek isteyen olursa alttaki linkten PSD ve site dosyalarını çekebilirler.
Hotfile.com: One click file hosting: site.rar
