متریالایز (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 بصورت محلی را مشاهده می کنید.
<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 خود لینک دهید.
مثال
<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>
در این قسمت با چارچوب متریالایز برای طراحی واسط کاربر آشنا شدید، در آینده دوره کامل آموزش متریالایز را در سایت کدنویسان ارائه خواهیم کرد.