Урок 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 - адрес своего сайта и его название
Ссылки на ваши сайты находятся здесь.

Урок 20-21. GIMP. Итоговая работа

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

Не забудьте про контрольную!

Ребята! Напоминаем, 3.03.16 - контрольная работа по GIMP. Для подготовки посмотрите еще раз уроки с 11 по 18.  Здесь задачи и вопросы для контрольной.

Урок 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