/*Вертикальное выравнивание по верхней части*/
vertical-align: top;
}
В этом случае все теги веб-страницы начнут прижиматься к верхней части браузера. Сохраним проект и посмотрим на получившийся результат в браузере. Отступы должны исчезнуть (см. рис. 12.2):
Рис. 12.2
Важно!!!Не забывайте после изменения CSS и сохранения изменений в проекте – выполнять обновление загрузки CSS в браузере нажатием клавиши F5.
Вторая проблема выявилась в браузере Internet Explorer –это разрыв белого фона над заголовком центральной части страницы (см. рис. 12.3)
Рис. 12.3
Проблема проявилась только в браузерах Internet Explorer. При помощи JavaScript и HTMLможно определить вид и версию браузера. Некоторые сайты блокируют вход с использованием старых версий браузеров Internet Explorer6и Internet Explorer 7. В нашем случае этот вариант не подойдет, потому что проблема возникает во всех версиях Internet Explorer.
Внимание!!!Сайты с высокой посещаемостью необходимо адаптировать для максимального количества браузеров. К таким сайтам относятся популярные социальные сети. Для отдельных сайтов можно сделать ограничение для поддерживаемых браузеров.
Для браузера Internet Explorerимеется специальная конструкция, которая размещается внутри тегов head:
<!--[if IE]> < ![endif]-->
IE –это сокращение отInternet Explorer. Если браузер IE, то выполнится фрагмент кода, вставленного внутрь этой конструкции. Возможен вариант этой конструкции только для конкретной версии Internet Explorer:
<!--[if IE 6]> < ![endif]-->
В данном случае конструкция выполнится для Internet Explorer 6. Но наша проблема проявляется во всех IE, поэтому воспользуемся вариантом без указания отдельной версии. Внутри такой конструкции подключается дополнительный CSS-файл, который исправляет проблему.
Добавим к проекту новыйCSS-файл с названием ie.css (см. рис.12.4):
Рис. 12.4
Файл добавляется аналогично файлу puh.css. После подключения файла puh.cssдобавим специальную конструкцию для Internet Explorer и внутри нее подключим файл ie.css:
<!--ПодключаемCSS-->
<link href="puh.css" rel="stylesheet" type="text/css" />
<!--CSS для браузера Internet Explorer-->
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
При использовании браузера Internet Explorer кроме основного файла-CSSбудет подключаться дополнительный CSS-файл. Обратите внимание, что файл для IEбудет подключаться именно после основногоCSS-файла! В этом случае он будет заменять (перекрывать)некоторые свойства.
Фон центральной белой части строится при помощи трех изображений: верхнее, высотой 10 пикселей,многократно повторяющееся среднее и нижнее, высотой 10пикселей. Эти изображения вложены в блоки div с идентификаторами: sheet1, sheet2, sheet3. В файлеpuh.cssдля них прописаны следующие свойства:
/*Верхняя часть поля с белым фоном*/
#sheet1
{
width: 550px;
height: 10px;
background: url('img/sheet1.png') left top no-repeat;
}
/*Средняя часть поля с белым фоном*/
#sheet2
{
width: 550px;
height: auto;
background: url('img/sheet2.png') left top repeat-y;
padding: 0px 10px;
}
/*Нижняя часть поля с белым фоном*/
#sheet3
{
width: 550px;
height: 10px;
background: url('img/sheet3.png') left top no-repeat;
}
Чтобы избавиться от нашей проблемы, уберем верхний и нижний блоки. Для этого в файле ie.css запишем:
@CHARSET "UTF-8";
/*Верхняя и нижняя часть поля с белым фоном*/
#sheet1, #sheet3
{
width: 0px;
height: 0px;
background: none;
}
Мы сделали ширину и высоту нулевыми, а фон убрали. Теперь эти блоки не отобразятся на веб-странице.
Но эти фрагменты создавали тонкую рамку сверху и снизу,поэтому добавим верхнюю и нижнюю рамку к центральному блоку. Для этого в файлеie.css, в самом низу запишем:
/*Средняя часть поля с белым фоном*/
#sheet2
{
border-top: #000066 1px solid;
border-bottom: #000066 1px solid;
}
Мы создали верхнюю и нижнюю рамку толщиной в 1пиксель темно-синего цвета,со сплошной линией. Сохраним проект и посмотрим на результат в браузере Internet Explorer. Проблема решена (см. рис. 12.5):
Рис. 12.5
В самом низу разделовГлавная иЗаказать –нижняя часть сайта стала слишком плотно прижиматься к тексту (см. рис. 12.6)и таблице(см. рис. 12.7):
Рис. 12.6
Рис. 12.7
Для исправления этой ситуации добавим тег перевода строки<br/> в самую нижнюю часть кода этих разделов. Для этого перейдем в PHPMyAdmin, в таблицу razmetka. К разметке строк с id=6и id=10–в самом низу добавим тег <br/> (см. рис. 12.8):
Рис. 12.8
Посмотрим на получившийся результат в браузере Internet Explorer -теперь все в порядке!
Говоря о первичном кросс-браузерном тестировании, сайта мы упоминали о необходимости проверить сайт при различных разрешениях экрана. Если перейти на Рабочий столи в свободном от ярлыков месте нажать правую клавишу мыши, то откроется меню (см. рис.12.9):
Рис. 12.9
Через это меню можно перейти к изменению текущего разрешения экрана (см. рис. 12.10):
Рис. 12.10
Устанавливая различные разрешения экрана, посмотрим наш сайт.
Начнем с разрешения800x600.Появляются горизонтальные линии прокрутки и сайт не умещается по ширине. Сдвигая ползунки прокрутки по горизонтали и вертикали –нужно убедиться, что все отображается правильно.
После первичного тестирования, сайт необходимо перенести на веб-сервер, чтобы он стал доступен с других компьютеров. После переноса сайта нужно выполнить вторичное тестирование.
Задачи вторичного тестирования заключается в следующем:
Посмотреть сайт как минимум в двух других операционных системах для настольных компьютеров: Linux, Mac OS. Один и тот же браузер, напримерApple Safari, может по-разному работать для разных операционных систем.
Проверить сайт с мобильных телефонов и планшетных устройств.
Протестировать сайт с других типов компьютеров: ноутбук, нетбук.
Посмотреть сайт на других типах мониторов.
Проверить сайт на разных версиях браузеров. При проверке сайта на последней версии браузера нельзя быть уверенным, что сайт правильно отображается на более старых версиях.
Только после вторичного тестирования можно быть уверенным, что сайт будет качественно отображаться для различных пользователей. Как вспомогательный инструмент вторичного тестирования можно использовать специальные сервисы проверки сайтов. Один из популярных и бесплатных сервисов находится по адресу: http://browsershots.org.На этом сайте нужно зарегистрироваться,выбрать необходимые операционные системы и версии браузеров, ввести адрес сайта для проверки. Через некоторое время можно будет получить скриншоты. По полученным скриншотам можно увидеть некоторые проблемы.
Важно!!!Язык JavaScript также не всегда одинаково работает в разных браузерах!