Практика разработки Web-страниц

Практика разработки Web-страниц

2-е издание, исправленное

Каллахан И.

Национальный Открытый Университет “ИНТУИТ”
2016

2

Практика разработки Web-страниц/ И. Каллахан - М.: Национальный Открытый Университет
“ИНТУИТ”, 2016

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

(c) ООО “ИНТУИТ.РУ”, 2006-2016
(c) Каллахан И., 2006-2016

3

Введение

Советы по диагностике проблем

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

Разные виды проблем

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

В некоторых случаях вы знаете, в чем загвоздка - например, сломался выключатель
лампы - но понятия не имеете о том, что нужно делать. Так часто бывает при
разработке страниц, где используется так много инструментов и технологий. Вы
можете знать, например, что данный тэг HTML предоставляет ограниченное
форматирование, но не знаете, как обойти его с помощью стиля. С такими проблемами
обращайтесь к разделам этой книги, посвященным конкретным элементам (фон,
границы или рисунки) и следуйте указаниям. И наконец, есть проблемы, не имеющие
легкого решения - тогда вам нужна или новая лампочка, или электрик.

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

Последовательность действий

1. Исследуйте проблему. Например, если не работает разбивка или гиперссылка,

выясните, какие функции и тэги они используют.

2. Установите причину. Неправильный HTML? Используйте инструменты проверки

кратности кода, чтобы найти ошибки. Проблемы с файлом? Просмотрите папку на
вашем веб-сервере. Пропущен атрибут или параметр? Посмотрите справочник по
HTML.

3. Исправьте ошибки. Измените неправильные параметры. Замените файлы.

Добавьте параметры стиля. Не забудьте предварительно просмотреть страницу.

Программы веб-дизайна

Если вы используете программы веб-дизайна, такие как FrontPage или Dreamweaver, вы
сможете решить многие проблемы с помощью функций этих программ. Когда что-то

4

не работает, проверьте, допускают ли установленные параметры выполнение нужного
вам действия. Например, во FrontPage большинство элементов страницы имеет
диалоговое окно свойств, в котором можно изменить параметры и решить проблему.
Не стесняйтесь использовать службы и сайты поддержки. Вы удивитесь, как много
распространенных проблем обсуждаются на сайтах в разделах <Часто задаваемые
вопросы> (FAQ).

Если вы не можете заставить программу делать то, что вы хотите, переключитесь в
режим HTML и посмотрите, что происходит.

Ошибки в коде

Если вы непосредственно изменяете код HTML, то, с одной стороны, вы лучше
контролируете ситуацию, а с другой - увеличивается вероятность возникновения
проблем. Очень важно проверить, нет ли опечаток или пропущенной информации в
HTML, таблице стилей или сценарии. В результате таких ошибок страница может не
отображаться полностью или на ней будут недоступны какие -то функции. Некоторые
программы могут помочь вам в решении проблемы, например инструменты
форматирования HTML упорядочат ваш код, так что найти в нем ошибку станет
гораздо проще.

Если вы используете HomeSite, попробуйте функцию CodeSweeper или инструмент
HTML Tidy, доступный по адресу ссылка: www.w3.org/People/Raggett/tidy -
http://www.w3.org/People/Raggett/tidy. (Всегда сохраняйте страницу перед
использованием инструментов форматирования, поскольку оно может вызвать
дополнительные проблемы.)

Еще важнее инструменты проверки корректности кода, которые ищут в вашем коде
опечатки, пропущенные элементы и несоответствие стандартам. Если вы используете
HomeSite, примените функцию Validate HTML. Служба HTML validation доступна по
адресу ссылка: validator.w3.org - http://validator.w3.org. Инструменты Validation, как
правило, указывают ошибки, которые вы должны исправить, и предупреждения,
которые часто не имеют значения, но могут пролить свет на проблему.

Совместимость браузеров

Все браузеры разные. Если ваша страница не работает, стоит проверить ее в другом
браузере, желательно в наиболее новой версии. Если у вас нет новых версий Internet
Explorer и Netscape, скачайте их с сайтов ссылка: www.microsoft.com/windows/ie -
http://www.microsoft.com/windows/ie и ссылка: home.netscape.com/browsers -
http://home.netscape.com/browsers (вы можете сохранить на своем компьютере и старую
версию).

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

5

Напротив, страница должна работать и хорошо смотреться в любом браузере.
Тестирование в разных браузерах поможет вам лучше разобраться в их ограничениях.

Тестируя страницу в разных браузерах, вы можете заодно экспериментировать и с
другими параметрами страницы. Попробуйте, например, изменять параметры шрифтов
в каждом браузере. Если на вашей странице есть формы, протестируйте их в каждом
браузере. Отмечайте все, что вас не устраивает. Информацию о браузерах см. в лекции
<Броузеры> или в сети, задав для поиска сочетание browser compatibility.

Отсутствующие ссылки

Большинство веб-страниц включают несколько файлов - это могут быть ссылки на
рисунки, файлы мультимедиа, другие веб-страницы и дополнительные файлы
поддержки, вроде таблиц стилей. Если рисунок не появляется, ссылка не работает, а
мультимедиа-файл не воспроизводится, вам придется с ними разбираться. В общем,
проблемы со ссылками - классический случай (как неработающая лампочка),
поскольку причины сбоя легко определяются. Убедитесь в том, что вы используете
верные параметры и тэги HTML, и что указанный файл существует. Возможно, у вас
нет доступа к просмотру файла или, в случае с мультимедиа-файлами, правильного
проигрывателя. Кроме того, проверьте, все ли в порядке с сервером и с вашим
подключением к Интернет.

Многие программы веб-дизайна, такие как FrontPage и HomeSite, могут проверить все
ваши ссылки. Кроме того, они могут решить проблемы с потерянными файлами.
Информацию см. в лекции <Гиперссылки>.

Проблемы с макетом страницы

Макет - самая проблематичная часть разработки страницы. Если элементы не
выравниваются, текст не обтекает элементы нужным образом или страница выстроена
неправильно, вам придется постараться, чтобы избавиться от проблем. Прежде всего,
используйте инструменты, о которых говорилось выше. Затем взгляните на HTML той
области страницы, с которой у вас возникают проблемы. Проверьте используемые тэги
и попробуйте использовать другие параметры. Например, если проблема с рисунком,
проверьте параметры тэга <IMG>. Экспериментируйте с параметрами и
просматривайте страницу в браузере. Не забудьте изменить размер окна браузера,
чтобы увидеть, как это повлияет на размещение.

Если вы используете таблицу для общего размещения страницы, проверьте ширину
каждого столбца (тэг <TD>). Убедитесь, что ширина каждого столбца достаточна для
размещения его содержания, и что общая ширина таблицы указана верно.
Информацию см. в лекции <Таблицы>.

Когда ничего не помогает

Если вы зашли в тупик, сделайте шаг назад. Если вы не уверены, какой элемент

6

страницы создает проблемы, временно убирайте секции вашей страницы и
просматривайте страницу заново. Можно сделать наоборот - начать новую страницу и
копировать на нее по очереди все элементы проверяемой вами страницы. Посмотрите
HTML страниц, похожих на вашу. Как действовали ее разработчики? Наконец, если у
вас что-то не получается, возможно, не стоит тратить столько времени и сил на
решение проблемы, если есть более легкий способ добиться желаемого результата.
Например, если вы не можете проиграть на вашей странице мультимедиа-файл, просто
предусмотрите ссылку на него. Альтернативное решение может быть менее
эффектным, но зато оно будет работать.

Сайт для решения проблем

Приобретя эту книгу, вы получили доступ к сайту Microsoft Press Troubleshooting по
адресу mspress.microsoft.com/troubleshooting, на котором каждый месяц появляется
дополнительная информация к книгам этой серии. Вы обнаружите, что там
рассмотрены как дополнительные проблемы, так и частные случаи многих проблем,
указанных в этой книге. Вы обнаружите, что сайт Troubleshooting так же прост в
использовании, как и эта книга, и так же помогает вам быстро найти простые решения.
Для доступа к сайту вам нужен следующий код: TSW0830. (Это нули, а не буквы О.)

7

Анимация

В данной лекции рассматриваются возможные проблемы при создании web-страниц с
использованием анимации. Проводится краткий обзор наиболее популярных методов
“оживить” страницу. Дается информация о некоторых программах для работы с
графикой.

GIF анимация не работает с браузером

Используя программное обеспечение для работы с графикой GIF, такое, как Adobe
Image Ready или Macromedia Fireworks, вы можете создавать GIF анимацию, которая
представляет собой небольшие ролики, проигрываемые браузером. GIF анимация
выглядит и работает как обычная GIF графика, но, будучи правильно сделанной, она
оживает на странице. (Для знакомства с GIF анимацией см. раздел “Начинаем работать
с GIF анимацией”)

Если ваша GIF анимация не работает, причинами проблемы могут быть: браузер,
процедуры, использованные вами при создании GIF анимации, или опции, выбранные
вами при сохранении. Чтобы установить правильную причину и решить проблему,
проделайте следующие шаги:

1. В браузере проверьте, работает ли остальная GIF анимация – например, баннеры

на домашних страницах обычно анимированы. Если вы не видите анимацию,
проблема, возможно в вашем браузере. Некоторые старые браузеры не
поддерживают GIF анимацию и показывают лишь статическое изображение.
Кроме того, в новых браузерах существует опция отключения анимации на
случай, если она вас очень утомит. Чтобы включить анимацию в Internet Explorer
5, нажмите Internet Options (Свойства обозревателя) в меню Tools (Сервис),
выберите закладку Advanced (Дополнительно), отметьте окно Play Animation
(Показывать анимацию) и нажмите OK.

8

Убедитесь, что показ анимации включен в опциях вашего браузера

2. Если анимация по-прежнему не работает, откройте ее с помощью вашей

программы для работы с графикой или GIF анимацией. Если возможно,
используйте файл Fireworks или ImageReady. В противном случае используйте GIF
файл, но учтите, что файл, экспортированный в формате GIF, может не содержать
всей информации, необходимой для работы над ним с помощью вашей
графической программы.

3. Посмотрите на список кадров вашей анимации. Если кадр всего один, то ваш GIF

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

9

Для создания анимации вам нужно как минимум два разных кадра

4. Если при проигрывании вашей анимации присутствуют ошибки изображения:

точки, размытые области, причиной могут быть опции оптимизации,
используемые вашим GIF. Для того чтобы уменьшить ваш анимированный GIF
файл настолько, насколько это возможно, большинство графических программ
используют различные хитрости, которые могут быть не совместимы с вашим
браузером. (Например, многие пользователи браузеров America On-Line
жаловались на проблемы с оптимизированной анимацией.) Если у вас проблемы с
изображением анимации, в вашем браузере отключите опции оптимизации.
Например, в ImageReady для этого отключите опции Bounding Box и Redundant
Pixel Removal, в FireWorks отключите опции AutoCrop и AutoDifference.

5. Просмотрите вашу анимацию, чтобы убедиться, что все в порядке, затем

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

10