7


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

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

Автор публикации:
Дата публикации:
Краткое описание:
предварительный просмотр материала

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


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

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


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


Ход урока

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

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


1 этап урока.

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

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

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

  • В языке HTML и веб-дизайне фрейм - часть окна браузера для представления отдельной веб-страницы. Более сложное и расширенное представление этого понятия

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




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



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




Рисунок 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 этап урока.


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


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



 
 
X

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

После этого кнопка ЗАГРУЗКИ станет активной!

Кнопки рекомендации:

загрузить материал