Anasayfa

ASP.NET

Google anasayfa tasarımı PNG to CSS - Ders 1
Facebookta Paylaş

Google anasayfa tasarımı PNG to CSS - Ders 1

Asp.Net ile web sitesi yapımı konumuzda bahsettiğimiz Asp.Net ile web sitesi yapma dersimizde yapacağımız örnek site olan Google 'ın tasarımını HTML / CSS 'e döküyor olacağız bu konumuzda. İlk olarak Fireworks ile yaptığımız PNG tasarımı HTML / CSS'e döküyor olacağız. Daha sonra Photoshop ile tasarlanmış tasarımı PSD to CSS yaparak HTML / CSS 'e döküyor olacağız.

Öncelikle PNG to CSS yapacağımız tasarım dosyasını ediniyoruz. HTML / CSS'e dökeceğimiz PNG tasarımı daha önce Web Sitesi Yapımı, Google PSD ve PNG Web Tasarımları konumuzda paylaşmıştım. Dosyayı indirmeyenler var ise ilk önce bu konumuzdan dosyaları edinebilirler.

PNG to CSS işleminde ,PNG tasarımı açabilmek için Adobe Fireworks programını ve Html / CSS işlemleri içinde Notepad ++ programlarını kullanıyor olacağım. Bu programları ders öncesinde edinmenizde yarar var.

Etkileşimli gidebilmek için klasör yapınızın aşağıdaki gibi benim kullandığım şekilde yapmanızda fayda var.

google-html klasörü genel klasörümüz, içerisinde css klasörü, images klasörü ve index.html dosyasını barındırıyor. css klasörünün içerisinde ise google.css dosyamız mevcut. Sitemizin resimlerini images klasöründe saklıyor olacağız. google.css ve index.html dosyaları şu an için boş klasik html ve css dosyalarıdır. Konumuzun devamında html ve css dosyalarını dolurarak tasarımımızı html csse gökmüş olacağız.

Klasör yapısını da gösterdikten sonra şimdi indirdiğiniz png dosyasını Fireworks ile açın ve artık adım adım başlayalım. Dosyayı açtığınızda aşağıdaki gibi google'ın sade ve basit tasarımını göreceksiniz.

İlk olarak logoyu aşağıdaki araçları kullanarak alalım ve images klasörümüze kaydedelim.

Bu kısımda eğer tasarımda logoyu ayrı bir layerda çizmemiş olsaydım logoyu alabilmek için resimde de görülen Marquee Tool  kullanacaktık. Marquee Tool ile logonun bulunduğu alanı kesip/kopyalayıp logoyu alacaktır. Fakat indirdiğiniz dosya png tasarım olduğunda logoyu Marquee Tool ile uğraşmadan alabilirsiniz. Bunun için logonun üzerine bir kere tıklayarak resimdeki gibi seçili hale gelmesini sağlayın. Logoyu seçili hale getirdikten sonra CTRL + C  tuş kombinasyonu ile logoyu kopyalayıp, CTRL + N tuş kombinasyonu ile yeni çalışma dosyası oluşturun. Eğer logoyu başarılı bir şekilde seçip kopyalayabildiyseniz yeni oluşturacağımız çalışma dosyası tam logo boyutlarında olacaktır. Yeni çalışma dosyasındaki alana bir kere tıkladıktan CTRL + V kombinasyonu ile kopyaladığımız logoyu yapıştırıyoruz. 

Bu işlemlerden sonra yeni dosyamızda üst menüden File > Export Wizard > Continue > Continue > Exit   adımlarından sonra açılan pencerede Format Png32 olacak şekilde seçip Export tuşu ile oluşturduğumuz klasörlerden imagesin için logo.png adıyla kaydediyoruz.

Logomuzu kaydettik, şimdi html sayfamıza ekleyelim ve cssimizi yazalım.

index.html ve google.css dosyalarımızı notepad++ ile açıyoruz. Dosyalarımız yoksa aşağıdaki gibi boş haliyle oluşturuyoruz.

index.html

<html>

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

<body>
 
</body>
 
</html>

Link rel kodu ile html sayfamızda css klasöründeki google.css dosyasını kullanacağımızı belirttik.

google.css

body {margin:0;padding:0;background:#fff;}
a {text-decoration:none;}
img {border:none;}

css dosyamızda linklerin altı çizili olmasın, resimlerde kenarlık olmasın ve sayfamızın arka planı beyaz olsun genel tanımlamalarımızı yaptık.

Logomuzu eklemeden önce logonun sayfamızın neresinde olacağını belirlemek için fireworksda logonun sağdan,soldan,yukardan uzaklıklarını buluyor olacağız. Bu tasarımda logo ortada olacağı, yukardan yüksekliğini bulmamız yeterli olacaktır. Ortalama işini css ile hallediyor olacağız. Sayfanın başında logunun başladığı alana kadar olan yüksekliği logonun margin-top 'unu verecektir.

Rectangle tool ile sayfa başından logonun başladığı kısıma kadar kısma bir dikdörtgen çizip yüksekliğini alarak margin-top değerini öğrenmiş oluruz. Daha sonra çizdiğimiz dikdörtgeni sileceğiz. 

Şimdi gelelim bu öğrendiklerimizle logoyu sayfaya eklemeye;

Css dosyamızda aşağıdaki gibi logo id mizi tanımlayalım.

google.css
 
body {margin:0;padding:0;background:#fff;}
a {text-decoration:none;}
img {border:none;}
 
#logo {width:275px;height:93px;background:url(../images/logo.png) no-repeat;margin:0 auto;display:block;margin-top:174px;}

margin:0 auto; komutu ile logonun sağdan ve soldan sayfanın ortasında olmasını sağladık.
margin-top değeri sayfa başından aldığımız yükseksik değerimiz.
width ve height komutları da logomuzun genişlik ve uzunluk değerleri.


index.html

<html>

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

<body>
<div id="logo"></div>
</body>
 
</html>

Oluşturduğumuz logo id sini index.html dosyamızda bir divin id özelliğine verip, dosyalarımızı kaydedelim. Şimdi index.html dosyamızı çift tıklayıp açtığımızda logonun eklendiğini göreceksiniz.

Bu anlatımı burda bitiriyorum. Başlangıç konumuz olduğu için, çok ince detaylara kadar girdim. Konunun devamında burda anlatılanları bir daha bu kadar detaylandırmayacağım için konuyu dikkatli takip etmenizi öneririm.

Sonraki derste de textbox, butonlar ve footerı ekleyerek Google anasayfa tasarımını Html / CSS 'e dökme işlemini sonlandırmış olacağız. 

 

 

04 Aralık 2013 15:46 Kategori :ASP.NET4732
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.