آموزش طراحی وب

لایه بندی در html

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

layout

فصل سوم ( معرفی ساختار  HTML4 )

جلسه دهم (layout در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

امروز میخوایم راجع به لایه ها و طرح بندی صفحات وب صحبت کنیم . شما با استفاده از عنصر <div> میتونید عناصر درون صفحه ی وبتون رو گروه بندی کنید . مثلا هدر سایتتون رو درون یک div به نام header قرار بدید ، سایدبار کنار سایتتون رو درون یک div با نام  sidebar  قرار بدید ، محتوای سایتتون رو درون یک div با نام content  قرار بدید و فوتر سایتتون رو درون یک div با نام footer قرار بدید .  به تصویر زیر دقت کنید :

لایه بندی در html

در اینجا ما صفحه ی وب رو به بخش های اصلی header  ، SideBar ، Content ،  Footer تقسیم کردیم . این تقسیم بندی بصورت زیر انجام میشه :

 هر محتوا و عنصری که به بخش header مربوط باشه درون  div هدر قرار میگیره و به همین ترتیب ، عناصر و محتوای مربوط به sidebar درون div سایدبار قرار میگیره و … .

تا اینجا ما تونستیم توی HTML لایه بندی مورد نظرمون و انجام بدیم . برای اینکه بتونیم لایه ها رو شکیل تر کنیم باید از css استفاده کنیم . در این جلسه تا حدودی به استایل دهی لایه بندی ها اشاره می کنیم اما برای آموزش کامل ابتدا باید بخش آموزش فصلی css رو مطالعه کنید ، سپس فصل آخر بخش html که ایجاد پروژه ی عملی هست رو دنبال کنید . در فصل آخر یک قالب گرافیکی رو طی چند جلسه به همراه هم به کد تبدیل می کنیم و در انتهای هر جلسه هم فیلم آموزشی اون بخش رو جهت دانلود رایگان در اختیار شما دوستان قرار خواهیم داد .

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

ابتدا یک لایه اصلی تو صفحه قرار میدیم ، که بتونیم تعریف کنیم قالب ما وسط صفحه قرار بگیره و تمامی عناصر و محتوای قالب رو توی این لایه گروه بندی کنیم . اسم این لایه رو container میذاریم :

 حالا به این لایه استایل میدیم :

 مرحله بعد قرار دادن لایه ی هدر هست :

 مرحله ی بعد قرار دادن لایه ی سایدبار هست :

  تواین مرحله برای اینکه بتونیم لایه ی سایدبار و کنار لایه ی محتوا قرار بدیم باید به لایه ی sidebar دستور float:right و به لایه ی content دستور float:left رو بدیم . با این دستورات لایه ی sidebar رو به سمت راست صفحه میچسبونیم و لایه ی content رو سمت چپ صفحه میچسبونیم و در نهایت این دو لایه رو کنارهم قرار میدیم .

حالا نوبت به لایه ی content یا محتوا میرسه :

 و در آخر لایه footer رو قرار میدیم و استایل دهی می کنیم . خوب قبل از اینکه بخوایم وارد لایه ی فوتر بشیم باید خاصیت float لایه های قبل رو خنثی کنیم تا لایه ی بعدی به درستی سرجای خودش قرار بگیره . برای اینکار از clear:both استفاده می کنیم . بعد از لایه content یک عنصر div با استایل زیر قرار میدیم :

حالا که همه چیز مرتب شد ، لایه ی فوتر رو قرار میدیم :

  نتیجه ی نهایی این لایه بندی به شکل زیر هست :

layout

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

میتونید فایل این جلسه رو هم دانلود کنید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

  • سلام
    ضمن تشکر مطالب HTML هر چی جلو تر میره بیشتر با css ترکیب میشه.من اصلا css بلد نیستم .به نظر شما همینجا رها کنم برم css شروع کنم و بعدش بیام ادامه بدم یا اینکه هر جوری شده تا اخر HTML بخونم بعدش css شروع کنم؟؟
    مرسی

    • سلام دوست عزیز
      می تونید فعلا مبانی css رو شروع کنید ، مبانی رو که یاد بگیرید کافیه ، میتونید html رو تا آخر مطالعه کنید .
      بعد میتونید بخش css رو هم بطور کامل مطالعه کنید .
      در نهایت هم تا ماه آینده یک پروژه ی عملی هم شروع می کنیم و قدم به قدم تبدیل psd به html رو با فیلم آموزشی بطور رایگان میاموزید .

  • با سلام ، در ابتدا از شما آقای حسین همت یار که لطف می کنید و این مطالب بسیار مفید را در اختیار علاقه مندان به یادگیری مباحث مربوط به طراحی و پیاده سازی سایت ها قرار می دهید ، کمال تشکر و سپاس را دارم ، امید وارم که خداوند متعال شما را در تمام مراحل زندگیثان همواره یاری نموده و بهترین هدیه های دنیوی و اخروی را نصیبتان کند ان شاألله . من تکه کد انتهایی بالا را اجرا کردم ، در صفحه مرورگر بین لایه slidebar و content یک فضای خالی سفید رنگ ایجاد می شود ، لطف می کنید دلیلش را توضیح دهید و این که برای رفع این مشکل چه باید کرد ؟ باز هم ممنون .

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین