آموزش طراحی سایت با ویژوال استودیو 2010

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

به نرم افزار آموزش ASP.Net خوش آمديد. تکنولوژي ASP .Net را مي‌توان به زبان ساده، محيط برنامه نويسي تحت .Net براي ساخت برنامه هاي کاربردي (Applications) قابل اجرا در اينترنت معرفي کرد. شما در ASP.NET مي‌توانيد از هر زبان برنامه نويسي NET. استفاده کنيد. متداولترين اين زبانها عبارتند از Visual Basic ، C#. در اين نرم افزار آموزشي هر دو زبان فوق را بررسي خواهيم کرد.
براي اينکه يک وب سايت ساخته شده با ASP.Net بتواند به درستي اجرا شود، بايستي بر روي يک سرور که از برنامه هاي ASP.Net پشتيباني مي‌کند استفاده نمود. در حال حاضر بهترين انتخاب براي اين منظور وب سرور مايکروسافت با نام IIS (Internet Information Services) است که با نصب برنامه Visual studio 2010 تنظيمات مربوط به آن انجام مي‌پذيرد و کامپيوتر شما تبديل به يک وب سرور مجازي مي‌شود.
براي شروع کار لازم است که شما با زبان VB.Net يا C# تسلط داشته باشيد. در صورتي که با اين زبان ها آشنايي نداريد مي‌توانيد از نرم افزارهاي آموزش VB.Net يا C# شرکت انياک قابل دانلود از سايت http://www.learninweb.com استفاده کنيد.
براي اجراي برنامه Visual studio 2010 بر روي دکمه Start کليک کنيد.
منوي All Programs را باز كنيد.
روي منوي Microsoft Visual Studio 2010 کليک كنيد.
روي گزينه Microsoft Visual Studio 2010 کليک كنيد.

اکنون برنامه Microsoft Visual Studio اجرا شده است. قسمت مشخص شده توسط کادر قرمز منوهاي برنامه است که با استفاده از آنها مي‌توانيد دستورات مورد نظر خود را تعيين کنيد. قسمت مشخص شده با کادر آبي نيز نوار ابزار يا Toolbar نام دارد. در اين قسمت دکمه‌هاي وجود دارند که با کليک بر روي آنها دستوراتي اجرا مي‌شوند. تمامي اين دستورات در منوهاي برنامه نيز موجود هستند. براي آنکه راحت تر بتوانيد به دستوارت پر کاربرد موجود در منو دسترسي داشته باشيد اين دستوارت بصورت دکمه در نوار ابزار نيز قرار دارند.

در قسمت سمت چپ که توسط کادر قرمز مشخص شده است با توجه به نوع پروژه‌اي که ايجاد کرده‌ايد برگه‌هائي ظاهر مي‌شوند. در اين فصل به بررسي روش استفاده از جعبه ابزار نيز خواهيم پرداخت.

در قسمت Recent Projects پروژه‌هايي که قبلاً بر روي آنها کار کرده‌ايد نمايش داده مي‌شوند تا با يک کليک بر روي نام پروژه، پروژه مورد نظر باز شود. با استفاده از قسمت Getting Started مي‌توانيد راهنماي استفاده از Asp.Net را مشاهده کنيد.

اکنون مي‌خواهيم يک وب سايت جديد ايجاد کنيم تا با محيط Visual Studio بيشتر آشنا شويم. روي دکمه New Web Site کليک کنيد.
با استفاده از گزينه New Web Site موجود در منوي File نيز مي‌توانيد يک پروژه ايجاد کنيد. کليد ميانبر اين گزينه نيز Shift+ Alt +N است. يعني با فشرده نگه داشتن کليد Shift و Alt و سپس فشردن کليد N يک پروژه ايجاد مي‌گردد.

در اينجا زبان انتخاب شده براي کدنويسي VB مي‌باشد. در صورتي که بخواهيد از زبان C# استفاده کنيد کافي است روي گزينه Visual C# کليک کنيد. با انتخاب گزينه Asp.Net Web Site يک وب سايت با تعدادي کنترل بر روي آن ساخته مي‌شود. ما مي‌خواهيم يک وب سايت را از پايه بسازيم به همين دليل گزينه دوم يعني Asp.Net Empty Web Site را انتخاب کرده‌ايم. در قسمت Web Location مي‌توانيد مسير ذخيره سازي پروژه‌ها و نام مورد نظر خود را انتخاب کنيد. به صورت پيش فرض نام Website1 براي وب سايت ما در نظر گرفته شده است. براي اينکه مسير دقيق ذخيره وب سايت هاي خود را ببينيد بر روي فلش باز شونده کليک کنيد.

ما نام پيش فرض را قبول مي‌کنيم و آن را تغيير نمي‌دهيم. روي دکمه OK کليک کنيد.

اکنون نياز داريم تا يک فرم به صفحه اضافه کنيم. بر روي منوي WebSite کليک کنيد.

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

اکنون ليستي از انواع آيتم هايي که مي‌توانيد به وب سايت خود اضافه کنيد را مشاهده مي‌کنيد. با انتخاب Web Form يک فرم به پروژه اضافه مي‌شود. با استفاده از يک Master Page مي‌توان يک قالب کلي براي تمامي صفحات ايجاد کرد. در فصل هاي بعدي بيشتر در مورد اين آيتم ها صحبت خواهيم کرد.
اکنون مي‌خواهيم يک فرم به پروژه خود اضافه کنيم. در قسمت Name مي‌توانيم يک نام براي فرم خود در نظر بگيريم. همان طور که مشاهده مي‌کنيد پسوند اين فرم‌ها .aspx مي‌باشد. در صورتي که جعبه چک Place code in separate file فعال باشد، صفحه کد VB شما از صفحه طراحي شما جدا مي‌شود و در يک فايل جداگانه قرار مي‌گيرد.

در صورتي که براي وب سايت خود Master Page طراحي کرده باشيد و بخواهيد فرمي که اضافه مي‌کنيد خصوصيات خود را از آن ارث بري کند بايد جعبه چک Select master page را فعال کنيد و سپس Master Page خود را انتخاب کنيد. درباره Master Page در فصل هاي بعد صحبت خواهيم کرد. روي دکمه Add کليک کنيد.

اکنون فرم Default.aspx به پروژه ما اضافه شد. بر روي فلش کنار اين فرم کليک کنيد.

صفحه اي که زير مجموعه اين فرم قرار دارد همان صفحه‌اي است که ما کدهاي VB خود را در آن وارد مي‌کنيم. بر روي فلش کليک کنيد تا به حالت قبل برگرديم.

هر صفحه سه حالت نمايشي دارد. Design که حالت طراحي فرم است، Split که همزمان نمايي از حالت کد و طراحي را نشان مي‌دهد و حالت Code که نمايي است که ما اکنون در آن قرار داريم و کدهاي صفحه را نشان مي‌دهد. بر روي Design کليک کنيد.

در ادامه متني را تايپ مي‌کنيم.
براي تراز و وسط چين کردن متن بر روي قسمت مشخص شده کليک کنيد.

در ادامه متن را Bold کرده و رنگ آن را تغيير مي‌دهيم.
براي ديدن کد توليد شده بر روي Source کليک کنيد.

همان طور که مشاهده مي‌کنيد تگ div به تگ‌هاي قبلي اضافه شده است و اطلاعات وارد شده توسط ما درون آن قرار گرفته است. اکنون مي‌خواهيم تيتر صفحه وب خود را وارد کنيد. بر روي تگ Title کليک کنيد.

اکنون مي‌توانيد بين دو تگ تيتر را وارد کنيد. روش ديگر وارد کردن نام تيتر در قسمت Properties مي‌باشد. بر روي ناحيه مشخص شده کليک کنيد.

عبارت انياک را وارد کنيد.

براي آشنايي بيشتر با تگ‌ها به نرم افزار آموزش Html,JavaScript, Css شرکت انياک قابل دانلود از سايت http://www.learninweb.com مراجعه فرماييد. براي اجراي برنامه روي دکمه Start کليک کنيد يا کليد F5 صفحه کليد را فشار دهيد.

هر پروژه اي که براي بار اول اجرا مي‌کنيد با اين پنجره روبرو مي‌شويد که از شما مي‌پرسد که مي‌خواهيد Debug کردن پروژه را قبل از اجراي آن فعال کنيد يا خير. بر روي دکمه OK کليک کنيد.

اکنون مي‌توانيد خروجي توليد شده را در Internet Explorer مشاهده مي‌کنيد. روي دکمه Close کليک کنيد.

مي‌خواهيم آدرس سايت http://www.learninweb.com در اين صفحه را بصورت لينک در بياوريم تا کاربر با کليک بر روي اين آدرس وارد سايت شرکت انياک شود. دکمه Enter صفحه کليد را فشار دهيد تا به خط بعد برويم.
ماوس خود را بر روي Toolbox ببريد.

روي HyperLink دابل کليک کنيد.

با اين کار يک کنترل به نام HyperLink1 که در پنجره Properties خصوصيات آن نمايش داده شده است به صفحه اضافه شده با استفاده از خصوصيت Text مي‌توانيد متن لينک را تعيين کنيد در ادامه عبارت دانلود مستقيم نرم افزارهاي آموزشي را به عنوان مقدار خصوصيت Text وارد مي‌کنيم.
دکمه Enter صفحه کليد را فشار دهيد تا اين خصوصيت مقدار دهي شود.

اکنون بايد آدرسي که بعد از کليک کردن بر روي لينک بايد وارد آن شويم (آدرس مقصد پيوند) را وارد کنيم.
روي NavigateUrl کليک کنيد.

هنگامي که مي‌خواهيم به صفحه‌اي از صفحات سايتي که در حال ساخت آن هستيم لينک دهيم مي‌توانيم بر روي دکمه ... کليک کرده و صفحه مورد نظر خود را انتخاب کنيم در غير اينصورت بايد آدرس سايت مقصد را تايپ کنيم. در ادامه سايت دانلود نرم افزار‌هاي آموزشي انياک به آدرس http://www.learninweb.com/offline.php را وارد مي‌کنيم.
براي متن هاي بالا نيز مي‌توانستيم به جاي تايپ مستقيم بر روي صفحه فرم از کنترل Label استفاده کرده و خصوصيت Text آن را برابر با مقدار نوشته شده قرار دهيم. براي مشاهده خروجي برنامه بر روي دکمه Start کليک کنيد.

بروي لينک کليک کنيد.

همان طور که مشاهده مي‌کنيد به قسمت دانلود نرم افزار هاي آموزشي انياک منتقل شديم . روي دکمه Close کليک کنيد.

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

برای آموزش ASP کلیک کنید.

منبع: forum.learninweb.com