IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası - Hazır Tasarım/Temanın ASP.NET Ortamına Aktarılması

Merhabalar,

Bu yazımda, elimizde bulunan hazır bir CSS tema veya tasarımın ASP.NET ortamına nasıl aktarılacağını anlatacağım.

Ben Visual Web Developer üzerinden anlatacağım. Visual Web Developer ı açalım ve ASP.NET Empty Web Site oluşturalım.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Şimdi temamızı oluşturan dosyaları(images klasörü ve style.css dosyası) kopyalayıp ASP.NET projemizin ana dizinine yapıştıralım.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Dosyalarımızı eklediğimize göre şimdi html,javascript ve css kodlarımızı taşımanın zamanı geldi. İlk olarak ASP.NET projemize bir adet Web Form ekleyelim ve üzerine çift tıklayarak editörde aktif hale getirelim. Daha sonra Tema klasöründe yer alan index.html dosyasını yardımcı bir program(ben dreamviewer kullanıyorum) ile açıp <head></head> tagları arasındaki kodları kopyalayalım.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Kopyaladığımız kodları ASP.NET projesindeki Default.aspx isimli Web Form’umuzda yer alan <head> tagları arasına yapıştıralım.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Kullandığımız aynı mantıkla tema klasöründeki index.html dosyasında <bOdy></bOdy> tagları arasında yer alan kodları da Web Form’umuza taşıyalım. Kodlar fazla olduğu için <bOdy> ‘nin başlangıcını ve sonunu gösteriyorum.

Başlangıç :

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Son :

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Burada biraz kafanız karışmış olabilir ama proje dosyasını incelediğinizde rahatlıkla anlayacaksınız. Bu nokta dikkat etmeniz en önemli husu, tema klasöründeki index.html dosyasından taşıdığımız kodların <form id=”form1” runat=”server”> tagının altında yer almasıdır. Yer almadığı takdirde sayfanızdaki ASP.NET araçları çalışmaz hata verir. Dikkat etmeniz gereken bir diğer husus da, temanız CSS’e dökülürken %90 html elemanları kullanılarak dökülmüştür. Projeniz ile sağlıklı çalışabilmeniz için bu html elemanlarını ASP.NET elemanlarına çevirmeniz gereklidir. Buna örnek olarak temamızda yer alan müzik arama kutumuzu ASP.NET elemanı olan TextBox’a çevirelim.

HTML Elemanı : <input class="arama-input">

ASP.NET Elemanı : <asp:TextBox ID="TextBox1" CssClass="arama-input"

runat="server"></asp:TextBox>

Burada önemli olan elemanlardaki CSS class’larını taşımak. Örnekten de açıkca anlaşılıyor zaten.