Водич за аматере за прилагођавање дизајна веб страница помоћу ФиреБуг-а

Реклама

Имам велики проблем са веб дизајнерима: ретко сам задовољан оним што ми се нуди и не могу речима да изразим оно што заправо желим. Будући да сам интернет маркетинг, морам често да покренем нове веб локације, тако да, наравно, често наилазим на проблем.

Па ста да радим? Не могу си приуштити време да научим веб дизајн и претворим се у професионалног веб програмера. Поред тога, не могу све сама. Срећом, недавно сам наишао на цоол алат за развој веба који ми омогућава да подесим ЦСС у покрету и смислим врхунску верзију у којој се осећам угодно.

Алат је ФиреФок додатак који се зове ФиреБуг и то је тако цоол да многи веб програмери користе ФиреФок из јединог разлога што се може проширити ФиреБуг-ом. То је врхунски додатак Фирефок-а за веб програмере. Тако да у овом посту делим своје аматерске трикове креирања дизајна веб локација са ФиреБуг-ом.

Увод:

Дођите до предлошка веб локације који желите уредити и активирати Фиребуг: користите типку Ф12 за брзи приступ.

Алат ћете видети у доњој половини прозора прегледача са 6 картица: "Конзола", "ХТМЛ", "ЦСС", "Скрипта", "Дом" и "Нет". Овде ћу говорити о две картице: "ХТМЛ" и "ЦСС".

Картица ЦСС:

Уређивање атрибута и вредности атрибута

Да бисте променили атрибут или вредност атрибута, само кликните на њега и уредите га право у коду. Ефекат промене биће одмах видљив у прозору прегледача изнад.

Прегледајте боје и слике у ЦСС-у

Фиребуг омогућава аматерима попут мене да боље разумеју ЦСС показујући ми преглед сваког визуелног својства:

Лако пронађите тачно позиционирање, облагање и маргине

Алат пружа дивну подршку за промену нумеричке вриједности. Једноставно кликните на нумеричку вредност коју желите да промените и промените је бројевима на тастатури - одмах погледајте ефекат на горњој страници и по потреби измените измене.

Дозволите да вам алат каже која својина се може користити

Означите својство и користите тастере са стрелицама горе / доле на тастатури да бисте приказали све дозвољене ЦСС својства по абецедном реду.

ХТМЛ картица:

Научите све особине оквира у лету (маргада, обруб, облога и садржај): отворите ХТМЛ картицу + Изглед десно и кликните „Увиди“ у горњој траци прозора алата. Сада можете да се крећете по страници и посматрате следеће:

• сваки елемент странице у плавом оквиру;
• одговарајуће подручје у изворном коду означено плавом бојом (ХТМЛ картица);
• визуелно приказане особине оквира (картица Лаиоут).

Картица Изглед Фиребуга вам омогућава визуелни преглед сваког оквира у моделу кутије и ширину сваке ивице. Поред тога, приказује вам ширину и висину унутарњег оквира, као и померање к и и елемента у односу на родитељ.

Уредите било који ентитет десно на картици изгледа и погледајте промјене уживо на страници:

Неколико корисних савета:

• Употријебите Цонтрол + Ф12 (или Цомманд + Ф12 на Мац-у) да отворите Фиребуг у засебном прозору.
• Одржавајте црне листе и беле листе: Фиребуг вам омогућава да водите листу веб локација за које треба или не треба да буду омогућене. Можете да прегледате у два режима - или омогућите Фиребуг за све веб локације осим оних на „црној листи“ или онемогућите Фиребуг за све веб локације осим оних из „листе смештаја“.
• Нађите још неке помоћи овде: Водич за ФиреФок у једноставним речима.

Као што сте видели са ФиреБуг Фирефок додатком, можете да креирате и прилагодите дизајне веб страница чак и ако нисте апсолутно несвесни у веб дизајну као што сам ја. Наравно, ФиреБуг има много шире могућности од горе описаних, па бих волео да поделите више савета и трикова овог феноменалног алата.