Лабораторная работа №4. Форматирование и таблицы

 

В ходе прошлого урока мы добавили в состав веб-странички несколько графических элементов, в частности текстурный фон документа и фотографию его создателя. Давайте подготовим еще один рисунок, который послужит заголовком нашего веб-сайта, - его ширина будет составлять 700 пикселов, чтобы рисунок корректно смотрелся в окне браузера при экранном разрешении 800х600 точек. Переведем его в индексированную палитру и сохраним под именем title.gif в папке images, где, как мы условились раньше, будут содержаться все составляющие наш сайт графические изображения.

Теперь нам необходимо создать три независимые таблицы, расположенные одна под другой: первая из них буде играть роль заголовка, во второй мы сохраним само информационное содержание нашего проекта, а в последней нижней таблице мы разместим информацию о создателях проекта. Давайте рассмотрим каждую из этих таблиц более подробно.

Первая таблица, в которой мы сохраним графический заголовок веб-странички, будет состоять из двух строк: верхняя стока предназначена для публикации самого заголовка, следовательно ее высота должна быть равна высоте рисунка, нижняя будет играть роль разделителя между заголовком и контентным полем, поэтому ее высоту мы сделаем равной десяти пикселам. Ширина таблицы также является равной ширине изображения, используемого нами в качестве заголовка сайта. Однако строка разделителя является пустой, и некоторые браузеры (в частности, Netscape) игнорируют такие строки при отображении таблиц на экране компьютера. Очевидно, что пустот в таблице быть не должно, посему данную строку следует обязательно чем-нибудь заполнить. Создадим в графическом редакторе новое изображение размером 1х1 пиксел. Переведем рисунок в трехцветную индексированную палитру и сделаем основной цвет рисунка прозрачным. После чего сохраним данный файл в папке images под именем blank.gif – эта крошечная картинка послужит в составе нашего проекта «распоркой» для строк таблиц, не включающих более никакого полезного содержимого. Очевидно так же, что разделительная строка таблицы должна иметь белый фон, поскольку мы используем на нашей страничке текстурную заливку.

Графическое изображение заголовка нашего сайта включает три условных значка, каждый из которых мы можем превратить при помощи команды <MAP> в гиперссылку: значок с изображением письма (слева) - в ссылку на наш адрес электронной почты; с изображением домика (в центре) – на главную (домашнюю) страничку нашего ресурса; с изображением фотоаппарата (справа) – на фотогалерею. Итак, мы уяснили для себя структуру будущей таблицы. Давайте запишем теперь ее код на языке HTML.

<!--HEADER TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#000000” BGCOLOR=”#FFFFFF” WIDTH=”700>

<MAP NAME=”title”>

<AREA ALT=”Пишите мне!” SHAPE=”circle” COORDS=”284, 81, 17” HREF=”mailto:[email protected]”>

<AREA ALT=”Домой!” SHAPE=”circle” COORDS=”349, 78, 21” HREF=”http://www.myhost.ru/index.html”>

<AREA ALT=”Мои фотографии!” SHAPE=”circle” COORDS=”411, 80, 16” HREF=”http://www.myhost.ru/pictures.html”>

</MAP>

<tr>

<td height=”100” bgcolor=”#FFFFFF”>

<center>

<img border=”0” src=”images/title.gif” width=”700” height=”101” usemap=”#title”>

</center>

</td>

</tr>

 

<tr>

<td height=”10” bgcolor=”#FFFFFF”>

<center>

<img border=”0” src=”images/blanc.gif” width=”1” height=”1”>

</center>

</td>

</tr>

</TABLE>

</CENTER>

<-- HEADER TABLE END -->

 

Вторая таблица будет выполнять в нашем проекте функцию поля, в котором мы разместим информационное содержимое сайта. Ее ширина должна быть равна ширине первой таблицы, но здесь нам следует указать вертикальное выравнивание содержимого ячеек по их верхнему краю. Таблица будет состоять из двух столбцов: в левом мы разместим навигационные гиперссылки (для контрастности выделим этот столбец фоновым цветом), в правом будет помещаться само содержимое веб-странички (фон этой ячейки будет белым). Мы получаем следующий код:

 

<!--CONTENT TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#000000” WIDTH=”700>

<tr>

<td width=”150” bgcolor=”#FFCC66”>

<center>

<!--Навигация-->

</center>

</td>

<td width=”550” bgcolor=”#FFFFFF”>

<--Содержимое веб-странички-->

</td>

</tr>

</TABLE>

</CENTER>

<-- CONTENT TABLE END -->

 

Последняя таблица, состоящая из одной ячейки с белым фоном, будет включать сведения о создателях сайта:

 

<!--FOOTER TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#111111” BGCOLOR=”#FFFFFF” WIDTH=”700” cellspacing=”0” cellpadding=”0”>

<tr>

<td height=”10”>

<center>

<font face=”Verdana” size=”1pt”> &copy; &nbsp; Copyright Ваше имя 2004, All rights reserved. </font>

</center>

</td>

</tr>

</TABLE>

</CENTER>

<-- FOOTER TABLE END -->

 

Теперь добавим навигационные гиперссылки в ячейку второй таблицы, предназначенную для размещения элементов навигации:

 

<DIV ALIGN=”CENTER” STYLE=”font-size: 12px; font-family: Verdana; font-weight: bold;”>

<A HREF=”index.html”>Главная</A><BR>

<A HREF=”about.html”>Обо мне</A><BR>

<A HREF=”hobby.html”>Увлечения</A><BR>

<A HREF=”pictures.html”>Фотографии</A><BR>

</DIV>

 

Откроем файл index.html, содержащий нашу домашнюю страничку, и удалим из него все содержимое, за исключением базовой разметки документа. Теперь поместим в код веб-странички описание всех подготовленных нами таблиц. В правой ячейке второй таблицы разместим текстовое содержание и фотографию владельца сайта, отформатировав эти объекты при помощи директивы <DIV>. В результате мы получим следующий код:

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE>Моя первая веб-страничка</TITLE>

</HEAD>

<BODY BGCOLOR=”#FCEAD4” TEXT=”#000000” LINK=”#014CA1” VLINK=”#FD1200” ALINK”#FD1200” BACKGROUND=”images\background.gif>

 

<!--HEADER TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#000000” BGCOLOR=”#FFFFFF” WIDTH=”700>

<MAP NAME=”title”>

<AREA ALT=”Пишите мне!” SHAPE=”circle” COORDS=”284, 81, 17” HREF=”mailto:[email protected]”>

<AREA ALT=”Домой!” SHAPE=”circle” COORDS=”349, 78, 21” HREF=”http://www.myhost.ru/index.html”>

<AREA ALT=”Мои фотографии!” SHAPE=”circle” COORDS=”411, 80, 16” HREF=”http://www.myhost.ru/pictures.html”>

</MAP>

<tr>

<td height=”100” bgcolor=”#FFFFFF”>

<center>

<img border=”0” src=”images/title.gif” width=”700” height=”101” usemap=”#title”>

</center>

</td>

</tr>

 

<tr>

<td height=”10” bgcolor=”#FFFFFF”>

<center>

<img border=”0” src=”images/blanc.gif” width=”1” height=”1”>

</center>

</td>

</tr>

</TABLE>

</CENTER>

<-- HEADER TABLE END -->

 

<!--CONTENT TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#000000” WIDTH=”700>

<tr>

<td width=”150” bgcolor=”#FFCC66”>

<center>

<!--Навигация-->

<DIV ALIGN=”CENTER” STYLE=”font-size: 12px; font-family: Verdana; font-weight: bold;”>

<A HREF=”index.html”>Главная</A><BR>

<A HREF=”about.html”>Обо мне</A><BR>

<A HREF=”hobby.html”>Увлечения</A><BR>

<A HREF=”pictures.html”>Фотографии</A><BR>

</DIV>

</center>

</td>

<td width=”550” bgcolor=”#FFFFFF”>

<--Содержимое веб-странички-->

<H1 ALIGN=”CENTER”>ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</H1>

<DIV ALIGN=”JUSTIFY” STYLE=”font-size: 12px; font-family: Verdana;”>

<P><IMG SRC=”images\mypicture.jpg” WIDTH=”ширина рисунка в пикселах” HEIGHT=”высота рисунка в пикселах” ALIGN=”LEFT” BORDER=”0”> Спасибо Вам, уважаемый посетитель, за то, что ВЫ нашли время и возможность заглянуть на мою страничку во Всемирной Сети. Здесь Вашему вниманию будет предложена информация <EM>о моих увлечениях, моей биографии, моих друзьях, работе и семье</EM>. В отдельной рубрике я опубликую несколько собственных фотографий. Надеюсь, они вам понравятся.

<P>В последнее время мой сайт претерпел ряд существенных изменений, благодаря которым он, на мой взгляд, стал выглядеть значительно лучше и профессиональнее. Этот проект будет постоянно совершенствоваться, поэтому его оформление время от времени будет меняться, а количество полезных функций – возрастать.

<P>Заходите ко мне почаще!

</DIV>

</td>

</TR>

</TABLE>

</CENTER>

<-- CONTENT TABLE END -->

<!--FOOTER TABLE BEGIN -->

<CENTER>

<TABLE BORDER=”1” BORDERCOLOR=”#000000” BGCOLOR=”#FFFFFF” WIDTH=”710” cellspacing=”0” cellpadding=”0”>

<tr>

<td height=”10”>

<center>

<font face=”Verdana” size=”1pt”> &copy; &nbsp; Copyright Ваше имя 2004, All rights reserved. </font>

</center>

</td>

</tr>

</TABLE>

</CENTER>

<-- FOOTER TABLE END -->

</BODY>

</HTML>

 

Сохраним получившуюся страничку на диске и откроем ее в браузере.

 

Задание:

Отладить приведенную программу в Блокноте. В подготовленные места ввести свои собственные необходимые данные.