mirror of
https://github.com/adobe/brackets.git
synced 2024-11-20 18:02:54 +01:00
208 lines
17 KiB
HTML
208 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>ПЪРВИ СТЪПКИ С BRACKETS</title>
|
||
<meta name="description" content="Интерактивно ръководство за Brackets.">
|
||
<link rel="stylesheet" href="main.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1>ПЪРВИ СТЪПКИ С BRACKETS</h1>
|
||
<h2>Това е Вашето ръководство!</h2>
|
||
|
||
<!--
|
||
СЪЗДАДЕН С <3 И JAVASCRIPT
|
||
-->
|
||
|
||
<p>
|
||
Добре дошли в Brackets, модерен редактор за код с отворен код, който разбира от уеб дизайн. Това е лек,
|
||
но мощен редактор за код, който слива визуалните инструменти с редактора, така че да получавате достатъчно
|
||
помощ, когато сте в нужда.
|
||
</p>
|
||
|
||
<!--
|
||
КАКВО Е BRACKETS?
|
||
-->
|
||
<p>
|
||
<em>Brackets е един различен вид редактор.</em>
|
||
Brackets има някои уникални функционалности, като бързо редактиране, преглед на живо и други, които може да не
|
||
откриете в други редактори. Brackets е написан на JavaScript, HTML и CSS. Това означава, че повечето от хората,
|
||
които използват Brackets имат уменията и да го променят и подобряват. Всъщност, ние самите използваме Brackets
|
||
всеки ден, за да градим Brackets. За да научите повече относно ключовите функционалности, продължавайте да четете.
|
||
</p>
|
||
|
||
<!--
|
||
ПЪРВИ СТЪПКИ С ВАШИТЕ ФАЙЛОВЕ
|
||
-->
|
||
|
||
<h3>Проектите в Brackets</h3>
|
||
<p>
|
||
За да редактирате своя код в Brackets, трябва да отворите папката, съдържаща файловете Ви.
|
||
Brackets смята текущо отворената папка за „проект“; функционалностите като подсказки за кода, преглед на живо и
|
||
бързо редактиране работят само с файловете в текущо отворената папка.
|
||
</p>
|
||
|
||
<samp>
|
||
След като приключите с разглеждането на този примерен проект и искате да редактирате собствен код, можете да
|
||
използвате падащото меню в лявата странична лента, за да превключвате между папките. В момента там е избрано
|
||
„Getting Started“ — това е папката, съдържаща файла, който разглеждате в момента. Щракнете върху падащото меню и
|
||
изберете „Отваряне на папка…“, за да отворите своя собствена папка.
|
||
Можете да използвате това падащо меню, за да се връщате обратно към папките, които сте отворили по-рано,
|
||
включително този примерен проект.
|
||
</samp>
|
||
|
||
<!--
|
||
ВРЪЗКАТА МЕЖДУ HTML, CSS И JAVASCRIPT
|
||
-->
|
||
<h3>Бързо редактиране на CSS и JavaScript</h3>
|
||
<p>
|
||
Без повече превключване между документи и забравяне къде сте били последно. Когато редактирате HTML, използвайте
|
||
комбинацията <kbd>Cmd/Ctrl + E</kbd>, за да отворите бърз редактор на място, който показва използвания CSS.
|
||
Променете CSS кода, натиснете <kbd>ESC</kbd> и се връщате към редактирането на HTML, или просто оставете
|
||
CSS правилата отворени и те ще станат част от редактора Ви за HTML. Ако натиснете <kbd>ESC</kbd> извън
|
||
вмъкнатия бърз редактор, всички такива ще се скрият. Бързото редактиране разпознава и правила, описани чрез
|
||
LESS и SCSS, включително и вложени правила.
|
||
</p>
|
||
|
||
<samp>
|
||
Искате да го видите в действие? Поставете курсора върху елемента <!-- <samp> --> по-горе и натиснете
|
||
<kbd>Cmd/Ctrl + E</kbd>. Би трябвало да се появи бърз редактор за CSS, показващ CSS правилото, което
|
||
се прилага към този елемент. Бързото редактиране може да работи също и за класове и идентификатори.
|
||
Можете дори да го използвате с Вашите файлове с LESS и SCSS.
|
||
|
||
Можете да създавате правила по същия начин. Щракнете върху един от елементите <!-- <p> --> по-гори и
|
||
натиснете <kbd>Cmd/Ctrl + E</kbd>. В момента няма правила за тях, но можете да натиснете бутона
|
||
„Ново правило“ и да добавите ново правило за <!-- <p> -->.
|
||
</samp>
|
||
|
||
<a href="screenshots/quick-edit.png">
|
||
<img alt="Снимка на екрана, показваща бързото редактиране на CSS" src="screenshots/quick-edit.png" />
|
||
</a>
|
||
|
||
<p>
|
||
Можете да използвате същата клавишна комбинация, за да редактирате и други неща — например функции на
|
||
JavaScript, цветове и времеви функции за анимации; ние постоянно добавяме още.
|
||
</p>
|
||
<p>
|
||
За сега редакторите на място не могат да се влагат един в друг, така че можете да използвате бързото
|
||
редактиране само когато курсорът е в „пълния“ редактор.
|
||
</p>
|
||
|
||
<!--
|
||
ПРЕГЛЕД НА ЖИВО
|
||
-->
|
||
<h3>Преглеждайте промените в HTML и CSS на живо в браузъра</h3>
|
||
<p>
|
||
Нали знаете как години наред си играем на „запазване и презареждане“? Играта, в която правите
|
||
промяна в редактора си, натискате „запазване“, превключвате към браузъра и натискате „презареждане“,
|
||
за да видите резултата?
|
||
С Brackets, няма да ви се налага да я играете повече.
|
||
</p>
|
||
<p>
|
||
Brackets ще отвори <em>жива връзка</em> с браузъра Ви и ще му праща промените в HTML и CSS кода
|
||
докато пишете! Може би вече правите нещо подобно с различни инструменти, работещи в браузъра, но с Brackets
|
||
няма да има нужда да копирате готовия код обратно в редактора. Кодът Ви работи в браузъра, но
|
||
живее в редактора!
|
||
</p>
|
||
|
||
<h3>Осветява на HTML елементи и CSS правила на живо</h3>
|
||
<p>
|
||
С Brackets е лесно да видите как промените Ви в HTML и CSS ще променят страницата. Когато курсорът
|
||
е върху CSS правило, Brackets ще осветява всички елементи, върху които то влияе, в браузъра. Също
|
||
така, докато редактирате файл с HTML, Brackets ще осветява съответстващите елементи в браузъра.
|
||
</p>
|
||
|
||
<samp>
|
||
Ако имате Google Chrome, може да опитате това. Щракнете иконката на светкавица в горния десен
|
||
ъгъл на прозореца на Brackets или натиснете <kbd>Cmd/Ctrl + Alt + P</kbd>. Когато прегледът на живо
|
||
е включен за даден HTML документ, всички свързани CSS документи могат да бъдат редактирани в реално време.
|
||
Иконката ще смени цвета си от сив на златист, когато Brackets установи връзка с браузъра Ви.
|
||
|
||
Сега поставете курсора си върху елемента <!-- <img> --> по-горе. Забележете синия контур,
|
||
който се появява около изображението в Chrome. Сега натиснете <kbd>Cmd/Ctrl + E</kbd>, за да
|
||
отворите CSS правилата. Опитайте да промените размера на рамката от 10 на 20 пиксела или
|
||
променете цвета на фона от „transparent“ на „hotpink“. Ако Brackets и браузърът Ви работят
|
||
един до друг, ще видите как промените Ви автоматично се виждат в браузъра. Яко, нали?
|
||
</samp>
|
||
|
||
<p class="note">
|
||
Засега Brackets поддържа преглед на живо само за HTML и CSS. И все пак, в текущото издание, промените във
|
||
файловете с код на JavaScript се презареждат автоматично при запазване на файла. В момента работим върху
|
||
поддръжката на преглед на живо и за JavaScript. Прегледът на живо работи само с Google Chrome, но се надяваме
|
||
да поддържаме всички основни браузъри в бъдеще.
|
||
</p>
|
||
|
||
<h3>Бърз преглед</h3>
|
||
<p>
|
||
Онези от нас, които не могат да запомнят съответствието между цветовете, изразени чрез шестнадесетични
|
||
числа и стойности ЧЗС, Brackets прави лесна и бърза проверката на това кой цвят се използва. Както в CSS,
|
||
така и в HTML, можете просто да посочите дадена цветова стойност или преливка, и Brackets ще Ви покаже как
|
||
изглежда този цвят или преливка автоматично. Същото важи и за изображенията: просто посочете връзката към
|
||
изображението в редактора и ще се появи миниатюрен изглед на това изображение.
|
||
</p>
|
||
|
||
<samp>
|
||
За да опитате бързия преглед сами, поставете курсора върху елемента <!-- <body> --> в началото на този
|
||
документ и натиснете <kbd>Cmd/Ctrl + E</kbd>, за да отворите бързия редактор на CSS. Сега просто посочете
|
||
някоя стойност за цвят. Можете да видите това и при преливките, като отворите бърз редактор за
|
||
елемента <!-- <html> --> и посочите някоя от стойностите за фона. За да опитате прегледа на изображения,
|
||
поставете курсора върху снимката на екрана, която може да намерите по-нагоре в този документ.
|
||
</samp>
|
||
|
||
<h3>Имате нужда от повече? Опитайте някое разширение!</h3>
|
||
<p>
|
||
Освен всички приятни функционалности, вградени в Brackets, нашата огромна и постоянно нарастваща
|
||
общност от разработчици на разширения е създала стотици такива, които добавят полезни и удобни функционалности.
|
||
Ако има нещо, от което се нуждаете, но не намирате в Brackets, много вероятно е някой вече да е създал
|
||
разширение за това. За да разгледате или претърсите списъка от налични разширения натиснете
|
||
<strong>Файл > Управител на разширения…</strong> и изберете раздела „Налични“. Когато намерите това,
|
||
което искате, просто натиснете бутона „Инсталиране“ до него.
|
||
</p>
|
||
|
||
<!--
|
||
КАЖЕТЕ НИ КАКВО МИСЛИТЕ
|
||
-->
|
||
<h2>Включете се</h2>
|
||
<p>
|
||
Brackets е проект с отворен код. Разработчици от цял свят допринасят, за да изградим заедно
|
||
един по-добър редактор за код. Много други създават разширения, които увеличават възможностите
|
||
на Brackets. Кажете ни какво мислите, споделете идеите си или направо се включете в проекта!
|
||
</p>
|
||
<ul>
|
||
<li><a href="http://brackets.io">Brackets.io</a></li>
|
||
<li><a href="http://blog.brackets.io">Блогът на екипа зад Brackets</a></li>
|
||
<li><a href="https://github.com/adobe/brackets">Brackets в GitHub</a></li>
|
||
<li><a href="https://brackets-registry.aboutweb.com">Регистър на разширенията за Brackets</a></li>
|
||
<li><a href="https://github.com/adobe/brackets/wiki">Уикито на Brackets</a></li>
|
||
<li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Пощенският списък на разработчиците на Brackets</a></li>
|
||
<li><a href="https://twitter.com/brackets">@brackets в Туитър</a></li>
|
||
<li>Пишете си с разработчиците на Brackets в IRC канала <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets във Freenode</a></li>
|
||
</ul>
|
||
|
||
</body>
|
||
</html>
|
||
<!--
|
||
|
||
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[::::::[[[[[[[: :]]]]]]]::::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ CODE THE WEB ]:::::]
|
||
[:::::[ http://brackets.io ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[:::::[ ]:::::]
|
||
[::::::[[[[[[[: :]]]]]]]::::::]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[:::::::::::::: ::::::::::::::]
|
||
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
||
|
||
--> |