Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 151


Информационный Канал Subscribe.Ru
htmlbook.ru Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.

Предлагаю разместить рекламу в справочнике по тегам HTML. Ваши преимущества в этом случае следующие.

  • Справочник по тегам весьма актуален и востребован и пользуется большой популярностью.
  • Справочник распространяется бесплатно, а значит, охватит значительную аудиторию.
  • Справочник работает локально, поэтому можно добавлять достаточно объемную рекламу.
  • Несмотря на то, что подобные справочники уже существуют, мой по сравнению с ними имеет ряд преимуществ: написан доступным языком, хорошо структурирован, много примеров.
  • Целевая аудитория связана с темой создания сайтов, что важно для компаний предоставляющих хостинг и дизайн-студий.
  • Файл распространяется по вирусной технологии, любой человек может его выкладывать в сеть и давать своим друзьям, это обеспечивает широкое распространение.

В рекламный пакет входит 20 баннеров размером 468х60 пикселов или одна рекламная статья, стоимость 20 WMZ. Если за ориентир взять 20 тыс. скачиваний файла (по самым скромным подсчетам), то получим 400 тыс. показов баннеров. Солидно! Может цену повысить?

Аналог можно посмотреть на примере справочника по CSS.

Скачать справочник по CSS



Для тех, кто приобрел книгу "Ускорение работы сайта", справочник по HTML дается на хяляву и без всякой рекламы. Чтобы получить бонус, отправьте мне по почте ответ на первый вопрос к главе 8 (стр. 157) из книги "Ускорение работы сайта". Остальные могут купить книгу в одном из интернет-магазинов.

  • Купить книгу в Books.Ru

  • Купить книгу в Озоне

  • Купить книгу в Болеро


    • Сегодня новая, в каком-то смысле юбилейная статья, посвященная слоям. Адрес статьи на сайте — htmlbook.ru/content/250.html


    Слой с одним «отрезанным» уголком

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

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

    Рис. 1. Изображение уголка

    Рис. 1. Изображение уголка

    Рамка вокруг рисунка приведена только для наглядности, необходимости в ней нет. В изображении не должна быть включена прозрачность, используется два цвета — фона и слоя, как показано на рис. 2.

    Рис. 2. Цвета, используемые в изображении уголка

    Рис. 2. Цвета, используемые в изображении уголка

    Теперь добавляем наш уголок к слою в качестве фонового рисунка и устанавливаем нужный цвет фона. Все это можно проделать через универсальный стилевой атрибут background. Кроме того, следует отключить повторение фона через значение no-repeat (пример 1).

    Пример 1. Создание слоя с уголком
    <html>
    <head>
    <style type="text/css">
    #corner {
    background:
     #99CEDF /* Цвет фона */
     url(corner.gif) /* Путь к файлу с уголком */
     no-repeat; /* Отключаем повторение фона */
     padding: 10px; /* Поля вокруг текста */
     text-indent: 20px

    /* Смещение первой строки */

    }

    </style>
    </head>
    <body>

    <div id=corner>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    </body>
    </html>

    Результат примера показан ниже.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Чтобы не получилось так, что первая строчка выходит за пределы цветной области в области уголка, требуется сдвинуть строку вправо. Это делается с помощью свойства text-indent, его значение устанавливает отступ первой строки. Расстояние подбирается экспериментально в зависимости от размеров рисунка уголка и текста.

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

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

    Рис. 3. Изображение для создания уголка

    Рис. 3. Изображение для создания уголка

    Поскольку ширина слоя может зависеть от ширины окна браузера и разрешения монитора, т.е. заранее не известна, то рекомендуется намеренно увеличить ширину рисунка, например, до 1200 пикселов и более. Бояться, что появится горизонтальная полоса прокрутки, не нужно, поскольку изображение используется как фон, и все лишнее будет <обрезано>. Аналогично обстоит дело и с высотой, но здесь можно ограничиться значением около 500 пикселов.

    Код останется прежним, за исключением того, что уберется цвет фона (пример 2).

    Пример 2. Использование фонового рисунка
    <html>
    <head>
    <style type="text/css">
    #corner {
    background:
     url(corner.gif) /* Путь к файлу с уголком */
     no-repeat; /* Отключаем повторение фона */
     padding: 10px; /* Поля вокруг текста */
     text-indent: 20px /* Смещение первой строки */

    }

    </style>
    </head>
    <body>

    <div id=corner>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    </body>
    </html>

    При этом способе формирования уголка следует принимать во внимание, что графический файл с фоновым рисунком может оказаться большим по объему и пользователю придется ожидать его загрузки.

    Только не спрашивайте, как сделать два обрезанных уголка, в статье дается на это намек, остается только догадаться. Или посмотрите другую статью, где аналогично происходит манипуляция со слоями — Создание тени по принципу «луковой шелухи».



    Интересные темы форума


    Золотое сечение

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

    Интересные темы по HTML

    Основные ссылки на темы форума по HTML собраны в одном месте. Так что если вас интересует, как изменить полосы прокрутки, создать новое окно заданных размеров, использовать ли нестандартные шрифты и др. вопросы, то вначале загляните сюда.


    Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
    Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

    http://subscribe.ru/
    http://subscribe.ru/feedback/    		 Подписан адрес:
    Код этой рассылки: inet.webbuild.htmlbook    		 Отписаться
    В избранное