طرح بندی HTML

طرح بندی HTML

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

layout HTML طرح بندی HTML طرح بندی HTML layout HTML

طرح بندی وب سایت

اکثر وب سایت ها محتوای خود را در ستون های مختلف قرار می دهند(قالب بندی شده مانند یک مجله یا روزنامه).چند ستون را با استفاده از تگ های جدول و یا <div> میتوان ایجاد کرد.

طرح بندی صفحات HTML به وسیله تگ <div>

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

مثال:چگونگی اضافه کردن طرح با استفاده از عنصر <div> 

که نتیجه آن به صورت زیر خواهد بود.

طرح بندی HTML طرح بندی HTML طرح بندی HTML Capture1 1

طرح بندی HTML

طرح بندی اچ تی ام ال — با استفاده از جداول

ساده ترین راه برای ایجاد طرح بندی  استفاده از تگ table(جدول)  است. 

طرح بندی HTML طرح بندی HTML طرح بندی HTML Capture1 1

طرح بندی HTML

نکته:

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

طرح بندی وب سایت

محتوای اکثر وب سایت ها، در چند ستون (مانند صفحه آرایی یک مجله و یا روزنامه) قرار داده شده است. طرح بندی چند ستونی با استفاده از عناصر <div> و یا <table> ایجاد شده است. CSS برای موقعیت گذاری عناصر، و یا برای ایجاد زمینه ها یا منظره رنگارنگ برای صفحات وب استفاده می شوند. حتی اگر ایجاد طرح بندی های زیبا با استفاده از جداول HTML ممکن باشد ، جداول برای ارائه داده های جدولی طراحی شده و نه به عنوان ابزار طرح بندی!

چیدمان HTML – نکات مفید

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

برچسب های طرح بندی HTML

برچسب توضیحات
<div> یک بخش در یک سند را تعریف می کند(سطح بلوک)
<span> یک بخش در یک سند را تعریف می کند(درون خطی)
نکته:

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

از آنجا که طرح بندی پیشرفته، نیاز به زمان برای ایجاد دارد گزینه سریعتر استفاده از یک قالب(استفاده از روش div) است.

 

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

دیدگاه خود را بیان کنید