Практическая работа «Создание фреймов»

— Для указания фона можно использовать команду « bgcolor », которая прописывается в открывающем тэге боди:

Не рекомендуется использовать тёмные тона, такие сайты плохо читаются…

Каждый элемент списка сделайте гиперссылкой, открывающей файлы Pr9 _1. htm , Pr9 _2. htm , Pr9 _3. htm , Pr9 _4. htm , Pr9 _5. htm (после создания этих файлов в процессе выполнения практической работы)

6. Создайте файлы logo . htm , content . htm , menu . htm – пустые web -странички с разным фоном – красным, синим и зелёным.

Пример содержимого файла menu . htm :

7. С использованием команд создания многооконных документов сформировать 4 файла по указанному заданию. Дать им имена: Pr9 _1. htm , Pr9 _2. htm , Pr9 _3. htm , Pr9 _4. htm .

Для первого задания файл Pr9 _1. htm будет выглядеть так:

Scrolling — атрибуттэга . Он может принимать несколько значений: no — это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes — это значит полоса прокрутки будет всегда; auto — полоса прокрутки появится только тогда, когда она нужна.

Для последнего задания файл Pr9 _4. htm будет выглядеть так:

Второеи третье задание выполните самостоятельно.

8. Создайте краткое руководство по HTML по образцу:

— Создайте новый файл, назовите его Pr9 _5. htm . Как видите, он состоит из фреймов сложной структуры – высота строк неодинакова, т.е. во втором столбце – новый набор фреймов, состоящий из двух строк:

Marquee – бегущая строка, создаётся командой Краткое руководство по HTML, где scrollamount – скорость перемещения, 1 – самая медленная, 10 – самая быстрая.

Попробуйте создать файл Pr9 _5. htm самостоятельно. Подберите ширину столбцов, картинку для фрейма « logo 5», высоту строк.

В общем случае содержимое будет таким:

FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется). Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME . Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET . То есть элемент FRAMESET поддерживает вложенные конструкции фреймов. ( HTML 4.0)

NoFrames — все, что находится между начальным и конечным тегами данного элемента, например, Ваш браузер не поддерживает фреймы. Обидно, да? , будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET .

ROWS — определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:

1) в процентах от высоты рабочей области окна браузера. Например: «30%,30%,40%»;

2) в виде знака «*» (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи «25%,25%,*» равносильна 50%;

Все три способа можно совмещать. Например, «25%,40,*»разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй — в 40 пикселов, а третий займет всю оставшуюся площадь.

COLS — определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.

BORDER — определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape ;

FRAMEBORDER — определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:

No или 0 — не отображать рамки;

FRAMESPACING — определяет расстояние (так называемую «серую область») между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.

— Исходный материал для этой странички можно взять здесь: Web — designe . chm . Не забудьте разблокировать файл после скачивания, иначе содержимое читаться не будет:

— Выберите не менее пяти пунктов, сохраните их содержимое в отдельные файлы, используя команду «Просмотр HTML -кода», а когда файл откроется в текстовом редакторе, «Файл»→«Сохранить как…»:

— Файлы, которые использовались в образце, можно взять здесь: архив файлов для content -5 ( pr -30-5) . http://178.209.64.54/ivk/Informatika/Prak_rab/Pr45/dlya_uchebnika_html.rar

— Logo_5. htm должен содержать только одну картинку, menu _5. htm – заголовок и нумерованный список с гиперссылками, marquee – бегущую строку, content _5. htm – таблицуиз одной ячейки, заголовок с подзаголовком и строку текста «Работу выполнила …». Таблица нужна для того, чтобы список был выровнен не по центру, как всё остальное, а по левому краю (сама таблица – тоже по центру).

Источник

Практическая работа по теме «Создание фреймов на Web -страницах»

Разработка предназначена для освоения и закрепления навыков по созданию Web-сайта, проведения практической работы по информатике в 9-11 классах, либо для организации самостоятельной работы учащихся.

Разработка опирается на ранее изученные приемы по созданию и оформления Web-страниц.

Работа состоит из двух частей. 1 часть – теоретическая, содержит краткую информацию о способах оформления Web –страницы с помощью фреймов. 2 часть – практическая, содержит алгоритм выполнения работы.

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

Планируемы образовательные результаты

· Сформировать представления о способе оформления Web -страницы, разделяя ее на несколько областей с помощью фреймов.

· Развивать навыки самостоятельной работы по предложенному алгоритму, умения оформлять Web –страницы.

· Воспитывать ответственность за результаты своей работы, интерес к самостоятельной работе, добросовестность.

Итогом работы учащихся стает демонстрация созданных Web –страниц с анализом возникших трудностей в ходе выполнения задания.

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

Второстепенные документы вставляются в базовый с помощью тегов:

Деление на горизонтальные области – атрибут ROWS , на вертикальные – COLS

Значения атрибутов могут быть выражены в пикселах, процентах или * для обозначения оставшейся части экрана.

Например, атрибут COLS =50%, 50% разделит область на равные левую и правую вертикальные части; атрибут ROWS = 200, 10%,* разделит область натри неравные горизонтальные части, первой отведено 200 пикселей, второй – 10% свободного пространства, остальное местозаймет третья область.

ЗАДАНИЕ: Разработать Web -сайт «Башни Московского Кремля» используя для главной страницы сайта технологию создания фреймов.

1. Подготовить информационное наполнение сайта по темам: общие сведения о Московском Кремле, Спасская башня, Царская башня, Кремлевские куранты. Подобрать изображения, звуковые файлы (по желанию)

— Заголовок сайта — zagolovok . html ( см приложение)

— Меню сайта — menu . html ( см приложение)

— Общие сведения о Московском Кремле — glavnaja . html

— Кремлевские куранты — 3. html

3. Создать главную страницу, используя технологию создания фреймов

ФАЙЛ KREML . HTML

Ваш браузер не поддерживает отображение фреймов

ФАЙЛ KREML . HTML

Ваш браузер не поддерживает отображение фреймов

БАШНИ МОСКОВСКОГО КРЕМЛЯ

Этот сайт расскажет Вам о Московском Кремле

Файл 1.HTML/2.HTML/3.HTML

< head >< title >Спасская башня/Царская башня/Кремлевские куранты

< h 1>Страница о Спасской башне /о Царской башне/о Кремлевских курантах

Источник

Практическая работа № 8. Знакомство с фреймами.

С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы. Для создания фреймов используется тег , а для их описания тег . Тег имеет два атрибута: ROWS(строки) и COLS(столбцы).

1. Для разбиения окна браузера на 2 горизонтальные части подготовим УСТАНОВОЧНЫЙ html-файл, в котором вместо тегов применим, тег . Внутри этого тега могут находиться только теги (которые не требуют парного закрывающего тега.).

1. В результате получили окно браузера Internet Explorer разделенным на две части, в которых расположились наши файлы table.htm и first.htm. Чтобы разделить окно на две вертикальные части достаточно атрибут ROWS поменять на COLS.
2. Подготовим пример, который показывает наиболее типичное использование фреймовых структур, когда один документ служит заголовком Web-странички, второй — является оглавлением, а третий используется для загрузки содержимого.
3. Сначала подготовим три обычных HTML-документа:

• Первый документ — firma.htm:

Фирма Рога и Копыта

Это пустой файл. — означает пробел.

1. Рис. 6

   Теперь подготовим УСТАНОВОЧНЫЙ html-документ — ustаn.htm. Мы разобьем окно браузера на три части, используя, тег . На Рис.6 представлен примерный вариант оформления.

1. Символ «*» (звездочка) означает, что на данный фрейм отводится вся оставшаяся часть рабочего окна браузера.
2. Запустите обозреватель InternetExplorer(Пуск/Программы/Internet Explorer). Посмотрите, что происходит при изменении ширины окна обозревателя.
3. Изучите представление нескольких созданных ранее документов, в отдельных фреймах. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.
4. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу не нарушает структуру фреймов.
5. Обратите внимание, каждому из трех фреймов мы дали имя — «А», «В», «D«, а использовали значение только одного атрибута в теге (см. п.4):

О фирме (target — означает «цель»). Таким образом мы указали браузеру открывать ссылки из фрейма с именем «В» в фрейме с именем «D«.

Примечание: Если срабатывают не все ссылки — проверьте наличие файлов link.htm, paragraph.htm, first.htm, table.htm в Вашей папке Web. Если файлы отсутствуют, вернитесь к прежним работам и создайте их снова.

1. Вернитесь в программу Блокнот и измените структуру и атрибуты некоторых фреймов. Дополним, тег еще тремя атрибутами:

frameborder — указывает наличие или отсутствие границы между фреймами и принимает значения 1 или 0;

bordercolor — указывает цвет границы между фреймами;

framespacing — определяет толщину границы в пикселах.

Теперь тег дополним двумя атрибутами:

noresize — запрет изменения размеров фрейма пользователем;

scrolling — запрет прокрутки содержимого фрейма (значение NO), указание выводить линейку прокрутки в любом случае (YES), по умолчанию стоит значение (AUTO).

Проверьте, положение каких границ фреймов можно изменить методом перетаскивания при помощи мыши.

1. Вернитесь в программу Internet Explorer и щёлкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.
2. Разберем вариант составления «плавающих» фреймов. «Плавающие» фреймы могут появляться в любом месте экрана. Текст, расположенный на главной странице, как бы обтекает плавающий фрейм. Для создания плавающих фреймов применяется специальный тег:

1. Создайте файл iframe.htm. При создании плавающего фрейма укажите, что он занимает 50% экрана и имеет высоту 250 пикселов. С помощью атрибута ALIGN задайте выравнивание справа от текста:

Изучаем расположение и поведение ПЛАВАЮЩИХ фреймов

Вот здесь наберите произвольный текст из 20-30 слов

Теперь создадим файл, отображаемый внутри «плавающего» фрейма:

Содержание плавающего фрейма

Данный текст отображается в плавающем фрейме, который расположен справа от основного теста страницы. Этот плавающий фрейм размещен на данной странице с помощью специального тега IFRAME, который пока поддерживается только в Microsoft Internet Explorer версии 3.0. При создании данного плавающего фрейма было указано, что он занимает 50% экрана и имеет высоту 300 пикселей.

Сохраните этот файл под именем if.htm

1. Запустите обозреватель Internet Explorer (Пуск/Программы/Internet Explorer). Посмотрите, что происходит при изменении ширины окна обозревателя.
2. Вернитесь в программу Блокнот и измените атрибут ALING=RIGHT на ALING=LEFT. Посмотрите, как изменится положение плавающего фрейма в окне браузера.
3. Мы научились отображать в рамках одной Web-страницы несколько документов при помощи фреймов. Мы узнали, как фреймы отображаются обозревателем Internet Explorer. Мы исследовали особенности навигации с помощью гиперссылок по Web-странице, содержащей фреймы.
4. Выполните самостоятельную работу. В редакторе Internet Explorer должен быть представлен файл 5.htm (рис.5):
5. a) Исправьте файл ref.htm, так чтобы ссылки располагались в одну строку. Добавьте заголовок «Рога и копыта» На рис. 7 представлена внутренняя схема установочного файла.

б) Ссылки «О фирме», «Наши партнеры» открываются в фрейме G, а ссылки «Телефон Остапа Бендера», «Наш адрес» открываются во фрейме Q. На Рис.8 представлен примерный вид установочного файла в Internet Explorer.

Ref.htm — занимает 20% высоты

List.htm — 60% высотыPicture.htm

Источник