¤ۣۜ..¤ | ((Mekan Paket)) ¤ۣۜ..¤ |
Would you like to react to this message? Create an account in a few clicks or log in to continue.


ForuMumuza Üye OLup 100 Mesaj Atan HerKeze 1 Css Design Yapacağız bir de botun yaplış-çaktır.
 
AnasayfaKapıAramaKayıt OlGiriş yap

 

 CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım) (TR.GG)

Aşağa gitmek 
YazarMesaj
HaCo
Admin


Mesaj Sayısı : 66
Kayıt tarihi : 09/01/09

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Empty
MesajKonu: CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım) (TR.GG)   CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) EmptyÇarş. Ocak 14, 2009 9:02 pm

Öncelikle resimde görüldüğü gibi Css Design Tasarımını seçiyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 93951569dx8

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Css Design tasarımında menü gizleme kodunu eklememiz gereklidir.

Menü gizleme kodunu Navigasyonun baslığı: kutucuğuna yapıştırıyoruz.
Ardından Kaydet diyoruz

Css Design Menü Gizleme Kodu:

Kod:
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 59021361zz7

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

"Ayarlar" sayfasına gelerek site başlığını yok etmeliyiz.Bunu ise site başlığı: Yazının karşısındaki kutucuğa bir kez tıklayıp ardından space (boşluk) tuşuna basıyoruz ve Kaydet diyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 96424251te6

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Sayfalarımı değiştir / Yeni sayfa diyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 54755894ye7

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Aşağıda görüldüğü gibi araçlarımız gösteriliyor.
Tasarımımızın bir tablo içerisinde olması için aşağıdaki yolu izliyoruz.


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 47919933qb0

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Resimde görüldüğü dış tablomuzu yaptık.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 74831095dm8

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

En üste banner resmi koyacaz.Onun için yaptığımız tablonun en üstüne banner'lık bi tablo yapacağız.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 75227683uy3

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Resimde görüldüğü gibi banner resmi ekleme işlemi yapılmaktadır.Banner boyutları 800 x 100 boyutlarında.Ona göre banner yapabilirsiniz..


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 78814105re1

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Ve işte banner' ımız tablonun içine eklenmiş durumda CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Icon_wink

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 29971974ac6

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Şimdide dış tablomuzun içini renklendirelim.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 10ye4

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Resimde görüldüğü gibi renk seçiyoruz...

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 11ok0

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Icon_wink


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 12lr7

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Şimdide Tablomuzun sağ tarafına tablo yapalım.
Tablo yapmak için araçlarımızdan yine aynısına tıklıyoruz.
ve gelen pencereden;


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 13ov5

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Görüldüğü gibi saol tablomuzuda yerleştirmiş olduk.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 14co0

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Yapmış olduğumuz tablonun içine menü kutucukları koyalım.Menü kutucukları tablo ebatları;
satırlar:1
sütunlar:1
Kenar kalınlığı:1
Genişlik:210

Kaç tane sayfamız olacaksa o kadar menü tablosu ekliyoruz ve içlerine sayfa yazılarını ekliyoruz.


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 15cp5

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Sayfa Linki Yazdığım yeri seçiyorum ve Köprü ekle aracına tıklıyorum.Sonrası resimde görüldüğü gibi..


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 16sf2

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Tamam'a tıkladığımız anda köprü eklenmiş demektir.Ancak Yazının rengi gördüğünüz gibi koyu mavi oldu.Bunu tekrar eski haline yani siyah yapmak için;

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 17mx3

Hepsine bu şekilde sayfasına göre link (köprü ekleyin).

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Tasarım olarak biraz bilgi öğretmeye çalıştım.Genel olarak bu verdiğim bilgilere dayanarak kafanızda tasarladığınız tasarımlar yaratabilirsiniz.

Son bi kaç bilgi vereceğim..Daha önce menü gizleme kodu vermiştim.Onu bi yere daha yapıştıracağız.Bu kodu resimdeki yere yapıştırmazsak sitemiz görünmez haberiniz olsun...


Css Design Menü Gizleme Kodu:

Kod:
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 18db4

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Tekrar "Kaynak" aracına tıklayarak Ctrl + A yapıyoruz.Yani kodlarımızın hepsini seçiyoruz ve kopyalıyoruz..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 19qj0

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Bu kopyaladığımız kodu bütün sayfalara yapıştırıyoruz.Yapıştırıyoruz derken direk yapıştırmayın.Öncelikle "Kaynak" aracına tıklayıp sonra yapıştırıyoruz..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 19qj0

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Görüldüğü gibi bütün sayfalara yapıştırıyorum..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 20vv9

Tasarladığımız sitenin içeriklerini her sayfanın kendisine göre dolduruyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0



Kod Ekleme - Hazır Flash Menü Kodlarının vs. Eklenimi:

Css Design tasarımının neresine menü koymak istiyorsanız oraya bi tablo koyacağız.Öncelikle Kenar kalınlığı 0 olan 1 tablo oluşturuyoruz ve içine herhangi bişey yazıyoruz.Resimde gördüğünüz gibi ben "photoshopar" yazdım...

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 78416669th0

Sonra Kaynak yazan yere tıklıyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 75671012eo3

"Kaynak" yerine tıkladığımız zaman yapmış olduğumuz tasarımın html kodu çıkar.Burdan Photoshopar Yazısını buluyorum ve o yazıyı ordan siliyorum.Yani bizim amacımız photoshopar yazısını silip oraya flash menümüzün kodunu eklemek olacaktır...

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 38354803wm0

"Photoshopar" yazısını silip yerine hazır flash sitelerinden yaptığımız flash menü kodumuzu oraya yapıştırıyoruz.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 28987273au5

Görüldüğü gibi kodumuzu yapıştırdık oraya.Bu işlemden sonra "Kaynak" yazan yere tekrar tıklıyoruz ve tasarım sayfamızın görünüşü geliyor.Tablonun içinde menü felan görmüyeceksiniz.Sakın yapamadım diye paniklemeyin.Çünkü burda menü görünmez.Menünüz siteyi kaydettiğiniz zaman ardından sitenizi açarak görebilirsiniz..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 56937932xz2

Sitemizi açtığımızda gördüğünüz gibi tablomuz miiss gibi eklenmiş durumda CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Icon_mrgreen Bu işlemi uygulayarak istediğimiz hazır kodu ekleyerebiliriz.Sonradan o kodu silmek mi istiyorsunuz.Hiç sorun değil.Kodu eklediğiniz tabloyu silin.Kodu içirisine yapıştırdığımız için otomatikmen tablo ile birlikte kodta silinecektir..işlem bu kadar CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Icon_mrgreen
www.photoshopar.tr.gg


CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) 67007676qx3

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Ziyaretçi Defteri Oluşturma - Extralar Kısmı

Örnek Olarak benim ziyaretçi defterime bakabilirsiniz:
http://photoshopar.tr.gg/ziyaretcidefteri.htm

Css Design tasarımında ziyaretçi defteri gibi bazı extraları site içeresine koymamız zordur.Onun için ayrı bi sayfada tablo içerisine güzel ziyaretçi defteri oluşturmamız mümkündür.Bunun için aşağıda vermiş olduğum kodu Ekstraları Değiştir/Ziyaretçi defteri/Ziyaretçi defterinden önceki metin: kutucuğuna yapıştırmamız gerekiyor...

Ziyaretçi defterinden önceki metin kutusuna yapıştıracağımız kod:


Kod:
<style>
<td> </style>

<font><font>

<table>
<tbody>
<td></p>
BURAYA İSTEDİĞİNİZ BİR YAZI YAZABİLİRSİNİZ
<center><img src="https://2img.net/r/ihimizer/img296/1265/ziyaretcideftericopywa2.png"<center>

Kod üzerinde kendinize göre değişiklik yapabilirsiniz.Bu vermiş olduğum kodtaki bazı yerlerin ne işe yaradığını yazdım aşağıda:

<font> = Alandaki İsim,mail adresi,mesajınız vs gibi yazıların rengi.

<font> = Yazıların fontu - size:2 ise yazıların büyüklükleri.

bordercolor="#FFFFFF" = Tablo kenarlarının rengi

bgcolor="#797268" = Tablo içi rengi


Bundan Sonrasını Resim üzerinde anlattım.

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ziyaretcidefteriuo1

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Site arkaplan rengini değiştirmek için;

Aşağıdaki kod arkaplan "siyah" kodudur.Bu kodu "Tasarım üzerindeki yazı" yerine yapıştırırsanız sitenizin arkaplanı siyah olacaktır..


Kod:
<body bgcolor="#000000">

#000000 = bu kodlama siyah içindir.Diğer renkleri aşağıda verdim kendi zevkinize göre değiştirebilirsiniz

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Arkaplanrenkzl2

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Mail adresimizi word'te açtırma;

Öncelikle resim olarak yapacaksanız veya köprü olarak yapacaksanız ikiside aşağıdaki anlattığım gibi..Ben resimlisini anlattım.Ama aynı ikiside aynı..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Epostadc3

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Ayracdo0

Köprü Eklediğimiz Resmin Etrafındaki Maviliğ Yok Etme!!

Köprü eklediğimiz resimlerin etrafı mavi renk oluşur.Bu mavi rengi yok etmek için;

Köprü ekleyeceğimiz resmin üzerine sağ tıklayıp; "Resim Özellikleri" Diyoruz..

CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)  (TR.GG) Resimetrafiys0
Sayfa başına dön Aşağa gitmek
http://www.sencene.com
 
CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım) (TR.GG)
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Iatkos V7 (intel-amd) X86, Normal Bilgisayarlar Icin

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
¤ۣۜ..¤ | ((Mekan Paket)) ¤ۣۜ..¤ | :: icebLue Tasarim Red Tasarım CSS TASARM :: tasrımlar :: Css Tasarımlar-
Buraya geçin: