Создание сайтов на Tilda. Самоучитель [Владимир Петрович Молочков] (pdf) читать онлайн

Влад и мир про Шенгальц: Черные ножи (Альтернативная история)

Читать не интересно. Стиль написания - тягомотина и небывальщина. Как вы представляете 16 летнего пацана за 180, худого, болезненного, с больным сердцем, недоедающего, работающего по 12 часов в цеху по сборке танков, при этом имеющий силы вставать пораньше и заниматься спортом и тренировкой. Тут и здоровый человек сдохнет. Как всегда автор пишет о чём не имеет представление. Я лично общался с рабочим на заводе Свердлова, производившего

подробнее ...

авиадвигатели во время войны. Так вот будучи не совершеннолетним после училища опоздал на 15 минут в первый день выхода на работу, получил 1 год Гулага. А тут ГГ с другом опаздывают и даже не приходят на работу на танкостроительный завод? Там не с кем не нянчились, особисты с НКВД на фронт не хотели даже в заградотряды и зверствовали по любому поводу и без. У него танки собирают на конвейере. Да такого и сейчас никто не додумался. Вы представляете вес танка и сколько корпусов должен тащить такой конвейер? Где вы видели в СССР краны, позволяющие сбрасывать груз с крюка по кнопке? Я был на многих заводах с кранбалками и не разу не видал такой конструкции. Сколько тон поднимает кран и какой величины и мощности должно быть реле, что бы сместить задвижку под такой нагрузкой? Более того инструкции техника безопасности по работе в цехах не предусматривают такой возможности в принципе. Да и сами подумайте, электро выбрасыватель на крюке, значит нужны провода с барабаном. А кабеля не любят перегибов и даже гибкие. Кто возьмётся в своём уме даже проектировать такое устройство на кранбалке в цеху. Перестрелка ГГ с 5 ворами вообще дебильная. Имея вальтер, стрельбу в упор, ГГ стреляет так медленно, что пьяные в хлам воры успевают гораздо больше, чем ГГ жмет пальцем на курок. Дважды выстрелить из обреза, опрокинуть стол, метнуть нож. И ГГ якобы был воином и остаётся отличным стрелком. Воры с обрезами в городе - это вообще анекдот и вышка при любых ситуациях в те годы. А человеченка в кастрюле при наличии кучи денег? У автора очень странное воображение. Я вообще то не представляю как можно в открытую держать воющую женщину в сарае зимой в населённом пункте? Зачем сжигать дом людоедов, если есть свидетель? Ну убил людоедов - хорошо. Сжёг дом с уликами - другая статья. Глупость во всём полная. "Сунул спичку в бак". Я люблю фантастику и фентази, но не дурацкую писанину. Стиль написания далёк от художественного, всё герои выражаются в одном стиле, больше похожий на официальный язык прожжённого офисного бюрократа. Одни и те же словарные обороты. Так пишут боты.

Рейтинг: 0 ( 0 за, 0 против).

Влад и мир про Владимиров: Ирландец 2 (Альтернативная история)

Написано хорошо. Но сама тема не моя. Становление мафиози! Не люблю ворьё. Вор на воре сидит и вором погоняет и о ворах книжки сочиняет! Любой вор всегда себя считает жертвой обстоятельств, мол не сам, а жизнь такая! А жизнь кругом такая, потому, что сам ты такой! С арифметикой у автора тоже всё печально, как и у ГГ. Простая задачка. Есть игроки, сдающие определённую сумму для участия в игре и получающие определённое количество фишек. Если в

подробнее ...

полуфинале на кону стояло 5000, то финалист выиграл 20 000, а в банке воры взяли чуть больше 7 тысяч. А где деньги? При этом игрок заявил, что его денег, которые надо вернуть 4000, а не на порядок меньше. Сравните с сумой полуфинала. Да уж если ГГ присутствовал на игре, то не мог знать сумму фишек для участия. ГГ полный лох.Тем более его как лоха разводят за чужие грехи, типо играл один, а отвечают свидетели. Тащить на ограбление женщину с открытым лицом? Сравним с дебилизмом террористов крокуса, которым спланировали идеально время нападения,но их заставили приехать на своей машине, стрелять с открытыми лицами, записывать на видео своих преступлений для следователя, уезжать на засвеченной машине по дальнему маршруту до границы, обеспечивая полную базу доказательств своих преступлений и все условия для поимки. Даже группу Игил организовали, взявшую на себя данное преступление. Я понимаю, что у нас народ поглупел, но не на столько же!? Если кто-то считает, что интернет не отслеживает трафик прохождения сообщения, то пусть ознакомится с протоколами данной связи. Если кто-то передаёт через чужой прокси сервер, то сравнить исходящящйю с чужого адреса с входящим на чужой адрес с вашего реального адреса технически не сложно для специалистов. Все официальные анонимные серверы и сайты "террористов" давно под контролем спецслужб, а скорей всего ими и организованы, как оффшорные зоны для лохов, поревевших в банковские тайны. А то что аффшорные зоны как правило своёй твёрдой валюты в золоте не имеют и мировой банковской сети связи - тоже. Украл, вывел рубли в доллары в оффшорную зону и ты на крючке у хозяев фантиков МВФ. Хочешь ими попользоваться - служи хозяевам МВФ. И так любой воришка или взяточник превращаеится агента МВФ. Как сейчас любят клеить ярлыки -иноогенты, а такими являются все банки в России и все, кто переводит рубли в иную валюту (вывоз капиталов и превращение фантиков МВФ в реальные деньги). Дебилизм в нашей стране зашкаливает! Например - Биткоины, являются деньгами, пока лохи готовы отдавать за них реальные деньги! Все равно, что я завтра начну в интернете толкать свои фантики, но кто мне даст без "крыши". Книги о том как отжимать деньги мне интересны с начала 90х лишь как опыт не быть жертвой. Потому я сравнительно легко отличаю схему реально рабочего развода мошенников, от выдуманного авторами. Мне конечно попадались дебилы по разводам в жизни, но они как правило сами становились жертвами своих разводов. Мошенничество = это актерское искусство на 99%, большая часть которого относится к пониманию психологии жертвы и контроля поведения. Нет универсальных способов разводов, действующих на всех. Меня как то пытались развести на деньги за вход с товаром на Казанский вокзал, а вместо этого я их с ходу огорошил, всучил им в руки груз и они добровольно бежали и грузили в пассажирский поезд за спасибо. При отходе поезда, они разве что не ржали в голос над собой с ответом на вопрос, а что это было. Всего то надо было срисовать их психопрофиль,выругаться матом, всучить им в руки сумки и крикнуть бежать за мной, не пытаясь их слушать и не давать им думать, подбадривая командами быстрей, опоздаем. А я действительно опаздывал и садился в двигающийся вагон с двумя системными блоками с мониторами. Браткам спасибо за помощь. И таких приключений у меня в Москве были почти раз в неделю до 1995 года. И не разу я никому ничего не платил и взяток не давал. Имея мозги и 2 годичный опыт нештаного КРСника, на улице всегда можно найти выход из любой ситуации. КРС - это проверка билетов и посажирского автотранспорта. Через год по реакции пассажира на вас, вы чувствуете не только безбилетника, но и примерно сколько денег у того в карманах. Вы представьте какой опыт приобретает продавец, мент или вор? При этом получив такой опыт, вы можете своей мимикой стать не видимым для опыта подобных лиц. Контролёры вас не замечают, кассиры по 3 раза пытаются вам сдать сдачу. Менты к вам не подходят, а воры не видят в вас жертву и т.д. Важен опыт работы с людьми и вы всегда увидите в толпе прохожих тех, кто ищет себе жертву. Как правило хищники друг друга не едят, если не требуется делить добычу. Строите рожу по ситуации и вас не трогают или не видят, а бывает и прогибаются под вас - опыт КРС по отъёму денег у не желающих платить разной категории людей - хороший опыт, если сумеешь вовремя бросить это адреналиновое занятие, так как развитие этой работы приводит часто к мошенничеству. Опыт хищника в меру полезен. Без меры - вас просто уничтожают конкуренты. Может по этому многие рассуждения и примеры авторов мне представляются глупостью и по жизни не работают даже на беглый взгляд на ситуацию, а это очень портит впечатление о книге. Вроде получил созвучие души читателя с ГГ, а тут ляп автора опускающий ГГ на два уровня ниже плинтуса вашего восприятия ГГ и пипец всем впечатлениям и все шишки автору.

Рейтинг: 0 ( 0 за, 0 против).

DXBCKT про Дамиров: Курсант: Назад в СССР (Детективная фантастика)

Месяца 3-4 назад прочел (а вернее прослушал в аудиоверсии) данную книгу - а руки (прокомментировать ее) все никак не доходили)) Ну а вот на выходных, появилось время - за сим, я наконец-таки сподобился это сделать))

С одной стороны - казалось бы вполне «знакомая и местами изьезженная» тема (чуть не сказал - пластинка)) С другой же, именно нюансы порой позволяют отличить очередной «шаблон», от действительно интересной вещи...

В начале

подробнее ...

(терпеливого читателя) ждет некая интрига в стиле фильма «Обратная сторона Луны» (битый жизнью опер и кровавый маньяк, случайная раборка и раз!!! и ты уже в прошлом)). Далее... ОЧЕНЬ ДОЛГАЯ (и местами яб таки сказал немного нудная) инфильтрация героя (который с большим для себя удивлением узнает, что стать рядовым бойцом милиции ему просто не светит — при том что «опыта у него как у дурака махорки»))

Далее начинается (ох как) не простая инфильтрация и поиски выхода «на нужное решение». Параллельно с этим — появляется некий «криминальный Дон» местного разлива (с которым у ГГ разумеется сразу начинаются «терки»))

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

С другой же стороны, именно «данная отмороженность» позволит понравиться именно «настоящим знатокам» милицейской тематики — ее то автор раскрыл почти на отлично)) Правда меня (как и героя данной книги) немного удивила сложность выбора данной профессии (в то время) и все требуемые (к этому) «ингридиенты» (прям конкурс не на должность рядового ПэПса или опера, а вдумчивый отбор на космонавта покорителя Луны)) Впрочем — автору вероятно виднее...

В остальном — каждая новая часть напоминает «дело №» - в котором ГГ (в очередной раз) проявляет себя (приобретая авторитет и статус) решая ту или иную «задачу на повестке дня»

P.S Да и если есть выбор между аудиоверсией и книгой, советую именно аудиоверсию)) Книгу то я прочел дня за 2, а аудиоверсию слушал недели две)) А так и восприятие лучше и плотность изложения... А то прочитал так часть третью (в отсутсвии аудиоверсии на тот момент), а теперь хочу прослушать заново (уже по ней)) Но это все же - субьективно)) Как говорится — кому как))

Рейтинг: +1 ( 1 за, 0 против).

DXBCKT про Стариков: Геополитика: Как это делается (Политика и дипломатия)

Вообще-то если честно, то я даже не собирался брать эту книгу... Однако - отсутствие иного выбора и низкая цена (после 3 или 4-го захода в книжный) все таки "сделали свое черное дело" и книга была куплена))

Не собирался же ее брать изначально поскольку (давным давно до этого) после прочтения одной "явно неудавшейся" книги автора, навсегда зарекся это делать... Но потом до меня все-таки дошло что (это все же) не "очередная злободневная" (читай

подробнее ...

политизированная) тема, а просто экскурс по (давным давно напрочь, забытой мной) истории... а чисто исторические книги (у автора) получались всегда отменно. Так что я окончательно решил сделать исключение и купить данную книгу (о чем я впоследствии не пожалел). И да... поначалу мне (конечно) было несколько трудновато различать все эти "Бургундии" (и прочие давным-давно забытые лимитрофы), но потом "процесс все же пошел" и книга затянула не на шутку...

Вообще - пересказывать историю можно по разному. Можно сыпать сухими фактами и заставить читателя дремать (уже) на второй странице... А можно (как автор) излагать все вмолне доступно и весьма интересно. По стилю данных хроник мне это все сдорово напомнило Гумилева, с его "от Руси, до России" (хотя это сравнение все же весьма весьма субьективно)) В общем "окончательный вердикт" таков - если Вы все же "продеретесь сквозь начало и втянетесь", книга обязательно должна Вас порадовать...

И конечно (кто-то здесь) обязательно начнет "нудный бубнеж" про: "жонглирование фактами" и почти детективный стиль подачи материала... Но на то и нужна такая подача - ибо как еще заинтересовать "в подобных веСчах", не "узколобую профессуру" (сыпящую датами и ссылками на научные труды очередного "заслуженного и всепризнанного..."), а простого и нескушенного читателя (по типу меня) который что-то документальное читает от раз к разу, да и то "по большим праздникам"?)) За сим и откланиваюсь (блин вот же прицепилось))

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

Рейтинг: +1 ( 1 за, 0 против).

DXBCKT про Москаленко: Малой. Книга 3 (Боевая фантастика)

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

В общем герою (лишь формально вникающему в разные железки и нейросети)

подробнее ...

Рейтинг: +1 ( 1 за, 0 против).

Все впечатления

Создание сайтов на Tilda. Самоучитель [Владимир Петрович Молочков] (pdf) читать онлайн

Книга в формате pdf! Изображения и текст могут не отображаться!

[Настройки текста]

[Cбросить фильтры]

Владимир Молочков

Соэдание сайтов

•

на

Санкт-Петербург
« БХВ-Петербург»
2021

УДК 004.4'236
ББК 32.973.26-018
М75
М75

Молочков В. П.

Создание сайтов на Tilda. Самоучитель. - СПб.: БХВ-Петербург, 2021. 352 с.: ил. - (Самоучитель)
ISBN 978-5-9775-6777-О

Подробно рассмотрена работа с конструктором сайтов Tilda, позволяющим
создавать сайты любой сложности из готовых блоков и шаблонов без программи
рования. Приведены рекомендации по использованию панели разработчика и сове
ты по оптимальным настройкам. Даны пошаговые инструкции для создания одно
страничного сайта-визитки, лендинга, многостраничного сайта, сайта-портфолио и
интернет-магазина. Описан принцип работы с Zero Block, рассказано о публикации
меню, галереи изображений, об использовании форм и виджетов, добавлении ани
мации и видео. Рассмотрена работа со шрифтами, регистрация и подключение до
мена, добавление SSL-сертификата. Отдельное внимание уделено интеграции ин
тернет-магазина с платежными системами. Читатели узнают, как правильно орга
низовать работу над сложными проектами и разрабатывать сайты на заказ.
Для начинающих разработчиков

УДК 004.4'236
ББК 32.973.26-018

Группа подготовки издания:
Руководитель проекта
Зав. редакцией
Компьютерная верстка
Оформление обложки

Павел Шалин
Людмw,а Гауль
Натальи Смирновой
Карины Соловьевой

Подписано в печать 30.04.21.
1
Формат.70к100 /18• Печать офсетная. Усл. печ. л. 28,38.
Тираж 1000 экэ. Заказ № 1043.
"БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20.
Отпечатано с готового оригинал-макета
ООО "Принт-М", 142300, М.О., г. Чехов, ул. Полиграфистов, д. 1

ISBN 978-5-9775-6777-О

©ООО "БХВ", 2021
©Оформление.ООО "БХВ-Петербург", 2021

Оглавление
ВВЕДЕНИЕ .....•........................................•...•...•.........•.....•................................................. 13

Почему стоит делать сайты на Tilda? .......................................................................................... 14
Используемые в книге обозначения ............................................................................................ 14
Or издательства ............................................................................................................................. 15
ЧАСТЬ 1. ПЕРВЫЕ ШАГИ В TILDA ......•...................................................;...................... 17

Глава 1. Первое знакомство с Tilda........................................................................... 19
Кратко о возможностях Tilda ....................................................................................................... 20
Тilda - блочный конструхтор сайтов ................................................................................ 20
Zero Block ............................................................................................................................. 20
Формы ................................................................................................................................... 21
Интернет-магазин ................................................................................................................ 21
SEO........................................................................................................................................ 21
Публикация сайта в Сети .................................................................................................... 21
Tilda и WordPress .......................................................................................................................... 21
Начало работы на Tilda ................................................................................................................ 22
Пример создания визитки - одной страницы для личного сайта............................................ 25
Виды сайтов на Tilda .................................................................................................................... 32
Лендинг ................................................................................................................................. 32
Многостраничник ................................................................................................................ 32
Интернет-магазин ................................................................................................................ 32
Корпоративный сайт ............................................................................................................ 33
Визитка ................................................................................................................................. 33
Портфолио ............................................................................................................................ 33
Промосайт ............................................................................................................................ 33
Блог ....................................................................................................................................... 33
Лонгрид..................................... : ........................................................................................... 34
Личный (персональный) сайт ............................................................................................. 34
Вопросы для самопроверки ......................................................................................................... 34
Задание ........................................................................................................................................... 34

4

Оглавление

Глава 2. Интерфейс Tilda............................................................................................. 35
Интерфейс...................................................................................................................................... 35
Действия со страницей ................................................................................................................. 38
Инструменты для редактирования страницы ............................................................................. 40
Действия с блоками ...................................................................................................................... 42
Блоки Шапка (Header) и Подвал (Footer) ................................................................................... 43
Библиотека значков Tilda ............................................................................................................. 43
Фавикон и ошибка 404 ................................................................................................................. 44
Как написать в поддержку? .......................................................................................................... 45
Вопросы для самопроверки ......................................................................................................... 46
Задание........................................................................................................................................... 46

Глава 3. Редактор Zero Block ...................................................................................... 47
Вызов окна редактора Zero Block................................................................................................ 47
Пример создания собственной страницы в редакторе Zero Block ............................................ 50
Фон ........................................................................................................................................ 51
Изображение ........................................................................................................................ 52
Текст ..................................................................................................................................... 55
Анимация текста .................................................................................................................. 56
Галерея .................................................................................................................................. 57
Кнопка................................................................................................................................... 59
Линия .................................................................................................................................... 59
Выравнивание элементов .................................................................................................... 59
Настройка адаптивности в Zero Block......................................................................................... 61
Вопросы для самопроверки ......................................................................................................... 65
Задание ........................................................................................................................................... 65

Глава 4. Создание меню ............................................................................................... 66
Пример 1. Одно меню для всех страниц сайта ........................................................................... 66
Пример 2. Многоуровневое меню ............................................................................................... 68
Пример 3. Меню для перемещения внутри одной страницы .................................................... 70
Пример 4. Меню с переходом на метку ...................................................................................... 71
Способ 1. Ставим якорь ...................................................................................................... 72
Способ 2. Используем 1D блока .......................................................................................... 73
Вопросы для самопроверки ......................................................................................................... 74
Задание........................................................................................................................................... 74

Глава 5. Создание сайта портфолио из стандартных блоков ............................... 75
Графические форматы для сайтов ............................................................................................... 75
Шаг 1. Выбираем шаблон сайта .................................................................................................. 76
Шаг 2. Текстовый блок ................................................................................................................. 78
Шаг 3. Галерея .............................................................................................................................. 80
Шаг 4. Знакомство с фоторедактором Tilda ............................................................................ 82
Шаг 5. Создание блока со слайдером.......................................................................................... 84

Оглавление

5

Шаг 6. Завершаем ......................................................................................................................... 85
Добавляем видео с YouTube ........................................................................................................ 87
Вопросы для самопроверки ......................................................................................................... 87
Задание........................................................................................................................................... 88

ЧАСТЬ 11. ПРОДОЛЖАЕМ И УГЛУБЛЯЕМ ЗНАКОМСТВО С TILDA •••••••••••••••••••••••••••••• 89

Глава 6. Создание интернет-магазина ...................................................................... 91
Шаг l. В шаблон магазина подключаем карточки товаров....................................................... 91
Шаг 2. Добавление товаров в магазин ........................................................................................ 93
Способ l. Добавляем товар вручную ................................................................................. 93
Способ 2. Добавление товаров через каталог товаров ..................................................... 93
Шаг 3. Работа с корзиной ............................................................................................................. 97
Добавление корзины с формой заказа ......................................................................., ....... 97
Определение денежных единиц для магазина ................................................................... 99
Определение платежной системы для оплаты товара ...................................................... 99
Продажа товаров без корзины ................................................................................................... l О1
Продажа единственного товара или услуги.............................................................................. l 06
Продажа единственного товара через корзину ............................................................... l 07
Продажа единственного товара с переходом сразу в платежную систему ................... l09
Вопросы для самопроверки ....................................................................................................... 11 О
Задание ......................................................................................................................................... 11 l

Глава 7. Сайт-визитка ............................................................................................... 112
Создаем страницы сайта............................................................................................................. 112
Бейджик ....................................................................................................................................... 115
Местонахождение (карта) .......................................................................................................... 116
Виджет для заказа обратного звонка......................................................................................... 119
Виджет для отправки сообщений .............................................................................................. 122
Страница контактов .................................................................................................................... 124
Вопросы для самопроверки ....................................................................................................... 125
Задание......................................................................................................................................... 126

Глава 8. Базовые настройки сайтов на Tilda ........................................................ 127
Главная страница сайта .............................................................................................................. 127
'Настройка протокола HTTPS..................................................................................................... 128
Настройки страницы................................................................................................................... l 30
Раздел Главное ................................................................................................................... l 30
Раздел Бейджик ................................................................................................................. l 30
Раздел Facebook и SEO ...................................................................................................... 130
Раздел Экспорт .................................................................................................................. l 32
Раздел Действия ................................................................................................................ 133

6

Оглавление

Раздел Дополнительно ...................................................................................................... 133
Раздел Настройки сайта .................................................................................................. 133
Пункт Главное ............................................................................................................ 133
Пункт Аналитика ....................................................................................................... 133
Пункт SEO .................................................................................................................. 135
Панель веб-мастера ..................................................................................................................... 136
Просмотр карты блоков.............................................................................................................. 138
Связка Tilda и WordPress ............................................................................................................ 138
Вопросы для самопроверки ....................................................................................................... 139
Задание ......................................................................................................................................... 139

Глава 9. Создание рассылок ..................................................................................... 140
Зачем же нужна еmаi\-рассылка? ............................................................................................... 140
Пример 1. Создаем рассьmку «Приглашение на вебинар►►...................................................... 140
Пример 2. Как регистрироваться в Mai\Chimp? ....................................................................... 147
Пример 3. Как подключить сервис UniSender? ........................................................................ 152
Вопросы для самопроверки ....................................................................................................... 156
Задание ......................................................................................................................................... 157

Глава 10. Лендинr ....................................................................................................... 158
Пример. Делаем обучающий лендинг ....................................................................................... 158
Шаг 1. Создаем первый экран страницы ......................................................................... 158
Шаг 2. Второй экран страницы......................................................................................... 161
Шаг 3. Третий экран страницы ......................................................................................... 162
Шаг 4. Четвертый экран страницы ................................................................................... 162
Шаг 5. Подключаем службу Telegram.............................................................................. 163
Шаг 6. Активируем кнопку Попробовать бесплатно .................................................... 166
Вопросы для самопроверки ....................................................................................................... 166
Задани:е ......................................................................................................................................... 166

Глава 11. Многоэкранный сайт с меню .................................................................. 168
Шаг. 1. Выбор шаблона, настройка страницы и сайта ............................................................ 168
Шаг 2. Логотип для сайта ........................................................................................................... 168
Шаг 3. Универсальное меню с логотипом по центру .............................................................. 171
Шаг 4. Обложка с одной или двумя кнопками. Якорная ссылка ............................................ 172
Шаг 5. Список с галочками ........................................................................................................ 173
Шаг 6. Две колонки с четырьмя картинками и текстом .......................................................... 174
Шаг 7. Бриф ................................................................................................................................. 174
Заголовок брифа................................................................................................................. 174
Тело брифа ......................................................................................................................... 175
Шаг 8. Колонки с большими значками ..................................................................................... 175
Шаг 9. Отзывы в две колонки .................................................................................................... 176
Шаг 1О. Форма захвата на фоновом изображении ................................................................... 177
Шаг 11. Контакты с заголовком, крупным телефоном и email ............................................... 178

Оглавление

7

Шаг 12. Публикация сайта в Сети ............................................................................................. 178
Вопросы для самопроверки ....................................................................................................... 178
Задание ......................................................................................................................................... 179

Глава 12. Настройка анимации в блоках ............................................................... 180
Базовая анимация в настройках блоков .................................................................................... 180
Анимация в Zero Block ............................................................................................................... 182
Базовая анимация в Zero Block ......................................................................................... 182
Группа эффектов Animation ...................................................................................... 183
Группа эффектов Parallax ......................................................................................... 184
Группа эффектов Fixing ............................................................................................ 184
Пошаговая анимация в Zero Block ................................................................................... 185
Пример. Делаем слайдер и слайд-шоу ...................................................................................... 188
Слайдер ............................................................................................................................... 188
Слайд-шоу .......................................................................................................................... 190
Вопросы для самопроверки ....................................................................................................... 191
Задание......................................................................................................................................... 191

Глава 13. Регистрация домена и подключение его к Tilda ................................. 192
Почему владельцу сайта нужно регистрировать домен на свое имя? .................................... 193
Покупка (регистрация) домена .................................................................................................. 193
Подключение домена на REG.RU к Tilda ...........................................:..................................... 199
Указание домена в настройках сайта на Tilda .......................................................................... 201
Возможные проблемы ................................................................................................................ 202
Заключение .................................................................................................................................. 206
Вопросы для самопроверки ....................................................................................................... 208
Задание ......................................................................................................................................... 208

Глава 14. Шрифты на Tilda....................................................................................... 209
Шрифт и текст ............................................................................................................................. 209
Пример. Используем шрифт формата WOFF ........................................................................... 213
«Настроение» шрифтов .............................................................................................................. 215
Ошибки шрифтового дизайна и способы их избежать ............................................................ 215
В одном проекте не должно быть очень много шрифтов разных стилей ..................... 216
Шрифты должны соответствовать идеям публикаций ................................................... 218
Шрифтовой контраст ......................................................................................................... 218
О цветовой паре «шрифт-фон» ........................................................................................ 219
Текст на изображении ....................................................................................................... 219
Текст закрывает изображение........................................................................................... 220
Длинные заголовки ............................................................................................................ 220
Длинный текст ................................................................................................................... 221
Вопросы для самопроверки ....................................................................................................... 222
Задание ......................................................................................................................................... 222

в

Оглавление

Глава 15. Виджеты: расширяем функциональность Tilda ................................. 223
Используем код, который у нас «под рукой>> ........................................................................... 223
Пример 1. Добавляем счетчик и строку поиска ....................................................................... 224
Пример 2. Добавляем НТМL-код в тег сайта и страницы ......................................... 225
Пример 3. Формы приема данных и опросник (анкета) .......................................................... 228
Пример 4. Календарь .................................................................................................................. 229
Пример 5. Комментарии............................................................................................................. 231
Вопросы для самопроверки ....................................................................................................... 233
Задание......................................................................................................................................... 233

Глава 16. Добавление и настройка форм на сайте Tilda ..................................... 235
Пример настройки формы на прием данных ............................................................................ 235
Шаг 1. Настройка полей блока ......................................................................................... 236
Шаг 2. Текст на кнопке ..................................................................................................... 240
Шаг 3. Выбор сервисов ..................................................................................................... 242
Шаг 4. Настройка внешнего вида формы ........................................................................ 243
Вопросы для самопроверки ....................................................................................................... 245
Задание ......................................................................................................................................... 245

Глава 17. Создание полноценного многостраничного сайта ............................. 246
Создание трех страниц проекта ................................................................................................. 247
Шапка и меню сайта ................................................................................................................... 251
Подвал сайта................................................................................................................................ 253
Вопросы для самопроверки ....................................................................................................... 255
Задание ......................................................................................................................................... 255
ЧАСТЬ 111. СОВЕТЫ НОВИЧКУ .................................................................................... 257

Глава 18. Самое полезное .......................................................................................... 259
Практика ...................................................................................................................................... 259
Выход на рынок .......................................................................................................................... 259
Уверенная работа ........................................................................................................................ 260
Этапы работы над сайтом .......................................................................................................... 260
Программы и сервисы ................................................................................................................ 260
Adobe Photoshop ................................................................................................................. 261
Joxi ...................................................................................................................................... 261
ColorZilla ............................................................................................................................. 261
WhatFont ............................................................................................................................. 263
Emmet Re:view .................................................................................................................... 263
Figma ................................................................................................................................... 265
Векторный фоторедактор.................................................................................................. 266
Растровый фоторедактор ................................................................................................... 267

Оглавление

9

Ресурсы ........................................................................................................................................ 267
Поиск значков .................................................................................................................... 267
Поиск шрифтов .................................................................................................................. 267
Подбор варианта цветов .................................................................................................... 267
Библиотека шаблонов ........................................................................................................ 267
Сайты различного оформления ........................................................................................ 270
Тексты ................................................................................................................................. 270
Изображения ...................................................................................................................... 270
Копирование Tilda-caйтa на диск .............................................................................................. 272
Вопросы для самопроверки ....................................................................................................... 273
Задание......................................................................................................................................... 273

Глава 19. Работа с заказчиками ............................................................................... 274
Знакомство, обсуждение проекта и заполнение брифа ........................................................... 275
О стоимости работы над проектом............................................................................................ 277
Об этапах работы над проектом ................................................................................................ 278
О договоре ................................................................................................................................... 279
Об итоговой оплате и переносе сайта на хостинг заказчика ................................................... 279
Вопросы для самопроверки ....................................................................................................... 282
Задание......................................................................................................................................... 282

Глава 20. Шрифт и текст в неб-дизайне ................................................................. 283
Классификация шрифтов............................................................................................................ 283
Шрифты с засечками (Serif) .............................................................................................. 283
Шрифты без засечек (Sans serif) ....................................................................................... 284
Шрифты декоративные, или свободного стиля (Decorative).......................................... 285
Символьные шрифты (Syrnbol) ......................................................................................... 285
Форматы шрифтовых файлов .................................................................................................... 286
Растровый шрифтовой формат (FON) ............................................................................. 286
Векторные шрифты ........................................................................................................... 287
Управление шрифтами в ОС Windows ...................................................................................... 287
Текст. Основные атрибуrы стиля текста................................................................................... 288
Из чего состоят буквы? ..................................................................................................... 288
Серифы (засечки) ....................................................................................................... 289
Пуансон (очко) ........................................................................................................... 289
Базовая линия (Baseline)............................................................................................ 289
Гарнитура шрифта (Туре family) ...................................................................................... 289
Начертание (Туре face) ...................................................................................................... 291
Размер шрифта. Типометрические единицы ................................................................... 292
Пункт (point или pt) ................................................................................................... 292
Пика (pica) .................................................................................................................. 292
Цицеро ........................................................................................................................ 292
Шпация ....................................................................................................................... 292
Кегль ........................................................................................................................... 293
Пропорции шрифта (ширина символов).................................................................. 294
Абзац ........................................................................................................................... 295

10

Оглавление

Выключка (выравнивание текста) .................................................................................... 296
Емкость и насыщенность шрифта .................................................................................... 297
Контрастность шрифта ...................................................................................................... 299
Интерлиньяж ...................................................................................................................... 299
Специализированные программы для работы со шрифтами .................................................. 300
Диспетчер шрифтов Corel Bitstream Font Navigator ........................................................ 301
Советы и рекомендации при работе со шрифтами .................................................................. 303
Цвет шрифта и цвет фона ........................................................................................................... 304
Вопросы для самопроверки ....................................................................................................... 305
Задание ......................................................................................................................................... 306

Глава 21. Цвет в веб-дизайне: базовые знания о работе с цветом .................... 307
Цветовой спектр .......................................................................................................................... 307
Физиология цвета у человека ..................................................................................................... 308
Физика цвета ............................................................................................................................... 308
Свет и цвет ................................................................................................................................... 309
Понятие цветовой модели .......................................................................................................... 309
Цветовая модель RGB ................................................................................................................ 31О
Цветовой круг.............................................................................................................................. 310
Холодные и теплые цвета........................................................................................................... 311
Примеры выбора цветовых комбинаций .................................................................................. 311
Глубина цвета .............................................................................................................................. 313
Цветовые режимы ....................................................................................................................... 313
Bitmap - режим черно-белой графики ........................................................................... 313
Grayscale - режим в градациях серого ........................................................................... 313
Цвет и фон ................................................................................................................................... 314
Цветовая гармония ...................................................................................................................... 314
Воздействие цветов на людей .................................................................................................... 315
Вопросы для самопроверки ....................................................................................................... 318
Задание ......................................................................................................................................... 319

Глава 22. Правила композиции сайта .................................................................... 320
Что такое веб-дизайн? ................................................................................................................ 320
Композиция в дизайне ................................................................................................................ 321
Средства композиции ................................................................................................................. 321
Пятно................................................................................................................................... 321
Ритм .................................................................................................................................... 322
Цвет ..................................................................................................................................... 323
Количество цветов в изображении ........................................................................... 323
Советы по выбору цвета............................................................................................ 324
Динамика композиции и направляющие линии .............................................................. 325
Чем ближе - тем главнее ................................................................................................. 325
Дизайнерские правила создания веб-страниц .......................................................................... 326
Слишком большое количество объектов ......................................................................... 327
Несоответствие идеи и содержания ................................................................................. 327

Оглавление

11

Негативные ассоциации у зрителя в связи с изображениями на вашем сайте ............. 328
Оступы между объектами ................................................................................................. 328
Закон контраста.................................................................................................................. 330
Закон баланса (уравновешенная композиция)................................................................. 331
Правило взгляда и движения ............................................................................................ 332
Необычное привлекает ...................................................................................................... 333
Закон нарушения целого ................................................................................................... 333
Вопросы для самопроверки ....................................................................................................... 334
Задание ......................................................................................................................................... 334
ЧАСТЬ IV. ПРИЛОЖЕНИЯ······························································································ 17

Приложение 1. Пример брифа на разработку сайта
на платформе Tilda............................................•.•....••.......•.•.•..••.•.•...•.....•..•....•.•........... 337
Приложение 2. Поэтапный (поблочный) расчет времени работы
над блоками проекта на платформе Tilda
(создание лендинга «XYZ))) ......................................................................................... 339
Приложение 3. Договор № на оказание услуги
по созданию продающей страницы (Landing Page) ................................................... 341
Приложение 4. Словарь веб-мастера .....................................•..•.....•...•.....•.•...•.•........ 344
ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ .......................................................................................... 347

Введение
Эта книга рассказывает о технологии создания веб-сайтов с помощью бесплатного
онлайн-конструктора Тilda. В настоящее время Тilda является абсолютным лидером
на рынке таких конструкторов, позволяющих создавать сайть1 при помощи мыши
из готовых элементов и шаблонов без знания программирования и дизайна.
Психологи утверждают, что у современного человека «клиповое мышление»,
и блочный подход к созданию сайтов на Тilda как нельзя лучше подходит в качест
ве модели для такого восприятия информации в нашем стремительном веке.
Книга позволит читателю быстро создать собственный сайт-визитку или «элек
тронную витрину» без необходимости программировать, осваивать сложные CMS 1
или нанимать стороннего разработчика. Конструктор Tilda поможет ему собрать
сайт из готовых модулей и выбрать подходящий шаблон оформления.
Практическая значимость книги заключается в том, что она дает возможность
обычному пользователю ПК научиться создавать сайты без освоения веб-дизайна и
программирования. Она содержит минимум терминологии и значительное количе
ство иллюстраций, демонстрирующих действия пользователя. Издание «заточено»
на начинающих пользователей с практически «нулевым» уровнем подготовки, ко
торым нужно срочно создать сайт без финансовых затрат. Это маркетологи, менед
жеры, начинающие предприниматели, желающие самостоятельно собрать сайт
визитку или лендинг, а также школьники и студенты, которым необходимо сделать
сайт в рамках учебного процесса.
Книга может быть использована как учебное пособие в курсе «Проектирование и
разработка веб-приложений» профессионального модуля: ПМ.09 «Проектирование,
разработка и оптимизация веб-приложений>>, код специальности: 09.02.07 «Инфор
мационные системы и программирование», квалификация: «Разработчик веб- и
мультимедийных приложений».
Книга состоит из трех частей и 22 глав, последовательно и на подробных примерах
освещающих весь путь создания веб-приложений с использованием блочного кон
структора сайтов Тilda, а также трех приложений с примерами документов, подле
жащих обсуждению между разработчиком сайта и его заказчиком. Завершает книгу
приложение, содержащее «Словарь веб-мастера» (глоссарий по Tilda).

1

CMS (Content Management System)- система управления контентом (содержимым).

Введение

14
ЭЛЕКТРОННЫЙ АРХИВ

Ряд иллюстраций книги удобнее рассматривать в цветном формате, однако по понятным
причинам в тексте книги они представлены в черно-белом варианте. Тем не менее наиболее
важные для понимания материала книги иллюстрации в цвете продублированы в файле
Цвет.рdf, ZIР-архив с которым можно скачать с FТР-сервера издательства «БХВ» по ссылке
ftp:/lftp.bhv.ru/97859775-67770.zip, а таюке со страницы книги на сайте https://bhv.ru/.

Почему стоит делать сайты на Tilda?
Поклонники Tilda считают, что мир изменился и классическая верстка сайтов по
степенно уходит в прошлое. В этом есть резон, если требуется запустить сайт бы
стро и без особых знаний в области программирования и дизайна. И хотя конструк
торов сайтов довольно много, однако разработчики Tilda все же считают своим
главным конкурентом не другие конструкторы, а систему управления сайтом
WordPress. Преимущества Тilda над другими способами создания сайтов таковы:
♦ малые сроки (2-3 недели), затрачиваемые на разработку и запуск сайта;
♦ Tilda - блочный конструктор, в котором блоки адаптированы, многократно
проверены и отлажены специалистами. Поэтому в Тilda нет багов. По этой же
причине сайты на Tilda хорошо продвигаются и наращивают ссылочную массу.
На жаргоне веб-разработчиков - они хорошо сеошатся (от SEO, Search Engine
Optimization- продвижение, оптимизация, раскрутка сайта);
Новый

ТЕРМИН

Слово «баг» заимствовано из английского языка (bug в переводе означает «насекомое»).
Это жаргонное слово принято понимать в среде компьютерщиков в значении «ошибка, не
поладка, сбой», и на сленге программистов оно используется для обозначения мелких
ошибок в компьютерных программах, приводящих к их некорректной работе.
♦

♦
♦

сайт на Тilda делает один человек - он и разработчик, и дизайнер, и версталь
щик. В классической веб-верстке могут присутствовать нестыковки в работе
этих звеньев (из-за того, что на разных этапах подготовки сайта им занимаются
разные люди), но в Tilda они полностью исключены;
сайты на Tilda гибкие, то есть позволяют быстро делать их правку и доработку;
Тilda пригодна для создания всех видов сайтов, то есть может закрыть все по
требности. заказчиков.

Используемые в книге обозначения
В книге можно встретить элементы оформления и обозначения, смысл которых по
яснен далее. Так, например, выражение «Выполните команду Действия I Передать
сайт» означает, что нужно открыть меню Действия и в этом меню выбрать коман
ду Передать сайт.
Если в тексте встречаются два обозначения клавиш, между которыми стоит знак
плюс (например: +), то это означает, что сначала нажимают и удержи
вают первую клавишу, затем нажимают вторую, после чего отпускают обе.

Введение

15

Когда используется термин «перетаскивание» (буксировка), то подразумевается
удерживание нажатой левой кнопки мыши при перемещении ее курсора.
В книге есть множество особых вставок. В них содержится дополнительная ин
формация, облегчающая чтение и поиск информации.
СОВЕТ

Советы акцентируют ваше внимание на той информации, которая может быть полезной.
Советы иногда могут быть даны в виде алгоритма - последовательности операций, кото
рую нужно выполнить, чтобы получить желаемый результат.
ПРИМЕЧАНИЕ

Примечания (Замечания) - это подсказки, сообщающие о том, как можно быстрее и эф
фективнее выполнить ту или иную работу. Некоторые из них помогут в решении типичных
проблем и подскажут выход из затруднительных ситуаций.
ВНИМАНИЕ

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

Новый ТЕРМИН
В книге использовано много специфических терминов, которые читатель встречает впер
вые. Они разъясняются при первом своем появлении в тексте. В конце книги все специаль
ные термины сведены в глоссарий (словарь) по теме книги.

От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу электронной почты
издательства компьютерной литературы >. Это примеры сложных переводов с русского
на английский. С английского на русский - такая же ситуация.

f

1

CR27: Обложка с выделенным текстом
R28: 06лоЖJtо с тексrом но мошке

CRЗON: Промо слойдер
СRЗ 1: Обложка с фото автора
CRЗ2N: Обложка с формой сnрово

Рис. 1.12. Выбираем обложку из списка

ФОНОВОЕ ИЗОБРАЖЕНИЕ

Загрузить файл

•.. 343365fЬrookecagle19347613.Jpg

отммальный размер фонового изображения 1680Х900рх
Рис. 1.13. Отыщем нужное изображение

Рис. 1.14. Загружаем свое изображение для обложки

29

Глава 1. Первое знакомство с Тilda

Создание одной страницы для сайта-визитки мы начнем с выбора какой-либо об
ложки: перейдем по ссылке Обложка (рис. 1.11) и возьмем, например, вариант
CR28 (рис. 1.12).
Чаще всего обложка содержит фоновое изображение, которое мы заменим на свое.
Для этого выполним команду Контент I Загрузить файл и загрузим нужное нам
изображение, которое послужит фоном для нашего сайта-визитки (рис. 1.13), после
чего выполним команду Сохранить и закрыть (рис. 1.14).
Чтобы сайты загружались быстро, нужно оптимизировать изображения, то есть
уменьшать их вес, стараясь при этом сохранять приемлемое качество фотографий.
Разработчики Tilda рекомендуют использовать для фона такие изображения:
♦ формат: jpg;
♦ размер по ширине: 1680 рх;
♦ разрешение: 72 dpi;
♦ цветовая модель: RGB;
♦ степень сжатия: 1О.
Если ваше изображение существенно отличается от оптимального, то его нужно
заранее подготовить (сжать) в Adobe Photoshop или в аналогичном графическом
редакторе, или, например, с помощью онлайн-сервиса TinyPNG (https://tinypng.ru
или https://tinypng.com/). Давайте посмотрим, как можно оптимизировать наш
фон, воспользовавшись услугами этого сервиса (рис. 1.15).

снъ

-

tDN

C'OТQ.UOr\

Al'!f'A�t'-Мl',I;

�

�

80tl1"1t

Интеллектуальное сжатие PNG иJPEG

Более 1 МИЛJ'\ИЗРдЗ PNG иJPEG мэображений оnтимизированы и все еще
nодсчи:rываюrся!

Чfs-�'

�·---

..�...,___.,...,,......
Wмt/_
--.О___
----�_
-.'!11_..,..,.....�-�

"'-Gldlf- ..N/lt,"'1>""11-
.....��
-·-·�.--..,_.._

_

�"IC:�•-�t-�i--�.-.-;p.
��......,.,,i

�1

.,---�-,....--��
___,.�__
_,,_ �,..

-��-C.Oll..io

�.c-1i,,_., __ _

�.__._..... _.,..,.

Кто-нибудь может С-1> или «Услуги», «Прайс-лист», «Кон
такты». Это проекты для маленьких компаний или частных лиц, желающих размес
тить в Интернете информацию о себе и своих услугах.

Портфолио
Портфолио- это галерея работ, например фотографа или художника. Она создает
ся, чтобы показать их опыт и мастерство. Такие сайты отличаются нестандартным
дизайном в Z-блоках Тilda и анимацией, что позволяет привлечь внимание пользо
вателей и находить новых клиентов.

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

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

34

Часть I. Первые шаги в Tilda

Лонгрид
Лонrрид - сайт с большим количеством текста, разбитого на части с помощью
изображений, фото и видео.
Личный (персональный) сайт
При создании персонального сайта автор хочет рассказать о себе (кто он, чем зани
мается). Такой сайт на Tilda вы сможете дополнить различными скриптами и вид
жетами - например, вставить календарь событий или рассылку. Это может быть
сайт о мероприятиях (свадьба, юбилей, спортивный марафон).

Вопросы для самопроверки
♦
♦
♦
♦
♦
♦
♦

Что такое Tilda?
Кто автор программы?
Назовите достоинства и недостатки Tilda.
Что лучше: Тilda или Word.Press?
Какой тариф вы бы выбрали? Почему?
«Партнерская программа». В чем суть?
Почему российские разработчики Tilda активно используют в этом сервисе анг
лийский язык?
♦ Каково назначение онлайн-сервиса TinyPNG?
♦ Какая польза веб-дизайнеру от сайта https://unsplash.com/?

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

ГЛАВА

2

Интерфейс Tilda
Итак, Тilda- современный платный конструктор сайтов. Давайте теперь погово
рим о терминах, принятых в интерфейсе Тilda, о работе со страницами и блоками и
продолжим работу с одностраничником, начатым нами в главе 1.

Интерфейс
На рис. 2.1 показана панель управления сайтами. Поскольку интерфейс окна орга
низован на русском языке, то в комментариях здесь нуждаются лишь отдельные его
пункты.
)( +

(!) rild•

�

➔

С О

П' Серемсы

"1 ',_

V'V
-')( эламентах '"' еРФейса
Фов,,кон v.ожмо загруз»ть только ■ формате .ico. �а&ртируйте воше .,.,оорQ)l(ВНИе " .ico
з;:�t..Заrруз1-1ТЬ.цоnолr�иrаrы-,о 1,,�o"tQ,, � за.,,:nад,:ж а Сооари"' плиток W.rdo-."'5o можно здесь

Рис. 2.18. Здесь можно задать фавикон

45

Глава 2. Интерфейс Тilda

Лендинг для языковой школы

Рис. 2.19. Здесь задается ошибка 404

Как написать в nоАQержку?
Разработчики Тilda уделяют много внимания поддержке пользователей. Но если вы
в разделах Обучение и Помощь не нашли ответ на свой вопрос, то нажмите на
кнопку с изображением вопроса, а затем опуститесь в нижнюю часть Справочного
центра (рис. 2.20).

Рис. 2.20. Кнопка перехода в Справочный центр

Сnравоч,-ый Lен-р

"

р

.

с"

х

Введкrе вопрос '111И ключевое слово
'

Как' устроен интерфейс
Домен
Настройки сайта
Редактирование страницы
Интернет-магазин
Формы

На i"!OL\JЛ� опет i-,a сео" еоnросг

�
НАПИСАТЬНАМ

Рис. 2.21. Кнопка НАПИСАТЬ НАМ позволяет написать вопрос в поддержку Tilda «вживую11

46

Часть 1. Первые шаги в Тilda

В нижней части Справочного центра вы можете написать обращение в форме заяв
ки и получить на него ответ на адрес вашей почты (рис. 2.21 ).

Вопросы для самопроверки
♦ Что такое СRМ (Customer Relationship Management), назначение этой службы?
♦ В интерфейсе Tilda есть пункт Найти дизайнера. Для чего он нужен?
♦ Поясните термин «бриф».
♦ Каким образом можно предложить свой сайт разработчикам Tilda?
♦ Чем отличается команда Передать страницу от команды Перенести страницу?
♦ Как называется блок, предназначенный для вставки НТМL-кода?
♦ Какие пункты содержит меню Еще?

Задание
Войдите в нижнее меню на сайте https://tilda.cc/ru/ и разберитесь самостоятельно с
разделами, отмеченными на рис. 2.22. Здесь можно ознакомиться с часто задавае
мыми новичками вопросами, записями вебинаров и видеоуроками по Tilda.

Рис. 2.22. Подвал сайта https://tilda.cc/ru/

ГЛАВА

3

Редактор Zero Block
Новый ТЕРМИН
Zero Block - встроенный редактор для веб-дизайна в составе Tilda. Он позволяет не ис
пользовать готовые блоки из библиотеки, а с чистого листа создать собственное (уникаль
ное) оформление вашего сайта. В терминологии разработчиков и пользователей сервиса
Tilda окно редактора называется нулевым блоком.

Начнем с рассмотрения основных возможностей редактора Zero Block.

Вызов окна редактора Zero Block
Для того чтобы открыть окно редактора Zero Block (то есть добавить на страницу
нулевой блок), нажмите на кнопку ZERO внизу страницы (рис. 3.1) или активируй
те его в Библиотеке блоков- она там так же находится в самом низу (рис. 3.2).
В результате в окне пустой страницы открывается окно Zero Block (рис. 3.3).

*
- ;�ою:а I Заrолово«: средний 1 � ; Текст I Фраза I Изображение

Галерея

Линия

[+]

ZERO

Рис. 3.1. Вызов нулевого блока через кнопку ZERO

§

Нулевой блок

СС3:ю� :::;cJ -ча.-:-:).;; 6:i..:(

ВСЕ БЛОКИ

[f]

Рис. 3.2. Вызов нулевого блока через кнопку ВСЕ БЛОКИ

Нажмите кнопку РедаК111ровать блок и очистите поле блока от всех его элемен
тов. Для этого можно выделить все объекты в окне мышью (или нажать комбина
цию клавиш +), а затем нажать клавишу (рис. 3.4).

Часть /. Первые шаги в Тilda

48

"
�
\1'

А

С ()
С клавиш

Пример создания собственной страницы
в редакторе Zero Block
Работать над страницей в Zero Block мы будем в следующей последовательности
(рис. 3.8).
Создание собственной страницы начните с команды: Пустая страница I Z блок.

Рис. 3.8. Последовательность выполнения примера
по практическому знакомству с редактором Zero Block

Глава 3. Редактор Zero 8/ock

51

Фон
Редактирование блока начните с выбора цвета фона. Для этого выполните команду
Settings (можно нажать клавишу и выбрать опцию BG COLOR) и выберите
инструмент Пипетка. Затем перейдите на вкладку Градиенты и выберите заливку
из двух цветов: #00e7f7 и #00c2fl (рис. Ц-3.9).
Тильда Цвета. Скопируйте понравившийся цвет

- просто нажмите на его код или палитру.

Uвета

Градиенты

Рис. Ц-3.9. Задаем градиентный фон из двух цветов: выбираем цвета для градиента

!i.4C1(G�OU D IM,t,.GE

Uplood file

!М:НАVIО�

Scrolf

"

POSIТION

Center Center

•

FIЩ# S'ART

f!CER fND

#00е7Гl

• #00c2f1

50%

•

100%

У

Рис. Ц-3.10. Цвета градиента выбраны

Щелчком мыши скопируйте в буфер обмена первый цвет (#00e7f7) и перенесите
его в настройки блока (FILTER START) - то есть из буфера обмена комбинацией
клавиш + вставьте этот цвет в Z блок. Аналогично вставьте в настройки

52

Часть /. Первые шаги в Тilda

Z блока (FILTER END) второй цвет (#00c2fl). Затем задайте прозрачность каждого
из этих двух цветов (рис. 3.1О).
Итак, мы задали цвет фона переходом от светло-синего до темно-синего. Нажимаем
на кнопку Save, чтобы сохранить результат.

Изображение

Изображение можно добавить, перетянув картинку из папки на компьютере в об
ласть Grid Container блока (рис. 3.11).
)(

� ➔

С O

ёt, T�•Colon.,Cokirp.wtteJTTJf

)(

------�-------+

i tiktиc/�O/?tк:otdtd�21IO.S2929&p.,,ge«:f,a,1J13S061

Рис. 3.11. Добавляем картинку методом Drag-and-Drop
в область Grid Container

Вставленное таким способом изображение можно редактировать (рис. 3.12).
Изображение можно добавить по-другому: нажмите на оранжевую кнопку «плюс»
[1] и выберите команду Add Image (рис. 3.13). Затем нажмите справа на кнопку
Upload file и добавьте выбранное изображение в графический фрейм (рис. 3.14).
Если фрейм не использовать, то изображение с помощью кнопки Upload file будет
добавлено как фон - что мы и сделали для второго изображения (рис. 3.15).
Чтобы убедиться, что изображения вставлены верно, уберите градиентную заливку
фона, выставив цветовые ползунки в 0% (рис. 3.16).
Перед тем как работать с текстом, мы немного изменим вид нашей страницы (сде
лаем фон более бледным, чтобы он контрастировал с текстом) и нажмем на кнопку
Save (рис. 3.17).

53

Глава 3. Редактор Zero Block

Оrnроенть фойn

ФА�Л

.2o$:дi/0_!.>3,jpg 52{/рх
4451>х

_°""'"""''""""
___,

ра-р

, PtWJ,m,poeo:r.

КоnкраЮJЬ

Удалкть

L

Рис. 3.12. Вставленное изображение доступно для редактирования

х

О

i tilda.c

• • • •
Готовим nодкУ

Рис. 3.24. Галерея готова

•

59

Глава 3. Редактор Zero Block

Кнопка
Надпись на кнопке, шрифт и ссылка задаются в ее настройках (рис. 3.25).

МАГАЗИН
tittps:/�erщas.comtshOp/
Same; W1Пdow

•

Рис. 3.25. Мы добавили кнопку Магазин

Линия
Выберите команду Add Shape I Line и задайте длину линии (W = 690 рх), ее цвет
(BGCOLOR), поверните ее на 90 градусов (ROTATE) и продублируйте движением
мыши, удерживая нажатой клавишу (рис. 3.26).

Выравнивание элементов
Мы уже рассмотрели ранее, как можно выравнивать объекты на странице с помо
щью вертикальной и горизонтальной направляющих (рис. 3.27).
Есть и другой способ выравнивания объектов на странице. Когда выделено не
сколько объектов, их можно выровнять по горизонтали и по вертикали относитель
но друг друга или относительно контейнера. В качестве примера мы выровняли
объекты по вертикали (рис. 3.28). Для этого элементы, предназначенные для вы
равнивания, мы пометили (выделили) мышью при нажатой клавише , после
чего нажали на соответствующую пиктограмму, показанную на рис. 3.28. Другие
пиктограммы для выравнивания советуем для понимания изучить «методом тыка))
самостоятельно.

60

Часть /. Первые шаги в Тilda

DX

347

рх

5

GIOD

· 1.EF"T � JOt

#faf5f5

...

llne

100
90

□
Сору

c..J О d
Delete

Auto

Рис. 3.26. Слева - две вертикальные линии,
справа - поле для настройки их параметров

Рис. 3.27. Пример выравнивания текста по направляющим

Lock

Глава 3. Редактор Zero 8/ock

61

Рис. 3.28. Пример выравнивания трех объектов по вертикали

Настройка адаптивности в Zero Block
При настройке адаптивности веб-дизайнер должен подогнать дизайн каждой стра
ницы сайта (ее внешний вид) под устройство, с которого на сайт зашел пользова
тель. В Tilda все шаблоны уже адаптивны изначально, а в нулевом блоке разработ
чики предусмотрели адаптацию для всех основных типов экранов:
♦ 1200 рх - стационарные компьютеры и ноутбуки;
♦ 980-1200 рх - планшет горизонтальный;
♦ 640-980 рх - планшет вертикальный;
♦ 480-640 рх - смартфон горизонтальный;
♦ 320-480 рх - смартфон вертикальный.
Процесс адаптации заключается в предоставлении пользователю для просмотра
вашей страницы на этих разрешениях. Если что-то будет выглядеть не так, нужно
поправить объекть1 в Z Block: например, кегль текста, размер изображения или вза
имное расположение объектов.
Давайте проверим адаптивность нашей страницы в Z Block и при необходимости
выполним редактирование этой страницы. Сначала откроем ее на экране компью
тера (рис. 3.29).
Теперь посмотрим, как этот веб-документ выглядит на планшете, расположенном
горизонтально (рис. 3.30).
Подровняем объекты влево по направляющей, как показано на рис. 3 .31.
В позиции «Планшет вертикально» ничего менять не будем (рис. 3.32).
Вид страницы на смартфоне до адаптации показан на рис. 3.33.
Чтобы страница на смартфоне отображалась более верно, мы уменьшили шрифт
текста, увеличили размер холста по вертикали и выровняли объекты (рис. 3.34).

62

Часть /. Первые шаги в Тilda

Рис. 3.29. Наша исходная страница адаптирована под ПК

Рис. 3.30. Планшет горизонтально до правки - объекты налезают друг на друга

Глава 3. Редактор Zero Block

63

Рис. 3.31. Планшет горизонтально после корректировки контента

Рис. 3.32. Планшет вертикально

Часть /. Первые шаги в Тilda

64

□□о

Рис. 3.33. Изображение на смартфоне вертикально до адаптации

□

o[JOO

Рис. 3.34. Изображение на смартфоне
вертикально после корректировки

МАГАЗИН

Теперь можно сохранить результат нажатием на кнопку Save.

Гпава 3. Редактор Zero Block

Вопросы для самопроверки
Для чего служит Zero Block?
♦ Как очистить поле Zero Block от его объектов по умолчанию?
♦ В чем разница между Grid Container и Window Container?
♦ Назовите известные вам «горячие» клавиши для быстрого редактирования?
♦ Что такое выключка?
♦ Расскажите про настройку адаптивности в Zero Block?
♦

Задание
Создайте личную страницу в Z Block и выполните настройку ее адаптивности.

65

ГЛАВА

4

Создание меню
В этой главе мы рассмотрим создание нескольких вариантов меню.

Пример 1. Одно меню для всех страниц сайта
Создадим сайт из двух страниц (рис. 4.1 ).
1111

СТРАНИЦА 1

СТРАНИЦА 2
Рис. 4.1. Наш двухстраничный сайт

Создайте пустую страницу, добавьте на нее блок меню (рис. 4.2) - например,
МЕ301 (рис. 4.3), и настройте его, как показано на рис. 4.4.
Company

н
Список страниц
Ме ю�·,,
Плитка 1'1 ссыпка

111D Уннеерооnы,ое меню с лоrотмnом
c.neea Лоrот,щ nу,,,сты "'""о. .,,,,,..,.

Ифt,Якорна11 ссылка.

..

БЛОК 1

#rвс219641901

..

БЛОК2

#rec219641902

::

БЛОКЗ

..

БЛОК4

#rec219641904

..

БЛОКSj

#гес219641909

----

#гес219641903

·-- -� -�- ·--·

- ------··•--··-

Рис. 4.13. Прописываем ссылки для блоков

71

Глава 4. Создание меню

В списке пунктов меню пропишите в ссылках номера блоков, на которые долж
ны переходить пользователи по нажатию на соответствующий блоку пункт меню
(рис. 4.13).
Блоки выбирайте, щелкая на них мышью (рис. 4.14).
Чтобы меню работало, опубликуйте все страницы (рис. 4.15).

Кликниre но блок, чтоЬы cr о выс>роть.
Рис. 4.14. Ссылка на блок появляется при щелчке на нем мышью

rндОНАЯСJРАНИЦА

ыюк 1

(.ЛtЖ 2

ыюк 1

bllOK 4

&ЛОК S

БЛОК4
Расскажите, с чем овяэаны услуги вашей
компании и раскройте главную выгоду клиента

• Пepllllfl ycnyra Коротко paccкa)l(i,rre в чем ее суть и добавьте яркое фото, чтобы
привлечь больше внимания клиентов,
• Вторая услуга напишите 06 услуге коротко; что в нее входит или из каких
этапов работы она состоит.
• Третья усnуга Коротко расскажите в че1,1 ее суть и добавьТЕ\ яркое фото, чтобы
привлечь больше внимания клиентов.
• Четаертая ycnyni Напишите об услуге коротко: что в нее вxoдi,rr или из каких
этапов работы она состоит.
• Пятая ycnyra Коротко расскажите в чем ее суть и добавьте яркое фото, чтобы
привлечь больше внимания клиентов.

Рис. 4.15. Меню создано и работает

Пример 4. Меню с переходом на метку
ПРИМЕЧАНИЕ

Под «меткой» мы будем понимать якорь или 1D блока.

Давайте создадим несколько произвольных блоков на основе пустой страницы и с
помощью якоря организуем переход с кнопки на обложку (рис. 4.16).
Чтобы в Тilda организовать переход на конкретное место в сайте (на метку), суще
ствуют два способа.

72

Часть /. Первые шаги в Тilda

F101 Ююпка

Тl03 3arOnoвOIC Эб
GL01 Галерея
Т173 ЯХорная ссыпка
R01 OбnaJlota· заmловок, оодэ.

Рис. 4.16. Мы создали 8 блоков (8 страниц или 8 экранов)

Способ 1. Ставим якорь
Чтобы добавить на страницу специальный невидимый блок - якорь - в Библио
теке блоков выполните команду Другое I Т173 Якорная ссылка (рис.4.17).

111) ЯкорнОJ1

Hyneeo>16n0tt

ССЫЛIСО

[f]

Рис. 4.17. Добавляем блок Т173 Якорнц ссыпка

В контенте у этого блока нужно прописать имя якоря - например, anchor (рис.
4.18и4.19).
ИМЯ ЯКОРНОЙ ССЫЛКИ

anchor

Рис. 4.18. Имя для якоря задано

1173 •

Q Н предлогов и строк. Например, де
фис ((-►► - это орфографический знак, а тире «-)) - пунктуационный. ((ЕЛОЧКИ►) - это
французские кавычки (им отдается предпочтение в русском языке), а "английские двойные"
принято использовать в англоязычных текстах.

80

Часть /. Первые шаги в Тilda
ЗАГОЛОВОК

Пара слов обо мне

8

I

.!!.

fi

С-:>

•= ::

✓

()

А

Т!

1

�андидат педагогических наук. Преподаватель высшей
ационной категории
в#nЬsр;ПТК НовГУ. Преподавал такие спецдисциплины как «Компьютерная графика» (Adobe
Pho!oshop, CorelDRAW, lnDesign, основы рекламы и#пЬsр;др), «Компьютерные
и#nЬsр;телекоммуникационные сети� (LAN, WAN, Cisco), «Информатика», «Веб-дизайн»
(создание статических и#пЬsр;динамических сайтов с#nЬsр;использованием HTMLS, CSSЗ,
РНР, WordPress, Tilda).
Имею большое количество электронных и#пЬsр;печатных публикаций, например,
в#nЬsр;издатеnьстве «Академия» издал учебное пособие «Информационные технологии
в#nЬsр;профессиональной деятельности». В#nЬsр;издательстве «Питер» выпустил книги
«Цифровое фото» и#nЬsр;(ТОР
l lf\lll\pt"!1UIOAOI.:)1·0..1щеш1е XDOCТOBIП�l l':11.HT UI)\1
11р11 Rlik1fJC.1 11 11r p.tlбttnacr С№11L:.1ЯIЦ\--Ю R'f\.1�.

Список страниц
Плитка k ссылка

В..део

Форма '1 кнопка

П..ОТМОtОJ1 смс,-.о. Прwа. onnoтa 64,3

1 Маrа..,н

Рис. 6.13. Добавление корзины с формой заказа

В карточке товара имеется кнопка BUY NOW, и вы ее можете настроить по своему
усмотрению (рис. 6.16).
Если теперь нажать на красную кнопку BUY NOW, то откроется форма для оформ
ления заказа и покупки товара (рис. 6.17).

98

Часть //. Продолжаем и углубляем знакомство с Тildв

ST IOO: Кор sмна с формой 3a1tasa
SТ 105: Плате""'°" с:мстема. Прома• омато

ш ко

SТ200: Корто-,ка nродукта
ST205: Кар�очка nродукта на кю ширину окна
SТ21 О: Карrочка продукта с ЮЛ/fnающей иttформ
ST215: Карточка продукта с фоновым мsобра,кен

Рис. 6.14. Добавляем блок с карточками товара

J')•;i;ьe ,1щ110,щое ш:1шнrлс
МАГН}'Мi;
�t':fi')jlQ'",.µf

P\,t,Ulk.11:1u-.cblt111t1-� nm;:.1'""'1C1·1�
1111ю.мтnw,dбtЮl5:k•11иtim111кfl -

Рис. 7.25. Добавляем на страницу блок BF902N Виджет дn11 отnревки соо&щений

Подключение сервиса приёэма данных: Emall

ва.ио: добавьте адрес, noreplYOIIJCla.ws в aдpeelfflO 11НМfУ в 88Wellt почтовом
клиенте м открываАте все nмсьма перед удаnенме1,t, Ч1t1ОЫ онм не� в
сnам.
Ес.nм вьr планируете nопучать боnее 1000 nмtем в месяц. рекомеtWем
пqдкnlОЧИТЬ сервис SenlIOrlcl.
ПОдрgбнаЯ икс;трущмя ПQ настроАке.

Coxpi!HИII,

Рис. 7.28. Подключение сервиса приема данных Emell: укажите здесь вешу почту

Подключенные се·рвисы
E-moll: vpmnov
mCJfl.ru
Q

н. Qll;Т'Н&tф()ЮЖ)

Tildo.CRM:

оадвьТЕ ВАШ ТЕЛЕФОН

Настро"""

Настро�IСМ

Рис. 7.27. Войдите в Нестройки и активируйте сервис Emell

124

Часть //. Продолжаем и углубляем знакомство с Тilda

Email подтвержден.
Теперь можно добавить приемщик в форму.
Опубликовать страницу и начать получать заявки на указанную почту.
Рис. 7.28. Сообщение Email подтвержден

ТILDACRM:

ПОДКЛЮЧЕННЫЕ СЕРВИСЫ:

ОСТАВЬТЕ ВАШ ТЕЛЕФОН

✓ EMAIL VPMNOVGOROD@MAIL.RU

Перейти в Tifda CRM
Рис. 7.29. Флажок для виджета установлен

Сохраните изменения и опубликуйте страницу. Теперь при просмотре сайта на
компьютере щелчок на кнопке виджета открывает форму, в которой можно напи
сать хозяину сайта сообщение (рис. 7.30).
ЕСТЬ ВОПРОСЫ?

НАПИШИ МНЕ!
E-ma1I
Name
Question

оmРАВИТЬ СООБЩЕНИЕ
Нажимая на кнопку, вь1 даете согл асие
на обработку персональных данны,: и
соглашаетесь с палктиl(Ой
конф•денциальносn<

Рис. 7.30. Форма для отправки сообщения

Страница контактов
Завершим нашу работу над сайтом организацией страницы контактов, для чего ко
мандой Библиотека блоков I Контакты загрузим блок CN108 Контакты с ин-

Глава 7. Сайт-визитка

125

формацией о персоне (рис. 7.31), отредактируем и опубликуем его (рис. 7.32).
Все - сайт готов!
Отзывы

Contllcts

Расписание
Этапы
Коктакты
Услуги

....
-·......�

_, ""-'""--"·
...,_,

QI

ООО

Коктаtсrы с ннформацнеii о персоне

Рис. 7.31. Выбираем шаблон для контактов CN108

СТРАНИЦА МОИХ КОНТАКТОВ

ВЛАДИМИР ПЕТРОВИЧ

Plкlne:+112'1456 8с90
E·maA: ВЛАДИМИР 1mй обр:зооJ1\i\ пер1:ональн"1><
данных и '1равиnами лользования сайтом

Рис. 13.1. Сайт REG.RU

�

я

с r:J www.reg 1\1

ЕЕНННЭ

•• RU / Пжный каб!!нет

ц

�

Мои домены и �ги I REG.RU

s'!

о,

Q

11

0

о с

�

,k

� vpmnovgorod41Yandex,ru

ПOlее nредnо...ении нз �rю( эон

·-

kurs12345.ru.com

149,

+

kurs12345.store

689 599,

+

kurs12345.pw

.84 349,

+

kurs12345.tech

689 599,

+

kurs12345.lnfo

368 2991

+

kurs12345.space

� 111"

+

Итого: 199 Р
Рис. 13.3. Находим свободный (никем не занятый) домен
Q. kurs12345.ru

Пода6�

ucheba.ru
К сож:аnенню ,то имя У#1! ,ан.ято, QQt№I�

kurs12345.ru

199 f?

Ре> шрифтов
Каждый шрифт имеет индивидуальный облик, который делает его в большей или
меньшей степени подходящим для той или иной публикации. Так, шрифт Cyrillic
Old (рис. 14.11) стилизует надпись под старославянские письмена на берестяных
грамотах и кого-то может навести на мысли о былинах, богатырях и Андрее Рублеве.

Р6.GНЯЯ

Рис. 14.11. Шрифт Cyrllllc Old

Помимо прямого назначения - передачи информации - шрифты, использованные
в публикации на веб-страницах, являются элементами дизайна. Возможности соз
дания «настроения)) публикации с помощью шрифтов зависят только от вашего
творческого чутья. Нужно лишь определить, какое впечатление вы хотите произве
сти, и выбрать подходящий для этого шрифт (рис. Ц-14.12).

Рис. Ц-14.12. Каждый шрифт имеет свое «настроение»,
хотя и не всегда его удается уловить

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

Часть 11. Продолжаем и углубляем знакомство с Тilda

216

В одном проекте
не должно быть очень много шрифтов разных стилей
Когда в сайте использовано много различных шрифтовых гарнитур, это раздражает
смотрящего, зритель чувствует дискомфорт. Например, совершенно неправильно
использовать множество декоративных текстов в одном логотипе или одном банне
ре. Лучше применить два вида шрифта, из которых один - классический. Реко
мендуется создать одну уникальную ключевую надпись или слово (например, бро
ский заголовок), а все остальное выполнить обычным текстом. Броский заголовок,
дополняющий основной рисунок или поясняющий возможности и особенности
страницы, должен быть кратким, понятным и читаемым. Пример правильного ис
пользования шрифтов показан на рис. 14.13. Здесь присутствуют только два разных
шрифта. Эффектное оформление приглашения достигается за счет разных размеров
и цветов этих шрифтов.
Oll(J>ЫTИC

6

ДЕСЯТИ ННЫЙ МОНАСТЫРЬ-3

НОЯБРЯ В 16-00 ЧАСОВ
комитн

KYl!lilYPbl
1СИ'1Ю
11 ТУР113МА

�
МУЭ&\
ХУЦО)КfСJВЕЖОti
КУ11ЬТУРЫ
НО81ОРОдС1(О11
ЗЕМ/111

виктgр
Шумскии

ЖИ!IОПИСЬ
ГРА"'ИКА

Рис. 14.13. Пример эффективного использования только двух гарнитур

Tilda рекомендует использовать шрифтовые пары - например, рубленый шрифт
для заголовков и шрифт с засечками для основного текста. Никита Обухов пишет,
что «большое количество разных стилей типографики и оформления на одной
странице выглядит непрофессионально и затрудняет восприятие информации».
Пример подобной пестроты приведен на рис. 14.14.

217

Глава 14. Шрифты на Тilda

Рис. 14.14. Одновременное множество разных шрифтовых гарнитур

Пример удачного исключения из этого правила приведен на рис. 14.15.

л !

-

�
--��а
� '" j

J

�...._�,е;_

116

�
Рис. 14.15. Здесь большое разнообразие шрифтов не является ошибкой

Часть 11. Продолжаем и углубляем знакомство с Тilda

218

Шрифты должны соответствовать идеям публикаций
Шрифт должен гармонировать с графикой - как, например, показано на рис. 14.16.
Так, в сайтах с детской тематикой строгий классический шрифт явится кон.тра
стом с забавными изображениями детских персонажей. А контраст - это не все
гда хорошо (см. далее).

Покrород
Рис. 14.16. Пример гармоничного (правильного) сочетания изображения и текста

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

Пример

Контраста между крупным и мелким

Рис. 14.17. Пример правильно организованного контраста шрифтов по их размеру

При излишнем контрасте может возникнуть конфликт, когда сочетание объектов
становится неудачным (рис. 14.18).

Контраст

Nlr'l[]�ls�r'I

Рис. 14.18. Пример неудачного контрастного конфликта шрифтов

219

Глава 14. Шрифты на Тilda

О цветовой паре «шрифт-фон»
Комбинация «цвет шрифта + цвет фона» очень сильно влияет на то, насколько чи
табелен шрифт, насколько он четко и разборчиво виден на экране. Первое, что при
ходит в голову: наилучший вариант по контрасту - это писать черными буквами
на белом фоне. Однако у специалистов другое мнение. Ученые считают, что есть
цветовые пары более читабельные, чем черный шрифт на белом фоне:
♦ черный на желтом;
♦ черный на розовом;
♦ черный на оранжевом;
♦ темно-зеленый на желтом;
♦ черный на красном;
♦ темно-зеленый на белом.
По мнению специалистов, в рекламе наилучшим цветовым сочетанием по четкости
восприятия считается черный шрифт на желтом фоне. С точки зрения физики, жел
тый и черный цвета представляют собой хроматические противоположности, а кон
траст яркости между этими двумя цветами составляет 85 процентов (рис. Ц-14.19).

ЧЕРНЫЙ
НА ЖЕЛТОМ
Рис. Ц-14.19. Пример черного шрифта на желтом фоне

Текст на изображении
На темном изображении текст должен быть светлым (рис. Ц-14.20) и наоборот
(рис. Ц-14.21). Иначе говоря, сочетание текста и изображения должно быть контра
стным.

Рис. Ц-14.20. Белый текст на темном фоне

Часть 11. Продолжаем и углубляем знакомство с Тilda

220

ОРГАНИЗАЦИОННАЯ;:.
ВСТРЕЧА

КЛУБА

МАРКЕТИНГА
:r.ос:ент111Sр11
:r.7.t,O

.о,\..,..,,�

ОТКРЫТ НАБОР
В ТЕАТРАЛЬНУЮ
СТУДИЮММУ

Преnода.атеnи с:т11дии
Расписание

ПРОСЛУШИВАНИЕ
В ВОКАЛЬНУЮ::::::
СТУДИЮ

1 о6р8,т, подчеркииа,от
� иысзь. Ооычно на тctplWIOil страиице 6""""'1С два-три абзаца. Ар""-'\ИЙ Крундыmов. f., I1 п:адоrо а,ропоrо 11:)'СОЧJСВ и • С)'>О1" вьrрествет ив
порцок по срввнеишо с беспрсрьrв,.,.,, nото1ы. Мшuuш Ве.'IЛер.

Рис. 14.24. Текст сам по себе правильный, но организован неправильно

Часть 11. Продолжаем и углубляем знакомство с Tilda

222

Гораздо приятнее воспринимать текст на сайте (да и любую иную информацию на
сайте) блоками, разделенными отступами в 150 пикселов, а также если изменяется
цвет фона блоков (рис. Ц-14.23).
Сплошные длинные тексты (рис. 14.24) рекомендуется разбивать на абзацы.
ПРИМЕЧАНИЕ
В этой книге мы следуем правилу делать главы небольшими - так информацию читателю
легче усваивать.
Букв1ща • ещt! один эффект,
применяемый для вюуального въщеления
начала абзаца. В CSS он может бьпъ
достиmут путt!м применею!Я специфического
стиля к первой букве абзаца.
Первой букве абзаца соответствует
селектор псевдоэлемента p:first-letter. Для
этого псевоэлемента в данном примере
назначена высота 2em и красный полужирный
шрифт.
Рис. 14.25. Правильная организация текста

Вопросы для самопроверки
Где в Тilda можно изменить гарнитуру шрифта на страницах сайта?
♦ Какое расширение имеют шрифты, применяемые на платформе Tilda?
♦ Что такое насыщенность шрифта?
♦ Сколькп градаций насыщенности шрифта имеется в Tilda?
♦ Какие правила шрифтового дизайна вам известны?
♦ Как вы понимаете термин «шрифтовой контрасп)?
♦

Задание
Поиск «настроения)) шрифта
В соответствии со своими творческими способностями и возможностями подберите
свой вариант шрифта для следующих изображений:
♦ животный мир;
♦ политика;
• люди.

Чужие ошибки
Найдите на сайтах в Сети пять ошибок в их шрифтовом дизайне.

ГЛАВА

15

Виджеты: расширяем
функциональность Tilda
В Tilda за внешней простотой скрываются огромные возможности, но их можно
еще увеличить. В этой главе мы рассмотрим различные полезные виджеты, кото
рые можно интегрировать в Tilda через HTML, не зная HTML. Иначе говоря, если в
визуальном конструкторе чего-то не хватает, то можно это добавить через вставку
НТМL-кода. Такая возможность в Тilda есть.
Новый ТЕРМНН
Виджет - элемент на сайте, предназначенный для активного взаимодействия с пользова
телем. Примером виджета может служить, например, форма для получения контактных
данных посетителя вашего сайта.

Далее мы рассмотрим примеры установки на Tilda различных сторонних виджетов.

Используем код,
который у нас «под рукой»
Общее правило такое: для подключения стороннего виджета к Tilda вы регистри
руетесь на сервисе виджета, получаете код виджета, копируете этот код и вставляе
те его на свой сайт с помощью блока Т123.
Предположим, что где-то в Сети вы уже скачали себе код нужного вам виджета.
Для дальнейшей работы с этим кодом на Tilda нам потребуется блок Т123 НТМL
код (рис. 15.1).

QD НТМL-к:од
Рис. 15.1. Блок Т123 НТМL-код

224

Часть 11. Продолжаем и углубляем знакомство с Тilda

Чтобы добавить этот блок на страницу сайта, выполните команду Библиотека
блоков I Друrое I блок Т123. В этом блоке поддерживается код HTML, JavaScript
(в коде присутствует тег ) и CSS (в коде присутствует тег ). Остает
ся только вставить НТМL-код виджета в тело блока.

Пример 1. Добавляем счетчик
и строку поиска
Код такого счетчика от Mail.ru приведен в листинге 15.1.
Листинг 15.1. Код счетчика от Mail.ru

var tmr = window. tmr 11 (window._tmr = []);
_tmr.push({id: "2323675", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
if (d.getElementByid(id)) return;
var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async
true; ts.id = id;
ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top
fwzl.mail.ru/js/code.js";
var f = function () {var s = d.getElementsByТagName ("script") [О];
s.parentNode.insertBefore(ts, s);};
if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f,
false); } else { f (); }
} )(document, windo·1, "topmailru-code");

Теперь, по ранее описанному алгоритму, вставляем этот скрипт счетчика от Mail.ru
в блок Т123 (рис. 15.2) и после публикации страницы наблюдаем результат наших
действий (рис. 15.3).
Аналогично счетчику, вы можете установить на страницу код поисковой строки от
Yandex.ru (листинг 15.2).

225

Глава 15. Виджеты: расширяем функциональность Tilda

Код будет выnолнен на оnубmtкое.аНtЮЙ странмце (нажмите •Оnубnмкоеать• а npa&otif eepJCНiet.1 ymy)

•-"Ф !'ЮС-ТТ::&УТ&- \:Од Goog!e
Anolytics wi� Googje Tog Mcnoge,r то еосru:.rь.J'{ЙТе

Навигация

Последние комментарии

Новое на форуме

Новое в блогах

Впечатления