50748

Макетування веб-сторінки за допомогою таблиць

Лабораторная работа

Информатика, кибернетика и программирование

Мета: навчитися розробляти панель навігації по документу, використовуючи таблиці для створення нової структури HTML-документа. Обладнання: ПЕОМ IBM PC, текстовий редактор, Internet Explorer.

Украинкский

2014-01-29

78.5 KB

4 чел.

Лабораторна робота № 4

Тема:  «Макетування веб-сторінки за допомогою таблиць»

Мета:    навчитися розробляти панель навігації по документу, використовуючи таблиці для створення нової структури HTML-документа.

Обладнання: ПЕОМ IBM PC, текстовий редактор, Internet Explorer.


Завдання:  

1. Відкрити створений на попередній роботі текст сторінки будь-яким редактором.

2. Додайте таблицю, що містить навігацію по документу за допомогою  посилань.

3. Приблизний зміст(содержание) казки наведений у „Додатку 1”.

4. Розташуйте зміст(содержание) у крайній лівій області сторінки, так, щоб перший малюнок розміщувався праворуч від змісту.

5. При використанні навігації по змісту відбувається перехід на вказане місце.

6. Використовуйте пробіл   <P>&nbsp  для пропущення рядків у змісті.

6. В кінці казки проставте посилання   „на начало”.

7. Періодично зберігаючи та оновлюючи сторінку, намагайтесь дотримуватися загального вигляду сторінки, зберігаючи раніше створений формат тексту,  зображення, таблиці, тощо

8. Створіть  самостійно таблицю з трьох рядків і двох стовпчиків  з використанням  у  тегі table атрибута  frame.

9 Теоретичні відомості про роботу з  тегами  знайдіть у файлі справки tags.chm

10. Оформіть  звіт у вигляді роздрукованого коду сторінки.

Лістинг програми:

Документ «Красная Шапочка.htm»

<html>

<body>

<h2 align="center">

<TD valign="top"><BR><A name="v"></A></td>

<font color=#FF0099>

Шарль Перро </h2>

<h1 align="center" color=#FF0099>

КРАСНАЯ ШАПОЧКА

</h1> </font>

<hr align="top" color=#ff0099>

<font color=#0066CC>

<IMG SRC="E:\3 семестр\Web  приложение\лаб2\2.jpg" BORDER="1" ALIGN="left" WIDTH="257" HEIGHT="386"> <IMG SRC="E:\3 семестр\Web  приложение\лаб2\2.jpg" BORDER="1" ALIGN="right" WIDTH="250" HEIGHT="282">

<TR>

<TD valign="top"><BR><A name="1"></A></td>

<TR>

<TD valign="top">

<BR>

<P><B><FONT SIZE="" COLOR="#3300CC" face="Arial">Содержание</font></B>

<P><A HREF="#1">Введение</A>

<P><A HREF="#Красная Шапочка встречает волка">Красная Шапочка встречает волка </A>

<P><A HREF="#Коварный план волка">Коварный план волка  </A>

<P><A HREF="#a">Красная Шапочка и волк в доме бабушки  </A>

<P><A HREF="#d">Счастливый конец  </A>

</TD>

<p>

<br>

<TR>

<p>Жила однажды в далекой деревушке маленькая прелестная девочка. Ее мать и бабушка любили ее без памяти. Бабушка сшила ей красную шапочку, которая была ей так к лицу, что все и стали звать девочку <b>Красной Шапочкой</b>.

<p>

Однажды мама напекла целый противень пирогов и говорит дочке: <p>

<i>

- <b>Красная Шапочка</b>, бабушка заболела. Не отнесешь ли ты ей пирожков и горшочек свежевзбитого масла? </i><p>

<b>Красная Шапочка</b> тут же встала и отправилась к бабушке. А бабушка ее жила в другой деревне, за густым, диким лесом.

<p>

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

<TD valign="top"><BR><A name="Красная Шапочка встречает волка"></A></td>

<p>

<i>

- Куда ты идешь, моя крошка?</i> - спросил волк.<br>

<i>- Повидать свою бабушку,</i> - сказала <b>Красная Шапочка</b>. - <i>У меня есть для нее горшочек свежевзбитого масла и пирожки.<br>

- И далеко тебе идти?</i> - спросил волк.<br>

- <i>Далеко</i>, - ответила <b>Красная Шапочка</b>. - <i>Ее дом довольно далеко отсюда, первый с той стороны леса.<br>

<TD valign="top"><BR><A name="Коварный план волка"></A></td>

- Я тоже хочу навестить бабушку</i>, - сказал хитрый волк. - <i>Я пойду этой тропинкой, а ты другой. Посмотрим, кто из нас первый доберется туда</i>. Волк бросился бежать изо всех сил по самой короткой тропинке, а <b>Красная Шапочка</b> пошла по самой длинной дорожке. Она собирала цветы, пела веселые песни, играла с красивыми бабочками. Волк тем временем добежал до бабушкиного дома. Он дважды постучал в дверь. <p>

- <i>Кто там?</i> - спросила Бабушка.

- <i>Это я, <b>Красная Шапочка</i></b>, - сказал волк голосом девочки. - <i>Я принесла тебе пирожков и горшочек свежевзбитого масла</i>.<p>

<IMG SRC="E:\3 семестр\Web  приложение\лаб2\2.jpg" BORDER="1" ALIGN="left" WIDTH="250" HEIGHT="245">

Бабушка лежала в постели, потому что болела.<p>

- <i>Открой дверь и войди</i>, - крикнула она. <p>

Волк ворвался в комнату. Он не ел целых три дня и был поэтому очень голоден. Он тотчас проглотил Бабушку. Потом он натянул на себя бабушкин халат, забрался на постель и стал поджидать <b>Красную Шапочку</b>, которая через некоторое время пришла и постучалась в дверь.<p>

<TD valign="top"><BR><A name="a"></A></td>

- <i>Кто там?</i> - спросил Волк бабушкиным голосом. Его голос был хриплым, но <b>Красная Шапочка</b> подумала, что у Бабушки болит горло.<br>

- <i>Это я, <b>Красная Шапочка</i></b>, - сказала она. - <i>Я принесла тебе пирожков и горшочек свежевзбитого масла.</i><br>

- <i>Открой дверь и войди,</i> - сказал волк таким ласковым голосом, насколько мог.<p>

<IMG SRC="E:\3 семестр\Web  приложение\лаб2\2.jpg" ALIGN="right" WIDTH="257" HEIGHT="386"> Он натянул одеяло до самых глаз. <p>

- <i>Поставь свою корзинку на стол и подойди ко мне, </i>- сказал волк. <p>

<b>Красная Шапочка</b> подошла поближе. Она сказала: <p>

- <i>Бабушка, какие у вас длинные руки!<br>

<IMG SRC="E:\3 семестр\Web  приложение\лаб2\2.jpg" BORDER="1" ALIGN="left" WIDTH="200" HEIGHT="242">

- Это чтобы получше обнимать тебя, моя дорогая</i>, - сказал волк.<br><p>

- <i>Бабушка, какие у вас длинные уши!<br>

- Это чтобы лучше слышать тебя, моя дорогая.<br><p>

- Бабушка, какие у вас большие глаза!<br>

- Это чтобы получше видеть тебя, моя дорогая.<br> <p>

- Бабушка, какие у вас большие зубы!<br>

- Это чтобы съесть тебя!</i> - сказал волк и проглотил <b>Красную Шапочку</b>.<br> <p>

<TD valign="top"><BR><A name="d"></A></td>

Он так громко зарычал своим жутким волчьим голосом, что дровосеки услышали его. Они вбежали в дом с топорами. Они размахнулись своими топорами и убили волка. Из волчьего живота тотчас вылезли Бабушка с <b>Красной Шапочкой</b>, живые и здоровые. Они зарыли волка в лесу и пригласили дровосеков на чай.

<P><A HREF="#v">На начало</A>

<hr align="top" color=#ff0099>

<TD valign="top">

 <BR>

 <P><B><FONT SIZE="" COLOR="#3300CC" face="Arial">Приложения </font></B>

<TD valign="top"><BR><A HREF="E:\3 семестр\Web  приложение\лаб3\Пирожки.html">Продукты</A>

       </TD>

<TD valign="top"><BR><A HREF="E:\3 семестр\Web  приложение\лаб3\ссылки.html">Инернет ссылки</A>

       </TD>

</font>

</body>

</html>

Документ «Пирожки.html»

<body>

<html>

<a href="E:\3 семестр\Web  приложение\лаб3\Пирожки состав.html">

<H1 align=ceter>

<center>Пирожки</center>

<center>

<a href="E:\3 семестр\Web  приложение\лаб3\Масло состав.html">

<H1 align=ceter>

<center>Масло</center>

<center>

</body>

</html>

Документ «Пирожки состав.html»

<body>

<html>

<H1 align=ceter>

<center>Пирожки</center>

<center>

<table border>

<tr><td>вода</td></tr>

<tr><td>пшеничная мука</td></tr>

<tr><td>картофель (капуста)</td></tr>

<tr><td>сахар</td></tr>

<tr><td>кулинарный фритюрный жир</td></tr>

<tr><td>крахмал Е1422</td></tr>

<tr><td>глюкоза</td></tr>

<tr><td>молочный порошок</td></tr>

<tr><td>свекольный краситель Е162</td></tr>

<tr><td>лимонная кислота Е330</td></tr>

<tr><td>эмульгатор Е472е</td></tr>

<tr><td>бикарбонат натрия</td></tr>

<tr><td>лимонное масло</td></tr>

</table>

<center>Энергетическая ценность: 223 ккал</center>

</body>

</html>

Документ «Масло состав.html»

<body>

<html>

<H1 align=ceter>

<center>Свежевзбитое масло</center>

<center>

<table border>

<tr><td>пастеризованные сливки</td></tr>

<tr><td>соль</td></tr>

</table>

<center>Энергетическая ценность: 661 ккал</center>

<center>

<table></center>

</body>

</html>

Документ «ссылки.html»

<body>

<html>

<a href="http://www.delfi.ua/archive/rss.php">

<H1 align=ceter>

<center>Новости</center>

<center>

<a href="http://vk.com/music0107">

<H2 align=ceter>

<center>Музыка1</center>

<center>

<a href="http://vk.com/modern_rock_music">

<H2 align=ceter>

<center>Музыка2</center>

<center>

<a href="http://www.fcdynamo.kiev.ua/">

<H2 align=ceter>

<center>Футбол</center>

<center>

<a href="http://surfingbird.ru/home#!/updates">

<H2 align=ceter>

<center>Интересное</center>

<center>

<a href="http://www.youtube.com">

<H2 align=ceter>

<center>Видео</center>

<center>

<a href="http://rutor.org/">

<H3 align=ceter>

<center>Торрент</center>

<center>

</body>

</html>

Висновок: На цій лабораторній роботі я навчився розробляти панель навігації по документу, використовуючи таблиці для створення нової структури HTML-документа.


 

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

8892. Банківське обслуговування зовнішньоекономічної діяльності 213.44 KB
  Банківське обслуговування зовнішньоекономічної діяльності 1. Суть, значення та загальна характеристика валютних операцій банку 2. Неторговельні операції банків в іноземній валюті 3. Характеристика основних форм міжнародних розрахунків 4. Порядок зді...
8893. Банківське обслуговування зовнішньоекономічної діяльності. Тестові завдання 25.93 KB
  Банківське обслуговування зовнішньоекономічної діяльності Тестові завдання 1. Ліцензії, які надають комерційним банкам для здійснення валютних операцій поділяють на: а) одноразові б) внутрішні в) генеральні г) усі відповіді правильні. 2. Внутрішн...
8894. Економічний аналіз діяльності банку 210.32 KB
  Економічний аналіз діяльності банку 1. Інформаційне забезпечення фінансово-економічного аналізу банків 2. Аналіз пасивів банку 3. Аналіз активів банку 4. Аналіз доходів, витрат і прибутку банку 5. Основні показники ефективності діяльності банку 1. І...
8895. Економічний аналіз діяльності банку Тестові завдання 25.76 KB
  Економічний аналіз діяльності банку Тестові завдання 1. До складу фінансової звітності входить бухгалтерський баланс та: а) звіт про прибутки та збитки б) звіт про прибутки та збитки, звітність про депозитні та кредитні операції в) звіт про прибут...
8896. Банківський менеджмент Тестові завдання 21.96 KB
  Банківський менеджмент Тестові завдання 1. Метою банківського менеджменту є: а) виявити банківські ризики б) забезпечити прибутковість діяльності банку в) оцінити кредитоспроможність клієнтів г) правильної відповіді немає. 2. Що розуміють під фун...
8897. Банківський менеджмент. Управління банківськими ризиками 151.78 KB
  Банківський менеджмент 1. Основи менеджменту в банку 2. Функції та елементи фінансового менеджменту в банку 3. Методи управління активами та пасивами банку 4. Управління банківськими ризиками 1. Основи менеджменту в банку Розглядаючи суть поняття б...
8898. Операції банків із залучення коштів 53.66 KB
  Операції банків із залучення коштів Поняття залучених банківських ресурсів. Характеристика депозитних операцій комерційних банків. Договірне регулювання вкладних операцій. Фонд гарантування вкладів фізичних осіб. 4.1. Поняття...
8899. Операції банків із запозичення коштів 55.23 KB
  Операції банків із запозичення коштів Поняття та класифікація запозичених ресурсів банківських установ. Суть та значення міжбанківського кредитування при формуванні запозичених ресурсів. Види, порядок надання та погашення кредитів...
8900. Операції банків з обслуговування платіжного обороту 103.13 KB
  Операції банків з обслуговування платіжного обороту Загальна характеристика платіжного обороту. Поняття системи безготівкових розрахунків та способи їхньої організації. Правила документообігу при здійсненні банками безготівкових ро...