подпалвач Firefox плъгин за да видите изходния код

Здравейте, скъпи читатели.

Днес имам една обиколка на един от практическите методи за изучаване на HTML CSS-маркиране и стилове. Фокусът на вниманието ни в този раздел ще бъде разширяването на Firebug. Първоначално тя е била създадена за браузъра Mozilla Firefox. Към днешна дата Faerbag може да се използва и в Opera, Google Chrome. Ние ще се справят с основните си функции с конкретни примери.

На моя блог много популярна статия, в която аз преподавам на читателите да стилови елементи на блог с помощта на CSS:

Във всички тези позиции, аз оглави няколко css- проби и HTML-кодове, добавяйки, че можете да получите едно или друго нещо украса. Сега ще научите как сами да редактирате всички елементи от дизайна на вашия сайт.

Как да инсталираме Faerbag за Mazilu и други браузъри?

Първо трябва да инсталирате добавката Faerbag във вашия браузър.

Firebug може да бъде изтеглена от официалния сайт на Mozilla и да го инсталирате. Но това ще бъде по-лесно да се премести в "добавки" в браузъра и въведете низ за търсене "на Firebug", след това кликнете върху "Install".

В днешната статия ще говорим за това в продължение на плъгина Faerbag Mazilu, защото това е основната версия. За други браузъри, за да се създаде версия Firebug Lite. Тяхната функция е малко намален.

Можете да изтеглите Faerbag за Chrome и Opera на официалните интернет страници на тези браузъри.

Имайте предвид, че Google Chrome има свой собствен вграден аналогов Firebug.

Защо необходимостта от Firebug?

В допълнение, Firebug ви позволява да редактирате кода директно в браузъра и да следват промените на елементи. Тези промени само ще ви виждат, всичко ще бъде като преди да опресните страницата. Ако решите да оставите промените, които сте направили, ще трябва да се търси шаблонни файлове, които са отговорни за избрания от Вас част на страницата. В идеалния случай, трябва да сте запознати с шаблона и които отговарят на всички свои файлове. За да започнете, учат статията за структурата на WordPress шаблон. Но ако все още не може да намери къде да се направят промени, по-долу ще ви разкажа за един от начините да се намерят необходимите файлове.

Как да използвате Firebug?

Така че, след като сте изтеглили и инсталирали приставката за подпалвач на Firefox, точно в горната част на панел на браузъра, ще има икона на бъг.

За да я активирате, можете да кликнете с десния бутон на мишката и изберете "Проверка на елемента с помощта на Firebug». Или изберете падащия бръмбар под опцията "Enable на всички страници." В долната част на прозореца ще се появи:

За да разберете как да използвате приставката Firebug да започне да се занимава с основен набор от инструменти му. В този урок, ние ще обърнем внимание на отметките HTML и CSS.

Работа с HTML

С цел да се изолира определен елемент на страницата, кликнете върху иконата с курсора (стрелката в левия панел). Сега предизвикване на мишката върху отделните страници на сайтове, можете да видите какво код е отговорен за тях.

Ето, например, аз изберете снимка от дъното на лаптопа и да го видим в съответствие с кода.

Тя работи в обратна последователност: търси Faerbaga код в прозореца ще бъде автоматично го разпределя съответните елементи на страницата.

Сега, ако искате да промените, например, размера на картината и да видите как ще изглежда, щракнете върху "Редактиране".

Тук можете да се правят промени в параметрите и веднага да видите резултатите от тези промени.

Например, намаляване на размера на изображението наполовина:

Но не забравяйте, че е необходимо да се опресни страницата и всичко ще се върне към първоначалния си изглед. Как да запазим промените от Firebug? За да направите това, вие трябва да намерите файл с шаблон, който е отговорен за елемента. В моя случай, картината е просто в текста. Но може би искате да промените елемент на капачката или страничната лента, а след това го търсим, ще трябва във файла header.php и sidebar.php съответно. След това копирате променило в Fayrbage код и да се замени съответния ред на файла.

Работа с CSS

В полето на правото, което виждаме в раздела "Стил", която е отговорна за появата на блока. Можете да правите промени директно в областта, или отидете в раздела CSS, кликнете върху линка, който сочи към номера на реда в style.css на файла.

Необходимата блок е осветена в синьо на запълване:

Тук можем да променим дебелина, цвят и стил на горните и долните граници на елемента (гранично-отдолу, на границата-отгоре), на височина (височина), вдлъбнатината от долния ръб (долна граница), маржове (подложка), позицията на елемент на прозореца на браузъра (позиция). В допълнение, тук можете да добавите повече възможности за стил. Стойностите на тези показатели може да се види ясно, ако отидете в раздела "Layout".

След като сте направили промени, а резултатите са доволни, можете да направите промени директно във файла за стил.

Как да намерите необходимите файловете с шаблони?

Сега в кода, който е отговорен за елемента, който модифицира в Firebug, намери възможно най-рядко често се случват. Това може да е част от код, поставен в етикетите Разделение или лична.

Например, аз трябва да се намери такъв сайт: