2iz.Net » basit http://www.2iz.net Bilgisayar, Okul, Oyun, Sağlık, Sözlük, Teknoloji, Sinema, Video-Müzik Tue, 29 Mar 2011 15:12:19 +0000 en hourly 1 http://wordpress.org/?v=3.0 Basit CSS Menü Yapımı http://www.2iz.net/basit-css-menu-yapimi.html http://www.2iz.net/basit-css-menu-yapimi.html#comments Thu, 22 Jul 2010 11:28:10 +0000 Şafak Tezgel http://www.2iz.net/?p=82 Web sitesi hazırlarken sitenin sünü hazırlarken kullandığınız yöntemleri kısa bir süreliğine unutun. ile daha pratik ve hızlı lerin nasıl yapılabişeceğinden bahsedeceğim biraz. Sadece kodlarını kullanarak hoş görünümlü menü hazırlamanın aslında ne kadar kolay olduğunu göreceksiniz.

Sadece bir örnek vererek açıklamanın uygun olacağını düşünüm. Zamanla sindire sindire tek tek örnekler yaparak ve bunlarıda siz uyguladığınızda tam bir öğrenme olacaktır, eminim.

İlk olarak web sitesi yapımı için kullandığınız editörünüzü açın. Sadece bir tane html sayfası oluşturun. Html sayfası içerisine ilk olarak aşağıdaki kodlarını </head> tagından önce sayfaya yerleştirin.

:

  1. &lt;style type=”text/”&gt;
  2. body {
  3. background: #F8F8F8; /*sayfa arkaplan rengi*/
  4. }
  5. #menu a{
  6. font: 11px Verdana; /*menu font özellikleri*/
  7. color: #191919; /*yazının rengi*/
  8. padding: 10px; /*nün içten olan boşluğu*/
  9. background: #CECECE; /*arkaplan rengi*/
  10. text-decoration: none; /*yazının alt çizgisinin iptal edilişi*/
  11. }
  12. #menu a:hover{
  13. background: #191919; /*arkaplan rengi*/
  14. color: #CECECE; /*yazının rengi*/
  15. }
  16. &lt;/style&gt;

kodları içerisinde gerekli açıklamları yaptım. Siz bu kodlar arasındaki bütün sayısal değerleri değiştirerek farklı yöntemler deneyebilir ve yazılan o satırdaki kodun tam olarak ne işe yaradığını daha iyi kavrayabilirsiniz. Bunu kesinlikle yapın. Mesela padding: 10px; olan kod satırını padding: 100px; yapın. Sayfayı kaydedin inceleyin. Sonra eski haline getirin. İkisi arasındaki farkları inceleyin. Bu şekilde birşeyleri kurcalayarak daha iyi ve kalicı şekilde öğrenebilirsiniz. Ben bazen bu şekilde yapıyorum.

Aşadağıki kodları ise html sayfanızın <boy> tagından sonraki alana ekleyin. Kodlarımız bizim müzü oluşturuyor.

HTML:

  1. &lt;div id=”menu”&gt;
  2. &lt;a href=”#”&gt;Anasayfa&lt;/a&gt;
  3. &lt;a href=”#”&gt;Hakkýmýzda&lt;/a&gt;
  4. &lt;a href=”#”&gt;Hizmetler&lt;/a&gt;
  5. &lt;a href=”#”&gt;Referanslar&lt;/a&gt;
  6. &lt;a href=”#”&gt;Ýletiþim&lt;/a&gt;
  7. &lt;/div&gt;

Kodların hepsini yerleştirdiyseniz sayfanızı kaydedip deneyebilirsiniz. Burada önemli olan kodlarının ne işe yaradığı. Az öncede dediğim gibi kodları bol bol kurcalayın, sayısal değerleri ile oynayın, aradaki farkları kavrayarak daha iyi öğrenin. Hazırladığımız bu nün demosunu bu sayfada bulabilirsiniz. İndirmek için ise bu adresi kullanabilirsiniz.

***

Bu arada söylemeden edemeyeceğim. RSS abone sayım şuanda bu yazıyı yazarken tam olarak 74. Bu sayı her geçen gün arttıkça benimde yazma hevesim artıyor. Bana göre bu arak çok düşük. Şuanda en kötü ihtimalle 300 felan olmalıydı. Bu da bu blogdan henüz pek fazla kişinin haberdar olmadığını gösteriyor bana göre. Eğer bu blogu sevdiyseniz tanıdıklarınıza önerebilir ve RSS abonesi kazandırabilirsiniz. Teşekkürler.

]]> http://www.2iz.net/basit-css-menu-yapimi.html/feed 0