Урок 19. Демонстрация сайтов

Тема сайтов - "Европейские страны в XXI веке"

Сегодня вы демонстрируете Google-сайты, над которыми работали в течение декабря-января.
Итак, автор сайта представляет свою работу. На выступление отводится 2-3 минуты.

Примерный план выступления

• Показать главную страницу сайта, 
• Назвать страну, которой посвящен сайт 
• Рассказать, чем вам понравилась эта страна
• Показать наиболее интересные страницы сайта
• Рассказать, какие возможности Google-сайтов были использованы

 Оценка сайта и выступления

Давайте теперь вместе оценим, что получилось. Для оценки применим метод "6 шляп"
Для каждого из нас предназначены разные роли в зависимости от цвета "надетой" шляпы

Цель метода

Научить людей лучше понимать особенности своего мышления, контролировать свой образ мыслей и более точно соотносить его с поставленными задачами с целью более эффективного использования процесса мышления при решении проблем.
Темы и ссылки на ваши сайты можно посмотреть ЗДЕСЬ
Технология оценки сайтов приведена ЗДЕСЬ Пожелаем всем нам успеха!

Урок 17-18. Заполнение страниц сайта

Размещайте на страницах сайта информацию в соответствии с внутренней структурой вашего сайта.

Урок 16. Логотип и иллюстрации для сайта

На веб-странице можно размещать изображения только в тех графических форматах, которые распознаются браузером. Это форматы GIF, PNG, JPG (JPEG). Мы уже встречались с этими форматами, когда изучали графический редактор GIMP 

В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, поэтому надо вовремя остановиться.

Давайте теперь обратим внимание на размеры изображения (высота и ширина). Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины. 
Поэтому рекомендуется всегда записывать эти атрибуты и указывать в них естественные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением.

Среди всех изображений на сайте хочется обратить особое внимание на логотип.
Логотип сайта - небольшое графическое изображение, которое помещается в заголовок сайта. Логотип украшает сайт и привлекает пользователя. 
Удобно, если логотип сохранен в формате GIF или PNG на прозрачном фоне. А если вы выбрали формат JPG, то следует сделать растушевку от фона логотипа к  фону заголовка сайта
Задача на сегодня: подобрать логотип, разместить его в заголовке, подобрать и обработать изображения, которые будут на страницах сайта

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

1. На локальном диске в своей папке по ИКТ создать папку web-img
2. Поместить в эту папку все изображения, которые вы хотите разместить на страницах сайта.
3. Подробно о том, как выполняются отдельные действия на сайте, читайте ЗДЕСЬ
4. В GIMP изменить, если требуется, размеры изображений.
   Требования к каждому изображению:
   • Логотип не болеее, чем 100 х 100 пикселей
   • Если на странице одно изображение , то его ширина  - не более 400 пикселей
   • Если на странице несколько изображений, то ширина - не более 200 пикселей
   • Размер каждого файла - 100 - 200 Кб
5. Показать папку с изображениями учителю
6. Внести изображения в таблицы (загрузить с локального диска):

  

Урок 15. Разработка тематического сайта. Внешняя и внутренняя структура сайта

Приступаем к разработке тематических сайтов 

Тема сайта: <Европейская страна> в XXI веке

Например, Германия в XXI веке

Выбор страны  можно уточнить ЗДЕСЬ.

А. Продумайте структуру (внешняя структура) и состав сайта (внутренняя структура)
Прочтите подробнее о том, что такое внешняя и внутренняя структура сайта

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

В  тетради для контрольных работ по технологии схематично изобразите внутреннюю структуру вашего будущего сайта, сконструируйте URL  сайта, дайте названия отдельным страницам (латинскими буквами) в соответствии с выбранной темой.

Название сайта: 

• 2016-11-свои-инициалы-страна,  (латинскими буквами)
• например: 2016-11-AT-germany

Страницы также называются латинскими буквами. К каждой странице напишите аннотацию: 1-2 предложения о том, что будет на этой странице.

Минимальный состав сайта - на минимальную оценку:

• Государственное устройство
• Административное деление
• Образование
• Культура и искусство
• Экономика
• Наука
• Ссылки на используемые сайты. Сайтов должно быть не менее 3-х

B. Создайте Google - сайт

1. Для этого  в Приложениях Google (Вкладка Почта или Диск) выберите Сайты, затем нажмите красную кнопку слева - СОЗДАТЬ. 
2. Выберите пустой шаблон.
3. Название сайта, Местоположение -- в оба поля сначала введите URL сайта (Позже обязательно ИЗМЕНИТЬ Название сайта!). 
4. Выберите тему сайта (ее потом можно будет заменить)
5. Заполните Другие возможности:
• В категории сайта укажите - образование, культура, ИКТ2016 
• Краткое описание (аннотацию), в котором также укажите свою фамилию как автора сайта.

Сохраните сайт!

C. Измените Название сайта, Установите доступ

Выберите Дополнительные действия -- Управление сайтом -- 

• Общие: Найдите поле Название сайта и введите осмысленное название (НЕ URL )
• Общий доступ: Читать могут пользователи домена ГБОУ школы 640, обладающие ссылкой;
• Общий доступ: Учителю предоставьте доступ редактора.
• Темы, цвета и шрифты: можно их поменять

Остальные параметры настроим позже. 
Сохраните.

D. Создайте отдельные страницы в соответствии с нарисованной в тетради структурой

1. В основном меню  выберите значок  Создать страницу, 
2. Укажите ее номер в списке страниц + название страницы. (Совет: пишите номер + название русскими буквами, конструктор сам переведет название в латиницу)
3. Укажите размещение страницы -  поместить страницу на верхний уровень
4. Шаблон - веб-страница (или сознательно выберите что-то другое)
5. Внесите на каждую страницу текст аннотации

Не забывайте сохранять изменения!
Учителю пришлите письмо, в котором укажите URL - адрес своего сайта и его название
Темы и ссылки на ваши сайты можно посмотреть ЗДЕСЬ

Урок 14. Язык разметки HTML. Логотип сайта

Язык HTML

Страницы сайта представляют собой гипертекстовые документы, при создании которых используется язык разметки HTML. Страницу на этом языке можно увидеть в режиме редактирования, выбрав режим просмотра HTML. Чтобы вернуться в обычный режим редактирования, щелкните по кнопке Создать.
Повторим основные теги HTML. 
В современном языке, в основном, используются парные теги, даже тег <br> стал парным. 
Конструктор сайтов Google скрывает от пользователя полную структуру HTML страницы. Вы видите только теги тела страницы. 
Знание языка позволяет автору корректировать страницу - изменять параметры тегов, добавлять теги и т.п. 
Конструктор сайтов Google предоставляет возможность использовать множество программ (гаджетов), созданных разными разработчиками, которые помогают делать сайт  динамичным, живописным и привлекательным.
Создание сайта с помощью конструктора описано в сообщении этого блога. Там же описаны свойства сайта, которые необходимо указать:
640-КИН-инф-11: Уроки 12-13. Разработка сайта. Планирование структуры тематического сайта.
Прежде, чем перейти к наполнению сайта содержанием, проверьте выполнение указанных требований.

Логотип сайта 

Логотип сайта - графическое изображение, которое помещается в заголовок сайта. Логотип украшает сайт и привлекает пользователя. 
Рассмотрим инструменты для создания логотипа сайта

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

Рисунки на странице сайта

Работа с графикой на языке HTML

Рисунки для веб - сайта хранятся на вер-серврах в виде отдельных файлов и подключаются к веб-странице с помощью тега <img>.  К рисункам относим иллюстрации и украшения, а также фон страницы.
Размеры изображений в байтах должны соответствовать содержательным размерам этих изображений (в пикселях или милиметрах), Размеры в байтах должны быть минимально возможными - 

• качество изображения сохраняется;
• размер изображения не нарушает стиль страницы.

Этот критерий назовем качеством изображения на сайте.

Скачайте презентацию и распакуйте ее.

Из этой презентации  (слайды 49-60) вы узнаете, какие форматы графических файлов можно вставлять на веб-страницу и как это делать, а также, как сделать красочный фон для страницы.

Включение отдельных изображений в конструкторе сайтов  

Рисунки на страницу сайта добавляются очень просто: Меню - Вставка - Изображение
Однако этот инструмент не позволяет настраивать параметры тега <img>, которые позволяют добиться соответствия качеству изображения на сайте. Вы можете выбрать только отображаемый размер картинки (всего 3 варианта), выравнивание и обтекание.  Для улучшения необходимо  корректировать страницу в режиме HTML.
Но размер картинки в байтах все равно останется неизменным. 

Фон страницы в конструкторе сайтов 

Фон, цвет и стиль символов можно выбрать, если перейти: 
Меню - Еще - Управление сайтом - Темы, цвета и шрифты
Выбирая значения параметров, предлагаемых конструктором, вы можете поменять фон, цвет отдельных элементов, стиль символов для всех страниц сайта.
Здесь можно определить собственную картинку для фона.

Выводы

Прежде чем графические изображения вставлять на страницу сайта, необходимо их подготовить с помощью графического редактора - кадрировать, установить разрешение, размер, качество.
Практическая работа и домашняя работа