تبلیغات متنی و بنر

راهکارهای موثر در ASP.Net > راهکار 1 - 4 : ایجاد و ویرایش یک فایل CSS در ASP.Net

مقدمه :

این راهکار ویژگی های کار با روش قالب بندی صفحات وب ( CSS ) در ویژوال استودیو را آموزش می دهد . این راهکار نحوه طراحی قالب یک صفحه 3 ستونه و تکنیک های طراحی یک صفحه جدید و یک فایل قالب بندی CSS یا Style Sheet را بیان می کند . کارهایی که در این راهکار انجام می شوند عبارتند از :

  • ایجاد یک وب سایت معمولی Asp.Net .
  • سفارشی کردن وب سایت بوسیله امکانات CSS .
  • ایجاد یک صفحه 3 ستونه بوسیله قالب CSS .

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

پیش نیازها :

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

  1. Microsoft Visual Studio .
  2. آشنایی با نحوه کار با نرم افزار ویژوال استودیو .

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

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

مرحله دوم - اضافه کردن و تنظیم خواص CSS برای المنت های صفحه :

در مرحله دوم از راهکار ، چندین المنت را در صفحه ایجاد می کنیم تا خواص CSS را به آنها اعمال نمایید . این المنت ها شامل یک تگ <div> بوده که درون آن یک بنر قرار دارد . همچنین ستون های سمت راست و چپ صفحه و یک تگ div دیگر به عنوان پا صفحه یا footer .
این المنت ها گاهی شامل متن ( Text ) بوده که می توانید خواص CSS را به آنها اعمال نموده ، برای این منظور از id یا کلاس های CSS آنها استفاده می شود .

اضافه کردن المنت های مورد نظر به صفحه Default.aspx :

  1. صفحه Default.aspx را باز کرده و به نمای کد Source بروید .
  2. درون المنت <form> ، المنت <div> خالی که از قبل درون صفحه است را پاک نمایید .
  3. کد زیر را درون تگ <form> اضافه کنید :
    کد <div id="pagecontainer">
       <div id="banner">
          <h1>AdventureWorks Styling Page</h1>
          <h2>Making CSS Styling Easier in Design View</h2>
       <div id="search">Find:<input id="searchbox" type="text" />
          <input id="searchbutton" type="button" value="Go" />
       </div>
       </div>
       <div id="leftsidebar" class="column">
          <h3>Matters of the Web</h3>
          <p>   یک متن دلخواه برای ستون سمت چپ</p>
       </div>
       <div id="rightsidebar" class="column">
          <h3>Matters of the Web</h3>
          <p> یک متن دلخواه برای ستون سمت راست</p>
       </div>
       <div id="maincontent" class="column">
          <h2>Matters of the Web</h2>
          <p> یک متن برای ستون اصلی </p>
       </div>
       <div id="footer">
          <p> footer  متن مورد نظر  برای فوتر</p>
       </div>
    </div>
  4. این کد شامل چندین تگ div است که برای تقسیم بندی صفحه به چندین بخش مجزا بکار می رود . هر تگ div دارای یک id یا کلاس است که برای دسترسی به آن در کدهای CSS بکار می رود .
  5. صفحه را ذخیره کنید .
  6. همچنین به نمای Design بروید تا خروجی صفحه را مشاهده کنید .

اعمال کردن Styles به عناصر در نمای Design :

در نمای Design ، شما می توانید خواص CSS را به عناصر صفحه اعمال کرده و نتیجه آن را درجا مشاهده نمایید .بنابراین نیازی ندارید که یک فایل CSS جداگانه را ایجاد کرده و بارها آن را تغییر داده و باز به صفحه رجوع کنید تا ببینید تغییرات مورد نظر شما هستند یا خیر .
در نمای Design ، می توانید CSS Styles را به عناصر یک صفحه از طرق زیر اعمال نمایید : :

  • استفاده از CSS درونی یا Inline CSS : در این حالت خواص CSS هر عنصر را بصورت تکی درون خاصیت style تگ تعیین شده که فقط به همان عنصر نیز اعمال می شود .
  • نوشتن کدهای CSS درون المنت style در بخش head صفحه که می تواند به تمام المنت های آن صفحه اعمال شوند .
  • نوشتن کدهای CSS درون یک فایل خارجی CSS که می توان با لینک آن به هر صفحه ، خواص آن را به تمام صفحات یک سایت اعمال نمود .

در این راهکار ابتدا خواص مورد نظر خود را در تگ style در بخش head صفحه تعیین می کنیم . پس از پایان کار ، مجموعه خواص ایجاد شده را برای دسترسی سایر صفحات به یک فایل CSS خارجی می فرستیم .

قالب بندی بنر صفحه ( Page Banner ) :

اولین عنصری که در صفحه قالب بندی می کنیم ، بنر صفحه است که درون تگ <div id="banner">  قرار گرفته است . در این مثال از تولبار Direct Style Application برنامه برای تغییر استایل و موقعیت بخش heading یا عنوان صفحه استفاده می کنیم . همچنین سایز و رنگ پس زمینه بنر را نیز تعیین خواهیم کرد .
مراحل زیر را انجام دهید :

  1. در نمای Design ، متن بنر در قسمت heading صفحه که دارای عبارت "AdventureWorks Styling Page" است را کلیک نمایید .
  2. از منوی Format  ، گزینه New Style را انتخاب کنید . کادر محاوره ای  New Style مطابق تصویر زیر ، باز می شود .
  3. در لیست Selector ، گزینه h1 را کلیک نمایید ، در نتیجه شما می توانید خصوصیاتی CSS ای را تعیین نمایید که فقط به عناصر صفحه جاری اعمال شوند . توجه داشته باشید که گزینه Define in بر روی مقدار Current page تنظیم شده باشد تا خواص فقط به عناصر صفحه جاری اعمال شوند .مال شوند .مال شوند .
  4. در لیست font-family فونت Impact یا هر نوع فونت دیگری که دوست دارید را انتخاب نمایید .
  5. در جعبه font-size ، گزینه x-large را انتخاب نمایید . در جعبه font-variant نیز ، گزینه small-caps را کلیک کرده و سپس OK کنید .
  6. برای مشاهده خواص استایل CSS ای که ایجاد کرده اید به نمای کد Source رفته و تگ style در بخش head صفحه را ببندید . مشاهده می کنید که خواص لازم برای عنصر h1 تعیین شده است .
  7. مراحل زیر را نیز در روشی مشابه برای قالب دهی عنصر h2 انجام دهید
    1. عنصر h2 را در صفحه انتخاب کنید .
    2. پنجره New Style را طبق مرحله 2 ( بالا ) باز کنید .
    3. عنصر h2 را از کادر انتخاب کرده و خواص font-family و font-size را برای آن تعیین نموده و OK نمایید .

تعیین اندازه بنر و موقعیت دهی عناصر درون آن :

می توانید سایز و موقعیت بنر و محتویات درونی آن را بوسیله تولبار Direct Style Application در نمای Design تعیین کنید . خواص CSS ایجاد شده درون صفحه جاری و در بخش تگ style قسمت head قرار خواهد گرفت . برای تعیین اندازه بنر و محتویات آن مراحل زیر را انجام دهید :

  1. به نمای Design بروید .
  2. متن المنت h1 که معادل "AdventureWorks Styling Page" است را انتخاب کرده سپس دکمه ESC را دوبار پشت سر هم زده تا عنصر بیرونی آن که تگ div است ، انتخاب شود .
  3. علامت فلش مانندی که در گوشه سمت راست عنصر div قرار دارد تا برای تغییر اندازه آن حرکت دهید .
  4. دقت نمایید که در هنگام تغییر اندازه عنصر div ، برنامه بصورت tooltip عرض و ارتفاع عنصر را نمایش می دهد . عرض عنصر را روی 780 پیکسل و ارتفاع 125 پیکسل تعیین کنید .
  5. برای مشاهده خواص CSS ایجاد شده برای اندازه عنصر  div ، در نمای split به بخش style تگ head رفته و خواهید دید که کدی برای عنصر div با علامت banner# ایجاد شده است .
  6. به نمای Design برگشته و از منوی Format برنامه گزینه Borders and Shading را انتخاب کنید . کادر محاوره Borders and Shading باز می شود .
  7. لبه Shading  را انتخاب کرده ، گزینه Background color  را کلیک کرده و دکمه فرمان More Colors را فشار دهید . کادر کشویی More Colors باز می شود . رنگ مورد نظر خود را از آن انتخاب کرده و OK نمایید .
  8. خواهید دید که خاصیت background-color را به مجموعه خواص CSS المنت اضافه شده است .

نحوه موقعیت دهی عناصر درونی بنر :

  1. در نمای Design ، المنت h1 را انتخاب نمایید .
  2. از منوی Format ، گزینه Paragraph را انتخاب نمایید . کادر محاوره ای Paragraph باز می شود .
  3. درون کادر Paragraph ، از لیست کشویی Alignment ، گزینه Center را انتخاب نموده تا متن در وسط صفحه تراز شود .
  4. المنت h2 را انتخاب کرده و مراحل فوق را برای آن تکرار کنید .
  5. برای کامل نمودن تنظیم خواص بنر ، شما باید المنت div با id برابر search را نیز بر روی بنر تنظیم نمایید برای این منظور نیز از یک قابلیت دیگر ویژوال استودیو ، به نام گرید موقعیت دهی استفاده می کنیم . بصورت زیر :
    1. در نمای Design ، المنت div با id برابر search انتخاب نمایید .
    2. از منوی Format ، گزینه Ste Position را کلیک کرده وسپس آیتم Absolute را انتخاب کنید .
    3. المنت div با id برابر با search را بر روی صفحه درگ کرده و در مکان مورد نظرتان در سمت راست عبارت هدر قرار دهید .

ایجاد یک قالب 3 ستونه قابل انعطاف :

در این بخش از راهکار ، یک قالب 3 ستونه قالب انعطاف را با استفاده از خاصیت float در CSS ، ایجاد می کنیم . در ابتدا اندازه و موقعیت ستون های سمت راست و چپ کناری را تنظیم نموده ، سپس می توانیم حاسیه درونی و اندازه ستون میانی را برای ایجاد یک قالب انعطاف پذیر تعیین کنیم  .
نحوه تعیین اندازه و موقعیت ستون های سمت راست و چپ صفحه :

  1. در نمای Design ، عنصر div با id برابر با left sidebar را انتخاب کنید ( باید عنصر div#leftsidebar.column انتخاب شده باشد ).
  2. لبه سمت راست ستون سمت چپ را درگ کرده تا عرض آن به اندازه 200 پیکسل شود .
  3. از منوی Format برنامه گزینه Position را انتخاب نمایید . کادر Position باز می شود .
  4. مقدار خاصیت Wrapping style را بر روی left قرار داده و OK نمایید .
  5. ستون سمت راست را انتخاب نموده و لبه سمت چپ آن را درگ کرده تا عرض آن 290 پیکسل شود .
  6. مجددا از منوی Format برنامه گزینه Position را انتخاب کرده و از کادر باز شده مقدار خاصیت Wrapping style را بر روی right تنظیم نمایید . سپس OK را بزنید .

تنظیم خواص ستون میانی :

  1. در نمای Design ، عنصر div با id برابر با maincontent را انتخاب کنید .
  2. سپس به حالت source رفته و خواص زیر را در تگ style بخش head صفحه وارد کنید تا برای ستون میانی حاشیه های لازم را تعیین کنید :
    کد #maincontent
       {
          margin-right: 290px;
          margin-left: 210px;
       }
  3. سپس از منوی Format ، گزینه Borders and Shading را انتخاب کنید . پنجره Borders and Shading باز می شود . مطابق تصویر زیر :
  4. در زیر قسمت Setting ، گزینه Custom را انتخاب کنید .
  5. در لیست Style ، گزینه Solid را انتخاب کرده و در زیر قسمت Preview ، خطوط حاشیه سمت راست و چپ آن را علامت بزنید .
  6. در کادر width ، مقدار 1px را وارد نمایید . در زیر قسمت Padding ، در هر دو کادر راست و چپ ، مقدار 10px را وارد نموده و OK کنید .
  7. در قسمت کد Source ، دقت کنید که خصوصیات CSS برای عنصر maincontent# به روز شده است .

تنظیم footer یا پایین صفحه :

اگر کار بر صفحه را resize کرده یا صفحه بر روی یک مانیتور با ابعاد بزرگ نمایش داده شود ، عنصر footer ممکن است کوچک شده و فقط در زیر یکی از ستون ها نمایش داده شود ( به جای نمایش در تمام عرض صفحه ) . برای جلوگیری از این ناهمخوانی ، مقدار خاصیت clear را برای عنصر footer تنظیم می کنیم :

  1. در نمای Design ، تگ div با id برابر footer را انتخاب کنید .
  2. از منوی Format ، گزینه New Style را انتخاب نمایید تا پنجره مربوطه باز شود .
  3. از پنجره باز شده در قسمت Selector ، گزینه footer# را انتخاب کنید .
  4. از لیست Category ، گزینه Layout را انتخاب کنید .
  5. از لیست clear ، نیز گزینه both را کلیک کرده سپس OK کنید .

نحوه ایجاد و استفاده از یک فایل Style Sheet :

در مراحل قبلی این راهکار با تعیین خصوصیات مورد نظرمان برای عناصر مختلف صفحه ، کدهای CSS ای را تولید کردیم که همگی در تگ style بخش head صفحه قرار گرفتند . این خواص فقط برای صفحه جاری و عناصر آن قابل استفاده خواهند بود . روش دیگر برای نگهداری خواص CSS ، قرار دادن آنها در یک فایل استایل شیت خارجی CSS است . در این حالت ، می توانید با لینک کردن تمام صفحات وب سایتتان یا صفحات مورد نظر به آن فایل CSS ، خواص موجود در آن را به همه صفحات اعمال نمایید . در این بخش نحوه انجام این عملیات را تشریح کرده ایم :

نحوه ایجاد یک فایل استایل شیت و چسباندن آن صفحه :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را بزنید .
  2. در لیست templates از پنجره باز شده ، گزینه Style Sheet را انتخاب کنید و نام آن را Layout.css تعیین کرده و گزینه Add را بزنید . مثل تصویر زیر :
  3. یک فایل CSS خالی به سایت اضافه خواهد شد .
  4. در صفحه Default.aspx به نمای Design بروید .
  5. از منوی View ، گزینه Manage Styles را کلیک کرده تا پنجره مربوطه باز شود . مطابق تصویر زیر :
  6. در تولبار پنجره Manage Styles ، گزینه Attach Style Sheet را بزنید .
  7. پنجره Select Style Sheet نمایش داده می شود . فایل Layout.css را انتخاب کرده و گزینه Ok را بزنید .
  8. یک لبه جدید با نام Layout.css در پنجره Manage Styles ایجاد می شود . این مسئله نشان می دهد که فایل Layout.css به صفحه جاری پیوند خورده است . همچنین اگر به نمای Source کد صفحه بروید خواهید دید لینکی مشابه لینک زیر به بخش head صفحه اضافه شده است :
    کد <link   href="Layout.css"        rel="stylesheet"        type="text/css" />

روش های دیگری بجز روش فوق برای اتصال یک فایل CSS صفحه ASP.Net نیز وجود دارد . برای مثال می توانید فایل CSS را از منوی Solution Explorer درگ کرده و در قسمت head صفحه رها کنید .

انتقال خواص تعیین شده CSS از یک صفحه به یک فایل استایل شیت CSS :

شما می توانید از پنل Manage Styles برای انتقال خواص ( Styles ) از یک صفحه به صفحه دیگر استفاده کرده و یا مشاهده اینکه خواص CSS چگونه در یک صفحه تنظیم شده اند .
با انجام مراحل زیر ، کدهای CSS ای که در صفحه جاری ایجاد کرده اید را می توانید به فایل استایل شیت CSS ایجاد شده منتقل کنید : ه منتقل کنید :

  1. به صفحه Default.apsx رفته و آن را در نمای Design قرار دهید .
  2. در لبه Current Page پنجره Manage Styles ، کلیه خواص Styles را انتخاب کنید .
  3. کلیه خواص انتخاب شده را به لبه Layout.css در پنجره Manage Styles درگ کنید .

با انجام مراحل فوق کلیه خواص CSS از فایل Default.apx به فایل Layout.css انتقال میابد . سپس می توانید این قالب را برای سایر صفحات نیز استفاده نمایید .

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


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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟  
حمایت از سایت Developer1