Vgraphics

 

  векторный клипарт
Самая свежая информация Stanley Finance отзывы у нас на сайте.

    татуировки векторная графика

    векторная АРТ графика

    изображения животных

    птицы векторные изображения

    рыбы векторные изображения

    рептилии векторная графика

    динозавры векторная графика

     насекомые векторная графика

    цветы и растения графика

  орнаметы векторные

    индейские орнаменты

    кельтские орнаменты

    русские орнаметы

    японские орнаменты

    викторианские орнаменты

    арабески

    узоры

    африканские узоры

    виньетки

    визитные карточки

  растровая графика

    фоновые рисунки и обои

    открытки

    шаблоны и костюмы PSD

    граффити

  gif-анимация

    3D gif-анимация

    авто  gif-анимация

    животные  gif-анимация

    АРТ gif-анимация

  шрифты

  бесплатный софт

  учебники и пособия

 

открытки к праздникам

  день РОЖДЕНИЯ

  знаки ЗОДИАКА

  Свадьба

  Новый год и Рождество

  Татьянин день

  день св. Валентина

  день защитника Отечества

  8 марта

  1 апреля

  Пасха

  1 мая

  день Победы

  день Молодежи

  день Знаний

 

Оглавление >>>

 

Открытая  техническая библиотека CNCexpert.ru
Библиотека бесплатных свободно распростроняемых изданий.

книги, учебники, пособия, справочники, журналы, документация, сборники нормативных документов, ГОСТы, СНИПы, свободно распростроняемый софт и др.

 

ГОСТы полный каталог
Сборник нормативных документов 2011г.

Формат: HTML. Страниц: более 320000. Государственные стандарты.

 

Открытый строительный каталог
Полный каталог нормативных документов в области строительства 201.

Формат: HTML. Более 400 разделов документации.

 

Открытый каталог энергетика
Библиотека главного инженера 2011г.

Формат: CHM
Информационный минимум для малых предпиятий. Kаталог основных нормативных документов в области энергетики

 

Как сделать сайт самому?

 

Автор пособия: Vgraphics

Год выпуска: 2005
Жанр: Пособие.
Описание:
Основы web - дизайна. Иллюстрированный самоучитель по созданию сайтов.
Первоисточники: Открытая библиотека дизайнера Vgraphics.ru.

Ресурсы: http://www.vgraphics.ru/

 

При использовании материалов сайта, ссылка на ресурс http://www.vgraphics.ru обязательна!

  Управление расположением элементов веб-страницы с помощью таблиц.

В World Wide Web довольно часто встречаются страницы, на которых произвольное расположение элементов достигается с помощью таблиц. В частности, такой подход часто применяют, если необходимо оставить на странице относительно большие “пустоты”.

Как можно этого достичь? Наверное, наиболее изящным и эффективны? решением было бы применение абсолютного позиционирования элемен тов, однако многие привыкли решать подобного рода задачи с помощью обычных таблиц. Поскольку границы между ячейками таблицы могут не отображаться, а ячейки могут быть как бы пустыми, такой способ некого рое время (до появления CSS) представлялся лучшим решением подоб ных задач. Давайте рассмотрим, как это делается.

Сначала определим стили будущей страницы — цвет фона и центрирование текста:

<STYLE> BODY { background-color: #FOE7F1;

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; } </STYLE>

Теперь можно задать параметры самой таблицы. При этом отступ от внутраннего края ячейки (CELLPADDING=) и расстояние между ячейками (CELLSPACING=) лучше задать равными нулю, чтобы ничто не отвлекало нас от задания минимальных размеров ячеек:

<TABLE WIDTH="99%" CELLSPACING="0" CELLPADDING="0">

Создание ячеек таблицы

Теперь нужно определить сами ячейки. Если посмотреть на рис. 8.4, то может показаться, что их меньше, чем на самом деле. В процессе опреде-ления ячеек бывает удобно временно установить в теге <TABLE> атрибут BORDER=. В этом случае все границы между ячейками будут видимы.

Кик видно из рисунка, четвертая строка этой таблицы — единственная, где определены все пять столбцов, но этого уже достаточно. Тем не менее, для верности лучше поместить прозрачный рисунок во всех “пустых” ячейках таблицы. В третьей и пятой строках таблицы объединены в столбцов. Эти строки используются в качестве вертикального отступи между графическими гиперссылками. Здесь помещен прозрачный рису нок, “растянутый” в высоту:

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol. gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

Как видите, высота этой строки равна 20 пикселам. Пустые ячейки в осталь ных строках используются для задания ширины столбцов, например, так.

<TD><IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"

BORDER="0" ALT=""></TD> 

Здесь помещен прозрачный рисунок, “растянутый” по горизонтали. Остальные “пустые” ячейки также заполнены прозрачными рисунками. размеры которых проставлены, исходя из того, что ширина каждого рисунка гиперссылки равна 120 пикселам, а ширина всех отступов — 20 пикселе и

Давайте окинем взглядом весь текст этой страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.О Transitional//EN">

<HTML>

<HEAD>

<ТITLЕ>Электронная библиотека</ТIТLЕ>

<STYLE> BODY { background-color: #FOE7F1;

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; }

</STYLE>

</HEAD>

<BODY>

<TABLE WIDTH="99%" BORDER="0" CELLSPACING="0" CELLPADDING="0">

<TR><TD СOLSPAN="5">

<Н2>Электронная библиотека</Н1>

</ТD>

</ТR>

<TR>

<TD><IMG SRC="Images/hudlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Xyдoжecтвeннaя">

<BR>Xyдoжecтвeннaя литература </TD>

<TD COLSPAN="4"><IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD>

</TR>

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

<TR><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3"

BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3" BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/naulit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT="Hayчнaя"><BR>Hayчнaя литература</ТD><ТD>

<IМG SRC="Images/diafanol.gif" WIDTH="20" HEIGHT="3"BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/diafanol.gif" WIDTH="120" HEIGHT="3" BORDER="0" ALT=""></TD></TR>

<TR><TD COLSPAN="5">

<IMG SRC="Images/diafanol.gif" WIDTH="4" HEIGHT="20" BORDER="0" ALT=""></TD></TR>

<TR><TD COLSPAN="4">

<IMG SRC="Images/diafanol.gif" WIDTH="280" HEIGHT="3" BORDER="0" ALT=""></TD><TD>

<IMG SRC="Images/detlit.gif" WIDTH="120" HEIGHT="120" BORDER="0" ALT=""><BR>Детская литература</ТD></ТR>

</TABLE>

</HTML>

В этом примере не поставлены сами гиперссылки, т. е. теги <А>, поскольку ни самой библиотеки, ни ее разделов пока что не существует. Добавить их не составит труда.

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

Однако, на наш взгляд, для решения подобных задач удобнее использовать абсолютное (и относительное) позиционирование элементов. При таком подходе, кстати, легче организовать и внутристраничную навигацию. Об этом пойдет речь в следующем разделе.

 

copyright © 2014 Vgraphics.ru