Dreamweaver on loistava WYSIWYG-editori, mutta jos et ole kiinnostunut kirjoittamaan verkkosivuja "mitä näet, mitä saat", voit silti käyttää Dreamweaveria, koska se on myös hyvä tekstieditori. Dreamweaver-koodieditorissa on kuitenkin paljon ominaisuuksia, jotka kulkevat tieltä, koska ensisijainen painopiste on tuotteen "suunnittelunäkymässä" tai WYSIWYG-editori-osassa.
Miten pääset sisään Dreamweaver-koodinäkymään
Jos et ole koskaan käyttänyt Dreamweaveria HTML-editoriin ennen kuin et ole koskaan edes huomannut sivun yläosassa olevia kolmea painiketta: "Code", "Split" ja "Design". Dreamweaver käynnistyy oletuksena "Suunnittelunäkymä" - tai WYSIWYG-tilassa. Mutta on helppo siirtyä katselemaan ja muokkaamaan HTML-koodia. Napsauta vain Koodi painiketta. Tai mene kohtaan näkymä valikosta ja valitse Koodi.
Jos vain oppii kirjoittamaan HTML-koodia tai haluat saada tunnustuksen siitä, miten muutokset vaikuttavat dokumenttiin, voit avata koodinäkymän ja suunnittelunäkymän samanaikaisesti. Tämän menetelmän kauneus on, että voit muokata molemmissa ikkunoissa. Joten voit kirjoittaa kuvakoodisi koodin HTML: ssä ja käyttää sitten suunnittelunäkymää siirtääksesi sen sivun toiseen paikkaan vetämällä ja pudottamalla.
Voit tarkastella molempia kerralla joko:
- Klikkaa Jakaa painiketta (välillä Koodi ja Design).
- Vuonna näkymä valikosta, valitse Koodi ja muotoilu.
Kun olet mukava käyttää Dreamweaveria muokata HTML-koodia, voit muuttaa asetuksiasi avaamalla Dreamweaverin koodinäkymän oletusarvoisesti. Helpoin tapa on tallentaa koodinäkymä työtilaksi. Dreamweaver aukeaa viimeiseen työtilaan, jota käytit. Jos näin ei tapahdu, mene vain Window-valikkoon ja valitse haluamasi työtila.
Koodinäkymän asetukset
Dreamweaver on niin joustava, koska sillä on niin monta tapaa muokata sitä ja tehdä se toimimaan haluamallasi tavalla. Asetusikkunassa on koodivärjäys, koodin muotoilu, koodinvihjeet ja koodin uudelleenkirjoituksen asetukset, joita voit säätää. Voit myös muuttaa joitain erikoisasetuksia itse koodinäkymässä.
Kun olet koodinäkymässä, on a Näytä valinnat painiketta työkalupalkissa. Voit myös tarkastella vaihtoehtoja siirtymällä näkymä valikosta ja valitsemalla Koodinäkymän asetukset. Vaihtoehdot ovat:
- Rivitys - Wraps HTML-koodia niin, että voit tarkastella sitä vaakasuorassa vierittämisessä. Huomaa, että tämä vaihtoehto ei lisää koodin kelkan palautuksia, vaan näyttää koodin niin, että se on helpompi lukea.
- Linjanumerot - Näyttää rivinumerot koodin puolelle. Se näyttää riviväli-symbolin viivoille, jotka käävät pidempään kuin näkymäikkuna.
- Piilotetut merkit - näyttää erikoismerkkejä tyhjän tilan sijaan, jotka näkyisivät verkkosivulla. Kuten piste korvaa välilyönnin, kaksinkertainen kaveri korvaa jokaisen välilehden ja pilkolevy tai kohdemerkki korvaa jokaisen riviosan.
- Korosta virheellinen koodi - korostaa HTML: tä, joka on keltainen. Jos valitset keltaisen tunnisteen, Property Inspector antaa vinkkejä siitä, miten se korjataan.
- Syntaksivärjäys - kytkee koodin värikoodauksen päälle tai pois. Voit muuttaa värikoodien värejä asetusten koodin väritysosassa.
- Automaattinen sisennys - tekee koodisi sisennyksen automaattisesti kelkan palaamisen jälkeen, jos yläpuolella oleva koodi on sisennetty. Voit muuttaa sisennyksen kokoa muuttamalla välilehden koon asetusten koodinmuokkausosasta.
HTML-koodin muokkaaminen Dreamweaver-koodinäkymässä
HTML-koodia on helppo muokata Dreamweaverin koodinäkymässä. Aloita vain kirjoittamalla HTML. Mutta Dreamweaver tarjoaa sinulle joitain extrat, jotka ulottuvat sen alapään HTML-editoriin. Kun kirjoitat HTML-tunnisteen, kirjoitat <. Jos pysäytät heti kyseisen merkin jälkeen, Dreamweaver näyttää luettelon HTML-tunnisteista. Näitä kutsutaan koodinvihjeiksi. Jos haluat rajoittaa valintaa, aloita kirjainten kirjoittaminen - Dreamweaver kaventaa pudotusluettelon tunnisteeseen, joka sopii kirjoittamaansi.
Jos olet uusi HTML-tiedosto, voit selata HTML-tunnisteiden luetteloa ja valita erilaisia, jotta näet, mitä he tekevät. Dreamweaver kysyy edelleen ominaisuuksia, kun olet kirjoittanut tunnisteen. Esimerkiksi, jos kirjoitat <>, Dreamweaver pudottaa alas HTML-tunniste, muiden tunnisteiden kanssa alkaen seuraavasta. Jos jatkat kirjoittamalla kirjainta m, Dreamweaver kaventaa sen alas tag.
Mutta koodihavut eivät pääty tunnisteisiin. Voit lisätä koodin vihjeitä:
- HTML-attribuutit
- Luokka- ja ID-nimet
- CSS-ominaisuudet
Jos koodin vihjeet eivät näy, voit lyödä Ctrl-välilyöntiä (Windows) tai Cmd-välilyöntiä (Macintosh) saadaksesi ne näkyviin. Yleisin syy siihen, miksi koodinavaus ei välttämättä näy, on jos vaihdat toiseen ikkunaan ennen kuin päätät tagin. Koska Dreamweaver sulkee merkin kirjoittamisen <, jos jätät ikkunan ja palaat, sinun täytyy käynnistää koodin vihjeet uudelleen.
Voit poistaa koodihavainnon käytöstä napauttamalla poistopainiketta.
Kun olet kirjoittanut avaavan HTML-tunnisteen, sinun on suljettava se. Dreamweaver tekee tämän luonnollisella tavalla. Jos kirjoitat Sulje tagit joka parhaiten sopii tarpeisiisi.
Jos et ole valmis siirtymään sivusi muokkaamiseen HTML: ssä, mutta haluat tarkistaa koodin kirjoittamalla, kokeile koodin tarkastajaa. Tämä avaa HTML-koodin erillisessä ikkunassa. Se toimii samoin kuin koodinäkymä, ja itse asiassa se on periaatteessa irrotettava koodinäkymäikkuna nykyiselle dokumentille.Avaa koodi tarkastaja siirtymällä kohtaan Ikkuna valikosta ja valitse Koodin tarkastaja tai osuma F10 näppäintä.
Dreamweaver muotoilee HTML-koodin, mutta haluat sen näyttävän. Jos esimerkiksi käytät 3 välilyöntiä, jos haluat upottaa IMG-tunnisteita, mutta et koskaan sijoita, voit määrittää koodinmuokkausvaihtoehtojen muotoilutiedot. Sitten siirryt komennot valikosta ja valitse Käytä lähdemuotoilua. Tämä on erinomainen tapa saada jonkun muun kirjoittama koodi sellaiseen muotoon kuin sinä.
Ominaisuus, jota monet HTML-kooderit eivät tiedä tai eivät käytä, on kyky romahtaa HTML-koodin. Tämä ei poista tageja asiakirjasta, vaan poista ne näkymästä siten, etteivät ne häiritse työstään. Yhteenveto:
- Valitse kohta, jonka haluat piilottaa.
- Vuonna Muokata valikosta, valitse Kutista valinta alkaen Koodi Collapse alivalikon
Helpompi tapa on valita koodi ja napsauttaa sitten koodin romahtamisen kuvakkeita, jotka näkyvät kourussa. Voit myös napsauttaa hiiren oikealla painikkeella valittua koodia ja valita Kutista valinta.
Jos haluat piilottaa kaiken paitsi mitä korostetaan, valitse Pienennä ulkopuolista valintaa missä tahansa edellä mainituista menetelmistä.
Laajenna romahdettua koodia kaksoisnapsauttamalla sitä. Tämä avaa koodin ylös ja valitsee sen. Sitten voit siirtää kyseisen valinnan tai poistaa sen tai lisätä siihen lisämerkkejä.
Voit pienentää ja laajentaa ominaisuutta koko ajan sivuilla, joissa et halua muokata ulkoista mallia. Valitse vain sisältöalue, jonka haluat muokata ja romahtaa ulkopuolelta. Kirjoita HTML. Voit silti tarkastella sivua Design katsele tai esikatsele sitä selaimessa. Sarakoodia ei ole poistettu asiakirjasta, vaan piilotettu näkymästä. Voit myös käyttää sitä, kun työskentelet sarjan kohteita. Kun olet valmis, romuta se. Tiedät, että olet valmis, kun koodia ei näytetä.
