Построение сайта
В ArcGIS Hub инициативы организуются путем создания сайта и внедрения других элементов, таких как карты, приложения, опросы и многое другое. Вы будете объединять несколько различных компонентов, чтобы создать привлекательный веб-сайт инициативы по улучшению парка.
Создать Инициативу
Вы начнете с создания инициативы, которая автоматически создаст сайт, который вы можете редактировать и заполнять. ArcGIS Hub включает в себя функцию перетаскивания для различных компонентов веб-сайта и позволяет редактировать HTML-код для дальнейшей настройки.
- Войдите под учётной записью организации ArcGIS.
Примечание:
Если у вас нет учетной записи организации, см. варианты доступа к программному обеспечению.
- На ленте нажмите окно запуска приложений и выберите Hub.
Главная страница ArcGIS Hub обеспечивает доступ к нескольким ключевым рабочим процессам: создание инициатив и управление ими, добавление ресурсов и доступ к связанной организации сообщества для управления учетными записями сообщества и ресурсами. Вы можете вернуться к обзору в любое время, щелкнув панель Навигация редактирования и выбрав Обзор.
- В разделе Инициативы щелкните Новая.
- В поле Заголовок наберите Инициатива по улучшению парка William Land Park.
- Щелкните Создать Инициативу.
Когда вы создаете инициативу, для вас создается элемент сайта и три группы в ArcGIS Online. Эти группы можно использовать для управления ресурсами вашей инициативы (Группа ресурсов), членами команды (Группа основной команды) и людьми, которые подписываются на получение обновлений об инициативе (Группа подписчиков). Доступ к сайту автоматически предоставляется Группе основной команды, чтобы члены вашей команды могли обновить сайт.
После того, как инициатива создана, отображается окно Начало работы с информацией о ArcGIS Hub.
- Если необходимо, закройте окно Начало работы.
Добавить раздел заголовка
Аудитория вашего сайта может включать всех, кто часто посещает городские парки, поэтому ваша цель – предоставлять общий доступ к ресурсами понятным и удобным для пользователя способом. Чтобы этого достичь, вы можете представить инициативу, используя высококонтрастный заголовок и фоновое изображение. Во-первых, вы скачаете изображения, которые будете использовать для дизайна сайта.
- Скачайте заархивированную папку Images.
- Распакуйте скачанную папку в место, которое вы легко запомните, например в папку Документы.
Далее вы загрузите одно из изображений из этой папки, чтобы использовать как баннер вверху вашей инициативы. В ArcGIS Hub ресурс организован в строки. Баннер - это первая строка вашей инициативы.
- В ArcGIS Hub наведите курсор на первую строку (баннер с фоном изображения и заголовок инициативы) На появившейся сбоку от баннера панели инструментов щелкните кнопку Редактировать.
Появится боковая панель Оформление строки. Здесь вы сможете настроить параметры проектирования специально для этой строки.
- На боковой панели Оформление в разделе Фоновое изображение, щелкните Выгрузить. Щелкните Поиск изображения.
- Перейдите к распакованной папке Изображения. Дважды щелкните intro_image1.
Изображение загружено как фоновое изображение для строки. Вы также можете изменить цвет прозрачного фона строки, чтобы фильтр подходил изображению.
- Для параметра Цвет фона, укажите #6a9ab0.
Примечание:
По умолчанию у фона этой строки прозрачность 30 процентов. Вы можете изменить это значение с помощью параметра Прозрачность изображение внизу боковой панели Оформление.
Затем вы отредактируете текст заголовка.
- Наведите курсор на текст заголовка в строке баннера. Над текстом на панели инструментов Текст щелкните кнопку редактирования.
Текст станет редактируемым.
- Удалите весь текст.
При редактировании можно использовать инструменты форматирования текста или вставлять пользовательский код HTML и CSS. В данном случае вы сделаете это позже.
- Внизу строки щелкните кнопку Edit in HTML.
Отображается редактор HTML. Вы добавите HTML и CSS, которые делают заголовок и баннер больше, поэтому пользователи их сразу замечают.
- В окне HTML удалите существующий код и вставьте следующий код:
<div style="text-align: center;"> </div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><br></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor;"><br></span></div><div style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Initiative</strong></span></div> <h1 style="text-align: center; "><br></h1><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div><div style="text-align: center; "><br></div> - Щелкните Применить. Над текстом на панели инструментов Текст щелкните кнопку редактирования, чтобы сохранить изменения.
Новые сайты инициатив показывают несколько примеров настройки макета страницы. Поскольку вы будете создавать настраиваемый сайт, вы удалите всю информацию в шаблонах, которая не будет использоваться. В этом случае вы удалите 10 строк содержимого между строкой заголовка и строкой контакта.
- Прокрутите вниз и наведите курсор на строку Прогресс, достигнутый нами к настоящему времени. На панели инструментов рядом со строкой щелкните кнопку удалить.
Появится окно, в котором вас попросят подтвердить, что вы хотите удалить строку.
- В окне Удалить строку из компоновки щелкните Удалить.
- Удалите следующие строки:
- Можно создать собственную инициативу, комбинируя существующие приложения с пользовательским сайтом.
- Присоединяйтесь к сообществу сегодня!
- Наша основная цель
- Не просто расскажите историю, покажите ее
- Смотрите наш город в действии
- Список будущих событий
- Подпишитесь и участвуйте в инициативе
- На ленте щелкните кнопку Сохранить.
Ваши правки будут сохранены.
Определите цель инициативы
Далее вы добавите информацию, объясняющую цель инициативы в форме текста и дополнительных изображений. Вы создадите новую строку, а затем добавите и отредактируете текстовую карточку с информацией о том, как общественность может участвовать в принятии парка.
- При необходимости щелкните на боковой панели Настроить.
- На боковой панели Настройка щелкните Компоновка.
- На боковой панели Компоновка перетащите карточку Строка под строку заголовка в область размещения Вставить ниже.
Будет создана пустая строка. Вы перетащите текстовую карточку в строку.
- На боковой панели Настройки строки щелкните Компоновка.
Вы возвратитесь на панель Настройка.
- Перетащите Текст в пустую строку в область размещения Добавить в строку.
Появится текстовый редактор.
- В текстовом редакторе скопируйте и вставьте следующий текст: Нам нужно ваше понимание того, как мы можем сделать парк William Land более чистым и красивым пространством.
- Выделение текста. Нажмите кнопку Стиль и выберите Заголовок 2.
- Снять выборку всего текста.
- Нажмите Ввод за один пробел до и после предложения.
- На боковой панели Настройка перетащите карточку Изображение левее текста и перетащите ее в область размещения Вставить слева.
Появится боковая панель Изображение. Вы загрузите одно из изображений из папки Изображения.
- На боковой панели Изображение щелкните Загрузить и выберите Поиск изображения. Загрузите park_image2.
Изображение добавлено в строку. Вы настроите его размер, чтобы оно лучше выглядело вместе с текстом.
- Наведите курсор на правую часть карточки изображения и нажмите стрелку.
Размер изображения уменьшится. Вы также добавите дополнительный текст к изображению, чтобы улучшить вид сайта.
- На боковой панели Настройки изображения раскройте Опции. В поле Альтернативный текст изображения наберите Люди наслаждаются своим парком.
- На ленте щелкните кнопку Сохранить.
Настройка брендинга и глобальной навигации
Вы добавите логотип своей организации и фирменный стиль сайта в соответствии с тематикой, связанной с парком, чтобы отразить эстетику парка. Затем вы настроите панель глобальной панель навигации в верхней части вашего сайта. Эта панель позволяет пользователям Сообщества ArcGIS Hub входить в систему, управлять своим профилем пользователя и уведомлениями, а также переходить к другим частям ArcGIS Hub. Возможность глобальной навигации автоматически включается для всех новых сайтов инициативы.
Примечание:
Более подробно см. Настроить глобальную навигацию и ссылки меню.
- На боковой панели Настройки изображения щелкните Компоновка и щелкните Настройка.
Вы возвратитесь на боковую панель Настройка.
- На боковой панели Настройка щелкните Верхний колонтитул.
- На боковой панели Заголовок отключите Имя.
- Для Логотип щелкните Загрузить и щелкните Поиск изображения. Перейдите к распакованной папке Изображения и загрузите изображение cpp-logo.
Логотип добавлен вверх инициативы, над первой строчкой. Далее, вы добавите предварительно настроенный опрос, который позволит пользователям дать обратную связь о состоянии парков и выбрать, хотят ли они помочь в управлении парками.
- Разверните Меню. Щелкните Добавить ссылку и выберите к существующим ресурсам.
- В окне Добавить ресурсы в разделе Из щелкните Общедоступный. В разделе Коллекция щелкните Обратная связь.
- В строке поиска наберите Принять форму парка (Learn ArcGIS) bи нажмите Enter.
- В списке результатов отметьте Принять форму парка (Learn ArcGIS).
- Щелкните Сохранить.
Опрос добавлен на боковую панель.
- На боковой панели для Принять форму парка (Learn ArcGIS) наведите курсор на кнопку настроек и выберите Редактировать.
Откроется окно Редактировать ссылку.
- Для Имя ссылки удалите текст Learn ArcGIS, чтобы имя ссылки было таким Принять форму парка. Щелкните Сохранить.
Вы также добавите ссылку на сайт с дополнительной информацией об открытом пространстве.
- На боковой панели щелкните Добавить ссылку и выберите на ссылку.
- В поле Имя ссылки наберите Что такое открытое пространство? В поле Местоположение ссылки скопируйте и вставьте следующий URL-адрес: https://www.epa.gov/G3/green-streets-and-community-open-space
- Щелкните Сохранить.
Обе добавленные ссылки отображаются в заголовке над первой строкой рядом с логотипом.
- Щелкните Сохранить.
Добавить атрибуцию нижнего колонтитула
Нижние колонтитулы предоставляют пространство для важной информации, такой как контакты, условия предоставления услуг, призывы к действию и атрибуция для любых изображений на странице. Сначала вы удалите шаблон нижнего колонтитула, а затем настроите пользовательский простой нижний колонтитул, который выражает признательность любым заимствованным ресурсам и указывает, что этот сайт создан только для учебных целей.
- Переместитесь в нижнюю часть страницы инициативы.
- На боковой панели щелкните Настроить, чтобы вернуться к боковой панели Настроить. Щелкните Колонтитул.
Появится боковая панель Нижний колонтитул.
- На боковой панели щелкните Нет.
Колонтитул по умолчанию удален. Далее вы будете редактировать строку Контакты, чтобы включить благодарности.
- Наведите курсор на строку Контакты. На панели инструментов рядом со строкой щелкните на кнопке Редактировать
- На боковой панели для параметра Цвет фона укажите #32444d.
- На строке Контакт щелкните текст, чтобы отредактировать его. Удалите существующий текст, включая кнопку Звонок и наберите Благодарности.
Подсказка:
Чтобы вставить только текст без форматирования, нажмите для вставки Ctrl+Shift+V.
- Нажмите Enter. Скопируйте и вставьте следующий текст:
Это неофициальный сайт Сакраменто, и он используется только в демонстрационных целях.
Данные парка Сакраменто были предоставлены Открытыми данными округа Сакраменто.
© Шаблон пользовательской инициативы. Все фотографии, используемые на этом сайте, взяты из Unsplash, unDraw и Pexels.
- Удалите все разрывы строк между строками текста.
- Выделите весь текст. Щелкните кнопку Параграф и выберите Выровнять по центру.
- Выделите Благодарности. Нажмите кнопку Стиль и выберите Заголовок 1.
Раздел Благодарности закончен.
- На ленте щелкните кнопку Сохранить.
Добавить инструкции по инициативе
Четкая коммуникация ваших целей и того, как ваше сообщество может помочь, очень важно для удержания внимания вашей аудитории. Далее вы расскажете об опросе и покажете людям, как влияют их ответы, используя веб-карту, которая отображает результаты в режиме реального времени. Вы опишете, что нужно сделать людям, чтобы поделиться своим пониманием, и опишете, как веб-карта будет обновляться вместе с их ответами.
- Между строками введения и нижнего колонтитула добавьте еще одну карточку Строка.
Появится боковая панель Строка.
- Для параметра Цвет текста укажите #ffffff. Для параметра Цвет фона, укажите #6a9ab0.
- Щелкните Компоновка, чтобы вернуться к боковой панели Настройка. Добавьте карточку Текст в пустую строку.
- В карточке текста наберите следующий текст: Пожалуйста, пройдите опрос ниже, чтобы добавить свое понимание на карту. Ваши ответы помогут нам определить, что и где можно улучшить.
- Нажмите Ввод, чтобы добавить линию до и после текста.
- Выделите весь текст. Нажмите кнопку Стиль и выберите Заголовок 2.
- Добавьте карточку Изображение справа от текста.
Появится боковая панель Изображение.
- Щелкните Загрузить и щелкните Поиск изображения. Загрузите map_image4.
- Уменьшите размер карточки изображения так, чтобы высота изображения была примерно такой же высоты, как и текст абзаца.
- На ленте щелкните кнопку Сохранить.
Теперь, когда ваш сайт содержит инструкции, пользователи с большей вероятностью поймут цель и способы взаимодействия с картой и опросом.
Соберите обратную связь от сообщества
Затем вы создадите новую строку и заполните ее, загрузив предварительно настроенную карту и опрос. Опрос предназначен для сбора информации о пользователях, которые хотят стать волонтерами или дать обратную связь о парке. Результаты опроса поступают непосредственно на веб-карту, которая мгновенно обновляется для отображения ответов.
Добавление опроса
Вопросы опроса для пользователя касаются того, что происходит и где это происходит.
- 1. С помощью полученных навыков добавьте карточку Строка под строкой инструкции.
- На боковой панели Строка для параметра Цвет фона укажите #f5fcfc.
Вы добавите карточку разделителя, чтобы создать дополнительное пространство в строке.
- Добавьте карточку Разделитель.
- Под карточкой Разделитель добавьте карточку Опрос.
Появится боковая панель Опрос
- Щелкните Выбрать опрос.
Откроется окно Выберите опрос. Вы можете выбрать опросы, созданные вами или другими участниками вашей организации.
- В поле От выберите Все (Открытый).
- Найдите Отзыв по улучшению парка William Land Park (Learn ArcGIS). В списке результатов поиска щелкните кнопку, чтобы выбрать Отзыв по улучшению парка William Land Park (Learn ArcGIS)
- Щелкните Сохранить.
- На боковой панели Опрос щелкните Встроить.
Опрос теперь встроен на сайте, и пользователям не придется открывать его в другом окне.
- На боковой панели Опрос в разделе Опции для Высота наберите 945.
- На ленте щелкните кнопку Сохранить.
Добавление веб-карты обратной связи
Вы добавите веб-карту рядом с опросом, который был предварительно настроен для отображения материалов опроса в режиме реального времени.
- Справа от карточки Опрос добавьте карточку Карта.
Появится боковая панель Карта.
- Щелкните Выбрать карту.
- В окне Выбрать карту для Из выберите Общедоступный. Найдите и выберите Отзыв Сообщества на William Land Park (Learn ArcGIS).
- Щелкните Сохранить.
- На боковой панели Карта в разделе Опции измените Заголовок на Отзыв Сообщества на William Land Park.
- Для параметра Высота (px) введите 900.
- Включите Включить легенду карты.
Встроенная карта настроена в инициативе.
- Под карточками Опрос и Карта добавьте карточку Разделитель.
- На ленте щелкните кнопку Сохранить.
Создание призыва к действию
Призыв к действию в конце сайта вашей инициативы предлагает членам общественности зарегистрироваться и получить учетную запись сообщества, чтобы получать электронные письма, связанные с вашей инициативой. Члены сообщества, которые следуют призыву к действию, добавляются в группу подписчиков вашей инициативы, чтобы вы могли отправлять им электронные письма.
- Добавьте карточку Строка между строками опрос и нижний колонтитул.
- На боковой панели Строка в поле Цвет текста укажите #32444d.
- Добавьте карточку Текст в строку. В поле Текст введите следующий текст:
Следите за нашими новостями!
Мы будем выходить на связь примерно раз в месяц, чтобы поделиться следующим:
- Настройте стиль Следите за нашими новостями! с помощью стиля Заголовок 1. Настройте стиль Мы будем выходить на связь примерно раз в месяц, чтобы поделиться следующим: с помощью стиля Заголовок 2.
- Под второй строкой добавьте разрыв строки и наберите следующий текст:
Обновления проекта
Новые способы участия
Предстоящие события
Дополнительная обратная связь и возможности
- Выделите текст, введенный на предыдущем шаге, и нажмите кнопку Неупорядоченный список.
- Настройте стиль списка с помощью стиля Заголовок 3.
- Справа от карточки Текст добавьте карточку Изображение и загрузите mailbox_image5.
- Уменьшите размер изображения в два раза.
Далее вы добавите кнопку, щелкнув по которой, пользователь может подписать на инициативу.
- Под карточкой Текст добавьте карточку Отслеживать инициативу.
Добавлена кнопка подписки или отмены подписка на инициативу. У кнопки также есть поясняющий текст. Так как вы уже добавили карточку текст с информацией о подписке на инициативу, вы можете удалить текст кнопки.
- На боковой панели Настройки отслеживания удалите текст в поле Призыв к действию.
Текст удален. Затем вы измените цвет кнопки.
- Щелкните Компоновка и выберите Настройка, чтобы вернуться к боковой панели Настройка.
- Щелкните Тема. Для параметра Цвет кнопки фона, укажите #6a9ab0.
- На ленте щелкните кнопку Сохранить.
Вы закончили инициативу. Теперь пришло время опубликовать ее, чтобы другие могли увидеть.
- На ленте щелкните кнопку Группы с доступом могут видеть этот Hub Site Application.
- На боковой панели Общий доступ для Уровень доступа выберите Общедоступный.
Теперь ваш сайт доступен для всех. Далее вы опубликуете его.
- На ленте наведите курсор на стрелку Сохранить и щелкните Опубликовать черновик.
Инициатива опубликована. Теперь вы можете просмотреть опубликованный сайт.
- На ленте наведите курсор на стрелку Сохранить и щелкните Просмотреть опубликованное.
Вы перешли к опубликованной версии сайта, которую может просмотреть любой. Просмотр сайта позволяет вам увидеть, как сайт отображается для пользователей. Вы также можете изучить функциональные возможности опроса и карты.
- Щелкните значок Редактировать, чтобы вернуться в режим Редактирование.
После того как люди начнут отслеживать вашу инициативу, вы можете управлять ими через вкладку Сообщество.
- На ленте щелкните Инициатива по улучшению парка William Land Park и выберите Сообщество.
Появляется страница Сообщество. На этой странице вы можете просмотреть список подписчиков вашей инициативы, управлять всеми подписчиками и отправлять им обновления о ходе реализации инициативы.
Теперь, когда вы создали свой первый сайт, вы можете поделиться им с правильной аудиторией. Ваш сайт может быть отдельным ресурсом, который вы продвигаете в социальных сетях, или он может быть встроен в другие сайты и страницы вашей организации.
Вы можете найти больше учебных пособий в галерее учебных пособий.
