Создать сайт на Joomla просто и удобно

Разобраться, как устроен Html код определенной страницы браузера, можно с помощью Firebug (плагин для Firefox). Он имеет две возможности для реализации этой цели:

Открываете окно плагина Firebug и интересующую вебстраницу, и в окне плагина проводите мышкой по любому участку Html кода, и на странице, отобразятся элементы, за которые он отвечает.

А можно проделать обратную операцию, когда вы будете проводить мышью по вебстранице, а Html код будет показан в окне плагина Firebug.

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

Как проделать все, что было описано выше?

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

Чтобы подробнее узнать содержимое элемента Html – кода, достаточно просто нажать на плюсик, который располагается перед строкой. После нажатия, в окне плагина Firebug, можно будет узнать какие элементы сайта входят в контейнер DIV.

Для удобства работы в Firebug, при поиске содержимого, контейнер DIV будет подсвечен синим цветом. Но когда страница ресурса большая, чтобы найти нужный элемент придется воспользоваться прокруткой.

Контейнер DIV отвечает за вывод блока с заголовком и описанием блога.

Если вы используете второй способ, при котором нужно подводиться мышь не к DIV контейнеру, а напрямую к нужному элементу на странице. То в этом случае, в окне плагина Firebug синим фоном будет подсвечиваться элементы Html кода, которые отвечают за формирование данного элемента. Перемещая мышь по всей вебстранице, в окне плагина все это будет динамично отображаться. Этот способ удобен тем, что вы сможете без труда изучить особенности построения как своего, так и любого другого веб проекта.

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

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

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

Если один из вариантов показался подходящим, и вы хотите воплотить его в жизнь на своем сайте, то необходимо произвести изменения в реальном файле движка. Это можно проделать, используя, по моему мнению, самую удобную программу Total commander.

Это что касается Html кода, давайте немного поработаем с CSS.

Как вы поняли, Html коды располагаются в левой части окна Firebug, а CSS будет располагаться в правой части.

Свойства CSS показывают положение элемента на странице, размер, цвет и тип шрифта, отображения цвета ссылок и другое.

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

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

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