قالب ها در HTML

یادگیری HTML

تعداد بازدید : 5017

تاریخ و ساعت انتشار : سه شنبه 7 دی 1395 08:24

مثال :

قالب ها

<style>
div.container {
    width: 100%;
    border: 1px solid gray;
    direction:rtl;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: right;
    text-align: center;
    direction:rtl;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
    direction:rtl;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>

مشاهده مثال

عناصر قالب در HTML

وب سايت ها معمولا محتوا را در ستون هاي متعدد نمايش مي دهند. (مانند روزنامه يا مجله). در HTML5 عناصر معنايي جديدي پيشنهاد مي شود كه قسمت هاي مختلفي از يك صفحه وب را تعريف مي كنند.

<header> - يك سربرگ براي سند يا بخشي از سند تعيين مي كند.
<nav> - يك محل براي قراردادن لينك هاي ناوبري ايجاد مي كند.
<section> - يك بخش مشخص در سند ايجاد مي كند.
<article> - يك مقاله جامع مستقل ايجاد مي كند.
<aside> - محتوايي در كنار محتواي اصلي (مانند سايد بار) تعريف مي كند.
<footer> - يك پاورقي براي يك صفحه وب يا بخشي از آن تعيين مي كند.
<details> - اطلاعات تكميلي و اختياري تعريف مي كند.
<summary> - يك تيتر براي بخش <details> اضافه مي كند.

تكنيك هاي قالب دهي در HTML

در حالت كلي 4 روش براي ايجاد قالب هاي چند ستوني وجود دارد كه هر كدام مزايا و معايب خود را دارند :

جداول HTML
صفت float در CSS
فريم ورك CSS
flexbox در CSS

از كدام گزينه استفاده كنيم؟

<table>
عنصر <table> براي قالب دهي طراحي نشده است! اين عنصر براي نمايش اطلاعات جدولي است. پس براي قالب دهي به صفحات وب از <table> استفاده نكنيد. زيرا درهم ريختگي بسياري در كدهاي شما به وجود خواهد آورد.
و البته اين را هم تصور كنيد كه طراحي دوباره وب سايت بعد از دوماه چقدر سخت خواهد بود.

پس : از به کار بردن جداول براي قالب دهي به صفحات خود جدا خودداري كنيد!‌

فريم ورك هاي CSS

اگر نياز به طراحي و قالب دهي سريع وب سايت داريد ،‌مي توانيد از فريم ورك هاي CSS مانند bootstrap استفاده كنيد.

صفت float در CSS

استفاده از اين صفت براي طراحي كل قالب وب سايت متداول است. يادگيري float آسان است. فقط كافي است بدانيد float و clear چگونه عمل مي كنند. معايب : عناصر float مانند اين مي ماند كه آن را به جريان كلي (بدنه اصلي) سند بسته باشند،‌كه در اصل براي انعطاف آن مضر است.
براي يادگيري بيشتر در اين باره به فصل float در CSS مراجعه كنيد.

مثال float :

float

<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: right;
    text-align: center;
}
nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul a {
    text-decoration: none;
}
article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>

مشاهده مثال

Flexbox در CSS

Flexbox حالت جديدي از قالب دهي در CSS3 مي باشد. استفاده از Flexbox اين اطمينان را مي دهد كه عناصر به هنگام تطبيق قالب صفحه با اندازه هاي مختلف نمايش دهنده يا اندازه صفحه دستگاه هاي مختلف ،‌ رفتار قابل پيش بيني داشته باشند. معايب : اين صفت در اينترنت اكسپلورر 10 و قبل تر ،‌ كار نمي كند.
درباره Flexbox بيشتر در درس مربوط به آن ياد خواهيد گرفت.

مثال Flexbox :

Flexbox

.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما