+
- Tervetuloa Bracketsin varhaiseen esiversioon, uuteen avoimen lähdekoodin editoriin seuraavalle web-sukupolvelle. - Olemme suuria standardien faneja ja haluamme rakentaa paremmat työkalut JavaScriptille, HTML:lle ja CSS:lle sekä - niihin liittyville, avoimille web-tekniikoille. Tämä on vaatimaton alkumme. + Tervetuloa käyttämään Bracketsia, nykyaikaista, avoimen lähdekoodin koodieditoria, joka ymmärtää + web-suunnittelun. Se on kevyt mutta silti tehokas: koodieditori, joka sulauttaa visuaaliset työkalut suoraan + editoriin, niin että saat oikean määrän apua silloin, kun haluat sitä.
Brackets on erityyppinen editori. - Yksi huomattava ero on se, että tämä editori on kirjoitettu JavaScriptillä, HTML:llä ja CSS:llä. Se tarkoittaa, että - useilla teistä Bracketsin käyttäjistä on tarvittavat taidot editorin muokkaamiseen ja laajentamiseen. Itse asiassa - käytämme Bracketsia joka päivä sen itsensä kehittämiseen. Bracketsissa on joitakin ainutlaatuisia ominaisuuksia, - kuten pikamuokkaus, reaaliaikainen esikatselu ja muita, joita et voi löytää muista editoreista. Oppiaksesi lisää, - kuinka käyttää näitä ominaisuuksia, jatka lukemista. + Bracketsissa on joitakin ainutlaatuisia ominaisuuksia, kuten pikamuokkaus, reaaliaikainen esikatselu ja + muita, joita et voi löytää muista editoreista. Lisäksi Brackets on kirjoitettu JavaSciptillä, HTML:llä ja + CSS:llä. Se tarkoittaa, että useimmilla Bracketsin käyttäjistä on riittävät taidot muokata ja laajentaa + editoria. Itse asiassa käytämme Bracketsia joka päivä sen itsensä kehitykseen. Oppiaksesi lisää siitä, + kuinka käyttää avainominaisuuksia, jatka lukemista.
+ -+ Muokataksesi omaa koodiasi Bracketsia käyttäen voit vain avata tiedostosi sisältävän kansion. Brackets pitää + nykyistä avointa kansiota ”projektina”; ominaisuudet, kuten koodivihjeet, esikatselu ja pikamuokkaus, + käyttävät vain parhaillaan avoinna olevan kansion tiedostoja. +
+ + + Heti kun olet valmis luopumaan tästä näyteprojektista ja muokkaamaan omaa koodiasi, voit käyttää vasemman + sivupalkin pudotusvalikkoa kansioiden vaihtamiseen. Juuri nyt pudotusvalikossa lukee ”Aloitus”. Tämä on + kansio, joka sisältää tiedoston, jota tarkastelet juuri nyt. Avaa oma kansiosi napsauttamalla + pudotusvalikkoa ja valitsemalla ”Avaa kansio…”. + Voit käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin, + sisältäen tämän näyteprojektin. +Ei lisää dokumenttien välillä vaihtamista tai asiayhteyden hukkaamista. Muokatessasi HTML:ää käytä - Cmd/Ctrl + E -näppäinyhdistelmää avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon - liittyvän CSS:n. Muokkaa CSS:ääsi, paina ESC-näppäintä ja olet takaisin editoimassa HTML:ää, tai jätä - CSS-säännöt auki ja ne tulevat osaksi HTML-editoriasi. Jos painat ESC-näppäintä pikaeditorin ulkopuolella, - ne kaikki sulkeutuvat. + näppäinyhdistelmää Cmd/Ctrl + E avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon + liittyvän CSS:n. Muokkaa CSS:ääsi, paina ESC-näppäintä ja olet taas muokkaamassa HTML:ää, tai + yksinkertaisesti jätä CSS-säännöt auki, ja niistä tulee osa HTML-editoriasi. Jos painat + ESC-näppäintä pikaeditorin ulkopuolella, ne kaikki sulkeutuvat. Pikaeditori löytää myös LESS- ja + SCSS-tiedostoissa määritellyt säännöt, sisältäen sisäkkäiset sellaiset.
- Haluatko nähdä sen toiminnassa? Aseta osoitin alla olevan -tagin päälle ja paina - Cmd/Ctrl + E. Sinun pitäisi nähdä CSS-pikaeditorin ilmestyvän alapuolelle näyttäen CSS-säännön, joka - kuuluu sille. Pikamuokkaus toimii niin class- kuin id-attribuuttien kanssa. + Haluatko nähdä sen toiminnassa? Aseta kohdistin alla olevaan -tägiin ja paina + Cmd/Ctrl + E. Sinun pitäisi nähdä, kun CSS-pikaeditori ilmestyy alapuolelle näyttäen CSS-säännön, + joka pätee siihen. Pikamuokkaus toimii toki myös class- ja id-attribuuttien kanssa. Voit käyttää sitä myös + LESS- ja SCSS-tiedostojesi kanssa. - Voit luoda uusia sääntöjä samalla tavalla. Napsauta jotakin alaosan -tageista ja paina - Cmd/Ctrl + E. Sille ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta lisätäksesi - uuden säännön -tageille. + Voit luoda uusia sääntöjä samalla tavalla. Napsauta yhtä alaosan -tägeistä ja paina + Cmd/Ctrl + E. Sille ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta + lisätäksesi uuden säännön -tägeille. -
+
- Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita, kuten funktioita JavaScriptissä, värejä ja - animaatioiden ajoitusfunktioita, ja lisäämme koko ajan yhä enemmän ominaisuuksia. Toistaiseksi sisäeditorit eivät voi - olla sisäkkäin, joten voit käyttää pikamuokkausta vain, kun osoitin on täyskokoisessa editorissa. + Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita - kuten JavaScriptin funktioita, + värejä ja animaatioiden ajoitusfunktioita - ja me lisäämme koko ajan yhä enemmän ominaisuuksia. +
++ Toistaiseksi sisäeditorit eivät voi olla sisäkkäin, joten voit käyttää pikamuokkausta vain silloin, kun + kohdistin on täyskokoisessa editorissa.
- Tiedäthän sen ”tallenna/päivitä-tanssin”, jota olemme tehneet vuosia? Se, jossa tehdään muutoksia editorissa, - tallennetaan, vaihdetaan selaimeen ja sitten päivitetään tuloksen näkemiseksi viimein? Bracketsissa sinun ei - tarvitse harrastaa tätä tanssia. + Tiedäthän sen ”tallenna ja päivitä -tanssin”, jota olemme harrastaneet vuosia? Se, jossa tehdään muutoksia + editorissa, painetaan tallenna, vaihdetaan selaimeen ja sitten päivitetään, jotta tulos tulee viimein + näkyville? Bracketsissa sinun ei tarvitse harrastaa tätä tanssia.
- Brackets avaa reaaliaikaisen yhteyden paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset samalla kun - kirjoitat! Saatat jo olla tehnyt jotain tämän kaltaista selainpohjaisilla työkaluilla, mutta Bracketsin kanssa ei - tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan selaimessasi, mutta se - sijaitsee editorissasi! + Brackets avaa reaaliaikaisen yhteyden paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset + samalla kun kirjoitat! Saatat olla jo tehnyt jotakin tämän kaltaista selainpohjaisilla työkaluilla, mutta + Bracketsin kanssa ei tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan + selaimessasi, mutta se sijaitsee editorissasi!
- Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun osoittimesi on - CSS-säännön päällä, Brackets korostaa kaikki sääntöön liittyvät elementit selaimessa. Samoin muokatessa - HTML-tiedostoa, Brackets korostaa vastaavat HTML-elementit selaimessa. + Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun kohdistin on + CSS-säännöllä, Brackets korostaa kaikki siihen liittyvät elementit selaimessa. Samalla tavoin muokattaessa + HTML-tiedostoa Brackets korostaa vastaavat HTML-elementit selaimessa.
- Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta salama-kuvaketta Brackets-ikkunan - oikeassa yläkulmassa tai paina Cmd/Ctrl + Alt + P. Kun esikatselu on käytössä HTML-dokumentissa, kaikkia - linkitettyjä CSS-dokumentteja voidaan muokata reaaliajassa. Kuvake muuttuu harmaasta kultaiseksi, kun Brackets - muodostaa yhteyden selaimeesi. + Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta Brackets-ikkunan oikeassa + yläkulmassa sijaitsevaa salamakuvaketta tai paina Cmd/Ctrl + Alt + P. Kun esikatselu on käytössä + HTML-dokumentissa, kaikkia linkitettyjä CSS-dokumentteja voi muokata reaaliajassa. Kuvake muuttuu harmaasta + kultaiseksi, kun Brackets muodostaa yhteyden selaimeesi. - Aseta osoittimesi nyt yläpuolella olevan -tagin päälle. Huomaa sininen korostus, joka ilmestyy kuvan + Aseta kohdistin nyt yläpuolella olevaan -tägiin. Huomaa sininen korostus, joka ilmestyy kuvan ympärille Chromessa. Käytä seuraavaksi Cmd/Ctrl + E -näppäinyhdistelmää avataksesi määritellyt - CSS-säännöt. Yritä muuttaa reunaviivan kokoa arvosta 10px arvoon 20px tai vaihtaa taustaväriä arvosta ”transparent” - arvoon ”hotpink”. Jos Brackets ja selaimesi ovat näytöllä vierekkäin, näet muutosten heijastuvan välittömästi - selaimeesi. Siistiä, eikö? + CSS-säännöt. Yritä muuttaa reunaviivan kokoa arvosta 10px arvoon 20px tai vaihtaa taustaväriä arvosta + ”transparent” arvoon ”hotpink”. Jos Brackets ja selain ovat näytölläsi vierekkäin, näet muutosten + heijastuvan välittömästi selaimeesi. Siistiä, eikö?- Tällä hetkellä Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa muutokset - JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme tällä hetkellä - esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella, mutta toivomme - pystyvämme tuomaan tämän toiminnon kaikille merkittäville selaimille tulevaisuudessa. + Nykyisellään Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa + muutokset JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme + parhaillaan esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella, + mutta toivomme pystyvämme tuomaan tämän toiminnon kaikille pääselaimille tulevaisuudessa.
- Niille meistä, joilla ei ole vielä muistissa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi ja - helpoksi nähdä täsmälleen, mitä väriä ollaan käyttämässä. Sekä CSS:ssä että HTML:ssä osoita yksinkertaisesti mitä - tahansa väriarvoa tai liukuväriä ja Brackets näyttää esikatselun tästä (liuku)väristä automaattisesti. Sama pätee - kuviin: yksinkertaisesti osoita kuvalinkkiä Brackets-editorissa ja se näyttää pikkukuvaesikatselun tästä kuvasta. + Niille meistä, jotka eivät vielä osaa ulkoa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi + ja helpoksi nähdä täsmälleen, mitä väriä on käyttämässä. Kerta kaikkiaan osoita mitä tahansa väriarvoa tai + liukuväriä joko CSS:ssä tai HTML:ssä, ja Brackets näyttää esikatselun tästä väristä tai liukuväristä + automaattisesti. Sama tulee kuviin: osoita yksinkertaisesti kuvalinkkiä Brackets-editorissa ja se näyttää + pienen esikatselukuvan tästä kuvasta.
- Kokeillaksesi pikanäkymää itse aseta osoittimesi tämän dokumentin yläosassa olevan -tagin päälle ja - paina Cmd/Ctrl + E avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä tahansa väriarvoista - CSS:n yhteydessä. Voit myös nähdä sen toiminnassa liukuvärin kohdalla avaamalla CSS-pikaeditorin - -tagille ja osoittamalla mitä tahansa taustakuvan arvoista. Kokeillaksesi kuvan esikatselua aseta osoittimesi tässä - dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle. + Kokeile pikanäkymää itse asettamalla kohdistimesi tämän dokumentin yläosassa sijaitsevaan + -tägiin ja painalla Cmd/Ctrl + E avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä + tahansa CSS:n väriarvoista. Voit myös nähdä sen toiminnassa liukuväreissä avaamalla CSS-pikaeditorin + -tägille ja osoittamalla mitä tahansa taustakuva-arvoista. Kokeile kuvan esikatselua + asettamalla osoittimesi tässä dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle.- Sen kaiken hyvän lisäksi, mitä Bracketsiin on rakennettu, suuri ja kasvava laajennuskehittäjien yhteisömme on tehnyt - yli sata laajennusta, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, mitä tarvitset ja jota Brackets ei - tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selataksesi tai hakeaksesi saatavilla - olevien laajennusten luetteloa valitse Tiedosto > Laajennusten hallinta ja napsauta ”Saatavilla”- - välilehteä. Kun löydät haluamasi laajennuksen, napsauta vain ”Asenna”-painiketta sen vierestä. -
- -- Muokataksesi omaa koodiasi Bracketsia käyttäen voit vain avata tiedostosi sisältävän kansion. Brackets pitää nykyistä - avointa kansiota ”projektina”; Ominaisuudet, kuten koodivihjeet, esikatselu ja pikamuokkaus käyttävät vain tällä - hetkellä avoinna olevan kansion tiedostoja. + Sen kaiken hyvän lisäksi, jota Bracketsiin on rakennettu, on suuri ja kasvava laajennuskehittäjien + yhteisömme tehnyt satoja laajennuksia, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, jota tarvitset + ja jota Brackets ei tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selaa + saatavilla olevien laajennusten luetteloa tai hae siitä valitsemalla Tiedosto > Laajennusten + hallinta ja napsauttamalla ”Saatavilla”-välilehteä. Kun löydät haluamasi laajennuksen, napsauta + vain ”Asenna”-painiketta sen vierestä.
- - Heti kun olet valmis luopumaan tästä näyteprojektista ja muokkaamaan omaa koodiasi, voit käyttää vasemman sivupalkin - pudotusvalikkoa kansioiden vaihtamiseen. Juuri nyt pudotusvalikossa lukee ”Aloitus”. Tämä on tiedoston, jota katsot - juuri nyt, sisältävä kansio. Napsauta pudotusvalikkoa ja valitse ”Avaa kansio…” avataksesi oman kansiosi. Voit - käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin, sisältäen tämän - näyteprojektin. - -Brackets on avoimen lähdekoodin projekti. Web-kehittäjät ympäri maailmaa osallistuvat paremman koodieditorin - kehittämiseen. Paljon enemmän rakennetaan laajennuksia, jotka laajentavat Bracketsin kykyjä. Anna meidän tietää, + kehittämiseen. Vieläkin enemmän kehitetään laajennuksia, jotka laajentavat Bracketsin kykyjä. Kerro meille, mitä ajattelet. Jaa ideasi tai osallistu suoraan projektiin.