KingCss Forum
Would you like to react to this message? Create an account in a few clicks or log in to continue.


En İyi Bilgi Paylaşım Forumu
 
AnasayfaLatest imagesAramaKayıt OlGiriş yap

 

 Css Yapımı

Aşağa gitmek 
YazarMesaj
taha00
Moderatör
Moderatör
taha00


Mesaj Sayısı : 45
Kayıt tarihi : 18/11/09
Nerden : Manisa/Soma

Css Yapımı Empty
MesajKonu: Css Yapımı   Css Yapımı I_icon_minitimeÇarş. Kas. 18, 2009 10:19 am

ysnsen demiş ki:
CSS DESİGN ÖRNEK TASARIM (Resimli Anlatım)


Css Yapımı Ayracdo0

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

Css Yapımı 93951569dx8

Css Yapımı 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 Yapımı 59021361zz7

Css Yapımı 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 Yapımı 96424251te6

Css Yapımı Ayracdo0

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

Css Yapımı 54755894ye7

Css Yapımı 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 Yapımı 47919933qb0

Css Yapımı Ayracdo0

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

Css Yapımı 74831095dm8

Css Yapımı Ayracdo0

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

Css Yapımı 75227683uy3

Css Yapımı 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 Yapımı 78814105re1

Css Yapımı Ayracdo0

Ve işte banner' ımız tablonun içine eklenmiş durumda 😉

Css Yapımı 29971974ac6

Css Yapımı Ayracdo0

Şimdide dış tablomuzun içini renklendirelim.

Css Yapımı 10ye4

Css Yapımı Ayracdo0

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

Css Yapımı 11ok0

Css Yapımı Ayracdo0

Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış 😉


Css Yapımı 12lr7

Css Yapımı 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 Yapımı 13ov5

Css Yapımı Ayracdo0

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

Css Yapımı 14co0

Css Yapımı 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 Yapımı 15cp5

Css Yapımı Ayracdo0

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


Css Yapımı 16sf2

Css Yapımı 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 Yapımı 17mx3

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

Css Yapımı 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 Yapımı 18db4

Css Yapımı Ayracdo0

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

Css Yapımı 19qj0

Css Yapımı 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 Yapımı 19qj0

Css Yapımı Ayracdo0

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

Css Yapımı 20vv9

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

Css Yapımı 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 Yapımı 78416669th0

Sonra Kaynak yazan yere tıklıyoruz.

Css Yapımı 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 Yapımı 38354803wm0

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

Css Yapımı 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 Yapımı 56937932xz2

Sitemizi açtığımızda gördüğünüz gibi tablomuz miiss gibi eklenmiş durumda Gülücük 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 Gülücük
www.photoshopar.tr.gg


Css Yapımı 67007676qx3

Css Yapımı 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="http://img296.imageshack.us/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 Yapımı Ziyaretcidefteriuo1

Css Yapımı 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 Yapımı Arkaplanrenkzl2

Css Yapımı 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 Yapımı Epostadc3

Css Yapımı 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 Yapımı Resimetrafiys0

Css Yapımı Ayracdo0
Sayfa başına dön Aşağa gitmek
http://www.tahabostanci.com
 
Css Yapımı
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
KingCss Forum :: Professional Alan [Forum Harici Link Vermeyin] :: CSS-
Buraya geçin: