yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Categories:

Как легко и просто узнать схему нужного стиля?

Элементарно! Это доступно абсолютно всем, но, судя по всему, про этот способ никто не знает.


Всё нижеописаное подразумевает, что вы имеете представление о Css и HTML.

Во-первых нужна Mozilla. Если она у вас уже есть - приветствую братьев по разуму поздравляю, если нет - (скачивается тут, это бесплатно).

Во-вторых к мозилле скачивается add-one (это такие маленькие программы для мозиллы для расширения её функций), который называется Web Developer.

Web Developer скачивать отсюда
Другие add-on'ы можно найти здесь

Вот про Web Developer я и собираюсь рассказать. Как он выглядит? Это панель с кнопками (тулбар) в верхней части браузера:

Web developer

Если вы скачали и установили Web Developer, но тулбар не появился - проверьте, что включено его отображение:

Web developer

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

Итак, как нам узнать как выглядит скелет страницы не залезая в дебри HTML-кода?
Очень просто, для этого воспользуемся кнопкой Outline (обвести):

Web developer

Нас в частности интересуте Outline Tables и Outline Block Level Elements. Начнём с первого:

Web developer

Этот пункт меню предлагает обвести заголовки, ячейки или всю таблицу. Выберем второе (ячейки).

Результат для Flexible Squares:

Web developer

Результат для Generator:

Web developer

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


Теперь попробуем Outline Block Level Elements (обвести блочные элементы).
Блочные элементы это: p, div, table и другие.

Результат для Flexible Squares:

Web developer

Результат для Generator:

Web developer

Здесь мы видим, что скелет Flexible Squares весь состоит из блочных элементов. Скелет Generator'а состоит из таблиц, которые так же являются блочными элементами, небольшого количества абзацев и div'ов.

Элементы Flexible Squares имеют бОльшую подвижность, чем детали Generator'а, это имеет значение, если вы задумали нечто грандиозное.

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

Таблица S2-стилей
Особенности стилей

Предположим, стиль выбран. Как определить класс нужных вам элементов? Для этого обратимся к пункту Information, там много интересного:

Web developer

Я чаще всего использую Display Element Information и Display Id & Class Details.

Как работает первое: в меню Information выбираете этот пункт, в окне браузера вверху слева появляется полупрозрачная панель. Чтобы она отобразила свойства интересующего вас элемента, наведите на него курсор (элемент обведётся красной рамкой) и нажмите правую кнопку мыши. Что получится:

Web developer

Панель отобразила свойства элемента. В числе прочего - его id, положение на странице, родительские (Ancestors) и дочерние (Children) элементы.

Под панелью Web Developer'a так же появилась строка, которая показывает вложенность элемента, который сейчас под курсором.

Как выглядит применение Display Id & Class Details?

Web developer
Этот инструмент показывает классы и ID всех элементов на странице. Получается каша, поэтому я обычно пользуюсь первым инструментом.

Вы узнали класс или идентификатор нужного элемента. Как узнать какие стили для него заданы? Воспользуемся пунктом Css:

Web developer

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

Я чаще всего использую Edit Css. Если выбрать этот пункт, слева появится панель для редактирования и просмотра стилей:

Web developer

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

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

К примеру, я удалила все стили из вкладки Embedded Styles, и вот результат:

Web developer

обычный Flexible Squares : )

можно менять как все стили сразу, так и стили для отдельных элементов:

Web developer

Имейте в виду, что эти изменения существуют только пока открыта панель редактирования!
То есть как только вы закрываете панель - стили возвращаются в первоначальное состояние.

Поэтому если они вам нужны, их следует сохранить. Или просто выделить и скопировать (этот способ подойдёт для S1) или сохранить в файл (для S2). Так же в S2 можно сразу же вставить стили в поле Custom Css.

Подвожу итог:
вам не нужно бесконечно копировать и сохранять стили, чтобы посмотреть как они применились к странице. Если стилей немного (например добавить фоновую картинки или скрыть полосу навигации), их можно написать за один раз. Если изменения более глобальные, возможно понадобится несколько заплывов.

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

Надеюсь, что давно и нежно любимый мной Web Developer сможет быть полезен кому-то ещё : )

Дизайн, который был использован в качестве примера, можно взять здесь
Tags: useful: уроки по оформлению ЖЖ
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 35 comments