Makale Özeti

ASP.NET 2 ile gelen tema özelliğini biliyorsunuz. Bunun sayesinde sitenizin css dosyalarını, kontrollerin özelliklerini değiştirebiliyorsunuz. Ancak sitenizin HTML kodlarını değiştiremiyorsunuz, bu yüzden temayı değiştirerek, çok farklı tasarımlara sahip olabilen bir web sitesi yapılabileceğini düşünmemiş olabilirsiniz. Ancak XHTML ve CSS kullanarak bunu yapmak mümkün. Sadece CSS dosyasını değiştirip, tasarımı tamamen değiştirebiliriz.

Makale

Merhaba, ASP.NET 2 ile gelen tema özelliğini biliyorsunuz. Bunun sayesinde sitenizin css dosyalarını, kontrollerin özelliklerini değiştirebiliyorsunuz. Ancak sitenizin HTML kodlarını değiştiremiyorsunuz, bu yüzden temayı değiştirerek, çok farklı tasarımlara sahip olabilen bir web sitesi yapılabileceğini düşünmemiş olabilirsiniz. Ancak XHTML ve CSS kullanarak bunu yapmak mümkün. Sadece CSS dosyasını değiştirip, tasarımı tamamen değiştirebiliriz.

XHTML nedir?

XHTML (Extensible HTML). Genişletilebilir, yeni etiketler eklenebilir.
XHTML HTML'den daha sert bir dildir, tüm etiketler kapatılmalı, tırnaklara özen gösterilmelidir, kuralları kesindir.
Örneğin;


HTML;
<br>


XHTML;
<br / >




HTML;
<select name=sec>
<option value="1">Seçenek 1</option>
<option value="2" selected>Seçenek 2</option>
</select>


XHTML;
<select name="sec">
<option value="1">Seçenek 1</option>
<option value="2" selected="selected">Seçenek 2</option>
</select>


gibi.

Daha çok bilgi için : http://www.w3.org/MarkUp/
XHTML hakkında çok kısa bilgi verdikten sonra, kullanma amacımızı belirtelim;

Eskiden tabloları tasarım iskeleti olarak kullanarak, tasarımlarımızı yapardık, bu daha kolay gelirdi ancak bir sürü dezavantajları var.
Herşey birbirine karışır, düzeltmek zor olur, gereksiz bir sürü tasarımsal html kodları olur (<font> gibi), tasarımı değiştirmek istediğimizde herşeyin özelliği kendi üzerinde ayrıca tanımlandığı için hepsini değiştirmek gerekir, ASP.NET gibi programı HTML'den ayırma gibi bir özelliği olmayan tenolojileri ya da başka bir teknolojiye/dile böyle bir özelliği kendiniz kazandırmadıysanız, HTML karmaşasının üzerine bir de bu karmaşayı eklersiniz ve yazılabilecek en lezzetli spagetti kodu yazmış olursunuz. Afiyet olsun.

ASP.NET zaten programı HTML'den ayırıyor, biz de HTML'i ikiye ayıralım, 3 parça çalışalım : Programlama, XHTML çıktılar, Tasarım (CSS, Resimler,...)


XHTML'de tasarım yapmayacağız, tabloları tasarım iskeleti olarak değil, gerçekten tablolar, listeler oluşturmamız gerektiğinde kullanacağız. XHTML sadece sayfada görüntülenecek olan bilgileri taşıyacak, aynı XML gibi bilgileri taşıyacak, tasarımı CSS ile oluşturacağız.

Tasarımı tablolar ile oluşturmakta ne gibi bir sakınca var?
Tasarımınızı tablolar ile oluşturursanız, tabloların getirdiği karmaşaya katlanmak durumunda kalırsınız. Çok daha fazla HTML kodunuz olur, istemciye, çok daha fazla veri gider.
CSS tasarımınız üzerinde yeteri kadar etkili olamaz, CSS i değiştirdiğinizde tasarımınız tamamen değişemez.
XHTML ile yazarsanız ve uyumluluklar için çok iyi düzenlerseniz, sitenize sadece Internet Explorer'dan değil, bir çok tarayıcıdan, cep telefonlarından, cep bilgisayarlarından, televizyonlardan,... en iyi şekilde görüntülenebilir olur.



Artık minik uygulamamıza geçelim;

Basit bir sayfa yapacağız, 2 tane tema yapacağız, temayı değiştirdikçe, farklı tasarımlar ile karşılaşağız, ve HTML kodumuzda hiç değişiklik olmayacak. Sadece CSS değişecek.

Sayfamızın XHTML kodu;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<title>YazGeliştir</title>
</head>
<body><form id="form1" runat="server">

<div id="sayfa">


<div id="logo">
<h1>Yaz Geliştir</h1>
</div>

<div id="menu">
<h3>Menü 1</h3>
<ul>
<li><a href="#">Bağlantı 1</a></li>
<li><a href="#">Bağlantı 2</a></li>
<li><a href="#">Bağlantı 3</a></li>
</ul>

<h3>Menü 2</h3>
<ul>
<li><a href="#">Bağlantı 1</a></li>
<li><a href="#">Bağlantı 2</a></li>
<li><a href="#">Bağlantı 3</a></li>
<li><a href="#">Bağlantı 4</a></li>
</ul>

</div>

<div id="icerik">
<h2>Merhaba</h2>
Yazgelistir.com , Türkiye’de yazılım geliştirme alanında çalışan veya bu alanda
kendini geliştirmek, tartışmak ve bilgilerini paylaşmak isteyenleri bir araya getirmeyi
amaçlayan bir oluşum.
<p>
Yazılım geliştirme teknolojileri büyük bir hızla gelişiyor ve tek bir kişinin tüm
gelişmeleri takip etmesi de kolay değil. Bu durumda anahtar kelime “paylaşmak”.
İşte yazgeliştir.com da bu temel fikir üzerine kuruldu.
</p>
<p>

Bu siteye herkesin katılımını bekliyoruz. İster BT alanında tecrübeli bir programcı,
ister kendi kendine bir şeyler öğrenmeye çalışan bir meraklı olun, yazgelistir.com
mutlaka sizi ilgilendiren bir şeyler içeriyor. Siz de bu sitede katılımcı olabilir,
bildiklerinizi paylaşarak, bilmediklerinizi sorarak bu ortak birikimi daha zengin
bir hale getirebilirsiniz. Konumuz tek bir dil veya teknoloji değil. Yazgelistir.com,
Microsoft’un son yıllardaki en önemli atılımlarından biri olan .NET teknolojisi
ve günümüzde Microsoft platform ve araçları ile yazılım geliştirenlerin ilgileneceği
her türlü kaynak üzerine odaklanıyor.Bunu yaparken de Microsoft’un desteğini ve
kendi alanında tecrübeli bir çok geliştiricinin deneyim ve bilgisini temel alarak
yola çıkıyor.
</p>
<p>

Hemen herkesin programcılığa başladığı zaman izlediği yol aynıdır; önce kendi başınıza
bir şeyler öğrenmeye çalışır, biraz ilerledikçe kendiniz gibi çaba gösteren insanlarla
bir araya gelmek için uygun bir ortam aramaya başlarsınız. Bu oluşumun amacı da
size bu ortamı sağlamak.
</p>
<p>

Ancak bu site sadece size bir şeyler anlatmak için değil, sizin de bilgilerinizi
başkalarına sunmanıza olanak tanımak için planlandı. Eğer uzun çabalarınız sonunda
edindiğiniz deneyimlerinizin ya da fikirlerinizin başkalarına da faydalı olacağına
inanıyorsanız, bu sitede yazacağınız yazılarla bunu yapabilirsiniz veya forumlardaki
tartışmalara katılarak da bildiklerinizi paylaşabilirsiniz. Sizi ilgilendiren haberleri
ve püf noktaları da, yazgelistir.com’a üye olarak posta kutunuzda bulabilirsiniz.
Bunlar haricinde birçok yenilik ve sürpriz de zamanla karşınıza çıkmak için sırasını
bekliyor. Umarız sizinle birlikte hep hayal edilen ama bir türlü tam olarak gerçekleşmeyen
bir ortamı yaratabilir, ve Türkiye’de bir ilki başarabiliriz.
</p>
<p>

Microsoft yazılım geliştiriciler grubu web sitesine hoş geldiniz...
</p>
<br />


</div>


<div id="tema_degistir_alan">

<div>

Tema seçiniz :
<asp:DropDownList ID="tema_sec" runat="server">
<asp:ListItem Value="">Tema Yok</asp:ListItem>
</asp:DropDownList>

<asp:Button ID="tema_sec_tamam" runat="server" Text="Tamam" OnClick="tema_sec_tamam_Click" />
</div>
</div>





</div>

</form>
</body>
</html>




Yukarıdaki HTML kodlarında tasarımsal hiçbirşey yok, browserda görüntülediğiniz zaman basit olarak yazılmış bir metin olarak görünmekte.




Sayfamızın altına sayfanın temasını değiştirmek için bir alan oluşturduk. Yapılacak olan şey, App_Themes klasöründeki klasörlerin isimlerini listelemek ve seçildiğinde Page.Theme özelliğini değiştirmek.

Kodumuz;

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object gonderen, EventArgs olay_argumanlari)

{

string[] temalar = Directory.GetDirectories(Server.MapPath("App_Themes"));

if (!IsPostBack)

{

for (int i = 0; i < temalar.Length; i++)

{

string[] tema = temalar[i].Split('\\');

tema_sec.Items.Add(tema[tema.Length - 1]);

}

ListItem li = tema_sec.Items.FindByValue(Session["tema"].ToString());

li.Selected = true;

}

}

protected void Page_PreInit() // Page.Theme özelliği sadece Page_PreInit() olayında değiştirilebilir.

{

if (Session["tema"] == null)

{

string[] temalar = Directory.GetDirectories(Server.MapPath("App_Themes"));

string[] tema = temalar[0].Split('\\');

Session["tema"] = tema[tema.Length-1];

}

this.Theme = Session["tema"].ToString(); // Page.Theme özelliği sadece Page_PreInit() olayında değiştirilebilir.

}

 

protected void tema_sec_tamam_Click(object gonderen, EventArgs olay_argumanlari)

{

Session["tema"] = tema_sec.SelectedValue.Replace("-","");

Response.Redirect("default.aspx");

}

}








Sıra tasarımlarımızı yapmaya geldi.
CSS dosyalarımızı yazacağız. ASP.NET'in Tema özelliğinin *.skin dosyalarını kullanarak web kontrolleri için çok daha esnek stil dosyaları yazabiliriz, bu çalışmamızda gridview,... gibi kontroller kullanmadığımızdan, *.skin dosyası yazmaya gerek duymadık.


CSS dosyalarımızı da yazdıktan sonra, makalemiz tamamlandı.

1.Temamız;



2.Temamız;





Sayfamızın altındaki listemizden temamızı seçip, "Tamam" a tıkladığımız zaman, diğer temamızın CSS dosyası yükleniyor, ve sayfamızın tasarımını tamamen değiştiriyor.




Umarım yardımcı olabilmişimdir.


Örnek dosyaları indirip css kodlarını da inceleyebilirsiniz.


Bu şekilde XHTML ve CSS kodu yazmak, ilk başta can sıkıcı olabilir, daha sonra alışınca çok rahat çalışabilirsiniz.


Kolay gelsin.

Alper Özçetin
http://www.alperozcetin.com/
alper@alperozcetin.com
alperozcetin@gmail.com