طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML

طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

65

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


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

طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML

طراحی وبسایت واکنشگرا در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

65

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

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

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

 

طراحی وبسایت واکنشگرا (Responsive) در HTML

 

طراحی وب رسپانسیو (Responsive) چیست؟

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

تنظیم viewport

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

مثال: در زیر متا تگ viewport را برای وب سایت واکنشگرا آماده کرده ایم.

 

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

 

تنظیم viewport در زبان نشانه گذاری HTML

 

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

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

 

تنظیم viewport در زبان نشانه گذاری HTML

 

تصاویر واکنشگرا (Responsive)

تصاویر واکنشگرا تصاویری هستند که خود را با هر اندازه از مرورگر مقیاس بندی می کنند.

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

اگر ویژگی width در CSS را با مقدار 100% تنظیم کنیم، مقیاس آن با هر اندازه از مرورگر بالا و پایین می شود و یک تصویر Responsive ایجاد می شود.

مثال: در زیر با مشخص کردن ویژگی width یک تصویر واکنشگرا ایجاد کرده ایم.

 

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

 

تصاویر واکنشگرا (Responsive) در HTML

 

توجه داشته باشید در تصویر بالا تصویر را می توان بزرگتر از اندازه  اصلی خود بزرگ کرد. برای حل مشکل، به جای آن از ویژگی max – width استفاده کنید که راه حل معمولی است.

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

اگر ویژگی max – width روی 100% تنظیم شود، در صورت لزوم تصویر بزرگ می شود اما هرگز از اندازه اصلی خود بزرگ تر نمی شود.

مثال: در این جا همان مثال بالا را این بار با ویژگی max – width برای شما آورده ایم تا تغییرات را ببینید.

 

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

 

تصاویر واکنشگرا (Responsive) در HTML

 

نمایش تصاویر مختلف بسته به عرض مرورگر

عنصر picture در زبان نشانه گذاری HTML به شما امکان می دهد که تصاویر مختلف را برای اندازه های مختلف پنجره مرورگر تعریف کنید.

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

 

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

 

تصاویر واکنشگرا (Responsive) در HTML

 

تصاویر واکنشگرا (Responsive) در HTML

 

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

اندازه متن را می توان با واحد “VW” تنظیم کرد، که به معنای عرض viewport است.

به این ترتیب اندازه متن از اندازه عرض پنجره مرورگر پیروی می کند.

مثال: در زیر متن با واحد “VW” مقدار دهی شده و اندازه آن بسته به اندازه عرض پنجره مرورگر است.

 

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

 

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

 

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

 

نکته: viewport اندازه پنجره مرورگر است.

1 VW  =  1% عرض viewport

اگر عرض viewport 50 سانتی متر باشد، 1 VW برابر با 0/5 سانتی متر است.

Media Queries

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

با media queries می توانید سبک های کاملا متفاوتی را برای اندازه های مختلف مرورگر تعریف کنید.

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

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

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

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

 

Media Queries در HTML

 

Media Queries در HTML

 

نکته : در آینده در مبحث CSS مقالات آموزشی مفصلی در مورد media queries خواهیم داشت.

Framework های طراحی وبسایت واکنشگرا

تقریبا همه framework های CSS از قابلیت طراحی واکنشگرا به خوبی پشتیبانی می کنند که همه آن ها به صورت رایگان عرضه شده اند و کار با آن ها بسیار ساده است.

W3.CSS

W3.CSS یک framework مدرن برای CSS است که به طور پیش فرض از طراحی برای صفحه نمایش های بزرگ، تبلت ها و موبایل به خوبی پشتیبانی می کند.

W3.CSS کوچک تر و سریع تر از سایر framework های CSS است.

W3.CSS به عنوان جایگزینی با کیفیت بالاتر از bootstrap طراحی شده است.

W3.CSS مستقل از jquery یا هر کتابخانه جاوااسکریپت (JavaScript) دیگر طراحی شده است.

مثال: نمونه طراحی واکنشگرا با چهارچوب (framework) W3.CSS.

 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

</body>
</html>

 

Framework های طراحی وبسایت واکنشگرا در HTML

 

Framework های طراحی وبسایت واکنشگرا در HTML

 

نکته: در آینده مجموعه مقالاتی در مورد چهارچوب W3.CSS برای شما آماده خواهیم کرد.

Bootstrap

یکی دیگر از چهارچوب های بسیار محبوب CSS برای طراحی وب سایت های واکنشگرا است که برای ایجاد این نوع صفحات از HTML، CSS و jquery استفاده می کند.

مثال: در زیر یک نمونه از طراحی وبسایت واکنشگرا با چهارچوب bootstrap را برای شما آورده ایم.

 

<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>

 

Framework های طراحی وبسایت واکنشگرا در HTML

 

Framework های طراحی وبسایت واکنشگرا در HTML

 

نکته: در آینده مجموعه مقالاتی در مورد چهارچوب bootstrap برای شما آماده خواهیم کرد.

خب به پایان یکی دیگر از مقالات جالب زبان نشانه گذاری HTML رسیدیم و طریقه ایجاد وبسایت های واکنشگرا را آموختیم.

در مقاله بعدی به مبحث بسیار جالب عناصر کد های رایانه ای (Computer Code Elements) در زیان نشانه گذاری HTML می پردازیم.

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


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی