وب آکادمی

مرجع آموزش طراحی و برنامه نویسی وب

جلسه اول – معرفی کتابخانه متریالایز (materialize) برای طراحی واکنش پذیر

دسته بندی:آموزش چارچوب متریالایز ، مقالات فناوری و آموزشی تاریخ انتشار: 26 دی 1397 برچسب ها : برچسب‌ها:, , , , , , ,

متریالایز (materialize) یک کتابخانه برای طراحی واسط کاربری (UI) می باشد، این کتابخانه با استفاده از CSS,HTML و javaScript ساخته شده است. متریالایز کمک می کند تا صفحات وب را بصورت جذاب، واکنشگرا(responsive)  و کاربردی طراحی کنیم . با یادگیری متریالایز ، با طراحی صفحات وب جدید، با ویژگیهایی مانند مستقل از دستگاه، قابل مشاهده بر روی هر مرورگر و زیبا بودن، آشنا شده و به شما کمک خواهد کرد که صفحات وب خود را سریع، زیبا و واکنش گرا (responsive)  بسازید.

قبل از شروع یادگیری متریالایز، باید اطلاعات اولیه ای در مورد HTML, CSS, JavaScript, عناصر HTML و یک ویرایشگر برای کدهای متریالایز در آن داشته باشید.

کدنویسان - آموزش متریالایز -

 روش استفاده از متریالایز

برای استفاده از materialize دو روش وجود دارد:

روش اول : دانلود کردن فایل های کتابخانه متریالایز(دو فایل materialize.min.css و materialize.min.js ) و قرار دادن آن در فهرست وب سایت و آدرس دهی آنها بر اساس فهرست محلی.

روش دوم : استفاده از CDN ،  فایل materialize.min.css و materialize.min.js را در صفحه وب خود بطور مستقیم آدرس آنها را از سی دی ان استفاده کنید – در این صورت برای استفاده از متریالایز باید به اینترنت متصل باشید.

 

روش اول : استفاده از فایل های محلی

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

پوشه متریالایز درای سه زیرپوشه بنام های css، js و fonts است ، اصلی ترین فایل های داخل این پوشه  materialize.min.js و materialize.min.css هستند که باید در بخش هدر صفحات وب معرفی شوند . برای دریافت نسخه راست به چپ و فارسی شده متریالایز از اینجا استفاده کنید.

در زیر نحوه قرار لینک شدن فایل های css و js مربوط به materialize در صفحه HTML بصورت محلی را مشاهده می کنید.

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=” materialize/css/materialize.min.css”>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.1.min.js”></script>
<script src=” materialize/js/materialize.min.js”></script>
</head>
<body></body>
</html>

روش دوم : استفاده از CDN

در این روش می توانید فایل های materialize.min.js و materialize.min.css را بصورت مستقیم در صفحه HTML خود لینک دهید.

 

مثال

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”></script>
</head>
<body>
<div class=”card-panel teal lighten-2″><h3>Hello World!</h3></div>
</body>
</html>

در این قسمت با چارچوب متریالایز برای طراحی واسط کاربر آشنا شدید، در آینده دوره کامل آموزش متریالایز را در سایت کدنویسان ارائه خواهیم کرد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

14 − 10 =