Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 108
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Предлагаю организациям и всем, кто желает продвинуть свой проект, разместить рекламу в электронной книге «Приемы верстки веб-страниц». Эта книга распространяется бесплатно в формате PDF. Реклама формата А4 размещается на второй странице книги. Преимущества, которые дает такой способ рекламы:1. Ваша реклама располагается на второй странице, сразу же после обложки, следовательно, с ней ознакомятся все читатели.
2. Формат страницы А4, что больше любого существующего ныне размера баннера. Представьте себе рекламу на весь экран монитора, при этом она не вызывает раздражения у читателей, как баннерная реклама.
3. В рекламе можно размещать не только изображения, но и текст, таким образом, подробно описать все ваши преимущества.
4. В тексте допустимо размещать любые ссылки на ваш сайт.
5. Отношение к такой рекламе положительное, ведь она размещается в книге, поэтому рекомендуется автором книги. Таким образом, авторитет автора распространяется не только на содержание книги, но и на весь его контент, включая любую рекламу.
Прошлую редакцию книги скачало с сайта около 50 тыс. человек. Учитывая, что книга распространяется и другими способами, количество копий книги, и, следовательно, вашей рекламы, можно оценить как 80-100 тыс.
Условия размещения рекламы.
Реклама размещается в книге на один месяц.
Книга размещается на сайте, однако вы можете распространять ее самостоятельно
любыми средствами.
Стоимость рекламы составляет 100$, оплата в WebMoney.
От вас только требуется предоставить подготовленный макет рекламы формата А4.
В ней могут быть любые ссылки, рисунки и текст.
Могу выслать вам книгу в формате PDF, в архиве она занимает около 400 кБ, для
ознакомления.
Для обсуждения условий и предложений, пишите по адресу vlad@htmlbook.ru.
Сегодня завершающая статья о фиксированной верстке с помощью слоев. Предполагаются еще некоторые дополнения, поэтому я пока не стал выкладывать этот материал на сайт. Так что эта завершающая статья может завершаться еще два или три выпуска рассылки. Более тему о фиксированном дизайне в ближайшее время затрагивать не буду, а подготовлю статьи о создании меню или языке JavaScript. Опять же, предлагайте свои темы, чтобы вам хотелось узнать и пишите на мой ящик vlad@htmlbook.ru.
Фиксированный дизайн. Макет с тремя колонками
Наряду с использованием макета с двумя колонками, находит применение и верстка в три колонки. В этом случае одна из колонок содержит навигацию — ссылки на разделы сайта, вторая — контент, информационное наполнение страницы, а третья отдается под небольшие тексты, формы, новости, рекламу. В общем, много что можно разместить в дополнительной колонке, пустовать место не будет. Встречается и смешенный подход, когда на главной странице сайта используется три колонки, а на внутренних страницах макет верстается в две колонки. Это продиктовано объемом и структурой информации, главное, чтобы пользователям было удобно находить и читать нужные материалы.
При создании трех колонок применяются те же принципы, что и при верстке двумя колонками. Используемые приемы можно условно поделить на две части, по параметрам CSS, с помощью которых осуществляется построение модульной сетки. В первом случае это параметр float, который позволяет размещать слои рядом друг с другом по горизонтали. Второй подход — воспользоваться набором стилевых атрибутов, связанных с позиционированием слоев. Рассуждать о том, какой метод лучше неправомерно, видимый результат все равно будет один, но каждый подход имеет свои особенности, которые будут упомянуты ниже.
Использование параметра float
Параметр float позволяет делать обтекание элемента.
Значение left выравнивает слой по левому краю,
а все последующие элементы — текст, изображения или другие слои, размещаются
по его правой стороне. Аргумент right действует
с точностью наоборот, выравнивая слой по правому краю и заставляя присоединяться
к нему по левому.
Свойство присоединения элементов между собой по горизонтали как раз и требуется,
ведь слои по умолчанию размещаются по вертикали друг под другом.
На рис. 1 показан макет, созданный с использованием параметра float и восьми слоев. Шесть слоев хорошо видны на рисунке как цветные прямоугольники с рамкой, а еще два необходимо, чтобы отделить слои с заголовками от содержания (пример 1).
Рис. 1. Пример создания трех колонок
Код для создания макета, аналогичного рис. 1, приведен ниже.
Пример 1. Создание трех колонок<head>
<style>
#title1, #title2, #title3, #col1, #col2, #col3 { /* 1 */
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 80%;
color: white;
width: 200px;
padding: 5px;
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
float: left;
}
#col1, #col2, #col3 { /* 2 */
font-family: "Times New Roman", Times, serif;
font-size: 100%;
font-weight: normal;
color: black;
}
/* Цвет фона каждого слоя */
#title1 { background: #B38541 }
#title2 { background: #008159 }
#title3 { background: #006077 }
#col1 { background: #EBE0C5 }
#col2 { background: #BBE1C4 }
#col3 { background: #ADD0D9 }
#tr { /* 3 */
clear: both;
}
</style>
</head>
<body>
<div id=tr>
<div id=title1>Чебурашка</div>
<div id=title2>Гена</div>
<div id=title3>Шапокляк</div>
</div><br>
<div id=tr>
<div id=col1>Отряд мягкотелых, семейство лопоухих.<br>Это
безобидное пушистое животное ныне находится на грани исчезновения, вследствие
неправомерных действий людей охотившихся на чебурашек из-за их ценного меха
и вкусного питательного мяса.</div>
<div id=col2>Отряд длинномордых, семейство зеленых.<br>Хищник.
Охотится на охотников, охотившихся за чебурашками. Ошибочно причисляется некоторыми
авторами к отряду земноводных. Не имеет ничего общего с крокодилами.</div>
<div id=col3>Отряд бабок, семейство вонючевредных.<br>Очень
опасное существо из-за особенностей развития в пубертарном периоде. Является
симбионтом с животным crysa larisa.</div>
</div>
</body>
</html>
Поскольку сам код представляет собой только набор тегов DIV и текста, что не вызывает интереса, разберем подробно стиль, который и определяет внешний вид нашей страницы.
Селектор title предназначен для описания стиля заголовков, а col — задает вид колонки. Цифрами в имени селекторов обозначим номер колонки, чтобы разделить стиль каждой из них, цвет фона ведь у них различается. Так, идентификатор title1 определяет параметры заголовка первой колонки, а col3 — внешний вид третьей колонки.
Перечисление селекторов через запятую (стиль, помеченный единицей) называется группированием и предназначено для удобства и сокращения записи, чтобы не повторять одни и те же элементы несколько раз. Первые четыре параметра описывают стиль текста заголовка — гарнитуру шрифта, его размер и цвет. Ширина колонок с помощью свойства width устанавливается фиксированной и равной 200 пикселей. Расстояние между колонками определяется аргументом параметра margin-left, а между заголовком и его содержанием — значением margin-top. Изменяя эти величины, можно уменьшать или наоборот, усиливать расстояние между слоями. Атрибут float следует указывать обязательно, без него никаких колонок мы не получим.
Следующая запись, помеченная двойкой, определяет вид текста для всех трех колонок и не представляет важности для создания макета. А вот без селектора tr (стиль, отмеченный тройкой) не обойтись. Используемый в нем параметр clear отменяет действие float и заставляет слои располагаться друг под другом. Тем самым создается заголовок и блок текста под ним.
Выделенный в тексте тег BR, создающий перенос строк, теоретически не нужен. Размещение всех слоев указано в стиле и дополнительные теги лишь перегружают код. Однако в браузере Internet Explorer, без указанного тега вертикальное расстояние между блоком заголовка и блоком текста получится слишком велико. Остальные браузеры корректно обрабатывают приведенный пример, не требуя более никаких дополнительных тегов.
Продолжение следует...
background-image
| Браузер | Internet Explorer | Netscape Navigator | Opera | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Платформа | Windows | Macintosh | Все платформы | Все платформы | ||||||||
Версия |
4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента
задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.
То же произойдет, если изображение не доступно или отключен их показ в браузере.
В случае наличия в рисунке прозрачных областей, через них будет проглядывать
фоновый цвет.
Синтаксис
background-image: url(путь к файлу) | none
Аргументы
В качестве значения используется путь к графическому файлу, который указывается
внутри конструкции url(). Либо аргумент может принимать значение none, когда
фоновое изображение не требуется.
Значение по умолчанию
none
Наследование
Значения, присвоенные данному параметру, не наследуются.
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById("elementID").style.backgroundImage
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
