Создание сайтов на Tilda. Самоучитель Год издания: 2021 Автор: Молочков В. П. Издательство: БХВ-Петербург ISBN: 978-5-9775-6777-О Язык: Русский Формат: PDF Качество: Отсканированные страницы + слой распознанного текста Количество страниц: 352 Описание: Подробно рассмотрена работа с конструктором сайтов Tilda, позволяющим создавать сайты любой сложности из готовых блоков и шаблонов без программирования. Приведены рекомендации по использованию панели разработчика и советы по оптимальным настройкам. Даны пошаговые инструкции для создания одностраничного сайта-визитки, лендинга, многостраничного сайта, сайта-портфолио и интернет-магазина. Описан принцип работы с Zero Block, рассказано о публикации меню, галереи изображений, об использовании форм и виджетов, добавлении анимации и видео. Рассмотрена работа со шрифтами, регистрация и подключение домена, добавление SSL-сертификата. Отдельное внимание уделено интеграции интернет- магазина с платежными системами. Читатели узнают, как правильно организовать работу над сложными проектами и разрабатывать сайты на заказ.
Примеры страниц
Оглавление
ВВЕДЕНИЕ .................................................................................................................................... 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 Портфолио ............................................................................................................................ 3 3 Промосайт ............................................................................................................................ 33 Блог ....................................................................................................................................... 33 Лонгрид ................................................................................................................................ 34 Личный (персональный) сайт ............................................................................................. 34 Вопросы для самопроверки ......................................................................................................... 34 Задание ........................................................................................................................................... 34 Глава 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 Шаг 6. Завершаем ......................................................................................................................... 85 Добавляем видео с YouTube ........................................................................................................ 87 Вопросы для самопроверки ......................................................................................................... 87 Задание ........................................................................................................................................... 88 ЧАСТЬ 11. ПРОДОЛЖАЕМ И УГЛУБЛЯЕМ ЗНАКОМСТВО С TILDA ................................................. 89 Глава 6. Создание интернет-магазина ...................................................................................... 91 Шаг l. В шаблон магазина подключаем карточки товаров ....................................................... 91 Шаг 2. Добавление товаров в магазин ........................................................................................ 93 Способ l. Добавляем товар вручную ................................................................................. 93 Способ 2. Добавление товаров через каталог товаров ..................................................... 93 Шаг 3. Работа с корзиной ............................................................................................................. 97 Добавление корзины с формой заказа .................................................................................... 97 Определение денежных единиц для магазина ................................................................... 99 Определение платежной системы для оплаты товара ...................................................... 99 Продажа товаров без корзины ................................................................................................... 101 Продажа единственного товара или услуги .............................................................................. 106 Продажа единственного товара через корзину ............................................................... 107 Продажа единственного товара с переходом сразу в платежную систему ................... 109 Вопросы для самопроверки ....................................................................................................... 110 Задание ......................................................................................................................................... 111 Глава 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 Раздел Дополнительно ...................................................................................................... 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 Шаг 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 Ресурсы ................................................................................................................................ 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 Выключка (выравнивание текста) .................................................................................... 296 Емкость и насыщенность шрифта .................................................................................... 297 Контрастность шрифта ...................................................................................................... 299 Интерлиньяж ...................................................................................................................... 299 Специализированные программы для работы со шрифтами .................................................. 300 Диспетчер шрифтов Corel Bitstream Font Navigator ........................................................ 301 Советы и рекомендации при работе со шрифтами .................................................................. 303 Цвет шрифта и цвет фона ........................................................................................................... 304 Вопросы для самопроверки ....................................................................................................... 305 Задание ......................................................................................................................................... 306 Глава 21. Цвет в веб-дизайне: базовые знания о работе с цветом ............................................. 307 Цветовой спектр .......................................................................................................................... 307 Физиология цвета у человека ..................................................................................................... 308 Физика цвета ............................................................................................................................... 308 Свет и цвет ................................................................................................................................... 309 Понятие цветовой модели .......................................................................................................... 309 Цветовая модель RGB ................................................................................................................ 310 Цветовой круг .............................................................................................................................. 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 Негативные ассоциации у зрителя в связи с изображениями на вашем сайте ............. 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
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum You cannot attach files in this forum You can download files in this forum
![[Quote]](./templates/default/images/lang/en/icon_quote.gif "Reply with quote"){kind=icon}
![[Profile]](./templates/default/images/lang/en/icon_profile.gif "View user's profile"){kind=icon}
![[PM]](./templates/default/images/lang/en/icon_pm.gif "Send private message"){kind=icon}
