Site Bileşenlerinin ve Ana Sayfanın Tamamlanması
Bu bölümde site bileşenlerini ve ana sayfamızı tamamlayacağız. İlk olarak aşağıdaki düğme yardımı ile sayfamızda kullanacağımız görselleri indirin.
İndirdikten sonra bu görselleri projenizdeki Content > img klasörünün içine sürükle - bırak yöntemi ile yerleştirin.
Logo'nu ve Sosyal Medya İkonlarının Eklenmesi
Şimdi header'a logo ve sosyal medya ikonlarını yerleştireceğiz. style.css dosyasını açınız.
/* *** header *** */
header {
width: 960px;
height: 120px;
position: relative;
}
/* logo */
#logo {
width: 384px;
height: 120px;
position: relative;
background: url(/Content/img/logo.png) no-repeat center center;
}
/* social media */
#social-media {
width: 180px;
height: 48px;
position: absolute;
top: 20px;
right: 20px;
}
.social {
width: 48px;
height: 48px;
position: relative;
float: right;
margin-left: 10px;
background: orange; /* silinecek */
}
header etiketimin arkaplan rengini siliyorum ve bu etiketin altına #logo adlı bir ID tanımlıyorum. İçeriği ise kodlardaki gibi. Arkaplan görseli olarak logo.png dosyasını kullanıyoruz. Bu görsel biraz önce eklediğiniz resimlerden çağrılacak. no-repeat center center ile görseli div'in içerisinde yatay ve dikey eksende ortalıyorum ve tekrar edilmesini istemiyorum.
#logo seçicimin altına #social-media adlı bir element ekliyorum. Bu ise header elementimin içerisinde position: absolute; top: 20px; right: 20px; değerleri sayesinde sağ üst köşede yer alacak.
#social-media div'imin içinde ise .social adlı üç sınıf yer alacak. Bunlar sosyal medya ikonlarımızın olacağı elementler. float: right; ile bu sınıfları #social-media div'imin içinde sağa doğru hizalayacağım ve aralarında margin-left: 10px; ile 10'ar piksellik boşluk olacak. Arkaplan renkleri ise turuncu. Bunu daha sonra kaldıracağım.
Şimdi bu kodlarımı layout'umda kullanacağım.
<body>
<section id="container">
<header>
<div id="logo"></div>
<div id="social-media">
<div class="social"></div>
<div class="social"></div>
<div class="social"></div>
</div>
</header>
<nav></nav>
<section id="content">
@RenderBody()
</section>
<footer></footer>
</section>
</body>
Bir önceki bölümden farklı olarak sadece header elementinin içerisine #logo ve #social-media div'lerini ekledim. #social-media elementimin içerisine ise .social adlı üç sınıf ekledim.
Projemi çalıştırdığımda bu şekilde bir ekran görüntüsü elde edeceğim.
Şimdi .social arkaplan rengini siliyorum ve _Layout.cshtml adlı layout sayfamı açıyorum.
Content > img klasörümdeki sosyal medya ikonlarını .social adlı sınıfların içerisine sürükle - bırak yöntemi ile yerleştiriyorum. alt atıf değerlerini yazıyorum. alt atfı SEO (arama motoru optimizasyonu) için kritik bir öneme sahiptir. Bu yüzden ne tür bir resim eklerseniz ekleyin mutlaka alt değerleri ile birlikte kullanın.
Şimdi projemi tekrar çalıştırıyorum.
Bu şekilde bir görüntü elde etmiş olmalısınız.
Logo'ya ve Sosyal Medya İkonlarına Bağlantıların Verilmesi
Şimdi logomuza tıklandığında ziyaretçi ana sayfaya, sosyal medya ikonlarına tıklandığında ise ilgili sayfalara yönlendireceğiz.
<header>
<a href="/">
<div id="logo"></div>
</a>
<div id="social-media">
<a href="//facebook.com" target="_blank">
<div class="social">
<img src="~/Areas/web_tasarim2/Content/img/facebook.png" />
</div>
</a>
<a href="//twitter.com" target="_blank">
<div class="social">
<img src="~/Areas/web_tasarim2/Content/img/twitter.png" />
</div>
</a>
<a href="#" target="_blank">
<div class="social">
<img src="~/Areas/web_tasarim2/Content/img/googleplus.png" />
</div>
</a>
</div>
</header>
Elementleri kapsayacak bir şekilde <a> bağlantı etiketi tanımlıyorum.
#logo'ya tıklandığında href="/" adlı bağlantıya gidilecek. Bu bağlantı aynı zamanda ana sayfamız.
Sosyal medya ikonlarına tıklandığında ise sosyal medya sayfalarına gidilecek. Eğer sosyal medya sayfamız henüz hazır değilse bu bağlantılar için boş link'ler kullanabiliriz. Bunun için bağlantı adresinde # (diyez) ya da ? simgelerini kullanmalıyız. Bu şekilde kullanıcı bu link'e tıkladığında sayfanın başına dönecektir.
Sosyal medya ikonlarında target="_blank" atfını kullanmamızın sebebi ise bu sayfaların yeni bir sekmede açılmasını istememiz. Bu şekilde kullanıcıların sitemizden ayrılmalarını önlemiş oluyoruz.
Menünün Oluşturulması
Şimdi menümüzü oluşturacağız. İlk olarak nav ve #content elemanlarımın arkaplan rengini siliyorum.
/* *** nav *** */
nav {
width: 960px;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
}
.nav-item {
width: 191px;
height: 38px;
position: relative;
float: left;
border: 1px solid black;
border-left: 0;
background: royalblue;
color: white;
font-size: 16px;
}
nav seçicimin altına .nav-item adlı bir sınıf belirliyorum. Bu sınıf menümüzdeki bağlantılar olacak.
float: left ile menü elemanlarını nav'in içinde sola yaslayacağım.
Sol hariç kenar kalınlığı 1px siyah olacak. Arkaplan rengi ise mavi.
Metin rengi beyaz ve 16px olacak.
<nav>
<div class="nav-item">
<span>Ana Sayfa</span>
</div>
<div class="nav-item">
<span>Bize Dair</span>
</div>
<div class="nav-item">
<span>Referanslar</span>
</div>
<div class="nav-item">
<span>Çözümler</span>
</div>
<div class="nav-item" style="width: 192px; border-right: 0">
<span>İletişim</span>
</div>
</nav>
nav etiketinin içerisine .nav-item sınıflarını ekliyorum ve menü adlarını <span> etiketi içerisinde yazıyorum.
Sadece sonuncu menü elemanın sağ kenarlığını kaldırıyorum ve genişliğini 1px arttırıyorum. Bunu CSS'ten de yapabilirdim; fakat amaç değişikliği daha rahat görebilmeniz.
Şimdi projemi çalıştıyorum.
Menümüz de tamam. Bu şekilde bir görüntü elde etmiş olmalısınız. Menü bağlantılarını bir sonraki adımda alt sayfaları oluşturduğumuzda vereceğiz.
İçerik Alanının Oluşturulması
Şimdi ise #content div'imizin içerisini dolduralım. #content'in yükseklik değerini silin. Otomatik olarak kendi belirlenecektir.
/* *** content *** */
#content {
width: 920px;
padding: 20px;
position: relative;
text-align: justify;
}
#content h1 {
font-size: 18px;
text-align: center;
}
.img-left {
width: 260px;
float: left;
margin: 0 10px 10px 0;
}
#content seçicimizin özellikleri bu şekilde. Yüksekliğini sildim. 20px'lik bir iç boşluk verdim. Bu sebeple genişliğini diğer bileşenler gibi 960px yapmak yerine 920px olarak belirledim. Bunun sebebi 20px sağa ve 20px de sola iç boşluk vermemizden kaynaklanıyor.
(960px - 20px sağ - 20px sol = 920px)
#content'in içindeki başlığın özellikleri h1 kodlarının özelliği gibi olsun.
İçerikte kullanacağımız resmi sola yaslamak içinse .img-left adlı bir sınıf tanımlıyorum. float: left ile görsel sola yaslanacak. margin: 0 10px 10px 0 değeri ile sağa ve aşağı 10'ar piksel boşluk vereceğiz. Böylece resim ve içerik dip dibe gözükmeyecekler.
<section id="content">
@RenderBody()
</section>
Hatırlarsanız #content elementimizin içerisinde @RenderBody()'yi tanımlamıştık. Bu yüzden bu elemanın içeriğini layout'ta doldurmak yerine ana sayfada eklemeliyiz.
Views > home > Index.cshtml sayfasını açınız. Yani ana sayfamızı...
@{
ViewBag.Title = "Ana Sayfa";
Layout = "~/Areas/web_tasarim2/Views/Shared/_Layout.cshtml";
}
<h1>Ana Sayfa</h1>
<img src="/Content/img/resim.jpg" alt="resim açıklaması" class="img-left" />
<p>
Lorem ipsum dolor ...
</p>
<p>
Quisque diam mauris, bibendum sed elit s...
</p>
<p>
Sed lorem sapien, rutrum vel rhoncus in ...
</p>
<p>
Sed sed tempus nisl. Etiam viverra ....
</p>
<p>
Sed at nunc facilisis, vulputate ...
</p>
lipsum.org adresine gidiniz ve içeriğe mıcır yazılar ekleyin. Başlık ile mıcır yazılar arasına ise resim.jpg dosyasını ekleyin ve sınıfını img-left olarak belirleyin.
Projeyi çalıştırdığınızda böyle bir görüntü elde etmiş olmalısınız.
footer'ın Oluşturulması
Son olarak sitemizin bilgilerini yer aldığı footer alanını tamamlayacağız.
/* *** footer *** */
footer {
width: 960px;
height: 60px;
line-height: 60px;
text-align: center;
position: relative;
border-top: 1px solid black;
color: white;
background: royalblue;
}
Burada küçük bir değişiklik yapıyorum. Arkaplan rengini mavi ve metin rengini beyaz olarak belirledim.
<footer>
<small>2014 © Firma Adı | Tüm Hakları Saklıdır.</small>
</footer>
Layout sayfamdaki içeriğine ise <small> etiketi içerisinde site bilgilerini yazdım.
Projemi çalıştırdığımda ise böyle bir ekran görüntüsü elde edeceğim. Ana sayfamı bu şekilde tamamlamış oluyorum.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Üçüncü adımı tamamladınız. Bir sonraki bölümde alt sayfaların eklenmesi ve projenin tamamlanması konusuna değineceğiz.