Скачать hefs.exe
____________________________________________________________
Тема урока: МУЛЬТИМЕДИА
НА WEB-СТРАНИЦАХ
Тема урока: Создание фрагментов сайтов по различным предметным областям. Публикация сайта
Цель урока: Закрепить основные умения и навыки по созданию сайта.
- Учебная задача 1: Защита проекта по одной из выбранных тобой тем:
- Весёлый зоопарк.
- Природа родного края.
- Мой класс.
- Мои увлечения.
- Учебная задача 2: Защита проекта по одной из выбранных тобой тем: "История Беларуси", "Театры Беларуси", "Природа Беларуси". "Молодёжь Беларуси".
- Дополнительный материал: Защита проекта "Архитектура родного края". Созданный проект вышли учителю на проверку.
- Домашнее задание:
- Оцени себя. Будь честен перед собой.
- Удачных тебе каникул и поступления!!!
Тема урока: Создание веб-сайта
Цель урока: Разработать и создать веб-сайт с удобной навигацией
Ход урока:
1) Вы уже научились многому. Пришло время проявить свои знания.
В Беларуси много красивых мест. Одними из самых красивых достопримечательностей являются замки.
2) Вам предлагается из материалов папки (https://drive.google.com/open?id=1siJw-6da8vQf8CqiZKfO3DQp0HKtaJ0K) создать сайт из 5 страниц, которые вы между собой объедините при помощи гиперссылок. Подробнее о виде страниц вы можете найти информацию в вашем учебнике §6, стр. 62 – 63.
3) Выполнить упр. (стр. 62-63), файлы в папке «Замки Беларуси» прилагаются.
Примечание: рисунки для главной страницы, где будут изображения всех 4 замков в названии имеют окончание 2s.
Домашнее задание: файлы сайта упаковать в архив и отправить на проверку учителю.
3) Выполнить упр. (стр. 62-63), файлы в папке «Замки Беларуси» прилагаются.
Примечание: рисунки для главной страницы, где будут изображения всех 4 замков в названии имеют окончание 2s.
Домашнее задание: файлы сайта упаковать в архив и отправить на проверку учителю.
___________________________________________________
Тема урока: МУЛЬТИМЕДИА
НА WEB-СТРАНИЦАХ
Цель
урока: знать, какие
мультимедийные элементы может содержать web- страница, изучить теги, для
вставки мультимедийных элементов на web- страницу, научиться использовать эти
теги для вставки мультимедийных элементы на web- страницу.
Ход урока:
Вы можете разнообразить и
оживить контент вашей веб-странички при помощи элементов мультимедиа, которые
воспринимаются человеком охотнее и быстрее, чем текстовая информация.
Это может быть графическое
изображение (вставка графической информации нами уже была пройдена на прошлых
уроках), анимация, звук и видео.
Вот и поговорим на
сегодняшнем уроке об этих возможностях.
Сначала просмотрите
презентацию с кратким содержанием сегодняшней темы: http://www.myshared.ru/slide/1350526/
Что касается звука и видео,
то очень хороший подбор учебного материала приведён здесь:
Кратко конспект о вставке звука и видео:
Звуковые эффекты на Web-страницах создаются с помощью
аудио-файлов. Наиболее распространены следующие форматы:
Wav – стандартный формат
Windows-приложений.
Midi – этот формат
содержит запись нот и коды музыкальных инструментов по которым синтезируется
звук.
MP3 – этот формат
отличается высокой степенью сжатия.
Звук на страницах часто используется для озвучивания
событий – нажатия кнопки, перехода по гиперссылке, открытия окна. Часто
страницы сопровождаются звуковым фоном.
Для подключения звукозаписи в фоновом режиме
используется тег
<BGSOUND /> со
следующими атрибутами:
src – задает URL-адрес
звукового файла;
loop – определяет
количество повторений файла;
volume – уровень звука.
Может принимать значения от –10000 до 0. Т.е. звук можно только приглушать.
Значение 0 – максимальный уровень звука.
В страницу можно «встроить» аудиоплейер с помощью тега
<EMBED /> c атрибутами:
src – URL-адрес звукового
файла
width, height – размеры
панели управления проигрывателя (в пикселях или процентах от полного размера)
autostart – может принимать два
значения:
true – начало
воспроизведения сразу после загрузки страницы,
false – включение звука
пользователем.
На Web-страницах можно размещать видеофайлы следующих
форматов:
MPEG – имеет расширение
.mpg или .mpeg. Файлы этого формата обычно имеют большой размер и обеспечивают
высокое качество цифрового видео.
AVI – имеет расширение
.avi и применяется в ОС Windows для хранения аудио- и видео- файлов.
QuickTime – имеет расширение
.mov и не требует длительной загрузки по сети.
Для вставки видеофайлов можно воспользоваться тегом
<EMBED /> c атрибутом
src= URL-адрес видеофайла.
Или воспользоваться тегом
<IMG /> c атрибутом:
dynsrc=URL - адрес видеофайла;
Для вставки с youtube:
- <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Домашнее
задание: Создайте веб-страничку о вашем любимом
певце/певице/группе/музыкальном направлении со вставкой изображения, звукового
файла и видео. Наверху ссылка на crfxre hefs, кто привык работать в нём.
________________________________________________________________
Тема урока: Изображения на веб-страницах.
Подготовка изображений для Интернета.
Цель урока: Знать возможности и
уметь находить программы и онлайн-сервисы для обработки изображений на веб-страницы. Знать основные типы файлов для размещения на веб-страницах.
Ход урока:
Важную роль в оформлении веб-страниц
играют графические объекты:
фотографии,
рисунки,
фоновые изображения («обои»),
разделительные линии.
Они делают страницы более привлекательными,
а во многих случаях являются и основными источниками информации.
Предназначенные для веб-страниц изображения
можно создавать и редактировать в различных графических редакторах. Они могут быть
получены с помощью цифрового фотоаппарата, сканера или взяты из сети Интернет. Наиболее
предпочтительны графические форматы GIF, JPG и PNG, файлы которых имеют небольшие
размеры, что позволяет ускорить процесс загрузки. В формате JPG сохраняют полутоновые
изображения, например фотографии. Формат GIF поддерживает анимацию и прозрачный
цвет.
Графический формат WebP (2010 год)
– это новый формат, который обеспечивает без потерь и c потерями качества
сжатие для изображений в Интернете. Компания Google специально разработала
данный формат, чтобы сделать работу в Интернете максимально удобной и быстрой.
Основным преимуществом является то, что файлы имеют меньший размер, чем другие
графические форматы, аналогичные по качеству изображения.
Важно подчеркнуть, что все изображения,
которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML-коде имеются
лишь ссылки на них.
Мы с вами уже прошли тег для
работы с рисунками <img>, а также
атрибуты этого тэга.
Из бесплатных программ можно
посоветовать Paint.Net. Здесь есть множество возможностей, которые упростят
работу с
различными изображениями. При сохранении рисунка вы можете выбрать формат его
файла и качество изображения.
Есть автокоррекция изображения,
создание слоёв и др.
Для обработки изображений
рассмотрим онлайн-сервис imgonline.com.ua/
Часто приходится сталкиваться с
ситуацией, когда сфотографированное изображение выходит на печать очень тёмным,
почти чёрным, хотя изображение на фото таким не выглядит. Данный сервис
помогает решить эту проблему.
1)
Перейдите
в меню Улучшить. Выберите Улучшить отсканированный текст.
Перетащите на кнопку «Выберите файл» или с помощью этой кнопки выберите файл на
вашем устройстве. Внизу нажмите Ок, не меняя никаких параметров. Скачайте
полученный файл.
2)
В
меню Улучшить выберите Резкость,
нарезная маска.Снова загрузите (только последний файл, который
скачали). Скачайте новый файл. Попробуйте теперь вывести его на печать.
Почувствуйте разницу!
Да
и на странице Интернета опубликованный Вами качественный файл порадует ваших
пользователей.
Если
вам нужно в блоге, статье, новости и т.п. показать что было на вашем экране
устройства, то на компьютерах есть специальная кнопка
Print
Screen. Эта кнопка помогает Вам «сфотографировать» весь экран. После чего можно
это «фото» уже обрезать и подготовить к публикации на странице. Есть еще одна
хитрость. Для скриншота только маленького окна или рабочего окна используют
комбинацию клавиш Alt + PrintScreen.
Домашнее
задание:
параграф 3.2 с.24 – 29, параграф 4
с.35-41. Подготовить небольшую веб-страницу с изображением и стихотворением на
ней по образцу или свой вариант (обои для страниц, изображения найти самостоятельно). По желанию в качестве эксперимента: сфотографировать текст книги, попробовать распечатать полученное фото; улучшить его согласно описанию выше на онлайн-сервисе, попробовать распечатать снова. Сравнить результаты!
Цель урока: Научиться создавать таблицы на веб-страницах с помощью языка гипертекстовой разметки HTML
1. Повторите по конспекту, какие теги относятся к шаблону HTML-документа. За что они отвечают? Смотри ссылку: https://drive.google.com/open?id=1v6epK8ZxY2vaWho-IijCKGXEVBhVe69T
2. Какие теги мы уже прошли? Пролистайте конспект или просмотрите документ по ссылке, чтобы найти знакомые теги и повторить их. Возможно вас заинтересуют и те теги, которые мы еще не проходили. https://drive.google.com/open?id=1P1PdJsDGaWWw7pWWRXG2mXXawGMaLkhD
3. Для создания таблиц на веб-страничках, используют парный тег <table> </table>/
Таблица в общем случае заполняется по строкам с помощью тега <tr> </tr> (от англ. table raw - табличная строка).
Внутри этого тега прописываются теги ячеек с данными (<td> </td>) от англ. "table date". Этих ячеек должно быть столько, сколько столбцов в таблице, если только какие-то ячейки не объединяются. Но об этом позже.
Полное и подробное описание создания таблиц и используемых тегов есть на сайте:
https://yandex.by/turbo?text=https%3A%2F%2Fwww.internet-technologies.ru%2Farticles%2Fsozdanie-tablicy-v-html.html
Содержание
ЧИТАТЬ ТОЛЬКО ВЫВЕДЕННЫЕ ВЫШЕ РАЗДЕЛЫ. Текста вроде как много, особенно с тегами, но увидите, что воспринимается он очень быстро, так как очень удобно размещён для быстрого понимания.
Практическая часть
Вам нужно создать таблицу с рамками, в которой вы создадите четыре строки и два столбца.
По ссылке:
вы найдёте три рисунка с фигурами (ромб, прямоугольник и квадрат), есть еще файлы для оформления фона таблицы (по желанию, кто знает как это сделать).
В первой строке таблицы - заголовки столбцов - ФИГУРЫ и ОПИСАНИЕ.
Следующие три строки в первой ячейке должны содержать рисунок фигуры, а в ячейке справа - описание этой фигуры (всё, что вы можете о ней сказать).
Выполнять задание можно в онлайн сервисе с автопроверкой, который мы смотрели на последнем уроке:https://codepen.io/pen/
В первое окно вносите ТОЛЬКО теги таблицы, шаблон не надо.
(Кто очень хочет всё-таки через шаблон, то он создаётся очень быстро: Наберите восклицательный знак (Shift + 1) и нажмите на клавиатуре кнопку "TAB" - проверено - РАБОТАЕТ!!! Ваш код с таблицей вносим между парным тегом ,<body> </body>).
Если получилось то, что вы планировали, можно отправить учителю скриншот кода или скопировать и отправить сам код (на ваш выбор).
(Кто очень хочет всё-таки через шаблон, то он создаётся очень быстро: Наберите восклицательный знак (Shift + 1) и нажмите на клавиатуре кнопку "TAB" - проверено - РАБОТАЕТ!!! Ваш код с таблицей вносим между парным тегом ,<body> </body>).
Если получилось то, что вы планировали, можно отправить учителю скриншот кода или скопировать и отправить сам код (на ваш выбор).
Если сразу не получается, ещё раз обратитесь к сайту с теорией. Можно из него скопировать готовые коды и проверить в онлайн редакторе их действие.
Дополнительное задание:
Тем, кому задание показалось совсем простым, предлагается выполнить табличку такого вида:
Дополнительное задание тоже можно отправить учителю.
Рефлексия:
- Что именно сегодня получилось лучше всего?
- Какие возможности вас заинтересовали в использовании таблиц?
- Подумайте, как можно использовать таблицы при разметке страницы сайта, чтобы красиво расположить информацию на страничке (не проводя границ ячеек).
Домашнее задание: повторить основные теги создания таблиц, отправить коды или скриншоты учителю.
Комментариев нет:
Отправить комментарий