<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Плагин Emmet для Sublime Text.

Плагин Emmet для Sublime Text.

Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.

Emmet - это плагин, который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.

Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите "install package" и нажмите enter. Дальше введите "emmet" и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.

Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите

div

А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.

<div></div>

Точно так же можно делать с любыми тегами. Например, давайте создадим ссылку.

a

Теперь нажмите tab, и мы получим следующее

<a href=""></a>

Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.

Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #

.block

В результате получим

<div class="block"></div>

То же самое и с id

#block

Получим следующее

<div id="block"></div>

Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.

Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках

div[data-attribute="value"]

Получим следующее

<div data-attribute="value"></div>

Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше

ul>li>a

Получим следующее

<ul>
  <li><a href=""></a></li>
</ul>

С помощью символа * можно указать, сколько таких тегов нам нужно

ul>li*5

Вот, что у нас получится

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Если вам нужно добавить тег на том же уровне, используйте знак +

#container>.left+.right

Результат

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически

ul>li.item$*5

Результат

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.

Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках

a{Some text}

Результат

<a href="">Some text</a>

Если во время верстки вам нужен какой-то текст, то просто напишите lorem

lorem

Результат

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.

Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.

lorem3

Результат

Lorem ipsum dolor.

Чтобы создать html структуру, просто напишите знак !

!

Результат

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Теперь поговорим о том, как emmet поможет нам в css

Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например

m10

В результате получим

margin: 10px;

В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align

ta

Результат

text-align: left;

Но вы можете изменить его, просто написав букву значения после сокращения свойства. К примеру, пусть будет по центру.

tac

Результат

text-align: center;

Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/

В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings - default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду "expand_abbreviation_by_tab". Выше нее, в массиве keys, в кавычках написано "tab". Измените это значение на свое, например, на "ctrl+e". Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings - User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings - Default.

Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (13):

maxlegostaev0595 maxlegostaev0595 20.05.2014 20:49:25

Что то не работает, когда ввожу install package, ничего не происходит.

Ответить

php_programmer php_programmer 20.05.2014 21:34:33

Потому что Package Control сначала нужно установить. Для этого перейдите по ссылке: https://sublime.wbond.net/installation#st2 скопируйте весь код, который там дан слева в окошечке. Затем откройте Sublime Text и перейдите в View, а затем Show Console. У вас откроется консоль и вам следует вставить туда скопированный код. После того, как установка завершится, перезапустите Sublime Text.

Ответить

maxlegostaev0595 maxlegostaev0595 20.05.2014 23:18:44

Спасибо большое помогло.

Ответить

logaut logaut 21.05.2014 21:26:44

Михаил, здравствуйте! У вас в строчке ошибка. У вас написано так: С помощью символа * можно указать, сколько таких тегов на нужно А надо так: С помощью символа * можно указать, сколько таких тегов нам нужно

Ответить

logaut logaut 21.05.2014 21:31:57

Кстати, Михаил, сделайте на своём сайте редактор BB кодов. Просто без него не удобно писать комментарии, особенно если текст будет длинным. С уважением, Сергей.

Ответить

alfagoblin alfagoblin 22.05.2014 14:11:18

У меня установилось без проблем, но не работает!!! в чем соль?

Ответить

php_programmer php_programmer 23.05.2014 03:40:03

Опишите, в чем именно заключается проблема, и напишите, какая у Вас операционная система.

Ответить

alfagoblin alfagoblin 23.05.2014 10:51:18

у меня windows 7. tab и другие кнопки если менять работают в обычном режиме.

Ответить

php_programmer php_programmer 23.05.2014 18:53:05

Странно это, на самом деле. Вы уверены, что плагин точно установился? Если да, то создайте .html файл, введите "!"(без кавычек) и нажмите tab. Все должно работать из коробки. Возможно, Вам стоит попробовать переустановить плагин, если все равно ничего не работает.

Ответить

alfagoblin alfagoblin 23.05.2014 21:37:00

все заново скачал и переустановил в 3-й раз, ЗАРАБОТАЛО! СПАСИБО БОЛЬШОЕ! полезная штука)))

Ответить

Andrey Kuznetsov Andrey Kuznetsov 21.09.2014 16:56:48

Вы написали в 9 абзаце добаблять, исправьте)))

Ответить

golexa88 golexa88 16.12.2014 16:59:24

Да крутая штука, ускоряет процесс написание кода!!! +5

Ответить

Tanne Tanne 04.04.2016 01:53:25

уже 2016 на дворе, а у вас все еще : "Теперь рассмотрим, как ДОБАБЛЯТЬ классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #" :D

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.