آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

8 1959 ۲۱ فروردین ۹۵

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

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

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

پیش نیازها

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

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

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

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

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

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

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    AliReza Shariyari(۲۴ فروردین ۱۳۹۵)

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

    • ‏‏
      محمد اسفندیاری(۲۵ فروردین ۱۳۹۵)

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

  • ‏‏
    حمید حسینی تبار(۲۶ فروردین ۱۳۹۵)

    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

  • ‏‏
    رسول دلدار(۱۵ اردیبهشت ۱۳۹۶)

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

    • ‏‏
      محمد اسفندیاری(۱۵ اردیبهشت ۱۳۹۶)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :