Практикум

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

Импортируйте получившуюся картинку в редактор растровой графики, например Adobe Photoshop, разрежьте ее на семь частей (заголовок с баннером, разделительная линия, четыре навигационные кнопки и изображение с надписью «E-mail») с помощью встроенной функции редактора «Изображение > Создать копию» и от кадрируйте рисунок с помощью инструмента «Рамка». Теперь сохраните все получившиеся файлы в формате GIF89a в директории C:\MySite\Images,задав для белого фона ваших изображений свойство прозрачности, и оптимизируйте их по объему с применением специального программного обеспечения, которое вы изучили в пятом уроке, либо с использованием встроенного оптимизатора Adobe Photoshop. Настало время внести соответствующие изменения в html-документы, составляющие ваш сайт.  Откройте Блокнот и создайте пустой текстовый файл с названием shablon.html —он станет вашим шаблоном, в который вы впоследствии сможете помещать любое информационное содержимое. Перенесите туда основной код созданного вами ранее файла index.html, удалив из него все информационное наполнение: 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML>  <HEAD>  <TITLE>Moя домашняя страничка</TITLE>  </HEAD>  <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"  ALINK="#FF0000" BACKGROUND="Images\background.gi f">  </BODY>  </HTML>  Теперь запишите между тегами <BODY> и </BODY> код первичной таблицы, в которой вы затем разместите все необходимые элементы:  <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">  <TR>  <!-Сюда вставляется заголовок странички -->  <TD COLSPAN="2" WIDTH="400">  </TD>  </TR>  <TR>  <!-Пустая строка для разделительной линии -->  <TD COLSPAN="2" WIDTH="400">  </TD>  </TD>  <TR>  <!-Здесь размещается навигация -->  <TD WIDTH="82" VALIGN="TOP" ALIGN="CENTER">  </TD>  <!-Основное поле для текста -->  <TD WIDTH="318" BGCOLOR="#FFFFFF" VALIGN="TOP">  <P ALIGN="JUSTIFY">  </P>  </TD>  </TR>  <TR>  <!-Еще одна пустая строка для разделительной линии -->  <TD COLSPAN="2" WIDTH="400">  </TD>  </TR>  <TR>  <!-E-mail -->  <TD WIDTH="82"></TD>  <!-Copyright -->  <TD WIDTH="318"></TD>  </TR>  </TABLE> 

Обратите внимание на то, что для ячейки, определяющей текстовое поле, при помощи атрибута BGCOLOR задан белый фоновый цвет. Поскольку параметр BORDER данной таблицы установлен нулевым, вы не увидите ее в окне броузера. 

В ячейку таблицы, предназначенную для размещения кнопок навигации, вставьте другую «прозрачную» таблицу с одним-единственным столбцом шириной чуть меньше ширины данной ячейки и с количеством строк, большим количества имеющихся у вас кнопок в два раза: 

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="80">  <TR>  <TD></TD>  </TR>  <TR>  <TD HEIGHT="20"></TD>  </TR>  <TR>  <TD></TD>  </TR>  <TR>  <TD HEIGHT="20"></TD>  </TR>  <TR>  <TD></TD>  </TR>  <TR>  <TD HEIGHT="20"></TD>  </TR>  <TR>  <TD></TD>  </TR>  <TR>  <TD HEIGHT="20"></TD>  </TR>  </TABLE> 

Кнопки навигации будем размещать в таблице через строку. Пустые ячейки между картинками, высота которых принята равной двадцати пикселам, будут играть роль своеобразных разделителей, предназначенных для того, чтобы кнопки не сливались друг с другом по вертикали.  Теперь запустите программу PictureDiser и разрежьте ваш заголовок в соответствии с эскизом таким образом, чтобы рекламный баннер отображался в отдельной ячейке таблицы — туда вы чуть позже включите код динамической загрузки рекламных изображений из баннерообменной сети. Назначьте в качестве директории, в которую будут помещены фрагменты разрезанного заголовка, папку C:\MySite\Images, затем откройте автоматически сгенерированный программой Picture Diser html-документ в текстовом редакторе и скопируйте код созданной им невидимой таблицы в соответствующую ячейку таблицы файла shablon.html. Подправьте пути к фрагментам заголовка, если это необходимо. Осталось только разместить в соответствующих ячейках подготовленной вами таблицы ссылки на все недостающие графические элементы, связать кнопки навигации гиперссылками с соответствующими документами сайта, назначить изображению конверта гиперсвязь с вашим адресом электронной почты и сохранить файл на диске.  В ячейке таблицы, помеченной вами как «основное поле для текста», разместите информационное содержимое вашего документа подобно тому, как мы это делали в предыдущих уроках. Теперь можно повторно сохранить получившийся файл на диске, но уже под именем index.html. Страничка готова. Другие документы сайта модифицируются из файла shablon.html по аналогичной схеме.