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


 

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

40301. Показания к помещению и выписке 29 KB
  Основания для госпитализации: 1 Основаниями для госпитализации в психиатрический стационар являются наличие у лица психического расстройства и решение врача психиатра о проведении обследования или лечения в стационарных условиях либо постановление судьи. 3 Помещение лица в психиатрический стационар за исключением случаев предусмотренных статьей 29 настоящего Закона осуществляется добровольно по его просьбе или с его согласия. 4 Несовершеннолетний в возрасте до 15 лет помещается в психиатрический стационар по просьбе или с...
40302. ПОМРАЧЕНИЕ СОЗНАНИЯ 30.5 KB
  дезориентировка аллопсихическая амнестическая аутопсихическая бредовая ложные представления об окружающем соматопсихическая двойная ориентировка амнезия на период нарушенного сознания тотальная или частичная симптомы расстройства сознания: анозогнозия неузнавание или отрицание собственной болезни невозможность правильно оценить собственный дефект. СИНДРОМЫ ПОМРАЧЕНИЯ СОЗНАНИЯ Оглушение характеризуется повышением порога ко всем раздражителям и обеднением психической деятельности. ДЕЛИРИЙ это иллюзорногаллюцинаторное...
40303. Прогрессивный паралич 34 KB
  Неврологические симптомы: синдром Аргайла Робертсона отсутствие прямой и содружественной реакции зрачков на свет при сохранении реакции на конвергенцию и аккомодацию; сужение миоз реже расширение мидриаз зрачков их неравномерность анизокория и деформация. Формы: экспансивная маниакальная форма; эйфорическая форма; простая дементная; депрессивная форма; циркулярная форма. Стационарный паралич форма с особенно медленным течением.
40304. ПСИХООРГАНИЧЕСКИЙ СИНДРОМ 25 KB
  Снижение интеллекта снижение уровня суждений. Снижение дисфория злобная раздражительность эйфорический апатический.
40305. РАССТРОЙСТВА АССОЦИАТИВНОГО ПРОЦЕССА 27 KB
  Ускорение мышления ускоренное течение ассоциативных процессов мысли очень быстро сменяют друг друга их много больной не успевает их высказывать. Замедление мышления бедность ассоциаций замедленное течение мысли. Патологическая обстоятельность мышления чрезвычайная вязкость тугоподвижность мыслительных процессов трудность переключения невозможность отделить главное от второстепенного. Персеверация мышления патологическое застревание задержка на одних и тех же представлениях что выражается в повторениях.
40306. РАССТРОЙСТВА ИНТЕЛЛЕКТА 25 KB
  Тотальное слабоумие. Частичное слабоумие характеризуется выраженными нарушениями памяти. Шизофреническое слабоумие апатическое или атактическое характеризуется интеллектуальной бездеятельностью безынициативностью в то время как предпосылки к умственной деятельности еще длительное время могут сохраняться.
40307. РАССТРОЙСТВА ПАМЯТИ 25.5 KB
  Фиксационная амнезия потеря способности запоминать фиксировать текущие события. Прогрессирующая амнезия характеризуется постепенным ослаблением памяти причем в первую очередь ослабляется память на текущие события на то что было недавно на события последних лет. Человек может вспоминать действительно имевшие место события но относить их к совсем иному времени псевдореминесценции 2.
40308. Самоповреждение 27.5 KB
  Различают: cознательные самоповреждения с целью получения выгоды симуляция cознательные самоповреждения в ответ на бредовые убеждения cамоповреждения в результате навязчивых действий таких как сковыривание царапанье натирание cознательные или бессознательные самоповреждения для подавления психологических проблем неосознаваемых пациентом бессознательные повреждения произведенные другому лицу с целью удовлетворения психологической необходимости преступника. и тенденцией к самоповреждениям для инсценировки его симптомов.
40309. Синдром Кандинского-Клерамбо 35.5 KB
  Псевдогаллюцинации восприятия возникающие как и галлюцинации без реального объекта. В отличие от истинных галлюцинаций псевдогаллюцинации не отождествляются с реальными предметами воспринимаются как сделанные. Самое существенное отличие: больной ощущает что псевдогаллюцинации сделаны вызваны некоей внешней силой причиной. В структуру галлюцинаторнопараноидного синдрома входят зрительные слуховые обонятельные вкусовые тактильные висцеральные кинестетические псевдогаллюцинации.