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

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

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

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

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

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

Исследование проблем с firebug

.

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

Итак, на нашем проектном сайте что-то не в порядке (в архиве кода — website_ files\01_FirebugExamples\about.html). Катастрофы нет, но заголовочная часть выглядит немного не так, как надо: текст слогана слишком смещен влево и больше не курсивный, а отступ вообще неправильный.

Нужно сделать следующее.

1. Щелкните на слогане правой кнопкой мыши (или Ctrl+щелчок для пользователей Мае).

2. В открывшемся контекстном меню выберите пункт Инспектировать элемент с помощью Firebug — новая команда, которая появилась после установки Firebug (рис. 11.11).

Рис. 11.11. Новый пункт контекстного меню браузера

3. Панель Firebug появится внизу окна браузера. С левой стороны вы увидите свою разметку, где будет подсвечен исследуемый элемент. Справа находится относящаяся к нему таблица стилей. На рис. 11.12 показано, как это выглядит. Посмотрите по бокам левой панели. Видите что-нибудь странное?

Рис. 11.12. Firebug показывает разметку страницы

4. Если нет, присмотритесь внимательно к подсвеченному абзацу. Вот он, виновник, — имя класса taline вместо tagline. Чьи-то неуклюжие пальцы удалили здесь один символ.

5. Найдя причину проблемы, вы можете просто исправить опечатку и сохранить страницу. Обновив ее в браузере, вы увидите, что проблема решена. Но здесь есть кое-что интересное! Если панель Firebug все еще открыта, вы увидите, что изменился не только HTML-код слева, но и CSS-код справа (рис. 11.13). Вы можете сейчас видеть стиль, который применяется к этой строке, в частности название таблицы styl el. ess и номер строки (16). Это, на мой взгляд, главное достоинство Firebug!

Рассмотрим другой пример. На странице с галереей у нас есть пара проблем: изображения пошли вкривь и вкось, появилась горизонтальная полоса прокрутки… Взгляните на рис. 11.14. Firebug идет на помощь!

1. Щелкните правой кнопкой на изображении и выберите команду Инспектировать элемент с помощью Firebug.

2. Стили, относящиеся к изображению, отобразятся в правой части окна Firebug (рис. 11.15).

Рис. 11.13. HTML- и CSS-код изменились в Firebug после решения проблемы

Рис. 11.14. У галереи сайта Bubble Under проблемы

Рис. 11.15. Правая панель Firebug показывает стили, работающие на странице

3. Посмотрите — откуда-то взялась 115-пиксельная граница. Ой! Наверное, написали лишнюю единичку. Прежде чем отправиться в таблицу стилей убирать опечатку, попробуйте выполнить пару приемов прямо здесь, чтобы проверить подозрения.

4. Щелкните на этой цифре прямо в видимом фрагменте CSS-кода, и она станет редактируемой. Вы можете ввести вместо 115рх верное значение, как показано на рис. 11.16 (щелкните где-нибудь еще, как только закончите редактировать).

Рис. 11.16. Щелкните на CSS-свойстве, чтобы отредактировать его прямо из панели Firebug

5. Можете также попробовать отключить этот стиль. Вы заметили, что, когда водите над ним указателем мыши, появляется круглый символ в виде знака запрета? Щелкните на нем, и стиль будет заблокирован и выделен серым цветом (рис. 11.17). Вы также увидите, что толстая белая граница пропала — вот доказательство, что виновник найден!

Рис. 11.17. Попробуйте просто отключить стиль

6. И наконец, чтобы не вводить вручную значение, можете откорректировать его с помощью клавиш управления курсором. Для этого поместите курсор где-нибудь в пределах записи 115рх, как показано на рис. 11.18. Вы увидите, как граница медленно увеличивается или уменьшается.

Рис. 11.18. Изменение количества пикселов при нажатии клавиш управления курсором

Но изменения, которые вы вносите в CSS-код с панели Firebug, непостоянны — это лишь подсказка для вас, чтобы сразу увидеть результат применения различных значений или настроек.

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

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

Например, вы захотели поменять ссылку О нас на О сайте Bubble Under. Нужно проверить, как это будет выглядеть. Сделайте следующее.

1. Выберите команду Инспектировать элемент с помощью Firebug (вы уже знаете, как это делается), щелкнув на ссылке О нас.

2. Щелкните на элементе а на панели HTML, чтобы ссылка стала редактируемой (рис. 11.19).

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

Мгновенный результат — это потрясающе! Это что-то вроде цифровой доски с мелками, где вы можете пробовать все что вам угодно, не боясь ничего сломать.

И напоследок поговорим о том, как оперативно освоить Firebug. Лучше всего учиться на собственном опыте, а для этого я рекомендую следующие упражнения.

1. Исследуйте любой элемент на странице. Затем перейдите на панель HTM L и щелкните на названии родительского элемента того объекта, который вы выбрали. Посмотрите, как меняются левая и правая панели.

Рис. 11.19. Сделаем элемент а редактируемым

2. Перейдите на панель CSS и щелкните правой кнопкой мыши на любом селекторе. Изучите появившиеся параметры и посмотрите, как можно вносить изменения.

3. Щелкните правой кнопкой на любом элементе на панели HTML. Попробуйте выполнить команды Прокрутка, Удалить элемент или Новый атрибут.

Как я уже говорил, это настоящий армейский швейцарский нож — инструмент практически на все случаи жизни.

Теперь рассмотрим еще одно оружие в нашем арсенале — Web Developer Toolbar.

.

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