Урок 23. Списки и таблицы на страницах сайта

Списки

Список — форма представления объектов в виде перечисления элементов. Форматирование каждого элемента списка — одинаковое. Пример двухуровневого списка вы видите в Практической работесегодняшнего поста
Объектами списка могут быть тестовые абзацы, картинки и другие списки
В HTML список оформляются как контейнер (парный тег), включающий в себя по одному тегу для каждого элемента списка

Таблицы

Таблица  - форма представления информации в виде, удобном для анализа. Таблица состоит из строк, которые разделены на ячейки.  Внешний контур таблицы и ее частей  — прямоугольный.
Язык  HTML позволяет  управлять видом  таблицы в целом, а также каждой строки, ячейки.
В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей окна браузера, выравнивания элементов в окне, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.
Разметка таблиц
Парный тег: <table>  создает объект Таблица. Внутрь него помещаются строки – парный тег <tr>, а внутрь строки помещается нужное количество ячеек – парный тег <td>. В прямоугольной таблице число ячеек в каждой строке одинаковое. Ячейки и строки можно объединять.

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

1. Оформить в виде списка:
   
   
   • Перечень профессий на странице Профессии
   • Перечень ссылок на веб-страницы на странице Ссылки
2. Оформить в виде таблиц
   
   
   • Главная страница - таблица 2 х 1 (Изображение + текст). Ширина - 100%.
     Сегодня ввести текст и подпись изображения, само изображение добавить на следующем занятии
   • ВУЗы, где этому научат - таблица 2 х N строк , где в первой ячейке  название ВУЗа, которое является ссылкой, а во второй ячейке - изображение ВУЗа.
     Ширина - 100%. Сегодня ввести текст и подпись под фотографиями.
     Таких строк - N штук
   • Портфолио - таблица 2 х M строк , где в каждой ячейке  будет находиться изображение, сделанное автором сайта во время изучения GIMP, которое является ссылкой, Ширина - 100%. Сегодня ввести текст и подпись под изображениями. Таких строк - M штук. Про ссылки поговорим позднее
3. Подобрать иллюстрации к ВУЗам.  На локальном диске в своей папке по ИКТ создать папку web-img. Найти в сети фотографии соответствующих ВУЗов, сохранить в папке web-img
4. В дальнейшем помещать в эту папку все изображения, которые вы хотите разместить на страницах вашего сайта

Урок 22. Разработка веб-сайта в облачной среде

Что такое сайт

Сайт - это система электронных документов в компьютерной сети под общим адресом (доменным именем или IP-адресом). 
Первый в мире сайт info.cern.ch появился в 1991 году. Его создателем был Тим Бернерс-Ли

Ваша задача - построить свой самый первый Google - сайт. 

Тема сайта - "Перспективные профессии в одной из отраслей Российской экономики" 
Например,  "Перспективные профессии в медицине"
17.04.2015  Агентство стратегических инициатив выпустило обновленную версию Атласа новых профессий, продемонстрировав результат масштабных исследований с участием более 2,5 тыс экспертов. Поэтому и мы перечень отраслей и перечень профессий возьмем в Атласе новых профессий-2015  

A. Продумайте структуру и состав сайта

Что такое структура сайта?

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

1. Главная страница - характеристика выбранной отрасли экономики (текст + иллюстрация)
2. Профессии - список профессий и их краткая характеристика (список)
3. Вузы, в которых этому научат (таблица, ссылки, изображения)
4. Потенциальные работодатели (список или таблица, ссылки)
5. Ссылки на источники (список WEB-страниц)
6. Портфолио автора  (таблица с GIMP- рисунками)

В  тетради для контрольных работ  схематично  изобразите внутреннюю структуру сайта, дайте  URL   и название сайту и отдельным страницам в соответствии с выбранной темой 

1. URL сайта: 

• 640-10-свои-инициалы-techno,  (латинскими буквами)

• например: 640-10-AT-techno 

2. Название сайта -- придумайте сами

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

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

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

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

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

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

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

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

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

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

Урок 19. GIMP. Итоговая работа

В качестве итоговой работы создадим плакат, который хотелось бы повесить на стенку. В плакате объединим несколько изображений и красивый текст.
Завершенный плакат экспортируем в формат jpg.
В конце работы постарайтесь все созданные вами изображения в формате  jpg, gif, png перенести в вашу папку на облачном диске
Подготовка к работе
Практическая работа

Урок 18-19. Специальные шрифты. Фильтры

Термин «Антиквенный шрифт» в полиграфии обозначает семейство шрифтов, которые обладают общими графическими признаками: наличием серифов (засечек) в окончании штрихов и контрастом в толщинах вертикальных и горизонтальных линий, образующих графику знаков.

Рукописные формы антиквенного шрифта

В конце 14 столетия в Европе зародился новый стиль письма. Прогрессивно настроенные люди раннего Возрождения, гуманисты, изучали и пропагандировали наследие Древнего Рима и Греции. В своей корреспонденции они использовали не готический стиль письма, а копировали более ранние формы начертания букв, которыми были написаны древние рукописи. Отсюда и название шрифта – «антиква», то есть, древний.

Акцидентный набор - Изготовление наборных печатных форм для печатания бланков, аттестатов, грамот, пригласительных билетов, свидетельств, меню, различных объявлений.

Гротески, Гротесковые шрифты, Рубленые шрифты (Sans Serif, Gothic)

Собирательное название шрифтов без засечек. В Англии и Франции они чаще называются Sans Serif, в Америке Gothic, в Германии Grotesk. Первый известный гротеск появился в Англии в 1816 г. в образцах шрифтов лондонского словолитчика Уильяма Кэзлона IV (William Caslon IV, 1780–1869).

ФИЛЬТРЫ

По теории смотрим презентацию «Компьютерная графика и анимация». Часть I  (слайды 46 - 48)

Фильтры в GIMP – специальные процедуры обработки изображений, которые проводят с активным фрагментом (слоем, выделением) различные математические преобразования. В результате получается измененное изображение.Доступ к фильтрам: Меню — Фильтры. 

Фильтры разделены на группы, каждая из которых включает несколько процедур.

Практическая работа 1 - специальные шрифты

Практическая работа 2 - фильтры

Домашняя работа

Готовиться к контрольной работе .  Здесь вопросы для контрольной.

Урок 17. GIMP. Работа с текстом

Создание и редактирование текста

Смотрим презентацию К.Ю.Полякова 

К главе 8: «Компьютерная графика и анимация». Часть II (слайд 7)

Тезисы по теории

В графическом редакторе можно вводить текстовую надпись с помощью инструмента
Текст (А).
Текст появляется в виде отдельного слоя в диалоговом окне Слои. Этот слой помечен буквой Т.

К этому слою нельзя применить инструменты растрового рисования, т.к. шрифты являются одним из видов векторной графики. Зато текст на этом слое можно редактировать, а также применяются разные режимы освещенности, яркости, контрастности, прозрачность.

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

Диалоговая панель инструмента Текст позволяет устанавливать параметры текста: гарнитура, начертание, кегль, цвет. 

В GIMP можно использовать как имеющиеся в системе гарнитуры, так и семейства гарнитур Serif (для шрифтов с засечкам) и Sans (для шрифтов без засечек). Режим Антиалиасинг отвечает за сглаживание границ символов и его лучше включать. Чтобы закончить работу с текущим текстом, надо поставить птичку рядом с  «Использовать выбранный шрифт» и Закрыть окно.

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

Для преобразования текста в  графический вид используются инструменты графического преобразования — поворот, перемещение, градиент, фильтры... При этом текст теряет свойства текста и становится графическим объектом.

Если вы проводите операции на текстовом слое, и затем позже пытаетесь редактировать текст, возникнет всплывающее сообщение, предупреждающее о том, что изменения будут отменены, и вам будет предложено три варианта:

• создать новый текстовый слой с текстом существующего слоя, оставив существующий слой неизмененным.
• отмена;
• всё равно редактировать текст;

После того, как вы завершите редактировать текст, инструмент перерисует слой, удалив результат предыдущего действия.

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

Урок 16. Создание коллажа. Иллюстрации для WEB-сайтов

СОЗДАНИЕ КОЛЛАЖА

GIMP предоставляет инструмент для сохранения выделенной области как канал. Для одного изображения можно сохранить несколько выделенных областей.
Благодаря этому появляется возможность использовать сохраненные в каналах фрагменты для создания и редактирования нового изображения.
Таким образом можно создать, например, коллаж из разных фрагментов.

ИЛЛЮСТРАЦИИ ДЛЯ ВЕБ-САЙТОВ

Смотрим презентацию К.Ю.Полякова «Компьютерная графика и анимация». Часть II

Иллюстрации для веб-сайтов должны быть сохранены только в тех форматах, которые умеют отображать браузеры (слайд 16).
Эти форматы предназначены для однослойных изображений. Поэтому все слои приходится сводить в один слой.
В перечисленных форматах используется сжатие данных. Если увеличивать степень сжатия, то качество изображения ухудшается, и наоборот (слайды 17 -22).
Форматы GIF и PNG плохо подходят для хранения изображения с плавными переходами цветов (градиентами). Поэтому для хранения фотографий желательно использовать формат JPG 

В Конструкторе сайтов Google для установки иллюстраций на веб-страницу в режиме редактирования используем кнопку "Вставить изображение".
Практическая работа 1 
Практическая работа 2

Урок 15. Каналы. Сохранение выделенной области в канале

По теории смотрим презентацию «Компьютерная графика и анимация». Часть II слайды со 2 по 14.

МНОГОСЛОЙНЫЕ ИЗОБРАЖЕНИЯ

Зачем нужны слои? Слои помогают человеку избежать необратимых изменений в сложном изображении. Каждый содержательный с точки зрения человека объект рисуется на отдельном слое (слайд 3).
Каждый слой можно изменять и перемещать независимо от других. Однако, если смотреть на топку слоев сверху, то увидим полный рисунок.
Для управления слоями предназначено диалоговое окно Слои.
Структура диалогового окна Слои (слайд 4).
Список Режим определяет, как текущий слой влияет на изображение, полученное с нижних слоев (слайд 5).
Операции со слоями (слайд 6).
Текстовый слой создается при использовании инструмента Текст (слайд 7). этот слой существует в векторном формате, но может быть преобразован в растровое изображение.
Маска слоя позволяет сделать часть изображения на слое невидимой или полупрозрачной, ничего не удаляя (слайд 8-9).

КАНАЛЫ

Канал - инструмент, с помощью которого показывается совокупность точек изображения с одинаковым эффектом. Каждый канал имеет тот же размер, что и все изображение. Смысл этого понятия зависит от типа канала.
Например, в цветовой модели RGB значение канала R означает количество красного цвета, добавляемого к другим цветам пикселей. Здесь канал — совокупность точек указанного цвета в изображении.
Цветовые каналы применяются ко всему изображению, а не к отдельному слою. Есть основные каналы — красный, зеленый и голубой. Можно создавать свои каналы. (слайды 11-13)
Маска выделения. При выделении вы видите "муравьиную дорожку", которая вычерчивает его контур, который разделяет выделение и маску (закрытую область). Маска — это канал в градациях серого, покрывающий изображение.
Для управления каналами используется окно Диалог каналов (слайд 11).
Выделенную область можно сохранить с помощью Диалога каналов (слайд 14).

Каналы используются в двух целях, поэтому диалог каналов разделён на две части: первая часть для цветовых каналов и вторая для масок выделения.

ПРАКТИЧЕСКАЯ РАБОТА