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

جستجو ...


هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

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


هنگامی که در طراحی سایت صفحاتی را با استفاده از HTML برای وب سایت خود طراحی می‌کنیم، باید دقت کنیم که وب سایت ما علاوه بر کارایی، ظاهر زیبایی هم داشته باشد. تنها از این راه است که یک وب سایت می‌تواند علاوه بر استفاده از استراتژی انتقال محتوای مفید، با چشم نواز بودن هم کاربران را به خود جذب کند. شما می‌توانید با استفاده از عناصر مخصوصی که در HTML وجود دارد و همچنین با استفاده از ویژگی‌های CSS به این هدف دست یابید. در این مقاله قصد داریم دو فاکتور مهم در طراحی وب سایت یعنی Layout یا چیدمان و طراحی واکنش گرا در HTML را به شما معرفی کنیم.

چیدمان (Layout) در HTML

طراحی واکنش گرا در HTML

بیشتر بخوانید:

HTML چیست و چه کاربردی دارد؟

سایت‌ها اغلب محتوا را مانند مجلات یا روزنامه‌ها در چندین ستون نمایش می‌دهند. HTML5 عناصر معنایی جدیدی ارائه می‌دهد که بخش‌های مختلف از یک صفحه وب را تعریف می‌کنند:

چیدمان در HTML

  • <header> : یک تیتر برای سند یا بخش تعریف می‌کند
  • <nav> : یک محفظه برای لینک‌های راهبری (navigation) تعریف می‌کند
  • <section> : یک بخش در یک سند را تعریف می‌کند
  • <article> : یک مقاله مستقل تعریف می کند
  • <aside> : محتوایی را مانند یک sidebar در کنار محتوای دیگر تعریف می کند
  • <footer> : یک پانویس برای یک سند یا بخش تعریف می‌کند
  • <details> : جزئیات بیشتر را تعریف می‌کند
  • <summary> : یک عنوان برای عنصر <details> تعریف می‌کند

تکنیک‌ های چیدمان در HTML

چهار روش مختلف برای ایجاد چیدمان‌ها مختلف در HTML وجود دارد که هر یک مزایا و معایبی دارند. این چهار روش شامل موارد زیر است:

  • جداول در HTML
  • ویژگی شناور بودن (float) در CSS
  • فریم ورک در CSS
  • flexbox در CSS

جداول در HTML

عنصر <table> به عنوان ابزاری برای چیدمان (Layout) طراحی نشده است. هدف از طراحی این عنصر نمایش داده‌های جدولی است. بنابراین از جداول برای چیدمان صفحه خود استفاده نکنید. چون این کار باعث درهم ریختگی در کدها شده و کار طراحی مجدد سایت را با دشواری‌هایی رو به رو می‌سازد.

فریم ورک های CSS

اگر می‌خواهید چیدمان صفحه سایت خود را سریع ایجاد کنید، می‌توانید از فریم ورک‌هایی مانند W3.CSS یا بوت استرپ (Bootstrap) استفاده کنید.

ویژگی Float در CSS

float در css

بیشتر بخوانید:

CSS چیست و چه کاربردی دارد؟

معمولا در بین برنامه‌نویسان رایج است که تمام layout وب‌سایت خود را با استفاده از ویژگی float (شناور بودن) در CSS انجام دهند. یادگیری این ویژگی بسیار آسان است فقط باید یادتان باشد ویژگی‌های float و clear چطور کار می‌کنند. معایب این روش این است که عناصر float به آرایش صفحه متصل هستند و می‌توانند به انعطاف‌پذیری آن آسیب برسانند.

Flexbox در CSS

flexbox در CSS

بیشتر یاد بگیرید:

دوره رایگان آموزش CSS مقدماتی برای طراحی سایت

فلکس باکس حالت جدیدی از چیدمان است که در CSS3 ارائه شد. استفاده از این ویژگی این اطمینان را ایجاد می‌کند که وقتی چیدمان صفحه متناسب با نمایشگر‌های مختلف با اندازه‌های متفاوت در انواع دستگاه‌ها تطبیق پیدا می‌کند، عناصر صفحه همانطور که پیش‌بینی شده است رفتار کنند. معایب استفاده از این روش شامل اجرا نشدن در اینترنت اکسپلورر ۱۰ و نسخه‌های قبل از آن است:

آموزش طراحی سایت واکنش گرا در HTML

طراحی واکنش گرا در HTMLطراحی واکنش گرا یا Responsive باعث می‌شود صفحات سایت شما در تمام دستگاه‌ها (دسکتاپ، تپلت و گوشی‌های موبایل) به خوبی نمایش داده شود. طراحی وب به صورت واکنش گرا به معنی استفاده از HTML و CSS برای تغییر اندازه، مخفی کردن، کوچک یا بزرگ کردن یا حرکت محتوا برای نمایش بهتر آن در هر صفحه نمایشی است. 

تنظیم Viewport

در زمان ایجاد صفحات وب به صورت واکنش گرا، عنصر <meta> زیر را در تمام صفحات وب‌سایت خود اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این کد viewport صفحه شما را تنظیم کرده و دستورالعمل چگونگی کنترل ابعاد و مقیاس محتوای صفحه را به مرورگر می‌دهد. در اینجا مثالی از یک صفحه بدون متا تگ viewport و همان صفحه با استفاده از متا تگ viewport آورده شده است:

 

طراحی واکنش گرا در HTML

 

تصاویر واکنش گرا

تصاویر واکنش گرا به تصاویری گفته می‌شود که برای انطباق با هر نوع اندازه مرورگری تغییر سایز پیدا می‌‌کنند.

استفاده از ویژگی width

اگر ویژگی width را روی ۱۰۰ درصد تنظیم کنیم، تصویر به صورت واکنش گرا خواهد بود و افزایش یا کاهش اندازه خواهد یافت:

 

تصاویر واکنش گرا

 

<img src="img_girl.jpg" style="width:100%;">

توجه داشته باشید که در مثال بالا، تصویر می‌تواند به مقیاسی بزرگ‌تر از اندازه اصلی خود تغییر سایز پیدا کند. راه حل بهتر در بسیاری از موارد می‌تواند استفاده از ویژگی max-width باشد.

استفاده از ویژگی max-width

اگر ویژگی max-width را روی ۱۰۰ درصد تنظیم کنید تصویر در صورت نیاز به اندازه‌های کوچک‌تر تغییر سایز پیدا می‌کند اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:

استفاده از max-width

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

نمایش تصاویر متفاوت با توجه به عرض مرورگر

عنصر <picture> در HTML به شما امکان تعریف تصاویر مختلف برای اندازه‌های مختلف پنجره مرورگر را می‌دهد. مثلا تصور کنید در حالت عادی صفحه نمایش یک گلدان پر از گل به طور کامل نمایش می‌یابد. هرچه اندازه صفحه را کوچک‌تر کنید طبق دستورالعملی که قبلا به مرورگر داده‌اید بخش‌های مختلفی از تصویر نمایش داده می‌شود. در انتها اگر صفحه را به کوچک‌ترین حالت ممکن تغییر دهید تنها یک غنچه از تصویر نمایش می‌یابد. 

اندازه متن واکنش گرا

اندازه متن می‌تواند با یک واحد “vw” تنظیم شود که به معنی «viewport width» است. با استفاده از این روش، اندازه متن از اندازه پنجره مرورگر پیروی خواهد کرد. به این ترتیب که اگر پنجره مرورگر بزرگ‌تر یا کوچک‌تر شود، متن هم به همان نسبت تغییر اندازه پیدا می‌کند. 

متن واکنش گرا

<h1 style="font-size:10vw">Hello World</h1>

مدیا کوئری

علاوه بر تغییر اندازه متن و تصویر، در بین برنامه‌نویسان استفاده از مدیا کوئری (media query) در صفحات واکنش گرای وب بسیار رایج است. شما با استفاده از مدیا کوئری می‌توانید استایل‌های کاملا متفاوتی برای اندازه‌های مختلف مرورگر تعریف کنید. در نمونه کد زیر مشخص شده است که با هر بار تغییر پنجره مرورگر، در نوار زیر چه تغییراتی ایجاد شود:

مدیا کوئری

<style>
.left, .right {
  float:left;
  width:20%; /*The width is 20%, by default*/
}

.main {
  float:left;
  width:60%; /*The width is 60%, by default*/
}

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
  .left, .main, .right {
    width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
  }
}
</style>

صفحه وب واکنش گرا

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

صفحه واکنش گرا

فریم پورک‌های CSS بسیاری وجود دارد که طراحی واکنش گرا ارائه می‌دهند. برخی از آن‌ها رایگان بوده و روش استفاده آسانی دارند.

بیشتر بخوانید:

ترفندهای فوق العاده در طراحی سایت

استفاده از بوت استرپ

یکی از فریم‌ورک‌های بسیار محبوب CSS، فریم‌ورک بوت استرپ (Bootstrap) است که از HTML، CSS و جی کوئری (jQuery) برای ایجاد صفحات واکنش گرا استفاده می‌کند:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

هر چقدر در مبحث آموزش HTML جلوتر می‌رویم رفته رفته مباحث پیشرفته‌تر شده و نیاز به تمرین و مطالعه بیشتری دارد. در نوار سمت راست می‌توانید ترتیب درسنامه‌ها را مشاهده کرده و از درس اول آموزش HTML شروع کنید تا همه چیز بهتر در ذهن شما حک شود و پس از پایان این دوره آموزشی پایه‌، بتوانید به راحتی سراغ مباحث دیگر آموزش طراحی سایت در لیداوب بروید. یادتان باشد که تمرین در کنار خلاقیت و آموزش خلاقانه، می‌تواند از شما یک طراح سایت حرفه‌ای بسازد. 

منبع :

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های