Урок № 1 Введение в веб-технологии. Создание сайта-визитки
СОДЕРЖАНИЕ Основные понятия . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Создание сайта-визитки . . . . . . . . . . . . . . . . . . . . . . . . . 10 Поиск и создание изображений с помощью Canva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Изображение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Видео. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Canva. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
15 15 15 16
Введение в веб-технологии. Создание сайта-визитки
Дорогие студенты!
Сегодня вы познакомитесь с процессом создания сайтов. Это станет вашим первым шагом в IT-технологии. Однако для начала давайте разберемся с основными понятиями, которые необходимы нам для работы.
Основные понятия Несмотря на то, что большинство из вас уже давно умеет пользоваться интернетом и искать в нем информацию, немногие понимают, что он собой представляет. Представьте, что вы живете в большом многоэтажном доме. Вы связаны с другими жителями. Таким образом, вы можете обмениваться информацией и передавать важные файлы. Ваш дом – это сеть. Внезапно вы узнаете, что существует множество таких домов со своими сетями. Вы начинаете передавать информацию теперь и другим жителям в других домах и создаете новую сеть (рис. 1).
Рисунок 1
3
Введение в веб-технологии. Создание сайта-визитки
Дорогие студенты!
Сегодня вы познакомитесь с процессом создания сайтов. Это станет вашим первым шагом в IT-технологии. Однако для начала давайте разберемся с основными понятиями, которые необходимы нам для работы.
Основные понятия Несмотря на то, что большинство из вас уже давно умеет пользоваться интернетом и искать в нем информацию, немногие понимают, что он собой представляет. Представьте, что вы живете в большом многоэтажном доме. Вы связаны с другими жителями. Таким образом, вы можете обмениваться информацией и передавать важные файлы. Ваш дом – это сеть. Внезапно вы узнаете, что существует множество таких домов со своими сетями. Вы начинаете передавать информацию теперь и другим жителям в других домах и создаете новую сеть (рис. 1).
Рисунок 1
3
Введение в веб-технологии. Создание сайта-визитки
нужно лишь загрузить свой сайт на сервер, настроить электронную почту. Также интернет предоставляет сервисы для обмена информацией без использования веб-страниц. Это могут быть интернет-магазины, социальные сети, разные виды электронной почты. Людям проще запомнить ссылки вида Google.com и найти этот сервис в интернете. Такие обозначения называются доменными именами. В то время как компьютерам легче воспринимать цифры, из которых состоят IP-адреса, пользователи используют домены. Они состоят из самого названия сервиса, обозначения региона, страны, статуса (организации или отдельного пользователя), направления сервиса. Например (см. рис. 2), Google – это название, оно указывается слева. Обозначение Com говорит нам о том, что это коммерческий проект. Ua – использование в определенном регионе (Украина).
Рисунок 2
Рассмотрите примеры доменов общего пользования. Имя домена
Значение
.com
Коммерческие проекты
.org
Некоммерческие организации
.net
Проекты, связанные с интернетом
5
Урок № 1 Имя домена
Значение
.edu
Образовательные проекты и учреждения
.biz
Коммерческие организации
.info
Информационные проекты
.name
Личные сайты
.gov
Госструктуры США
.ua
Украина
.ru
Россия
.us
США
Бывают даже многоуровневые домены принадлежащие одному проекту. Они могут отличаться сервисом, который предоставляют, регионом, для которого создаются и так далее. Хорошим примером являются домены Google. Эта компания создала целую платформу всевозможных услуг под доменом второго уровня Google.com: translate.google.com, docs.google.com, drive.google.com, photos.google.com и многие другие. Название может состоять более чем из 120 доменов, но на практике чаще встречается использование двух-трех.
6
Введение в веб-технологии. Создание сайта-визитки
Для создания сайта перейдите по ссылке – WIX.com. WIX – это одна из лучших платформ, с миллионами пользователей по всему миру. Посмотрите короткое видео.
Она очень просто позволяет создавать красивые и интересные сайты. Конструктор сайтов Wix – имеет около сотни дизайнерских шаблонов, свой хостинг, дополнительные приложения и множество других бесплатных возможностей, о которых мы узнаем в ходе курса. Самые главные из них: ■■ ведение собственного блога; ■■ добавление видео и фото; ■■ создание регистрационных форм; 7
Урок № 1
■■ создание своего интернет-магазина; ■■ размещение и создание ссылок; ■■ использование Google Maps и различных виджетов. Но для начала нужно создать учетную запись на этом сайте. Для этого предстоит ввести свои данные для регистрации. Вы можете использовать аккаунт Google (рис. 3)
Рисунок 3
Для регистрации вам понадобится ввести: 1. e-mail; 2. нажать кнопку Дальше; 3. повторить пароль; 4. снова нажать кнопку Дальше. Если вы выполнили все эти действия, то у вас появится главная страница сайта Wix.com. Далее нажимаем на пункт верхнего меню Мои сайты > Создать сайт (рис. 4). 8
Введение в веб-технологии. Создание сайта-визитки
нужно лишь загрузить свой сайт на сервер, настроить электронную почту. Также интернет предоставляет сервисы для обмена информацией без использования веб-страниц. Это могут быть интернет-магазины, социальные сети, разные виды электронной почты. Людям проще запомнить ссылки вида Google.com и найти этот сервис в интернете. Такие обозначения называются доменными именами. В то время как компьютерам легче воспринимать цифры, из которых состоят IP-адреса, пользователи используют домены. Они состоят из самого названия сервиса, обозначения региона, страны, статуса (организации или отдельного пользователя), направления сервиса. Например (см. рис. 2), Google – это название, оно указывается слева. Обозначение Com говорит нам о том, что это коммерческий проект. Ua – использование в определенном регионе (Украина).
Рисунок 2
Рассмотрите примеры доменов общего пользования. Имя домена
Значение
.com
Коммерческие проекты
.org
Некоммерческие организации
.net
Проекты, связанные с интернетом
5
Урок № 1
Создание сайта-визитки Сегодня мы будем создавать сайт-визитку. Он должен рассказывать о вас, ваших положительных качествах и навыках, любимом деле, мечтах и желаниях. Выберите шаблон Одностраничный и нажмите Редактировать. Рабочая область будет выглядеть так, как показано на рисунке 6.
Рисунок 6
Слева и справа от рабочей области находятся панели инструментов, которые вы можете использовать в ходе работы. Чтобы изменить текст или поменять изображение, которое находится на странице по умолчанию, кликните на него дважды. В случае с изображением будет открыта новая вкладка, в которой вы можете загрузить фото с вашего ПК, соцсети или выбрать один из предложенных бесплатных вариантов. До начала работы желательно создать базу изображений, которые вы будете использовать в процессе создания сайта (рис. 7). 10
Введение в веб-технологии. Создание сайта-визитки
Рисунок 7
Якорные ссылки показывают полные развороты страницы, на которой вы должны размещать информацию в правильной последовательности. 1. На первой якорной ссылке мы советуем вам написать приветствие и представиться перед гостями вашей страницы. Добавьте красивый фон и свое фото на страницу. 2. Вторая якорная ссылка должна подробнее описывать вас. Расскажите о своем хобби, почему вы его выбрали и почему оно вам так по душе. После рассказа добавьте изображение, которое бы показывало, чем вы любите заниматься. 3. Часть страницы Услуги замените на Мои друзья. Здесь вы можете добавить ваши общие фото, написать, как их зовут и почему вы с ними дружите. Не страшно, если друзей будет не так много! Вы можете также написать о своем любимце в этом блоге или изменить содержание по своему усмотрению. 11
Урок № 1
4. Следующий блок информации – это фото, которые могли бы вас правильно охарактеризовать. Вставьте сюда ваши фото или изображения, которые вам нравятся. 5. Напоследок – оставьте ваши контактные данные, чтобы гости вашего сайта могли с вами связаться. Укажите вашу электронную почту, номер, страницы в соцсетях. Чтобы посмотреть, как у вас будет выглядеть сайт, нажимайте Предпросмотр (справа вверху). После того как вы закончите с оформлением сайта, нажмите кнопку (в правом верхнем углу) Опубликовать и выберите подходящее доменное имя от Wix. Нажмите Сохранить и продолжить (рис. 8).
Рисунок 8
12
Введение в веб-технологии. Создание сайта-визитки
А на рисунках 9 и 10 вы можете увидеть пример части сайта, который вы можете создать.
Рисунок 9
Рисунок 10
13
Урок № 1
После этого вы можете опубликовать данный сайт в интернете и получить к нему ссылку. Однако если вы захотите что-либо изменить после публикации, вы можете сделать это, вернувшись на Wix.com.
14
Введение в веб-технологии. Создание сайта-визитки
Поиск и создание изображений с помощью Canva Перед тем как приступить к работе с размещением любой информации, нам нужно вспомнить, как скачивать картинки и загружать видео.
Изображение Для скачивания любых картинок вам нужно щелкнуть по выбранной картинке правой кнопкой мыши > выбрать Сохранить как > выбрать папку, где картинка будет сохранена. Не забывайте переименовать картинки, иначе можно запутаться. Не нужно называть файлы просто цифрами, лучше всего использовать латинские буквы.
Видео Для скачивания видео с YouTube, можно использовать специальные программы, но есть и более простой способ: в адресной строке вашего браузера после точки ставим две буквы ss (см. рис. 11). Перед скачиванием выберите качество видео.
Рисунок 11
15
Урок № 1
Далее, вы перейдете на сайт Savefrom.net, где ссылка на ролик для скачивания уже автоматически будет введена (рис. 12).
Рисунок 12
Canva Чтобы создать красивое и качественное изображение, воспользуйтесь сайтом Canva.com. Зарегистрируйтесь с помощью аккаунта Google (рис. 13).
Рисунок 13
16
Введение в веб-технологии. Создание сайта-визитки
Вам будет предложена масса шаблонов, в которые вы можете вносить изменения и менять относительно своих желаний (рис. 14).
Рисунок 14
Выберите пункт Визитная карточка. На новой вкладке вы можете либо создать изображение с нуля, либо воспользоваться уже существующим как основой (рис. 15).
Рисунок 15
17
Урок № 1
Все элементы на картинке вы можете изменять, перемещать, стирать и добавлять с помощью третьего пункта контекстного меню слева, со значком . Кроме прочего, эти элементы можно изменить с помощью фильтра, обрезать и перевернуть. Найти их вы можете с помощью поисковой строки слева (рис. 16).
Рисунок 16
Чтобы добавить фото или изображение со своего ПК, воспользуйтесь пунктом Загрузки (рис. 17). С помощью следующего пункта меню, вы можете добавлять различные надписи. При выделении текста появляется строка для его форматирования. Здесь вы можете изменить цвет, шрифт, размер, выравнивание текста и многое другое (рис. 18).
18
Введение в веб-технологии. Создание сайта-визитки
Рисунок 17
Рисунок 18
19
Урок № 1
В пункте контекстного меню Фон, выберите основной цвет своей визитки (рис. 19).
Рисунок 19
После окончания своей работы нажмите Скачать (рис. 20).
Рисунок 20
20
Урок № 1 Введение в веб-технологии. Создание сайта-визитки © Компьютерная Академия ШАГ www.itstep.org
Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения, фрагменты которых использованы в материале, принадлежат их законным владельцам. Фрагменты произведений используются в иллюстративных целях в объёме, оправданном поставленной задачей, в рамках учебного процесса и в учебных целях, в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні права». Объём и способ цитируемых произведений соответствует принятым нормам, не наносит ущерба нормальному использованию объектов авторского права и не ущемляет законные интересы автора и правообладателей. Цитируемые фрагменты произведений на момент использования не могут быть заменены альтернативными, не охраняемыми авторским правом аналогами, и как таковые соответствуют критериям добросовестного использования и честного использования. Все права защищены. Полное или частичное копирование материалов запрещено. Согласование использования произведений или их фрагментов производится с авторами и правообладателями. Согласованное использование материалов возможно только при указании источника. Ответственность за несанкционированное копирование и коммерческое использование материалов определяется действующим законодательством Украины.