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

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

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

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

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

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

Как использовать xray

.

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

Как я уже говорил, это не расширение, которое вы инсталлируете, а особый вид закладки или элемента папки Избранное. Такие элементы еще называются закла-дурками. Вы можете открыть XRAY точно так же, как открываете страницу из закладок, щелкнув на панели закладок вашего браузера. На рис. 11.27 показано, что вы увидите после этого.

Рис. 11.27. Стартовая страница XRAY

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

о значениях границ;

размерах полей;

значениях отступов;

высоте и ширине;

координатах х и у;

наличии у элемента плавающего расположения;

способе размещения элемента (static, relative или absolute).

В верхней части панели показана горизонтальная иерархия элемента в стиле «хлебных крошек». Вы можете использовать эти «хлебные крошки», чтобы подняться на уровень выше (или на несколько уровней) и увидеть контекст элемента. На рис. 11.28 показан выбранный элемент hgroup, а на рис. 11.29 — его родительский элемент (section) двумя уровнями выше.

Рис. 11.28. Выбран элемент hgroup

Рис. 11.29. Двумя уровнями выше выбран родительский элемент

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

отступы (padding) — розовый (pink);

поля (margin) — каштановый (maroon).

Попробуйте сами! А я хочу обратить ваше внимание на одну очень важную особенность XRAY — как он показывает значения top, left, width и height.

Заметьте, что здесь у нас два значения (второе для родительского элемента). Иногда значения могут отличаться. Почему так происходит? Первая величина — та, которую вы установили. Например:

Щелкнув на контейнере dive таким классом в тот момент, когда XRAY запущен, вы увидите следующее (рис. 11.30).

Рис. 11.30. В окне XRAY отображаются два значения

Первая величина в XRAY, равная ЮОрх, установлена свойством wi dth. Значение в скобках — настоящая ширина, которая вычислена так:

2рх граница (левая);

+ 10рх отступ (левая);

+ 100рх ширина;

+ 10рх отступ (правая);

+ 2рх граница (правая);

= 124рх всего.

Разница, которую вы видите на этих двух рисунках, может вызвать массу проблем. Например, разметка может быть нарушена из-за того, что какой-то элемент слишком широк. XRAY позволит найти проблемное место, и вы увидите, что нужно исправить, на всплывающей панели (просматривая свойства paddi ng, margi п или border).

Рассмотрим реальный пример с нашим учебным сайтом. В архиве кода (website_files\03_XRayExampl es\01_BlockquoteWi dthWrong) посмотрите на цитату с правой стороны. Казалось бы, все нормально, но, если общая ширина будет равна 300рх, то начнутся сложности. Загрузив XRAY и исследовав элемент aside, вы увидите, что значение свойства width равно 300рх(322рх) (рис. 11.31).

Рис. 11.31. XRAY покажет всю правду об элементе

Что произошло? Ширина была установлена для внутреннего элемента — blockquote. А элемент aside включает в себя еще 10 пикселов отступов с каждой стороны и однопиксельную границу со всех сторон — в результате получается 322 пиксела. Таким образом, из-за наличия границ и отступов у родительского элемента получаем ширину на 22 пиксела больше, чем нужно. Проще всего компенсировать лишние 22 пиксела, установив для цитаты ширину 278рх. Если мы так и поступим, то XRAY снова покажет нам двойное значение для элемента aside — 278рх и (300рх), как видно на рис. 11.32.

Рис. 11.32. Небольшое изменение — и ширина цитаты исправлена

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

Резюме

Вы увидели, какие бесплатные, но полезные и очень мощные инструменты могут помочь решить проблемы в HTML и CSS. Используя Firebug, вы словно получаете в свое распоряжение настоящий армейский нож для разработки и отладки сайтов. Web Developer Toolbar предоставляет возможность быстро просмотреть всю информацию о веб-странице, а также отключить или включить какие-то функции. И наконец, XRAY показывает, как можно выявить источник проблем, имея в своем распоряжении минимум информации.

Применяя все три инструмента, вы будете хорошо вооружены для решения любых проблем с HTML и CSS. Но это только вершина айсберга! На самом деле инструментов, которые вы можете попробовать, несметное множество. Когда вы будете более уверенно создавать свои страницы — и столкнетесь с проблемами, куда более заковыристыми, чем я приводил в пример здесь, — вы наверняка захотите попробовать добавить в свой браузер еще больше интересных расширений. Если, конечно, вы пользуетесь Firefox, Chrome, Opera или Safari. У Internet Explorer также есть шансы усовершенствоваться, но сильно на это не надейтесь!

Хватит мучить браузер. Лучше поработайте с сайтом и добавьте туда всевозможные бесплатные функции!

.

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