Колективний блог 11А класу ліцею НІТ: февраля 2019

среда, 27 февраля 2019 г.

Теги META. Поисковая оптимизация

Результаты практической работы "Метатеги":

Замякин И Скороход	11
Якимец Игнатьева	11
Поставной Хохлов	10
Шкуренко, Крячик	9
Воронина Ира	9
Попович и Пюрко	9
Пономаренко Лижанкова	10
Вакуленко Белов	11
Динец Литвишко	11
Гусак и Луценко	10
Зацаренко Анастасия и Хотинь Карина	11

Параметры атрибута NAME

Параметр	Назначение	Пример	Комментарий
Description	Текстовое описание (краткая аннотация) конкретной страницы вашего сайта. Не стоит создавать слишком длинное и подробное описание вашего сайта, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов.	<META NAME="description" CONTENT="Сайт содержит информацию для любителей старинных автомобилей, на нем вы можете найти описание с фотографиями редких и эксклюзивных автомобилей">	Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот тег и выводят содержимое этого тега в результатах поиска (Google).
Keywords	Список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, которые ваши клиенты могут использовать в поисковом запросе. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также вы можете здесь записать и английские слова, соответствующие содержимому сайта.	<META NAME="keywords" CONTENT="реклама, дизайн, полиграфия">	Учитывается большинством поисковых систем.
Author	Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой.	<META NAME="AUTHOR" CONTENT="www.neo-systems.ru">

К группе метатегов относят и не имеющие обозначения "meta" стандартные теги и некоторые атрибуты web-документов:

<title>...</title> . Название документа (сайта, раздела, страницы). Допускается использование от 60 до 100 символов.
<img src=“”...alt="..."> . Подписи к графическим элементам.

Откройте форму "Теги META" и выполните задание.

Также рекомендую вам статью "Десять SEO-ошибок":

четверг, 21 февраля 2019 г.

Разработка лендинга на платформе визуального веб-редактора Wix

Результаты практической работы "Создание лендинга":

Скороход, Шкуренко	9
Воронина и Машир	11
Попович и Пюрко	9
Вакуленко .Белов	10
Мельник Валерия	10
Галайда и Игнатьева	10
Поставной Якимец Рабковская	9
Луценко Денец	9
Гаража Хохлов	9
Гусак й Замякин	9

Подбор иллюстраций для веб-страницы

Как подобрать иллюстрации на веб страницу

Полезные сайты с бесплатными фото и картинками:

https://pixabay.com/en/

https://unsplash.com/

https://www.flickr.com/

https://www.pexels.com/ - хорошая коллекция фонов

https://stocksnap.io/

Пиктограммы и иконки:

http://thenounproject.com/

https://tilda.cc/ru/free-icons/

https://www.iconfinder.com/

https://www.flaticon.com/

Бесплатные шрифты:

https://www.google.com/get/noto/

https://www.fontspace.com/

https://1001freefonts.com/

http://fontflame.com/ - подбор пары шрифтов

четверг, 14 февраля 2019 г.

Графика в веб-дизайне

Результаты практической работы "Разработка макета и верстка веб-страницы":

Фамилия, имя	Оценка за макет	Оценка за веб-страницу
Галайда, Игнатьева	12	9
Якимец, Рабковская	12	10
Шкуренко, Крячик	11	10
Хохлов, Гаража	10	11
Хотинь	11	12
Скороход, Лижанкова	9	8
Попович	11	10
Пономаренко, Пюрко	11	11
Литвишко, Поставной	11	10
Гусак	7	8
Замякин	7	12
Воронина. Машир	12	9
Белов, Вакуленко	11	10
Динец, Луценко	7	9

Задание для практической работы

Загрузите текст веб-страницы "Антарктида" и нарисуйте ее макет от руки.

Затем создайте папку на рабочем столе, создайте в ней веб-страницу и папку с картинками.

Подберите картинки для веб-страницы и сохраните их под понятными именами.

Сверстайте веб-страницу (можно использовать заготовку "Сайт фотографа").

Сервисы для выбора фото и картинок:

GettyImages - американское фото-агентство, владеет одним из крупнейших в мире банком изображений: около 70 млн фотографий. Изображения предоставляются клиентам на основе как платного, так и бесплатного лицензирования

https://thenounproject.com/ - сервис для создания и выбора пиктограмм

Free Digital Photos — большая база, разбитая по категориям. Все изображения можно использовать для образовательных, личных или предпринимательских целей

Unsplash.com - бесплатный банк качественных фото

Free Images — большая галерея из более чем 35 тысяч снимков, разбитых по категориям и доступных для тематического поиска. Для скачивания понадобится авторизация.

http://lenagold.ru/ - коллекция бесплатных клипартов, в том числе с прозрачным фоном

Free Photos Bank — хорошая коллекция бесплатных фото, доступных для скачивания без регистрации. Все снимки разбиты на ряд категорий, можно проводить поиск по тематикам и ключевым словам

Designers Pics — сайт, собирающий бесплатные фотографии в высоком разрешении. Есть общая лента обновлений и отдельный раздел, где снимки разбиты по категориям.

Freepik -www.freepik.com. Один из самых больших веб-сайтов, который предлагает сотни новых векторных изображений для личного и для коммерческого использования.

Vecteezy - www.vecteezy.com. Огромный «дом» векторной графики, изображений и всевозможных паттернов. Помимо бесплатных, есть доступные наборы только премиум-пользователям.

Обработка фотографий и картинок в Photoshop

Как убрать белый фон?

Способ 1. Убрать белый фон у изображения можно инструментом Волшебный ластик.

Это один из самых простых и быстрых способов выполнения такого рода операции. Выбрав ластик на панели инструментов, щелкните им по белому фону.

В результате все белые пикселы будет удалены, и вы увидите шахматный фон, который говорит о прозрачности вместо фона.

На изображении выше удалилась часть меча и некоторые элементы на доспехах рыцаря. Существуют две причины такого неприятного эффекта. Обратимся к панели параметров инструмента:

1. Смежные пикселы. Посмотрите, стоит ли галочка в этой настройке. Ее отсутствие говорит о том, что будут удалены все пикселы подобного цвета (именно поэтому исчезли вышеуказанные части изображения). Поставьте галочку, и Фотошоп будет удалять только те пикселы, которые соприкасаются друг с другом.

2. Допуск. Часто фон состоит из целого набора оттенков, например, того же белого цвета. Чем выше значение допуска, тем больше этих оттенков программа удалит. Чаще всего это относится к кайме вокруг изображения (небольшая окантовка из оставшихся от фона пикселов). Увеличивайте допуск и кайма будет становится все меньше и меньше.

Полезная команда для удаления каймы: Слой — Обработка краев — Убрать кайму.

Способ 2 Выделение фона при помощи инструмента Волшебная палочка.

Самое важное — не забыть разблокировать фоновый слой.

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

Теперь, выбрав Волшебную палочку, сделайте клик по фону. Остается лишь нажать клавишу Backspace. Появится вновь шахматный фон.

Как и с волшебным ластиком, обратите внимание на параметры допуска и смежных пикселов. Они работают аналогично.

Как обрезать часть фото?

Кадрирование — это отсечение фрагментов фотографии с целью фокусирования или улучшения компоновки. Используйте инструмент «Рамка» для кадрирования и выравнивания фотографий в Photoshop. Инструмент «Рамка» является неразрушающим. После кадрирования можно восстановить часть обрезанного изображения, чтобы подобрать наилучшие границы кадра. Инструмент «Рамка» также предоставляет интуитивные методы выравнивания фотографии при кадрировании.

Для всех операций визуальные направляющие обеспечивают интерактивный просмотр. При кадрировании или выравнивании фотографии доступен предварительный просмотр в реальном времени.

Кадрирование фотографии

Выберите инструмент «Рамка» на панели инструментов. По краям фотографии появятся границы кадра.
Нарисуйте новую область кадрирования или перетащите ручки угла и краев кадра на фотографии.
(Необязательно) Укажите параметры инструмента «Рамка» на панели «Управление».

Размер и пропорции

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

Параметры наложения

Выберите вид направляющих, задающих границы кадра изображения. Доступны следующие виды направляющих: «Правило 1/3», «Сетка» и «Золотое сечение». Чтобы просмотреть все параметры, нажмите «O».

Параметры инструмента «Рамка»

Выберите меню «Настройки» (значок шестеренки), чтобы указать дополнительные параметры инструмента «Рамка».

Использовать классический режим

Включите эту настройку, чтобы инструмент «Рамка» работал, как в предыдущих версиях Photoshop (CS5 и более ранних).

Просмотр автоматического центрирования

Включите эту настройку, чтобы поместить просматриваемое изображение в центр холста.

Показать отсеченную область

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

Включить экран кадрирования

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

Удаление обрезанных пикселов

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

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

4. Нажмите клавишу Enter (в Windows), чтобы выполнить кадрирование фотографии.

Как уменьшить размер фотографии?

Размер файла изображения — это физический размер файла, в котором хранится изображение. Он измеряется в килобайтах (КБ), мегабайтах (МБ) или гигабайтах (ГБ). Размер файла пропорционален размерам изображения в пикселах. Чем больше количество пикселов, тем детальнее изображение, получаемое при печати.

Однако для их хранения требуется больший объем дискового пространства, а редактирование и печать замедляются. Таким образом, при выборе разрешения необходимо найти компромисс между качеством изображения (которое должно содержать все необходимые данные) и размером файла.

Другим фактором, влияющим на размер файла, является его формат. Из-за различий в методах сжатия, используемых в форматах файлов GIF, JPEG, PNG и TIFF, размеры файлов при одинаковых размерах в пикселах могут сильно отличаться. Аналогично влияют на размер файла битовая глубина цвета и количество слоев и каналов.

Photoshop поддерживает максимальные размеры изображения в пикселах, равные 300 000 по горизонтали и вертикали. Это ограничение определяет предельно допустимые размеры и разрешение изображения на экране и при печати.

Изменение размера изображения в пикселях

Изменение размеров изображения в пикселях влияет не только на его размер на экране, но и на качество изображения на экране и при печати, то есть на размеры отпечатка или на разрешение изображения.

Выберите команду «Изображение» > «Размер изображения». Для сохранения текущего соотношения между высотой и шириной в пикселах выберите «Сохранить пропорции». Эта функция автоматически изменяет ширину при изменении высоты и наоборот.
В полях «Размерность» введите значения для ширины и высоты. Для ввода значений в процентах от текущих размеров выберите в качестве единицы измерения проценты. Новый размер файла изображения появляется в верхней части диалогового окна «Размер изображения» (старый размер указывается в скобках).

Сохранение в формате JPEG

Kоманду «Сохранить как...» можно использовать для уменьшения размера изображений в формате JPEG (*.jpg). JPEG обеспечивает уменьшение размера файла путем выборочного удаления данных. С помощью команды Файл > Экспорт > Сохранить для Web (старая версия) изображение можно также сохранить как один или несколько JPEG-файлов.

Вызовите команду Файл -Сохранить как... и выберите «JPEG» в меню «Тип файлов».

В диалоговом окне «Параметры JPEG» выберите желаемые параметры и нажмите кнопку «ОК».

Параметры изображения

Задает качество изображения. Выберите параметр в меню «Качество», передвиньте всплывающий ползунок «Качество» или введите значение от 0 до 12 в текстовое поле «Качество».

Параметры формата

Задает формат для файла JPEG. Версия «Базовый (стандартный)» использует формат, распознаваемый большинством веб-браузеров. Версия «Базовый оптимизированный» создает файл с оптимизированным цветом и слегка уменьшенным размером файла. Версия «С чересстр. разверткой» представляет поочередно все более детализированные версии целого изображения (в количестве, указанном пользователем) по мере поступления данных при загрузке. (Не всеми веб-браузерами поддерживаются оптимизированные и прогрессивные изображения JPEG.)

четверг, 7 февраля 2019 г.

Таблицы в HTML

Результаты теста:

Фамилия, имя	Оценка
Мельник Валерия и Попович Данил	8
Белов, Вакуленко	8
Шкуренко, Крячик	9
Воронина Ирина	8
Пюрко Пономаренко	10
Лижанкова Скороход	9
Гусак И Замякин	9
Луценко Динец	9
Гаража Хохлов	9
Галайда Хотінь	11
Якимец Рабковская	11
Поставной Литвишко	11

Пройдите тест "Основные теги HTML":

Пройдите курс "Знакомство с таблицами" на сайте HTML Академии под руководством Инструктора Кекса.

Таблицы стилей

Основы CSS

CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: элемента веб-страницы — селектора, и команды форматирования — блока объявления. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

СТРУКТУРА ОБЪЯВЛЕНИЯ CSS-СТИЛЯ

Виды таблиц стилей

Внешняя таблица стилей

Внешняя таблица стилей представляет собой текстовый файл с расширением .css, в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега <link>, расположенного внутри раздела <head></head>. Такие стили работают для всех страниц сайта.

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link>, указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

<head>

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/assets.css" media="all">

</head>

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css".

Внутренние стили

Внутренние стили встраиваются в раздел <head></head> HTML-документа и определяются внутри тега <style></style>. Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

<head>

<style>

h1,

h2 {

color: red;

font-family: "Times New Roman", Georgia, Serif;

line-height: 1.3em;

}

</style>

</head>

<body>

...

</body>

Встроенные стили

Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>

Такие стили действуют только на тот элемент, для которого они заданы.

Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

<style>

@import url(mobile.css);

p {

font-size: 0.9em;

color: grey;

}

</style>

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

Виды селекторов

Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.

Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили}, *:checked {CSS-стили}.

Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1.

Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег <h1> и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

<h1 class="headline">Инструкция пользования персональным компьютером</h1>

.headline {

text-transform: uppercase;

color: lightblue;

}

Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.

<div id="sidebar"></div>

#sidebar {

width: 300px;

float: left;

}

Наследование и каскад

Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.

Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing. Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются.

Это background, border, display, float и clear, height и width, margin, min-max-height и -width, outline, overflow, padding, position, text-decoration, vertical-align и z-index.

Принудительное наследование

С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.

Как задаются и работают CSS-стили

Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);
Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;
К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

РЕЖИМ РАЗРАБОТЧИКА В БРАУЗЕРЕ GOOGLE CHROME

4. При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

<div id="wrap" class="box clear"></div>

div {border: 1px solid #eee;}

#wrap {width: 500px;}

.box {float: left;}

.clear {clear: both;}

Каскад

Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило !important, специфичность и порядок, в котором подключены таблицы стилей.

Правило !important

Вес правила можно задать с помощью ключевого слова !important, которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;}. Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Веб-редактор Brackets

Что такое Brackets?

Это свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems.

Интерфейс редактора

На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как просмотр HTML-кода в браузере в реальном времени (Live Preview), упрощение ввода кода и т.д. Принять участие в разработке и поддержке расширений может любой желающий.

Необходимые инструменты:

Инсталляция веб-редактора Brackets

Расширения Brackets, которые стоит установить:

Emmet - ускоряет ввод кода и создание таблиц стилеq

Здесь можно посмотреть обучающие видео по работе с Emmet

Autosave every edit! - автоматически сохраняет каждое изменение кода
Brackets-color-finder - облегчает выбор цвета

Как установить расширение?

1. Открываем Менеджер расширений:

2. В первый запуск программа инициализирует расширения, обновляя их базу. В менеджере расширений Brackets есть три вкладки: Доступные, Themes, Установленные. Соответственно нас интересует вкладка Доступные.

3. В поле поиска вводим имя плагина, выбираем плагин и нажимаем «Установить». После установки всех плагинов – желательно перезагрузить программу.

Боковая панель в программе Brackets

Если боковая панель скрыта ее можно развернуть сочетанием клавиш Ctrl+Alt+H или перейдя во вкладку «Вид» – «Показать боковую панель».

Боковая панель в программе Brackets условно делится на две части:

Рабочие файлы
Область проекта

Рабочие файлы

В рабочих файлах мы видим файлы, которые мы открыли или редактируем. Чтобы добавить файл дважды кликните по нужному из области проекта.

Если мы кликнули по файлу из области проекта один раз, он открывается в режиме просмотра. Если мы вносим какие-либо изменения (поставим пробел, например), файл автоматически добавится в рабочую область.

Все файлы, в которые были внесены изменения, слева будут помечены большой точкой, напоминающей нам о том, что файл не сохранен (сохраняются файлы сочетанием клавиш Ctrl+S).

При смене проекта программа запоминает файлы над которыми велась работа и по возвращению открывает их в рабочей области.

Чтобы создать новый файл или папку, кликните правой клавишей мыши в любом месте области проекта и в контекстном меню выберите нужный пункт.

С помощью контекстного меню можно переименовывать файлы (F2), удалять и открывать их расположение в проводнике.

Похожее меню можно открыть в рабочих файлах. Там файлы можно сохранять, закрывать, показывать в проводнике или дереве проекта и т.д.

При создании файла не забывайте сразу указывать его расширение после точки:

Разделение экрана (Split) в программе Brackets

Для большинства редакторов кода функция разделения экрана стандартна - это очень удобно при работе с несколькими файлами одновременно.

Экран разделяется на две части – горизонтально или вертикально, в зависимости от наших предпочтений, и имеет три варианта:

No Split
Vertical Split
Horizontal Split

Так выглядит разделение экрана

Управлять функцией разделением экрана в программе Brackets можно несколькими способами:

В главном меню переходим во вкладку «Вид» и выбираем вертикальное или горизонтальное разделение:

Второй способ находится всегда на виду в сайдбаре, хотя и для его включения нужно тоже сделать два клика мышью:

Сразу после активации разделения экрана с одним открытым файлом, второй файл при открытии автоматически добавится в пустой половине.

Если возникнет необходимость поменять местами открытые файлы просто перетяните их в нужное окно что сайдбаре.

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

Для закрытия разделения экрана проделайте аналогичные действия что и при открытии, но выбирайте «No Split».

Как ускорить работу по созданию кода в Brackets?

Аббревиатуры в Emmet

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

Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.

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

div превратится в <div></div>

Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h1{Текст заголовка} и нажать Tab.

<h1>Текст заголовка</h1>

Чтобы создать заголовок с текстом-"рыбой", которым обычно является lorem ipsum... - псевдолатинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать

h2>lorem3

Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.

Чтобы создать div с классом block, нужно набрать просто

.block

А для абзаца с классом block обязательно указать тег p:

p.block

А код ниже превратится в абзац, заполненный шаблонным текстом lorem ipsum.

p.block>lorem

Если вам необходимо добавить элемент div с id="wrap", причем с вложенными в него двумя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:

#wrap>p*2>lorem

Оборачивание текста в теги

Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.

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

Полный список аббревиатур Emmet:

https://docs.emmet.io/cheat-sheet/

среда, 27 февраля 2019 г.