Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • HTML

Тонкая голубая линия

  • 27.10.2001
Total
0
Shares
0
0
0
0
0
0

Автор статьи: Головин Андрей

Как сделать отступ первой строки? Как нарисовать черту шириной 1 пиксел? Как точно задать размер ячейки таблицы? Казалось бы такие разные вопросы, а решить их можно с использованием одного и тогоже элемента. Вот он

Разглядели? С трудом? А так:
>

И это тоже он:

Этот универсальный элемент — изображение формата .gif шириной и высотой 1 пиксель. Чем же он нам так симпатичен? Во-первых, два раза его загрузка произошла из локального кэша. А то, что загрузилось с сервера имеет размер 41 байт. Во-вторых, размеры его мы можем менять по своему усмотрению, изменение их браузер проведет не отнимая много времени. Посмотрите код, который использовался для показа вам этого элемента:



Другим элементом подобного рода является .gif в формате, использующем прозрачность. Посмотрите на него:

Не напрягайте зрение и не выкручивайте ручки своих мониторов. Вы его не увидите, так как это, не что иное как 1 пиксель прозрачности.

Вы спросите, а как можно использовать то, что разглядеть невозможно? Дело в том, хоть он и не виден, место он занимает ощутимо, в полном соответсвии с атрибутами WIDTH и HEIGHT. Разглядеть его в следующем примере вам также не удастся, но увидеть его действие вы сможете.

В этом абзаце отступ первой строки от левого края обеспечивается изображением в формате .gif с прозрачностью.

Вот код:

<IMG SRC=”images/1pix_t.gif” WIDTH=50 HEIGHT=1 ALIGN=LEFT>

Процедура создания прозрачного .gif в Adobe Photoshop очень проста. Последовательность такова: Создайте новую картинку шириной и высотой в 1 пиксел (File > New). Далее для удобства можно дать команду Fit to screen из меню View (Ctrl + 0). Преобразуем картинку к формату индексированных цветов (Image > Mode > Indexed Color), выбрав точную палитру (Exact), которая должна содержать 2 цвета. Теперь выбираем команду экспорта в формат GIF89a (только он поддерживает прозрачность) File > Export > GIF89a Export. Видим такую картинку:

0009_01.gif - 7 650b

Пипеткой можно выделить тот цвет, который будет прозрачным (на самом деле их может быть несколько). В нашем случае это цвет 1, т.е. белый. Выделям его и жмем на кнопку «Ок». Все Чудесный универсальный элемент готов!

Как еще можно использовать изображения подобного рода. Например в таблицах. Моя любимая тема — рамки и все их вариации. Вот подобного рода пример:

Этот абзац обведен в рамку с помощью изображения размером 1×1 пиксель

Код несколько нетривиален, но ведь вы и пришли сюда, чтобы разобраться как это все работает.

<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=”80%” ALIGN=”CENTER”>
<TR><TD><IMG SRC=”images/1pix_gr.gif” WIDTH=1 HEIGHT=1></TD>
<TD BACKGROUND=”images/1pix_gr.gif”><IMG SRC=”images/1pix_t.gif” WIDTH=1 HEIGHT=1></TD><TD>
<IMG SRC=”images/1pix_gr.gif” WIDTH=1 HEIGHT=1></TD></TR>
<TR><TD BACKGROUND=”images/1pix_gr.gif”><IMG SRC=”images/1pix_t.gif” WIDTH=1 HEIGHT=1></TD>
<TD BGCOLOR=”#F0FFF0″ STYLE=”padding: 3px;”>Этот абзац обведен в рамку с помощью изображения размером 1×1 пиксель</TD>
<TD BACKGROUND=”images/1pix_gr.gif”>
<IMG SRC=”images/1pix_t.gif” WIDTH=1 HEIGHT=1></TD></TR>
<TR><TD><IMG SRC=”images/1pix_gr.gif” WIDTH=1 HEIGHT=1></TD>
<TD BACKGROUND=”images/1pix_gr.gif”>
<IMG SRC=”images/1pix_t.gif” WIDTH=1 HEIGHT=1></TD>
<TD><IMG SRC=”images/1pix_m.gif” WIDTH=1 HEIGHT=1>
</TD></TR>
</TABLE>

Total
0
Shares
Телеграфировать 0
Поделиться 0
Репост 0
Твитнуть 0
alexvolkov

Предыдущий материал
  • JavaScript

Использование Cookies

  • 26.10.2001
  • alexvolkov
Read More
Следующий материал
  • PHP

Страничный вывод данных

  • 27.10.2001
  • alexvolkov
Read More
Вас также может заинтересовать
Read More
  • HTML

Оптимизация. Важность тега TITLE

  • Алексей Волков
  • 30.11.2009
Read More
  • HTML

Советы начинающему верстальщику HTML

  • Алексей Волков
  • 25.11.2009
Read More
  • HTML

HTML – Долой тег hr из html разметки

  • Алексей Волков
  • 14.11.2009
Read More
  • HTML

“Резиновая” рамка с фигурными углами

  • alexvolkov
  • 27.07.2005
Read More
  • HTML

Создай свою Web-страницу за пять минут!

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

Блокнотик с подсветкой

  • Алексей Волков
  • 31.03.2005
Read More
  • HTML

HTML-редактор? Вот и редактируй!

  • Алексей Волков
  • 21.08.2003
Read More
  • HTML

Выбираем HTML-редактор

  • Алексей Волков
  • 14.08.2003

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Рассылка как продукт
    • 24.07.20
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.18
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.18
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.17
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.17
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter