Вам понадобится
  • Программное обеспечение:
  • - интернет-браузер Firefox;
  • - дополнение Firebug.
Инструкция
1
Многие веб-мастера говорят о том, что идеальный браузером для серфинга и сайтостроения является продукт от компании Mozilla. Firefox, пожалуй, единственная программа, которая поддерживает такое количество приложений и дополнений. Для редактирования шаблонов на любой платформе вам понадобится дополнение Firebug, которое позволяет на месте отображать и редактировать любые параметры шаблона.
2
Для его установки необходимо нажать верхнее меню «Инструменты» браузера и выбрать пункт «Дополнения» или нажать сочетание клавиш Ctrl + Shift + A. В открывшемся окне не стоит дожидаться загрузки рекомендуемых приложений для Firefox, следует поставить курсор в поле с текстом «Поиск среди доступных дополнений» и ввести Firebug.
3
В списке результатов поиска нажмите кнопку напротив пункта Firebug. После загрузки этого дополнения станет активной кнопка «Перезапустить сейчас». Нажмите ее, чтобы применить изменения. Если по каким-либо причинам данное приложение не появилось в результатах поиска, перейдите на официальный сайт Mozilla и установите Firebug по следующей ссылке https://addons.mozilla.org/ru/firefox/addon/firebug.
4
После установки этого дополнения в нижней части окна браузера появится небольшая иконка с изображением жука, нажмите на него — дополнение станет активным. К примеру, вы захотели изменить отображение ссылок на главной странице вашего сайта, для нахождения кода этого элемента в окне «жука», которое разделено на 2 части, необходимо поочередно выбрать Html и Style. Теперь в одной части окна будет отображаться html-код, в другой части будет виден код из файлов style.css.
5
В блоке html перемещайтесь по файлу, периодически нажимая блоки , вы увидите, что после нажатия на один из блоков в «жуке», на странице будет появляться выделение такого же блока. Таким образом довольно просто найти редактируемый элемент, код которого вы не знаете.
6
После того, как нужный блок кода был вами обнаружен, переместите курсор в соседнее окно (Style). Здесь вы увидите все параметры отображения для данного блока, например, размер шрифта — это ничто иное, как элемент font-size. Если вы хотите его увеличить, прибавьте несколько единиц к уже существующему значению. Обратите внимание, что вам требуется изменить только цифру, сокращение px не стоит трогать (обозначение пикселей).
7
В этом же блоке обратите внимание на все элементы, среди них могут оказаться padding, margion и т.д. Чтобы разобраться с названиями незнакомых вам элементов, рекомендуется воспользоваться специализированным online-справочником команд — http://htmlbook.ru. Перейдите по этой ссылке, в правом верхнем углу есть поле «Поиск по сайту». Введите искомую команду и нажмите клавишу Enter.
8
В результатах поиска вы увидите использование этого элемента в вариациях. К примеру, вас интересует, что означает элемент margin. Введите это слово в поисковое поле и нажмите Enter. Среди результатов поиска выберите первую ссылку CSS — margin. После перехода по этой ссылке вы сможете ознакомиться с этой командой и узнать все о ее применении.