1. Что такое дизайн? Какие основные принципы дизайна презентации и слайдов?
2. Что такое верстка? Каково ее значение в процессе создания публикаций?
3. Из чего состоит доменное имя интернет-ресурса; URL-адрес?
ЭЛЕМЕНТЫ СТРУКТУРЫ ВЕБ-СТРАНИЦ
Веб-страницы являются информационными ресурсами службы World Wide Web, и вы уже ознакомились с тем, как выполнить поиск и просмотр этих ресурсов. Теперь рассмотрим способы их создания.
В структуре веб-страницы можно выделить следующие составляющие (рис. 9.16):
• контент (англ. content — содержание) — содержательное наполнение веб-страницы, доступное пользователю: тексты, изображения, видео, звуковые данные и др.;
• элементы навигации — средства для перехода на другие веб-страницы;
• дизайн — элементы структуризации контента и ее форматирования, оформление страницы.
Веб-страницы являются текстовыми документами. Их создают с использованием языка разметки гипертекста HTML (англ. Hyper Text Markup Language — язык разметки гипертекста). В них содержится HTML-код страницы, состоящей из данных двух типов:
• текста, который будет отображаться на странице;
• тегов (англ. tag — ярлык, признак) — команд, которые определяют разметку текста: его структуру, формат фрагментов текста, обеспечивают вставку нетекстовых объектов на страницу и др.
Просмотреть HTML-код веб-страницы, открытой в окне браузера Google Chrome, можно, выбрав в контекстном меню страницы команду Просмотр кода страницы. На рисунке 9.17 приведено изображение части веб-страницы и соответствующий фрагмент HTML-кода.
Для тех, кто хочет знать больше
Во фрагменте кода, приведенном на рисунке 9.17, присутствуют следующие теги, определяющие структуру страницы:
ЭТАПЫ СОЗДАНИЯ ВЕБ-САЙТА
Разработка веб-сайта состоит из нескольких этапов. Эти этапы аналогичны этапам решения задач с использованием компьютера.
1. Постановка задания. На этом этапе определяется цель создания сайта, его основная тематика, анализируются сайты такой же или похожей тематики. В итоге разработчик должен знать:
• цель, с которой создается сайт;
• тематику сайта, отличия сайта от других сайтов такой же тематики;
• аудиторию потенциальных посетителей сайта: возраст, пол, круг интересов и т.п.;
• перечень сервисов для размещения на сайте: форум, чат, поисковая система, веб-каталог, электронная почта и др.;
• перспективы развития сайта.
2. Определение структуры сайта. На этом этапе важно составить перечень разделов сайта для формирования системы навигации, список страниц, определить связь между ними. Количество страниц будет зависеть от информационного наполнения. Результатом должна стать карта сайта — схема, которая визуально отображает иерархию страниц сайта, связь и переходы между ними, то есть внутреннюю структуру сайта.
Например, для сайта вашего класса, основными посетителями которого будут ученики класса, их родители и близкие, карта сайта может быть такой, как на рисунке 9.18.
3. Разработка структуры веб-страниц сайта. Следующим заданием является определение структуры внешнего вида веб-страниц. Поскольку для большинства страниц сайта рекомендуется применять единый стиль оформления, то необходимо определить схему расположения на страницах основных блоков: как будет расположен основной материал, дополни-
тельные информационные и рекламные блоки, анонсы, меню, счетчик посетителей и т.п.
Как правило, на веб-страницах размещают:
• верхний блок — заголовок, в котором содержатся логотип и название сайта;
• блок навигации (меню) для перехода к основным разделам сайта;
• информационный блок с основным материалом, который занимает центральную часть страницы;
• нижний блок — подвал, для размещения контактных данных, сообщения об авторских правах и т.п.
Пример структуры веб-страниц сайта приведен на рисунке 9.19.
Если разработка страниц сайта будет осуществляться автоматизированными средствами, то структура веб-страниц может быть предложена в шаблоне страницы.
4. Разработка дизайн-макета страниц сайта. Дизайн-макет страниц включает набор значений свойств текстовых и графических объектов страницы: цветовой гаммы страниц, элементов графического оформления, набора шрифтов и др., то есть определяет стиль сайта. Основа дизайн-макета — предварительно разработанная внешняя структура страниц сайта. Важно, чтобы стиль соответствовал назначению сайта, особенностям основной аудитории, на которую рассчитан сайт, был удобен для восприятия основного материала.
Дизайн-макет (рис. 9.20) может быть разработан дизайнером в графическом редакторе, нарисован на бумаге и т.п. Если разработка сайта будет осуществляться автоматизированными средствами, то варианты дизайн-макета могут быть предложены в темах сайта.
5. Создание и верстка страниц сайта. Создаются страницы, как правило, с использованием тегов языка HTML. В процессе создания происходит
верстка страниц. Верстка — это процесс размещения на странице при ее создании текстовых, графических и других объектов так, чтобы страница приобрела вид в соответствии с разработанным дизайн-макетом. На этом этапе осуществляется и информационное наполнение сайта.
6. Если на этапе постановки задания предусматривалось размещение на сайте дополнительных сервисов и средств обратной связи, таких как системы поиска, голосования, форумы и др., то необходим еще и этап программирования сайта.
7. Размещение (публикация) сайта в Интернете. На предыдущих этапах созданные веб-страницы могли храниться на локальном компьютере разработчика. На этом этапе сайт получает доменное имя и размещается на сервере. После этого сайт становится доступным для просмотра пользователями Интернета, если он или его часть не имеют ограничений на доступ.
Сервер, на котором размещается сайт, должен оказывать услуги хостинга. Хостинг (англ. hosting — оказывать гостеприимство) — выделение аппаратных и программных ресурсов сервера для размещения файлов пользователя, обеспечения доступа к ним, обработки запросов и др. Организации, которые оказывают услуги хостинга, называют хостинг-провайдерами.
Существуют онлайн-системы конструирования сайтов, которые одновременно с услугами разработки веб-сайтов оказывают услуги бесплатного хостинга. Такими являются системы Google Сайты, Weebly, uCoz и др. В этих системах создание веб-сайта осуществляется сразу в онлайн-режиме на сервере хостинга.
Для тех, кто хочет знать больше
Для того чтобы ваш сайт начали посещать пользователи Интернета, желательно зарегистрировать его в поисковых системах и каталогах, разместить ссылку на него на других сайтах. Этот процесс называют популяризацией, или продвижением сайта. Для популяризации используют и другие средства, но важно, чтобы материалы вашего сайта были достойны того, чтобы ими заинтересовались посетители.
АВТОМАТИЗИРОВАННОЕ СОЗДАНИЕ ВЕБ-САЙТА
Создание веб-сайта средствами онлайн-системы конструирования сайтов происходит в несколько шагов:
1. Регистрация учетной записи на сервере онлайн-системы конструирования сайтов.
2. Выбор названия сайта и шаблона его оформления.
3. Создание страниц сайта, системы навигации.
4. Заполнение страниц контентом.
5. Публикация сайта.
Рассмотрим, как происходит процесс разработки веб-сайта средствами, которые бесплатно предоставляет пользователям веб-сервер Google. Соответствующий сервис имеет название Google Сайты.
Учетную запись Google вы уже создавали, работая с электронной почтой и общими документами Google.
Для создания сайта следует:
1. Войти на Google Диск с вашей учетной записью Google.
2. Выполнить Создать ^ Еще ^ Google Сайты.
3. Просмотреть инструкцию по созданию сайта, используя панель Add content (англ. add content — добавить содержание), или закрыть ее.
После выполнения этих действий в окне браузера будет открыта главная страница нового сайта (рис. 9.21). В правой части окна откроется боковая панель с элементами управления, предназначенными для создания, редактирования и форматирования веб-страниц сайта. Одновременно на Google Диске появится эскиз сайта с надписью Без названия, которому
соответствует значок
В дальнейшем для редактирования вашего сайта — добавления и редактирования веб-страниц, изменения оформления и т.п. — вам следует использовать инструменты боковой панели. Открыть сайт в режиме редактирования можно двойным щелчком на его эскизе на Google Диске.
ВЫБОР НАЗВАНИЯ САЙТА И ШАБЛОНА ОФОРМЛЕНИЯ
Чтобы дать название сайту, следует ввести его в поле Укажите название сайта в верхней части заголовка страницы слева. Одновременно будет изменен на название сайта текст Без названия и подпись эскиза сайта на Google Диске.
Как и для документов Google, все изменения, выполненные на сайте, будут сохраняться автоматически.
Для выбора шаблона оформления сайта следует:
1. Выбрать вкладку Темы в правой части окна.
2. Выбрать одну из предложенных тем оформления (рис. 9.22).
3. Выбрать цветовую гамму и стиль шрифта из числа предложенных для выбранной темы.
Можно также изменить вид заголовка на страницах сайта. После наведения указателя на заголовок появляется панель настроек с командами Изменить изображение и Тип заголовка. Выбор первой команды приводит к открытию списка изображений, которые могут быть использованы в заголовке страницы. При выборе второй команды появляется возможность изменения типа заголовка — Большой баннер, Баннер или Только заголовок.
СОЗДАНИЕ ВЕБ-СТРАНИЦ
Сразу после создания сайт содержит только одну страницу, которая является главной страницей сайта. Каждая страница сайта имеет название. Название главной страницы нужно ввести в поле Заголовок страницы.
Для создания новой страницы на сайте следует:
1. Выбрать вкладку Страницы в правой части окна.
2. Выбрать кнопку Добавить страницу
3. Ввести название страницы в поле Название страницы.
4. Выбрать гиперссылку Готово.
Панель навигации формируется автоматически при создании новых страниц и отображается по умолчанию в верхней части заголовка каждой страницы справа.
Порядок страниц можно менять, перетянув в правой части окна блок заголовка страницы в необходимое место.
Для создания главной страницы тематического раздела нужно перетянуть блоки заголовков других страниц этого раздела на заголовок главной страницы раздела. На рисунке 9.23 приведен вид вкладки Страницы при перетягивании заголовка страницы Учебные материалы в тематический раздел Учеба.
Таким образом формируется внутренняя структура сайта.
ВСТАВКА ОБЪЕКТОВ НА ВЕБ-СТРАНИЦУ
На веб-страницу можно вставить разные объекты: текстовые поля, изображения, гиперссылки, документы, размещенные на Google Диске, и т.п. Для этого предназначена вкладка Вставка в правой части окна браузера.
Все объекты, которые добавляются на веб-страницу, размещаются в отдельных блоках. Каждый блок можно переместить, изменить его размеры, используя маркеры на границах, и удалить. Для каждого блока открывается отдельная панель настроек.
Назначение отдельных элементов управления вкладки Вставка приведено в таблице 9.2.
Таблица 9.2
Назначение отдельных элементов управления вкладки Вставка
|
Элемент управления |
Назначение |
 |
Для создания блока ввода текста |
 |
Для вставки изображения с Google Диска, по URL-адресу из Интернета, с компьютера и т.п. |
 |
Для вставки изображения с носителей данных вашего компьютера |
 |
Для вставки объектов разных типов с ресурсов Интернета или ссылок на них по их URL-адресу |
 |
Для поиска и вставки видео с сервиса YouTube |
 |
Для вставки созданного вами календаря в сервисе Google Календарь |
 |
Для вставки созданной вами карты в сервисе Google Карты |
 |
Для вставки документов разных типов с вашего Google Диска |
Для удаления вставленного объекта следует выбрать кнопку Удалить
на панели настроек блока объекта.
Для предварительного просмотра страниц созданного сайта можно выбрать кнопку Предварительный просмотр
в верхней части окна бра
узера. В этом режиме можно увидеть, как будет
выглядеть сайт при просмотре его на большом экране, планшете или телефоне. Для этого предназначены кнопки на панели управления предварительным просмотром (рис. 9.24). Выйти из режима предварительного просмотра можно выбором кнопки
ПУБЛИКАЦИЯ САЙТА
Созданный вами сайт будет оставаться недоступным для пользователей Интернета, пока вы его не опубликуете. Чтобы опубликовать сайт, следует:
1. Выбрать кнопку Опубликовать в верхней части окна браузера (см. рис. 9.21).
2. Ввести, используя строчные буквы латиницы, цифры и тире, последнюю часть URL-адреса сайта. Начало адреса (доменное имя сервера и путь к файлу) для всех сайтов будет одинаковым: sites.google.com/view/, а окончание должно быть уникальным для каждого сайта. Если выбранный вами адрес не является уникальным, то об этом будет сообщено и его следует изменить. Запрос URL-адреса сайта будет выводиться только при первой публикации сайта.
3. Выбрать кнопку Опубликовать.
Опубликованный сайт можно просмотреть, выбрав команду Просмотреть опубликованный сайт в списке кнопки Опубликовать. Адрес, который стоит предлагать для просмотра вашего сайта, будет содержаться в Адресной строке в окне просмотра опубликованного сайта.
После внесения изменений в ваш сайт следует выполнить повторную публикацию.
АДМИНИСТРИРОВАНИЕ САЙТА
Для нормального функционирования сайта необходимо его администрировать — обеспечивать его работоспособность, защищать от вредоносных программ, добавлять пользователей, которые могут редактировать сайт, распределять права доступа пользователей к страницам сайта, изменять внутреннюю структуру сайта и др. Выполняет эти функции администратор сайта. Часто администратором является владелец сайта.
Администрирование сайта, созданного средствами онлайн-системы конструирования сайтов, частично осуществляет служба технической поддержки этой системы. В ее обязанности входит обеспечение работоспособности и защита от вредоносных программ. Добавление пользователей, распределение прав доступа и изменение внутренней структуры сайта выполняет, как
правило, владелец сайта или назначенный им администратор.
При администрировании Google Сайтов для того, чтобы добавить пользователя и разрешить ему редактирование сайта, следует:
1. Открыть сайт в режиме редактирования.
2. Выбрать кнопку Добавить редакторов
в верхней части страницы.
3. Добавить электронный адрес пользователя, которому вы хотите разрешить редактирование сайта, в поле Пригласить пользователей в окне Добавить редактора (рис. 9.25).
4. Выбрать кнопку Готово.
5. Установить отметку флажка Запретить редакторам публиковать сайт, добавлять пользователей и изменять настройки доступа, если не желаете предоставить пользователю разрешение на администрирование сайта.
6. Выбрать кнопку Готово.
Администратор также имеет возможность изменить URL-адрес сайта и прекратить его публикацию. Соответствующие команды содержатся в списке кнопки Опубликовать.
Внимание! При работе с компьютером соблюдайте правила безопасности и санитарно-гигиенические нормы.
1. Создайте на сервере Google сайт Художественный салон. Для этого:
1. Войдите на Google Диск с вашей учетной записью Google.
2. Выполните Создать ^ Еще ^ Google Сайты.
3. Введите название Художественный салон в поле Укажите название сайта.
4. Введите название Красота рядом в поле Заголовок страницы.
2. Выберите для сайта тему оформления Мечта и измените изображение в заголовке главной страницы. Для этого:
1. Выберите заголовок вкладки Темы в правой части окна.
2. Выберите тему оформления Мечта, цвет — зеленый, стиль шрифта — Современный.
3. Наведите указатель на изображение в заголовке главной страницы. Выполните Изменить изображение ^ Выбрать изображение.
4. Выберите второе изображение из галереи и кнопку Выбрать.
3. Создайте страницы сайта согласно структуре, приведенной в файле Глава 9\Пункт 9.3\Упражнение 9.3\сxема.docx. Для этого:
1. Выберите вкладку Страницы в правой части окна.
2. Выберите кнопку Добавить страницу
3. Введите в поле Название страницы Выставочный зал.
4. Выберите гиперссылку Готово.
5. Создайте страницы с названиями Портреты, Пейзажи, Музей вы-шиванки.
6. Перетяните блоки Портреты и Пейзажи на блок Выставочный зал.
4. Заполните страницы материалами из папки Глава 9\Пункт 9.3\
Упражнение 9.3. Для этого:
1. Выберите страницу Красота рядом.
2. Выберите заголовок вкладки Вставка в правой части окна.
3. Выберите кнопку Текстовое поле.
4. Скопируйте текст из файла Глава 9\Пункт 9.3\Упражнение 9.3\ художественный салон.docx и вставьте в текстовое поле на странице Красота рядом.
5. Выберите кнопку Загрузить на вкладке Вставка.
6. Откройте файл вернисаж.jpg из папки Глава 9\Пункт 9.3\Упраж-нение 9.3.
7. Выберите кнопку Открыть.
8. Перетяните блок изображения, разместив его по центру в нижней части страницы. Обратите внимание на появление сетки для размещения блока.
9. Разместите тексты и изображения на других страницах сайта в соответствии с названием страниц.
5. Опубликуйте сайт. Для этого:
1. Выберите кнопку Опубликовать в верхней части окна браузера.
2. Введите часть адреса salon-фамилия, где фамилия — ваша фамилия, записанная латиницей.
3. Выберите кнопку Опубликовать.
4. Просмотрите опубликованный сайт, выбрав команду Открыть опубликованный сайт в списке кнопки Опубликовать.
5. Скопируйте адрес сайта из адресной строки.
6. Отправьте учителю информатики электронное письмо с сообщением адреса созданного сайта.
В структуре веб-страницы выделяют контент, элементы навигации и дизайн.
Веб-страницы являются текстовыми документами, созданными с использованием языка разметки гипертекста HTML. HTML-код страницы состоит из данных двух типов: текста, который будет отображаться на странице, и тегов — команд, которые определяют разметку текста.
Этапы создания веб-сайта: постановка задания, определение внутренней структуры сайта, разработка структуры веб-страниц, разработка дизайн-макета, создание и верстка страниц, программирование сайта, размещение (публикация) сайта в Интернете.
Карта сайта — схема, которая визуально отображает иерархию страниц сайта, связь и переходы между ними, то есть внутреннюю структуру сайта. Структура веб-страницы — схема размещения элементов внешнего вида веб-страниц: заголовка, блоков навигации, информационного блока, подвала и др.
Дизайн-макет страниц включает набор значений свойств текстовых и графических объектов страницы: цветовой гаммы страниц, элементов графического оформления, набора шрифтов и др., то есть определяет стиль сайта. Верстка — это процесс размещения на странице при ее создании текстовых, графических и других объектов согласно разработанному дизайн-макету.
Хостинг — выделение аппаратных и программных ресурсов сервера для размещения файлов пользователя, обеспечения доступа к ним, обработки запросов и др. Организации, оказывающие услуги хостинга, называются хостинг-провайдерами.
Онлайн-системы конструирования сайтов одновременно с услугами по разработке веб-сайтов оказывают услуги бесплатного хостинга. В этих системах создание веб-сайта осуществляется сразу в онлайн-режиме на сервере хостинга.
Создание веб-сайта средствами онлайн-системы конструирования сайтов происходит в несколько шагов: регистрация учетной записи на сервере онлайн-системы конструирования сайтов, выбор названия сайта и шаблона его оформления, создание страниц сайта, системы навигации, заполнение страниц контентом, публикация сайта.
Администрирование сайта — обеспечение его работоспособности, защита от вредоносных программ, добавление пользователей, которые могут редактировать сайт, распределение прав доступа пользователей к страницам сайта, изменение внутренней структуры сайта и др.
Дайте ответы на вопросы
1*. Какие составляющие можно выделить на веб-странице? Охарактеризуйте каждую группу.
2*. Что такое HTML-код страницы? Данные каких видов он содержит? Как можно его просмотреть?
3*. Какие этапы разработки веб-сайта? В чем заключается каждый из этапов?
4*. Что такое внутренняя структура веб-сайта?
5*. Какие составляющие структуры веб-страницы?
6°. Что такое верстка? Что является результатом верстки сайта?
7*. Что такое хостинг? Что называют хостинг-провайдерами?
8*. Какие этапы создания веб-сайтов средствами сервиса Google Сайты? Объясните их.
9*. Для чего осуществляется публикация сайтов? Как опубликовать сайт?
10*. В чем заключается администрирование сайта? Кто его осуществляет?
Выполните задания
1*. Создайте в текстовом процессоре схему внутренней структуры сайта на тему Опасные животные. Сохраните ее в вашей папке в файле с именем задание 9.3.1.docx.
2*. Создайте в текстовом процессоре схему внутренней структуры сайта на тему Коллекция рекордов. Сохраните ее в вашей папке в файле с именем задание 9.3.2.docx.
3*. Разработайте в графическом редакторе структуру страниц сайта на тему Научные открытия. Сохраните ее в вашей папке в файле с именем задание 9.3.3 и расширением имени, которое предлагает выбранный графический редактор.
4°. Создайте сайт с использованием сервиса Google Сайты в соответствии со структурой, приведенной на рисунке 9.18. Назовите сайт Наш класс. Выберите тему оформления Аристотель. Опубликуйте сайт без наполнения. Сообщите учителю URL-адрес вашего сайта.
5*. Создайте сайт Наши космические соседи с использованием сервиса Google Сайты. Структура сайта, текст и изображения для размещения на страницах содержатся в папке Глава 9\Пункт 9.3\3адание
9.3.5. Выберите для сайта тему оформления Дипломат. Опубликуйте сайт. Сообщите учителю URL-адрес вашего сайта.
6*. Создайте сайт о своем любимом виде спорта с использованием сервиса Google Сайты. Разработайте схему внутренней структуры сайта, подберите материалы для наполнения сайта. Опубликуйте сайт. Сообщите учителю URL-адрес вашего сайта.
ПРАКТИЧЕСКАЯ РАБОТА № 13
«Конструирование сайтов с использованием онлайн-систем»
Внимание! При работе с компьютером соблюдайте правила безопасности и санитарно-гигиенические нормы.
1. Создайте сайт Украинские исследователи космоса с использованием сервиса Google Сайты.
2. Выберите тему оформления Впечатление.
3. Создайте и разместите веб-страницы по следующий схеме внутренней структуры:
4. Заполните Главную страницу описанием материалов, которые будут размещены на страницах сайта, и данными о вас как разработчике сайта.
5. Заполните страницу История исследований текстовыми материалами, например скопированными из файла Глава 9\Практическая 13\ космические исследования^оех.
6. Разместите на странице Первый украинец в космосе текст из файла Павел Попович^оех и фотографию, которая содержится в папке Глава 9\Практическая 13\Попович.
7. Загрузите на ваш Google Диск файл Глава 9\Практическая 13\поле-ты^оех. Вставьте файл с диска на страницу Хронология полетов.
8. Разместите на странице Новости с орбиты видео с сервиса YouTube, которое найдите по поисковому запросу Марс.
9. Опубликуйте сайт с адресом kosmos-фамилия, где фамилия — ваша фамилия, записанная латиницей.
10. Просмотрите опубликованный сайт.
11. Отправьте учителю информатики электронное письмо с сообщением URL-адреса вашего сайта.
Это материал учебника Информатика 9 класс Ривкинд