ASP.NET MVC ‘de SİTE TASARIMI

ASP.NET MVC ‘de site tasarımı nasıl yapılır ASP.NET MVC' de web sayfa tasarımı yapılırken dikkat edilmesi gereken kurallar hakkında bilgi sahibi olacağız.
İlk olarak yeni bir site gelişmi, grafikelerin kullanımı ve sitenin içinde bulunan bütün elemanlarının nerede durması gerektiğinde meydana gelmiştir. Bunu son kullanıcı gözüyle açıklayacak olursak bak ve hisset olarak tanımlarız. Genelde yapılacak olan tasarımda kullanıcının alışa geldikleri dışına çıkılmamalıdır.
Herhangi bir kod yazmadan önce ASP.NET çerçevesinde yer alan özellikler göz önünde bulundurmalı, bu yüzden Microsoft tarafından zaten yapılmış çalışmalardan yararlanabilirsiniz. Bu bize büyük avantaj sağlamıştır. Burda bizim işimiz ise bu kodları kullanarak istediğimiz şekilde çok daha iyi bir site tasarımı yapmaktır. Bu kısımda Sitenin genel görsel düzeni ve bizim için çok yararlı bir özellik olan master page(layout) nasıl kullanılır onlar açıklanmaktadır. Bir çoğunuz için master page yeni bir şey değildir. Asp. Net 2.0 dan sonra çıkan versiyonlar bu master page ‘e sahiptir. Ve bu masterpage kullanmamız çok büyük değişikler yapmamızı gerektirmez.

Not=Masterpage Asp.net mvc ile birlikte layout olarak değiştirilmiştir.

İstekler

Kullanışı yüksek sade ve şık site tasarımını Asp. Net MVC nasıl entegre edilir onu öğreneceğiz. Bir çok geliştirici sitenin amacına dikkat etmeksizin kaynak kodu yazmaya başlar bu durum yanlıştır. Öncelikli amaç kullanıcılar için basit ama işlevselliği yüksek bir grafik uygulaması yapaktır.

İnternette Kullanıcıların Beklentileri

• Hız, hız ve daha fazla hız
• Sade ve tutarlı sayfalar
• Rahat kullanılabilirlik
• İçerik: "Content is the King"

• Her tarayıcıyla (browser) uyumluluk

Analiz

Site Tasarımı

Yukarıdaki bölümde problemleri tanımlamıştık bu bölümde ise bu problemleri ele alarak, teknik yapı ve genel şablon hakkında çalışacağız. Eğer tema ile uğraşmamak istiyorsanız Ücretsiz olarak Css ile yapılan temaları internetten kolaylıkla bulabilirsiniz.

Eğer çok daha gelişmiş bir site tasarımı istiyorsanız. TemplateMonster'ı(www.templatemonster.com) deneyebilirsiniz. Ya da bunların hepsinin dışında kendi temanızı oluşturabilirsiniz. Aşağıda ki birbirini takip eden uygulamalarla kendi temamıza başlayacağız.

• Düzgün bir layout ve tüm browserlarla uyum içerisinde olmalıdır.
• Her bir sayfa için kaynak kodunu kopyala yapıştırma(copy and paste) olmaksızın sitenin bütün sayfaları için kolay şık bir tema oluşturulmalıdır.
• Tüm kullanıcılara hitap eden, kullanıcılara yabancı gelmeyen sitedeki butonların tipleri ve yerleri çağdışı olamamalıdır örneğin ileri geri butonları her sitede olduğu gibi sol üstte olmalıdır.
• Web sitenizdeki bütün sayfalar ortak bir tasarıma sahip olamayabilir fakat ortak davranış sergilemek zorundadır

Tasarım da kullanılan uygulamalar

Asp. Net MVC'nin en önemli özeliklerden biri kod tekrarının bulunmamasıdır. Bu konuyu açıklamak gerekirse kodu aynı olan sayfaların bile kopyalama yapıştırma(copy and paste) olmadan aynı tasarıma sahip olabilmektedir. Şöyle ki genel öğeleri seçip tek yerden değiştirdiğimizde tüm sayfalarda ki bu öğeleri değiştirebilmemizi sağlanmaktadır. Dolayısıyla uygulamamızı yaparken bu Asp .NET MVC bize sağlamış olduğu bu özellikten faydalanacağız.

Asp.net mvc ile birlikte gelen yani kavramların başında kullanıcı arayüzlerini ayırabilmek gelmiştir. Kullanıcı arayüzleri ayırabildiğimiz için Ana makinada(server side) tarafından çalışacak kodlarla ilişkisinin kesilmesini sağlamış oldu. Ayrıca eski .aspx(.net 2.0,.net 3.0,.net 3.5) teknolojisinde ise code behind diye isimlendirdiğimiz gereksiz olaylardan(events) ve kodlardan kurtulmamıza olanak sağlamıştır.
View kısmında oluşturduğumuz kullanıcı arayüzleri ni etkileşimli biçimde kullanıcıdan aldığı komutları süzgeç diye tabir ettiğimiz controller kısmına iletmemizi sağlamıştır. Bu sayede müthiş bir ayırım işlemi gerçekleşmiştir. Yani herhangi bir şekilde bir kopyalama veya bir şekilde kodu değiştirmemize gerek kalmamıştır

Style sheet dosyalarında css in kullanımı

Stil dosyaları html etiketlerini içine alır ve id yada sınıfı referansa olarak kullanarak ayrı bir dosyada depolanır. Fakat karşımıza bazen HTML etiketlerinde karmaşık stil kullanımlarını aşağıdaki div örneği gibi görebiliriz.

<div style=”align: justify; color: red; background-color: yellow; font-size: 12px;”>some text</div>

Fakat böyle bir kullanımdan ziyade ayrı bir css dosyası oluşturmak kodlar üzerinde ki değişiklikler için bize avantaj sağlar. Bir css doyası oluşturduğunuz zaman yapmanız gerek HTML etiketlerine referans olması için vereceğiniz
dosya ismini class yada id olarak görevlendirmektir. Böylece bir css doysanızı farklı HTML sayfalrına referans olarak kullanabilirsiniz. Yani bir çok sayfa için aynı stil dosyasını kullanabilir örneğin tüm sayfalarda arka plan rengini tek bir değişiklikle halledebilirsiniz. Bunun için kullanılan stil dosyasına gidip gerekli değişikliği yapmanız yeterli olacaktır. Bu özellikleri ile css bizlere büyük zahmetlerden kurtarıp zaman kazancı sağlamaktadır.

Stillerin Html etiketlerine etkisini 3 şekilde gerçekleştirmektedir.

1. Sayfa içerisinde yerel olarak tanımlamak yani html etiketlerinin içinde tanımlamak.
   Yerel tanımlama örneği

<html >
<head > <title>Karayel Web Tasarım </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head>
<body>
<h1 style= “background-color:Red; border-width:2px; border-color:Black;”>
KARAYEL TASARIM</h1>
</body>

1. Global, yani tüm sayfa için, global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
   Global Tanımla Örneği

<html >
<head > <title>Karayel Web Tasarım </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666666;
}
.logo
{ background-color:Red;
width:100px;
height:100px;
border-width:2px;
border-color:Black;
}
#menu
{
background-color:White;
width:900px;
height:25px; }
</style> </head>
<body>
<div id="menu">Menü</di>
<div>Logo</di>
</body>
</html>

1. Bağlantılı, yani birden çok sayfa için, bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar. Yapılması gereken bir tane css dosyası oluşturup aşağıdaki örnekte olduğu gibi linkini oraya yazmalıyız

Bağlantılı Tanımlama Örneği

<html >
<head > <title>Karayel Web Tasarım </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="/Content/Css/modules.css" rel="stylesheet" type="text/css" />
<link href="/Content/Css/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Tercih edilen senek ise 3. Madde olmalıdır. Çünkü yapacağımız uygulama birden fazla sayfada etki edeceği için bir veya iki tane .css dosyası oluşturup büyük bir zahmetten kurtuluruz.

Neden tasarımda DİV kullanmalıyız ?

Web tasarımcılar sayfalarını düzenlerken, sayfalarına bazı öğeleri eklerken tablolardan yararlanırlar. Aslında bu CSS geliştirilmeden önce temel bir standarttı ama şimdi bile bir çok tasarımcı buna devam etmektedir. Bununla beraber W3C
nin yetkilileri bu kullanım tarzının ekran okuyucuları(screen reader) için bazı sorunlar oluşturulduğunu söylüyor.

Diğer bir deyişle, tablolar belirli bir verinin gösteriminde kullanılabilir, çizelgeler gibi ancak tüm bir sayfanın tablolar kullanılarak tasarlanması doğru değildir. Sayfa tasarımı için CSS'in temel özlleiklerini kullanmalı ve bunları <style> kodu
ile ayırabilir yada ayrı bir CSS dosyasında tutabilir.

Bu önerilerin temel sebepleri ise şunlardır:

• Eğer siteniz de DİV kullanırsanız ve bunu ayrı bir CSS dosyasına tanımlayıp yazarsanız, ileride bunu kullanacağınız
  her sayfa için tekrar tekrar tanımlamaya gerek kalmaz. Bu sayede sayfanızı daha hızlı ve kolay geliştirip düzenleme
  nizi sağlar.
• Son kullanıcı siteyi çok daha hızlı görüntüler. Tıpkı stil dosyalarının kullanıcı tarafından bir kere indirilip sonrasında cache bellekten kullanılması gibi. Eğer sayfa tasarımında tablolar kullanılır ise kullanıcı her sayfa için ayrı bir yükleme(indirme) yapar. Bu da daha fazla byte ve daha fazla bant genişliği demektir. Genelde CSS %50 avantaj
  sağlar. Daha az byte ve bant genişliği barındırma hizmeti aldığımız şirkete daha az ödeme yapmamız anlamına gelir. Bu büyük şirketler için daha da önemlidir.
• Ekran okuyucuları sayfadaki yazıları ve içeriği görme engelli kullanıcılar için okurlar ama sayfa tasarımında tablo
  kullanıldıysa bu iş zorlaşır. Bu nedenle sayfa da tablo kullanılırsa ulaşacağı kitle azalmış olur.
• CSS stilleri ve DİV ler tablolara göre daha kolay düzenlenebilme özelliğine sahiptir. Örneğin sahip olduğunuz sitede
  birden fazla CSS stil dosyanız var ve bunlar ayrı tasarımlara sahipler. Yerleşimleri yazı, fontları ve renkleri farklı olsun. Bu farklı CSS leri de sayfanızda bir link ile kullanıma sunabilir ve tek bir tıklama ile tüm tasarımınızı değiştirebilirsiniz. Ya da CSS dosyasına gidip yapacağınız değişiklik tüm sitenizde uygulayabilirsiniz. Ancak tablolar da bu işlemleri yapmak için çok daha fazla zahmete girmek gerekir.
• CSS yazıcılar için de harika bir özelliktir. Bazı kullanıcılar sitenizi yazdırmak isteyebilir ve menü yada kullanıcı girişlerini yazdırmak istemezler. Siteniz siyah bir tabana sahipse bu da yazdırmak için dezavantaj olur. Ama
  bir link ile yazdırmak için düzenlenmiş ayrı bir sayfa tasarımını kolayca oluşturup kullanıcıya sunabiliriz.
• CSS farklı cihazlar için yeniden bir HTML tasarımına gerek olmayacak düzenlemeleri, sınıfları da barındırır.
  Div ile kodlama yapılırken yazılan kodlar CSS yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece CSS kodu değiştirilerek elde edilebilir. Örneğin mobile araçlar için handle CSS dosyası kullanılır.

ASP.NET MVC MASTER PAGE ( Layout )

Asp.net form uygulamasında yer alan master page modeli Asp.net MVC ‘ninde bünyesinde bulunmaktadır. Asp.net mvc'de tasarlayacağımız sayfanın master page olup olmaması küçük bir işlemle halledilebilmektedir. Asp.net Mvc'de Razor view engine sayesinde tasarlayacağımız sitenin master page olup olmaması belirlenmektedir. Master page'i kısaca açıklamak gerekirse ASP.Net 2.0 ile birlikte gelen yeni bir özellik olan master page tanımlandığı temel sınıftan diğer sayfalarla paylaşılabilir ve diğer sayfalar da master page özelliğinden yararlanabilir örneğin başlık, menü, üste veya alt bilgiler gibi. Master page tek bir dosya içerisinde kodları düzenli bir şekilde tutar ve diğer tüm görsel içerik sayfaları master page ten türetilir. Yani master page tüm sitemizin temelini oluşturmaktadır. Aslında şekil-1 master page özetlemektedir.

Şekil –1

Asp.net 2.0 ve sonrası için master page.aspx adı yerine _layout.cshtml olarak değiştirilmiştir. Şimdi sayfamızı Asp.net mvc ‘de nasıl master page seçeriz onu öğrenelim. Öncelikle bir asp.net mvc 3.0 projesi oluşturulur bir tane sayfa controller eklenir bu sayfa controller'ın içine bir tane actionResult fonksiyonu eklenir.Dha sonra bu acrionResult fonkaiyonuna bir view ekleirken karşımıza gelen pencerede Use a Layout or master page kısmına tik koyarsak oluşturduğumuz sayfa master page'li bir sayfa oluşur Eğer koymazsak master page'siz bir sayfa oluşur(şekil-2)

Şekil –2

Asp.NET MVC ile Dinamik Masterpage ( Layout )Seçimi

Teknolojinin hızla geliştiği dünyamızda hemen hemen tüm işlerimizi internet aracılığıyla yapmaktayız. Yüksek fonksiyonlu mobil cihazların üretilmesiyle internete istediğimiz yerden girebiliyoruz. Fakat mobil cihazların ekran boyutları masaüstü ve dizüstü bilgisayar ekranlarına göre küçük olmasından dolayı ve bazı telefonlarda hala flash ve jquery desteğinin bulunmamasıdır. Durum böyle olunca mobil cihazlarımızla web sitelerine giriş yaptığımızda girdiğimiz sitenin tasarımında bozulmalar olmaktadır Bu nedenle biz web geliştiriciler olarak bu sorunu çözmek mecburiyetindeyiz.

Mobile cihazların sorununu şu şekilde çözülebilmektedir. Sitemiz için iki tane tasarım yaparız tasarımlardan birincisi masaüstü bilgisayarlardan giriş yapıldığında göterilir. İkinci yaptığımız tasarım ise mobil cihazlardan giriş yapıldığında gösterilir. (şekil-3)

Şekil –3

Peki bu kontrol nasıl sağlanacaktır. Bu aşamada her zamanki gibi bize Microsoft bize yardımcı olmaktadır. Küçük bir kod sayesinde sitede hangi tasarımın götererileceği belirlenmektedir. Bu kod ise viewstart.cshtml bölümüne yazılmaktadır ve bu kod sayesinde sorunumuz çözülmektedir.(şekil-4)

Şekil –4

Menü Oluşturma Sistemi

Menü oluştururken dikkat edilmesi gereken iki önemli madde vardır. Bunlardan birincisi site ziyaretçisinin beğeneceği bir menü oluşturmak ve menüyü kolayca değiştirebilecek bir sistem hazırlamaktır. Oluşturacağımız menü master page'in -içerisinde yer alacaksa tek bir yerden değiştirilebilir olmalıdır.

Basit Bir Menü Tasarlamak

Menü işlemleri Html.Actionlink metodu kullanarak yapılabilmektedir. Bu metoduda global.asax dosyasındaki routes göre link isim alır.

<div class="menu">
<li><a href="@Url.Action("Anasayfa")">ANASAYFA</a></li>
<li><a href="@Url.Action("ETicaret")">E-TİCARET</a></li>
<li><a href="@Url.Action("WebTasarim")">WEB TASARIM</a></li>
<li><a href="@Url.Action("Referanslar")">REFERANSLAR</a></li>
<li><a href="@Url.Action("Hakkimizda")">HAKKIMIZDA</a></li>
<li><a href="@Url.Action("Iletisim")">İLETİŞİM</a></li>
</ul>
</div>

Linkleri yukarıdaki gibi gibi yazdığımızda kaynak kodda aşağıdaki gibi gözükecektir

<div class="menu">
<li><a href="">ANASAYFA</a></li>
<li><a href="/eticaret.html ">E-TİCARET</a></li>
<li><a href="/webtasarim.html ">WEB TASARIM</a></li>
<li><a href="/referanslar.html ">REFERANSLAR</a></li>
<li><a href="/hakkimizda.html ">HAKKIMIZDA</a></li>
<li><a href="/iletisim.html ">İLETİŞİM</a></li>
</ul>
</div>

Global asax ayarlamaları

routes.MapRoute(
"Anasayfa",
" ", new { controller = "Sayfa", action = "Anasayfa" }
);
routes.MapRoute(
"ETicaret",
"eticaret.html",
new { controller = "Sayfa", action = "ETicaret" }
);
routes.MapRoute(
"WebTasarim",
"webtasarim.html",
new { controller = "Sayfa", action = "WebTasarim" }
);
routes.MapRoute(
"Hakkimizda",
"hakkimizda.html",
new { controller = "Sayfa", action = "Hakkimizda" }
);
routes.MapRoute(
"Referanslar",
"referanslar.html",
new { controller = "Sayfa", action = "Referanslar" }
);
routes.MapRoute(
"Iletisim",
"iletisim.html", new { controller = "Sayfa", action = "Iletisim" } );

Gördüğünüz gibi Asp.net Mvc'de hem insanlar tarafından okunabilen hem de kolaylıkla bir buton tanımlanabilen menü yapmak oldukça kolaydır. Eğer bir buton daha eklemek isterseniz global asax'a yenibir güzergah oluşturmanız yeterlidir.

Uygulama

Bu noktada web sitesinin tasarımını nasıl yaparım neler kullanarak yapabilirim düşüncesinde ziyade web site tasarımını yapmaya neren başlamalıyım fikri hakim olmalıdır. Bunların hepsinden önce tasarlayacağınız sitenin photoshop veya paint.net gibi graik uygulamalalı programları kullanarak mock-up oluşturulmalıdır. Öncelik web sitenizde bulunmasını istediğiniz fotoğrafları .gif .jpg ve .png şeklide oluşturulmalı kod yazma işlemi ileri ki aşamaya bırakılmalıdır.

Site Tasarımını oluşturma

Site tasarımı yapmak zor değildir. Ancak öncelikle bir resimli mock-up'a sahip olmalısınız. Site tasarımı oluştururken vazgeçilmez temel öğeler site de bulunmak zorudadır. Temel olarak logo ve diğer grafikler div kullnarak yapılmalı onları da html sayfasına konulmalıdır. Hata işleri bu kadar zorlaştırmadan beğendiğiniz siteyi ücretsiz olarak Free CSS Templates sitesinden indirebilirsiniz.(şekil-5)

Şekil –5

İyi bir temiz css sitesi geliştirmek için tarayıcılar dikkate alınmalıdır. Tarayıcılar kod kısmını baştan aşağıya kadar anlayabildikleri siteleri sevmektedir. Bu yüzden sitenizi tasarlarken en doğal ve anlaşılabilir komutları kullanmamız gerekmektedir. Sitemizi tasarlarken div kullanacağımız için divler hakkında aşağıdaki gibi genel bir bilgiye sahip olmanız iyidir: İçerik Altbilgi Yasal bilgiler Linkler

• Üst
  1. Logo
  2. Menü

• Sayfa(Ana Gövde olarak)

1. İçerik

2. Kenar Çubuğu

• Altbilgi
  1. Yasal bilgiler
  2. Linkler

Şekil –6

Layout.cshml deki kodlar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Karayel Web Tasarım / @Html.Encode(ViewData["SayfaBaslik"]) </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
@RenderSection("TitleContent", false)
<link href="/Content/Css/modules.css" rel="stylesheet" type="text/css" />
<link href="/Content/Css/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="/">Karayel Tasarım</a></h1>
<h2><a href="/">ASP.NET MVC-3 CMS & ETicaret</a></h2>
</div>
<div id="menu">
<ul>
<li>@Html.ActionLink("Ana Sayfa", "Index", "AnaSayfa") </li>
<li>@Html.ActionLink("Bilgilendirme", "Index", "Bilgilendirme")</li>
<li>@Html.ActionLink("Anketler", "Index", "Anket") </li>
<li>@Html.ActionLink("Forum", "Index", "Forum") </li>
<li>@Html.ActionLink("Mağaza", "Index", "ETicaret")</li>
</ul>
</div>
</div>
<div id="page">
<div id="content">
<h1>@Html.Encode(ViewData["SayfaBaslik"]) </h1>
@RenderBody()
</div>
<!-- end content -->
<div id="sidebar">
<div id="account">
<h2>Hesaplar</h2>
<div>
<ul>
@{ if (Context.User != null && Context.User.Identity != null && Context.User.Identity.IsAuthenticated) {
<li>Hoşgeldin @Context.User.Identity.Name </li>
<li>@Html.ActionLink("Parola Değiştir", "ParolaDegistir", "Kullanici") </li>
<li>@Html.ActionLink("Profil Bilgilerim", "KullaniciProfili", "Kullanici") </li>
<li>@Html.ActionLink("Sepet", "SepetGoruntule", "ETicaret") </li>
<li>@Html.ActionLink("Çıkış", "Cikis", "Kullanici") </li>
}
else
{
<li>@Html.ActionLink("Giriş", "Giris", "Kullanici") </li>
<li>@Html.ActionLink("Sepet", "SepetGoruntule", "ETicaret") </li>
}
}
</ul>
</div>
</div>
@RenderSection("SidebarContent", false)
@{
if (Roles.IsUserInRole("Admin"))
{
<div id="admin">
<h2>Yönetici</h2>
<div>
<ul>
<li>@Html.ActionLink("Kullanıcı Yönetimi", "KullaniciYonetimi", "Kullanici")</li>
<li>@Html.ActionLink("Rol Yönetimi", "KullaniciRolYonet", "Kullanici")</li>
<li><a href="@Url.Action("BilgilendirmeYonet", "Bilgilendirme") ">Bilgilendirme</a></li>
<li><a href="@Url.Action("AnketYonet", "Anket") ">Anketler</a></li>
<li><a href="@Url.Action("ForumYonet", "Forum") ">Forum</a></li>
<li><a href="@Url.Action("MagazaYonet", "ETicaret") ">Mağaza Yönetimi</a></li>
</ul>
</div>
</div>
}
}
<div id="current-poll">
<h2>Güncel Anket</h2>
<div>
</div>
</div>
<div id="news">
<h2>Haberler &amp; Olaylar</h2>
<div>
<ul>
<li>
<h3>01 Kasım 2010</h3>
<p><a href="#">Banko iddaa kuponları ilk versiyonu release oldu...</a></p>
</li>
<li>
<h3>20 Ekim 2010</h3>
<p><a href="#">Proje test aşaması tamamlandı.</a></p>
</li>
<li>
<h3>01 Ekim 2010</h3>
<p><a href="#">Analiz için yeni veriler girilmeye başlandı...</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<div id="footer">
<p>ASP.NET MVC Türkçe Bilgi Paylaşım Platformu</p>
<p><a href="http://www.karayeltasarim.com">KARAYEL TASARIM</a> </p>
<p><a href="http://www.aspmvcnet.com/">ASP.NET MVC ile Tüm Paylaşımlarımızı Bulabileceğiniz Bloğumuz</a> </p>
<p><a href="http://www.csharpkitabi.com/">C# ile Tüm Paylaşımlarımızı Bulabileceğiniz Bloğumuz</a> </p>
<p>VS2010 & .NET 4.0 & ASP.NET MVC 3 & SQL-2008 & EntityFrameWork 4.0 </p>
</div>
<script type="text/javascript" src="/Content/Scripts/jquery-1.4.1.js"> </script>
<script type="text/javascript" src="/Content/Scripts/global.js"></script>
<script type="text/javascript" src="/Content/Scripts/anket.js" ></script>
@RenderSection("ScriptContent", false)
</body>
</html>

Sitenizin performasını aşağıdaki web sitelerinden tespit edebilirsiniz

1. http://developer.yahoo.com/performance/
2. http://developer.yahoo.com/performance/rules.html

Style Sheet oluşturma

Öncelikle style sheet dosyası oluşturulmalıdır. Bu dosyanın ismi site.css şeklide ki oluşturulmalıdır bu dosya mvc'nin içinde ~/Content/styles/site.css şeklinde kaydedilmelidir. Bu css dosyası layout .cshtml elemanlarını biçimlendirmek için kullanılmaktadır. İleride sitemiz için gerekli bir modules.css adında bir bi stil dosyası oluşturulacaktır bu css dosyası da linklerle ulaştığımız örneğin anket bilgilendirme sayfası gibi veya bilgilendirme,hata mesajları gibi sayfaların veya divlerin still özelliklerini tutmaktadır.

Site.css dosyasının içeriği aşağıdaki gibi yapılmalıdır.

body {
margin: 0;
padding: 0;
background: #FFFFFF url(../../content/images/centerstage/img01.gif) repeat-x;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #3F586B;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 167%;
}
p, ol, ul {
line-height: 170%;
}
p {
}
ol {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
#menu {
width: 600px;
float: right;
padding-top: 0;
}
#menu ul {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
margin: 0;
padding: 0;
}
#menu a
{
padding: 0 15px;
text-decoration: none;
font-size: 136%;
font-weight: bold;
color: white;
}
#menu a:hover {
text-decoration: underline;
}
#footer {
height: 130px;
padding: 5px ;
margin : 0px;
background: #FFFFFF url(../../content/images/centerstage/img01.gif) repeat-x;
border-top: 5px solid #4C747E;

Böylecilikle Site.css dosyasını tamamlamış bulunmaktayız. Şimdide Modules.css dosyasını oluşturmaya başlayalım. Bu css dosyasında bilgi mesajlarının görünüm şekillerini oluşrulacaktır. Genel olarak hata mesajını, bilgfi mesajı, uyarı mesajı,tamamlandı gibi bir çok mesajın zaten insanların kafasında tasarlamıştır bizde bu hata mesajlarını oluştururken bunlarının dışına çıkmamalıyız.(şekil-7)

Şekil –7

.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('/content/images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image: url('/content/images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('/content/images/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('/content/images/error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('/content/images/validation.png');
}

Özet

Kitabımızın ikinci bölümünde temel olarak kullanıcı arayüz tasarımının nasıl olcağına karar verildi. Daha sonra Asp.Net MVC framework ile birlikte photoshop veya yardımcı programlar da hazırlanmış olan sitemiz oluşturmaya başlandı. Son olarak ise tek bir dosyadan düzenlenebilen sitemizin grafiklerini ve elemanları html ve css kullanarak projemize açılış sayfasını oluşturuldu. Diğer bölümlerde ise ara ara view katmanı anlatılacak olsa view katmanını tasarlamak kolay olduğu için Models ve Controller'ı katmanları üzerinde durulacaktır.