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>


 

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

3600. Суть довгих хвиль Кондратьєва в економіці 98.5 KB
  Відомо декілька типів економічних циклів, які іноді називають хвилями. Їх важко виділиті з-за великої кількості їх показників, з-за часової pозмитості гpаниць між ними. Так звані довгі хвилі (цикли) мають довжину в 40-60 років. Розpобка теоpії...
3601. Работа по развитию слухового восприятия и формированию произношения в школе для детей со сниженным слухом 5.75 MB
  Работа по развитию слухового восприятия и формированию произношения в школе для детей со сниженным слухом В процессе обучения и воспитания детей большую роль играет речь, поскольку она является не только орудием мышления и средством общения, но и ср...
3602. Креслення – основа політехнічної освіти учнів 6.41 MB
  Креслення – основа політехнічної освіти учнів Креслення – мова техніки Графічна підготовка учнів — складова частина їх політехнічної освіти — сприяє раціональнішому засвоєнню елементів техніки, допомагає глибше вникати в будову о...
3604. Відношення і пропорції. 149.18 KB
  Тема. Відношення і пропорції. Мета: узагальнити і систематизувати знання учнів з теми; показати застосування математичних пропорцій у мистецтві та архітектурі;розвивати вміння застосовувати математику в проблемних ситуаціях; виховувати ерудова...
3605. КАЧЕСТВО САХАРА И ПУТИ ЕГО ПОВЫШЕНИЯ 4.64 MB
  Введение Увеличение производства сахара в мире, в том числе в Республике Беларусь, связано одновременно с возрастающими требованиями к его качеству. Имея отличные вкусовые качества и высокую калорийность, сахар является одним из самых важных пр...
3606. Водні ресурси України 8.51 MB
  Водні ресурси – це природне багатство, яке вимагає збереження і охорони особливо в теперішній час коли суспільство змінює свої погляди, розширює можливості. У сільськогосподарському виробництві використувується 72,2% території країни, а 57,5%...
3607. ВАНТАЖОПІДЙОМНА, ТРАНСПОРТУЮЧА ТА ТРАНСПОРТНА ТЕХНІКА 9.59 MB
  В посібнику описані сучасні конструкції вантажопідйомної, транспортуючої та транспортної техніки, яка використовується при переміщенні великої кількості вантажів в процесі виробництва в різних галузях народного господарства, в будівництві промислово...