Visual Studio İle ASP.NET Web Sitesi Oluşturmak


Bugün sıfırdan başlayanlar için çok temel düzeyde kendi web sitemizi oluşturmaya çalışacağız. Öncelikle Microsoft Visual Studio’dan File-New-Web Site sekmesini seçiyoruz:


Sonraki aşamada Visual C# sekmesine gelip, ASP.NET Empty Web Site’ı seçiyoruz:


Projemizin üstüne sağ tıklayarak-Add-Add New Item yolunu izliyoruz. Sonrasında ilk aşama için HTML Page’i seçiyoruz. İleride JavaScript File ve Style dosyaları da oluşturacağız.

 

İlk aşamada karşımıza şu şekilde bir sayfa çıkacaktır:

Head tagleri arasında olan bölüm bizim sayfamızın başlığını ve ön kısmını oluşturur. Title tagleri olan kısma yazdığımız ise sayfanın en üstünde çıkacaktır. Body bölümünde de sayfamızın içinde olacak ana yapıları koyacağız. Şimdilik küçük bir örnek yapalım:
 width=
 15-20 dakika gibi kısa bir sürede basit bir sayfa oluşturabiliyoruz. Şimdi kodlarına yakından göz gezdirelim.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
//Style tagı açarak örneğin h1 yani başlık olarak 
nitelendirdiğimiz yazıların özelliklerini yazabiliyoruz.
 Biz şimdilik rengini mavi tanımladık.//
h1 {
color: blue;
}

p {
color: blue;
}
</style> 
//Hala head tagının içinde olduğumuz için sayfanın 
başlığını ve sekmenin üstte çıkacak olan title'ını 
aşağıdaki gibi yazıyoruz.
<center>
<h2>Merhaba, sitemize hoşgeldiniz. <br />Yakın bir zamanda bakım aşamasını bitirip, yazılarımızı hizmetinize sunacağız.</h2></center>
<title>Çağrı Kaçmaz Kişisel Web Sitesi</title>
</head>

<body>
//Body tagının başlangıçı, burada önceden 
belirttiğimiz gibi sayfanın ana içeriğini oluşturuyoruz.
<style>
h2{color:black;}
h1 {
color: blue;
}

p {
color: blue;
}
</style>
<style type="text/css"> 
//Burada sitemizin bir menüsü olacağı için basit 
bir css kullanarak kendimize menü oluşturuyoruz.
a.menu:link { 
// a.menu:link kodu, menümüzü dışarıdan görünüşü 
oluşturuyor. Font büyüklüğü, yazı tipi, rengi,
background rengi ve diğer stil özelliklerini
 bu methodun altında oluşturuyoruz.
font-size: 14px;
color: #000000;
text-decoration: none;
background-color: #CFF;
display: block;
margin: 1px;
padding: 12px;
}
a.menu:hover { 
// a.menu: hover ile ise fare menümüzdeki bir 
kategorinin üstüne geldiğinde oluşacak değişimleri 
tasarlamak için oluşturduğumuz method. 
Burada da benzer özellikleri yazıyoruz. 
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
background-color: #00BFAA;
display: block;
}
</style>
<center>
<table border="0" bgcolor="#333366">
 //Menümüz için table oluşturup özelliklerini giriyoruz.
<tr>
<td>
<table width="150" border="0">
<tr>
<td align="center"><a href="#" class="menu">Hakkımda</a></td>
//Menü üyelerini a href'in içinde class="menu" şeklinde
 vererek tanımlıyoruz. a href ile de sonrasında 
oluşturacağımız sayfalara site içi link verebileceğiz.
</tr>
</table>
</td>
<td>
<table width="150" border="0">
<tr>
<td align="center"><a href="#" class="menu">Programlama Dilleri</a></td>
</tr>
</table>
</td>
<td>
<table width="150" border="0">
<tr>
<td align="center"><a href="#" class="menu">Dizi Kritikleri</a></td>
</tr>
</table>
</td>
<td>
<table width="150" border="0">
<tr>
<td align="center"><a href="#" class="menu">Film Kritikleri</a></td>
</tr>
</table>
</td>
<td>
<table width="150" border="0">
<tr>
<td align="center"><a href="#" class="menu">Oyunlar</a></td>
</tr>
</table>
</td>
</tr>
</table></center>

//Sitemiz için başlangıçta koyduğumuz basit bir gif 
<br /><center><img src="http://helendipity.files.wordpress.com/2013/09/welcome-animated4.gif?w=468" style="top:10px;"></center>
</body>
<footer>
//Footer tagının içine yazdığımız metin ve oluşturduğumuz 
kodlar sayfanın alt kısmında gözükür. Buraya genellikle 
link, site hazırlayıcısının açıklaması, yasal sorumluluklar 
gibi ek bilgiler girilir.
<center>
<h2>Çağrı Kaçmaz tarafından oluşturulmuştur.</h2>
<h2>
İletişim Bilgileri: <a href="mailto:iletisim@cagrikacmaz.com"> 
// Bu kod direkt olarak outlook üzerinden maile ulaşımı sağlar
iletisim@cagrikacmaz.com
</a>.
</center>
</h2>
</footer>
</html>

Kısa sürede oluşturduğumuz bu tarz sayfalar genellikle tek sayfalık info sitelerine yeterli olabiliyor. Kendi istediklerinizi eklemek için fazla zamanınızı almayacak araştırmalar yaparak geliştirebilirsiniz. Şimdi sitemizi hazırladık lakin localhost’ta çalışıyor. Bunu internette yayınlayabilmek için sağda gözüken projemizin üstüne sağ tıklayarak Publish Web Site diyoruz ve karşımıza şöyle bir sayfa çıkıyor:

 

Buradan servis sağlayıcısını satın aldığımız hosting firmasının bize verdiği ftp bilgilerini ve kullanıcı bilgilerimizi giriyoruz. Sonrasında publish butonuna tıkladığımızda sitemizi canlı olarak görebileceğiz. Projeyi buradan indirebilirsiniz. Zevkli bir yapım süreci dileğiyle. 

 

Bunlar da ilginizi çekebilir

Gitmeden yorumunuzu bırakın.


Time limit is exhausted. Please reload the CAPTCHA.