Tema Editleme Denemesi

Öncelikle internetten bulduğum ve aşağıda ilk sayfası bulunan  örnek üzerinden bir web sitesinin editleme işlemini aşama aşama anlatmaya çalışacağım. Makalenin sonunda da vereceğim linkden web sitesinin editlenmiş şeklini komple resim, font, css ve html kodları ile birlikte indirebilirsiniz.

Önce sistemimizde kayıtlı olmayan fontları @font-face sistemi (@FONT-FACE KULLANıMI) ile css kodlarımızı yazarak sayfamıza çağıralım.

@font-face {
 font-family: 'UltraRegular';
 src: url('../fonts/ultra-webfont.eot');
 src: url('../fonts/ultra-webfont.eot?#iefix') format('embedded-opentype'),
 url('../fonts/ultra-webfont.woff') format('woff'),
 url('../fonts/ultra-webfont.ttf') format('truetype'),
 url('../fonts/ultra-webfont.svg#UltraRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'open_sansregular';
 src: url('../fonts/opensans-regular-webfont.eot');
 src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('../fonts/opensans-regular-webfont.woff') format('woff'),
 url('../opensans-regular-webfont.ttf') format('truetype'),
 url('../opensans-regular-webfont.svg#open_sansregular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Daha sonra index.html sayfamızda head etiketleri arasına css kodlarımızı aşağıda ki şekilde çağıralım.

<link rel="stylesheet" type="text/css" href="css/style.css">

Daha sonra div page ve body etiketleri ile imaj klasöründeki web sitemizin  arka planını sayfamıza yerleştirelim.

<div id="page">
              <div>

body {
 background: url(../images/bg-body.jpg) repeat center top;
 color: #d5b084;
 font-family: 'open_sansregular';
 font-size: 12px;
 margin: 0;
 min-width: 960px;
 padding: 0;
}

Arkasından yine div header ve page etiketleri ile imaj klasöründeki header arka planını oluşturuyoruz ve logomuzun yolunu <img src> ile imaj klasöründen gösteriyoruz.

<div id="header">
  <a href="index.html"><img src="images/logo.png" alt="Image"></a>

#page {
 background: url(../images/bg-page.png) repeat;
 margin: 30px auto 0;
 padding: 10px;
 width: 940px;
}

Arkasından ul ve li etiketleri ve sırasız liste ile menülerimizi oluşturalım. Menülerimizi logonun sağ tarafında oluşturduktan  marj, pading, hover v.s. gibi özelliklerini ayarladıktan sonra, menülerin üzerine gelindiğinde altında gözükecek separatorü aşağıdaki şekilde Css kodlarımıza ekliyoruz.

#page div div#header ul li a:hover {
 border-bottom: 5px solid #a2b83c;
}

Seperatörün kalıcı olarak Anasayfa altında gözükmesi için;

#page div div#header ul li.current a,

kodunu oluşturuyoruz.

Sonra headerin altındaki banneri oluşturuyoruz. Banner üzerinde gözükmesini istediğimiz özel yazımızı ekliyoruz. 

Banner resmi (headline-home.jpg) ile ilgili kodumuzu index sayfamıza, font-size, color, padding v.s. ayarları ile ilgili etiketlerimizi de css kodlarımıza dahil ediyoruz. 

<div class="section"> ile de anasayfada ki blog bölümümüzü oluşturuyoruz.

Background, imaj, font, color, padding v.s. ayarlarla ilgili etiketlerimizi css kodlarımıza yazdıktan sonra footer kısmına geçiyoruz.

Footer bölümünün sol tarafına logomuzu yerleştirmek üzere,  (logo2.png) yolunu gösteriyoruz. Altına copyright ile "Tüm hakları saklıdır" yazımızı ekliyoruz. Orta kısma sayfamızın başında ki menümüzün bir örneğini ul ve li etiketleri ile oluşturuyoruz. En sağ tarafa da sosyal iconlarımızı  yerleştiriyoruz.

Böylece index.html sayfamızı bitiriyoruz.  

Editlenmiş Anasayfa

Devamı için takipte kalınız...



Sitenin Komple Editlenmiş Halini  İNDİR