Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Замещение div-элементов нтмl-элементами

.

Следующий шаг — небольшие изменения в структуре сайта. Я упоминал об исследованиях, в результате которых выяснилось, что люди чаще всего одинаково называют определенные части страницы. Что ж, наш учебный сайт не исключение. Помните эти разделы?

Один из них просто прекрасно подходит для замещения НТМL5-элементом — div с id-атрибутом header. Другой тоже близок к аналогу в HTML5: у нас id-атрибут — navigation, а элемент HTML5 называется nav — так даже проще и короче.

Начнем изменение разметки.

В файле index. html замените div с id-атрибутом header тегом header. He забудьте аналогичным образом исправить и закрывающий тег!

Затем div с id-атрибутом замените тегом nav, включая закрывающий тег.

Теперь можно убрать и комментарии, обозначающие окончание div-элементов с id-атрибутами header и navigation. Поскольку вы заменили div-элементы элементами с более ясными наименованиями и теперь закрывающие теги не путаются друг с другом, комментарии не нужны и лишь загромождают разметку.

Я надеюсь, у вас получилось нечто вроде этого:

Эта разметка читается куда проще. Но как она выглядит на веб-странице? Сохраните изменения и проверьте!

Хм, ну что… кажется, не так уж плохо (рис. 9.1)?

Рис. 9.1. Веб-страница с тегами nav и div

В зависимости от того, каким браузером вы пользуетесь, результат может отличаться от предыдущей версии. Либо в незначительной степени (например, может отсутствовать фоновое изображение для блока навигации), либо вплоть до серьезных проблем с нарушением верстки (что вполне возможно в Internet Explorer!). Так происходит потому, что изменение имен тегов нарушило связь между прежней структурой разметки и таблицей стилей:

Теперь это правило ни к чему не относится, потому что больше нет элемента с id-атрибутом header (который помечен символом #). Просто убрав #, мы приказываем CSS оформить элемент header вот так:

Блок навигации также больше не стилизуется, поэтому нужно отредактировать этот фрагмент:

вот так:

Попробуйте это сделать и проверьте, устранятся ли проблемы, как это должно быть в идеале. В большинстве браузеров так и будет. Но в Internet Explorer — особенно старше Internet Explorer 9 — придется еще поработать, чтобы новые элементы оформлялись как надо. Если Internet Explorer «не понимает», как нужно отображать элемент, то по умолчанию он «думает», что это внутренний элемент (вроде span). Так что требуется сообщить ему, что вы хотите отобразить этот элемент как блочный (точно так же, как отображался ранее элемент div):

Внесите эти простые изменения и посмотрите, как отображается страница в Internet Explorer 6, 7 и 8. Все пришло в норму? Отлично! Вам придется проделать это несколько раз, но благодаря сценарию Реми любая версия Internet Explorer будет корректно работать с элементами HTML. Вы можете заметить, что замена элемента div элементом nav привела к смещению блока навигации вниз (рис. 9.2).

Рис. 9.2. Элемент nav немного смещен вниз в отличие от предыдущего div

Это эффект наличия верхнего поля у маркированного (ul) списка внутри элемента nav. Внесите небольшие изменения, чтобы гарантировать, что все будет нормально работать во всех браузерах. Нужно убрать поля у элемента ul (но не у всех списков, которые могут появиться внутри элемента body) с помощью следующего селектора:

navul {margin:0;}

Данное правило убирает пространство между областью навигации и фоновым изображением (рис. 9.3).

К сожалению, теперь пропал и отступ над списком с навигационными ссылками. Можно вернуть его обратно, задав небольшие отступы внутри элемента nav. Для этого воспользуйтесь элементом padding:

nav ul {margin:0: padding-top:15px:}

Рис. 9.3. После удаления полей перед областью навигации страница выглядит гораздо лучше

Рис. 9.4. Небольшой отступ — и навигационная область выглядит нормально

Итак, вы «рассказали» старым версиям Internet Explorer о новых элементах HTML5 и теперь браузеры успешно их оформляют. Вы заменили несколько элементов на страницах их новейшими эквивалентами из HTML5, а также изменили связанные с ними правила стилей для восстановления корректной связи с разметкой.

Посмотрим на другие части веб-страницы и подумаем, нельзя ли их обновить с помощью HTML5.

.

Читайте так же:
Not found