|
|
|
|
CSS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HTML ve JAVA
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
1.RED TASARIMI OLUŞTURMAK RESİMLİ ANLATIM
2.ICEBLUE TASARIMI OLUŞTURMAK RESİMLİ ANLATIM
3.BUTTERFLY TASARIMI OLUŞTURMAK RESİMLİ ANLATIM
4.CSS DESİGN YAPIMI
Red Tasarımı Oluşturmak Resimli Anlatım :
Resimdeki Açıklamalar :
Navigasyon Yazan Yerin Buton URLsi Bölümü : Buraya İstediğiniz Butonu Koyabilirsiniz... Diğer Menu Elemanlarının Dışında en Üste Yazacağınız "Menu" , "İçindekiler" , "Navigasyon" vs. Gibi Başlığın Bulunduğu Yeri Buton Olarak Yapmak İçin Kullanılır.. Buton Kullanmak İstemiyorsanız Koddaki Konumuna Dokunmayınız...
Sol Yan Tasarım Çizgisi URLsi Bölümü : Burada İse Resimde de Görüldüğü Gibi Sol Yan Tarafa İstediğiniz Şekli Koyabilirsiniz...
Bunu Ben Resimde Kolaylıkla Farkedebilmeniz İçin Kalın ve Kırmızı Yaptım..Siz İster İnce İsterseniz de Kalın Yapabilirsiniz.. Herhangi Bir Çizgi vs. Yapmak İçin Paint i Kullanabilirsiniz...
Eğer İsterseniz ; Konu Ayıraçlarını Kullanabilirsiniz.. Nasıl Mı ?
==> Herhangi Bir yerden Bulduğunuz Konu Ayıracını Bilgisayarınıza Kaydediniz.. Daha Sonra Bunu Windows Resim ve Fax Görüntüleyicisinden Açınız.. Hemen Aşağıda Sağa-Sola Çevir Butonları Vardır.. Dik Olarak Ayarlayınız.. Upload Edip Kodda Gerekli Yere Yerleştiriniz... (Bu da Başka Bir Öneri) 
Sağ Yan Tasarım Çizgisi URLsi Bölümü : Sol Yan Tasarım Çizgisi URLsi Bölümü İle Aynı İşlevi Görmektedir.. Ben Resimde Kolay Farkedilmesi İçin Mavi Olarak Yaptım...
Buton URLsi Bölümü : Menu Elemanlarınızın Bulunduğu Yerlere Buton Eklemek İçin Kullanılır.... Her Türlü (iceblue,red) Butonların URL lerini Yerleştirebilirsiniz... GIF ler de DAHİL...
Menu ArkaPlan URLsi Bölümü : Burada Menu Elemanlarınızın Bulunduğu Butonların ArkaPlanları Bulunmaktadır.. Ben Resimde Yine Kolay Farkedilmesi İçin Yeşil Olarak Belirttim...Siz İsterseniz Boyutlara Uygun Bir Resim de Ekleyebilirsiniz...
Sayfa Üstü Band Resim yada Buton URLsi Bölümü : Bu Bölümde Resimde de Görüldüğü gibi Sayfanızın Üstünde Bulunan Bandın URLsi Bulunmaktadır... Ben Resimde de Görüldüğü gibi Herhangi Bir Butonu Büyülterek Rahat Farkedilmesi İçin Tasarıma Yerleştirdim.. Siz de Aynı Şekilde Boyutlara Uygun Olarak İstediğinizi Koyabilirsiniz...
ArkaPlan URLsi Bölümü : Bu Bölümde İse Arkaplanımızın URLsi Bulunmaktadır... İstediğinizi Kullanabilirsiniz.. ( Tabii Tasarımınızla Uyuşturun ) Ben Başlık Remi İle Uymlu Olması İçin Bu Resmi Seçtim...
Orta Sayfa Resim URLsi Bölümü : Bu Bölümde Sitemizin İçeriğinin Olacağı Yer Gsterilmetedir.. Ben yine Resimde Kolay Farkedilmesi İçin Mor Olarak Belirledim.. Yine İstediğiniz Rengin Yada Resmin URLsini Kodda Gerekli Yere Yerleştirerek Kullanabilirsiniz...
Sayfa Altı Band Renk KODU Bölümü : Bu Bölümde Resimde de Görüldüğü Gibi Sayfamızın Altında Bulunan Bandın RENK KODU Yer Almaktadır...Ben Resimde Turuncu Olarak Belirlerim.. Siz İstediğiniz RENK KODUNU Kullanabilirsiniz...
Başlık Resmi URLsi Bölümü (Otomatik Seçim) : Bu Bölümde İse Başlık Resmimiz Yer Almaktadır.. Neden OTOMATİK Seçim Diye Soracaksınız.. Nedeni İse ; RED Tasarımlarında Size Seçim Yapmanız İçin Başlık Resmi Seçenekleri Verilir.. Burada Genel Sekmesini Seçerseniz URL Bölümüne Kendi Başlık Resminizin URLsini Yerleştirebilirsiniz..
Yalnız, Eğerki Genel Bölümü Seçmeyip, Size sunulan Diğer Başlık Resimlerini Seçerseniz Kendi Başlık Resminizi Kullanamazsınız..
Ben OTOMATİK Olarak Belirledim...
İşte Buyrun Düzeltmeniz Gereken KOD :
<!-- www.tasarımyeri.tr.gg kod başla ---> <body bgcolor="#000000" style="margin: 0 0 0 0;" background="-----------------ARKAPLAN URLSİ-----------------">
<style type="text/css">
<!--
td.edit_navhead{background-image: url(-------------------);NAVİGASYON yAZAN yERİN BUTON URLSİ----------------);
);background-repeat:no-repeat;}
td.edit_links_bg{background-image: url(-----------------SOL YAN TASARIM ÇİZGİSİ URLSİ-----------------);
);background-repeat:no-repeat;}
td.edit_rechts_bg_unten{background-image: url(---------------SAĞ YAN TASARIM ÇİZGİSİ URLSİ-------------);
);background-repeat:no-repeat;}
td.edit_rechts_header{background-image: url(---------------------SAYFA ÜSTÜ BANDI-------------);background-repeat:no-repeat;}
td.edit_rechts_header2{background-image: url(
);background-repeat:no-repeat;}
td.edit_rechts_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_zeile{background-image: url(
);background-repeat:no-repeat;}
td.edit_main_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_navi_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_page_main_bg{background-image: url(--------------MENU ARKAPLAN URLSİ----------------);
td.edit_button_bg{background-image:url(-------------------BUTON URLSİ------------------););}
td.edit_bottom_bg img{visibility: hidden;}
td.edit_bottom_bg{background-image: none;background-color: #--------------SAYFA ALTI BAND RENK KODU--------------;}
td.cont_bottom img{visibility: hidden;}
td.edit_content_bg{heigth: 60px;background-image: url(-------------------ORTA SAYFA RESİM URLSİ----------------);background-repeat:repeat;}
edit_navi_bg img,td.edit_navi_top img,td.rb_footer img,td.rb_bottom img,td.rb_bottom2 {visibility: hidden}
td.edit_content_header{background-image: url(-----------------SAYFA ÜSTÜ BAND RESİM YADA UZUN BUTON URLSİ--------------);
);background-repeat:no-repeat;}
-->
</style>
<style
<!--
td.edit_header{background-image: url(--------------BAŞLIK RESMİ URLSİ-------------););
</style>
<!--
html, body {
text-align: center;
}
-->
</style> <!-- www.tasarimyeri.tr.gg kod bitir--->
Kodda Kırmızı İle Gösterdiğim --------------------BELİRTTİĞİM YER----------------- Kısımlarını Silerek Kendinize Ait URLleri ve RENK KODLARI nı Yerleştiriniz...
Bu Kodu Düzeltmek İçin Kopyalayıp NOTPAD (notdeteri) de Açınız... Gerekli Düzenlemeleri Yapınız..
Herhangi Bir Bozukluk Olmasına Karşın Düzeltmeniz Gereken Kodun Orjinali :
| Kod: |
<!-- www.tasarimyeri.tr.gg kod başla ---> <body bgcolor="#000000" style="margin: 0 0 0 0;" background="-----------------ARKAPLAN URLSİ-----------------">
<style type="text/css">
<!--
td.edit_navhead{background-image: url(-------------------NAVİGASYON yAZAN yERİN BUTON URLSİ----------------
);background-repeat:no-repeat;}
td.edit_links_bg{background-image: url(-----------------SOL YAN TASARIM ÇİZGİSİ URLSİ-----------------
);background-repeat:no-repeat;}
td.edit_rechts_bg_unten{background-image: url(---------------SAĞ YAN TASARIM ÇİZGİSİ URLSİ-------------
);background-repeat:no-repeat;}
td.edit_rechts_header{background-image: url(---------------------SAYFA ÜSTÜ BANDI-------------);background-repeat:no-repeat;}
td.edit_rechts_header2{background-image: url(
);background-repeat:no-repeat;}
td.edit_rechts_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_zeile{background-image: url(
);background-repeat:no-repeat;}
td.edit_main_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_navi_bg{background-image: url(
);background-repeat:no-repeat;}
td.edit_page_main_bg{background-image: url(--------------MENU ARKAPLAN URLSİ----------------
td.edit_button_bg{background-image:url(-------------------BUTON URLSİ------------------);}
td.edit_bottom_bg img{visibility: hidden;}
td.edit_bottom_bg{background-image: none;background-color: #--------------SAYFA ALTI BAND RENK KODU--------------;}
td.cont_bottom img{visibility: hidden;}
td.edit_content_bg{heigth: 60px;background-image: url(-------------------ORTA SAYFA RESİM URLSİ----------------);background-repeat:repeat;}
edit_navi_bg img,td.edit_navi_top img,td.rb_footer img,td.rb_bottom img,td.rb_bottom2 {visibility: hidden}
td.edit_content_header{background-image: url(-----------------SAYFA ÜSTÜ BAND RESİM YADA UZUN BUTON URLSİ--------------
);background-repeat:no-repeat;}
-->
</style>
<style
<!--
td.edit_header{background-image: url(--------------BAŞLIK RESMİ URLSİ-------------);
</style>
<!--
html, body {
text-align: center;
}
-->
</style> <!-- www.tasarimyeri.tr.gg kod bitir---> |
Iceblue Tasarımı Resimli Anlatım:
DERS 1 (TASARIMDA ÖNEMLİKLER)
1:BİR TASARIMDA RENK UYUMU COK COK COK ÖNEMLİDİR...
2:TASARIMDAKİ RESİM BOYUTLARI MESELA BAŞLIK RESMİNİN BOYUTU SİTEYE GİRİŞ YAPTIKTAN SONRA GÖZE CARPAN İLK ŞEY BAŞLIK RESMİDİR BOYUTLARINA DİKKAT ETMELİYİZ...
DERS 2 ( TASARIM BUTON BAŞLIK VS BOYUTLARI)
ARKADAŞLAR BİR ORTALI ICEBLUE TASARIMIN BAŞLIK BUTON VS BOYUTLARINI ACIKLIYACAM
1: ICEBLUE ORTALI TASARIM BAŞLIK RESMİ BOYUTLARI (921x104)
2: ICEBLUE BUTON (185x33)
3: ORTALI ICEBLUE TASARIMIN ORTA ALAN ÜST KISMINDAKİ BUTON (570x33) OLMALIDIR
4:BİR ICEBLUE SAĞ BUTON (168x33) PİKSEL OLMALIDIRLAR...
DERS 3 (BAŞLIK YAZISI VE LOGOLAR)
1:HER ZAMAN HEKEZİN SÖYLEDİĞİ BİRŞEY VARDIR BAŞLIK YAZISI SİTENİZİ ÖN PLANA YAZI GETİRİR SİTENİZİ KISA VE ÖZ ELE ALARAK BAŞLIK YAZINIZI YAZMALISINIZ...
2:LOGOLAR MESELA BUTONDAKİ VEYA BAŞLIKTAKİ LOGOLAR SİTENİZE DAHA BİR DEĞİŞİK PARLAKLIK KATAR BU PARLAKLIK ZATEN SİTENİZE YOĞUN BİR ZİYARETCİ AKIMINA UĞRATIR...
NOT:ÜST TARAFTAGÖRDÜĞÜNÜZ YAZILARIN TÜMÜ BİZE AİTDİR BELKİ AYNI FİKİRLERDE OLMUYABİLİRİZ AMA BEN HER ZAMAN BU KURALLARA UYARAK TASARIM YAPMIŞIMDIR VE BAŞARILI OLMUŞUMDUR İNŞ SİZLERİNDE İŞİNİZE YARAR
EVET ARKADAŞLAR ICEBLUE TASARIM YAPMAK TR.GG DE BENCE EN KOLAY İŞTİR B-S FORMUNDA VEYA BÖYLE SİTELERDE ICEBLUE TASARIM YAPMAYI B-S'CİLER OLARAK ANLATMAYA CALIŞMIŞIZDIR...
BU BÖLÜMDE GÖRDÜĞÜNÜZ ANLATIM BANA AİTDİR İZİNSİZ KOPYALANMAZ SADECE RESİMİ B-S FORMUNDAN ALMIŞIZDIR...
ÜST TARAFDAKİ RESİMDE GÖRÜLEN BİLGİLERİ ALTTAKİ KODDA KIRMIZI RENKLERLE BELİRMİŞİMDİR BU UYGULAMAYI YAPINIZ VE DİZE LAZIM OLACAK KODLAR ORTALAMA GENİŞLETME VE ARKA PLAN RESMİ YAPMA KODU OLACAKTIR ONUDA EN ALT KISIMDA VERMİŞİZDİR..
-----------------------------------------------------------------------------------------------------------------------------
</style>
<style type="text/css"> <!--
td.nav_heading{background-image:url(NAVİGASYON ARKAPLAN);}
td.nav{background-image:url(BUTON RESMİ URLSİ);}
td.nav:hover{background-image:url(BUTONUN ÜZERİNE GELİNCE BU GÖZÜKÜR);}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url(SOL ALT BORDER);}
td.edit_content_top{background-image:url(ÜST ORTA BUTON URL);}
td.edit_content{background-image:url(ORTA ALAN İÇERİK KISMI ARKA PLAN RESMI);background-color:transparent;}
td.edit_content_bottom{background-image:url(ALT ORTA BUTON);}
td.edit_content_bottom2{background-image: none;}
td.shouty{background-image: none;}
body{background-image:url(GENEL ARKA PLAN RESMİ);}
td.edit_rechts_sbg{visibility:hidden;}
td.edit_rechts_cbg{background-image: url(ORTA BÖLÜM EN ALT ARKA PLAN);}
td.edit_rechts_bottom{background-image: url(SAĞ ALT BORDER);}
td.edit_rb_footer{visibility:hidden;}
td.sidebar_heading{background-image: url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);}
td.shouty{background-image:url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);background-color:transparent;}
td.shouty2{background-image:url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);background-color:transparent;}
td.shouty3{background-image:url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);background-color:transparent;}
td.shouty4{background-image:url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);background-color:transparent;}
td.shouty5{background-image:url(SAĞ KUTUCUKLAR BAŞLIK ARKAPLANİ);background-color:transparent;}
--></style>
<style type="text/css">
<!--
td.edit_header_full{background-image: url(BASLİK RESMİ URLSİ); }
-->
</style>
<style type="text/css">
<!--
td.edit_header_full{width: 100% !important;background-repeat:no-repeat;background-position:center center;background-image: none;}
-->
</style>
-----------------------------------------------------------------------------------------------------------------------------
Butterfly Tasarım Resimli Anlatım:
Evet Arkadaşlar Şuana Kadar ICEBLUE ve RED Tasarımlar Nasıl Yapılır, Resimlerle Anlattık.. Şimdi Sıra Geldi BUTTERFLY Tasarımı Yapmaya..
Resimli Anlatım
Resimdeki Açıklamalar...
ArkaPlan URLsi Bölümü => Bu bölümde Arkaplanımızın Resim URLsi Yer Almaktadır.. Ben Resimde Kolay Farkedilmesi İçin Kırmızı Olarak Belirledim.. Siz İstediğiniz Rengi Koyabilir, İsterseniz Resim de Koyabilirsiniz..
Navigasyon Buton URLsi Bölümü ==> Bu Bölümde İse Menu Elemanlarımızın Bulunduğu Yerin Üstündeki "Navigasyon" , "Menu" vs. Yazan Yerin butonlu Hali Bulunmaktadır... Ben Resimde Mustafa Kemal Atatürk Resmi Bulunan Bir buton Yerleştirdim.. Siz Tercihinize Göre İstediğinizi Yerleştirebilirsiniz...
Menu Sol Taraf Çizgisi URLsi Bölümü==> Bu Bölümde Menumuzun Sol Tarafında Bulunan Çizgi Halindeki Çubuğumuz Bulunmaktadır... Resimde Yeşil Olarak Gördüğünüz Yerdir... Siz Bunu Yapacağınız Tasarıma göre Renklendirebilirsiniz...
Menu Sağ Taraf Çizgisi URLsi Bölümü ==> Sol Taraf İle Aynı İşlevdedir... Resimde Kolay Farkedilmesi İçin Mavi Olarak Belirledim... Siz Yine Dilediğiniz Gibi Renklendirmesini Yapabilirsiniz...
Menu Alt Taraf Çizgisi URLsi Bölümü ==> Sol ve Sağ Taraf İle Aynı İşlevi Görmektedir..Tek Farkı Altta Bulunması ve Yatay Şekilde Görevlendirilmiş Olmasıdır... Resimde Mor Olarak Belirlediğim Yerdir.. Yine Dilediğiniz Gibi Rengini Değiştirebilirsiniz...
Buton URLsi Bölümü ==> Bu Bölümde Menu Elemanlarımızın Bulunduğu Butonlar Yer Almaktadır.. Resimde Gri Olarak Belirledim.. Sizler de Herhangi bir butonu alıp Boyutlarına Uygun Bir Şekilde Kodda Gerekli Yere Yerleştirebilirsiniz...
Sağ Kutu Sol Taraf Çizgisi URLsi ==> Bu Bölümde İse Sağ Kutucuklarımızın Sol Taraflarında bulunan Çizgi Halinde Çubuklar Bulunmaktadır... Resimde Açık Mavi Olarak Belirlediğim Yerdir.. Siz Dilediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Sağ Taraf Çizgisi URLsi ==> bu Bölümde İse Bulunna Çizgi Sol Tarafta Bulunan Çizgi İle Aynı İşlevi Görmektedir.. Tek Farkı Sağ Tarafta Bulunmaktadır... Ben Resimde Siyah Olarak Belirledim.. İstediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Alt Taraf Çizgisi URLsi ==> BU Bölümde İse Sağ Kutucukların Altında bulunan Çizgi Halindeki Yatay Çubuk Bulunmaktadır.. Resimde Sarı Olarak Belirlediğim Yerdir.. Yine Dilediğiniz Gibi Değiştirebilirsiniz...
Sağ Kutu Başlık URLsi Bölümü ==> Bu Bölümde İse Sağ Taraftaki Kutucuklarımızın Bulunduğu Yerin Başlık Yazısının Olduğu Yerin ArkaPlanı Bulunmaktadır... Resimde Koyu Yeşil Olarak Belirledim.. Siz dilerseniz Buton da Koyabilirsiniz.. Tercih Ettiğiniz Butonun URLsini Kodda Yerine Yerleştirmeniz Yeterli Olacaktır..
Orta Sayfa Başlık URLsi Bölümü ==> bu Bölümde İse Sitemizde Yayınladığımız İçinde İçeriklerimizin Bulunduğu Yerin Başlık Yeri Bulunmaktadır...Ben Resimde Açık Mavi Olarak Belirledin.. Siz Dilediğiniz Rengi Yapabilirsiniz.. Dilerseniz Boyutlara Uygun Resim Bile Koyabilirsiniz...Sadece Boyutları Ayarlayın ve URLsini Kodda Gerekli Yere Yerleştirin Yeter...
Sayfa Yer İmi Başlık URLsi Bölümü ==> Bu Bölümde Sitede Nerede Olduğumuzu Gösteren Yerin Arkaplan Resmi, Butonu vs. Yer Almaktadır.. Ben Resimde Yeşil bir Butonun Boyutlarını Değiştirerek Gerekli Yere Yerleştirdim... Siz de Dilerseniz Bir Resim, Sadece Renk, Buton Hatta GIF Bile Koyabilirsiniz.. Tabii Boyutlara Uygun Olarak..
Başlık Resmi URLsi Bölümü ==> bu bölümde İse Başlık Resmimiz Bulunbaktadır.. Ben Resimde Mavi Olarak Belirledim.. Siz Dilerseniz Rengini Değiştirin, Dilerseniz Resim, Dilerseniz Banner Koyabilirsiniz.. Tamamen Tercihnize Kalmış.. Boyutları Uydurun, Kodda Gerekli Yere URLsini Yerleştirin Yeter..
Evet Arkadaşlar İşte Kendinize Göre Ayarlamanız Gereken Kod :
<body bgcolor="#000000" style="margin: 0 0 0 0;" background="------------------ARKA PLAN URLSİ--------------">
<style type="text/css">
<!--
td.headline2{visibility:hidden;width:0px;}
td.headline_bar_left{visibility:hidden;width:0px;}
td.headline_bar_right{visibility:hidden;width:0px;}
td.headline_bar_middle{visibility:hidden;width:0px;}
td.edit_nav_headline{background-image: url(--------------------NAVİGASYON BUTON URLSİ-------------------
);background-repeat:no-repeat;}
td.nav_bar_left{background-image: url(---------------MUNU SOL TARAF ÇİZGİSİ URLSİ----------------
);background-repeat:no-repeat;}
td.nav_bar_right{background-image: url(---------------MENU SAĞ TARAF ÇİZGİSİ URLSİ---------------
);background-repeat:no-repeat;}
td.nav_bar_bottom{background-image: url(---------------MENU ALT TARAF ÇİZGİSİ URLSİ----------------
);background-repeat:no-repeat;}
td.edit_nav_main{background-image:url(-------------------BUTON URLSİ------------------);}
td.headline3{background-image: none
);background-repeat:no-repeat;}
td.rb_bar_left{background-image: url(-----------------SAĞ KUTU SOL TARAF ÇİZGİSİ URLSİ----------------
);background-repeat:no-repeat;}
td.rb_bar_right{background-image: url(-----------------SAĞ KUTU SAĞ TARAF ÇİZGİSİ URLSİ--------------
);background-repeat:no-repeat;}
td.rb_bar_bottom{background-image: url(------------------SAĞ KUTU ALT TARAF ÇİZGİSİ URLSİ---------------
);background-repeat:no-repeat;}
td.edit_rechts_headline{background-image: url(--------------SAĞ KUTU BAŞLIK URLSİ----------------
);background-repeat:no-repeat;}
td.edit_content_headline3{heigth: 60px;background-image: url(---------------ORTA SAYFA BAŞLIK URLSİ-----------------);background-repeat:repeat;}
td.edit_content_headline{background-image: url(--------------------SAYFA YER İMİ BAŞLIK URLSİ--------------------
);background-repeat:no-repeat;}
-->
</style>
<style type="text/css">
<!--
td.edit_header{background-image: url(------------------BAŞLIK RESMİ URLSİ-----------------);
-->
</style>
Bu Kodda Yapmanız Gereken ;
Sadece ---------------------BELİRTTİĞİM YER------------------- Kısımlarını silerek Kendinize Ait URL leri Yerleştirmektir...
Gerekli Düzenlemeleri Yaptıktan Sonra Kodu Sitenize Eklemek İçin ;
==>Bedava-Sitem Login
==>Sitene Giriş
==>Tasarım Ayarları
==>Gelişmiş Ayarlar
==>Tasarımın Üstündeki Yazı Adlı Kutucuğa Yerleştiriniz..
==>Kaydet meyi Unutmayınız...
CSS DESİGN YAPIMI
Öncelikle resimde görüldüğü gibi Css Design Tasarımını seçiyoruz.
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> |
"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.
Sayfalarımı değiştir / Yeni sayfa diyoruz.
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.
Resimde görüldüğü dış tablomuzu yaptık.
En üste banner resmi koyacaz.Onun için yaptığımız tablonun en üstüne banner'lık bi tablo yapacağız.
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..
Ve işte banner' ımız tablonun içine eklenmiş durumda 
Şimdide dış tablomuzun içini renklendirelim.
Resimde görüldüğü gibi renk seçiyoruz...
Ve görüldüğü gibi tablomuzun içini renklendirdik.Ben gri rengi tercih ettim.
Siz hangi seçerseniz seçin.Zevkinize kalmış
Ş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;
Görüldüğü gibi saol tablomuzuda yerleştirmiş olduk.
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.
Sayfa Linki Yazdığım yeri seçiyorum ve Köprü ekle aracına tıklıyorum.Sonrası resimde görüldüğü gibi..
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;
Hepsine bu şekilde sayfasına göre link (köprü ekleyin).
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> |
Tekrar "Kaynak" aracına tıklayarak Ctrl + A yapıyoruz.Yani kodlarımızın hepsini seçiyoruz ve kopyalıyoruz..
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..
Görüldüğü gibi bütün sayfalara yapıştırıyorum..
Tasarladığımız sitenin içeriklerini her sayfanın kendisine göre dolduruyoruz.
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...
Sonra Kaynak yazan yere tıklıyoruz.
"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...
"Photoshopar" yazısını silip yerine hazır flash sitelerinden yaptığımız flash menü kodumuzu oraya yapıştırıyoruz.
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..
Sitemizi açtığımızda gördüğünüz gibi tablomuz miiss gibi eklenmiş durumda  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
www.photoshopar.tr.gg
|
|
|
|
|
|
| |
Copyright © 2008-2009 Murat Can,Her Hakkı Saklıdır
|
|
|
|
|
|
|
|
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
