Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Создание фреймовой структуры документа на языке HTML
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

Создание фреймовой структуры документа на языке HTML

библиотека
материалов

Урок «Создание фреймовой структуры документа на языке HTML


Тип урока: комбинированный. Эвристическая беседа, изучение нового материала, практикум.

Цель урока: научиться создавать фреймы, правильно структурировать станицу, закрепить знания, отработать навыки.


Оборудование: маркерная доска, ученические ПК, мультимедийный проектор.


Ход урока

Объявление цели урока:

Сегодня мы научимся создавать фреймы — формировать фреймовую структуру документа. Как мы говорили ранее на уроках, наша задача состоит в том, чтобы научиться «мыслить как браузер». То есть распознавать разметку содержимого страницы с помощью тэгов.


1 этап урока.

Мы часто «бродим» по просторам Интернета, но, наверное, почти не обращаем внимание на расположение данных на различных страницах, которые открываем. Но замечаем изменения. Например, в социальных сетях часто происходят обновления и изменения, мы замечаем, что привычные области (например, блок авторизации или новостной) «переходят» на новое место. Некоторое время занимает привыкание к новому виду. Примерно такая картина соответствует фреймовой структуре документа: окна, блоки, зоны, области — для отображения контента.

  • Фрейм (англ. frame — кадр, рамка) — в общем случае, отдельная область, отображаемая на мониторе, содержащая некоторую информацию.

  • Синонимы слова фрейм - встроенная рамка, динамическая область, управляемая область и т.д.

  • В языке HTML и веб-дизайне фрейм - часть окна браузера для представления отдельной веб-страницы. Более сложное и расширенное представление этого понятия http://ru.wikipedia.org/wiki/%D4%F0%E5%E9%EC_(%E8%ED%E6%E5%ED%E5%F0%E8%FF_%E7%ED%E0%ED%E8%E9)

Проекция рисунка на экране: Часто ли вы встречали такое расположение основных фреймов на сайтах?


hello_html_m16975d33.pnghello_html_m7f366cff.png




Изучение рисунков на доске.


Полилиния 4Полилиния 3







Рисунок 1 Рисунок 2


Полилиния 5Полилиния 6










Рисунок 3 Рисунок 4


Анализируем рисунок1.


А часто ли вы встречали такое расположение основных фреймов на сайтах?


- Да. В левом фрейме хорошо разместить меню, посередине — контент, справа - ??? Возможны варианты, например, лента новостей. А где же заголовок с логотипом поместить?

Анализируем рисунок 2. Горизонтальное расположение фреймов. Удобно ли? Что бы вы разместили в фреймах (обсуждение с учащимися различных вариантов).

Наиболее распространены следующие схемы фреймовой структуры (рисунки 2 и 3). Чем они удобны?

  • Ученики вместе с учителем анализируют варианты размещения материала на странице.


2 этап урока. Создание фреймовой структуры.


Наша задача создать фреймовую структуру. Сначала выберем варинт из рисунков 1 или 2.

Начнем с первого.

Объяснение материала.

      1. Создаем рабочем каталоге следующие HTML-странички: frame.html, 1.html (будет соответствовать фрейму с логотипом и заголовком), 2. html (фрейм, содержащий меню), 3.html (фрейм с основным содержимым сайта).

      2. Пишем код для странички frame.html для создания горизонтальной структуры фреймов.


страничка с фреймами

<frameset rows=100, *, 100> - (фреймы размещены по строкам, размерность в пикселях, * - оставшаяся часть)


Вопрос к учащимся на сообразительность. - Что можно минимально изменить в данном коде, чтобы структура фреймов стала вертикальной? ( ответ: нужно внести изменение в строку №5 ).


3 этап урока.

На данном этапе мы изменим код нашей фреймовой странички так, чтобы он принял вид рисунка 3.


страничка с фреймами

<frameset rows=100, *> - (фреймы размещены по строкам, размерность в пикселях, * - оставшаяся часть)

<frame src=1.html>

<frameset cols=150, *> - (здесь снова разбиение, но по столбцам, 150 пикселей и оставшаяся часть слева - направо)

frameset>

html>

Для создания структуры из рисунка 4, нужно лишь изменить размерность в строке: <frameset cols= *, 100>


Дополнение.

Внимательно посмотрим на результат. Между фремами по умолчанию существует граница. Ее можно убрать параметром border=0 (размер в пикселях, но можно и задать еще больший), граница может перетаскиваться, нас это не устраивает? Можем запретить с помощью прараметра noresize, по умолчанию полоса прокрутки во фремах появляется автоматически, по мере наполнения содержимым. Мы можем контролировать этот процесс параметром scrolling=no (yes, auto).



4 этап урока. Практикум.


Задания для закрепления:

  1. Создать страничку с фреймовой структурой (рисунки 3 или 4 по выбору).

  2. Заполнение фреймов. В логотип странички необходимо вставить картинку в качестве фона.

  3. В меню страницы написать следующие пункты будущего меню (в столбик): главная, ссылки, фотографии, контакты.

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

  5. Примените элементы из дополнения.


5 этап урока.


Оценивание учащихся.


На данном уроке как никогда более важен дифференцированный подход к обучающимся в процессе изучения материала. Нет однозначных критериев, все зависит от интеллектуальных способностей детей, от степени их старания, от терпения и вдумчивости. В любом случае, оценки предполагаются только положительные. Это создает мотивацию в обучении, а также формирует ситуацию успешности на уроках!





Автор
Дата добавления 08.10.2015
Раздел Информатика
Подраздел Конспекты
Просмотров445
Номер материала ДВ-041679
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

Похожие материалы

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