Помощь при выполнении сайта

Практическая работа

«Создание сайта в конструкторе сайтов Wix.com на основе шаблона»

В данной работе вы создадите сайт, посвященный Дню снятия блокады Ленинграда по образцу, который можно увидеть, перейдя по ссылке https://katyalochmanova.wixsite.com/mysite-2. Это сайт создан студенткой (выпускницей) «ЗернПК» Екатериной Лохмановой при подготовке к конкурсу WorldSkills Russia.

Выбор шаблона сайта

1. Войти в аккаунт на сайте Wix.com.

2. Нажать кнопку Начать сейчас.

3. Нажать кнопку Создать сайт.

1. В окне с вопросом «Какой вам нужен сайт?» выбрать Другое.

1. В следующем окне нажать в правой части окна кнопку Выбрать шаблон.

1. В следующем окне выберите Сообщество, затем Образование.

1. Выберите шаблон «Детское творчество» (на данный момент он четвертый в списке), нажмите Редактировать. Дождитесь загрузки редактора сайта.

1. После загрузки редактора сохраните сайт, для этого нажмите на кнопку Сохранить в правом верхнем углу редактора. В окне «Какой домен подключить?» в поле «Бесплатный домен Wix.com» напишите имя сайта primer1 и нажмите кнопку Сохранить и продолжить. При появлении окна «Сайт сохранен», нажмите Готово.

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

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

1. Название страницы «Главная» оставим без изменений, а для переименования страницы «О нас» нажмите на значок меню данной страницы справа от её названия и выберите пункт Переименовать. Введите новое имя «Для коллег» и нажмите кнопку Готово.

1. Откройте меню страницы «Для коллег» и выберите пункт «Создать копию», запишите имя этой страницы «Для родителей».

2. Сделайте копию страницы «Для родителей» и назовите её «Для детей».

3. Удалите страницы «Занятия», «Галерея» и «Контакты». У вас должна получиться следующая структура страниц сайта.

1. Закройте окно «Страницы сайта» (нажать на крестик) и сохраните изменения.

Редактирование страницы «Главная»

(настройка объектов: меню, слайдер, текст, фото, форма обратной связи, приложения Яндекс карты)

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

1. Щелкните по тексту «Школа искусств», нажмите кнопку Редактировать текст и введите текст «Блокада Ленинграда».

1. В окне «Настройка текста» измените размер шрифта на 50 (или другой подходящий), цвет текста – темно серый, закройте окно «Настройка текста».

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

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

4. Для слайдера вам необходимо подобрать в сети Интернет три картинки по теме сайта и сохранить их в папку Сайт Фамилия.

5. Щелкните по картинке с изображением девочки, а затем по кнопке Заменить фотографии.

1. Выделите первую фотографию и нажмите кнопку Заменить фото в правой части окна.

1. В окне Выберите фото нажмите кнопку Загрузить файлы, а в следующем окне выберите Загрузить с компьютера.

1. Удалите две последние фотографии, для этого наведите указатель мыши на фотографию и нажмите на изображение корзины.

2. Переместите бокс с текстом «Блокада Ленинграда» в левый нижний угол слайдера.

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

4. Вернитесь в редактор, нажатием на кнопку Назад в редактор.

5. Перейдите в конец страницы к разделу «футер» (подвал). Данный раздел, также как и «хедер», отображается одинаково на всех страницах сайта. Выделите текстовый элемент с текстом «© 2023 «Школа искусств». Сайт создан на Wix.com» и отредактируйте его на следующий: «2021 «Зерноградский педагогический колледж».

1. Размер шрифта установите на 18 пт, цвет – темно фиолетовый.

2. Щелкните левой кнопкой мыши по фону страницы «дерево» выше области футера, а затем по кнопке Изменить фон страницы. Выберите мраморный фон и щелкните по кнопке Добавить на другие страницы. В окне «Добавить на страницы» установите флажок Все страницы и закройте текущее окно и окно «Фон страницы».

1. Перейдите в начало страницы, отредактируйте текст в основной области страницы.

2. Удалите рисунок с ладошками, для этого щелкните по нему и нажмите на клавиатуре клавишу [Del] или [Delete] и растяните текстовую область на всю ширину страницы.

3. Отредактируйте текст в соответствии с изображением.

1. Примените к заголовку «Добро пожаловать» параметры форматирования, согласно рисунку (шрифт – Comic Sans MS, размер – 34, цвет шрифта – темно фиолетовый, выравнивание – по центру):

1. Примените к тексту после заголовка параметры форматирования, согласно рисунку (шрифт – Arial, размер – 18, цвет шрифта – черный, выравнивание – по ширине).

1. Перетащите слайдер и горизонтальную линию под ним ближе к тексту и настройте слайдер самостоятельно: добавьте 4 изображения по теме сайта (настройка аналогична предыдущему слайдеру).

1. Удалите все элементы под горизонтальной линией в основной области страницы, для этого щелкайте по ним и нажимайте на клавиатуре клавишу [Del] или [Delete].

2. Нажмите на боковой панели кнопку Добавить (+) и выберите элемент Текст, В стиле шаблона, Заголовок 2. Переместите добавленный заголовок под горизонтальную линию и расположите его по центру страницы.

1. Отредактируйте заголовок: текст заголовка «Контакты и обратная связь», шрифт – Comic Sans MS, размер – 28, цвет шрифта – темно фиолетовый, выравнивание – по центру.

2. Под заголовком добавьте еще один текстовый элемент и отредактируйте его: текст «По всем вопросам со мной можно связаться по электронной почте: [email protected] или через форму обратной связи», шрифт – Arial, размер – 18, цвет шрифта – черный, выравнивание – по ширине.

1. Расположите элементы как на образце.

1. Подготовьте место для карты. Чтобы карта поместилась по длине на страницу, щелкните на пустом месте страницы и увеличьте длину страницы, потянув за «ручку» в виде стрелки вниз.

1. Для вставки карты воспользуйтесь приложением «Яндекс.Карты». Для его вставки на боковой панели нажмите кнопку Добавить приложения, в открывшемся окне в поле Найти приложение наберите «Карты» и выберите приложение Яндекс.Карты. В следующем окне нажмите кнопку Добавить на сайт.

1. Дождитесь загрузки приложения на страницу, перемести карту под текст.

2. Щелкните по карте, а затем по кнопке Настроить. Слева выберите раздел Настройка, затем в списке Язык карты – Русский.

1. В разделе Адреса удалите Красная площадь и Дворцовая площадь.

2. Щелкните по ссылке Добавить адрес и введите в поле Адрес: г Зерноград, ул Ленина 37. Нажмите кнопку Найти, появится полный адрес, нажмите на него, а затем на кнопку Добавить адрес.

1. В разделе Показать отключите переключатель Показать боковую панель. Закройте окно настройки карты.

2. Подготовьте место для формы. Растяните страницу вниз на достаточно большую длину, так как форма довольно длинная.

3. Добавьте форму обратной связи. Для этого на боковой панели нажмите кнопку Добавить (+) и выберите элемент Формы и связь, Обратная связь, Отзыв.

1. Отредактируйте форму: исправьте название поля «Оцените наш товар / услугу» на «Оцените наш сайт». При необходимости, удалите лишние поля на форме.

Добавление и настройка объектов: фото, кнопка, аудио, видео

1. Перейдите на страницу «Для коллег».

2. Текст заголовка «О нас» замените на текст «Для коллег» (в начале каждой страницы необходимо указывать её название).

3. Далее мы рассмотрим только процесс добавления объектов: фото, кнопка, аудио, видео. Остальные объекты добавьте согласно образцу (сайт https://katyalochmanova.wixsite.com/mysite-2/для-коллег). Я решила немного поменять оформление ссылок, лучше оформите ссылки с учетом внесенных изменений.

4. Удалите все объекты, расположенные ниже заголовка.

5. Добавим ссылку на полезный для педагога ресурс.

6. Найдите методическую разработку по теме сайта, полезную учителям и скопируйте ссылку на данный сайт.

7. Добавьте объект Текст и напишите в нем «Разработка классного часа (внеклассного мероприятия) для учащихся 1 - 4 классов «Снятие блокады Ленинграда».

8. Нажмите кнопку Добавить (+) на боковой панели и выберите объект Кнопка, поместите её справа от текста.

1. Щелкните по добавленной кнопке и нажмите кнопку Изменить текст. В открывшемся окне в поле «Текст кнопки» введите текст «Перейти».

2. Нажмите на текст Добавьте ссылку.

3. В открывшемся окне установите переключатель Веб-адрес, в поле «Добавьте веб-адрес» вставьте ссылку на ранее найденный вами сайт.

4. Нажмите кнопку Сохранить, закройте окно Настройка кнопки. Проверьте работу кнопки в режиме предварительного просмотра сайта. Затем вернитесь в редактор.

5. Добавьте изображение на страницу, для этого предварительно найдите и сохраните в браузере необходимые картинки или фото, нажмите кнопку Добавить (+) на боковой панели и выберите объект Фото, Мои загрузки, Загруженные фото, затем Загрузить файлы (слева сверху).

1. Нажмите Загрузить с компьютера и выберите необходимый файлы изображений, нажмите Добавить на сайт.

2. Добавьте аудио проигрыватель для воспроизведения музыки. Для этого нажмите кнопку Добавить (+) на боковой панели и выберите объект Видео и аудио, Плеер Spotify.

1. После загрузки плеера, щелкните по нему и нажмите кнопку Настроить, а в открывшемся окне – кнопку Найти музыку. В поле Поиск введите название песни «Ленинградский метроном» и нажмите на стрелку справа от поля поиска (лучше вводить название конкретной песни или ключевое слово названия).

1. В следующем окне перейдите на вкладку Треки, выделите песню и нажмите кнопку Выбрать.

1. Если в этом плеере ничего не нашлось или есть только неполная версия песни, то найдите в браузере и скачайте на компьютер необходимую музыку. Загрузите файлы с музыкой на WIX: на боковой панели нажмите кнопку Медиа, затем Загрузить файлы, Загрузить с компьютера, в открывшемся окне выберите необходимый файл с музыкой и нажмите Открыть.

2. Дождитесь загрузки файла, нажмите кнопку Добавить на сайт.

1. Для добавления видео нажмите кнопку Добавить (+) на боковой панели и выберите объект Видео и аудио, Одиночное видео, YouTube.

2. Щелкните по кнопке Заменить видео, Найти видео, в поле поиска введите тему видео «блокада Ленинграда».

3. Выделите необходимое видео, щелкните ОК, закройте окно Настройка видео.

1. Оформите сайт, добавьте все требуемые элементы на сайт и опубликуйте его (нажмите в правом верхнем углу кнопку Опубликовать, Готово). Окно «Адаптируйте сайт для смартфонов» закройте.

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