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-документа.


 

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

65301. Підвищення якості безперервнолитих заготовок за рахунок вдосконалення температурно-швидкісного режиму розливки та умов вторинного охолодження 2.46 MB
  У сучасних умовах коли об'єм металу що розливається на машинах безперервного лиття заготовок постійно збільшується підвищення ефективності процесу розливання як правило пов'язують із підвищенням якості отримуваних заготовок.
65302. ПІДВИЩЕННЯ ЕНЕРГЕТИЧНОЇ ЕФЕКТИВНОСТІ ТЕПЛОВОЗА АКТИВАЦІЄЮ РОБОЧИХ СЕРЕДОВИЩ 458.5 KB
  Метою дослідження є підвищення енергетичної ефективності тепловоза за рахунок поліпшення паливної економічності шляхом активації палива і раціонального використання енергії електродинамічного гальмування.
65303. МЕТОД ТА ЗАСІБ МОНІТОРИНГУ ДЕФЕКТІВ ПРОЕКТУВАННЯ ОБ’ЄКТНО-ОРІЄНТОВАНОГО ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 4 MB
  Дефекти програмного забезпечення в тому числі й дефекти проектування досліджуються багатьма вченими наприклад А. Дефекти обєктноорієнтованого проектування поділяють на дві групи функціональні та нефункціональні.
65304. Розроблення і синтез інтегрованих інформаційно-керуючих телематичних систем для колісних та гусеничних машин спеціального призначення 2.39 MB
  Оцінюючи вітчизняні КГМ спеціального призначеннязакордонні спеціалісти звертають увагу на слабку бортову інформаційнокеруючу систему ІКС таких машин або на її відсутність взагалі підвищену димність відпрацьованих газів в екстремальних умовах а саме на початку руху...
65305. НАУКОВО-ПРАКТИЧНІ ОСНОВИ ТЕХНОЛОГІЇ ЖИРІВ ФУНКЦІОНАЛЬНОГО ПРИЗНАЧЕННЯ 7.94 MB
  Однією із актуальних соціальних проблем нашого часу є розроблення нових вітчизняних технологій харчових продуктів функціонального призначення, спрямованих на захист та збереження здоров’я людини.
65306. Діагностика і прогнозування ресурсу зварних конструкцій методом акустичної емісії 1016.6 KB
  Робота присвячена питанням оцінки фактичного стану металевих конструкцій на стадіях, що передують виникненню тріщин, розробці методів АЕ діагностики й моніторингу, що ставлять метою завчасно виявити небезпеку та не допустити руйнування.
65307. Порушення мінерального обміну в організмі молочних кіз (діагностика і профілактика) 274 KB
  Продуктивність молочних кіз визначається інтенсивністю обмінних процесів для підтримки яких необхідним є постійне надходження з кормами поживних і мінеральних речовин в оптимальних кількостях та співвідношеннях...
65308. Комбінована дія магнітного поля промислової частоти, шуму, підвищеної температури повітря як проблема медицини праці 482 KB
  Наукова новизна роботи: уперше проведено комплексні гігієнічні дослідження комбінованої дії магнітного поля шуму підвищеної температури повітря у виробничих умовах та в хронічному лабораторному експерименті на білих щурах...
65309. Теоретичні та методичні основи управління навчально-творчою діяльністю студентів вищих навчальних аграрних закладів 492 KB
  Відповідний напрям професійної підготовки тісно повязаний з проблемою управління навчальнотворчою діяльністю студентів яка має вирішуватися на основі системного підходу з розробкою інноваційних педагогічних технологій і дидактичних засобів.