Инфоурок Информатика Другие методич. материалыМетодические указания Применение тегов HTML при создании WEB-страниц: использование фреймов

Методические указания Применение тегов HTML при создании WEB-страниц: использование фреймов

Скачать материал

Эмблема OKTS

МИНИСТЕРСТВО ОБРАЗОВАНИЯ ОМСКОЙ ОБЛАСТИ

БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ОМСКОЙ ОБЛАСТИ

«Омский колледж транспортного строительства»

 

 

 

Рачкова Н. В.

 

 

ПРИМЕНЕНИЕ ТЕГОВ HTML ПРИ СОЗДАНИИ WEB-СТРАНИЦ:

ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ

 

Методические указания

по выполнению практической работы

 

7

 

 

 

 

Омск 2023


 

 

 

 

 

 

Рачкова Н. В. Применение тегов HTML при создании WEB-страниц: использование фреймов: Методические указания по выполнению практической работы: Омск,  2023. – 19 с. 

 

 

 

 

 

 

 

 

 

В методических указаниях содержится описание выполнения практической работы «Применение тегов HTML при создании WEB-страниц: использование фреймов» тема, которой соответствует одной из тем практических работ рабочей программы МДК 08.01 «Проектирование и разработка интерфейсов пользователя» раздела «Основы web-технологий».

Целью методических указаний является оказание помощи при изучении принципов использования фреймовой структуры при разработке web-сайтов с помощью языка разметки HTML.

Предназначены для студентов очной и заочной форм обучения, преподавателей, а также для желающих самостоятельно освоить язык разметки HTML.




 

ВВЕДЕНИЕ

 

МДК. 08.01 «Проектирование и разработка интерфейсов пользователя» предназначен для формирования знаний и умений в области программирования web-сайтов, необходимые для будущей трудовой деятельности выпускников колледжа.

Методические указания содержат описание практической работы, состав и содержание которых направлены для реализации Государственных требований к минимуму содержания и уровню подготовки выпускников по специальности 09.02.07  «Информационные системы и программирование» в соответствии с ФГОС, перечень работ соответствует рабочая программа профессионального модуля «ПМ08. Разработка дизайна веб-приложений».

Основными целями и задачами практической работы являются:

-       формирование умений:

·        выбирать наиболее подходящее для целевого рынка дизайнерское решение;

·        разрабатывать интерфейс пользователя для веб-приложений с использованием современных стандартов;

-       приобретать знания:

·        современные методики разработки графического интерфейса;

·        государственные стандарты и требования к разработке дизайна веб-приложений;

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

-       развитие при решении поставленных задач таких профессионально значимых качеств, как самостоятельность, ответственность, точность, творческая инициатива.

При выполнении практической работы студенты овладевают профессиональными умениями и навыками в сфере web-разработки, которые в дальнейшем совершенствуются при изучении смежных МДК по выбранной специальности, и в процессе курсового и дипломного проектирования.

В ходе изучения МДК 08.01 «Проектирование и разработка интерфейсов пользователя» осуществляется связь дисциплинами «Информационные технологии», «Основы алгоритмизации и программирования», МДК 08.02 «Графический дизайн и мультимедиа», МДК 09.01 «Проектирование и разработка веб-приложений», курсовым и дипломным проектированием.

Выполнение практической работы непосредственно связано с изучением тем и разделов данного междисциплинарного комплекса.

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

При выполнении практической работы используется частично-поисковый метод.

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


 

Практическая работа

Специальность: 09.02.07 Информационные системы и программирование

Название МДК: МДК 08.01 «Проектирование и разработка интерфейсов пользователя»

Раздел программы: Основы web-технологий

Тема: Применение тегов HTML при создании web-страниц: использование фреймов

Планируемые результаты:

ПК 1.4. Разрабатывать дизайн-концепции веб-приложений в соответствии с корпоративным стилем заказчика

ОК 2. Осуществлять поиск, анализ и интерпретацию информации, необходимой для выполнения задач профессиональной деятельности.

-   способен самостоятельно определять перечень необходимых параметров элементов, которые используются при создании фреймовой структуры во время верстки web-страниц  

ОК 9. Использовать информационные технологии в профессиональной деятельности.

-   способен применять теги языка разметки HTML при выполнении верстки web-страниц

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

Задачи:

1) определить понятие фрейма;

2) изучить теги для создания фреймовой структуры, которые применяются в языке разметки HTML;

3) использовать теги для разработки фреймовой структуры при выполнении верстки web-страниц;

4) разработать web-сайт с применением фреймовой структуры;

 

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

1.   Немцова, Т. И. Компьютерная графика и web-дизайн : учебное пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ФОРУМ : ИНФРА-М, 2023. — 400 с.

2.   Малышева, Е.Н. Web-технологии : учеб. пособие для обучающихся по направлениям подготовки 51.03.06 «Библиотечно-информационная деятельность», 46.03.20 «Документоведение и архивоведение», квалификация (степень) выпускника «бакалавр» / Е.Н. Малышева. - Кемерово: Кемеров. гос. ин-т культуры, 2018. - 116 с. - ISBN 978-5-8154-0449-6. - Текст: электронный. - URL: https://znanium.com/catalog/product/1041185. – Режим доступа: по подписке.

 

Оборудование и материалы: ПК, раздаточный материал (методические материалы, лист оценки)

 


 

Теоретические сведения

Фреймы — это HTML-элементы, позволяющие разделить окно Web-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация.

Применение фреймов позволяет «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.

Как и в обычном HTML-документе, весь код помещен между парными тегами <html> и </html>, а в контейнере <head> располагаются заголовки.

Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега <body> применяется парный тег <frameset> (от англ. frame set – набор фреймов).

При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.

Синтаксис фреймовой структуры:

<frameset>

         <frame>

         <frame>

</frameset>

Атрибуты тега <frameset>:

1.   Rows — описывает разбиение страницы на строки: <frameset rows="100, *"> (окно браузера разбивается на два горизонтальных окна, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки)

2.   cols — описывает разбиение страницы на столбцы: <frameset cols="20%, 80%"> (окно браузера разбивается на две колонки, левая колонка занимает 20%, а правая 80% окна браузера)

3.   border – Толщина границы между фреймами.

4.   bordercolor – Цвет линии границы.

5.   frameborder –  Определяет, отображать рамку вокруг фрейма или нет (frameborder="1 | 0").

6.   framespacing  – Аналог атрибута border, задает ширину границы (framespacing="0").

Тег <frame> - определяет свойства отдельного фрейма (область), на которые делится окно браузера. В каждую из таких областей загружается самостоятельная Web-страница определяемая с помощью атрибута src.

Рекомендуется задавать каждому фрейму его имя через атрибут name.

Атрибуты тега frame:

1.        bordercolor цвет линии границы.

2.        frameborder  – отображать рамку вокруг фрейма или нет (frameborder="1 | 0").

3.        name – задает уникальное имя фрейма.

4.        noresize – задает запрет на изменение размера фрейма пользователем (<frame noresize>).

5.        scrolling – способ отображения полосы прокрутки во фрейме (scrolling="no”; auto – появляются по необходимости).

6.        src – путь к файлу, предназначенному для загрузки во фрейме.

7.        marginheight – определяет отступ между содержимым фрейма и его верхней и нижней границами (<frame marginheight="число">).

8.        marginwidth – определяет отступ между содержимым фрейма и его правой и левой границами (<frame marginwidth="число">).

Рисунок 1 – Примеры фреймовой структуры

Ссылки внутри фреймов: targetframe – документ загрузится во фрейм с указанным именем.

Особенности фреймов

Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>.  Все, что находится между тегами <noframes> и </noframes>, игнорируется браузерами, поддерживающими фреймы. Таким образом, разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер <noframes>, тогда все пользователи смогут увидеть его web-страницу.

Ссылки внутри фреймов

При использовании фреймов схема загрузки html-документов отличается от обычной – это возможность загружать html-документ в один фрейм из другого фрейма. Для загрузки документа в определенный фрейм используется атрибут target тега <a>.

В качестве значения атрибута target используется имя фрейма, в который будет загружаться документ, указанный атрибутом name тега <frame>. Следующие имена используются в качестве зарезервированных:

1.   _self документ загрузится в текущий фрейм, т.е. в котором находится сама гиперссылка;

2.   _blank документ загрузится в новом окне Web-браузера;

3.   _parent документ загрузится в окне, являющееся родительским по отношению к текущему фрейму;

4.   _top документ загрузится поверх всех фреймов;

5.   targetframe документ загрузится во фрейм с указанным именем.

Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top, либо _blank, для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера. В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:

Рисунок 2 – Пример использования ссылок во фреймовой структуре

Плавающие фреймы

Тег <iframe> (сокращение английского термина «плавающий фрейм») позволяет встроить в любое место Web-страницы отдельный HTML-документ или другой ресурс. Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница с любого ресурса.

Тег <iframe> вставляется между тегами <body> и </body>.

Формат тега:

<iframe src= «адрес» name= «имя»>Ресурс</frame>

В теге <iframe> можно использовать те же атрибуты, что и для фрейма </frame>, за исключением атрибута noresize — в отличие от обычных фреймов, для встроенных фреймов возможность изменения размеров на экране не предусмотрена.

Атрибуты тега iframe

Атрибут

Значение

Описание

frameborder

1
0

Определяет если необходимо выводить границу для iframe. Не поддерживается HTML5

height

pixels

Определяет высоту элемента <iframe>

name

text

Определяет имя элемента

scrolling

yes
no
auto

Определяет если необходимо выводить полосу прокрутки в <iframe>. Не поддерживается HTML5

src

URL

Определяет адрес документа который необходимо загрузить в <iframe>

width

pixels

Определяет ширину элемента

 

 


 

Задание к работе

В соответствии с приведёнными теоретическими сведениями создать приведенные ниже примеры фреймовых структур, а также создать в соответствии с вариантом, выданным преподавателем создать электронный учебник.

 

Порядок выполнения практического задания

1)  Открыть программу Visual Studio Code.

2)  Создать в своей папке папку SAIT_FREIM1.

3)  Создать HTML-документ с именем menu.html, который будет содержать меню со ссылками (Главная, О компании, Товары, Контакты), расположенное слева на главной странице, используя тег <a> и тег <ul> для организации списка пунктов меню. Добавить фон для страницы.

Рисунок 3 – Макет главной страницы сайта

4)  Создать HTML-документ с именем main.html. Добавить в заголовок страницы с помощью тега <title> название страницы «Главная». На страницу добавить заголовок по центру «Название компании». Добавить фон для страницы. Используя изученные ранее теги, наполнить страницу контентом: название компании, краткая информация о компании, тематическое графическое изображение или несколько изображений), данная страница будет располагаться справа на главной странице.

5)  Создать HTML-документ с именем index.html, который будет главным файлом сайта с фреймовой структурой по образцу:

Рисунок 4 – Код для фреймовой структуры

6)  Добавить в HTML-документе с именем menu.html в теги с гиперссылками на страницы имя фрейма правого фрейма в атрибут target для правильной загрузки страниц, например:

<a href=”main.html” target=”right” >

7)  Запустить файл  index.html и проверить работу сайта. 

8)  Создать HTML-документы с именами about_compani.html, tovars.html, contacts.html, которые будут содержать контент для страниц: О компании, Товары, Контакты. Добавить фон для каждой страницы, заголовки страниц с помощью тега <title>, наполнить страницы контентом в соответствии с вариантом задания, выданным преподавателем. Примерное содержание страниц:

а)  О компании: сведения об истории создания организации, об ее целях и достижениях, основные преимущества. Также вы можете добавить на страницу: отзывы, благодарность от клиентов, сертификаты и дипломы. 

 

Рисунок 5 – Примеры страниц «О компании»

б) Товары: информация о продукте (цена, технические характеристики, фото, подробное описание). Выполнить табличной вёрсткой.

https://semantica-media.ru/wp-content/uploads/2023/07/image9-4.jpg

Рисунок 6 – Пример страницы «Товары»

в)  Контакты: адрес офиса, номер телефона, график работы, адрес электронной почты, ссылки на социальные сети и мессенджеры.

Рисунок 7 – Пример страницы «Контакты»

9)  Запустить файл  index.html и проверить работу сайта. 

10)           Создать в своей папке папку SAIT_FREIM2.

11)           Создать HTML-документ с именем index.html, который будет главным файлом сайта с фреймовой структурой по образцу, представленном на рисунке 8.

Рисунок 8 – Фреймовая структура для второго сайта

12)           Убрать линию под логотипом.

13)           Добавить полосу прокрутки во фрейм с основным контентом.

14)           Создать HTML-документ для наполнения страниц: Главная, Программа, Этапы разработки программы, Картинка.

15)           Создать в своей папке папку SAIT_FREIM3, в которой организовать файлы для электронного учебника с тематикой, выданной преподавателем, использовать фреймовую структуру.

16)       Создать в папке SAIT_FREIM3 файл index_swim.html (при создании плавающей фрейма указать размер в 50% экрана, высоту 300 px. Задать выравнивание рамки фрейма справа от текста с помощью атрибута align). Создать файл raspisanie.html, который будет внутри плавающего фрейма (расписание занятий).

17)       Добавить в файл index_swim.html еще один плавающий фрейм, в который вставить карту:

а)     перейти на сайт: maps.google.com;

б)    выбрать точку, которую надо отобразить на карте (свой адрес);

в)     Нажать кнопку «Поделиться».

Рисунок 9 – Вставка карты

г)     Выбрать вкладку «Встраивание карт», скопировать сгенерированный код HTML и вставить его в качестве плавающего фрейма.

18)       Добавить еще 2 места на странице (адрес колледжа и т. д.).

19)           Добавить на страницы «Контакты» на первом сайте с фреймовой структурой карты с адресом, с помощью плавающего фрейма.

 

Вопросы для самоконтроля

1.   Что такое фрейм?

2.   С помощью каких тегов создается фреймовая структура?

3.   Какие организуются ссылки при использовании фреймовой структуры?

4.   Перечислите основные атрибуты тегов, предназначенных для создания фреймовой структуры.

5.   Что такое плавающий фрейм?

Лист самооценки

 

Фамилия имя отчество студента

Критерий

Студент

Преподаватель

1.       

Знаю тему урока.

 

 

2.       

В соответствии с образцом сверстал сайт «Фреймовая структура 1».

 

 

3.       

В соответствии с образцом сверстал сайт «Фреймовая структура 2».

 

 

4.       

Сверстал сайт «Электронный учебник» с помощью фреймовой структуры.

 

 

5.       

Создал страницы с плавающими фреймами.

 

 

6.       

Добавил на страницу контакты плавающий фрейм с картой.

 

 

7.       

Правильно выполнил оформление всех сайтов.

 

 

Сумма баллов:

 

 

При наличии хотя бы одной оценки 0 ответьте на вопрос:

Какой этап работы вызвал затруднение?

 

Баллы:

2 – полное соответствие

1 – частичное соответствие

0 – не выполнено

 

Критерии оценки:

«5» – 14 – 13 баллов

«4» – 12 – 11 баллов

«3» – 10 – 8 баллов

«2» – менее 8 баллов



 

РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА

Основная литература

1.       Малышева, Е.Н. Web-технологии : учеб. пособие для обучающихся по направлениям подготовки 51.03.06 «Библиотечно-информационная деятельность», 46.03.20 «Документоведение и архивоведение», квалификация (степень) выпускника «бакалавр» / Е.Н. Малышева. - Кемерово: Кемеров. гос. ин-т культуры, 2018. - 116 с. - ISBN 978-5-8154-0449-6. - Текст: электронный. - URL: https://znanium.com/catalog/product/1041185. – Режим доступа: по подписке.

2.       Немцова, Т. И. Компьютерная графика и web-дизайн : учебное пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ФОРУМ : ИНФРА-М, 2023. — 400 с.

 

Дополнительная литература

1.        Роббинс Д. HTML5, CSS3 и JavaScript. Исчерпывающее руководство: Эксмо, 2014. - 516 c.

2.        Фрейен Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.: Питер, 2014. - 304 c.

3.        Храмцов, П.Б. Основы Web-технологий: учебное пособие / П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин – 2-е изд., испр. –М. : Интернет-Университет Информационных технологий; БИНОМ. Лаборатория знаний, 2014. – 512с.

 

Технические средства обучения и Интернет-ресурсы

1.     Visual Studio Code https [Электронный ресурс] – Режим доступа: http://code.visualstudio.com/

 

Электронные издания

1.                 Электронно-библиотечная система. [Электронный ресурс] – режим доступа: http://znanium.com/.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Методические указания Применение тегов HTML при создании WEB-страниц: использование фреймов"

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Научный сотрудник музея

Получите профессию

Экскурсовод (гид)

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

В методических указаниях содержится описание выполнения практической работы «Применение тегов HTML при создании WEB-страниц: использование фреймов» тема, которой соответствует одной из тем практических работ рабочей программы МДК 08.01 «Проектирование и разработка интерфейсов пользователя» раздела «Основы web-технологий». Целью методических указаний является оказание помощи при изучении принципов использования фреймовой структуры при разработке web-сайтов с помощью языка разметки HTML.Предназначены для студентов очной и заочной форм обучения, преподавателей, а также для желающих самостоятельно освоить язык разметки HTML.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 683 908 материалов в базе

Скачать материал

Другие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 12.12.2023 126
    • DOCX 792.7 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Рачкова Наталья Викторовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Рачкова Наталья Викторовна
    Рачкова Наталья Викторовна
    • На сайте: 8 лет и 5 месяцев
    • Подписчики: 0
    • Всего просмотров: 35609
    • Всего материалов: 23

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Менеджер по туризму

Менеджер по туризму

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Информационные системы и технологии: теория и методика преподавания в профессиональном образовании

Преподаватель информационных систем и технологий

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Этот курс уже прошли 15 человек

Курс профессиональной переподготовки

Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации

Преподаватель информационных технологий

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 191 человек из 56 регионов
  • Этот курс уже прошли 983 человека

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в образовательной организации

Учитель математики и информатики

500/1000 ч.

от 8900 руб. от 4450 руб.
Подать заявку О курсе
  • Сейчас обучается 690 человек из 79 регионов
  • Этот курс уже прошли 1 824 человека

Мини-курс

Раннее развитие: комплексный подход к развитию и воспитанию детей от 0 до 7 лет.

5 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 58 человек из 26 регионов
  • Этот курс уже прошли 30 человек

Мини-курс

Воспитание будущего поколения: от педагогики до игровых технологий

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Этот курс уже прошли 20 человек

Мини-курс

Волонтерство: история, типы и роль в образовании

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Этот курс уже прошли 10 человек