Sinun ei tarvitse käyttää vain WYSIWYG: ää
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 "Code" -painiketta. Tai mene View-valikkoon ja valitse "Code".
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:
- Napsauta "Split" -painiketta ("Code" ja "Design" välissä)
- Valitse Näytä-valikosta "Code and Design"
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ä, työkalupalkissa näkyy "Näytä valinnat" -painike. Voit myös tarkastella vaihtoehtoja siirtymällä Näytä-valikkoon ja valitsemalla "Code View Options". Vaihtoehdot ovat:
- Word Wrap - kääri HTML-koodin niin, että voit tarkastella sitä horisontaalisesti. 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, joka näkyisi 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 virheellinen keltaisena. Jos valitset keltaisen tunnisteen, Property Inspector antaa vinkkejä siitä, miten se korjataan.
- Syntaksivärjäys - kytkee tai katkaisee koodisi värikoodauksen. Voit muuttaa värikoodien värejä asetusten koodin väritysosassa.
- Automaattinen sisennys - tekee koodisi automaattisesti sisennyksen 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. Jos kirjoitat esimerkiksi " -tunnisteen kohdalle.
Mutta koodihavut eivät pääty tunnisteisiin. Voit lisätä koodin vihjeitä:
Jos koodin vihjeet eivät näy, voit napsauttaa Ctrl-välilyöntinäppäintä (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 on käynnistettävä 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 "Close Tags" -ominaisuuden, 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ä Window-valikkoon ja valitsemalla "Code Inspector" tai painamalla näppäimistön 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 Commands-valikkoon ja valitse "Apply Source Formatting". 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
- Valitse Muokkaa-valikosta kohtaa "Collapse Selection" "Code Collapse" -alivalikosta
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 "Collapse Selection".
Jos haluat piilottaa kaiken paitsi korostetusta, valitse "Collapse Outside Selection" jollakin 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 Suunnittelunäkymässä tai esikatsella 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ä.