Занятие 12. "Отладка проекта"
На этом занятии мы выполним завершающие действия при создании проекта: - выполним адаптацию проекта для разных браузеров; - рассмотрим этапы переноса проекта на веб-сервер; - сделаем корректировку клиентской части на Java.
На этом занятии мы выполним заключительные шаги для нашего проекта "Винни-Пух и компания".
Кросс-браузерная отладка
В процессе разработки сайта мы использовали один браузер Google Сhrome. Вариант серверной части проекта работает и имеет внешний вид в соответствии с задуманным вариантом.
Проблема заключается в том, что разные браузеры могут по-разному отображать один и тот же сайт!
Программный код PHP выполняется на веб-сервере, а браузер, как клиентское приложение, получает результат его деятельности. Поэтому работа PHP-кода, так же как и запросы к базе данных MySQLне зависят от браузера пользователя. Совершенно иначе дело обстоит в HTML, CSS, JavaScript, Flash–все эти составляющие передаются пользователю. Браузер - это специальное приложение,которое "воспроизводит" полученный HTML, CSS, JavaScript, Flash. Стоит отметить,что Flash-браузер воспроизводит при помощи виртуальной машины Flash Player.Разные браузеры создаются различными компаниями –поэтому есть отличия в их работе.Технологии HTML, CSS, JavaScriptразвиваются и новые возможности не могут поддерживаться старыми версиями браузеров. Кроме того,любое приложение может содержать недоработки или ошибки. Адаптация сайта к правильной работе в различных браузерах называется кросс-браузерной отладкой. Перед размещением сайта на веб-сервере и открытии его для всех пользователей - необходимо провести первичное тестирование. Разработка нашего сайта велась под операционной системойWindows. В настоящий момент большинство пользователей используют браузеры операционной системы Windows.
Задачи первичного тестирования заключаются в следующем:
Проверить сайт как минимум в пяти основных браузерах. Это браузеры:
Internet Explorer,Google Chrome, Opera, Mozilla Firefox, AppleSafari.
Посмотреть сайт на различных разрешениях экрана. Для этого необходимо изменять текущее разрешение экрана.
Начнем с проверки в разных браузерах. Для этого нужно установить отсутствующие из указанных пяти браузеров. Обратите внимание, что браузер Internet Explorerдолжен быть установлен по умолчанию в операционной системе Windows.
После установки браузеров нужно их все открыть и в адресной строке ввести http://puh- для запуска нашего проекта. Проверка требует переходов по всем разделам сайта и анализа отклонений от необходимого внешнего вида и работы сайта.
Первая проблема, которая выявилась –это отступы в виде "щелей" сверху и снизу от верхнего горизонтального меню (см. рис. 12.1):
Рис. 12.1
При подобных отступах проблема может быть из-за ненулевых значений свойств CSS: margin, padding для каких-нибудь тегов.
Но мы уже обнулили эти свойства для всех тегов, устанавливая нужные значения только при необходимости!
/* Обнуление отступов и полей для всех тегов*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, form
{
margin: 0px;
padding: 0px;
}
Проблема может возникнуть при ошибочных значениях ширины и высоты в атрибутах тегов или свойствахCSS. Например,если изображение с тегом imgне помещается в ячейку таблицы, то она растянется до размеров изображения:
<!—-Ширина ячейки меньше ширины картинки-->
<td width="100">
<img src="pict.png" border="0"width="300" height="200" />
</td>
В нашем коде подобных ошибок нет.
Есть еще один момент -теги имеют выравнивание по вертикали.Выравнивание может быть по верхней,средней или нижней части. За это отвечает свойство vertical-align. Разные браузеры могут использовать разные значения по умолчанию. Для решения проблемы нужно в верхней части файлаpuh.css, где обнуляются margin иpadding, добавить вертикальное выравнивание для всех тегов – по верхней части:
/* Обнуление отступов и полей для всех тегов*/
/* Выравнивание всех тегов по верхней части*/
body, table, tr, td, div, ul, li, img, a, h1, th, input, form
{
margin: 0px;
padding: 0px;