player yapım
Merhaba arkadaşlar. Anlatmak istediğimi http://www.sonsahne.tr.gg de görebilirsiniz
Amaç tasarım yenilenmeden sayfa değiştirmek.
Bu işi yapmak zor gibi gözükebilir. Ama mantığını anladıktan sonra ne kadar kolay olduğunu anlayacaksınız
Bunun için CSS Tasarımı kullanmalısınız.
Yapmanız gereken bir tasarım oluşturmak. Tablo kullanarak yapabilirsiniz.
Veya css için kullanılan hazır tasarımları bu sisteme göre düzenleyebilirsiniz
Ben size örnek olarak basit bir tasarım en altta vericem
1. Adım:
Resimdeki gibi css desing 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> |
NOT: Bu kodu her sayfanızda eklemeniz gereklidir
kaydet dedikten sonra tasarım ayarlarından gelişmiş ayarlara geçerek
sitenizde site başlığı gözükmemesi için aşağıdaki kodu CSS Kodu
(Style tagleri olmadan yazınız): bölümüne yapıştırıp kaydediyoruz.
| Kod: |
| div.header{display: none;} |
CSS ile ilgili diğer bilmeniz gereken kodları BURADAN bulabilirsiniz.
CSS desing yapımı detaylı anlatımını BURADAN bulabilirsiniz.
2. Adım:
Sayfalarımı değiştirden Ana sayafayı seçin
Ana sayfanın adını index olarak değiştirin
Tasarım kodunuzu anasayfa yani indexe ekleyeceksiniz.
tasarımınızın orta kısmına yani içeriklerin olacağı kısmına iframe kodunu yerleştiriyoruz.
| Kod: |
| <iframe style="width: 539px; height: 447px" border="0" name="S1" src="anasayfa.htm" frameborder="0" width="457" height="289"> SonSahne</iframe> |
indexe eklediğiniz iframe kodunun boyutunu tasarımınıza göre mause ile boyutunu ayarlayabilirsiniz.
iframe kodunda bulunan aşağıda kırmızı yazılı bölüme dikkat edelim.
name ye isim olarak S1 verdim. siz değiştirip başka bir isim koyabilirsiniz. Bu isim menümüzü hazırlarken lazım olacak
<iframe style="width: 539px; height: 447px" border="0" name="S1" src="anasayfa.htm" frameborder="0" width="457" height="289">
SonSahne</iframe>
NOT: iframedeki src"anasayfa.htm" sitenize girildiğinde hangi sayfanın ana sayfa olacağını ayarlar.
sitenize girildiğinde ilk hangi sayfanın çıkacağını kendiniz belirleyeceksiniz.
iframedeki src"anasayfa.htm" yerine src"deftereyaz.htm" yazarsanız ana sayfanız ziyaretçi defteri olur
iframeyide tasarımımıza ekledik boyutunu ayarladık.
3. Adım:
Sitemizin ana sayfasını index olarak değiştirmiştik ve içine tasarım eklemiştik.
şimdi kendimize bir ana sayfa yapıyoruz.
sitene giriş
sayfalarımı değiştir
yeni sayfa ekle
sayfanın adını anasayfa yapın. (iframe kodundaki src"anasayfa.htm" nin aynı olması gereklidir
) kaydet
4. Adım:
4. adımda menü oluşturucaz.
menümüzü iframeye göre ayarlıyıcaz.
bu ne demek derseniz iframe deki kırmızı olan yere dikkat çekmiştim.
menümüze köprü verirkende name ye eklediğimiz ismi yazıcaz
resimleri dikkatlice inceleyiniz.
5. Adım:
Tasarımımız bitti.
şimdi içeriklerimizi iframeye göre yani iframenin sağa doğru kaydırma çubuğu olmadan ayarlayalım ki sitemiz daha düzgün gözüksün
bu ayarı içerikleri eklediğinizde yapmalısınız.
Tasarımı bitirdik gelelim siteye müzik eklemeye.
sitenize müziği index sayfasına (tasarımın olduğu sayfaya) ekliyoruz.
tasarım ayarlarına eklemiyoruz.
Arkaplan müziği ekstrasınada müzik eklemiyoruz.
Tasarım ayarlarına eklenebilecek kodlar:
arkaplan resim veya renk kodları eklenebilir.
| Kod: |
| <body bgcolor="#000000"> |
Mause kodu eklenebilir.
Link şekillendirici kodlar eklenebilir.
kısacası tasarımda gözükecek reklam vb. kodları tasarım ayarlarına eklemiyoruz.
index sayfasına ekliyoruz
Başta dediğim gibi örnek ve basit bir tasarım vericem demiştim
tasarımı ön izle: http://sonsahne.tr.gg/ornek_tasarim.htm
| Kod: |
| <style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style><center> <table style="width: 950px; height: 113px" height="113" cellspacing="0" cellpadding="0" width="950" align="center" border="1"> <tbody> <tr> <td bordercolor="#ff6600"><strong> <p align="center"><strong><font face="Comic Sans MS" color="#ff6600" size="7">SİTENİN BAŞLIĞI<br /> <font color="#ff0000" size="4">(başlık resmi ekleyebilirsiniz)</font></font></strong></p> </strong></td> </tr> <tr> <td bordercolor="#ff6600"> <table style="width: 200px; height: 31px" cellspacing="0" cellpadding="0" width="200" align="left" border="1"> <tbody> <tr> <td bordercolor="#ff6600"> <p align="center"><strong><font face="Times New Roman" color="#ff6600" size="3">~~ MENÜ ~~</font></strong></p> </td> </tr> <tr> <td bordercolor="#ff6600"><strong><font face="Times New Roman" color="#ffffff" size="3"><a target="S1" href="anasayfa.htm">Ana Sayfa</a><br /> <a target="S1" href="deftereyaz.htm">Deftere Yaz</a><br /> <a target="S1" href="iletisim.htm">İletişim</a></font></strong></td> </tr> </tbody> </table> <table height="455" cellspacing="0" cellpadding="0" width="544" align="left" border="1"> <tbody> <tr> <td bordercolor="#ff6600"><iframe style="width: 539px; height: 447px" border="0" name="S1" src="anasayfa.htm" frameborder="0" width="457" height="289"> DJ-SonSahne</iframe></td> </tr> </tbody> </table> <table height="31" cellspacing="0" cellpadding="0" width="200" align="right" border="1"> <tbody> <tr> <td bordercolor="#ff6600"> <p align="center"><strong><font face="Times New Roman" color="#ff6600" size="3">~~ Hoş Geldiniz ~~</font></strong></p> </td> </tr> <tr> <td bordercolor="#ff6600"> <p align="center"><strong><font color="#ff0000" size="1">sağ bölüm içeriği<br /> (tasarımı bozmayacak boyutlarda)</font></strong></p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td bordercolor="#ff6600" bgcolor="#000000"> <p align="center"><font color="#ff6600"><font face="Times New Roman"><font size="2"><strong>Copyright © 2008 </strong></font></font></font><a target="_blank" href="http://www.sonsahne.tr.gg"><font face="Times New Roman" color="#ff6600" size="2"><strong><em>SonSahne</em></strong></font></a><font face="Times New Roman" color="#ff6600" size="2"><strong> Tüm Hakları Saklıdır.</strong></font></p> </td> </tr> </tbody> </table> </center> |
------------------------------------------
Elimden geldiğince anlatmaya çalıştım umarım anlaşılır olmuştur.
1. Adım resimleri Photoshopar anlatımından alıntı yapılmıştır.