Где находится код главной страницы сайта

Главная страница

Главной называется веб-страница, с которой обычно начинается просмотр сайта. Она открывается при наборе адреса сайта и в каком-то смысле является его «лицом». Именно с главной страницы начинается знакомство посетителей с сайтом, поэтому надо сразу передать тематику сайта и обеспечить быстрый доступ к содержанию.

На главной странице нашего учебного сайта представлено три блока — краткое описание сайта, предупреждение и ссылки на страницы с описанием методов. Во всех блоках используется текст, поэтому в первую очередь нужно задать его стилевое оформление. Гарнитуру шрифта, его размер и межстрочное расстояние (интерлиньяж) можно задать через универсальное свойство font .

body < font: 0.9em/1.2 Arial, Helvetica, sans-serif; >

Первое значение 0.9em означает размер шрифта, второе после слэша интерлиньяж, а после пробела следует набор шрифтов, которые следует использовать на странице. Если первый идущий шрифт Arial не будет найден в операционной системе, браузер начнёт искать шрифт Helvetica. Если и он не обнаружится, будет выбран любой другой рубленый шрифт, или как их ещё называют, без засечек.

Блок с предупреждением

В этом блоке используется два изображения: одно для головы, второе для заголовка текста (рис. 6.12).

Рис. 6.12. Блок с предупреждением

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

Метод 1. Использование обтекания

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

Пример 6.18. Блок с предупреждением

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

В стилях для изображения головы ставится свойство float со значением left , а тексту заголовка и абзаца смещение левого края через margin-left . Для отмены обтекания к warning добавляется overflow со значением hidden .

section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ >.voodoohead < float: left; /* Обтекание справа */ >.warning H1, .warning P < margin: 0 0 0 70px; /* Отступы */ >

Метод 2. Фоновая картинка

Код останется практически неизменным по сравнению с примером 6.18, только изображение головы следует убрать, поскольку оно добавляется через свойство background .

section header < background: none; /* Убираем фон */ >.warning < overflow: hidden; /* Отменяем обтекание */ margin: 30px 0; /* Отступ сверху и снизу */ background: url(images/head.png) no-repeat; min-height: 92px; /* Минимальная высота */ >.warning H2, .warning P < margin: 0 0 0 70px; /* Отступы */ >

Также следует добавить свойство min-height , чтобы при уменьшении высоты блока фоновая картинка не обрезалась. Значение равно высоте изображения head.png.

Блок со ссылками

Каждый блок со ссылкой и её описанием обрамлён тегом , сама ссылка располагается внутри тега , который в свою очередь находится внутри . Такая логика может показаться странной — зачем нам , когда на странице он уже есть, и к чему столько тегов ? В HTML5 своя логика построения структуры документа, которая отличается от привычной схемы HTML4. В предыдущей версии HTML иерархия блоков строилась на основе тегов . . Соответственно, задавал заголовок страницы, и подзаголовки. Чтобы схема документа строилась правильно, на странице должен быть только один . Спецификация HTML5 устанавливает алгоритм генерации схемы документа, включающий в себя новые семантические теги. Этот алгоритм говорит, что теги и создают новый раздел. А в HTML5 каждый раздел может содержать собственный тег .

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





 
 
Метод простых итераций
 
Самый простой метод поиска льва основанный на переборе.

В стилях устанавливаем цвет ссылок через свойство color , цвет ссылок при наведении на них курсора мыши с помощью псевдокласса :hover и параметры заголовка .

a < color: #1b75bc; /* Цвет ссылок */ >a:hover < color: #d6562b; /* Цвет ссылок при наведении */ >a img < border: none; /* Прячем границу вокруг изображений-ссылок */ >section h1 < font-size: 1.5em; /* Размер текста */ font-weight: normal; /* Нормальное начертание */ margin-bottom: 0; /* Отступ снизу */ >

Теперь собираем вместе все наши разделы и получаем окончательный код главной страницы сайта (пример 6.19).

Пример 6.19. Главная страница

HTML5 IE Cr Op Sa Fx