Продолжаю вас знакомить с различными способами создания сайтов.
Когда вам нужен простой сайт из одной — десяти страниц не хочется заморачиваться с хостингом и другими техническими вопросами.
Особенно, если у вас не коммерческий проект.
Есть отличный вариант легко и быстро и бесплатно сделать сайт с нуля используя сервис Google Sites от компании Google.
Создавать сайт здесь
Вам нужно только зарегистрировать аккаунт, если его у вас сейчас нет.
Вот пример сайта, который у меня получился https://sites.google.com/view/huskykrilatki/
Чтобы начать создание нового сайта переходим по ссылке в Google Drive.
Нажимаем на кнопку Создать в левом верхнем углу страницы.
Раскрывается меню, где мы выбираем последний пункт Ещё, а в нём пункт Google Сайты.
У нас открывается страница с конструктором для создания сайта.
И запускается небольшой гид по основным функциям конструктора.
В левом верхнем углу мы можем ввести название нашего сайта.
У меня это будет Предлагаем щенков хаски.
На главной странице сайта мы можем задать заголовок и выбрать тип заголовка.
Я ввожу следующий текст: Предлагаем щенков хаски, родились в декабре 2020 года.
Можно управлять размером текстовой области, двигая мышью за синие маркеры на рамке.
Менять тип заголовка: обложка, большой баннер, баннер или только заголовок.
В правой части страницы на вкладке Вставка, расположены элементы, которые можно добавлять на страницу по щелчку левой кнопкой мыши.
Имеется несколько вариантов макетов для блоков контента на странице.
И ниже еще отдельные элементы.
На следующей вкладке Страницы мы можем управлять страницами сайта.
Добавлять новые или удалять.
На вкладке Темы представлены несколько вариантов готовых шаблонов для оформления сайта.
Давайте после заголовка добавим готовый макет из четырех блоков.
Кликая по тексту в низу блока можно вводить свое содержимое.
С верхним элементом блока, дело обстоит интереснее.
Если кликнуть по нему, то мы можем добавить содержимое различного типа.
Загрузить изображение с компьютера, что мы и делаем в данном случае.
Выбрать уже загруженное изображение или загрузить его с Google диска.
Загрузить видео с Ютуб или другие типы.
Повторяем процедуру с добавлением текста и изображения для оставшихся трех блоков.
Я добавил еще два макета такого же типа ниже, добавил текст и изображение.
Можно посмотреть что у нас получается, если нажать на кнопку Просмотр в верхнем меню.
При просмотре, в правом нижнем углу показывается дополнительная панель управления.
С её помощью можно проверить, как будет отображаться сайт на различных устройствах.
Нажатие на крест в конце, выход из режима просмотра.
Все ваши изменения автоматически сохраняются в процессе работы.
Продолжаем работу над нашим сайтом.
Добавим еще один макет для раздела Контакты.
Этот макет включает в себя два элемента.
В левый можно добавить картинку или карту, а в правый текст.
Элемент макета можно удалить, если выделить его, то в верхней части мы увидим два значка для настройки и удаления.
Нажимаем удалить.
Я встрою код Яндекс.Карты из конструктора карт https://yandex.ru/map-constructor/
Для этого выбираем элемент Встроить.
На вкладке нового окна Встроить код вставляем код карты как iFrame.
Теперь изменим шрифт для заголовка, чтобы он был поменьше.
И заменим картинку для фона блока с заголовком.
Теперь создаем новую страницу для нашего сайта.
Для этого на вкладке Страницы, выбираем пункт в меню Добавить подстраницу.
И вводим её название: Предлагаем чёрно-белого мальчика щенка хаски, родился 18 декабря 2020 года
И нажимаем Готово.
На новой странице меняем тип заголовка на Только заголовок.
Меняем стиль на Подзаголовок и размер.
Добавляем макет из трех элементов.
В правый элемент добавляем видео с YouTube.
Для этого щелкаем мышью по элементу и выбираем тип Ютуб.
Далее в строку поиска вставляем адрес видео.
Находим его и нажимаем на кнопу Вставить.
Два элемента с левой стороны удаляем и добавляем элемент текст.
Вставляем туда наш текст с описанием щенка.
Далее добавляем еще один макет.
А перед ним текстовое поле.
В него пишем Родители щенка.
В макет мы добавляем фото родителей и их имена со ссылкой на сайт с родословной.
Ниже этого блока, мы вставляем еще один макет с каруселью изображений.
Выбираем изображения на компьютере и нажимаем на кнопку Вставка.
Нам отображаются настройки для карусели с изображениями:
— Показывать или нет точки
— Показывать подписи
— Автозапуск смены изображений с выбором скорости
После вставки, мы можем изменять размер блока перемещая его границы.
Посмотрим что у нас получается.
Включим автозапуск со средней скоростью смены слайдов.
Мы переходим к редактированию Главной страницы.
И к первому элементу блока с фотографиями щенков добавляем ссылку на нашу дополнительную страницу.
Проверяем работу.
Теперь сайт можно опубликовать.
Для этого щелкаем по кнопке Опубликовать в правом верхнем углу страницы.
Появится окно для ввода адреса сайта.
Он будет иметь вид https://sites.google.com/view/ и набор латинских букв и цифр.
У меня это huskykrilatki
Если такой адрес уже занят, то вы получите предупреждение.
Здесь же можно добавить свой домен, но об этом я расскажу в отдельном видео.
Нажимаем на кнопку Опубликовать.
И ваш сайт открывается в новой вкладке браузера.
Я создал еще одну дополнительную страницу Предлагаем девочку щенка хаски чёрно-белую, родилась 13 декабря 2020 года.
Для неё я использовал другой макет — изображение и текст.
Добавляем ссылку на неё на главную страницу.
Давайте отредактируем нашу первую дополнительную страницу.
Мы в нижнюю часть страницы добавляем новый макет — изображение и текст.
Любой блок можно перетаскивать на странице, если нажать на левую кнопку мыши по точкам с левой стороны у границы блока, удерживая её, можно перетаскивать блок на странице.
Я перетащил его под заголовок.
Элементы блока можно тоже менять местами.
И в левую часть мы копируем текст с описанием щенка.
А в правую добавляем видео с Ютуб.
Любой блок или раздел можно удалить, если переместить мышь в левую сторону от самого блока.
Появятся дополнительные элементы управления: изменить фон, скопировать или удалить.
Удаляем старый раздел и смотрим что у нас получилось.
Я изменил картинку для заголовка главной страницы.
На картинку я хочу добавить еще подзаголовок со ссылкой на официальный сайт питомника Крылатки
Для этого по заголовком я добавляю новое текстовое поле.
Ввожу текст и добавляю к нему ссылку на сайт.
Теперь надо этот блок с текстом добавить на наш заголовок.
У каждого раздела или блока, в середине в верху есть тоже несколько точек.
И мышью можно за них перетаскивать разделы друг на друга.
Мы размещаем раздел сразу под заголовком, будущее место подсвечивается синей линией.
После того, как мы разместили текст, можно изменить его стиль.
Открываем страницу в режиме просмотра и переходим на сайт.
Чтобы не тратить время на создания еще дополнительных страниц, я просто добавлю ссылки на соответствующие страницы на официальном сайте.
На главную страницу я добавлю нижний колонтитул.
Под разделом Контакты я добавил изображения социальных сетей и мессенджеров со ссылками на соответствующие ресурсы.
Изображения можно перетаскивать по сетке на странице.
Я добавлю еще новую иконку для Ютуб канала со ссылкой.
После завершения всех изменений, сайт можно заново опубликовать.
Нам показывается окно Черновик с последними изменениями и уже опубликованный вариант.
Я нажимаю Опубликовать, чтобы опубликовались все последние изменения.
У нас получился вот такой приятный сайт.
Теперь вы знаете как можно создать сайт с нуля на Google Sites бесплатно и быстро.
В новом видео я расскажу вам, как можно привязать свой домен к сайту на Google Sites.