illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

سرعت در کد نویسی CSS و HTML ، بخش اول : کار با پلاگین Emmet

10583 ۱۲ دی ۹۲

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

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

اگر با زبان های css  و html آشنا هستید و می خواهید از این به بعد به صورت حرفه ای کد نویسی کنید و همچنین سرعت بالایی داشته باشید،در ابتدا باید یک ادیتور متن عالی انتخاب کنید.

یکی از بهترین ادیتور ها در زمینه ی کد نویسی ادیتور Sublime Text می باشد.(به نظر من واقعا بهترین ادیتوره)

ابتدا اون رو از از اینجا دانلود کرده و نصب کنید. (اگه با مرورگر کروم کار میکنید که فبها وگرنه پیشنهاد من به شما اینه که از این به بعد با کروم کار کنید.)

sublimeText_thumb

وقتی  Sublime Text  رو نصب کردید ابتدا با اون یه فایل html باز کنید.میتونید از قسمت منوی بالا گزینه ی Edit همه ی میانبر های ادیتور رو به صورت کامل ببینید که خیلی مفید هستند. این بخش رو زیاد توضیح نمیدم فقط میانبر های خیلی کاربردی رو لیست میکنم.

Ctrl+d : انتخاب کلمه (معمولا کلمات داخل کوتیشن را به این صورت انتخاب میکنن)

Ctrl+Shift+Space :  مثل بالایی عمل میکنه فقط مقدار بیشتری از متن رو انتخاب میکنه.برای انتخاب یک قسمت به کار میره.

Ctrl+F : میتونید در کادری که باز میشه کلمه ی مورد نظرتون رو تایپ کنید . مثلا می خواهید هر چی تو صفحه تون کلاسی با نام bar دارید رو به foo تبدیل کنید؛ از همون سمت راست گزینه ی find All رو انتخاب کنید ...

Ctrl+L: خطی که روی اون هستید رو انتخاب میکنه.

End : نشانگر تایپ رو به آخر خط میبره.

Home: نشانگر تایپ رو به اول خط میاره.

خب بیشتر ادامه نمیدم میرم سراغ اصل مطلب.

emmet

بسیاری از کسانی که سریع کدنویسی مینویسند ( مثل خود من ) با افزونه ی Emmet  کار میکنند. ابتدا اون رو از اینجا (Emmet for ST) دانلود و نصب کنید.(نحوه ی نصبش رو هم توضیح داده.)

این پلاگین بر روی بیشتر ادیتور ها نصب می شود (ادیتور های متن باز) ولی چون در بخش بعد پلاگین دیگری رو برای بالا بردن سرعت کد نویسی معرفی میکنم که تنها بر روی ادیتور ST نصب میشود، فقط لینک دانلود پلاگین Emmet برای ST رو گذاشتم.

در این پست تنها به اختصارات HTML به صورت کامل می پردازم و در بخش بعد هم ، اختصارات CSS را به طور کامل توضیح میدهم.

اختصارات در HTML

(دقت داشته باشید بعد از هر خط بدون گذاشتن فاصله یا space دکمه ی tab رو بزنید.)

مثلا برای نوشتن یک قالب ساده ی html ، حداقل باید 10 خط کد بنویسید که میشود این کار را با نوشتن !(علامت تعجب) و یا html:5 و زدن دکه ی tab  انجام داد.

sublime Text 3

* با نوشتن تگ مورد نظر (بدون < و > مثلا تگ پاراگراف رو به صورت p مینویسید) و تایپ کردن یک مربع (#)، یک تگ پاراگرف با آیدی ای که جلوی مربع نوشتید، میتونید داشته باشید.اگه به جای مربع ، نقطه بذارید به جای id یک تگ با  class مشخص شده دارید.

emmet - sunblime Text

* برای اینکه داخل تگ هاتون متنی داشته باشید میتونید اون متن رو در جلوی تگ داخل { } قرار دهید.یا مثلا برای مشخص کردن خاصیت و مقدار یک تگ میتوینید اون هارو داخل [ ] بنویسید. به تصویر توجه کنید.

emmet - sunblime Text

* دقت داشته باشید اگر تگ رو مشخص نکنید و فقط کلاس یا آی دی رو مشخص کنید یک دایو (div) با کلاس یا آی دیه مشخص شده نوشته میشه. اگر همین کار رو داخل تگ ul کنید به جای یک div، یک تگ li باز میشود.

emmet - sunblime Text

* میتونید تگ هایی که می خواهید در یک خط بنویسید را با + از هم جدا کنید.و همچنین با علامت < میتونید در داخل تگی ، تگ هایی رو که می خواهید اضافه کنید. دقت داشته باشید که علامت  ^ برعکس < کار میکنه. با استفاده از علامت ^ میتونید به عنصر بالایی برید.

Emmet - Sublime Text

* میتونید با استفاده از *(ستاره) از یک تگ یا یک گروه از تگ ها  به تعداد عددی که جلوی ستاره تایپ میکنید، داشته باشید. به تصویر توجه کنید.

Emmet - Sublime Text

* برای اینکه یک گروه رو مشخص کنید میتونید اونهارو داخل پرانتز بزارید.

Emmet - Sublime Text

* میتونید با استفاده از $ ، اعدادی با گام های افزایشی داشته باشید.به تصویر نگاه کنید.

Emmet - Sublime Text

به این صورت هم با دقت و هم با سرعت کدهای HTML تون رو بنویسید.

برای اطلاعات بیشتر سری هم به اینجا بزنید.

خب این بخش هم به پایان رسید. در بخش بعدی اختصارات CSS رو به طور کامل توضیح میدم.

موفق باشید ؛ یا علی

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

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

  • ‏‏
    حدیث بنی اسد(۲۷ تیر ۱۳۹۵)

    سلام من یه سوال دارم خواهش میکنم جواب بدید در پلا گین emmet وقتی کد مینویسیم و tabمیزنیم و کد اجرا میشود حالا اگه بخواهیم به کد رو تصحیح کنیم و بدون پاک کردن به کدمون برسیم باید کدوم دکمه رو بزنیم

  • ‏‏
    سید مهدی لعل موسوی(۱۰ شهریور ۱۳۹۵)

    سلام ببخشید من که فیلتر شکن ندارم که دانلود کنم اگر میشه فایل رو برام لینک کنید تا دانلود کنم
    بعدش بهم بگید که چطور اونو نصب کنم

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram