Hazır Tasarım/Temanın ASP.NET Ortamına Aktarılması

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.

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.

Son zamanlarda sıklıkla aldığım sorulardan biri de "Elimdeki tasarımı ASP.NET ortamına nasıl aktarırım?" sorusuydu. Bu kadar yoğun sorulan sorunun üzerine bir yazı yazmamak ayıp olur diye düşündüm :)

Öncelikle elimizde hazır bir CSS tema olması lazım. Ben proje dosyaları ile beraber size kullandığım temayı vereceğim. Kullanacağımız temadan bir görüntü;



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



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



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

tagları arasındaki kodları kopyalayalım.




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



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

Başlangıç :


Son:


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ı :

<inputclass="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.

Sorularınızı ya da hakkında yazı yazmamı istediğiniz bir konu olursa yorum olarak ekleyebilirsiniz.

Başka bir yazıda görüşmek dileğiyle.

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

anlattığınız şey çok işime yaradı fakat hazır tasarım psd dosyasıyla yapılanları koda nasıl giydirilebilinir.
Hocam ellerine sağlık çok faydalı bilgi olmuş ...

Yukarı Git