ASP.NET Master Page Kullanımı

04 Nis 2012 Yorum bırakın

ASP.NET Master Page Kullanımı

Merhaba arkadaşlar geçen gün okulda ASP.NET’de Master Page kullanımından bahsettim. Master Page mantığını gösterebilmek amacıyla çok basit bir tasarım üzerinden anlattım konuyu. Bu konuyu hem sınıf arkadaşlarımın takıldıkları yerde okumaları için hemde ziyaretçilerimin yararlanması için burada anlatmaya karar verdim. Derste anlattığımın aynısını anlatacağım, anlatımlarda resimlerde bulunacak. Sitenin son hali aşağıda;

İlk önce Visual Studio yada Web Developer programlarından birini açıyoruz ve New Project > ASP.NET Empty Web Site Seçiyoruz.

Projemizi oluşturduktan sonra öncelikli işimiz Master Page oluşturmak. Bunun için üst menüden Web Site > Add New İtem ‘ dan Master Page seçip Add diyoruz.

Master Page hazır. <Body> tagı arasındaki kodları silin. Tasarımı sıfırdan yapacağız ve ContentPlaceHolder‘ı sonra ekleceyeğiz. Silmeniz gereken kodlar aşağıda ;

<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>

Gereksiz kodları sildikten sonra stil dosyamızı ekliyoruz. Bunun için Website > Add New İtem ‘dan Style Sheet dosyasını seçiyoruz. Ben stil.css olarak adlandırdım siz istediğiniz gibi adlandırabilirsiniz. Şimdi önce tasarımımızın taslağını hazırlamak için <div> taglarını kullanacağız. Sitemiz 5 temel div üzerine olacak bunlar Genel,Header,Menu,İcerik(sağ ve sol olarak iki dive daha ayıracağız.),Footer. Taslak kodları aşağıda ;

<body>
<!-- Genel -->
<div id="genel">
<!-- Header -->
<div id="header">
<h1>Header</h1>
</div>
<!--#Header -->

<!-- Menu -->
<div id="menu">
<h1>Menu</h1>
</div>
<!--#Menu -->

<!-- İçerik -->
<div id="icerik">
<!-- Sol -->
<div id="sol">

</div>
<!--#Sol -->

<!-- Sağ -->
<div id="sag">

</div>
<!--#Sağ -->

<!-- Temizle-->
<div id="temizle">

</div>
<!--#Temizle-->
</div>
<!--#İçerik -->

<!-- Footer -->
<div id="footer">
<h1>Footer</h1>
</div>
<!--#Footer -->
</div>
<!--#Genel -->
</body>

Taslağımızın kodları bu şekilde olacak şimdi gelelim stil sayfamıza ;

body
{
background-color : Black;
}

#genel
{
width : 800px;
margin : 0 auto;

}

#header
{
width : 800px;
height: 150px;
background-color: Blue;
}

#icerik
{
width : 800px;
background-color:Gray;
height: 400px;
margin-top: 10px;
}

#footer
{
width: 800px;
height : 30px;
margin-top : 10px;
background-color : Green;
text-align : center;
padding-top : 10px;
color: #fff;
}

#sol
{
width : 500px;
height: 380px;
float :left;
padding : 10px;
background-color :Red;
}

#sag
{
width : 260px;
height: 380px;
float : left;
padding : 10px;
background-color :Orange;
}

#temizle
{
clear:both;
}

Son Hali;

Kolay gelsin yakında daha farklı ASP.NET anlatımlarım olacak.

Kategori: ASP.NET Tagged with , , , , , , , , , , , , , ,

Hakkında Burhan
Yazılım Geliştirici

Yorum bırakın