- •Учебный Курс по html
- •1. Введение 3
- •2. Понимание html 4
- •3. Используемые средства и программы 21
- •4. Оформление документов – корпоративный стиль 27
- •6. Практическая верстка 48
- •7. Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов) 92
- •8. Заключение 97
- •9. Приложение 98
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы
- •Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль
- •Правила именования папок и файлов
- •Правила для html
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css
- •Основные правила для JavaScript
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойстватаблицы
- •Свойства отображения
- •Свойства размера
- •Свойствапозиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Общие правила и рекомендации при написании html/xhtml кода
- •С чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Часто используемые элементы и атрибуты
- •Изображение: width, height, alt, border
- •Элемент div
- •Атрибуты class и id
- •Неиспользуемые или редко используемые элементы и атрибуты
- •Элемент font
- •Элемент hr
- •Элемент map
- •Элемент frame
- •Атрибут nowrap
- •Атрибут rowspan
- •Использование однопиксельного прозрачного giFа
- •Использование css свойств
- •Проверка документов на соответствие спецификациям
- •Основные виды layout веб-страниц
- •Основные элементы страниц: логотип, меню, табы, формы; применение готовых js решений
- •Логотип
- •Способы использования png, в том числе для отображения теней
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов)
- •Заключение
- •Приложение
- •Краткая таблица css- фильтров.
Создание страниц с использованием em для указания размеров элементов страницы
Как привести размер базового шрифта к удобному размеру описано в 6.7. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные.
Особенности табличной верстки
При табличной верстке надо обнулить padding и margin, как у самой таблицы так и у вложенных td. Также надо избавиться от граничных отступов: border-collapse:collapse.
HTML:
<table class=”table”>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
</table>
CSS:
table.table{
padding:0;
margin:0;
border-collapse:collapse;
}
table.table td{
padding:0;
margin:0;
}
Таким образом, мы избавляемся от записи параметров тэга <table>.
Следует избегать использования rowspan: в некоторых браузерах rowspan не всегда корректно обрабатывается.
Элементам tr и td не следует присваисать свойства position:absolute и float, так как это может привести к совершенно разным результатам в разных браузерах (рекомендуется с этим поэкспериментировать, чтобы иметь представление о предмете). Так же надо учитывать, что на блоки имеющие свойства display:table, display:table-row, display:table-cell накладываются те же ограничения.
Создание email-шаблонов
При создании email-шаблонов, как правило, используется табличная верстка. Все email-кленты поддерживают <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.02 Final//EN”> на который и следует ориентироваться. В большинстве случаев, нельзя использовать некоторые свойства CSS: background-image, кроме как на body; float; position и много еще чего, полная таблица поддержки email-клиентами свойств CSS в 9.1.
Особенности создания принт-версии страницы
При создании принт-версии надо учитывать, что px на экране и px на принтере – это далеко не одно и то же. Принтер работает с таки понятием, как dpi (dots per inch) – количество точек на дюйм. Т.е., если, допустим, изображение шириной 700×700px на экране занимает половину окна браузера, то это еще не значит, что и на листе формата А4 оно будет занимать пол-листа. Также надо учитывать, что при выводе на принтер каждый браузер ставит свои поля печати и вообще имеет собственное представление об области печати и разрешающей способности принтера. Таким образом, надо иметь ввиду, что сделать абсолютно одинаковую для всех браузеров принт-версию невозможно. Исходя из всего вышесказанного, писать принт-версию «вслепую» нельзя: каждый шаг перепроверяем под всеми браузерами.
Есть два основных метода создания принт-версий:
модификация all.css;
с нуля.
В первом случае мы используем уже готовые стили, описанные в all.css (см. 4.1). В print.css выносятся только те фрагменты, которые надо изменить: контейнерам, которые надо удалить присваивается свойство display:none;, переназначаются размеры блоков и иллюстраций и т.д.
Во втором пишем отдельно screen.css и print.css (см. 4.1). В этом случае принт-версия не зависит от стилей экранной версии.
При верстке принт-версии рекомендуется при обозначении горизонтальных параметров пользоваться относительными единицами измерения, т.е. %.
Например:
HTML:
<div id="main">
<div id="header">header </div>
<div id="leftcolumn">left column</div>
<div id="content">content</div>
<div id="footer">footer </div>
</div>
screen.css:
#main {
margin: 0 auto;
width: 710px;
}
#header {
width: 710px;
height: 50px;
}
#footer {
width: 710px;
height: 50px;
clear: both;
}
#leftcolumn {
width: 100px;
float: left;
}
#content {
width: 610px;
float: left;
}
print.css:
#main {width: 100%;}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100&;
height: 50px;
clear: both;
}
#leftcolumn {
width: 20%;
float: left;
}
#content {
width: 80%;
float: left;
}
Не забывайте постоянно контролировать результаты внесенных изменений.
Свойство page-break- before в состоянии always устанавливает разрыв страницы перед блоком, т.е. указав это свойство тэгам <h1>-<h6> можно начинать соответствующий раздел с новой страницы.
Свойство page-break-inside в состоянии avoid запрещает разрыв страницы внутри блока, т.е. указав это свойство тэгу <p> можно переносить на следующую страницу полный абзац.
Свойства orphans и widows указывают, сколько строк можно оставить внизу и верху страницы соответственно. По-умолчанию у обоих свойств указано значение 2.
Не рекомендуется ставить разрывы страниц слишком часто, т.к. это может привести к бесполезному перерасходу бумаги.
Подроблее о свойствах, предназначенных для принт-версий на http://www.w3.org/TR/CSS21/page.html