Лунный кот

Объявление

Здесь
будет
объявление.
Большое.
И
Красивое
:)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Лунный кот » Тестовый форум » Инструменты разработчика.


Инструменты разработчика.

Сообщений 1 страница 15 из 15

1

Наверное каждый, кто хоть немного сталкивался с изменением или созданием дизайна для форумов mybb, задавался вопросом, а как узнать где и что менять?!
На этот вопрос я и постараюсь ответить в данной статье.

Небольшое отступление: Поскольку изменение разметки (html) на форумах движка mybb и Ко, то пользователю не остается ничего, как использовать для создания дизайна каскадные таблицы стилей (CSS), которые, как все знают, можно изменять с помощью меню "Свой стиль". Каскадные таблицы стилей представляют собой довольно мощный инструмент для оформления внешнего вида сайта или форума, но нужно уметь им правильно пользоваться.
Таблицы стилей представляют собой набор блоков правил для определенных селекторов, которые идентифицируют различные элементы разметки (параграфы, блоки <div>, ссылки, заголовки и т.п.).

http://s3.uploads.ru/AiegO.jpg

Селектор указывает, на какие элементы разметки подействует то или иное правило. Чтобы указать на элемент наиболее точно, элементам могут быть присвоены классы и идентификаторы, тогда именно они могут стать частью селектора.

http://s3.uploads.ru/ryt0F.jpg

Именно селектор отвечает за то, какие элементы мы изменяем (каким элементам назначаем те или иные стилевые правила).
Селекторы бывают разных видов:
1. Селектор тега.
Селектор тега полезен тогда, когда мы хотим выбрать все одинаковые элементы (элементы заданные одним тегом).
Например,

Код:
<div>
  <ul>
    <li>Красный</li>
    <li>Оранжевый</li>
    <li>Желтый</li>
    <li>Зеленый</li>
    <li>Голубой</li>
    <li>Синий</li>
    <li>Фиолетовый</li>
  </ul>
</div>

Если мы хотим выделить все элементы списка (тег <li>) красным цветом, то мы можем использовать селектор тега:

http://s3.uploads.ru/d9sUn.jpg


2. Селектор класса.
Селектор класса полезен, когда мы хотим выбрать лишь некоторые элементы, которые мы специально обозначим.
Для этого при создании разметки необходимо задать класс для нужных элементов (это делается с помощью атрибута class):

http://s2.uploads.ru/nj7Lf.jpg

Теперь мы можем обратиться к элементу по имени класса:

http://s3.uploads.ru/VEuk9.jpg

Селектор класса представляет собой имя класса, которое предворяется знаком точки.

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

http://s3.uploads.ru/MPDq0.jpg

Теперь по имени идентификатора можно обратиться к элементу (главное не забывать, что элементов с одним идентификатором должно быть ровно один)

http://s3.uploads.ru/NeT69.jpg

4. Контекстный селектор.
Иногда селекторов тега, класса и идентификатора мало, чтобы точно указать на нужный элемент (не задавать же всем элементам идентификатор, правильно?), поэтому используются контекстные селекторы, которые описывают не только сам элемент, но и его окружение:

Код:
<div class="bluelist">
  <ul>
    <li>Красный</li>
    <li>Оранжевый</li>
    <li>Желтый</li>
    <li>Зеленый</li>
    <li>Голубой</li>
    <li>Синий</li>
    <li>Фиолетовый</li>
  </ul>
</div>
<div class="redlist">
  <ul>
    <li>Красный</li>
    <li>Оранжевый</li>
    <li>Желтый</li>
    <li>Зеленый</li>
    <li>Голубой</li>
    <li>Синий</li>
    <li>Фиолетовый</li>
  </ul>
</div>

Например, у нас есть два списка, один вложен в <div> с классом bluelist, другой - с классом redlist. Нам необходимо изменить цвет текста элементов списка так, чтобы в первом он был синим, во втором - красным. Если мы воспользуемся селектором тега, то мы поменяем сразу сразу везде и оба списка будут одинаковым цветом. Это нам не надо.
Мы можем присвоить элементам первого списка один класс, а элементам второго - другой, но это будет очень громоздко, зачем писать лишний код. Ну и тем более нас не следует назначать каждому элементу идентификатор.
Лучше воспользоваться контекстным селектором:

.bluelist li {
  color: blue;
}

Здесь мы использовали контекстный селектор, т.е. сказали браузеру "Возьми все элементы списка <li>, которые вложены в <div> с классом bluelist и сделай цвет текста синим". Для описания элементов списка мы использовали селектор тега, для описания дива - селектор класса. Элемент, который идет раньше (в который вложен наш список), мы записали первым, конечный элемент, который нам необходимо изменить - последним. Таким образом, синий цвет получат только те элементы списка, которые находятся ВНУТРИ тега <div> с классом bluelist.
И мы можем спокойно назначить второму списку другой цвет:

.redlist li {
  color: red;
}

5. Псевдоклассы.
Ну и последнее о чем надо сказать, это о псевдоклассах. В некоторых случаях нам надо описать элемент в особом состоянии - например, ссылку, когда на нее наведен курсор мыши. За эти состояния отвечают псевдоклассы. Использовать их можно дописывая ключевые слова к нужным селекторам:

a:hover {color: red}
.ancor: hover {color: red}
#ancor:hover {color: red}

Как правило, верстальщики, что сами создают разметку сайта (html), сами назначают элементам  классы и идентификаторы и соответственно легко могут составлять селекторы

Конечно, самый простой способ - это

0

2

На форумах mybb и Ко всю разметку за нас уже написали и нам остается только ею пользоваться.
Но возникает вопрос, как нам правильно составить селектор именно того элемента, который нам нужен? Где взять все эти имена классов, идентификаторы и т.п.?

Самый простой способ пойти на форум техподдержки и спросить там. 100% ответят. Но они же тоже откуда-то их узнают?
Давайте посмотрим откуда.

В помощь нам необходим будет только Ваш браузер. И все. Неважно какой, выберете из списка тот, который установлен у Вас и продолжим :)

1. Инструменты разработчика Mozilla Firefox
Firefox славен тем, что к нему было написано очень много разных плагинов, которые превращают браузер в центр управления полетами :) Если Вам это интересно, то можете посмотреть плагины для разработки на сайте Firefox Дополнения Firefox

0

3

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

Первое, что необходимо сделать, это запустить панель разработки, вызвав главное меню Firefox и выбрав там опцию Веб-разработка (также можно использовать комбинацию клавиш shift + f2)

http://s2.uploads.ru/t/6lyT2.jpg

После чего внизу окна браузера появится довольно симпатичная темная панель:

http://s2.uploads.ru/t/T4Qj0.jpg

Первая часть панели представляет собой командную строку, через нее можно управлять инструментами разработки, минуя графический интерфейс.
Далее идет Веб-консоль. Консоль может пригодится для отладки javascript-скриптов, но главное, что сюда стекаются все ошибки документа. Если кликнуть по кнопке, то откроется сама консоль:

http://s2.uploads.ru/t/UP2Ax.jpg

Здесь, например, Герда опечаталась, набирая псевдокласс focus, вот мы ее и поймали ^^
Закрыть консоль можно повторным кликом или кликом по знаку х в верхнем углу.

Далее идет такой инструмент, который называется "Инспектор". Он-то нам и нужен. Смело кликаем.  Открывается сразу 2 панели:

http://s2.uploads.ru/t/KVDq6.jpg

Этот инструмент поможет найти нам в исходном коде нужный элемент, а также просмотреть заданные ему классы, идентификаторы и стили соответственно.

0

4

[mymp3]http://klopp.net.ru/musicbox/i/1012/c3/391f2232603e756103c1b0eb2ba117.mp3|Песня[/mymp3]

0

5

http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/1.gif
http://savepic.net/420938.gif

0

6

[mymp3]http://sadhaka.moy.su/music/0-16-Green_island.mp3|Песня[/mymp3]

0

7

Код:
<script type="text/javascript">
function addSpoiler_mp3(str,from,internal){
    var pos=0,pos2=0,newpos=0
    if((pos=str.indexOf("[mymp3]",from))==-1) return str;
    if((pos2=str.indexOf("[/mymp3]"),pos+8)==-1) return str;
    newpos=str.indexOf("[mymp3]",pos+8)
    if(newpos<pos2 && newpos!=-1) str=addSpoiler_mp3(str,pos+8,true)
    if((pos2=str.indexOf("[/mymp3]",pos+8))==-1) return str;
    txt = str.substring(pos+7,pos2);
    if((sepPos=txt.indexOf("|",0))==-1) return str;
    str=str.substring(0,pos)+makeSpoiler_mp3(txt.substring(0,sepPos),txt.substring(sepPos+1,txt.length))+str.substring(pos2+8,str.length)
    if( str.indexOf("[mymp3]")!=-1 && internal==false) str=addSpoiler_mp3(str,0,false)
    return str
}

function makeSpoiler_mp3(txt1,txt2){
    txt='<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" src="http://www.enricolai.com/FMP3/FMP3.swf" quality="high" allowscriptaccess="sameDomain" flashvars="vol=80&action=stop&title='+txt2+'&color=e7e7e7&textcolor=444444&loop=no&lma=no;height=60&amp;width=260&amp;mp3='+txt1+'" height="60" width="700">';
    return txt;
    }

        function tag_urlm()
        {var FoundErrors = '';
        var enterURL = prompt("Введите ссылку на mp3 файл", "http://");
        var enterTITLE = prompt("Введите автора и название песни", "Песня");
        if (!enterURL)
        {FoundErrors += " " + error_no_url;}
        if (FoundErrors)
        {alert("Ошибка!" + FoundErrors);
        return;}
    insert("[mymp3]" + enterURL + "|" + enterTITLE + "[/mymp3]");}

    if((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
    elm=document.getElementById("pun-main").getElementsByTagName("div")
    for(x in elm) if(elm[x].className=="post-content"){
    var post=elm[x]
    post.innerHTML=addSpoiler_mp3(post.innerHTML,0,false)}}
    if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(17).innerHTML="<img src='/i/blank.gif' title='Загрузить mp3' id='button-mp3' onclick=\"tag_urlm()\">"
</script>

0

8

[audio]<a href="http://klopp.net.ru/musicbox/i/0213/9b/7dec9feb75dfe533673983d91d883f.mp3">111</a>[/audio]

0

9

skyey_cat
retyrt

0

10

skyey_cat

0

11

skyey_cat

0

12

енвкнвкен

0

13

квенкенвкен

0

14

skyey_cat
xdtygsg

0

15

skyey_cat написал(а):

квенкенвкен

0


Вы здесь » Лунный кот » Тестовый форум » Инструменты разработчика.