Blocs 3 для Mac: расширенные функции, которые нельзя пропустить

Blocs 3 наиболее известен тем, что придает дружелюбное отношение к относительно сложному веб-дизайну. Простота перетаскивания и объединение фрагментов предварительно написанного кода делают HTML и CSS гораздо менее устрашающими для неспециалистов. Но если немного покопаться, даже веб-дизайнеры среднего и продвинутого уровня найдут причины полюбить Blocs.

Вот тщательно подобранный (но далеко не полный) список некоторых из наиболее интересных функций, которые он предлагает. Некоторые из них являются старыми фаворитами, которые вы, возможно, не заметили, в то время как другие являются совершенно новыми для Blocs 3.

Пользовательские веб-шрифты

Blocs 3 поставляется с небольшим, но приличным набором веб-шрифтов. Но если вы сочтете их слишком ограничивающими, вы можете легко добавить свои собственные. В Blocs > Preferences , вы найдете кнопку, чтобы открыть диспетчер шрифтов Blocs.

Расширьте свои типографские горизонты с помощью хорошо скрытого диспетчера шрифтов.

Отсюда вы можете использовать + , чтобы добавить новые шрифты из библиотеки веб-шрифтов Google или из локальных файлов шрифтов, в зависимости от того, что вы выбрали в раскрывающемся меню.

Для локальных файлов Blocs требует как минимум файла шрифта .ttf или .woff, но предлагает вам выбрать папку, содержащую шрифт в обоих этих форматах, а также формы .eot и .svg, для максимальной совместимости с браузером.

Для веб-шрифтов Google выберите нужный шрифт из Обширная онлайн-библиотека Google, затем скопируйте HTML-код в поле «Встроить шрифт».

Скопируйте этот код из Google Fonts, чтобы добавить выбранный вами шрифт в Blocs.

В диспетчере шрифтов Blocs добавьте новый шрифт Google Web, затем вставьте этот HTML-код в появившееся поле и нажмите «Создать».

Вставьте сюда код Google Fonts, чтобы добавить его в Blocs.

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

Управляющий активами

Менеджер активов Blocs будет вам спиной, когда ваш проект наполнится вспомогательными изображениями, текстовыми файлами, PDF-файлами и многим другим. Несколькими щелчками мыши вы можете отсортировать эти файлы по группам для более быстрого доступа.

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

Пользовательские группы в диспетчере активов.

Видео фоны

Добавить видео-фон к любому элементу в Blocs проще, чем вы думаете. Просто убедитесь, что ваше видео в формате MP4 и имеет размер менее 10 МБ (что-либо больше, и Blocs будут ругать вас; все, что превышает 20 МБ, вообще не будет работать), и добавьте его в свой Asset Manager. Оттуда перетащите его прямо в любой блок, чтобы сделать его фоном.

Или же выберите желаемый блок, найдите палитру «Фон» на панели «Инспектор» и установите флажок «Видео». Когда появится видео-заполнитель Blocs, щелкните значок обновления на миниатюре (см. Ниже), чтобы выбрать новый в Менеджере активов.

Видео-фоны легко добавить, но лучше, чтобы они были меньше 10 МБ, иначе Blocs станет сварливым.

Глобальные образцы

Интернет изобилует средствами выбора цветовой палитры HTML, которые могут предоставить вам набор дополнительных цветов для вашего сайта. Как только вы найдете оттенки, которые вам подходят, держите их в соответствии, добавляя их в диспетчер образцов Blocs, доступный либо путем нажатия cmd-8 , собираюсь Window > Global Swatch Manager в строке меню или щелкнув небольшой значок сетки в правом нижнем углу окна.

Глобальные образцы управляют всей вашей цветовой палитрой на сайте.

Здесь вы можете добавлять цвета с помощью значений RGB, CMYK, HSB или шестнадцатеричного кода и применять их к элементам простым щелчком. А еще лучше, если вы передумаете и захотите заменить охру на барвинок, сделав это в окне «Глобальные образцы», вы убедитесь, что каждый элемент охры на вашем сайте мгновенно станет вашим предпочтительным барвинком.

Менеджер меню

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

Представьте Скруджа Макдака, плавающего в своей корзине для денег, но с меню вместо монет.

Откройте диспетчер меню, нажав cmd-9, собираюсь Window > Menu Manager в строке меню или щелкнув значок меню в правом нижнем углу (обведен красным выше). Оттуда вы можете добавлять или удалять элементы из основного меню навигации вашего сайта или создавать новые меню, которые вы можете либо вложить в основное меню, либо присоединить к выбранному раскрывающемуся меню или списку Bric с помощью палитры данных на панели инспектора.

Я слышал, что вам нравятся меню в ваших меню, поэтому я поместил несколько меню в ваши меню.

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

Источники данных

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

Любой текстовый объект в Blocs может извлекать свое содержимое из имени страницы, ее SEO-заголовка или SEO-описания. Например, если ваша страница называется «Мои фотографии», вы можете настроить текст заголовка вверху так, чтобы он автоматически произносил «Мои фотографии», без необходимости вводить его вручную. Просто выберите заголовок, абзац или другой текстовый объект, затем перейдите к палитре данных на панели инспектора справа. Используйте раскрывающееся меню, чтобы выбрать желаемый вариант и вуаля.

Экономьте время и печатая, заполняя текстовые поля автоматически обновляемыми источниками данных.

Полезный совет: избегайте «названия страницы» в пользу «заголовка страницы SEO». Blocs добавляет странные дефисы между каждым словом в названии страницы, и эти дефисы появляются, когда вы используете «Имя страницы» в качестве источника данных. «Заголовок страницы SEO» дает вам то же самое, без лишних переносов.

Настраиваемые атрибуты

HTML5 включает отличную возможность добавлять информацию, подобную базе данных, к объекту на странице, фактически не требуя базы данных. Затем вы можете читать эти атрибуты и управлять ими с помощью JavaScript.

Blocs позволяет легко добавлять настраиваемые атрибуты. Просто щелкните объект, перейдите к палитре Custom Attributes на панели Inspector и используйте + кнопку, чтобы добавить имена и значения для любого количества настраиваемых атрибутов.

Добавить настраиваемые атрибуты HTML5 к любому элементу страницы совсем несложно.

Настройки проекта и страницы

Но подождите, вы спросите: как мне передать эти настраиваемые атрибуты в JavaScript, если я не могу добавить свой собственный JavaScript? К счастью, вы можете вместе с любыми другими файлами, которые хотите включить. Это касается отдельных страниц или всего вашего сайта.

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

Где найти настройки для отдельных страниц.

В появившемся окне вы можете добавить информацию о SEO, включить или выключить глобальные области вверху и внизу каждой страницы, добавить собственный код в верхний, нижний колонтитул или перед <!DOCTYPE> тег на странице, в дополнение к легкому включению вложений файлов заголовков.

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

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

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

CMS поддержка

Blocs работает с четырьмя популярными системами управления контентом: бесплатная октябрьская версия с открытым исходным кодом или платная версия Pulse, Cushy или Surreal.

Blocs работает с четырьмя популярными системами управления контентом.

Pulse и October получают свои собственные пользовательские Brics, которым вы можете назначить идентификатор, который будет распознавать соответствующая CMS. Страницы справки Blocs предлагают видеоуроки о том, как интегрировать Пульс или же Октябрь с вашим сайтом.

Pulse CMS и October CMS имеют собственные готовые Brics.

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

Щелчок правой кнопкой мыши по любому объекту может сделать его готовым к работе с CMS.

Пользовательские блоки и БРИК

Если вам посчастливилось создать особенно крутой блок, который вы хотели бы использовать повторно, или вы достаточно разбираетесь в HTML и CSS, чтобы кодировать свои собственные Brics, вы можете обратиться к новому редактору блоков программы или Bric Builder, которые находятся в разделе в Developer меню в строке меню.

Выберите любой блок, который хотите сохранить для последующего использования, затем щелкните его правой кнопкой мыши и выберите Add Bloc to Library из контекстного меню или перейдите в Bloc > Add To Bloc Library в строке меню. Введите его имя, ключевые слова и категорию, и он присоединится к своим новым друзьям на панели ваших блоков. Вы можете вернуться и настроить параметры в редакторе блоков, если хотите, или поделиться своим блоком с другими, щелкнув его правой кнопкой мыши и выбрав Export Custom Bloc.

Сохраняйте пользовательские блоки и управляйте ими с помощью редактора блоков.

Создание собственных Brics сложнее и требует вышеупомянутого ноу-хау кодирования. Но если у вас есть навыки, воспользуйтесь Bric Builder, чтобы создать своих собственных обитателей бара Bric.

Даже если вы не мастер HTML, вы можете загружать пользовательские Brics других пользователей с различных сторонних сайтов или Форумы пользователей Blocs, и управляйте ими здесь. Эти полезности имеют собственный формат .bex, и добавить их в Blocs так же просто, как открыть эти файлы в Finder. Если вы хотите экспортировать свои собственные творения для использования другими, нажмите кнопку «Поделиться», обведенную на изображении ниже.

Создавайте и экспортируйте свои собственные готовые Brics в Bric Builder.

На момент написания этой статьи Blocs работает над полным API, который позволит третьим сторонам создавать, раздавать или продавать свои собственные пользовательские Brics, Blocs и другие надстройки к приложению.

Экспорт проекта

Когда вы закончите свою работу с HTML, позвольте Blocs предложить вам прощальный подарок на выходе. Направляйтесь к File > Export > Export Project… , чтобы открыть меню параметров, которые могут сделать код вашего сайта более гладким и стройным, чтобы он быстрее загружался в браузерах ваших посетителей.

Прежде чем вы уйдете, позвольте Blocs привести в порядок ваш код за вас.

Не только для новичков

Это лишь некоторые из усовершенствованных функций, спрятанных под капотом Blocs. Проконсультируйтесь с приложением База знаний для получения дополнительных сведений о том, как эта программа может упростить создание вашего сайта.