Tekstin lisääminen ja muotoilu Dreamweaverissa

Monet ihmiset ovat iloisesti yllättyneitä siitä, kuinka helposti he voivat luoda perusverkkosivun tekstillä ja kuvilla Dreamweaverissa. Voit tehdä perusmuotoilun käyttämällä Dreamweaverin HTML-muotoiluvaihtoehtoja, mukaan lukien otsikko- ja kappaletunnisteet. Aloita näillä HTML-perustunnisteilla, jotta asiat ovat aluksi yksinkertaisia.

Tekstin lisääminen web-sivulle Dreamweaverissa

Jos haluat lisätä sivulle tekstiä, voit yksinkertaisesti lisätä kohdistimen sivun yläosaan ja kirjoittaa. Jos haluat lisätä tekstiä, joka sinulla on muualla, kuten Microsoft Wordilla luotuun tiedostoon, voit kopioida ja liittää tekstin Dreamweaveriin sen sijaan, että kirjoitat sen uudelleen.

Dreamweaver tarjoaa monia tapoja ylläpitää muotoilua, kun kopioit ja liität tekstiä toisesta ohjelmasta. Tämä ominaisuus on erityisen tärkeä, kun kopioit tekstiä Microsoft Wordista, koska jos liität tekstiä sellaisenaan, saatat lisätä paljon ylimääräistä koodia, joka on ainutlaatuista Microsoft Wordille ja voi aiheuttaa ongelmia Web-sivullesi.

Voit muuttaa oletusasetusta, jolla Dreamweaver käsittelee muotoilua, kun valitset Muokkaa→Liitä muuttamalla Kopioi/Liitä-luokan asetuksia. Voit myös valita Muokkaa→Liitä määräten näyttääksesi nämä vaihtoehdot aina, kun liität uutta sisältöä.

Seuraavassa on neljä päävaihtoehtoa tekstin lisäämiseen, kun valitset Muokkaa→Liitä määräten, sekä kolme tapaa tarkentaa valintaasi:

• Vain teksti: Dreamweaver poistaa kaikki muotoilut ja lisää pelkkää tekstiä.

• Teksti, jossa on rakenne: Dreamweaver sisältää kappaleita, luetteloita, taulukoita ja muita rakenteellisia muotoiluvaihtoehtoja.

• Teksti Structure Plus -perusmuotoilulla: Dreamweaver sisältää rakenteellisen muotoilun sekä perusmuotoilun, kuten lihavoinnin ja kursivoitun.

• Teksti Structure Plus Full Formatting: Edellisten vaihtoehtojen lisäksi Dreamweaver sisältää muotoilut, jotka on luotu ohjelmien, kuten Microsoft Wordin, tyylisivuilla.

• Säilytä rivinvaihdot: Rivinvaihdot säilyvät, vaikka et säilyttäisi muita muotoiluasetuksia. Tämä vaihtoehto ei ole käytettävissä, jos valitset Vain teksti.

• Puhdista Wordin kappalevälit: Tämä vaihtoehto poistaa Microsoft Wordille ainutlaatuisen muotoilukoodin ja on tarpeeton (eikä suositella) Web-tekstille.

• Muunna älykkäät lainaukset suoriksi lainauksiksi: Älykkäät lainausmerkit – yleinen nimi niille hienoille kiharaisille lainauksille, joita suunnittelijat rakastavat käyttää tulostetuissa asiakirjoissa – vaativat erikoismerkin, jotta se näkyy oikein verkossa, ja tämä erikoismerkki ei toimi kaikissa verkkoselaimissa. . Voit välttää tämän mahdollisen ongelman valitsemalla tämän ruudun ja muuntamalla kaikki älykkäät lainauksesi suoriksi.

Tekstin muotoilu otsikkotunnisteilla Dreamweaverissa

Yksi parhaista otsikoiden muotoiluvaihtoehdoista on otsikkotunnisteiden kokoelma. HTML:ssä käyttämällä otsikkotunnisteita (

,

ja niin edelleen) otsikona tai otsikkona toimivan tekstin muotoilu tarjoaa monia etuja. Otsikkotunnisteet on suunniteltu näytettäväksi suhteellisessa koossa

suurin,

pienempi,

vielä pienempiä ja niin edelleen

.

Joten riippumatta verkkosivun oletustekstin koosta (ja tekstin koot voivat vaihdella selaimen asetusten ja tietokonealustan mukaan), kaikki teksti, joka on muotoiltu

-tunniste on aina suurempi kuin teksti, joka on muotoiltu

.

Yleisesti uskotaan, että monet hakukoneet antavat etusijalle avainsanat, jotka on muotoiltu an

-tunniste, koska sivun tärkein teksti sisältyy yleensä suurimman kokoiseen otsikkoon. Samoin hakukoneiden asiantuntijat kertovat sinulle, että sinun tulee käyttää

tunniste vain kerran sivulla.

Voit muotoilla tekstiä otsikkotunnisteella seuraavasti:

Korosta teksti, jonka haluat muotoilla.

Varmista työtilan alareunassa olevasta Kiinteistötarkistuksesta, että tarkastajan vasemmalla puolella oleva HTML-painike on valittuna.

Valitse otsikkovaihtoehto Muoto-pudotusvalikosta.

Kun otsikkotunnisteita käytetään, teksti muuttuu automaattisesti suureksi ja lihavoiduksi suunnittelunäkymässä.

Luotto: Kuva Casey Stoll

Yleisesti ottaen Kiinteistötarkistus on helpoin tapa käyttää perusmuotoilua, mutta löydät nämä HTML-muotoiluvaihtoehdot myös valitsemalla Muoto→Kappalemuoto ja valitsemalla sitten otsikkovaihtoehdon näkyviin tulevasta alivalikosta.

Kappaleiden ja rivinvaihtojen lisääminen Dreamweaveriin

Kun luot web-sivuja, sinun on työskenneltävä monien rajoitusten puitteissa, jotka voivat aluksi tuntua hämmentävältä. Verkkosuunnittelu ja tulostussuunnittelu ovat pohjimmiltaan erilaisia, ja tämä voi tehdä jopa näennäisesti yksinkertaisista tehtävistä monimutkaisempia kuin voisi odottaa. Kappaleen ja rivinvaihdon luominen on hyvä esimerkki.

Jos työskentelet Dreamweaverin suunnittelunäkymässä ja painat Enter-näppäintä (Windows) tai Return-näppäintä (Mac), Dreamweaver lisää kappaletunnisteen tai

, koodissa, joka luo rivinvaihdon, jota seuraa tyhjä rivi.

Jos haluat rivinvaihdon ilman ylimääräistä tyhjää riviä, pidä Shift-näppäintä painettuna samalla, kun painat Enter-näppäintä (tai Return-näppäintä), jotta Dreamweaver lisää
tunnisteen koodiin ja luo yhden rivinvaihdon.

Paras käytäntö on välttää useiden kappale- tai katkotunnisteiden käyttämistä ylimääräisen tilan luomiseksi verkkosivulle (ja kaikki selaimet eivät säilytä tyhjää tilaa, jos luot sen tällä tavalla). Jos haluat lisätä sivun kappaleiden tai muiden elementtien väliin paljon tilaa, paras vaihtoehto on käyttää CSS:ää.

Jos työskentelet koodinäkymässä ja lisäät tilaa Enter- tai Return-näppäimellä, lisäät tyhjää tilaa koodiin. Ylimääräinen tila HTML-koodissa voi olla hyödyllistä, koska ylimääräinen tila voi helpottaa koodin lukemista, mutta yleensä se ei vaikuta tapaan, jolla sivu näytetään suunnittelunäkymässä tai verkkoselaimessa.