четверг, 31 марта 2016 г.

Урок 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. В дальнейшем помещать в эту папку все изображения, которые вы хотите разместить на страницах вашего сайта

четверг, 17 марта 2016 г.

Урок 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 - адрес своего сайта и его название



среда, 2 марта 2016 г.

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


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