آموزش طراحی وب (قسمت چهارم)

فهرست مطالب این قسمت:

• چگونگی نام گذاری و گروه بندی المان ها یا تگ های یک صفحه html

• کاربرد گروه بندی و نام گذاری تگ ها

• تقسیم بندی صفحه به چند بخش مختلف

• استایل دهی چیست و چگونگی اعمال استایل به صفحات وب

   

   

  گروه بندی المان ها:

  برای اینکه چند المان یا تگ را در یک گروه قرار دهیم از خصوصیت class استفاده می کنیم. برعکس نام المان ها(id) که می بایست منحصر به فرد باشد در class ها میتوانیم چنددین المان را در یک گروه قرار دهیم. به عبارت دیگر در یک صفحه از یک id فقط برای یک المان میتوان استفاده کرد ولی از یک class برای چندین المان می توانیم استفاده کنیم.

  در کد زیر یک پاراگراف و یک هدر را در یک گروه به نام c1 قرار می دهیم.
  

   

  

   

  همان طور که مشاهده می کنید برای هر دو المان p و h1 از یک class استفاده شده است.

    

  کاربرد نام گذاری و گروه بندی المان ها:

   

  بر طبق استاندارد کنسریوم وب جهانی یا w3c کلیه دستوراتی که مربوط به فرمت کردن یا قالب بندی صفحات وب بود مانند اندازه ، نوع و رنگ متن ها ، رنگ بندی و تعیین رنگ پس زمینه و ... از دستورات html جدا و در قالب یک زبان به نام css ارائه شد.

   

  در واقع بیشترین کاربرد id و class که در بخش قبل ذکر شد در استفاده از css برای قالب بندی صفحات html می باشد.

   

  اگر چه دستورات html بسیار زیاد می باشند ولی با توجه به رویکرد این آموزش از ذکر سلسله وار دستورات خودداری می کنم و در حین انجام و تشریح پروژه عملی دستورات بیشتری را توضیح می دهم.

   

   تقسیم بندی صفحات به بخش های مختلف:

   

  برای ایجاد بخش های مختلف در یک صفحه html از تگ div استفاده می کنیم.

  به طور مثال فرض کنید میخواهیم یک بخش از صفحه وب خود ایجاد کنیم که دستورات مربوط به جستجو را در  آن قرار دهیم:
  

   

   

   

  در قطعه کد بالا با استفاده از تگ div یک بخش ایجاده کرده ایم و با استفاده از خصیصه id نام آن را search گذاشته ایم.

  با استفاده از کد زیر میتوانیم بخش search را درون یک بخش دیگر قرار دهیم.
  

  
  

   

  لازم است بدانید که میتوانیم بخش های تو در تو زیادی با استفاده از تگ div ایجاد کنیم.

   

   افزودن توضیحات به صفحات وب:

   

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

   

  توضیحات درج شده در صفحات html در صفحه وب سایت شما نمایش داده نمیشوند.

   

  برای درج توضیحات از کد زیر در محل مناسب استفاده می کنیم. در خط زیر برای نمونه توضیحات در مقابل یک تگ p قرار گرفته است:

  
  

   

   

  ایجاد تولتیپ tool tip برای المان های یک صفحه وب:

   

  با استفاده از خصیصه  titleمیتوانید برای هر یک از المان های موجود در یک صفحه وب یک tool tip بسازید. Tool tip کاربرد های بسیار زیادی دارد ولی یکی از مهمترین آنها ارائه اطلاعات در مورد المان های یک فرم است.

   برای ایجاد یک tool tip باید خصیصه title را در المان مورد نظر مقدار دهی کنیم. به طور مثال در قطعه کد زیر میخواهیم با قرار گیری موس روی یک لینک عبارت «برای مشاهده وب سایت کلیک نمایید» در کنار موس نمایش داده شود.

  
  

   

  استایل چیست:

  منظور از استایل ، فرمت کردن و قالب بندی صفحات وب می باشد. استایل دهی و قالب بندی صفحات وب به وسیله زبان css اعمال می شوند. css مخفف عبارت cascading style sheet وب به معنی شیوه نامه های آبشاری می باشد.

  css در بر گیرنده تمام دستورات مربوط به فرمت صفحات و قالب بندی آنها می باشد. دستوراتی مانند اندازه ، نوع و رنگ متن ها ، رنگ بندی صفحات ، تعیین محل دقیق قرارگیری المان ها و ... در css قرار دارند.

  اعمال کردن استایل های css به صفحات html :

  برای اینکه به المان های یک صفحه html استایل بدهید به 3 روش میتوانید عمل کنید که روش اول و دوم را فقط ذکر می کنم و روش سوم را کامل توضیح می دهم.

  روش اول : استفاده از تگ های css در داخل تگ های html

  با استفاده از خصیصه style میتوانید از دستورات css درون کد های html وارد کنید.

   

   

  روش دوم : استفاده از دستورات css در بین تگ head

   

  در این حالت از تگ style در بین تگ head استفاده می کنیم و دستورات css را در بین تگ آغاز و پایان style می نویسیم.

   

  همانطور که قبلا ذکر شد محتویات تگ head در صفحات وب قابل مشاهده نیستند.

   

   روش سوم : استفاده از دستورات css در یک فایل جداگانه

   

  این روش بهترین روش برای استایل دهی صفحات html است. یک فایل جدید از نوع css در نرم افزار dreamweaver باز می کنیم و آن را با پسوند css در مسیر صفحه اصلی وب سایت یعنی در کنار فایل index.html ذخیره می کنیم. به طور مثال نام این فایل را style.css قرار می دهیم.

   

  حال برای اتصال صفحه وب به فایل استایل یعنی style.css از کد زیر استفاده می کنیم:

  

  مانند شکل زیر این خط باید در بین دو تگ head قرار گیرد:

  

  اکنون شما در فایل index.html فقط دستورات مربوط به محتوای صفحه وب و در فایل style.css دستورات css و قالب بندی صفحه را مینویسید. بر اساس استاندارد کنسرسیوم وب w3c بایستی دستورات مربوط به قالب بندی و فرمت صفحات وب از دستورات محتوای صفحات جدا باشد.

  اگر بخواهیم به ترتیب اولویت بکارگیری هر یک از سه روش فوق را نام ببریم باید آنها را از آخر به اول نام ببریم. یعنی ابتدا روش سوم (ایجاد یک فایل استایل خارجی) بعد روش دوم (استفاده از دستورات css در بین تگ head) و در نهایت اگر مجبور بودیم و در بدترین حالت استفاده از روش اول (بکارگیری دستورات css درون تگ های html).

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

  {phocadownload view=file|id=19|text=برای دانلود فایل pdf این آموزش کلیک نمایید|target=s}

  برای دانلود این فایل باید وارد سایت شوید و یا در سایت ثبت نام نمایید

  پایان قسمت چهارم