Html - Css - Eglence - Ve Fazlası




 
AnasayfaKayıt OlGiriş yap

Paylaş | 
 

 Css Tasarım Yapma ResimLi anlatım

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 11:25

Merhaba Arkadaşlar Bu Dersimizde Css Tasarımlar Profesyonel Bir şekilde Nasıl yapılır Onu Öğrenecez Bundan Önce Videolu Anlatımım vardı ama ne yazıki 2-3 defa upload Ettim linkler hep kırılıyordu bunu için Resimli Anlatım Yaptım Ama İsteyenlere Yinede Videolu Anlatımı Suna Bilirim Resimli Anlatımda Belki Ufak Tefek Hatalarım Olmuştur .... ( okları fazla güzel çizemedim idare edin :-) )



Bu dersimizde iki tane program kullanacaz
1. Photoshop
2.Dreamweaver (bu programları indirebilmek için forumumuzun grafik tasarım programları kısmına bakabilirisniz vardır!!)


ANLATIMDA YAPTIĞIMIZ TASARIMIN ÖNİZLEMESİ İÇİN [Linkleri görebilmek için üye olun veya giriş yapın.]



Hemen Anlatıma Geçelim....
Öncelikle Photoshopumuz Açıp başlayalım
1.Resim

[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]

Evet Arkadaşlar Ben burdan sizlere Resimlerdeki yazıları tekraradan yazacamki Anlamadıklarınızı burdan okuyunuz die

burda Genişlik 950*600 yapılmış ve pixel cinsinden yeni sayfa oluşturulmuştur ....

[Resimleri görebilmek için üye olun veya giriş yapın.]

burda herşey açık oratda zaten

[Resimleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]




[Resimleri görebilmek için üye olun veya giriş yapın.]

[Resimleri görebilmek için üye olun veya giriş yapın.]
kaydettiğimiz yerde images diye 1 klasör oluşur klasörün içinde eyer tasarımımızı kaç parçaya böldüysek o kadar parça olur bunda 3 tane olması lazım çünkü biz 3 kısma ayırmıştık Üst Orta Ve alt Diye Adını denem koyduğumuz için Denem_1 Denem_2 ve Deneme_3 olması lazım


[Resimleri görebilmek için üye olun veya giriş yapın.]

evet aynen dediğim gibi 3 ksım


Evet Arkaşlar buraya kadar photoshopla işimiz bitmiş bulunmakta artık photoshopumuzu kapatlım

şimdide Dreamweaver programını açalım bu program profesyonel web siteleri açmak için birebirdir zaten profesyoneller bu programı kullanıyor....

[Resimleri görebilmek için üye olun veya giriş yapın.]

html i seçip devam ediyoruz

[Resimleri görebilmek için üye olun veya giriş yapın.]

evet arkadaşlar burda tablomuzu açıyoruz ama dikkat tablomuzu açtığımızda genişliğini 950 yapıyoruz eyer hatırladıysanız photoshopta genişlik olarak 950 yapmıştık ....

[Resimleri görebilmek için üye olun veya giriş yapın.]

tablolar çook önemli ayarlarından birini bile yanlış yaparsak ilerde bize büyük sorunlar yaşayabiliriz...

satırlarımızı: 3 yaptık
genişlik: 950
kenarlıkların hepsi sıfır yapılmış:
cellpad:0
cellsapce:0 kısacası hepsi 0( sıfır )
bide tablomuzu ortalamayı unutmayalım yoksa site ortda olmaz sol tarafta olur şimdide center diyelim ok işaretiyle gösterilmiş zaten...

[Resimleri görebilmek için üye olun veya giriş yapın.]


arkadaşlar burda ise 3 satırlı tablomuzun her satırına arkaplan resimleri ekliyecez bu arka plan resimleri bizim photoshopta oluşturduğumuz fotoalrdır hani 3 parçaya kesmiştik yaa ( nasıl ekleyeceğimizi ok işaretleriyle göstermişim zaten )

[Resimleri görebilmek için üye olun veya giriş yapın.]

her üç satırada arka planları yerleştirdikteb sonra şimid sıra geldi satırlarımıızı genişletmeye satırlarımızı tasarımımızın dizaynını bozmayacak şekilde uzatıyoruz ....

[Resimleri görebilmek için üye olun veya giriş yapın.]

ve işte gördüğünüz gibi tasarımımız bu şekli aldı şimid hala 3 satırımız duruyo 2 satrımızı yani orta kısma içerik geleceği için orda bir tablo daha oluşturacaz

[Resimleri görebilmek için üye olun veya giriş yapın.]

şimdi orta kısımda oluşturmak için önce bi iki ayar vermemiz lazım imlecimizi orta kısıma getirip
okla gösterilmiş olan iki ayarı yapıyoruz eyer bu ayarları yapmasak tasarımımız olmaz

[Resimleri görebilmek için üye olun veya giriş yapın.]

evet arkadaşlar tablomuzu açtık ve
imleci içine alarak seçeneklerden stünları 5 yaptık böylece 5 stün oldu stünları neden yaptık diye sorarsanız ee çünkü menuler ve içerik kısmını ayırmak için bunu için stünları oklarla gösterdiğim şekilde sınır yapioruz yani mennuler içerik kısmına geçmiyecek yada içerik kısmı menuler kısmına geçmesin die ..

[Resimleri görebilmek için üye olun veya giriş yapın.]

yukardaki yazılar galiba anlaşılmıyor alın yazıları:



icerik kısmı buraya gördüğünüz gibi yazılar menu ksımına geçmior yada menuler içerik kısmına geçmior

evet arkadaşlar şimdi diyelimki içerik kısmı çok uzun e bu durumda tasarımımız çook kısa gözüküyor ama merak etmeyin içerik ne kadar uzasa uzasın tasarımımızda o kadar uzayacak nedenmi çünkü tablo yapısında tablonun arkaplan resimi içeriğin boyutunu aştığı zaman arka plan resmi iki tane oluyor birazdaha uzasa 3 tane olcak yani ne kadar uzasa arkaplan resmi o akdar çoğalıyor tabi orta kısımımızı keserken çook önem verdiğimizi hatırlayalım orta kısmını öyle bir şekilde kesmiştikki her nekadar arkaplan resmi çoğalsada sanki 1 taneymiş gibi gözükecekti ... şimdi anladınızmı neden öyle kestiğimizi.. :-) şimdi gelelim tasarımımızı Tr.Gg ye uygulamaya...


[Resimleri görebilmek için üye olun veya giriş yapın.]

içerik kısmı orataya geleceği için en ortaya içerik yazdım ve kod kısmına geçtim okla göstermişim zaten

[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]

Ynlız Arkadaşlar ben burda ufak bi yanlışlık yapmışım title taglarınıda silecez ama birazdaha aşağıda olan <body> tagından yukarıya kadar olan kısmı silecez....

[Resimleri görebilmek için üye olun veya giriş yapın.]

html ve body taglarını aşğıdanda siliyoruz....

[Resimleri görebilmek için üye olun veya giriş yapın.]



[imghttp://img15.imageshack.us/img15/5531/24784342.gif][Linkleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]

yukarda yaptığım yanlışı düzeltiyorum eyer hatırladıysanız... body taglarınıda silioduk

[Resimleri görebilmek için üye olun veya giriş yapın.]

yeni bir sayfa açıp bu sefer o sayfada css ayarlaını yapacaz yani css kodlarını yapacaz...


[Resimleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]

bu sefer html ve body taglarını hemen silelimmki ilerde kodlara karışmasın


[Resimleri görebilmek için üye olun veya giriş yapın.]


[Resimleri görebilmek için üye olun veya giriş yapın.]



[Resimleri görebilmek için üye olun veya giriş yapın.]

[Resimleri görebilmek için üye olun veya giriş yapın.]

[Resimleri görebilmek için üye olun veya giriş yapın.]


OHBE Bi An Bitmeyecek Sandım Ama Bitti [Resimleri görebilmek için üye olun veya giriş yapın.]

Neyse


+Rep pLs Smile

[Linkleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
MaD OrciS
Üye
Üye
avatar

Mesaj Sayısı Mesaj Sayısı : 15
Rep Gücü Rep Gücü : 4
Kayıt tarihi Kayıt tarihi : 11/09/09
Nerden Nerden : iSTaNßuLL

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 12:14

eMeĞiNe SaĞLıK GüZeL PaYLaŞıM [Resimleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
http://WwW.MeßDeSTeK.ZFoRuM.ßiZ
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 12:15

Saol Beni Baya Bi Oyaladı Smile
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
MaD OrciS
Üye
Üye
avatar

Mesaj Sayısı Mesaj Sayısı : 15
Rep Gücü Rep Gücü : 4
Kayıt tarihi Kayıt tarihi : 11/09/09
Nerden Nerden : iSTaNßuLL

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 12:16

[Resimleri görebilmek için üye olun veya giriş yapın.] aMa SüPeR ßi PaYLaŞıM oLMuŞ HeRKeZiN iŞiNe YaRaR Smile
Sayfa başına dön Aşağa gitmek
http://WwW.MeßDeSTeK.ZFoRuM.ßiZ
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 12:17

İnşallah Smile
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
98zafer98
Emekli Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 730
Rep Gücü Rep Gücü : 13
Doğum tarihi Doğum tarihi : 26/05/98
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : Antalya
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 14:24

evet hiç bilmeyenin bile kolaylıkla anlayabileceği duzeyde bi çalısma olmus ellerine sağlık emeğe saygı Wink


selametle...
Sayfa başına dön Aşağa gitmek
http://www.metin2-sunucum.tr.gg
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Cuma 11 Eyl. 2009 - 14:25

Saol
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
FearFuLL
Moderatör
Moderatör
avatar

Mesaj Sayısı Mesaj Sayısı : 226
Rep Gücü Rep Gücü : 10
Doğum tarihi Doğum tarihi : 17/07/93
Kayıt tarihi Kayıt tarihi : 13/09/09
Nerden Nerden : İSTANBUL

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Paz 13 Eyl. 2009 - 14:44

+rep cok saol ama cok uzun ... Emegine saglik Smile Smile Smile
Sayfa başına dön Aşağa gitmek
http://www.webmastersitesi..zforum.com
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Paz 13 Eyl. 2009 - 14:48

Çok uzun olması benide yordu Smile
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
FearFuLL
Moderatör
Moderatör
avatar

Mesaj Sayısı Mesaj Sayısı : 226
Rep Gücü Rep Gücü : 10
Doğum tarihi Doğum tarihi : 17/07/93
Kayıt tarihi Kayıt tarihi : 13/09/09
Nerden Nerden : İSTANBUL

MesajKonu: Css Tasarım Yapma ResimLi anlatım   Ptsi 14 Eyl. 2009 - 3:14

ama cok urasmıssın bunun hakkını verelim sana teşekkür edelim Smile
Sayfa başına dön Aşağa gitmek
http://www.webmastersitesi..zforum.com
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Ptsi 14 Eyl. 2009 - 10:38

Saol Smile
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
Pashaa
General
General
avatar

Mesaj Sayısı Mesaj Sayısı : 603
Rep Gücü Rep Gücü : 22
Doğum tarihi Doğum tarihi : 24/02/96
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : BuRSa
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   C.tesi 19 Eyl. 2009 - 13:04

PAYLASIM ICIN SAOLLL EMEGE SAYGII
Sayfa başına dön Aşağa gitmek
http://www.ayarsizpaylasim.tr.gg
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   C.tesi 19 Eyl. 2009 - 13:49

Yorumdan Dolayı Teşşekürler
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
SeNoZLee
Üye
Üye
avatar

Mesaj Sayısı Mesaj Sayısı : 5
Rep Gücü Rep Gücü : 0
Doğum tarihi Doğum tarihi : 14/09/93
Kayıt tarihi Kayıt tarihi : 10/04/10
Nerden Nerden : İstanbul
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   C.tesi 10 Nis. 2010 - 21:21

Eline sağlık..
Sayfa başına dön Aşağa gitmek
graffirap
Cavus
Cavus
avatar

Mesaj Sayısı Mesaj Sayısı : 83
Rep Gücü Rep Gücü : 3
Doğum tarihi Doğum tarihi : 23/09/95
Kayıt tarihi Kayıt tarihi : 30/06/10
Nerden Nerden : Ankara
Ruh Hali Ruh Hali :

MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   Çarş. 30 Haz. 2010 - 7:55

teşekkürler
Sayfa başına dön Aşağa gitmek
http://www.08oyun.tr.gg
Sponsored content




MesajKonu: Geri: Css Tasarım Yapma ResimLi anlatım   

Sayfa başına dön Aşağa gitmek
 
Css Tasarım Yapma ResimLi anlatım
Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Psd Nasıl Yapılır?[Resimli]

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
Html - Css - Eglence - Ve Fazlası :: Tr.Gg Dünyası :: Css Hakkında Herşey-
Buraya geçin: