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


 

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

32119. La metaphore. Se base sur le transfert de la nomination d’un referent sur l’autre liee au premier par la ressemblensce. C’est une comparaison en raccourci 12.18 KB
  On distingue : L metp 3 termes : vous netes quune pie bevrde 2 termes : le desert une mer de sble un terme : mon oiseux u point de vue grmmt les met puvent etre nominles Mon beu nvire o m memoire verble lombre violente des touffes de giroflee eclboussit le mur rugueux. djectivlemon esprit mer dverbileJi quitee Mdrid prcournt philosophiquement les des Cstilles L semntique des imges on distingue : l met sptile Une mer de sble nthropomorphique quel princesse nimlomorphique : Le troupeuconcret de ponts...
32120. La metonimie et ses variantes, la synecdoque et l’antonomase sont des figures basees sur la contiguitee(sur le rapport de voisinage, d’interdependance) et ne depend pas de la vision personnele de l’auteur 11.84 KB
  Types de metonimies : on prend le contennt pour le contenu et vice vers : boire une bouteille=boisson on prend le producteur pour le produit : un beu Millet=tbleu on prend le lieu dorigine pour le produit : un bordeuxvin fbriquee Bordeux on prend l consequence pour l cuse et vicevers : ce trvil est remrqubleresultt On prend le concret pour lbstrit : l botteloppression l tyrnnie On prend l qulitee pour le porteur de cette qulitee :l bontee memeune femme tres bonne On prend le tout pour l prtie et...
32122. le style fonctionnele, theorie des souslangues 12.59 KB
  En fonction des fcteurs susmentionnes on distingue trditionnement les style suivnts: prle communiction quotidienne scientifique science officiel ffiresdroit publiciste Politique Style des belleslettres rts et litterture L theorie de souslngues.notion de discours les recherces dns le domine de l differencition slylistique de l lngue ont demontre que l theorie des styles fonct.ne decrit ps l lngue d'une mniere exhustive; elle ne met ps en vleur que des phenomenes “centrux†Chque souslngues comprend trois types...
32124. les traits specifiques du francais parle 26.5 KB
  Par le terme modalité on désigne les rapports qui existent entre le fait énoncé et la réalité ainsi que lattitude du sujet parlant envers ce fait. Pour traduire la modalité, le français dispose de moyens multiples qui relèvent de la grammaire, du lexique et de la phonétique
32125. Les notions principales de la sience sont apparues dans l’Antiquité 11.67 KB
  Les notions principles de l sience sont pprues dns lntiquité. Plusieurs procédés de style décrit pr les nciens ont grdé leurs noms grecs : tropes métphore métonymie etc. les etudes des svnts du Moyen ge ont pprofondi les idees des nciens mis un grnd essort est du ux linguistes des 1617 siecles qui ont posé le problème de l norme cthegorie neuve pour les etudes linguistiques. l linguistique connu un nouvel essor vec les trvux dHumbolt et de Sussure lopposition entre l lngue et l prole fit ressurgir le problème du style.
32126. la problematique de cette science est riche ce qui s’explique par le parcours assez long qu’elle a suivi avant de retrouver son autonomie 11.47 KB
  On peut essyer de controler les definitions de lobjet detude de l stylistique proposes pr des uteurs de mnuels : on ur chque fois une definition prticuliere. Les stylisticiens estimeent que cette science étudie les styles de l lngue les procédés expressifs propres ux unités linguistiques les styles des oeuvres littérires publicistes scintifiques et utres ; les prticulrités expressifs des styles fonctionnels. Guirud lobjet detudes de l stylistique est exprime comme c L tâche de l stque est de reconnître de décrire de définir et de...