55166

Використання фреймів в html-документах

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

Педагогика и дидактика

Мета роботи: навчитись застосовувати фрейми при створенні html-документів. 1 Підготовка до заняття 1. Вивчити відповідні розділи теоретичної частини методички та відповідного лекційного курсу. 2. Підготувати малюнки в Pаint та зберегти їх як fon1.bmp та fon2.bmp.

Украинкский

2014-03-22

488 KB

6 чел.

ПРАКТИЧНЕ ЗАНЯТТЯ № 3.  Використання фреймів в html-документах

Мета роботи: навчитись застосовувати фрейми при створенні html-документів.

1 Підготовка до заняття

1. Вивчити відповідні розділи теоретичної частини методички та відповідного лекційного курсу.

2. Підготувати малюнки в Pаint та зберегти їх як fon1.bmp та fon2.bmp.

2 Порядок виконання роботи

  1.  Створити шаблон HTML-документа зберігши його під іменем Lab3.html.
  2.  Задати ім'я документа за таким зразком: "Практичне заняття №3 - Прізвище Ім'я - Група".
  3.  Розділити вікно браузера на три фрейма putannya.html, name.html та vidpovid.html (див. зразок виконання в додатку В). Фрейм putannya.html повинен мати ширину 30% від ширини вікна браузера. Фрейм name.html повинен мати висоту 210 пікселів. Простір, що лишається повинен займати фрейм vidpovid.html.
  4.  Фрейм putannya.html відобразити з рамками, лінійкою прокрутки, без можливості зміни його розмірів, ім'я фрейма -putannya, відстань між фреймами 10 пікселів, колір сітки фрейма - зелений.
  5.  Фрейм name.html відобразити з рамками, без лінійки прокрутки, з можливістю зміни його розмірів, ім'я фрейма - name, відстань між фреймами 5 пікселів, колір сітки фрейма - червоний.
  6.  Фрейм vidpovid.html відобразити з рамками, з лінійкою прокрутки, яка при необхідності автоматично з'являється, з можливістю зміни його розмірів, ім'я фрейма - vidpovid, відстань між фреймами 5 пікселів, колір сітки фрейма - червоний, ширина лівого і правого полів - 100 пікселів, а верхнього і нижнього - 50 пікселів.
  7.  У випадку, коли браузер не підтримує фрейми, має відображатись відповідне повідомлення.
  8.  Створити шаблон HTML-документа зберігши його під іменем putannya.html.
  9.  Задати ім'я документа за таким зразком: "Практичне заняття №3 - Прізвище Ім'я - Група".
  10.  Задати фон документа - малюнок fonl.bmp.
  11.  Задати базовий шрифт документа: розмір - 2, гарнітура - Агіаl, колір - синій.
  12.  Створити біжучий рядок шрифтом на 1 більшим за базовий, синього кольору: "ПИТАННЯ".
  13.  Вставити горизонтальну роздільну лінію довжиною 80% від ширини вікна браузера, товщиною 7 пікселів, червоного кольору, розміщену по центру.
  14.  Перших 5 питань анкети (див. Лабораторну роботу №1) подати  списком визначень (див. зразок виконання), де термін - це номер питання (виділений жирним шрифтом), а визначення - це саме питання (виділене курсивом).
  15.  Питання 6-9 подати у вигляді впорядкованого списку (див. зразок виконання) де перша частина питання має нумерацію 6-9, виділена жирним курсивом, а друга - має нумерацію a-d, розміщена з відступом і має базові параметри.
  16.  Питання 10-12 подати у вигляді невпорядкованого списку (див. зразок виконання) з маркерами у вигляді кола (circle), квадрата (square) та диска (disk).
  17.  Через два рядки зробити посилання на закладку, яка розміщена на початку сторінки словом ВГОРУ та символом виділених жирним шрифтом.
  18.  Створити шаблон HTML-документа зберігши його під іменем name.html.
  19.  Задати ім'я документа за таким зразком: "Практичне заняття № 3 - Прізвище Ім'я - Група".
  20.  Задати фон документа - малюнок fon2.bmp.
  21.  Задати базовий шрифт документа: розмір - 3, гарнітура - Агіаl, колір - жовтий.
  22.  Створити біжучий рядок: "Прізвище Ім'я - Група".
  23.  Текст "Практичне заняття № 3" оформити заголовком другого рівня, розміщеним по центру із спливаючим поясненням "ФРЕЙМИ" при наведенні на нього мишкою.
  24.  Текст "Тема: Використання фреймів в html-документах" оформити заголовком третього рівня, розмішеним по центру, причому текст "Тема:" повинен відображатись жирним підкресленим шрифтом, а "Використання фреймів в html-документах" - жирним курсивом.
  25.  Вставити горизонтальну роздільну лінію довжиною 80% від ширини вікна браузера, товщиною 7 пікселів, зеленого кольору, розміщену по центру.
  26.  Створити шаблон HTML-документа зберігши його під іменем vidpovid.html.
  27.  Задати ім'я документа за таким зразком: "Практичне заняття № 3 - Прізвище Ім'я - Група".
  28.  Задати фон документа жовтим кольором.
  29.  Задати базовий шрифт документа: розмір - 3, гарнітура - Агіаl, колір - білий.
  30.  Створити біжучий рядок шрифтом на 2 більшим за базовий, червоного кольору: "ВІДПОВІДІ НА ПИТАННЯ".
  31.  Вставити горизонтальну роздільну лінію довжиною 80% від ширини вікна браузера, товщиною 7 пікселів, синього кольору, розміщену по центру.
  32.  Відповіді на питання подати у вигляді списку визначень в режимі компактного відображення (див. зразок виконання), де термін - це номер відповіді на питання (виділений жирним шрифтом), а визначення - це текст відповіді (виділений курсивом).

3 Вимоги до оформлення звіту

1. Оформити звіт та захистити роботу (знання використаних у роботі тегів).

ДОДАТОК В

Вигляд створеного документу

Лістінг розмітки документа до практичного заняття №3  (Lab3.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU"> <HTML>

<HEAD>

<TITLE>Практичне заняття №3 - Іванов Іван - ПHК-31</TITLE>

</HEAD>

<FRAMESET COLS=30%,* FRAMEBORDER=yes FRAMESPACING=10 BORDERCOLOR=green>

<FRAME SRC=putannya.html NAME=putannya NORESIZE SCROLLING=yes>

<FRAMESET ROWS=210,* FRAMEBORDER=yes FRAMESPACING=5 BORDERCOLOR=red>

<FRAME SRC=name.html NAME=name SCROLLING=no>

<FRAME SRC=vidpovid.html NAME=vidpovid MARGINWIDTH=100 MARGINHEIGHT=50 SCROLLING=auto> </FRAMESET>

<NOFRAMES>Baш браузер не підтримує фрейми</NOFRAMES>

</FRAMESET>

<BODY> </BODY> </HTML>

putannya.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">

<HTML>

<HEAD>

<TITLE>Практичне заняття №3 - Іванов Іван - ПНК-31</TITLE> </HEAD>

<BODY BACKGROUND=fon1.bmp>

<A NAME="zakladka"></a>

<BASEFONT SIZE="2" FACE="Arial" COLOR="blue">

<MARQUEE direction="left"><FONT SIZE=+1 COLOR=BLUE>ПИTAHHЯ</FONT></MARQUEE>

<HR WIDTH="80%" SIZE="7" ALIGN="center" COLOR="red"><BR>

<DL>

<DT><B>1</B></DT>

<DD><I>Чомy ви обрали саме цей університет?</I></DD>

<DT><B>2</B></DT>

<DD><I>Улюблені предмети в університеті. Чому? Ваші побажання.</I></DD>

<DT><B>3</B></DT>

<DD><I>Як ви відноситесь до спорту. Чим займаєтесь і чим хотіли б займатись?</I></DD>

<DT><B>4</B></DT>

<DD><I>Baшe відношення до музики, улюблені групи, виконавці?</I></DD>

<DT><B>5</B></DT>

<DD><I>Baшi уподобання у кіно, театрі, мистецтві (жанр, актори, митці).</I></DD>

<DL><BR>

<OL TYPE="1" START="6"><B>

<LI><I>Як проводите вільний чac?</I></B></OL>

<BLOCKQUOTE><OL TYPE="a">

<LI> Ваше xoббi?</OL></BLOCKQUOTE>

<OL TYPE="1" START="7"><B>

<LI><I>Улюблені свята?</I></B></OL>

<BLOCKQUOTE><OL TYPE="a">

<LI VALUE=2>Чим і чомy?</OL></BLOCKQUOTE>     .

<OL TYPE="1" START="8"><B>

<LI><I>Як ви відноситесь до астрологічних прогнозів?</I></B></OL>

<BLOCKQUOTE><OL TYPE="a">

<LI VALUE=3>Чомy?</OL></BLOCKQUOTE>

<OL TYPE="1" START="9"><B>

<LI><I>Де ви хотіли б відпочити?</I></B></OL>

<BLOCKQUOTE><OL TYPE="a">

<LI VALUE=4> Чомy?</OL></BLOCKQUOTE>

<UL>

<LI TYPE="circle"><B>10.</B> <I>У якій країні ви хотіли б проживати і чому?</I>

<LI TYPE="square"><B>11.</B><I>Ваш ідеал людини?</I>

<LI TYPE="disc"><B>12.</B><I> Як би ви сформулювали мету вашого життя?</I></UL>

   <BR><BR>

<a href="#zakladka"> <DD><B>ВГОРУ&#8593</B></DD> </a>

</BODY> </HTML>

  name.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU"> <HTML>

<TITLE>Практичне заняття № 3 - Іванов Іван - ПНК-31</TITLE>

</HEAD>

<BODY BACKGROUND=fon2.bmp>

<BASEFONT SIZE="3" FACE="Arial" COLOR="yeIlow">

<MARQUEE direction="left">Іванов Іван - ПНК-31</MARQUEE>

<H2 ALIGN="center"><ACRONYM TITLE="ФРЕЙМИ"> Практичне заняття № 3</ACRONYM></H2>

<H3 ALIGN="center"><B><U>Teмa:</U><I>Використання фреймів, навігаційних карт та форм в html-документах</I></B></H3>

<HR Width="80%" SIZE="7" ALIGN="center" COLOR="green">

<BR>

</BODY> </HTML>

vidpovid.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">

<HTML> <HEAD>

<TITLE>Практичне заняття №3 - Іванов Іван - ПНК-31 </TITLE>

</HEAD>

<BODY BGCOLOR="yellow">

<BASEFONT SIZE="3" FACE="Arial" COLOR="green">

<MARQUEE direction="left"><FONT SIZE=+2 COLOR=red>ВІДПОВІДІ НА ПИТАННЯ </FONT></MARQUEE>

<HR WIDTH="80%" SIZE="7" ALIGN="center" COLOR="blue"><BR>

<DL COMPACT>

<DT><B>Відповідь на питання 1</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 2</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 3</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 4</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 5</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 6</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>ВІдповідь на питання 7</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 8</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь, на питання 9</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 10</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 11</B></DT>

<DD><I>Teкст відповіді</I></DD>

<DT><B>Відповідь на питання 12</B></DT>

<DD><I>Teкст відповіді</I></DD>

</DL>

</BODY>

</HTML>


 

А также другие работы, которые могут Вас заинтересовать

46892. Англійська мова. Додатки до білетів 35.34 KB
  Account holders have discovered that the good old days were not always the best ways of transacting business, especially when managing corporate and personal finances. Before the advent of the Internet, consumers had to visit a local branch bank to make deposits, withdraw funds, or order checks
46893. Особенности художественного развития и художественного образования в России XVIII века 35.5 KB
  По сравнению с худосочным академическим университетом окончательно ликвидированном в 60х годах. Так в области живописи Антропов 17161795 сын оружейника долгое время работавший в живописной команде занимавшийся росписью стен и потолков вырос в 50х годах в крупнейшего русского портретиста. Наибольшим успехом у высокопоставленных заказчиков в 40 50х годах пользовался зодчий в Растрелли сын итальянского скульптора приглашенного в Россию при Петре. В 50х 60х годах происходит поворот от пышного грузного барокко к более простым...
46895. Полные и неполные предложения. Двусоставные и односоставные предложения 35.5 KB
  В основу деления простых предложений на двусоставные и односоставные положено различие в способе выражения основного грамматического значения предложения предикативности: наличие отношений между носителем признака и признаком и их отсутствие когда утверждается независимый признак или бытие предмета. Предложения Донецкая дорога. При синтаксической характеристике односоставных и двусоставных предложений немаловажную роль играет интонация которая определяется коммуникативным заданием предложения.
46896. Нові перспективні методи опорядження фасадів 35.5 KB
  Данний тип штукатурки використовується для опорядження фасадів.даний тип штукатурки влаштовують із полімер мінеральних композицій з білим цементом і фактуроутворювальних зерен.Після влаштування штукатурки на неї наноситься захисний шар із гідрофобних рідин.Пил який залишався після обробки натурального камення використали під час влаштування штукатурки в результаті зявився безшовний тонкошаровий мармур який можна нанести на будь яку поверхню даний тип штукатурки виявився надзвичайно стійким до впливів t і вологи.
46898. Страховой рынок :экономическая природа. Макроэкономическая нестабильность: инфляция 35.85 KB
  Условием возникновения того и другого служат общественное разделение труда и существование различных собственников обособленных товаропроизводителей. Учет расчетов с персоналом по оплате труда. Для оплаты труда работников в организации могут использоваться различные системы оплаты: тарифная система; бестарифная система; система плавающих окладов; система оплаты труда на комиссионной основе. Тарифная система труда представляет собой совокупность нормативов с помощью которых регулируется уровень заработной платы различных групп и категорий...
46899. Доходный подход к оценке бизнеса 35.87 KB
  Доходный подход совокупность методов оценки стоимости объекта основанных на определении текущей стоимости объекта имущества как совокупности ожидаемых доходов от его использования . При оценке с позиции доходного подхода во главу угла ставятся будущие доходы от эксплуатации объекта на протяжении срока его полезного использования как основной фактор определяющий современную величину стоимости объекта. В исчислении совокупного дохода от объекта за ряд лет его жизни в методах доходного подхода используют приемы известные из теории сложных...