СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Подборка содержит 8 презентаций, комментарии, поурочное описание действий и задания для учащихся к каждому уроку. Она позволит учителям и учащимся пошагово разобраться в начальных основах темы "Создание web-сайта".
Разработка Д.Тарасова
Тема: «Основы веб-конструирования»
Урок№1. Основные понятия HTML. Представление о структуре HTML-документа.
Цели:
Образовательные:
Сформировать первоначальные представления об основных понятиях HTML. Представление о структуре HTML-документа
Развивающие:
умения анализировать, сравнивать, систематизировать и обобщать;
интерес к учению, стремление к расширению кругозора;
Воспитательные:
бережное отношение к имуществу, ВТ и учебным пособиям;
дисциплинированность, любознательность.
Ход урока:
Организационный момент.
Объяснение нового материала:
Что такое HTML, где используется этот язык, рассказывается о вебсайтах и программах для отображения html-кодов - браузерах. Наглядно показано как браузер преобразует html код, для предоставления материалов в удобном для чтения виде.
Подобно разбирается и дается под запись структура html-страницы. Каждая html страница начинается тегом начала html страницы и заканчивается тегом её закрытия .
HTML страница состоит из двух частей:
Невидимой части (… ) – в ней расположены заголовок, метатеги, скрипты, подключение стилей.
Видимая часть (…
ОСНОВНЫЕ ТЭГИ HTML
Основные теги | ||||||||||
| Указывает программе просмотра страниц что это HTML документ. | |||||||||
| Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. | |||||||||
Создание Web-сайта 2 способа: С использованием конструктора Ручной В чем причина возникновения интереса к интернет-ресурсам? Существуют порталы, которые предоставляют возможность использования их ресурсов для помещения страниц пользователей. Они могут работать в режиме конструктора, также принимать готовые разработки для автоматического отображения их на своем портале. По уровню персонификации сайты классифицируются: ЭТАПЫ СОЗДАНИЯ САЙТА: 4 Этапы создания сайта: Анализ и проектирование сайта. Анализ аналогичных сайтов с выделением сильных и слабых их сторон. Сайт проектируется исходя из интересов предполагаемой аудитории. Этапы создания сайта: Информационное наполнение сайта (контент). Привлекает потенциальных пользователей. Информация должна быть интересна для целевой аудитории и качественно оформлена. Этапы создания сайта: Креатив. Включает разработку дизайна, графических элементов, обработку графики и все, что с ней связано.Разработка всегда осуществляется на бумажном носителе, чтобы определить лучший вариант расположения типовых элементов. Т.к. страницы оформляются в едином стиле, то создается шаблон. Этапы создания сайта: Написание кода. Создание Web-страниц, программирование, написание функциональной части. Этапы создания сайта: Тестирование. Проверяется удобство навигации, целостность данных, корректность ссылок и орфография: 1) альфа-версия – ошибки проверяют сами разработчики; 2) бета-версия – проверяют другие люди. Этапы создания сайта: Публикация. Сайт размещается в Интернете. Можно воспользоваться бесплатным хостингом www.narod.ru , www.boom.ru , либо разместить сайт у провайдера. Этапы создания сайта: Раскрутка. Рекламная компания по узнаванию сайта и повышению его посещаемости – регистрация сайта в поисковых системах, обмен ссылками и.т.д. Этапы создания сайта: Поддержка. Постоянное обновление сайта. (не реже 1 раза в 2 недели). Практическая работа 4 Автоматические редакторы Web-страниц 4 Для создания титульной Web-страницы сайта используется привычный и достаточно удобный для этих целей текстовый редактор Блокнот. Тэги Web-страницы Видимая и невидимая части HTML страницы 4 невидимая часть HTML страницы видимая часть HTML страницы заготовка Конкретная заготовка Удалим текст невидимой части (ее все равно не будет видно) Сохранение Web-страницы Сохраним страницу под каким-либо именем в конкретной папке Задаем обязательно расширение html Проверим отображение документа в разных браузерах Практическая работа В окне приложения Блокнот ввести HTML-код Web-страницы. (код может быть другим) Сохранить файл под именем index.htm в папке сайта. (имя можно выбрать другое и расширение тоже) Загрузить этот файл в окно браузера для просмотра. 4 Работа со списками. Урок 3. Работа со списками. Проверка домашнего задания Проверка домашнего задания: Используем тэги: Варианты списков: Тэги работы со списками Контейнер примеры: Код, задающий список: Создание вложенного ненумерованного списка для одного из элементов основного списка: Код, задающий вложенный список для элемента Словарь компьютерных терминов Код, задающий список определений: Практическое задание: Дополнительный тест: Работа с текстом. Урок 4. Работа с текстом. Проверка домашнего задания Проверка домашнего задания: Работа с текстом. Каждому тэгу можно прописать атрибуты. Атрибут состоит из 2-х частей: название атрибута и его значение: В тэге может быть несколько атрибутов Сделаем заготовку: … Изменение начертания текста Внесем изменения: Сохранить обновить Форматирование текста: стиль, размер, цвет Внесем изменения (заготовка): Пропишем этот стиль: Сохранить обновить стиль CSS . Создайте файл с расширением style.css Практическое задание: Упражнение к уроку 4 Работа с изображениями и логическими тэгами. Урок 5. Работа с изображениями и логическими тэгами. Проверка домашнего задания Создать папку например «сайт. Фамилия». Что уже есть: Код этой страницы: Куда вставить рисунок? Вставим в центре… Тэг для вставки изображения: Оформление изображения: Расположение изображения: Обтекание рисунка текстом: Размеры рисунка: Видимо, в этом случае придется изменять атрибуты тэга img hspace с 15 на 30-40 пикселей….. практическое задание: Упражнение к уроку 5: Гиперссылки – фундамент гипертекста 1. Основные элементы синтаксиса html. 2. Пример создания гиперссылки. 3. Синтаксис написания гиперссылок. 4. Связывание гиперссылками несколько страниц. 5. Относительная и абсолютная гиперссылка. 6. Именованный якорь для переходов внутри страницы или в конкретную часть какой либо страницы. 7. Ссылка mailto Каждая страница содержит следующий код: В качестве гиперссылок в электронном тексте могут выступать: Синтаксис написания гиперссылок Закрытие тэга Текст ссылки Конкретный адрес гиперссылки Тэг гиперссылки Атрибут гиперссылки (адрес, куда приведет ссылка) Т.к. не указан url – адрес, по ссылке никуда перейти невозможно 2 вида гиперссылок ЗАМЕЧАНИЕ К АБСОЛЮТНОЙ ССЫЛКЕ Практическое задание Практическое задание Пример сайта Как сделать разбивку на отдельные окна? Способ 1: Использование фреймов. Фреймы используются для разбивки окна браузера на несколько независимых частей. Каждая из этих частей представляет собой отдельный HTML – документ. Недостатки способа 1: Для позиционирования отдельных блоков на сайте часто используют таблицы В данной таблице 3 строки по 2 ячейки Толщина таблицы: Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо (сжимаются) Впишем что-то другое: table Тэг таблицы tr Тэг строки таблицы td Тэг ячейки Получим готовую таблицу: Укрупнение таблицы: Выравнивание по центру: Сама таблица встала в середину. Работа внутри ячеек Просто текст, состоящий из нескольких абзацев. Не очень красиво будет, если текст начнется с середины строки. Навигация по сайту – несколько строк Чтобы задать вертикальное выравнивание в таблице есть специальный тэг valign= “…” Тэгу valign можно задать следующие значения: top - выравнивание по верху ; bottom – выравнивание по низу ; middle – выравнивание по середине . Отступы… Еще несколько моментов…. Упражнение к уроку 7: Тег table Описание tr Определяет таблицу Определяет строку таблицы td Определяет ячейку таблицы Навигация. Разработка своего сайта и его сохранение. Сегодня… Шапка - рисунок Навигация навигация заголовок текст текст текст текст текст заголовок навигация навигация текст текст текст текст текст текст текст Заголовок навигация текст текст текст текст текст Перед созданием сайта: Что понадобится… 1. Объединить ячейки. 2. Расширить таблицу до 900 пикселей. Ширина 200 пикселей. Ширина 700 пикселей. 3. Добавить вторую строку. ↓ Вставка «шапки» «Бортики» вокруг картинки – «не айс»! Еще несколько штрихов… Навигация Навигация Шкала электромагнитных волн . Длины электромагнитных волн …. Данный текстовой документ необходимо сохранить 6 раз с названиями видов излучений: радиоволны.html, инфракрасное излучение.html, видимое излучение.html, ультрафиолетовое излучение.html, рентгеновские лучи.html, гамма-излучение.html В папке: Открываем каждый как блокнот и исправляем текст на соответствующий Осталось сделать саму навигацию: Прописываем ссылки с помощью тэга Но, имея такую навигацию, можно перейти к различным видам волн только с главной страницы. Каждый раз придется возвращаться на главную с помощью стрелки. Есть выход: Усовершенствование навигации: Скопировать блок с навигацией (гиперссылками) в основном документе и вставить его в оставшиеся 6. Результат: Практическое задание :
|