- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Способы использования png
При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр:
CSS для отображения PNG
div{background:url(image.png);}
* html div{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='image.png', sizingmethod='crop');
}
Важно! Параметр src указывается относительно страницы, а не CSS, т.е. если css-файл лежит в папке CSS, a image.png в IMAGES, то код будет выглядеть так:
CSS для отображения PNG
div{background:url(../images/image.png);}
* html div{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/image.png', sizingmethod='crop');
}
В то же время, если поместить в контейнер, например, ссылку, то в IE ссылка не будет рабочей, т.к. фильтр перекроет собой ссылку. У этой проблемы есть два варианта решения: либо вырезаем в PNG на месте ссылки дыру и тогда фильтр пропустит фокус на ссылку, либо назначаем ссылке свойство position:relative и ссылка, образно выражаясь, поднимется выше фильтра и станет активна. Второй вариант, как правило, наиболее приемлем им и будем пользоваться.
При использовании PNG в качестве тянущегося фона (тени):
в строке filter:progid… необходимо указывать параметр sizingmethod='scale', в этом случае изображение будет растянуто по размеру всего блока. И снова все дочерние блоки окажутся перекрыты фильтром и ссылки не будут активными. Указываем первому дочернему блоку position:relative и проблема решается.
HTML для отображения PNG теней
<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis risus. Nam et <a href="#">ipsum ut justo</a> condimentum… </p>
<p>Nullam sit amet libero. Pellentesque… </p>
</div>
CSS для отображения PNG теней
.shadow{
width:410px;
background:url(shadow.png) repeat-y;
padding:5px 0 100px;
margin:0 auto;
}
* html .shadow{
background:none;
filter:progid:dximagetransform.microsoft.alphaimageloader(src='shadow.png', sizingmethod='scale');
}
.shadow p{
position:relative;
margin:0 20px 16px;
font:11px/16px solid tahoma,sans-serif;
}
Следующий момент надо запомнить, как догму и при использовании фильтра в IE всегда учитывать: так как фильтр в IE не является полноправным заменителем свойства background, то и ни один из параметров этого свойства на него не распространяется:
-repeat – номинально заменяется методом sizingmethod, но:
при значении scale изображение растягивается, а не повторяется,
при значении crop изображение обрезается, по размеру блока;
-position – не работает совсем, невозможно позиционировать изображение относительно блока;
-color – тоже никак не реализуется средствами непосредственно фильтра. Но если вместо background:none указать background:red, то под изображением затеплится красный фон.
Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. )