Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
Tasarladığımız Blog Sitesinin Psd'sini Html'e Çevirme

Merhaba Arkadaşlar,

Önceki derslerimizde Photoshop ile blog site tasarlamayı görmüştük. Bugün Tasarımımızın banner kısmının css ve html kodlamasını yapmayı öğreneceğiz.

Arkadaşlar css ile kodlayama başlamadan önce sitemizi kaç parça halinde düşünmeliyiz buna karar vermemiz gerekiyor. öncellikle yapmış olduğumuz tasarıma tekrar bi bakalım. 

Blog Sayfamızı Kodlarken Sıkıntı yaşamamak için, yada daha rahat kodlamak için doğru şekilde parçalara ayırmamız önemlidir. Biz blog sayfamızı aşağıdaki şekilde bölümlere ayırarak kodlayacağız.

Üst Mavi alanımız, banner alanı olacak, altında bulunan beyaz alan menü alanımız. Banner alanımızı ikiye bölmemiz gerekecek çünkü sol tarafta logo sağ tarafta ise facebook, twitter vs iconlarım bulunacak. Şimdi sözlü olarak anlattığımız bu kısmı koda dökelim;

<div id="banneralaniarka">
<div id="banneralani">
<div id="bannersol"><img src="images/logo.png" width="245" height="94" /></div>
<div id="bannersag">
<div class="logo"><img src="images/face.png" width="43" height="43" /></div>
<div class="logo"><img src="images/twitter.png" width="42" height="42" /></div>
<div class="logo"><img src="images/google.png" width="41" height="41" /></div>
</div>


</div>
</div>

1-Görülüdüğü gibi en alt div 'banneralaniarka'dır bu div ile banner'a mavi rengini vereceğiz ve sayfa genişliğini ne olursa olsun otomatik olarak mavi ile dolduracak

2- banneralaniarka>banneralani divi ise logo ve sosyal paylaşım siteleri iconlarını içine alacak belirli bir genişlik ve yüksekliğe sahip alanım olaracak.

3- banneralaniarka>banneralani> içinde bulunan banner sol ve banner sağ alanlarıma logo ve iconlarımı getireceğiz. 

şimdi bahsettiğimiz işlemleri css ile gerçekleştirelim.

body {
	margin-left: 0px; /*sayfamızın kenar boşluklarını alıyoruz */
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #91dcff;
	font-family: Tahoma;  /*sayfamızda tüm yazı tiplerine tek tek font seçmemek için burda fontu ve boyutunu tanımlıyoruz. */
	font-size: 14px;
}

#banneralaniarka {
	height: 94px; /*arka mavi alanımızın yüksekliği */
	width: auto; /* bu alana bi genişlik tanımlamıyoruz auto diyerek tüm ekran boyutlarına tam sayfa gelmesini istiyoruz, yani mavi alanımızın uzamasını istiyoruz*/
	margin-right: auto; /*mavi alalanımızın uzaması için sol ve sag boşlukları auto olmalı*/
	margin-left: auto;
	
	background-color: #006c90; /* psd den aldığımız renk kodu*/
}
#banneralaniarka #banneralani {
	height: 94px; 
	width: 950px; /*logo ve iconlarımın bulunduğu divin toplam genişliği*/
	margin-right: auto;
	margin-left: auto;
}


#bannersol {
	float: left; /* logo alanımın solda olması için */
	height: 94px;
	width: 245px;
}
#bannersag {
	float: right; /* logo solda ise iconlarım sağda :) */
	height: 94px;
	width: 210px;
}
#bannersag .logo { /*sosyal medya iconlarım için tanımladığım class */
	height: 69px;
	width: 40px;
	float: left;
	padding-top: 25px; 
	padding-right: 15px;
	padding-left: 15px;
	opacity: 0.7; /* resimlerimin ilk halinin opacity değeri.*/
	display: block;
	
}#bannersag .logo:hover { /*sosyal medya iconlarım için tanımladığım classın hover  */
	
	opacity: 1.0; /* .logo da opacity 0.7 idi üstüne gelince 1.0 olmasını istedik. */
}

Dikkat etmemiz gereken noktalardan birtaneside şu, iconlar 3 tane olmasına ragmen üçü için bir class tanımladım ve bunların divlerine aynı classı verdim, Float:left verdiğimiz için hepsi yanyana sıralanmış oldu. Ayrıca bu .logo classıma background vermiş olsaydım bu classı tanımladığım tüm divlerde aynı icon olacaktı, biz divlere background koymak yerine divlerin içlerine resimleri insert-image diyerek ekledik. (Verdiğim html ve css kodlarını yazdığınız zaman icon dosyaları olmadığı görünmeyecektir. resimlerinizi kendiniz ekleyiniz.)

Gelelim Menü kısmına, menü kısmı banner ile aşağı yukarı aynı mantıkta. bi menü alanım olacak ve bunu ikiye bölüp menü alanları kısmımı ve arama kısmımı oluştaracağım, hemen html kodlarına bakalım;

<div id="menualan">
<div id="menusol">

<ul>

<li><a href="#"> Anasayfa</a></li>
<li><a href="#"> Hakkımızda</a></li>
<li><a href="#"> Tasarımlarım</a></li>
<li><a href="#"> Makalelerim</a></li>
<li><a href="#"> Bildiklerimiz.Net</a></li>
<li><a href="#"> İletişim</a></li>
</ul>
</div>

<div id="menusag">
<div id="arama"><input name="" class="aramakismi"type="text" /></div>
<div id="buton"><input name="" class="butonkismi" type="button" /></div>

</div>
</div>

Gördüğünüz gibi  id=menualan olan divimizi ikiye böldük menüsol ve menüsağ divleri ile menü sola menümüzü, menü sağ kısımına ise arama kutumuzu vs ekledik.

#menualan {
	height: 35px;
	width: 950px;
	background-color: #FFF;
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 3px; /* beyaz alanımızın altında ki mavi çizgimizin yüksekliği */
	border-bottom-style: solid;/* çizgi olarak gelmesi için */
	border-bottom-color: #045a76; /* renk kodu*/
}

#menualan ul {
	margin: 0px;
	padding: 0px;
}
#menualan ul li {
	list-style-type: none;
	float: left;
}
#menualan ul li a {
	padding-right: 15px;
	padding-left: 15px;
	display: block;
	text-align: center;
	height: 35px;
	line-height: 35px;
	text-decoration: none;
	color: #006c90;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #ececec;
}
#menualan ul li a:hover {
	background-color:#045a76;
	color: #FFF;
}

#menualan #menusol {
	float: left;
	width: 650px;
}

#menualan #menusag {
	float: right;
	width: 300;
	margin-top: 5px;
}
#menualan #menusag #arama {
	float: left;
	overflow: hidden;
	width: 185px;
	margin-right: 3px;
}
#menualan #menusag #buton {
	float: right;
	height: 26px;
	width: 26px;
	margin-right: 5px;
}
#menualan #menusag #arama .aramakismi {
	height: 24px;
	margin-right: 3px;
	width: 180px;
	background-color: #ececec;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
#menualan #menusag #buton .butonkismi {
	background-image: url(images/araicon.png);
	height: 26px;
	width: 26px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-right: 5px;
	overflow: hidden;
}

arama kutusunun text kısmını insert-form-text field diyerek ekledik ve class tanımlayıp istediğimiz renk boyut ve özellikleri verdik aynı şekilde arama butonumuz içinde aynı şekilde insert-form-button diyerek butonumuzu ekledik class tanımlayıp backgrounda iconumu verdim.

Bir sonraki dersimizde psd mizi html'e çevirmeye devam edeceğiz ve haber alanı oluşturmayı göreceğiz, umarım yararlı olmuştur. 

İyi çalışmalar dilerim.

Çalışmayın html halini indirmek için tıklayınız.

Blog Tasarım Psd Dosyasını İndirmek İçin Tıklayınız.

Sosyal Hesabında Paylaş

3188 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.