PSD’den CSS’e çevirme – PSD to CSS


Web dünyasında ön geliştiriciler (Front End) ve arka geliştiriciler(Back End) vardır. Ön geliştiriciler kullanıcıya görünen kısımda yani ön kısımda çalışırken arka geliştiriciler ise kullanıcı tarafından görülmeyen arka kısımdan görevlidirler. Ön taraf diye adlandırılan kısımda tasarım – client, arka taraf diye adlandırılan kısımdaysa dinamik – server tabanlı bir çalışma mevcuttur. Ön geliştiriciler de arka geliştiriciler gibi kod yazabilirler fakat bu kodların türü değişiktir. Örneğin kendini ön geliştirici olarak geliştiren kişi client tabanlı diller yani Jquery, Javascript, Html, Css vb.. dillerde ileriyken arka tarafta kendini geliştiren kişi ise sunucu tabanlı diller olan PHP, ASP, MySQL vs. gibi dillerde kendini geliştirmektedir.

PSD’den CSS’e çevirme – PSD to CSS

Bu alanda çok profesyonel yerlere gelmek istiyorsanız bir zamandan sonra size sadece PSD’den CSS’e çevirmek yetmeyecektir. Aynı zamanda Jquery gibi teknolojilerle de ilgilenmelisiniz. Başlarken dikkat edilmesi gerekenler arasında elbette size göre en kullanışlı bir web editörü ve hızlı bir şekilde açılan iyi bir tarayıcı PSD’den CSS’e çevirme işleminde sizi sonuca ulaştıracak gereksinimler arasında yatıyor. Fakat işleme geçmeden bilinmesi gereken en temel gereksinim elbette ki HTML. CSS kodlarını ilk aşamada ezberlemeye çalışmayın. Zaten bunu pratikte yapacaksınız. En başta işlemin mantığına odaklanın. Başlayalım…

Photoshop PSD dosyası  Proje dosyasını indir

Temayı indir

1.Aşama: Bölümlendirme

psdPSD’den CSS’e çevirme işlemini yapmadan önce PSD’ yi önce kendi kafanızda daha sonra ise fiziksel olarak bölümlendirmelisiniz. PSD to CSS işleminde bölümlendirme işlemini bir satır – sütün ilişkisi olarak adlandırın. Bu şekilde adlandırdığınız takdirde zihninizde CSS’e çevirmek istediğiniz temayı daha kolay bölümlendirebilirsiniz. Bazı PSD to CSS işlemindeki bölümlendirmeler. Profesyonel çalışmak istiyorsanız bölümlendirme işlemini px tabanlı olarak gerçekleştirin. Temayı kodlamadan önce pixel genişliklerini ve bölümleri kaba taslak olarak bir defteri geçirmenizi öneririm. Bu sayede temayı kodlarken tekrar tekrar bölümlendirmeye konusunda zaman kaybı yaşamazsınız.

Photoshop to CSS bölümlendirme – Örnek 1

Photoshopdan css - html bölümlendirme

Photoshop to CSS bölümlendirme – Örnek 2

Psd'den CSS'e çevirmek örnek 2

Photoshop to CSS bölümlendirme – Örnek 3

PSD'den CSS'e çevirme işlemi

İlk olarak basit bir örnek yapalım. Bu örneğimiz standart olarak temalarda kullanılan (Header, Content, Sidebar ve Footer) 4 parça olsun. Bunun için yapmamız gereken temel bölümlendirme işlemi “ust”,”orta” ve “alt” ’tır. Kullanacağımız tema:

Not: Tema PSDUP.com sitesinden alınıp, düzenlenmiştir. Şimdi sitemizi bölümlendirelim.

Pss to css

2.Aşama: İndex ve CSS dosyalarımızı oluşturalım

PSD to CSS işlemini herhangi bir editör yardımıyla gerçekleştirebilirsiniz. Bu editör Windows işletim sisteminde bulunan Notepad programı bile olabilir. Yalnız bana göre bu işlem en iyi Adobe Dreamweaver adlı programda gerçekleştiği için PSD to CSS işleminde bazı görüntüleri Dreamweaver’den almaya karar verdim. Dreamweaver’da temiz bir şekilde PSD to CSS işlemini gerçekleştirmek için Site / New site diyip gerekli yerel dosyaları oluşturmanızı öneririm.

PSD to CSS işlemi

Öncelikle index.html, style.css dosyalarımızı ve images ile includes adlı iki adet klasörü aynı dizin (klasör) içerisinde oluşturuyoruz.  İndex.html dosyamız sitemizin adresini style.css stil dosyalarımızın bulunduğu ana dosyamızı, images resimlerimizi tutarken includes ise javascript veya benzeri kütüphane dosyalarını ( temada manşet olduğu için bunu ekliyoruz) yerleştireceğimiz için oluşturduk.

CSS dosyası tanımlama

Psd to CSS index.html





PSD TO CSS




PSD to Css işlemi - style.css

JQuery Ekleme

Temamızda flash ve arama çubuğuna tıklayınca yazının değişmesi nedeniyle Jquery (Javascript) teknolojisini kullanacağız. Bunun içinse link css kodumuzun hemen altına aşağıdaki kodu ekliyoruz.

Jquery ekleme

3.Aşama: Arkaplan işlemleri

PSD to CSS işlemi uzun süren bir proje olduğundan temiz çalışmalıyız. Programlamada derleme mantığında(Bir insanın yazılı metni okuması gibi – ilk satırdan son satıra kadar soldan sağa doğru okur) ilk aşamadan başlayıp en son aşamaya gitmeliyiz.etiketi  bir html sayfasında kullanıcı ile etkileşime giren ilk etiketlerden olduğu için bizde ilk başta arkaplan işlemlerini gerçekleştireceğiz. Aynı zamanda body etiketi sayesinde arkaplan işlemlerini gerçekleştiririz.

Arkaplanı tek renkten oluşturmak;

PSD dosyası

Psd to css

Eyeddropper(Damlalık) aracı ile arkaplan rengimizi seçiyoruz. Renk seçiçi (ön – ana renk) paletini açıp renk kodumuzu kopyaladıktan sonra CSS’e aşağıdaki gibi uyguluyoruz.

style.css


body {
margin:0px 0px; /* Kenar boşluklarını kaldırır */
background:#7baeb9; /* Arkaplan renk kodu */
color:#000; /* Sayfamızda renk kodu vermediğimiz takdirde eşlenecek renk kodu (siyah) */
font-family:Tahoma, Geneva, sans-serif; /* Yine renk kodu gibi, yazı tipi belirtilmediği takdirde
otomatik olarak eşlenecek yazı tipi*/
}

Arkaplana resim eklemek

PSD dosyası

PSD to Css işlemleri

Arkaplan hariç tüm layerlarımızı kapatıyoruz. CTRL+ ALT + SHİFT + S diyip PNG’yi seçtikten sonra (isterseniz farklı kaydet / arkaplan.png’de diyebilirsiniz) Arkaplanımızı images klasörünün içerisine atıyoruz.

style.css


body {
margin:0px 0px; /* Kenar boşluklarını kaldırır */
background:url(images/arkaplan.png) no-repeat; /* Arkaplana sabit (tekrarlamayan) resim ekleme kodu */
color:#000; /* Sayfamızda renk kodu vermediğimiz takdirde eşlenecek renk kodu (siyah) */
font-family:Tahoma, Geneva, sans-serif; /* Yine renk kodu gibi, yazı tipi belirtilmediği takdirde
otomatik olarak eşlenecek yazı tipi*/
}

Değişmeyen özellikleri tanımlamak

CSS’in mantığı sayfalar içerisinde görünüm – stil kodlarının tekrar etmemesidir. Body etiketinde görüldüğü gibi divin içerisinde yazı tipi veya rengi belirtmediğimiz takdirde otomatik olarak tanımlanacak özellikler belirliyebiliriz. Bu örnektede görüldüğü gibi biz çoğunlukla kullanacağımız özellikleri CSS dosyamızın başında veya sonunda belirtiyoruz. Sık sık kullanacağımız özelliklerden clear:both; , float:left; , float:right; vb.. özellikleri burada yine tanımlayabiliriz.

style.css


/* ÖRNEK TEMEL CSS KODLARI */

.silikon {
clear:both;
}

.solayasla {
float:left;
}

.sagayasla {
float:right;
}

4.Aşama: Container – Sandık

Div tagları kutu mantığında çalışmaktadır. Biz hazırlayacağımız temayı büyük bir kutu veya sandık diye düşünürüz. Bölümlendirme aşamalarında dikkat ederseniz her resmin çerçevesi sarıdır. Bu sarı çerçeveye container veya sandık denir. Biz bu sandığı ortaladığımızda otomatikmen sitede ortalanmış olur. Bu nedenle PSD to CSS işleminde 2.Aşamamız ilk başta bir Container yaratmak olmalıdır.

Div nedir? Niçin tablo değilde div?

Div etiketi tablo ile tasarımın önüne geçen ve kutu – sandık mantığında çalışan bir HTML etiketidir. Belirlediğimiz nesneleri bir div tagının içerisine koyarız ve içerisindeki özellikleri belirleriz. Böylece sandığımızı istediğimiz yere kolayca taşıyabileceğimiz gibi içerisindeki özellikleride tek tek değiştirebiliriz. Bu sayede tablodaki kod karmaşıklığından kurtuluruz. Div’in mantığı 1 sütün ve 1 satır tablosuna dayanmaktadır. Bu işlemi elbette tablolarda da yapabilirsiniz. Yalnız bu işlemi tablolarda yapmak için tablo kodlarını yerleştirmek zorundasınız. Sadece 1 satır ve 1 sütünluk tablo oluştururken bile 4 tablo etiket kullanıyoruz. Oysa ki sadece div etiketini kullanarak bu kod karmaşasından kurtulabiliyoruz. Bu nedenle sayfalarınızı tablo ile yaptığınızda normalden fazla kod oluşturacağı için sayfa yavaş açılacaktır. Daha fazla alan gerektirecektir. Site yavaş açıldığı için Arama motorları tablo ile yapılan siteleri div ile yapılan sitelerin aşağısına atmıştır.Bu nedenle modern Web programlamada tablo yerine div kullanılmaktadır.

Sayfa genişliği nasıl anlaşılır?

index.html

style.css

.sandik {
margin:0px auto; /* Sayfayı ortalar */
width:942px; /* Sayfanın genişliğini belirtir */
}

PSD to CSS işlemini yapacak kişilerin tarzı farklı olabilir. Misal ben ilk başta tüm divleri çıkartıp daha sonra işlemi psd ve css ile tamamlıyorum. Bu yöntem bana daha cazip geliyor. Bir nevi sitenin haritasını çıkartıyorum. İsterseniz sizde ilk başta bölümlendirdiğiniz web sitenizi divlerini oluşturabilirsiniz.

Tüm div tablosu;

Reklam
Kategori

Dreamweaver üzerinde çalışan arkadaşlar kod bloklarının karmaşıklığından kurtulmak için Etiketleri daraltabilirler. Bu sayede çalıştığınız kısıma daha rahat bir şekilde konsantrasyon sağlayabilirsiniz. Sadece belirlediğiniz etiketin kalıp diğerlerinin daraltılmasını istiyorsanız Alt tuşuna basılı tutarak buttona tıklayınız. *Bu işlemi geri almak için buttonun iki altında bulunan Tümünü Genişlet buttununa tıklayın.

Dreamweaver'da kod bloklarını nasıl daraltılır

5.Aşama: Üst taraf

Üst tarafta kendi arasında bölümlenebilir. Temayı uygun olarak hareket ettiğimizde karşımıza şu şekilde bir sonuç çıkar.

index.html

Sınıfı Ust olarak atadığımız kısma bir genişlik vermeliyiz. Bu genişlik değeri %100 olmalı ki sayfayı yatayda mümkün olduğu derece kaplayıp bir bütünlük katsın. Yalnız yatayda genişlik %100 iken yükseklik vermediğiniz yükseklik değeri vermediğimiz takdirde 0px atayacağında üst kısmımız görünmeyecektir. Bu nedenle ust stilli divimize yükseklik değeri vermeliyiz. PSD dosyasından yükseklik değerini logo bölümünden menüye alanına kadar almamız gerekiyor. Yükseklik değerini nasıl öğrenmemiz gerektiğini aşağıdaki resme bakarak anlayabilirsiniz.

 style.css

.sandik {
margin:0px auto; /* Sayfayı ortalar */
width:942px; /* Sayfanın genişliğini belirtir */
}
.ust {
width:100%; /* İngilizcede yüzde sağda belirtildiği için yüzdeyi sağa koyduk. */
/* Ayrıca 100% yerine 942px'de yazılabilir. */
height:150px; /* Yükseklik değerini belirtir */
background:url(images/ust_background.png) no-repeat; /* Ust tarafın arkaplanı */
}

PSD Dosyası

ust adlı divin arkaplanını PSD dosyasımızdan üstteki tüm layerları kapatıp, crop yaparak alıyoruz.

Arkaplan

Ust adlı bölümün genel özelliklerini tanımladık. Şimdi derine inip ust_ust ve ust_alt işlemlerini yapıcağız. * Kodların giderek yoğunlaşması nedeniyle artık sadece belirli bölümleri alıcam.

index.html

style.css 


/* Logo boyutlarına baktığımızda yüksekliğinin 113px olduğunu görüyoruz biz 115 px yapalım. */
.ust_ust {
width:100%;
height:115px;
}
.logo {
width:217px;
height:69px;
margin-left:10px; /* Sol taraftan boşluk vermeyi sağlar */
padding-top:5px; /* Üst taraftan boşluk vermeyi sağlar */
/* Margin dış taraftan boşluk verirken Padding iç taraftan boşluk vermeyi sağlar. Dışarıdan boşluk verince div hareket eder, içeriden boşluk verince içteki nesne veya nesneler hareket eder .*/
float:left; /* Sağ tarafa yaslıyoruz */
}
.logo img {
border:none; /* İE tarayıcısı için linki kaplayan mavi çerçeveyi yok eden kod */
}

Float:left özelliği

Float:left özelliği nesnelerimizi yatayda sol tarafa bitişik olarak hizalar. Bitişik olarak sol tarafa hizalanan nesneler yatay olarak görülür. Bu özelliğin aynısı float:right özelliği içinde geçerlidir. Yalnız bu sefer nesneler sol taraf yerine sağ tarafa bitişik olarak yaslanırlar.

index.html

style.css


.sosyal_medya {
width:120px;
height:20px;
float:right; /* Sağ tarafa yaslıyoruz */
margin:35px 20px 0px 0px; /* Bir araba ileriye doğru giderken teker dönüşünü hatırlayalım ve en üst noktasına A diyelim. A ilk başta Üst'ten başlayarak sırasıyla sağ,alt ve sola doğru uğrar. Buradaki mantıkta aynı şekilde. İlk başta üst taraf, sonra sağ, ardından alt ve son olarak sol tarafa boşluk atıyoruz */
}

.sosyal_medya ol {
margin:0px 0px; /* Açılımı 0px 0px 0px 0px'dir. */
}

Sosyal medya divinin içerisinde li ve a etiketi beraber kullanınca kullanılacak görünüm sınıfı ayarları
.sosyal_medya ol li {
float:left; /* Yanyana dizilmeleri için gereken sola yaslama kodu */
list-style-type:none; /* Listeleme yaparken elemanların yanındaki
şekli kaldırmasını sağlar */
width:20px; height:20px; /* İkon boyutları 20px X 20px */
margin-left:5px; /* Yanyana dizileceklerinden sol tarafa doğru
boşluk atadım. Böylece 5px aralıklarla yanyana dizilecekler */
}

.sosyal_medya img {
border:none; /* İE tarayıcısı için linki kaplayan mavi çerçeveyi yok eden kod */
}

index.html

Psd dosyası

Psd dosyasının içerisinde resimde görüldüğü gibi üst menüyü katmanlar sekmesinden yazılarını kaldırarak cropluyoruz – kesiyoruz.

style.css


.menu {
background:url(images/menu.png) no-repeat;
width:929px; /* menu.png -> genişlik */
height:72px; /* menu.png -> yükseklik */
}

index.html

style.css


.linkler {
font-size:12pt; /* Font büyüklüğü - 12 Punto = 12pt */
font-family:Tahoma, Geneva, sans-serif; /* Yazı tipi */
color:#000; /* Yazı rengi */
padding-top:20px; /* Üstten 20px boşluk */
float:left; /* Sola yaslama */
}

/* Linkler sınıfının içerisinde li etiketi görünüm ayarları */
.linkler li {
list-style-type:none; /* Liste başında çıkan şekilleri göstermez */
float:left; /* Sola yasla. Bu sayede li etiketleri yatay görünecektir. */
width:auto;
height:48px;
margin-left:20px; /* Yatay olarak görünecek li etiketlerinin arasında 20px boşluk bırakıyoruz */
}

.linkler li:hover{
background: url("images/ok.png") no-repeat;
background-position:center bottom;
}
/* Linkler sınıfının içerisinde li etiketine bağlı olarak a etiketenin görünüm ayarları */

.linkler li a {
text-decoration:none; /* Linkin altı çizilmesin */
}

.linkler li a:hover {
text-decoration:underline; /* Linkin üzerine gelince altı çizilsin */
color:#0000FF; /* Linkin üzerine gelince linkin rengi verdiğim kod rengine dönüşsün */
}

index.html



style.css


arama_kutusu {
float:right;
padding:33px 25px 0px 0px; /* 33px üst taraftan, 25px sağ taraftan iç boşluk*/
}

.ara {
width:175px;
height:30px;
border:none; background:transparent;
cursor:text; /* Ara çubuğunun üzerine gelindiğinde imlec text (yazı) görünümünü alır. */
font-style:italic;
font-size:10pt;
color:#999;
}
.gonder {
width:40px;
height:30px;
border:none; background:transparent;
cursor:pointer; /* Ara çubuğunun üzerine gelindiğinde imlec button görünümünü alır. */
text-indent:-999px; /* Yazının görünmemesini sağlar. */
}

6.Aşama: Orta taraf

Orta taraf kendi arasında ikiye ayrılır. Bunlar orta_sol ve orta_sagdır. Orta sol bilindiği gibi içerik, sağ taraf ise sidebardır.

index.html

style.css

Arkaplanı sadece beyaz olan bir temada orta adlı dive belirli bir boyur vermeniz gerek yoktur. Fakat bu gibi yani arkaplanı ile içeriğin rengi farklı olan temalarda orta adlı divin height değerine 100% veya 1000px diyin. Alt adlı bölüme gelince 1000px’ı tekrar duruma göre ayarlayın. Ayrıca belirtmek gerekirse profesyonel olarak çalışan kişiler boyutlandırmaya bölümlendirme aşamasında yapmaktadırlar.


/* Arama çubuğu görünümleri bitiş */
.orta {
width:903px; /* Menu.png'deki beyaz çubuk genişliği 903px */
height:915px; /* Beyaz bölgenin sayfanın dikeyde tümünü kaplaması için oluşturulan kod */
background:#fff; /* beyaz renk kodu - menu.png'deki renk beyaz olduğu için biz de beyaz kullanıyoruz */
margin:2px 13px; /* 2px üstten ve alttan, 13px sağ ve soldan boşluk */

.sol {
width:640px;
/*
orta(tüm boyut) - sidebar (sağ taraf )= sol taraf
903px - 250px = 653px eder. Biz 10px az yani 640px yazalım.
*/
float:left; /* Sola yaslıyoruz */
}

.sag {
width:250px; /* Reklam boyutuna göre ayarlanır, en fazla 336px olması önerilir */
float:right; /* Sağa yaslıyoruz */
margin-right:10px;
}

.sag img {
border:none; /* İE tarayıcısı için linki kaplayan mavi çerçeveyi yok eden kod */
}

Temaya manşet ekleme

İmages ile beraber oluşturduğumuz includes klasörünün içerisine manset.js adlı bir dosya oluşturuyoruz.

Manset dosyası oluşturma

Oluşturduğumuz manjet.js içerisinde aşağıdaki dosyayı açıp kodları kopyalayın veya direkt olarak

manjet.js dosyasını indirin. ( CTRL + S -> includes klasörünün içerisine )

Manjet.js kodları:

Son olarak css tanımlaması yaptığımız alan içerisinde ( head bölümü) bu sefer manjet.js’yi tanımlıyor, dahil ediyoruz.



index.html

PSD Dosyası

style.css


.manset {
width:605px; /* Manşetin boyutu 602px, yuvarlayarak 605px yazıyoruz*/
height:225px; /* Yine aynı şekilde 201 px yerine 205px yazdık */
overflow:hidden; /* Bu boyutların dışına çıkan görüntüleri gizliyoruz. */
margin:10px ;
}

index.html






style.css


/* MANSET STİL KODLARI BAŞLANGIÇ */
#nav {
position:absolute; /* Divi bağımsız hale getirir. Bu sayede div herhangi bir dive göre hareket etmez. */
padding: 210px 0px 0px 0px; /* 210px üstten boşluk*/
display: inline-table; /* Aynı satır içinde - yatay dizilim sağlar */
font-size: 0pt; /* Metni 0pt boyutu vererek görünürlüğünü kaldırıyoruz*/
margin-left:280px; /* Soldan 280px boşluk */
}
#nav a {
background-image: url('images/pasif.png'); /* Alt taraf için */
text-decoration: none; /* Altı çizili olmasın*/
display: block; /* Belirttiğimiz yüksekliklere göre kutu şeklinde bir görünüm ve işleyiş sağlar*/
height: 13px;
width: 13px;
float: left;
margin-right: 4px;
}
#nav a.activeSlide {
background-image: url('images/active.png');
}
#nav a:focus {
outline: none; /* Linke tıklandıktan sonraki eylem. Outline:none; Dış hat çizgilerini kaldırır. */
}

/* MANSET STİL KODLARI BİTİŞ */

index.html

8
Ekim

Deneme Başlık - PSD TO CSS

3 yorum
Kategori:
Photoshop ,
CSS
Açıklama: Başlangıç aşaması için PSD to CSS dersi.

style.css


.yazi {
margin:20px; /* Üstten ve alttan 25px boşluk*/
}

ID ile class(Sınıf) farkı nedir?

ID’de tanımladığınız özellik tema içerisinde sadece

bir kere kullanılır ve kullanılan nesneye özeldir.

Sınıfta ise tanımladığınız stilleri her nesne için kullanabiliriz.Normal şartlar altında bu tema içerisinde

bir çok yerde id verilebilir. Yalnız başlangıc aşamasında tek bir seçiciden ilerlemek kafanızı karıştırmaması amacıyla sadece örnek vermek amaçlı id kullanıyorum.


#tarih {
width:70px; height:60px;
background:url("images/tarih.png") no-repeat;
position:absolute;
margin:10px 0px 0px -40px;
}
#tarih_yazi {
font-size:12pt;
color:#fff;
text-shadow:1px 3px 3px #000;
text-align:center;
margin:5px 10px 0px 0px;
}

#baslik h2 {
font-size:12pt;
width:450px;
margin:5px 0px 0px 40px;
color:#FFC008;
float:left;
}

#baslik_aciklama{
font-size:10pt;
margin-left:30px;
color:#b2b2b2;
}

#baslik_aciklama_yazi {
margin:0px 0px;
list-style-type:none;
margin-left:5px;
float:left;
margin-right:5px;
margin-top:-7px;
}

#baslik_aciklama_yazi a {
color:#F90;
}

#yorum {
background:url("images/yorum.png") no-repeat;
width:100px;
height:30px;
float:right;
margin-top:15px;
}

#yorum_yazi {
margin-left:20px;
font-size:11pt;
margin-top:-3px;
}

index.html


Vestibulum
lacus ipsum, mollis ac hendrerit non, laoreet et nunc. Nam fringilla
metus dictum sapien cursus non venenatis arcu dictum. Maecenas
ac diam dui, adipiscing fermentum tortor. Etiam tempor tempor
eros a condimentum. Quisque gravida varius condimentum. Proin
nisi ligula, condimentum quis imperdiet nec, adipiscing a sem.
In feugiat sapien at dui volutpat nec facilisis diam fermentum.
Ut ac est convallis tellus dapibus interdum. Donec magna mi,
ultricies sit amet porttitor at, pretium sit amet justo. Suspendisse
aliquet erat eu augue rhoncus nec sollicitudin felis semper.
Vivamus laoreet venenatis neque eget consectetur. Suspendisse
potenti. Praesent mauris nibh, blandit et auctor non, vehicula
nec >quam. Etiam venenatis lorem rutrum lacus lacinia sed blandit
est rutrum. Ut condimentum, felis ut sagittis cursus, magna
nisl dictum ipsum, ac condimentum neque dolor sit amet odio.
Mauris nec metus vitae risus tempor molestie convallis eu orci.
Aliquam imperdiet feugiat tellus tempus imperdiet.  Vestibulum
lacus ipsum, mollis ac hendrerit non, laoreet et nunc. Nam fringilla
metus dictum sapien cursus non venenatis arcu dictum. Maecenas
ac diam dui, adipiscing fermentum tortor. Etiam tempor tempor
eros a condimentum. Quisque gravida varius condimentum. Proin
nisi ligula, condimentum quis imperdiet nec, adipiscing a sem.
In feugiat sapien at dui volutpat nec facilisis diam fermentum.
Ut ac est convallis tellus dapibus interdum. Donec magna mi,
ultricies sit amet porttitor at, pretium sit amet justo. Suspendisse
aliquet erat eu augue rhoncus nec sollicitudin felis semper.
Vivamus laoreet venenatis neque eget consectetur. Suspendisse
potenti. Praesent mauris nibh, blandit et auctor non, vehicula
nec quam. Etiam venenatis lorem rutrum lacus lacinia sed blandit
est rutrum. Ut condimentum, felis ut sagittis cursus, magna
nisl dictum ipsum, ac condimentum neque dolor sit amet odio.
Mauris nec metus vitae risus tempor molestie convallis eu orci.
Aliquam imperdiet feugiat tellus tempus imperdiet. Vestibulum
lacus ipsum, mollis ac hendrerit non, laoreet et nunc. Nam fringilla
metus dictum sapien cursus .

style.css

.yazi_icerik {
font-size:10pt;
padding-top:10px; margin-top:10px; /* Divi kaydırmak için üstten önce iç boşluk daha sonra ise dış boşluk verdik */
}

.reklam_468{
width:468px; height:68px;
margin-left:10px;
}

.reklam_468 img {
border:none; /* İE tarayıcısı için linki kaplayan mavi çerçeveyi yok eden kod */
}

index.html – Önizleme

index.html

style.css

.sayfalama li{
float:left;
border:solid 1px;
border-color:#ccc;
list-style-type:none;
margin-left:5px;
padding:5px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}

.sayfalama ul {
margin:0px 0px;
margin-left:-20px;
}

.sayfalama li a {
color:#225588;
}

Sağ taraf

index.html

Reklam

style.css


.sag_baslik {
background:url("images/reklam_baslik.png") no-repeat;
width:290px; height:40px;
margin-top:4px;
padding-left:5px; margin-left:-5px;
padding-top:5px;
}

index.html – Önizleme

index.html

Reklam
Kategori

style.css


.300_250_reklam {
width:300px; height:250px;
}

index.html – Önizleme

index.html

style.css


.kategoriler ul {
margin:0px 0px;
padding:0px 0px;
}
.kategoriler li{
list-style-type:none;
border-bottom:1px dotted #ccc; /* Dotted şeklinde,#ccc renk kodunda ve 1px büyüklüğünde çerçeve ekliyoruz*/
font-size:10pt;
margin-top:10px;
}

.kategoriler li a{
color:#000;
margin-left:20px;
text-decoration:none; /* Altı çizili olmasın */
}

.kategoriler li a:hover {
text-decoration:underline; /* Üstüne gelince Altı çizili olsun */
color:#0000FF;
}

/* Kategoriler divinin içinde strong görünüm stili */
.kategoriler strong{
color:#ccc;
font-weight:400;
}

7.Aşama: Alt taraf

Alt taraf tek olabildiği gibi yine özelleştirilebilir alanlar arasında yer alır.

index.html

Bu bölüme açıklama yazınız.

style.css


.kabartma {
width:920px;
height:57px;
background:url("images/alt.png") no-repeat;
margin:-5px auto;
}

.aciklama {
color:#fff;
font-size:10pt;
padding-top:25px;
text-align:center;
}

Author: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.