(3)
Merhaba arkadaslar;
suan web tasarıma yeni baslayan kişileri görüyorum. Cok hatalar yapıyolar ama hata derken ögrenmelerini geciktirecek hatalar. mesela ilk olarak yanlıs programlar kullanıyolar. veya direk işe ortasından dalıyolar temelini bilmeden. benim bu yazıyı acmamdaki amac bir cok yeni tasarımcının bu işi cabuk ögrenmesini sağlamaktır.Bu yazdıgım yazı ilk asamadır. Yavas yavas 1,2,3 gibi bilgileri sıralıyacagım. Hepsini belli bir düzenle ve belli bir sisteme göre veriyorum.İlk olarak benim kullandıgım programlar photoshop we macromedia programlarıdır. Yani diğerleriylede yapılır ama bana göre ve bir cok tasarımcıya göre ögrenmesi diger programlara göre daha kolaydır. ama ögrenmeniz gereken ilk program her zaman photoshoptur. Cünkü bu programla bütün işi bitirebilirsiniz. Detaya girmeden biraz deyineyim. Mesela bir site yapıcaksınız ve sayfanızın üst kısmına bir resim koyacaksınız. ilk olarak bu resmin üstüne güzel bir fontta photoshopta yazı yazabilirsiniz. daha sonra bunların altında butonlar olsun istersejniz. bunları dreamweaverda tablolar acıp onların içine buton adları yazıp sonrada yazdıgınız buton adlarına link wererek yapabilirsiniz. Fakat butonlarımız güzel olsun istiyorsanız genede basta dedigim gibi tasarım asıl anahtarı photoshoptur. İlk olarak o butonların altına bir zemin hazırlayınız. Bu zemin bir pattern olabilir. Bir pattern nsl hazırlanır? Kısaca anlatayım. Yeni bir sayfa açın sayfa küçük we kare olmak zorundadır. mesela sayfamız 25 x 25 olsun sonra sayfada bir caprazlama ufak eşit kareler yapabilrisiniz weya yan yana size kalmıs ondan sonrada layer tablosundan backroundu silin sayfanız beyazlı grili ve sizin yaptıgınız karelerle olucak. daha sonra edit kısmından define patten diosunuz yaptıgınız patterni kaydediyor. Siz butonların altına desen yapcaktınızya direk yeni bir layer acıp o yapcagınız alani secin sonra blending optionsdan pattern olevaydan yaptıgınız pattenti ekleyin. daha sonra onun üstüne yazılar yazın ana sayfa dosyalar forumlar ws. fakat bunlara tabi renk eklemek isterseniz gene yeni layer acıp eklceginiz alanı secip yapabilirsiniz. Daha sonra bu butonların üstüne gelince renk değişsin istiyorsanız 2ayrı imaje hayırlayın. 2side farklı renk olsunki biri diyerinin üstüne gelince değişsin. Bunu yapmanın 2 yolu wardır. İlk olarak dreamweaverda yapabilirsiniz. Fakat burda yapılanlar imaja değil tablo içine işler ve üstüne gelir gelmez değişir.Bir Diger yol ise javascripttir. Bu yol ile 2ayrı renkte hazırladıgınız imajı kdolarla üstüne gelince değişecek sekilde ayarlıyabilirsiniz. Yeni baslayan arkadaslarımız suan için bunları yapmasalarda olur. Daha sonra butonların altında güzel bi imaje olsun altınada yazılar yazılım. Dedigim gibi photoshop ögrenirseniz hayal gücünüzü zorlarsınız. Bütün anahtar orda. Photoshop ögrenmek için kaynaklarım cok az diyorsanız http://ravenloftuo.com/PhotoShopBook.rar bu linkten her sorunuzu cewaplayacak bir photoshop pdfi indirebilirseniz. Dreamweaver hakkında nsl bilgi edinirim diyorsanız http://ravenloftuo.com/dwuygulama.rar linkide bütün sorularınızın cewabını bulabilceginiz bir pdf indirebilirsiniz. photoshopta tasarımı yaptık geriye ne yapıcagımıza sıra geldi diyorsanız yaptıgınız tasarımı düzgün bir sekilde kesiniz. sonra kesme işlemi bittikten sonra file kısmendan save for web yapıp bir klasöre html ve imaje olarak kaydediniz. Tabi bunları yapması dedigim gibi cok pratik ve bilgi ister pdfleri cok iyi okursanız ve ögrendiklerinizi uygularsanız herseyin üstesinden gelirsiniz. Eğer pdflerde bulamadıgınız veya aklınıza takılan bişey olursa msn adresim efe@ravenloftuo.com dur. Hertürlü soruya acıgım. Unutmayınki bilgi paylasıldıkca cogalır. Simdi dewam edelim html formatında kaydettiginiz photoshop dosyasına yapıcagımız sey sag tusla tıklayıp edit with dreamweaver demektir. bu sayfa üzerinde oynayamassınız. Ne bir harf yazarsınız nede bir baska bişey eklersiniz. Bütün imajelarınız kayar bunların olmamaması için kestiğimiz imajları tablolara kopyalıcagız. İlk önce yeni bir dw sayfası acınız (ilk olarak ögrenmek için html sayfa acmanızı tawsiye ederim) daha sonra sayfa acılır acılmaz sayfayı imaj klasörünün bulundugu yere save as yapınız. Çünkü o sayfaya tablolar acıp imajeları kopyalıyınca o imajeları görmeyebilir. Bu yüzden yeni sayfayı oraya kayıt ediyoruzki imajlar kopyalnadıgında kaynak bulunsun. Evet daha sonra dreamweaverda sayfa düzeni için ctrl+j komutunu kullanabilirsiniz. tabloları acmadan önce ctrl+j ye basıp backround text color u belirleyiniz. sonra asagıda margin butonları war onların 4ünede 0 derseniz tablo acımı için kolaylık olur.Şimdi diyeceksiniz sayfamız kaydı. Olsun sayfa sol üste dogru kaymıs ortalanmamıs olsa bile siz yapmaya dewam edin işimizi bitirince onu ortalayacagız. Geldik tablolara, diyelim üst kısımda photoshopta editledigimiz bir resim war Tablo acaker yükseklik önemli değildir. Açtığnız tabloların pixel olmasına dikkat edin mesela atıyoyorum eni 32 boyu 228 olan bir imajımız war. tabloyu acarken sunlara dikkat edicez.
ilk önce tablodaki butonların ne işe yaradıgını ögrenelim
rows: yukardan asagı tablo sayısı
columns: soldan saga acılacak tablo sayısı
table width: tablonun eni(en önemlisi)
border thickness: tablonun çerçevesi (herzaman 0 tutunuz)
cell padding ve cell spacing : acilacak tablolar arasında bosluk bırakır(bunuda her yerde kullanmadıgımızdan 0 tutunuz)
evet simdi sizin imajınıza göre tablo acalım
rows:1 columns:1
table width: 32
border thickness:0
cell padding :0
cell spacing :0
Evet burdada gördügünüz gibi boyun hiç bir önemi yok. İlk actığınızda küçük gözüken tablounun içine photoshopta yaptıgınız imajın html formatta kaydettiginiz we 32 enli resimi kopyalayıp tablonun içine yapıstırdıgımızda boy direk oturur. Geriye kalan parcalarıda aynı mantıkta yapıcaksınız. yaptıkçada kaydedip html dosyasını açıp bakabiliriz. Dreamweaver kullanmayı ögrenince dwdeki özel bölümlerede deyinecegiz. (cssler gibi)
Resmimizin bir tablo actık ve içine kopyaladık. Onun ardından resmin altında olan butonları koyucagız. Diyelimki 5tane buton hazırladınız. Ve 5ayrı parçaya böldünüz. (eşit olmasına dikkat ediniz. görüntü acısından uyumu saglar)Ve bu 5 parcanın en sayılarını topladınız. Diyelim ki 955 cıktı. Bu kez tabloyu su sekilde acıcagız.
rows:1 columns:5
table width: 955
border thickness:0
cell padding :0
cell spacing :0
Simdi 955 pixel eninde 5ayrı tablomuz oldu. İlk hazırladığınız butonu kopyalayıp ilk tabloya yapıstırın. Burada dikkat etmeniz gereken en büyük özellik imajı kopyaladıktan sonra aradaki 4 tane boslugun boyutları değişiyor. Zaten kopyaladıgınızda fark edeceksiniz. Yana kayan tablonunu kenarını tutup imajınızın tam yanına tasıyınız. O zaman tablonuz tam oturacaktır.Yanındaki imajlarada aynı sekilde yapıstırıp kenara kayan tablo parçalarını yapıstırdıgınız imaja dogru cekiniz. Peki bunlara tıklayınca nasıl baska sayfalara gidicegiz gibi sorular aklınıza sık sık geliyor olabilir. Yapıstırdıgınız imajlardan birinin üstüne bir kere tıklayınız ve asagıda Link: diye bir sekil cıkcak. Hazırladıgınız diger sayfaları o link bölümüne yazıbilirsiniz. Örn:http://ravenloftuo.com/dosyalar.html dosyalar adlı butona tıklayınca direk o sayfaya gidicektir. Diger sayflarıda hazırlayıp bosta kalan butonlarada vereceginiz linkleri siz doldurun. Eger siz ben butonlarımı yukardan asagı dogru sıralıcam diyorsanız tabloyu su sekilde acıcaksınız.
rows:5 columns:1
table width: 191
border thickness:0
cell padding :0
cell spacing :0
Burada dikkat etmeniz gereken en büyük özellik photoshopta eşitkesmektir. Bakın hepsini eşit warsaydık biri 191 asagıya dogru 5tane 191lik tablo cıktı.Tekrar teker teker kopyalayıp tabloların içine yapıstırınız. Burda tablolar imajlarla eşit oldugu için direk girince içine oturacaktır. Linkleri gene aynı sekilde verip butonların yanına acıklamalar yapabilirsiniz. Güncel acıklamalar, haberler gibi.
Bir sornaki yazımda olucaklar:
dreamweaverda püf noktalar
photoshoptaki püf noktalar
basit html kodlarının tanımı
javascriptin tanıtımı
php nedir?
bir sitede olması gerekenler
suan web tasarıma yeni baslayan kişileri görüyorum. Cok hatalar yapıyolar ama hata derken ögrenmelerini geciktirecek hatalar. mesela ilk olarak yanlıs programlar kullanıyolar. veya direk işe ortasından dalıyolar temelini bilmeden. benim bu yazıyı acmamdaki amac bir cok yeni tasarımcının bu işi cabuk ögrenmesini sağlamaktır.Bu yazdıgım yazı ilk asamadır. Yavas yavas 1,2,3 gibi bilgileri sıralıyacagım. Hepsini belli bir düzenle ve belli bir sisteme göre veriyorum.İlk olarak benim kullandıgım programlar photoshop we macromedia programlarıdır. Yani diğerleriylede yapılır ama bana göre ve bir cok tasarımcıya göre ögrenmesi diger programlara göre daha kolaydır. ama ögrenmeniz gereken ilk program her zaman photoshoptur. Cünkü bu programla bütün işi bitirebilirsiniz. Detaya girmeden biraz deyineyim. Mesela bir site yapıcaksınız ve sayfanızın üst kısmına bir resim koyacaksınız. ilk olarak bu resmin üstüne güzel bir fontta photoshopta yazı yazabilirsiniz. daha sonra bunların altında butonlar olsun istersejniz. bunları dreamweaverda tablolar acıp onların içine buton adları yazıp sonrada yazdıgınız buton adlarına link wererek yapabilirsiniz. Fakat butonlarımız güzel olsun istiyorsanız genede basta dedigim gibi tasarım asıl anahtarı photoshoptur. İlk olarak o butonların altına bir zemin hazırlayınız. Bu zemin bir pattern olabilir. Bir pattern nsl hazırlanır? Kısaca anlatayım. Yeni bir sayfa açın sayfa küçük we kare olmak zorundadır. mesela sayfamız 25 x 25 olsun sonra sayfada bir caprazlama ufak eşit kareler yapabilrisiniz weya yan yana size kalmıs ondan sonrada layer tablosundan backroundu silin sayfanız beyazlı grili ve sizin yaptıgınız karelerle olucak. daha sonra edit kısmından define patten diosunuz yaptıgınız patterni kaydediyor. Siz butonların altına desen yapcaktınızya direk yeni bir layer acıp o yapcagınız alani secin sonra blending optionsdan pattern olevaydan yaptıgınız pattenti ekleyin. daha sonra onun üstüne yazılar yazın ana sayfa dosyalar forumlar ws. fakat bunlara tabi renk eklemek isterseniz gene yeni layer acıp eklceginiz alanı secip yapabilirsiniz. Daha sonra bu butonların üstüne gelince renk değişsin istiyorsanız 2ayrı imaje hayırlayın. 2side farklı renk olsunki biri diyerinin üstüne gelince değişsin. Bunu yapmanın 2 yolu wardır. İlk olarak dreamweaverda yapabilirsiniz. Fakat burda yapılanlar imaja değil tablo içine işler ve üstüne gelir gelmez değişir.Bir Diger yol ise javascripttir. Bu yol ile 2ayrı renkte hazırladıgınız imajı kdolarla üstüne gelince değişecek sekilde ayarlıyabilirsiniz. Yeni baslayan arkadaslarımız suan için bunları yapmasalarda olur. Daha sonra butonların altında güzel bi imaje olsun altınada yazılar yazılım. Dedigim gibi photoshop ögrenirseniz hayal gücünüzü zorlarsınız. Bütün anahtar orda. Photoshop ögrenmek için kaynaklarım cok az diyorsanız http://ravenloftuo.com/PhotoShopBook.rar bu linkten her sorunuzu cewaplayacak bir photoshop pdfi indirebilirseniz. Dreamweaver hakkında nsl bilgi edinirim diyorsanız http://ravenloftuo.com/dwuygulama.rar linkide bütün sorularınızın cewabını bulabilceginiz bir pdf indirebilirsiniz. photoshopta tasarımı yaptık geriye ne yapıcagımıza sıra geldi diyorsanız yaptıgınız tasarımı düzgün bir sekilde kesiniz. sonra kesme işlemi bittikten sonra file kısmendan save for web yapıp bir klasöre html ve imaje olarak kaydediniz. Tabi bunları yapması dedigim gibi cok pratik ve bilgi ister pdfleri cok iyi okursanız ve ögrendiklerinizi uygularsanız herseyin üstesinden gelirsiniz. Eğer pdflerde bulamadıgınız veya aklınıza takılan bişey olursa msn adresim efe@ravenloftuo.com dur. Hertürlü soruya acıgım. Unutmayınki bilgi paylasıldıkca cogalır. Simdi dewam edelim html formatında kaydettiginiz photoshop dosyasına yapıcagımız sey sag tusla tıklayıp edit with dreamweaver demektir. bu sayfa üzerinde oynayamassınız. Ne bir harf yazarsınız nede bir baska bişey eklersiniz. Bütün imajelarınız kayar bunların olmamaması için kestiğimiz imajları tablolara kopyalıcagız. İlk önce yeni bir dw sayfası acınız (ilk olarak ögrenmek için html sayfa acmanızı tawsiye ederim) daha sonra sayfa acılır acılmaz sayfayı imaj klasörünün bulundugu yere save as yapınız. Çünkü o sayfaya tablolar acıp imajeları kopyalıyınca o imajeları görmeyebilir. Bu yüzden yeni sayfayı oraya kayıt ediyoruzki imajlar kopyalnadıgında kaynak bulunsun. Evet daha sonra dreamweaverda sayfa düzeni için ctrl+j komutunu kullanabilirsiniz. tabloları acmadan önce ctrl+j ye basıp backround text color u belirleyiniz. sonra asagıda margin butonları war onların 4ünede 0 derseniz tablo acımı için kolaylık olur.Şimdi diyeceksiniz sayfamız kaydı. Olsun sayfa sol üste dogru kaymıs ortalanmamıs olsa bile siz yapmaya dewam edin işimizi bitirince onu ortalayacagız. Geldik tablolara, diyelim üst kısımda photoshopta editledigimiz bir resim war Tablo acaker yükseklik önemli değildir. Açtığnız tabloların pixel olmasına dikkat edin mesela atıyoyorum eni 32 boyu 228 olan bir imajımız war. tabloyu acarken sunlara dikkat edicez.
ilk önce tablodaki butonların ne işe yaradıgını ögrenelim
rows: yukardan asagı tablo sayısı
columns: soldan saga acılacak tablo sayısı
table width: tablonun eni(en önemlisi)
border thickness: tablonun çerçevesi (herzaman 0 tutunuz)
cell padding ve cell spacing : acilacak tablolar arasında bosluk bırakır(bunuda her yerde kullanmadıgımızdan 0 tutunuz)
evet simdi sizin imajınıza göre tablo acalım
rows:1 columns:1
table width: 32
border thickness:0
cell padding :0
cell spacing :0
Evet burdada gördügünüz gibi boyun hiç bir önemi yok. İlk actığınızda küçük gözüken tablounun içine photoshopta yaptıgınız imajın html formatta kaydettiginiz we 32 enli resimi kopyalayıp tablonun içine yapıstırdıgımızda boy direk oturur. Geriye kalan parcalarıda aynı mantıkta yapıcaksınız. yaptıkçada kaydedip html dosyasını açıp bakabiliriz. Dreamweaver kullanmayı ögrenince dwdeki özel bölümlerede deyinecegiz. (cssler gibi)
Resmimizin bir tablo actık ve içine kopyaladık. Onun ardından resmin altında olan butonları koyucagız. Diyelimki 5tane buton hazırladınız. Ve 5ayrı parçaya böldünüz. (eşit olmasına dikkat ediniz. görüntü acısından uyumu saglar)Ve bu 5 parcanın en sayılarını topladınız. Diyelim ki 955 cıktı. Bu kez tabloyu su sekilde acıcagız.
rows:1 columns:5
table width: 955
border thickness:0
cell padding :0
cell spacing :0
Simdi 955 pixel eninde 5ayrı tablomuz oldu. İlk hazırladığınız butonu kopyalayıp ilk tabloya yapıstırın. Burada dikkat etmeniz gereken en büyük özellik imajı kopyaladıktan sonra aradaki 4 tane boslugun boyutları değişiyor. Zaten kopyaladıgınızda fark edeceksiniz. Yana kayan tablonunu kenarını tutup imajınızın tam yanına tasıyınız. O zaman tablonuz tam oturacaktır.Yanındaki imajlarada aynı sekilde yapıstırıp kenara kayan tablo parçalarını yapıstırdıgınız imaja dogru cekiniz. Peki bunlara tıklayınca nasıl baska sayfalara gidicegiz gibi sorular aklınıza sık sık geliyor olabilir. Yapıstırdıgınız imajlardan birinin üstüne bir kere tıklayınız ve asagıda Link: diye bir sekil cıkcak. Hazırladıgınız diger sayfaları o link bölümüne yazıbilirsiniz. Örn:http://ravenloftuo.com/dosyalar.html dosyalar adlı butona tıklayınca direk o sayfaya gidicektir. Diger sayflarıda hazırlayıp bosta kalan butonlarada vereceginiz linkleri siz doldurun. Eger siz ben butonlarımı yukardan asagı dogru sıralıcam diyorsanız tabloyu su sekilde acıcaksınız.
rows:5 columns:1
table width: 191
border thickness:0
cell padding :0
cell spacing :0
Burada dikkat etmeniz gereken en büyük özellik photoshopta eşitkesmektir. Bakın hepsini eşit warsaydık biri 191 asagıya dogru 5tane 191lik tablo cıktı.Tekrar teker teker kopyalayıp tabloların içine yapıstırınız. Burda tablolar imajlarla eşit oldugu için direk girince içine oturacaktır. Linkleri gene aynı sekilde verip butonların yanına acıklamalar yapabilirsiniz. Güncel acıklamalar, haberler gibi.
Bir sornaki yazımda olucaklar:
dreamweaverda püf noktalar
photoshoptaki püf noktalar
basit html kodlarının tanımı
javascriptin tanıtımı
php nedir?
bir sitede olması gerekenler
