HTML-editointi

HTML-koodia ei voi suoraan editoida HTML-ruudussa. Se on tarkoitettu ainoastaan DOM-elementtien hakemiseen sivulta. Seuraavassa kuvassa näkyvät sovelluksen eri ruudut:

Komponenttiruudusta (2) vedetään piirtotilaan (1) halutut komponentit. DOM-rakennetta voi tarkastella Overview-ikkunasta (3) ja valita muokattavan komponentin helpommin kuin piirtotilasta. HTML-ruutua (4) käytetään pääasiassa elementtien hakuun luokan tai id:n perusteella. Attribuutti-ikkunassa voi määritellä uusia luokkanimiä tai id-tunnisteita sekä avain-arvopareja. Tyyliruudussa (6) näkyvät komponenttien CSS-määritykset. Jos elementti muutetaan HTML-koodiksi (Custom Code), sen saa avattua tyyliruutuun. Komponenttien muokkaus tapahtuu Appearance-, Options- ja Animation välilehdillä muokkausruudussa (7). Design-ruudun (8) kautta päästään luomaan uusia sivuja, tuomaan kuvatiedostoja ja ulkoisia js- ja css-tiedostoja sekä fontteja.

Mukautetut elementit

Kun komponentti vedetään piirtotilaan se ei ole suoraan koodista muokattavissa. Jos halutaan päästä muokkaamaan suoraan elementin html- tai css-koodia, elementti on ensin aktivoitava piirtotilassa (1) ja muutettava se Custom Code-muotoon hiiren 2-painikkeen valikosta (2):

Kun muunnos on tehty, muokkaustoiminnot ilmestyvät hiiren 2-painikkeen valikkoon (1). Edit-toiminto luo elementistä muokattavan tiedoston ja Open In-sivuvalikosta elementin koodin saa avattua ulkoisessa editorissa, esim. Visual Studio Code -editorissa. Elementin tyypiksi tulee nyt Custom Code. Muunnos HTML-muotoon voidaan tehdä myös Overview-ruudussa.

Muokkauskelpoinen dokumentti avautuu tyyliruutuun (1), jossa sitä voidaan muokata kaikilta osin. Muokkaukset näkyvät piirtotilassa Apply-painikkeen painamisen jälkeen.