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

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

دسته بندی موضوعات
سفارش تبلیغات

لایه بندی در 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 کدنویسی خواهیم کرد . پس با ما همراه باشید .

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • محمد

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

    • میترا رحیمی

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

  • علیرضا کریمی نژاد

    ممنون به خاطر توضیحات خوبتون
    عالی بود

  • مریم ابراهیمی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟