50748

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

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

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

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

Украинкский

2014-01-29

78.5 KB

3 чел.

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


 

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

977. Планирование основных показателей работы предприятия 506 KB
  Содержание внутрифирменного планирования как функции управления промышленным предприятием. Актуальность планирования на современных машиностроительных предприятиях. План производства и реализации продукции. Расчет потребности предприятия в сырье, полуфабрикатах, основных материалах, вспомогательных материалах.
978. Завод дорожных плит производительностью 70 тысяч метров кубических в год 3.25 MB
  Технико-экономическое обоснование местоположения и мощности проектируемого предприятия. Охрана окружающей среды при производстве строительных материалов, изделий и конструкций. Экономическая оценка природоохранных мероприятий проектируемого предприятия. Архитектурно- планировочное и конструктивное решение проектируемого корпуса. Теплотехнический расчет щелевой пропарочной камеры. Хранение и дозировка комплексной добавки СУПЕРПЛАСТ С-3.
979. Транспортно-финансовый план автотранспортного предприятия 1.82 MB
  Расчет опорной производственной программы предприятия, определение финансовых результатов производственной деятельности АТП, разработка организационно-технических мероприятий, направленных на повышение эффективности работы предприятия и достижения поставленных целей, расчет проектируемой производственно программы для предприятия.
980. Аналіз економічного та соціального розвитку в Україні та місті Харкові 1021 KB
  Огляд теоретичних основ, становлення та проблематика місцевого самоврядування в Україні та м. Харкові. Стратегії та технології в системі планування та управління містом. Аналіз програми економічного і соціального розвитку м. Харкова на 2005 рік.
981. Система энергоснабжения подводного аппарата привязного типа 1.01 MB
  Энергоснабжение привязного малогабаритного телеуправляемого подводного аппарата, предназначенного для решения широкого круга задач – от макетирования новых элементов в структуре подводного аппарата до проведения обзорных и поисково-спасательных работ.
982. Расчет параметров защиты трансформаторов 691.5 KB
  Проектирование релейной защиты трансформаторов и автотрансформаторов. Продольная дифференциальная токовая защита с реле типов РНТ-560 и ДЗТ-11. Расчет уставок срабатывания с балансировкой токов плеч на автотрансформаторах тока. Максимальная токовая защита от междуфазных повреждений. Максимальная токовая защита от замыканий на землю.
983. Организация работы ОАО Костромская ГРЭС в условиях реструктуризации в электроэнергетике 386.5 KB
  Основой энергетики сегодняшнего дня являются топливные запасы угля, нефти и газа, которые удовлетворяют примерно девяносто процентов энергетических потребностей человечества. Динамика изменения тарифа на электроэнергию за 1999 - 2001 года.
984. Железобетонные плиты перекрытия и покрытия 427.5 KB
  Тепловая обработка входит в технологический процесс изготовления железобетонных изделий и занимает 70-80 % времени всего цикла изготовления изделий. Проектируемый цех по производству многопустотных плит перекрытий производительностью 19000 м3/год планируется разместить на территории действующего завода ОАО СЖБ-3 в городе Витебске.
985. Разработка аппаратной части системы автокалибровки и измерения скалярных параметров СВЧ устройств на базе современных микроконтроллеров 674 KB
  Классификация аппаратуры измерения комплексных параметров СВЧ сигнала. Требования к разрабатываемой системе и постановка задачи. Состав каждого комплекта прибора и требования к конструкции. Разработка аппаратной части измерительной системы Р2- Растр.