ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 3
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش تصویری ASP.Net 2010 قسمت 3
07-31-2011, 02:37 PM (آخرین ویرایش در این ارسال: 02-24-2014 07:02 AM، توسط learninweb.)
ارسال: #2
RE: آموزش ASP.Net 2010 قسمت 3
[تصویر:  011.gif]


براي ايجاد يک کنترل کاربر روي Web User Control کليک کنيد.

[تصویر:  012.gif]


در اين قسمت مي‌توانيد زباني که از آن در اين کنترل کاربر استفاده مي‌شود را تغيير دهيد. دراين مثال اکنون زبان Visual Basic انتخاب شده است.در قسمت Name دابل کليک کنيد.

[تصویر:  013.gif]


عبارت Header را تايپ کنيد.
روي دکمه Add کليک کنيد.

[تصویر:  014.gif]


در ابتداي اين کد ابتدا از کلمه Control استفاده شده است و سپس نام زباني که با آن مي‌خواهيم برنامه نويسي کنيم نوشته شده، در ادامه نيز نام کلاس نوشته شده است که مي‌توانيد ان را تغيير دهيد. روي سربرگ Default.aspx کليک کنيد.

[تصویر:  015.gif]


قسمت مشخص شده مربوط به کدهايHeader صفحه است که شامل عکس و سه کنترل HyperLink منوي سايت است. مي‌خواهيم اين کد‌ها را در صفحه کنترل کاربر قرار دهيم. روي آيکون Cut در نوار ابزار کليک کنيد.

[تصویر:  016.gif]


روي سربرگ Header.ascx کليک کنيد.

[تصویر:  017.gif]


بر روي آيکون Paste در نوار ابزار کليک کنيد.

[تصویر:  018.gif]


روي سربرگ Default.aspx کليک کنيد.

[تصویر:  019.gif]


حال با استفاده از ماوس مي‌خواهيم کنترل کاربر را در ابتداي اين صفحه قرار دهيم. براي اين کار ماوس را روي آيکون صفحه Header.ascx از پنجره Solution Explorer برده و دکمه چپ ماوس را فشرده نگه داشته و ماوس را به محل مشخص شده با کادر قرمز برده و دکمه جپ ماوس را رها نمائيد. (Drag)

[تصویر:  020.gif]

همان طور که مي‌بينيد اين کنترل به صفحه اضافه شد. روي حالت Source کليک کنيد تا بتوانيد کد توليد شده را مشاهده کنيد.
[تصویر:  021.gif]


با اين کار دو خط کد به اين صفحه اضافه شده است. اولين خطي که اضافه شده دستور Register است که با استفاده از اين دستور يک کنترل کاربر به نام uc1 تعريف شده است و توسط دستور مشخص شده با کادر آبي اين کنترل در صفحه قرار داده شده است. به اين ترتيب مي‌توانيد اين کنترل در هر صفحه‌اي از پروژه که ساخته مي‌شود استفاده کرد. براي مشاهده نتيجه برنامه بر روي دکمه Start کليک کنيد.

[تصویر:  022.gif]


بر روي دکمه Close کليک کنيد.

[تصویر:  023.gif]


براي استفاده از کنترل کاربر يا User Control يک راه ديگر نيز وجود دارد. که در ادامه به تشريح آن مي‌پردازيم. در اين روش User Control در Web.config تعريف مي‌شود. بر روي Web.config در پنجره Solution Explorer دابل کليک کنيد تا باز شود.

[تصویر:  024.gif]


قبل از شروع کد نويسي توضيح مختصري در مورد Web.Config ارائه مي دهيم. بيشتر برنامه‌هاي کاربردي کامپيوتري داراي بخشي به نام Setup هستند که براي انجام تنظيمات متناسب با استفاده‌هاي مختلف کاربران مورد استفاده قرار مي گيرد. برنامههاي کاربردي مبتني بر Web نيز که داراي کاربران زيادي هستند از اين قائده مستثني نيستند واحتياج به انجام تنظيماتي متناسب با کاربردهاي مختلف خود دارند. در ASP.NET اينگونه تنظيمات که مربوط به منابع مورد استفاده برنامه کاربردي، اطلاعات محلي، اطلاعات امنيتي و... مي‌شوند در داخل يک فايل XML ذخيره مي شوند که نام آن Web.Config است و همانند اسناد XML شامل تعدادي تگ است و به کوچک و بزرگ بودن حروف نيز حساس است. براي اطلاعات بيشتر در مورد XML به نرم افزار آموزشي XML قابل دانلود از سايت http://www.learninweb.com مراجعه نمائيد.
هنگامي که مي‌خواهيم تمام صفحات به کنترلي دسترسي داشته باشند بايد آن کنترل را به صورت Global تعريف کنيم. در ادامه کد مربوط به اضافه کردن User Control را وارد مي کنيم.
<pages >
<controls >
<add tagPrefix="customControls" tagName="header" src="~/control/Header.ascx"/>
</controls>
</pages>


<add tagPrefix="customControls" tagName="header" src="~/control/Header.ascx"/>


در اين قسمت از Tagي به نام add استفاده شده است در کد وارد شده Tagprefix نام مستعاري است که هنگام کد نويسي براي راحتي کار از آن استفاده مي کنيم tagName نيز مي‌تواند هر عبارت که دلخواه شما است باشد در اين مثال از عبارت Header استفاده کرديم تا با نام فايل يکي باشد و خصوصيت src نيز آدرس فايل است. آدرس وارد شده نشان ميدهد که اين فايل Header.ascx نام دارد و در شاخه control موجود در شاخه اصلي (root) موجود است. روي فايل AboutUs.aspx دابل کليک کنيد تا باز شود.

[تصویر:  025.gif]


در اين صفحه مي‌خواهيم از کنترلي که در Web.config اضافه کرديم استفاده کنيم. در ادامه کد مربوط به اين عمل را وارد مي‌کنيم.
در کد وارد شده با استفاده از Tagي به نام CustomControl اعلام کرده‌ايم که مي‌خواهيم از CustomControlي به نام Header استفاده کنيم که تعريف آن در فايل Web.config موجود است. براي مشاهده نتيجه روي دکمه Start کليک کنيد.

[تصویر:  026.gif]


اکنون نتيجه‌اي که انتظار داريم ظاهر شده است. در ادامه اين بخش مي‌خواهيم با استفاده از CSS يک کلاس براي قسمت منوي سايت خود ايجاد کنيم. روي دکمه Close کليک کنيد.

[تصویر:  027.gif]


قبل از شروع ايجاد کلاس، توضيح مختصري در مورد CSS بيان مي کنيم. زبان HTML به عنوان يک سيستم کد سازي استاندارد ايجاد شد تا کاربران قادر باشند بدون توجه به نوع کامپيوتر خود صفحات web را مشاهده کنند. ويژگي مهم HTML قالب بندي ساختاري آن است اما اشکال مهم آن اين است که امکان کنترل کامل بر تمام قسمت‌هاي صفحه را نمي‌دهد. مجمع W3C تلاش زيادي براي توليد CSS کرد و با ايجاد آن امکان طراحي Layout صفحه و توانايي کنترل دقيق بر صفحه را به طراحان داد.
از مهم‌ترين مزاياي CSS اين است كه كاربران مي‌توانند رنگ، فونت، ساختار و ديگر وجوه نمايش متن را تغيير دهند. هدف اصلي از طراحي CSS جدا كردن محتواي متني فايل‌ها از شيوه نمايش آنها است. براي ايجاد يک فايل Css بر روي Website در نوار منو کليک کنيد.

[تصویر:  028.gif]


روي Add New Item کليک کنيد.

[تصویر:  029.gif]


روي Style Sheet کليک کنيد.

[تصویر:  030.gif]

روي دکمه Add کليک کنيد.


[تصویر:  031.gif]


ماوس خود را بر روي Css OutLine ببريد.

[تصویر:  032.gif]


روي دکمه Auto Hide کليک کنيد.

[تصویر:  033.gif]


روي Style Sheet کليک راست کنيد.

[تصویر:  034.gif]


بر روي گزينه Add Style Rule کليک کنيد.

[تصویر:  035.gif]


چون مي‌خواهيم کلاس تعريف کنيم گزينه Class Name را انتخاب کنيد.

[تصویر:  036.gif]


در ادامه نام کلاس را MenuPanel مي‌گذاريم.
روي دکمه Ok کليک کنيد.

[تصویر:  037.gif]


کلاس ها در Css با علامت . قبل از نام کلاس مشخص مي شوند. روي مثلث باز شونده کنار پوشه Classes کليک کنيد.

[تصویر:  038.gif]


اکنون تنها ما يک کلاس تعريف کرده ايم که مشخص است. بر روي کلاس MenuPanel کليک راست کنيد.

[تصویر:  039.gif]


روي Build Style کليک کنيد.

[تصویر:  040.gif]

در اين قسمت شما به يک سري تنظيمات مختلف دسترسي داريد که کار با آنها با توجه به نام شان تقريبا واضح است. براي مثال مي‌خواهيم محتوياتي که داراي اين Styleاين کلاس هستند داراي حاشيه باشند براي اين کار روي گزينه Border کليک کنيد.
[تصویر:  041.gif]


براي تعيين روش رسم حاشيه بالا روي ليست باز شونده قسمت Top کليک کنيد.

[تصویر:  042.gif]


روي گزينه Solid را انتخاب کنيد.

[تصویر:  043.gif]


چون گزينه Same for all در قسمت border-style فعال است تمامي حاشيه‌هاي راست، پايين و چپ نيز داراي مقدار Solid شده‌اند. در قسمت Preview مي‌توانيد يک نمونه از Style ايجاد شده را نيز مشاهده کنيد. براي تعيين ضخامت حاشيه در جعبه متن border-width کليک کنيد.

[تصویر:  044.gif]


عدد 1 را وارد کنيد.
براي تعيين ميزان فاصله با حاشيه روي گزينه Box کليک کنيد.

[تصویر:  045.gif]


در ادامه جعبه چک Same for all را غير فعال مي‌کنيم و براي قسمت هاي بالا،پايين و چپ عدد 5 پيکسل را وارد مي‌کنيم.

[تصویر:  046.gif]


براي تعيين اندازه روي قسمت Position کليک کنيد.

[تصویر:  047.gif]


در داخل کادر Width کليک کنيد.

[تصویر:  048.gif]


عدد 250 را وارد کنيد.
روي دکمه OK کليک کنيد.

[تصویر:  049.gif]


در صورتيکه‌ با دستورات CSS آشنا باشيد کدهاي ايجاد شده را به سادگي متوجه خواهيد شد. براي اعمال Style ايجاد شده بر روي تصوير و منو روي سربرگ control/Header.ascx کليک کنيد.

[تصویر:  050.gif]


براي آنکه در تگ asp از کلاس ايجاد شده استفاده کنيم مکان نما را به انتهاي اين خط برده‌ايم. دکمه Space صفحه کليد را فشار دهيد.
[تصویر:  051.gif]


گزينه CssClass را انتخاب کنيد.

[تصویر:  052.gif]


عبارت =”MenuPanel“ را تايپ کنيد.

[تصویر:  053.gif]


براي استفاده از يک Style در يک صفحه وب بايد در تگ Head صفحه Style مورد نظر را تعريف کنيد. براي مثال روي سربرگ Default.aspx کليک کنيد.

[تصویر:  054.gif]


در خط مشخص شده با استفاده از تگ Link کلاس Style.css تعريف شده است. حال براي استفاده از اين style بايد در تگي که مي‌خواهيد از آن استفاده کنيد اعلام کنيد که از Style تعريف شده استفاده شود. روي دکمه Start کليک کنيد.

[تصویر:  055.gif]


همان طور که مشاهده مي کنيد دور قسمت منوي سايت حاشيه ايجاد شده است.

براي اطلاعات بيشتر در مورد Css مي توانيد به نرم افزار آموزشي HTML,Java Script و CSS شرکت انياک قابل دانلود از http://www.learninweb.com مراجعه نمايد.

براي اطلاعات بيشتر در مورد آموزش ASP مي توانيد به نرم افزار آموزش ASP قابل دانلود از http://www.learninweb.com مراجعه نمايد.

توجه کنید که شما میتواند آموزش ASP.Net 2010 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش ASP دانلود کنید.

کاربر گرامي، شما اکنون در پايان اين بخش قرار داريد.

دانلود نرم افزار آموزشی
دانلود مستقیم - شبیه سازی شده - تعاملی - تصویری
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پیام‌های داخل این موضوع
RE: آموزش ASP.Net 2010 قسمت 3 - learninweb - 07-31-2011 02:37 PM

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان

دانلود نرم افزار آموزشی برای ویندوز
دانلود نرم افزار آموزشی برای اندروید