Vvedenie v veb tehnologii. sozdanie sayta-vizitki

2. Несмотря на то, что большинство из вас уже давно умеет пользоваться
интернетом и искать в нем информацию, немногие понимают, что он собой
представляет.
Представьте, что вы живете в большом многоэтажном доме. Вы
связаны с другими жителями. Таким образом, вы можете обмениваться
информацией и передавать важные файлы. Ваш дом – это сеть.
Внезапно вы узнаете, что существует множество таких домов со
своими сетями. Вы начинаете передавать информацию теперь и другим
жителям в других домах и создаете новую сеть (рис. 1).
Рис.1

3. Интернет – это и есть своеобразная сеть сетей. С каждым домом она
становится все больше и больше, но это не значит, что от нее нельзя отделиться.
Например, в Северной Корее существует своя собственная сеть, которая
называется Кванмён.
Информацию, которую вы разместили в интернете, могут увидеть
пользователи со всего мира. Что касается всемирно известных сайтов, они
хранятся на серверах.

4. Доступ к интернету пользователи получают через беспроводные (Wi-Fi-
роутеры) и проводные (кабели) системы. Как же так получается, что способы
передачи разные, а интернет один? Для этого были придуманы протоколы.
Протокол – это такой набор основных правил, с помощью которых вы можете
пользоваться сетью. Например, следуя этим правилам, у каждого компьютера есть
свое имя – IP-адрес, который состоит из цифр. Передача данных между
компьютерами называется TCP (Trasnsmition Control Protocol). Заканчивается
≪общение≫ – протоколом TCP/IP. Только используя все необходимые
протоколы, вы сможете общаться с другими жителями ≪дома≫.

5. А теперь вернемся к веб-страницам. Веб-страница – это любой документ в
интернете, не важно будет ли это картинка, текст или звук. Часто случается, что часть
какой-то информации одной страницы используется на другой или ссылается на нее.
Вместе эти страницы и их связь образуют Всемирную паутину (World Wide Web).
Однако для размещения сайта в сети нужен также
хостинг. Так называют услугу предоставления места на
сервере (там, где вы храните файлы своего сайта). Вам
нужно лишь загрузить свой сайт на сервер, настроить
электронную почту.
Также интернет предоставляет сервисы для обмена информацией без
использования веб-страниц. Это могут быть интернет-магазины, социальные
сети, разные виды электронной почты.

6. Людям проще запомнить ссылки вида Google.com и найти этот сервис в интернете.
Такие обозначения называются доменными именами. В то время как компьютерам легче
воспринимать цифры, из которых состоят IP-адреса, пользователи используют домены.
Они состоят из самого названия сервиса, обозначения региона, страны, статуса
(организации или отдельного пользователя), направления сервиса.
Например (см. рис. 2), Google – это название, оно указывается слева. Обозначение
Com говорит нам о том, что это коммерческий проект. Ua – использование в
определенном регионе (Украина).
Рассмотрите примеры доменов общего
пользования.

7. Бывают даже многоуровневые домены принадлежащие одному проекту. Они могут
отличаться сервисом, который предоставляют, регионом, для которого создаются и так
далее. Хорошим примером являются домены Google. Эта компания создала целую
платформу всевозможных услуг под доменом второго уровня Google.com:
translate.google.com, docs.google.com, drive.google.com, photos.google.com и многие другие.
Название может состоять более чем из 120 доменов, но на практике чаще встречается
использование двух-трех.

8. Для создания сайта перейдите по ссылке – WIX.com.
WIX – это одна из лучших платформ, с миллионами пользователей по всему миру.

9. Она очень просто позволяет создавать красивые и интересные сайты. Конструктор
сайтов Wix – имеет около сотни дизайнерских шаблонов, свой хостинг, дополнительные
приложения и множество других бесплатных возможностей, о которых мы узнаем в ходе
курса.
Самые главные из них:
■■ ведение собственного блога;
■■ добавление видео и фото;
■■ создание регистрационных форм;
■■ создание своего интернет-магазина;
■■ размещение и создание ссылок;
■■ использование Google Maps и различных виджетов.
Но для начала нужно создать учетную запись на этом сайте. Для этого предстоит
ввести свои данные для регистрации. Вы можете использовать аккаунт Google (рис. 3)
Рис. 3

10. Для регистрации вам понадобится ввести:
1.e-mail;
2.нажать кнопку Дальше;
3.повторить пароль;
4.снова нажать кнопку Дальше.
Если вы выполнили все эти действия, то у вас появится главная страница сайта Wix.com.
Далее нажимаем на пункт верхнего меню Мои сайты > Создать сайт(рис. 4).
Рис. 4

11. Вам предлагается большой выбор шаблонов из разных категорий. После выбора
категории кликните на Выбрать шаблон.
Также вы можете создать свой собственный сайт из Пустого шаблона. Для этого вам
понадобится выбрать Пустые слева.
Если все выполнено правильно, то должно получиться так, как показано на рисунке 5.
Рис. 5

12. Сегодня мы будем создавать сайт-визитку. Он должен рассказывать о вас, ваших
положительных качествах и навыках, любимом деле, мечтах и желаниях.
Выберите шаблон Одностраничный и нажмите Редактировать. Рабочая область
будет выглядеть так, как показано на рисунке 6.
Рис. 6

13. Слева и справа от рабочей области находятся панели инструментов, которые вы
можете использовать в ходе работы.
Чтобы изменить текст или поменять изображение, которое находится на странице по
умолчанию, кликните на него дважды. В случае с изображением будет открыта новая
вкладка, в которой вы можете загрузить фото с вашего ПК, соцсети или выбрать один из
предложенных бесплатных вариантов. До начала работы желательно создать базу
изображений, которые вы будете использовать в процессе создания сайта (рис. 7).
Рис. 7

14. Якорные ссылки показывают полные развороты страницы, на которой вы должны
размещать информацию в правильной последовательности.
1.На первой якорной ссылке мы советуем вам написать приветствие и представиться
перед гостями вашей страницы. Добавьте красивый фон и свое фото на страницу.
2.Вторая якорная ссылка должна подробнее описывать вас. Расскажите о своем хобби,
почему вы его выбрали и почему оно вам так по душе. После рассказа добавьте
изображение, которое бы показывало, чем вы любите заниматься.
3.Часть страницы Услуги замените на Мои друзья. Здесь вы можете добавить ваши
общие фото, написать, как их зовут и почему вы с ними дружите. Не страшно, если
друзей будет не так много! Вы можете также написать о своем любимце в этом
блоге или изменить содержание по своему усмотрению.
4.Следующий блок информации – это фото, которые могли бы вас правильно
охарактеризовать. Вставьте сюда ваши фото или изображения, которые вам нравятся.
5.Напоследок – оставьте ваши контактные данные, чтобы гости вашего сайта могли с
вами связаться. Укажите вашу электронную почту, номер, страницы в соцсетях.
Чтобы посмотреть, как у вас будет выглядеть сайт, нажимайте Предпросмотр
(справа вверху). После того как вы закончите с оформлением сайта, нажмите кнопку
(в правом верхнем углу) Опубликовать и выберите подходящее доменное имя от
Wix. Нажмите Сохранить и продолжить (рис. 8).

15. Рис. 8

16. Рис. 9
Рис. 10

17. Перед тем как приступить к работе с размещением любой информации, нам нужно
вспомнить, как скачивать картинки и загружать видео.
Изображение
Для скачивания любых картинок вам нужно щелкнуть по выбранной картинке правой
кнопкой мыши > выбрать Сохранить как > выбрать папку, где картинка будет сохранена.
Не забывайте переименовать картинки, иначе можно запутаться. Не нужно называть файлы
просто цифрами, лучше всего использовать латинские буквы.
Видео
Для скачивания видео с YouTube, можно использовать специальные программы, но
есть и более простой способ: в адресной строке вашего браузера после точки ставим две
буквы ss (см. рис. 11). Перед скачиванием выберите качество видео.
Рис. 11

18. Далее, вы перейдете на сайт Savefrom.net, где ссылка на ролик для
скачивания уже автоматически будет введена (рис. 12).
Рис. 12
Чтобы создать красивое и качественное изображение, воспользуйтесь сайтом
Canva.com. Зарегистрируйтесь с помощью аккаунта Google (рис. 13).
Рис. 13

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

20. Чтобы добавить фото или изображение со своего ПК, воспользуйтесь пунктом
Загрузки (рис. 15).
С помощью следующего пункта меню, вы можете добавлять различные надписи. При
выделении текста появляется строка для его форматирования. Здесь вы можете изменить
цвет, шрифт, размер, выравнивание текста и многое другое (рис. 16).
Рис. 15
Рис. 16

21. В пункте контекстного меню Фон, выберите основной
цвет своей визитки (рис. 17).
После окончания своей работы нажмите Скачать (рис. 18).

22. Задание
1. Доделать незаконченные на уроке блоки.
2. Добавить следующие блоки:
■■ карта (с местом обучения);
■■ любимые игры;
■■ любимые фильмы/мультфильмы.
3. Прикрепить текстовый документ со ссылкой на сайт в MyStat,
со следующим названием: Фамилия_Группа_WIX_ДЗ №1.