forum6167
  Css Tasarım Yapmak
 

Arkadaşlar size css tasarımın nasıl yapıldığını gösterdim ve videolu anlatım paylaştım umarım işinize yarar...








amatör - css tasarım yapımı | izlesene.com

Bu video www.yasaksavar.tr.gg sitesinden alınmıştır.

Öncelikle Css'nin ne olduğunu açıkladım...

CSS (Cascading Style Sheets)

Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar

Css Özellikleri:

  • Html sayfasındaki nesnelerin görüntüsünü belirler
  • Html 4.0 sürümü ile stil dosyaları geliştirilmiştir
  • CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar
  • Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir

 

HTML ilk üretildiğinde yazı rengi ve boyu gibi özellikleri tag´lar ile tanımlayacağı düşünülmedi. ilk Html sürümünde aşağıdaki gibi temel taglar kullanıldı.



<h1>Başlık yazısı</h1>

<p>Paragraf yazısı</p>



Daha sonra html 3.2 sürümüyle <font> gibi taglar sunulduğundarenk ve yazı boyu gibi alt özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı için sıkıntılı olmaya başladı. çünkü sonradan doğru tagı bulmak ve değiştirmek zorlaşıyordu.

Bu sorunu çözmek için Dünya internet topluluğu (W3C) html 4.0 sürümü ile CSS yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek istediğinde tek yapması gereken CSS dosyasını açmaktı. böylece web sayfasında bir anda birçok sayfa değişmiş oluyordu.
 

Css Tasarım Yapım Resimli Anlatım

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 :-) )

Probramları İndirmek İçin Tıklayınız...



Bu dersimizde iki tane program kullanacaz
1. Photoshop
2.Dreamweaver

Probramın Anlatımı İçinTıklayınız...



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

http://img269.imageshack.us/img269/1467/86541038.gif


http://img5.imageshack.us/img5/839/57546585.gif

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 ....

http://img11.imageshack.us/img11/125/22669029.gif

burda herşey açık oratda zaten

http://img30.imageshack.us/img30/416/60588485.gif



http://img11.imageshack.us/img11/5971/45579210.gif



http://img269.imageshack.us/img269/8223/35203009.gif


http://img262.imageshack.us/img262/5285/34498235.gif




http://img194.imageshack.us/img194/7079/36115729.gif



http://img249.imageshack.us/img249/4074/80681396.gif

http://img219.imageshack.us/img219/4642/83497619.gif


http://img269.imageshack.us/img269/1334/32386682.gif


EVET şimdi Tasarımımıza Bi bakalım nasıl oldu.... Önizlemesini Yapalım


http://img440.imageshack.us/img440/3939/68904034.gif



http://img7.imageshack.us/img7/1397/18842706.gif

evet arkadadaşlar bişiler unuttuk bu tasarımda görsel öğeler yok
örneğin hiö brush( fırça kullanmadık) şimdi biraz fırça kullanalım ve sonra keselim

fırçalar fırça işaretinin sol taarafta var oraya tıklayoruz
photoshopumuza kendimiz frçaları yükleyebiliriz internette hazır fırçalar var tabi orjinalleride var bende bir sürü fırça var sitede photoshop dersleri bölümünde bulunmakta ordan istedğiniz eklentiyi indirebilirsiniz

http://img32.imageshack.us/img32/266/34642960.gif

evet arkadşlar burdada fırçalarımızı seçioruz ama fırçaları kullanmdan önce yeni layer oluşturuyoruz ok ile gösterilmiş zaten
layer oluşturmak çook iidir nedenmi çünkü bir layeri şekilden şekile sokabiliyorsun ama bir layer üzerinde fazladan obje olduğu zaman
siz bir değişklik yaparsınız hepsi değişir onun için her fırça kullandığınız zaman yeni layerler oluşturalım ..


http://img7.imageshack.us/img7/3709/92446518.gif

evet arkadaşlar gördüğünüz gibi fırçaları basıp style mizi seçtikten osnra böyle bi hal oldu ....


neyse fazla güzel olmadı ama mantıken anlışılıo nasıl yapıldıkları....

önizlemesi şöyle....

http://img7.imageshack.us/img7/9086/11259881.gif


http://img440.imageshack.us/img440/4889/28922422.gif

evet arkadaşlar bursı çook önemli tasarımızı 3 kısma ayıracaz Üst Orta Ve Alt Kısma Gelecek Şekilde Ayarlayacaz

orta Kısmını Öyle Ayarlamalıyızki her nekadar genişlediğinde tek Parçaymış Gibi Gözüksün Yapacaz Ne Demek İstediğimi Dreamweaver Programında Anlıyacaksınız.....

http://img210.imageshack.us/img210/2410/79685992.gif

gördüğünüz gibi kesme işlemimizi yaptık şimdide tasarımımızı kaydedecez...

http://img32.imageshack.us/img32/1070/16153207.gif

gif i seçtikten sonra save diyoruz....

http://img219.imageshack.us/img219/4015/38877221.gif


ve şimdi masa üstüne kaydediyoruz ama siz isterseniz başka yerede kaydedebilirsiniz Arkadaşlar ....ama yinede masaütüne kaydedin daha iii



http://img31.imageshack.us/img31/4574/58085635.gif
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


http://img329.imageshack.us/img329/1243/79659659.gif

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....

http://img20.imageshack.us/img20/8692/19541482.gif

html i seçip devam ediyoruz

http://img33.imageshack.us/img33/2041/23652992.gif

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 ....

http://img36.imageshack.us/img36/7033/71070348.gif

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...

http://img301.imageshack.us/img301/1024/44707518.gif


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 )

http://img12.imageshack.us/img12/2500/18233293.gif

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 ....

http://img35.imageshack.us/img35/1045/93900881.gif

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

http://img35.imageshack.us/img35/8636/32612547.gif

ş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

http://img15.imageshack.us/img15/2393/55749515.gif

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 ..

http://img12.imageshack.us/img12/4695/23213326.gif

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...


http://img35.imageshack.us/img35/3746/61943183.gif

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

http://img198.imageshack.us/img198/6573/65086290.gif


http://img216.imageshack.us/img216/4597/66576180.gif


http://img15.imageshack.us/img15/1201/28454593.gif


http://img15.imageshack.us/img15/1201/28454593.gif



http://img15.imageshack.us/img15/3212/34949714.gif

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

http://img15.imageshack.us/img15/9319/73264323.gif

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

http://img216.imageshack.us/img216/289/65008007.gif



[imghttp://img15.imageshack.us/img15/5531/24784342.gif]http://[/img]



http://img18.imageshack.us/img18/8371/38139519.gif

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

http://img509.imageshack.us/img509/38/65733639.gif

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


http://img15.imageshack.us/img15/9748/39094578.gif



http://img509.imageshack.us/img509/723/84410974.gif

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


http://img30.imageshack.us/img30/2448/30805563.gif


http://img30.imageshack.us/img30/1636/57871905.gif



http://img15.imageshack.us/img15/6791/48075292.gif

http://img524.imageshack.us/img524/3371/50227447.gif

http://img509.imageshack.us/img509/2581/77917473.gif






Anlatım alıntıdır...

 








Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

 
  Bugün 1 ziyaretçi (5 klik) tıkladı.  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=