آموزش طراحی متریال با Materialize (جلسه 1) - مقدمه

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۲۱ فروردین ۱۳۹۵

در این سری آموزشی قصد داریم که طراحی متریال با استفاده از ابزار Materialize رو به شما آموزش بدیم و شما رو با اون آشنا کنیم.getting-started-materialize-css-framework

Materialize مجموعه ای از رابط‌های کاربری ساخته شده با CSS و HTML و Javascript هست. با استفاده از این ابزار میتونین به سادگی و با جذابیت هر چه تمامتر به طراحی و کدنویسی بپردازید، که از قواعد و اصول استاندارد در زمینه وب برخوردار هست و پشتیبانی خوبی بر روی مرورگرهای بروز و مدرن داره. این ابزار به شما کمک میکنه که سایتهایی متریال و زیبا، سریع و واکنشگرا بسازید. این ابزار از Google Material Design ایده گرفته و از روی قواعد مربوط به اون ساخته شده است.

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

پیش نیازها

قبل از اینکه شروع به یادگیری این دوره کنید باید یک سری پیش نیازهایی رو داشته باشید و درک کلی و متوسطی از CSS و HTML و Javasccript و DOM داشته باشید و همچنین با کار کردن با Text Editor‌ها آشنا باشید. اینکه بدونید ابزارهای تحت وب چطوری کار میکنن خیلی میتونه در فهم این دوره بهتون کمک کنه.

راه اندازی اولین مثال با این ابزار

ما برای مثال و برای بار اول از CDN‌های مربوطه استفاده میکنیم و خروجی رو به شما نشون خواهیم داد. هدف از این مثال آشنایی مقدماتی شما با محیط هست و در جلسات بعدی بصورت کامل و ریز به ریز در مورد هر کدام توضیح خواهیم داد:

<!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>

اگر کدهای بالا رو در یک فایل بنام index.html ذخیره کرده و اون رو در مرورگر باز کنید با چنین نتیجه ای روبرو خواهید شد:md1

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

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

mhs qas

سلام خسته نباشید
من لینک های materil رو در header گذاشتم ولی وقتی میخام داخل body یه فرم مثل این کد رو بذارم اصل آپشنا نمیاد یعنی نشونشون نمیده.وقتی لینک ها رو پاک میکنم نشون میده لینک

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>
محمد اسفندیاری

سلام
این لینک رو مشاهده کنید:
http://materializecss.com/forms.html
در اینجا کار با فرمها توضیح داده شده است
موفق باشید

رسول دلدار

این style های css هم در راست چین تغییر کرده

محمد اسفندیاری

با سلام
شما هر فایل CSS مربوط به ابزارهای مختلف رو داشته باشید که چپ به راست باشه با استفاده از سایتی که در زیر بیان میکنم، میتونین اون رو به راحتی راست به چپ کنید
http://rtlcss.com/playground/
کافیه کدهای چپ به راست رو در قسمت چپ قرار بدین و کدهای راست به چپ در قسمت راست در اختیارتون قرار میگیره.
موفق باشید

حمید حسینی تبار

RTL رو نداره . بیشتر پلاگینهاش هم RTL ندارن
فعلا ارزش کار نداره مگر اینکه مثل بوت استرپ افرادی برای RTL نسخه ای سفارشی کنند

محمد اسفندیاری

اینارو امتحان کردم ولی بدردتون میخوره:
https://github.com/vahid-almasi/materialize-rtl

Kazem forghani

سلام
از کدوم فایل باید استفاده کنیم؟
فایل CSS اولی یا دومی؟
تشکر

محمد اسفندیاری

این فایل رو بعد از فایل css خود materialize قرار بدین:
https://github.com/vahid-almasi/materialize-rtl/blob/master/materialize_rtl.css

AliReza Shariyari

ممنون از مطلب خوب تون
میشه در مورد هر یک از خطوط زیر توضیح بدین که برای چی هست؟
منظورم خطوطی که بین head هست.
متاسفانه نمیتونم کد ها رو در اینجا قرار بدم

محمد اسفندیاری

در جلسات بعد خدمتتون بصورت کامل توضیح داده میشه
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.