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

Сегодня мы рассмотрим простейший пример уникализации шаблона сайта за счёт внесения изменений в файл CSS с помощью плагина для браузера Firefox под названием Firebug, скачать который можно здесь https://getfirebug.com/downloads/. Итак, скачали и установили плагин, а теперь можно приступать к редактированию стилей. Вообще таблица стилей CSS отвечает за внешнее оформление страниц сайта, который написан на языке html и её изменение поможет сделать шаблон уникальным, что даёт ему некоторые бонусы перед поисковыми системами и позволяет воплотить в жизнь свои собственные дизайнерские задумки.

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

Открываем свой сайт в браузере Firefox, запускаем установленный плагин и в открывшейся консоли нажимаем второе верхнее

окно для выделения определённого блока на странице (рис 0).

панель fire bug

Теперь направляем курсор на любой текстовой блок страницы и выделяем его. После этого в правой части плагина мы можем наблюдать, какие места в таблице и где отвечают за стили данного блока. Нас для изменения шрифта интересует строка .content-box p и конкретно имеющийся размер 14 px (рис 1).

14 px в плагине

Данный размер соответствует имеющемуся размеру шрифта (рис 2) и мы попробуем его изменить.


14 px вначале редактирования


Для этого открываем соединения ftp с хостингом и следуем по пути public_html – templates – требуемый шаблон – CSS – style.css, где ищем указанную в плагине строчку 232 (рис 5) и изменяем её на приемлемое значение.

файл style.css

Подобрать оптимальный размер шрифта в данном случае можно в самом плагине firebug, как показано на примере (рис 3),

шрифт 20 px

а результат для ознакомления с изменениями (рис 4)


20 px на сайте


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

Всё это я показал на примере CMS Joomla, а если кто-то желает подробнее ознакомиться с этим движком, созданием сайта на его базе и редактированием таблицы стилей CSS, то это можно сделать здесь в видео уроке от Андрея Галямова, а также предлагаем почитать, как можно поменять шапку сайта на Joomla, что также пригодится для уникализации пабликового шаблона.

Комментарии   

0 #1 Татьяна 05.06.2012 12:30
Интересная статья. Очень интересуюсь темой CSS и HTML, недавно перешла на браузер Fierfox. В общем, для меня Ваш блог просто находка! Добавляю в закладки!
Цитировать

Добавить комментарий


Защитный код
Обновить