استفاده از فایل Skin در صفحات وب

استفاده از فایل Skin در صفحات وب

حتما در بسیاری از سایت ها دیده اید که شکل و فرمت صفحه و کنترل ها بصورت گرافیکی و متفاوت از حالت پیش فرض است. برای صفحه آرایی و چیدمان صفحه معمولاً از CSS استفاده می شود اما برای تغییر شکل ظاهری کنترل ها می توانید از Skin استفاده کنید. نا گفته نماند که با استفاده از CSS نیز می توان شکل کنترل ها را هم تغییر داد اما روش صحیح ، استفاده از Skin می باشد. حال در اینجا طریقه ساخت، استفاده و انتصاب دادن یک Skin یا پوسته به صفحات را به شما خواهیم آموخت. برای شروع ابتدا باید یک فایل از جنس Skin ایجاد کنیم تا کدهای مربوط به هر کنترل را درون آن بنویسیم. پس برای این منظور مسیر زیر را دنبال نمائید تا یک فایل Skin در پروژه تان ساخته شود :

Project -» Add New Item -» Web -» (انتخاب)SkinFile -» Add

حال که فایل Skin مورد نظر ساخته شد باید کنترل ها را به همراه شکل ظاهری دلخواه به صورتی که در زیر نشان داده شده یکی یکی تعریف و وارد نمائیم :

تعریف شکل ظاهری کنترل ها در Skin

<asp:Label runat="server" ForeColor="#585880" Font-Size="0.9em" Font-Names="Verdana"/>
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue"/>
</asp:GridView>
<asp:Image runat="server" ImageUrl="~/images/image1.jpg"/>

همان طور که در قطعه کد بالا می بینیم ، می توان شکل ظاهری تمامی کنترل ها را به صورت فوق تعریف کنیم و با این روش دیگر نیاز نیست در هر صفحه این کار را انجام دهیم و از تکرار کدهای نوشته شده و چندبارگی جلوگیری می شود.

حال بعد از اینکه فایل Skin را آماده و تعریف کردیم ، می بایست آن را به صفحات انتصاب دهیم. برای این منظور 3 روش وجود دارد که شما می توانید به دلخواه هر روش را انتخاب کنید :

انتصاب Skin به صفحات بوسیله Header

<%@ Page Theme="Skin نام فایل" Language="C#"%>
<%@ Page Theme="Skin نام فایل" Language="vb"%>

با اضافه کردن عبارت فوق به هدر(Header) صفحات ، کنترل های موجود در آن صفحه از ویژگی های تعریف شده در فایل Skin برخوردار می شوند.

انتصاب Skin به صفحات بصورت داینامیک

Protected Sub Page_PreInit(sender As Object, e As EventArgs)
Page.Theme="Skin نام فایل"
End Sub

انتصاب Skin به صفحات بصورت داینامیک

protected void Page_PreInit(object sender, EventArgs e){
Page.Theme="Skin نام فایل";
}

تنها با اضافه کردن قطعه کد بالا به کلاس صفحه می توانید از محتویات Skin ساخته شده بهره ببرید.

انتصاب Skin به صفحات با کمک Web.config

<configuration>
<system.web>
<pages theme=“Skin نام فایل”/>
</system.web>
</configuration>

با کمک فایل Web.config می توان به راحتی Skin ساخته شده را به تمامی صفحات موجود در پروژه انتصاب داده و با استفاده از این کار دیگر نیاز به دو روش قبل هم نمی باشد.



نظرات کاربران



عبارت امنیتی : حاصل 7 × 6 می شود :
متن پیام :