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

طراحی واکنش گرا با متریالایز

متریالایز (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>

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

برچسب ها

, , , , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز, مقالات فناوری و آموزشی | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.