راهکارهای موثر در ASP.Net > راهکار 2 - 4 : سفارشی کردن یک وب سایت Asp.Net با استفاده از تم ها در ویژوال استودیو

مقدمه :

این راهکار به شما آموزش خواهد داد چگونه از تم ها ( themes ) برای تعیین یک ظاهر کلی برای صفحات و کنترل های موجود در سایت خود استفاده نمایید . یک تم می تواند شامل یک یا چند فایل اسکین ( Skin File ) که نمای کلی را برای کنترل های صفحه تعیین می کنند ، یک یا چند استایل شیت ( فایل css ) و چندین فایل گرافیکی برای کار با کنترل های صفحه ، باشد . این راهکار به شما آموزش می دهد تا چگونه از تم ها در صفحات و سایت های Asp.Net استفاده کرده و مطالب زیر را پوشش می دهد :

  • اعمال کردن تم های از پیش ساخته شده به صفحات یا کل یک وب سایت Asp.Net.
  • طراحی اسکین یا ظاهر ( Skin ) مورد نظرتان برای اعمال بر کنترل های صفحه .

برای حمایت از این پروژه ، کتاب راهکارهای موثر در ASP.Net را دانلود نمایید ...

پیش نیازها :

برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی کامپیوتر شما نصب شده باشد :

  1. Microsoft Visual Studio .
  2. Microsoft .NET Framework version 2.0 یا بالاتر ( همراه با ویژوال استودیو نصب می شود ) .

مرحله اول - طراحی یک سایت ASP.Net :

در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید . فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ، در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو بروید .

شروع راهکار :

برای شروع راهکار ، یک کنترل دکمه فرمان Button ، یک کنترل تقویم Calendar و یک کنترل Label را بر روی صفحه قرار می دهیم تا پس از ساخت تم و اعمال آن به کنترل ها ، خروجی را مشاهده کنیم .
قرار دادن کنترل های مورد نیاز بر روی صفحه :

  1. صفحه Default.aspx را باز کرده و به نمای Design بروید .
  2. از گروه کنترل های استاندارد منوی Toolbox ، یک کنترل Button ، Calendar و Label را درگ کرده و بر روی صفحه قرار دهید . ترتیب قرارگیری و چیدمان صفحه در این راهکار زیاد مهم نیست .
  3. به نمای کد Source بروید .
  4. مطمئن شوید که تگ Head صفحه دارای خاصیت runat = " server " باشد ، همانند کد زیر و سپس صفحه را ذخیره نمایید .
  5. صفحه را یکبار اجرا نمایید تا کنترل ها را قبل از اینکه تم را به آنها اعمال کنید ، ببینید .

طراحی و اعمال یک تم به صفحه Asp.Net :

Asp.Net این امکان را در اختیار طراح قرار داده تا یک تم از پیش طراحی شده را به سایت اعمال کند یا اینکه تم مورد نظر خود را طراحی نماید . در این راهکار ، به طراحی تم مورد نظر خودمان که شامل چند اسکین ساده است و ظاهر کلی کنترل را تعیین می کند ، خواهیم پرداخت .

طراحی یک تم جدید :

  1. در نرم افزار ویژوال استودیو ، در منوی Solution Explorer بر روی نام وب سایت کلیک سمت راست کرده و گزینه Add ASP.Net Folder را باز نموده و پوشه Theme را انتخاب نمایید .
    یک پوشه جدید به نام App_Themes که پوشه ای به نام Theme1 در آن قرار دارد ، ایجاد می شود .
  2. نام پوشه Theme1 را به sampleTheme تغییر دهید . نامی که برای این پوشه تعیین می کنید ، نام تم تولید شده ، نیز خواهد بود . در این مثال ( نام تم ، که در اینجاد sampleTheme است ) خود نام چندان مهم نیست ، ولی باید برای استفاده بعدا از تم نام آن را به خاطر بسپارید .
  3. بر روی پوشه sampleTheme کلیک راست کرده ، گزینه Add New Item را انتخاب نموده و یک فایل جدید text file را به پوشه اضافه کنید . همچنین نام آن را به sampleTheme.skin تغییر دهید .
  4. در فایل sampleTheme.skin ، کد Skin زیر را به آن اضافه کنید :
    کد <asp:Label  runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
    <asp:button  runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>

    کد فایل های Skin همانند تعریف خود کنترل های ASP.Net بر روی صفحات هستند با این تفاوت که این کدها فقط شامل خصوصیاتی می باشند که بر روی ظاهر کنترل اثر گذاشته و مثلا شامل ویژگی هایی مثل ID نیستند . همچنین ویژگی هایی که در کد بالا تعریف کرده ایم ، دلخواه بوده و لزوم خاصی ندارند .
  5. فایل sampleTheme.skin را ذخیره کرده و ببندید .

نکته : اگر فایل استایل شیت CSS ای را درون پوشه sampleTheme قرار دهید ، آن فایل به تمام صفحاتی که از تم استفاده می کنند اعمال خواهد شد .

نحوه امتحان کردن تم :

  1. کلیدهای CTRL + F5 را همزمان فشار دهید تا صفحه اجرا شود . مشاهده خواهید کرد که کنترل ها همچنان با ظاهر پیش فرض نمایش داده می شوند .
  2. مرورگر را بسته و به نرم افزار ویژوال استودیو باز گردید .
  3. صفحه Default.aspx را باز کرده و به نمای کد Source بروید .
  4. در بخش اعلان صفحه ( @ Page ) یک خاصیت Theme را با مقدار sampleTheme مشابه کد زیر اضافه کنید :
    کد <%@ Page Theme="sampleTheme" ... %>
  5. مجددا کلیدهای CTRL + F5 را برای اجرای مجدد صفحه فشار دهید . این بار کنترل ها با رنگ و خواصی که در تم تعیین نموده اید ، ظاهر خواهند شد . کنترل های Button و Label به دلیل اینکه خواصی را برای آنها در فایل sampleTheme.skin تعیین کرده بودید ، دارای ظاهر متفاوتی هستند ولی چون برای کنترل Calendar هیچ کدی تعیین نکرده بودید ، با ظاهر پیش فرض خود نمایش داده می شود .

تفاوت تم های سفارشی ( Customization Themes ) و تم های استایل شیت ( Style Sheet Themes ) :

پس از اینکه تم مورد نظر خود را ایجاد نمودید ، می توانید تعیین کنید که آن را در صفحه یا وب سایت چگونه استفاده نمایید . اینکه آن را به عنوان یک تم سفارشی ( Customization Theme ) یا یک تم استایل شیت ( Style Sheet Theme ) به کار ببرید . در مثال بالا ، ما تم را به عنوان سفارشی ( Customization Theme ) تنظیم کرده بودیم ، اما تم استایل شیت ( Style Sheet Theme ) نیز از همان فایل ها و استایل ها استفاده می کند ، ولی فرقش در این است که  اگر خواص و کدهای CSS ای که درون صفحه یا بخش Style آن تعریف شوند ، بر این تم ارجحیت دارند . تولای در مورد م های سفارشی ( Customization Theme ) ، خواص آن تم ها بر تمام خواص CSS ای که درون صفحه است ، ارجحیت دارد . در یک صفحه Asp.Net ، ترتیب اثرگذاری خواص و تم ها به اولویت های زیر است :

  1. تم های تعیین شده برای صفحه یا کل سایت ( شامل تم های درون فایل web.cnofig ) .
  2. تنظیمات و خواص CSS درون صفحه .
  3. تم های استایل شیت یا فایل های CSS خارجی .

برای نمایش اولویت در یک صفحه ، یک مثال می زنیم :

  1.  در صفحه Default2.aspx به نمای کد Source یروید .
  2.  تعریف اولیه صفحه را از مقدار زیر :
    کد <%@ Page theme="sampleTheme" %>

    به مقدار زیر ، که تعیین می کند تا تم به عنوان یک استایل شیت باشد ، تغییر دهد :
    کد <%@ Page StyleSheetTheme="sampleTheme" %>
  3.  کلیدهای CTRL + F5 را فشار دهید تا صفحه اجرا شود . مشاهده خواهید کرد که رنگ نوشته ( ForeColor ) کنترل Label1 قرمز است .
  4. به نمای Design رفته و مقدار خاصیت رنگ نوشته ( ForeColor ) کنترل Label را به Blue یا آبی تغییر دهید .
  5.  مجددا صفحه را اجرا کنید . خواهید دید که رنگ نوشته کنترل Label1 به رنگ آبی درآمده است .
  6.  مجددا به نمای کد Source بازگشته و این بار کد اولیه صفحه را از کد زیر :
    کد <%@ Page StyleSheetTheme="sampleTheme" %>

    به کد قبلی که در آن یک تم تعیین کننده برای صفحه مشخص کرده بودیم ، تغییر دهید .
  7.  بازهم صفحه را اجرا کنید . مشاهده می کنید که رنگ نوشته کنترل Label1 به قرمز برگشته است . این نشان می دهد که خاصیتی که در یک سفارشی که با خاصیت Theme در بخش اعلان صفحه وجود دارد حتی بر خاصیت تعیین شده ، در مجموعه خواص کنترل ارجحیت دارد .

طراحی یک تم دلخواه برای یک کنترل :

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

  1. در نمای Design ، کنترل Calendar موجود بر روی صفحه را انتخاب کرده و خواص زیر را بر آن تعیین کنید :
    کد BackColor : Cyan
    BorderColor:  Red
    BorderWidth : 4
    CellSpacing : 8
    Font-Name : Arial
    Font-Size :  Large
    SelectedDayStyle-BackColor :  Red
    SelectedDayStyle-ForeColor : Yellow
    TodayDayStyle-BackColor : Pink
  2. سپس به نمای کد Source رفته و کد المنت <asp:calendar> به همراه تمام خواص آن را کپی کرده و در داخل فایل Skin قرار دهید .
  3. خاصیت ID کنترل Calendar از کد آن درون فایل Skin حذف کرده و فایل sampleTheme.skin را ذخیره کنید .
  4. به صفحه Default.aspx برگشته و کنترل Calendar دومی را بر روی صفحه قرار دهید ولی هیچ گونه خاصیتی برای آن تعیین نکنید .
  5. مجددا صفحه را اجرا نمایید . خواهید دید که هردو کنترل به یک شکل و با ظاهر یکسان نمایش داده خواهند شد . کنترل Calendar اول خواص را از خاصیت هایی که برایش تعیین کرده اید بکار برده و کنترل دوم خواص فایل Skin را استفاده می کند .

اعمال یک تم به کل یک وب سایت :

می توانید یک تم را به کل یک وب سایت اعمال نمایید و دیگر مجبور نیستید آن را بصورت تکی تکی به هر صفحه اعمال نمایید ( همچنین می توانید با درج کد لازم در هر صفحه از اعمال تم به آن صفحه جلوگیری کنید )
برای این منظور مراحل زیر را انجام دهید :

  1. فایل web.config را باز کنید .
  2. در المنت pages ، یک خاصیت به نام theme اضافه کرده و نام تم ای که می خواهید به سایت اعمال شود را به عنوان مقدار آن تعیین نمایید . به صورت زیر :
    کد <pages theme="sampleTheme" >
  3. فایل web.config را ذخیره کرده و ببندید .
  4. به فایل Default.apsx برگشته و به نمای کد Source بروید .
  5. خاصیت theme با مقدار ( theme="themeName" ) را از بخش اعلان صفحه @ Page بردارید .
  6. مجددا صفحه Default.apsx را اجرا کنید . اکنون صفحه را از تم ای که در فایل web.config تعیین کرده اید آن استفاده خواهد کرد .

نکته: توجه داشته باشید که اگر در بخش اعلان صفحه @ Page به وسیله خاصیت theme ، نام تم ای را به عنوان تم صفحه تعیین کنید ، این تم ، تم موجود در فایل web.config را نادیده می گیرد .

دانلود فایل عملی پروژه و نسخه PDF راهکار



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1