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>


 

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

77181. Product Placement: вчера, сегодня, завтра 263.5 KB
  Приведем пример одной из самых культовых фигур сегодняшнего общества - Санта Клауса. Его история веками передавалась из поколения в поколение в легендах и фольклоре. Но образ Санты, хотя и опирается на могучие традиции, очень многим обязан процессу коммерциализации, происходившему в обществе.
77182. Адаптация персонала 260.5 KB
  К сожалению важность мероприятий по адаптации работников в нашей стране не достаточно серьезно воспринимается кадровыми службами на протяжении долгого периода. До сих пор многие государственные предприятия и коммерческие организации не имеют даже базовых программ адаптации.
77183. Дискриминация в трудовых отношениях 259 KB
  Дискриминацией является ограничение или лишение прав определенной категории граждан по какому-либо признаку, не оговоренному в соответствующем нормативном акте. Дискриминацией является и предоставление необоснованных льгот, преимуществ отдельным лицам или категориям граждан.
77185. Планирование кадров предприятия и их подбор 233.5 KB
  Проблемы социально-экономических преобразований, происходящих в Российском обществе, позволили осознать и оценить задачи, стоящие перед работниками кадровых служб предприятий. Без людей нет организации. Без нужных людей ни одна организация не сможет достичь своих целей и выжить.
77186. Технологии управления персоналом 207 KB
  По своим свойствам люди существенно отличаются от любых других используемых организациями ресурсов, а следовательно, требуют особых методов управления. Специфика человеческих ресурсов состоит в следующем.
77187. Рынок и оценка жилой недвижимости 206.5 KB
  Принципиальная разница состоит в том, что последний служит потребностям бизнеса – рациональным, структурным и предсказуемым. Рынок жилой недвижимости служит потребностям людей – эмоциональным, неструктурным и непредсказуемым.
77188. Знаковизначенні квадратичні форми 279 KB
  Познайомити з послідовністю приведення квадратичної форми до нормального вигляду; вивчити закон інерції квадратичної форми; познайомити з поняттями додатної та від’ємної визначеності квадратичної форми та вивчити критерії додатної визначеності. Нормальний вид комплексної і нормальний вид дійсної квадратичної форми. Знаковизначенні квадратичні форми.
77189. Анализ основных изменений, внесенных в Трудовой кодекс Российской Федерации с момента его принятия по август 2006 года 198.5 KB
  Кодекс законов о труде 1918 года имеет достаточно стройную для своего времени структуру. Рассматривая Кодекс видим, что он состоит из введения, 9 разделов и 5 приложений. Используя современную терминологию можно выделить основные моменты в каждом разделе...