Создаем сайт на Google Sites


Сайт является площадкой, на которой можно размещать информацию различного свойства, выражать свои мысли и доносить их до своей аудитории. Инструментов для создания ресурсов в сети довольно много, и мы сегодня рассмотрим один из них – Гугл Сайты.

Создание сайта на Google Sites

Гугл предоставляет нам возможность бесплатно создавать неограниченное количество сайтов на платформе своего облачного диска Google Drive. Формально такой ресурс представляет собой обычный документ, подлежащий редактированию, как, например, форма или таблица.

Документ содержащий сайт на Google Drive

Читайте также: Как пользоваться Гугл Диском

Создается новый сайт следующим образом:

  1. Жмем на кнопку «Создать» на главной странице Диска. Переход к созданию нового сайта на Google Drive
  2. Наводим курсор на пункт «Еще» и в открывшемся подменю выбираем «Google Сайты».

    Создание нового сайта на Google Drive

  3. Откроется новая вкладка браузера с конструктором, в котором производится редактирование ресурса.

    Конструктор Google Sites

Персонализация

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

Значок

Говоря о значке, мы имеем в виду иконку, которая показывается на вкладке браузера при открытии ресурса (favicon).

Иконка сайта на вкладке браузера
  1. Нажимаем кнопку с тремя точками в верхней части интерфейса и выбираем пункт «Добавить значок сайта». Переход к добавлению значка сайта на Google Sites
  2. Далее возможны два варианта: загрузка картинки с компьютера или выбор ее на Гугл Диске.

    Переход к выбору значка сайта на компьютере или Google Drive

    В первом случае («Загрузить») откроется «Проводник» Windows, в котором находим изображение и жмем «Открыть».

    Загрузка значка сайта с компьютера на Google Sites

    При нажатии на ссылку «Выбрать» откроется окно с вариантами вставки. Здесь можно ввести URL картинки на стороннем ресурсе, выполнить поиск в Google или своих альбомах, а также добавить значок с Гугл Диска.

    Варианты вставки картинки для иконки сайта на Google Sites

    Выберем последний вариант. Далее кликаем по изображению и нажимаем «Выбрать».

    Выбор изображения для иконки сайта на Google Sites
  3. Закрываем всплывающее окно.

    Закрытие всплывающего окна с подтверждением загрузки картинки на Google Sites

  4. Для того чтобы иконка применилась, публикуем сайт.

    Публикация сайта для применения иконки на Google Sites

  5. Придумываем URL.

    Присвоение URL новому сайту на Google Sites

  6. Проверяем результат, открыв опубликованный ресурс.

    Открытие опубликованного сайта на Google Sites

  7. Готово, значок отображается на вкладке браузера.

    Отображение значка сайта на вкладке браузера в Google Sites

Название

Название – это имя сайта. Кроме того, оно присваивается и документу на Диске.

  1. Ставим курсор в поле с надписью «Без названия». Переход к изменению названия сайта на Google Sites
  2. Пишем желаемое имя.

    Изменение названия сайта на Google Sites

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

Заголовок

Заголовок страницы прописывается и в верхней части шапки и непосредственно на ее основе.

  1. Ставим курсор в поле и указываем, что страница является главной.

    Изменение названия страницы на Google Sites

  2. Кликаем по большим буквам в центре и снова пишем «Главная».

    Изменение заголовка страницы на Google Sites

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

    Настройка текстового блока заголовка страницы на Google Sites

Логотип

Логотип – это картинка, которая отображается на всех страницах сайта.

  1. Наводим курсор на верхнюю часть шапки и нажимаем «Добавить логотип». Переход к добавлению логотипа сайта на Google Sites
  2. Выбор изображения осуществляется точно так же, как и в случае со значком (см. выше).
  3. После добавления можно выбрать цвет фона и общей темы, которая автоматически определяется на основании цветовой схемы лого.

    Выбор фона для логотипа и общей цветовой схемы на Google Sites

Картинка для шапки

Основное изображение шапки изменяется по тому же алгоритму: «наводимся» на основу, выбираем вариант добавления, вставляем.

Изменение изображения шапки для сайта на Google Sites

Тип заголовка

У заголовка страницы существуют свои настройки.

Переход к изменению типа заголовка сайта на Google Sites

По умолчанию установлено значение «Баннер», на выбор же представлены «Обложка», «Большой баннер» и «Только заголовок». Различаются они размерами шапки, а последний вариант подразумевает отображение только текста.

Изменение типа заголовка сайта на Google Sites

Удаление элементов

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

Удаление верхнего колонтитула сайта на Google Sites

Нижний колонтитул (подвал)

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

Переход к добавлению нижнего колонтитула сайта на Google Sites

Здесь можно добавить текст и настроить его с помощью меню.

Добавление текста нижнего колонтитула сайта на Google Sites

Темы

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

Применение тем для сайта на Google Sites

Вставка произвольных блоков

На страницу можно добавить четыре типа произвольных элементов. Это текстовое поле, изображение, URL или HTML-код, а также практически любой объект, расположенный на вашем Google Drive.

Текст

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

Вставка текстового поля на страницу сайта в Google Sites

Изображение

Данная кнопка открывает контекстное меню с вариантами загрузки картинки.

Переход к вставке изображения на страницу сайта в Google Sites

После того как будет выбран способ (см. выше), элемент разместится на странице. Для него также имеется блок настроек – кадрирование, добавление ссылки, подписи и альтернативного текста.

Вставка изображения на страницу сайта в Google Sites

Встроить

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

Переход к встраиванию элементов и кода в страницу сайта на Google Sites

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

Встраивание фрейма с другого сайта на Google Sites

Встраивание HTML производится следующим образом:

  1. Переходим на соответствующую вкладку и вставляем скопированные данные виджета или баннера. Жмем «Следующее». Вставка кода виджета в поле ввода на Google Sites
  2. Во всплывающем окне должен появится требуемый элемент (предпросмотр). Если ничего нет, ищите ошибки в коде. Нажимаем «Вставить».

    Вставка виджета с другого ресурса на страницу сайта в Google Sites

  3. У добавленного элемента есть только одна настройка (кроме удаления) – редактирование HTML (или скрипта).

    Изменение встроенного в страницу элемента в Google Sites

Объект на диске

Под объектами подразумеваются практически любые файлы, расположенные на Google Drive. Это видео, картинки, а также любые Гугл-документы – формы, таблицы и так далее. Можно также разместить и целую папку, но она будет открываться в отдельном окне по ссылке.

Переход к вставке объекта с Google Drive на страницу сайта в Google Sites
  1. После нажатия на кнопку выбираем объект и нажимаем «Вставка». Вставка объекта с Google Drive на страницу сайта в Google Sites
  2. У таких блоков нет настроек, можно только открыть элемент в новой вкладке для просмотра.

    Открытие объекта для просмотра в новой вкладке в Google Sites

Вставка предустановленных блоков

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

Вставка предустановленных блоков на страницу сайта в Google Sites

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

Работа с блоками

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

Масштабирование

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

Масштабирование текстового блока сайта на Google Sites

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

Маркер для изменения высоты блока контента сайта на Google Sites

Перемещение

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

Перетаскивание элемента в соседний раздел сайта на Google Sites

Работа с разделами

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

Настройка разделов сайта на Google Sites

Макеты

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

Размещение собранного из блоков макета на странице сайта в Google Sites

Блоки с плюсами – это места для изображений, видео, карт или объектов с Диска.

Добавление объектов в макет сайта на Google Sites

Текстовые поля редактируются обычным способом.

Редактирование текста в макете сайта на Google Sites

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

Изменение элементов макета сайта на Google Sites

Работа со страницами

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

Переход к работе со страницами сайта на Google Sites

Расположенные в этом разделе страницы будут отображаться в верхнем меню сайта. Переименуем элемент в «Главная», дважды кликнув по нему.

Переименование страницы сайта на Google Sites

Создадим копию, нажав на кнопку с точками и выбрав соответствующий пункт.

Создание копии страницы сайта на Google Sites

Дадим копии название

Переименование копии страницы сайта на Google Sites

Автоматически все созданные страницы появятся в меню.

Появление созданных страниц в меню сайта на Google Sites

Если мы добавим подстраницу, то это будет выглядеть вот так:

Отображение подстраниц сайта в меню на Google Sites

Параметры

Некоторые настройки можно произвести, перейдя к пункту «Параметры» в меню.

Переход к настройкам параметров страницы сайта на Google Sites

Кроме изменения названия, есть возможность задать путь для страницы, а точнее, заключительную часть ее URL.

Настройка пути для страницы сайта на Google Sites

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

Добавление пустых страниц и произвольных ссылок на сайт в Google Sites

Просмотр и публикация

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

Переход к просмотру сайта на разных устройствах в Google Sites

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

Просмотр сайта на разных устройствах в Google Sites

Публикация (сохранение документа) производится кнопкой «Опубликовать», а открытие сайта – кликом по соответствующему пункту контекстного меню.

Публикация и открытие сайта на Google Sites

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

Копирование ссылки на опубликованный сайт в Google Sites

Заключение

Сегодня мы научились пользоваться инструментом Google Sites. Он позволяет в кратчайшие сроки разместить в сети любой контент и предоставить к нему доступ аудитории. Разумеется, его нельзя сравнивать с популярными системами управления контентом (CMS), но простенький сайт с необходимыми элементами с его помощью создать можно. Главными плюсами таких ресурсов являются гарантия отсутствия проблем с доступом и бесплатность, если, конечно, вы не покупаете дополнительное место на Google Drive.

Помогла ли Вам статья?
Да Нет
Задайте вопрос или оставьте мнение
Получить ответ на Email
Уведомить о

4 ответов
По рейтингу
Новые Старые
Межтекстовые Отзывы
Посмотреть все комментарии
ALEXANDER
3 февраля 2020 13:46

Здравствуйте! Возможно ли каким нибудь образом менять цвет текста на сайте?

Marina_
21 июня 2019 19:07

Спасибо за разъяснения!
Единственная проблема в том, что не нашла в вашей статье размеры картинок, которые можно вставлять и чтобы они смотрелись изначально красиво на сайте.
Есть список размеров? Например картинка на заголовок.

Андрей
18 марта 2021 21:27

Здравствуйте. Возможно ли таким способом создать свйт, чтобы на нём была кнопка оплатить (для перехода на другой сайт для оплаты digiseller)?

Инструкции по операционным системам:
AndroidAndroid iOSiOS Windows 11Windows 11 Windows 10Windows 10 Windows 7Windows 7 Windows 8Windows 8 Windows XPWindows XP Общее по компьютерамОбщее по компьютерам LinuxLinux macOSmacOS
Инструкции по мессенджерам и соц.сетям:
ВконтактеВконтакте ОдноклассникиОдноклассники TelegramTelegram ViberViber WhatsAppWhatsApp SkypeSkype ZoomZoom InstagramInstagram
Инструкции по работе в программах:
WordWord ExcelExcel PowerPointPowerPoint OutlookOutlook DirectXDirectX PhotoshopPhotoshop LightroomLightroom Premiere ProPremiere Pro Google ChromeGoogle Chrome Яндекс БраузерЯндекс Браузер Mozilla FirefoxMozilla Firefox OperaOpera Internet ExplorerInternet Explorer Уроки по остальным браузерамПо остальным браузерам Расширения для браузеровРасширения браузеров Уроки по антивирусамПо антивирусам AvastAvast AudacityAudacity Apple IDApple ID AutoCADAutoCAD BandicamBandicam BlueStacksBlueStacks DAEMON ToolsDAEMON Tools DiscordDiscord Epic GamesEpic Games FL StudioFL Studio HamachiHamachi iСloudiСloud iTunesiTunes OBSOBS OriginOrigin Play MarketPlay Market Sony VegasSony Vegas SpotifySpotify SteamSteam TeamViewerTeamViewer The Bat!The Bat! TikTokTikTok TunngleTunngle UltraISOUltraISO uTorrentuTorrent VirtualBoxVirtualBox Торрент клиентыТоррент клиенты Яндекс ДискЯндекс Диск Яндекс.КартыЯндекс.Карты Яндекс.НавигаторЯндекс.Навигатор В остальных программахВ остальных программах Драйвера для устройствДрайвера Подборки программПодобрать программу Остальные программыСкачать программы
Инструкции по онлайн-сервисам:
ЯндексЯндекс GoogleGoogle ДзенДзен YouTubeYouTube FacebookFacebook TwitterTwitter AliExpressAliExpress AvitoAvito ChatGPTChatGPT QiwiQiwi Другие онлайн-сервисыДругие сервисы Все о почтеВсе о почте Яндекс почтаЯндекс почта GmailGmail Почта Mail.ruПочта Mail.ru Рамблер почтаРамблер почта
Инструкции по телефонам:
SamsungSamsung XiaomiXiaomi HuaweiHuawei Прошивки устройствПрошивки телефонов ТелефонОбщие по телефонам
Инструкции по периферийным устройствам:
МышкаМышка КлавиатураКлавиатура ПринтерПринтер РоутерРоутер ФлешкаФлешка Карта памятиКарта памяти HDMIHDMI Игровые консолиИгровые консоли Яндекс СтанцияЯндекс Станция AirPodsAirPods
Инструкции по комплектующим:
Материнская платаМатеринская плата ПроцессорПроцессор ВидеокартаВидеокарта SSD дискиSSD диски Жесткий дискЖесткий диск BIOSBIOS