Upotetulla HTML-koodilla tarkoitetaan koodia, jonka on luonut ulkopuolinen sivusto, kuten Google, YouTube, Flickr tai Picasa. Voit luoda näihin verkkosivustoihin tilin, kirjautua sisään, kopioida upotettavan koodin näistä sivustoista ja lisätä sen omaasi.

Kun liität upotettua HTML-koodia sivulle, se toimii kuin ikkuna, joka esittää raamiensa sisällä sisältöä ulkopuolisesta sivustosta.

Upotettu HTML-koodi on erinomainen tapa lisätä nopeasti ja helposti monimutkaista tietoa (kuten karttoja, sääennusteita ja osakekursseja) sekä multimediaa (kuten digitaalisia videoita, diaesityksiä ja äänitiedostoja). Tästä strategiasta on myös se hyöty, että voit käyttää kolmannen osapuolen sivustoa isännöintipalveluna ja tiedostojen latauspalveluna. Jos esimerkiksi luot maksuttoman tilin YouTubeen, voit luoda oman YouTube-kanavasi ja ladata sille sivustosi videosisältöä. YouTubessa on käytettävissä sivu, joka yksinkertaistaa lataamisprosessia ja tallentaa videotiedostot YouTubeen. Kun haluat päivittää sivustoasi, voit yksinkertaisesti lisätä videoita YouTube-kanavallesi, kopioida upotuskoodin ja liittää sen sivullesi. Tämä lisää uudet videot Muse-sivustoosi.

Tässä osiossa kopioidaan lähdekoodi Tumblrista. Se on maksuton verkkopalvelu, joka vaatii tilin luomisen ja sisäänkirjautumisen. Sen jälkeen voit julkaista palvelussa blogikirjoituksia, jotka ovat julkisesti saatavilla. Blogit ovat helppokäyttöisiä ja hyödyllisiä etenkin silloin, jos haluat tehdä oman sivuston päivittämisestä helppoa henkilölle, joka ei ole teknisesti suuntautunut. Useimmissa blogisivustoissa on verkon kautta käytettävä hallintapaneeli, joten voit kirjautua tilille millä tahansa selaimella ja julkaista uusia kirjoituksia ilman minkäänlaista HTML-osaamista tai lisäsovelluksia.

Huomautus: Sivustossasi käyvät eivät tarvitse Tumblr-tiliä sivustoosi upotetun blogin tarkasteluun. Vain sinä tarvitset tilin, koska suunnittelet sivustoa, jotta voit luoda mukautetun blogin ja sivustoon lisättävän upotuskoodin.

1. Tämän opastusohjelman seuraamiseen ei tarvita Tumblr-tiliä. Kopioi vain seuraava koodi, jonka Tumblr-sivusto on antanut maksuttoman blogin luomisen jälkeen:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. Avaa sivu ja muokkaa sitä suunnittelunäkymässä kaksoisnapsauttamalla tapahtumasivun miniatyyria Muoto-näkymässä.
3. Napsauta tyhjän sivun keskustaa ja upota HTML-koodi jollakin seuraavista tavoista:

• Valitse Muokkaa > Liitä tai liitä koodi suoraan sivulle käyttämällä näppäimistöpikavalintaa (Macissa komento+V ja Windowsissa Ctrl+V).
• Valitse Objekti > Lisää HTML. Napsauta näkyviin tulevan Muokkaa HTML:ää -ikkunan kenttää ja liitä sisältö. Sulje Muokkaa HTML:ää -ikkuna valitsemalla OK.

Huomautus: Useimmissa tapauksissa Muse tunnistaa HTML-koodin ja upottaa liittämäsi HTML:n automaattisesti sivulle. Jos kuitenkin näet sivulla koodia ulkopuolisen sivuston sisällön sijaan, kokeile valita Objekti > Lisää HTML.

Kun olet upottanut HTML-koodin, näet sinisen muokkausalueen sekä kahvat niiden blogikirjoitusten ympärillä, jotka on syötetty Katie's Cafen Tumblr-tilille.

4. Muuta blogisisällön kokoa vetämällä kahvoja valintatyökalulla siten, että sisältö peittää noin 80 % sivun leveydestä. Keskitä blogin sisältö sivulle, jotta toistuva taustakuvio näkyy sen vasemmalla ja oikealla puolella. Siniset mittasuorakulmiot ilmaisevat etäisyyden muista objekteista. Punainen kohdistusapuviiva tulee hetkeksi näkyviin, kun valittu objekti on keskitetty pystysuunnassa.

Edellä on kuvattu kaikki, mitä tarvitaan HTML-koodin upottamiseen Muse-sivuille. Jos haluat muokata HTML-koodia, voit napsauttaa upotettua HTML-elementtiä hiiren kakkospainikkeella ja valita esiin tulevasta pikavalikosta Muokkaa HTML:ää. Tämä avaa Muokkaa HTML:ää -ikkunan, jossa pääset käsiksi aiemmin liittämääsi koodiin.

Nyt on aika tarkistaa muutokset, jotka teit tapahtumasivulle:

5. Avaa tapahtumasivu uudessa selainikkunassa valitsemalla Tiedosto > Esikatsele sivu selaimessa.

Huomaa, että kun vierität blogikirjoitusten listaa alaspäin, ylätunniste näkyy sivun muun sisällön päällä. Tämä johtuu siitä, että tapahtumasivu käyttää etualan sivupohjaa, ja kyseisen sivupohjan ylätunnistesisältö on määritetty näkymään etualalla.

Tapahtumasivu on nyt valmis. Seuraavassa osiossa opit liittämään upotettua HTML-sisältöä widgetiin ja määrittämään, kuinka käyttäjän toimet vaikuttavat ulkopuolisen sisällön esitystapaan.

Videon upottaminen Muse-sivustoon

Tällä hetkellä kohdesäilö on täytetty harmaalla täyttövärillä. Voit kuitenkin sijoittaa kohdesäilöön kaikenlaista sisältöä, kuten erilaisia kuvatiedostoja, täytettyjä suorakulmioita, tekstiä tai toisesta sivustosta kopioitua upotettua HTML-koodia.

Tässä esimerkissä liitetään YouTuben luomaa upotettua HTML-koodia.

Ajatellaan, että käyt YouTube.com-sivustossa katsomassa videon, jonka olet ladannut omalle tilillesi. Jos napsautat Jaa-painiketta ja sitten Upota-painiketta, saat käyttöösi videon upotuskoodin.

Tässä videossa Katie's Cafe -videon upotuskoodi on jo kopioitu sivustoon, joten sinun ei tarvitse käydä YouTubessa. Kopioi alla oleva upotuskoodi leikepöydällesi:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

Yllä oleva koodi käyttää iFrame-nimiöitä määrittämään linkin videotiedostoon, joka on ladattu YouTubeen. iFrame on HTML-säilö, joka mahdollistaa sisällön esittämisen kehyksessä, kun se lisätään verkkosivulle.

Kun olet kopioinut yllä olevan koodin, palaa takaisin Museen.

1. Napsauta sivun harmaata reunusta valintatyökalulla siten, että vasemman yläkulman valintaosoittimessa näkyy sana Sivu. Tämä tarkoittaa, että koko sivu on valittu.
2. Napsauta suurempaa kohdesäilöä harmaalla täyttövärillä. Vasemman yläkulman valintaosoittimessa näkyy sana Kooste. Napsauta harmaata kohdesäilöä uudelleen. Valintaosoittimessa näkyy sana Säilö. Napsauta sitä vielä uudelleen (sana on Liipaisin) ja sitten vielä kerran, kunnes valintaosoittimessa näkyy sana Kuvakehys. Poista kuvakehys kohdesäilöstä askelpalauttimella (Windows) tai Delete-näppäimellä (Mac).

Kun sisempi kohdesäilö on yhä valittuna, seuraava vaihe on yllä kopioidun HTML-koodin liittäminen kohdesäilöön.

Huomautus: Aivan kuten aiemmassa esimerkissä, jossa liitit pääkuvan kohdesäilöön, koodin liittäminen kohdesäilöön ei aina ole helppoa, koska tarkoitus on liittää koodi widgetin kohdesäiliön sisään. Jos oikea elementti ei ole valittuna, videokoodin voi vahingossa liittää widgetin ulkopuolelle, jolloin se upotetaan suoraan sivulle. Etene siis varovasti. Voit testata valolaatikon toimintaa Esikatsele-painikkeella. Jos huomaat, että video näkyy, vaikka et ole vielä napsauttanut pääkuvaa, videokoodia ei ole onnistuneesti liitetty säilöön. Videon pitäisi näkyä vasta, kun olet napsauttanut pääkuvaa.

Liitä videokoodi kohdesäilöön seuraamalla näitä ohjeita (kun valintaosoittimessa näkyy sana Säilö).

3. Valitse Objekti > Lisää HTML. Valitse avautuvassa ikkunassa oletusarvoinen paikkamerkkiteksti ja poista se painamalla Delete-näppäintä (Mac) tai askelpalautinta (Windows). Liitä yllä kopioimasi YouTube-koodi HTML-koodikenttään valitsemalla Muokkaa > Liitä. Sulje HTML-koodi-ikkuna valitsemalla OK.

Huomautus: Muse tunnistaa monissa tapauksissa automaattisesti HTML-koodin liittämisen ja ymmärtää, että kyse on HTML-koodista eikä tavallisesta tekstistä. Jos et halua käyttää Objekti > Lisää HTML -valintaa, voit napsauttaa hiiren kakkospainiketta (tai painaa Ctrl-näppäintä napsauttaessasi), kun sisempi kohdesäilö on valittuna, ja valita esiin tulevasta pikavalikosta Liitä. (Vaihtoehtoisesti voit liittää lähdekoodin kohdesäilöön valitsemalla Muokkaa > Liitä tai käyttämällä näppäimistöpikavalintaa.) Musessa voit liittää videokoodin kohdesäilöön monella eri tavalla.

Kun olet liittänyt koodin kohdesäilöön, näet näytettävän videon ensimmäisen kuvan (kahvikupin). Videon ensimmäisen kuvan näkyminen ilmaisee, että HTML-upotuskoodin liittäminen onnistui. Video ei toistu, kun muokkaat sivua Muoto-näkymässä. Se toistuu vasta, kun napsautat Esikatsele-painiketta ohjauspaneelissa tai esikatselet sivua selaimessa.

4. Muuta tarvittaessa kohdesäilön kokoa valintatyökalulla. Tämä kasvattaa sen mittoja upotetun HTML-videosisällön koon mukaisiksi. Leveyden pitäisi olla noin 670 pikseliä ja korkeuden noin 415 pikseliä. Kun video on valittuna, valintaosoittimessa näkyy sana HTML-kohde.
5. Kun kohdesäilö on valittuna, valitse ulompi säilö painamalla kerran Esc-näppäintä. Halutessasi voit poistaa Valolaatikko-esityswidgetin valinnan napsauttamalla alueen ulkopuolella ja napsauttamalla sitä sen jälkeen kahdesti: kerran valitaksesi Koosteen ja toisen kerran valitaksesi suuremman säilön. Vedä säilön kahvoja valintatyökalulla siten, että kohdesäilö on säilön keskellä. Muuta säilön leveydeksi 710 pikseliä ja korkeudeksi 460 pikseliä.
6. Määritä Täyttö-valikossa säilön täyttöväriksi ruskea (#63301B) ja määritä täyttövärin peittävyydeksi 100.

7. Valitse säilön alareunassa oleva tekstikehys ja poista se painamalla Delete-näppäintä (Mac) tai askelpalautinta (Windows). Tekstikehykseen voidaan lisätä kuvateksti kohdesisällölle, mutta tässä projektissa sitä ei käytetä.
8. Valitse Sulje-laatikko (merkitty X:llä) säilön oikeassa yläreunassa. Valitse Sulje-laatikon nimike napsauttamalla laatikon sisäpuolella ja poista se. Määritä Täyttö-valikossa täyttöväriksi Ei mitään. Napsauta kansiokuvaketta Täyttö-valikon Kuva-osion vieressä ja valitse tiedosto nimeltä icon-close.png. Muuta Sulje-laatikon kokoa valintatyökalulla siten, että sulkemiskuvake näkyy kokonaisuudessaan.
9. Siirrä sekä kohde- että liipaisinsäilöt valintatyökalulla haluamaasi kohtaan sivulla.
10. Kun Kooste on valittuna, avaa Asetukset-paneeli sinisellä nuolipainikkeella. Käytä tässä esimerkissä seuraavia asetuksia:
    • Sijainti: Valolaatikko
    • Siirtymä: Häivytys
    • Automaattinen toisto: Ei käytössä
    • Sekoita: Ei käytössä
    • Piilota kaikki alussa: Ei käytössä
    • Ota pyyhkäisy käyttöön: Käytössä
    • Liipaisimet päällä: Ei käytössä
    • Sulje-painike: Käytössä
    • Näytä Valolaatikko muokattaessa: Käytössä
    • Näytä kaikki Muoto-näkymässä: Käytössä

Sulje asetusvalikko napsauttamalla sen ulkopuolella. Nyt widgetin asetukset on määritetty ja sitä voidaan testata.

Aiemmin tässä opastusohjelmassa opit lisäämään Tumblr-blogin tapahtumasivulle HTML-koodia upottamalla. Opit myös liittämään upotettua HTML-koodia Valolaatikko-koostewidgetin sisään. Tämä avasi YouTube-videon valolaatikkoikkunassa, kun vierailija napsautti painiketta. Tässä osiossa tutustut jälleen uudentyyppiseen upotettuun HTML-koodiin, jonka tarjoaa Google Maps -sivusto. Noudata seuraavia ohjeita:

1. Jos visit-sivu ei vielä ole avoinna suunnittelunäkymässä, napsauta Muoto-painiketta ja avaa sivu muokattavaksi kaksoisnapsauttamalla sen miniatyyria.

Tämä lähdekoodi on kopioitu maps.google.com-sivustosta. Voit luoda mukautetun kartan yhteen osoitteeseen (tai tässä tapauksessa useisiin sijainteihin). Kyse on maksuttomasta palvelusta – annat vain osoitteen (tai osoitteet) ja napsautat Luo kartta -painiketta.

Kun olet luonut kartan, voit kirjoittaa sille otsikon ja kuvauksen Google Maps -käyttöliittymässä. Sen jälkeen pääset käsiksi koodiin napsauttamalla Linkki-painiketta. Valitse HTML-koodi, joka on sivustoon liitettävän HTML-koodin kentässä. Sen jälkeen olet valmis palaamaan Museen ja upottamaan HTML-koodin sivulle.

Tässä opastusohjelmassa sinun ei tarvitse itse luoda uutta karttaa. Halutessasi voit kokeilla palvelun käyttöä kirjoittamalla minkä tahansa osoitteen, luomalla kartan ja kopioimalla koodin. Jos kuitenkin haluat vain testata, kuinka tämä ominaisuus toimii, voit käyttää valmiiksi luotua HTML-koodia.

2. Kopioi seuraava lähdekoodi:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. Kopioi koodi visit-sivun yläreunaan. Sijoita upotettu HTML-koodi valintatyökalulla sivun pystysuuntaiseen keskustaan lähelle yläreunaa siten, että noin neljäsosa kartasta on ylätunnistealueen päällä. Varmista, että jätät kartan ja sen alla olevan kukkagrafiikan väliin hieman tilaa, jotta voit lisätä kuvaustekstin.
4. Vedä tekstityökalulla tekstikehys upotetun kartan alapuolelle. Kopioi seuraava teksti ja liitä se tekstikehykseen:

Leipomomme edustavat jokaisen paikallisympäristönsä ainutlaatuisuutta, mutta niitä kaikkia yhdistää Katien pettämätön yksityiskohtien taju, sitoutuminen asiakaspalveluun ja ennen kaikkea hyvän ruoan nautinto.

5. Määritä tekstille seuraavat muotoiluasetukset Teksti-paneelissa:
   • Kirjasin: Droid Serif (tai mikä tahansa pääteviivallinen kirjasin)
   • Kirjasinkoko: 14
   • Kirjasinväri: #222222
   • Kirjasimen tasaus: Vasen
   • Rivivälistys: 120 %

Kun olet lisännyt kartan kuvauksen, visit-sivu on valmis.

6. Katso, miltä sivu näyttää selaimessa, valitsemalla Tiedosto > Esikatsele sivu selaimessa.

Huomaa, että upotettu HTML-muotoinen Google-kartta on vuorovaikutteinen. Voit vierittää karttaa ikkunassaan nuolipainikkeilla, ja voit myös lähentää ja loitontaa näkymää napsauttamalla painikkeita + ja -.

Sivuston kaikki sivut ovat nyt valmiita. Tämän opastusohjelman loppuosassa opit lisäämään viimeisen silauksen ja julkaisemaan sivuston ilmaisella kokeiluversiolla.

 HTML-koodin upottaminen Adobe Muse -sivuille

Voit upottaa sivustosi sivuihin HTML-koodia ja lisätä näin monimutkaisia ominaisuuksia, jotka tulevat näkyviin dynaamisesti ulkopuolisesta verkkopalvelimesta. Näitä koodipätkiä voidaan kopioida eri verkkopalveluiden toimittajilta, kuten Googlelta, Yahoo!:lta tai YouTubesta, ja liittää sitten Muse-sivuihin. Tässä osiossa tutustut kahteen eri esimerkkiin upotetusta HTML-koodista ja näet, miten voit helposti lisätä yhteisöpalvelujen sisältöä sekä vuorovaikutteisen Google-kartan Musella tehtyyn verkkosivustoon.

Aloitamme viimeistelemällä aloitussivun sisällön. Jos olet noudattanut opastusta koko ajan, aloitussivu on ehkä jo näkyvissä Muoto-näkymässä. Jos näin ei ole, avaa aloitussivu muokattavaksi Muoto-näkymässä kaksoisnapsauttamalla sitä Suunnittele-näkymässä. Upotettu HTML-koodi lisätään aloitussivulle aiemmin lisätyn diaesityksen yläpuolelle.

Viimeisimmät Twitter-viestit näyttävän upotetun HTML-syötteen lisääminen

Voit avata ilmaisen tilin eri verkkopalveluihin, kuten Twitteriin, ja lähettää niihin viestejä, jotka näkyvät kyseisten palveluiden verkkosivuilla. Sen lisäksi, että tiedot näkyvät Twitter.com-sivustossa, voit kuitenkin myös kirjautua sisään tiliisi ja kopioida upotuskoodin, jolla samat viestit näytetään luomassasi verkkosivustossa.

Tässä esimerkissä Kevin's Koffee Kart on luonut kuvitteellisen tilin. Tähän liittyy kirjautuminen Twitteriin uutena käyttäjänä sekä rekisteröintilomakkeen täyttäminen. Tämän jälkeen sivun käyttöliittymän kautta voi lähettää viestejä sekä kopioida upotuskoodin, jolla se voidaan näyttää muualla verkossa. Tämä on sama menetelmä, jolla voidaan jakaa blogikirjoituksia, videosisältöä, RSS-syötteitä, osakekurssien tietoja, sääennusteita, pelituloksia ja muita dynaamisia tietoja. Jos rakennat sivustoa asiakkaalle, kysy heiltä, jakavatko he jo tietoa omille asiakkailleen tällaisen palvelun kautta. Monissa tapauksissa voit kirjautua sisään heidän tilitiedoillaan ja hakea sitten upotuskoodin tiedolle, jonka haluat näyttää.

Jotta sinun ei tarvitse kirjautua Twitteriin ja luoda omaa tiliä, Kevin's Koffee Kartin Twitter-tililtä kopioitu upotuskoodi on tässä:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Valinnainen paikkamerkkiteksti</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

Kotisivu on miltei valmis. Siihen pitää lisätä enää yksi elementti.

Kun olet tarkistanut aloitussivun asettelun, palaa Suunnittele-näkymään napsauttamalla Suunnittele-linkkiä.

Seuraavaksi lisätään erityyppinen upotettu HTML-koodi KART MAP -sivulle.

Google-kartan lisääminen Muse-sivulle upotetun HTML-koodin avulla

Video-opas

Tässä osassa lisäät sisältöä KART MAP -sivulle lisäämällä upotettua HTML-koodia, joka lataa Google Maps -palvelun luoman kartan. Tämä on vain yksi pieni esimerkki sivustoon upotetun HTML-koodin tarjoamista mahdollisuuksista. Voit sisällyttää sisältöä monista muista kolmannen osapuolen sivustoista, kuten YouTubesta, Flickristä tai Picasasta. Voit myös lisätä lomakkeita, blogeja ja muita monimutkaisia sivuston ominaisuuksia, joita voit hallita käyttämällä tiliäsi ja julkaisemalla sisältöä vastaavissa sivustoissa.

Muita sivuja näyttävien iframe-kehysten lisääminen sivustoon upotetun HTML-koodin avulla

Sen lisäksi, että voit käyttää upotettua HTML-koodia, jonka olet liittänyt kolmannen osapuolen verkkosivustosta, voit myös upottaa kokonaisen sivun iframe-kehykseen samalla menetelmällä. Voit esimerkiksi kirjoittaa seuraavanlaisen koodinpätkän:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

Korvaa edellä olevassa koodissa title=""- ja url=""-kohdissa olevat tekstit haluamasi ulkoisen verkkosivun otsikolla ja URL-osoitteella. Voit myös määrittää iframe-ikkunan leveydelle ja korkeudelle haluamasi mukautetut arvot, jotta se sopii sivuston tyyliin.

Lisäksi voit antaa määritteen, jolla varmistetaan, että iframe ei näytä vierityspalkkia. Lisää tämä avaavaan iframe-nimiöön:

scrolling="no"

Valitsemalla Objekti > Lisää HTML voit avata uuden HTML-koodi-ikkunan ja upottaa iframe-kehyksen sivustoon ja määrittää sitten URL-osoitteen (sivuston osoitteen, kuten www.google.com), jotta kehyksen sisällä näytetään Internetissä käytössä oleva sivusto.

Voit käyttää iframe-kehystä myös animaatioiden upottamiseen ja käyttää esimerkiksi Adobe Edgellä luotuja HTML5-animaatioita. Etsi Adobe Edgen luoman HTML-tiedoston nimi ja käytä tiedoston nimeä iframe-kehyksen URL-määritteessä:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Seuraavaksi lataat Adobe Edgen HTML-tiedoston (ja liittyvät tiedostot) samaan palvelimeen Muse-sivustotiedostojen kanssa. Jos viet sivuston FTP:llä, voit kopioida HTML-tiedoston kansioon, jonka Muse loi vientiprosessin aikana. Jos julkaiset suoraan Adobe Business Catalyst® -ylläpitopalvelimiin napsauttamalla Musen Julkaise-linkkiä, voit ladata tiedostot Adobe Dreamweaver® -ohjelmistolla tai millä tahansa FTP-ohjelmalla. Lisätietoja tiedostojen lataamisesta Business Catalyst -ylläpitopalvelimiin FTP:n kautta on kohdassa Sivustojen julkaiseminen.

Yhteydenottolomakkeen elementtien muotoileminen

Käyttämällä vakio-CSS-sääntöjä voit muotoilla Business Catalyst -hallintakonsolin käyttöliittymässä luomasi yhteydenottolomakkeen elementtejä. Voit säätää lomakkeen ja lomakkeen elementtien näyttötapaa vastaamaan sivusi muotoilua.

Kun lomakkeen lähdekoodi on liitetty hallintakonsolista Musessa olevaan sivuun, lomake näkyy oletustyyleillä.

Muiden elementtien tapaan voit muuttaa lomakkeen mittoja sivussa olevista kahvoista ja siirtää sitä haluttuun sijaintiin sivulla.

Napsauta lomaketta hiiren kakkospainikkeella (tai napsauta sitä Ctrl-näppäin painettuna) ja valitse avautuvasta luettelosta HTML.

Näyttöön tulee HTML-koodi-ikkuna. Se näyttää koodin, jonka liitit sivulle hallintakonsolista. Siirrä kohdistin koodin yläosaan sen ensimmäisen rivin yläpuolelle ja paina Enter (Windows) tai Return (Mac) -näppäintä muutaman kerran, jolloin lomakkeen koodi siirtyy alemmas ja saat tilaa tyylien lisäämiselle.

Tähän lomakekoodin yläpuoliselle alueelle voit joko liittää tai kirjoittaa CSS-säännöt, jotka vaikuttavat lomakkeen elementtien ulkonäköön.

Kopioimalla alla olevan koodin näet, miten tämä toimii:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Liitä koodi HTML-ikkunan yläosaan lomakkeen yläpuolelle.

Sulje HTML-ikkuna valitsemalla OK. Huomaa, että lomakkeen ulkonäkö on päivittynyt uuden muotoilun mukaiseksi. Voit nähdä, miltä lomake näyttää julkaistussa sivustossa, kun napsautat Esikatselu-painiketta tai valitset Tiedosto > Esikatsele sivu selaimessa.

Saman strategian avulla voit hallinnoida monia Business Catalystista kopioidun yhteydenottolomakkeen sisältämiä elementtejä.

Tarkastele hetki ikkunan yläosaan liittämääsi koodia. Huomaa CSS-sääntöjen ylä- ja alapuolella olevat style-tunnisteet. Ne ovat hyvin tärkeitä, sillä CSS-säännöt eivät toimi ilman aloittavaa ja päättävää style-tunnistetta. Alla näkyvät kaksi style-tunnistetta erillään:

<style type="text/css">

</style>

Aloittava ja päättävä style-tunniste kertovat selaimelle, että niiden välissä oleva koodi sisältää CSS-muotoilusääntöjä. Varmista aina, että nämä tunnisteet ovat ikkunan yläosassa, ennen kuin liität CSS-säännöt niiden sisään.

Kun haluat päivittää lomakkeen elementtien ulkonäköä, kutsut vain niiden luokkaa (class, eri elementeille lomakkeessa annettu nimi), määrität muutettavaksi haluamasi ominaisuuden ja asetat sen määreet.

Katso alla olevaa koodiriviä:

input.textarea {

background-color: #fff;

}

Sana input.textarea on nimi, joka on annettu tietyntyyppiselle tekstikentälle (sen luokka). Seuraavalla rivillä ilmoitetaan ominaisuus, jota haluat muuttaa. Tässä tapauksessa background-color viittaa tekstikentän taustaväriin. Kaksoispisteen jälkeen seuraava #fff on CSS-koodissa käytetty lyhenne merkinnälle #ffffff (joka puolestaan on valkoisen värin heksadesimaaliarvo).

Suomeksi yllä lukee siis: aseta tämäntyyppisen tekstikentän taustaväri valkoiseksi.

Lomakkeen päivityksen yhteydessä voit määrittää tekstikentän taustaväriksi myös yleisesti verkossa käytetyn punaisen. Alla oleva koodi asettaa tämäntyyppisen tekstikentän taustavärin punaiseksi:

input.textarea {

background-color: red;

}

CSS-säännöt kirjoitetaan niiden omalla kielellä. Kuten minkä tahansa kielen kanssa, sen sujuva oppiminen vaatii harjoittelua. Saat lisätietoa sääntöjen rakenteesta lukemalla W3Schoolsin ilmaiseksi tarjoamat, erinomaiset opastukset ja CSS-hakuoppaat.

Kun olet valmis aloittamaan omien yhteydenottolomakkeidesi muokkaamisen, voit tunnistaa luokkien nimet ja niiden säädettävissä olevat ominaisuudet alla olevan luettelon perusteella.

<style type="text/css">

</style>

Yhteydenottolomakkeen yläosassa olevien oletuselementtien poistaminen

Kun liität lomakkeen sivulle, se alkaa oletusarvoisesti seuraavilla kahdella elementillä.

Jos haluat poistaa toisen tai molemmat näistä elementeistä, avaa HTML-ikkuna ja katso liittämääsi lähdekoodia (suoraan mahdollisesti lisäämiesi CSS-tyylitunnisteiden alapuolella).

Voit poistaa rivin *Required etsimällä ja poistamalla seuraavan koodirivin:

<span class="req">*</span> Required

Voit poistaa tunnisteen Title ja siihen liittyvän valikon etsimällä ja poistamalla seuraavat koodirivit:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Luettelo luokista ja ominaisuuksista, joita voi lisätä CSS-sääntöihin yhteydenottolomakkeiden muokkaamista varten

Kun määrität väriarvoja, saat käyttöösi huomattavasti laajemman valikoiman käyttämällä verkkotyökalua, kuten kuleria, tai kuvanmuokkausohjelmistoa (kuten Photoshopia tai Fireworksia) heksadesimaalisten väriarvojen määrittämiseen. Heksadesimaaliset väriarvot alkavat aina #-merkillä, jota seuraa 3–6 kirjaimen tai numeron (0–9 ja A–F) yhdistelmä.

Voit myös käyttää Musen pipettityökalua ja valita värit nykyisestä sivustosta. Voit kopioida heksadesimaaliset väriarvot Värinvalitsimen kentästä ja liittää ne koodiin. Seuraavat 16 väriä voidaan määrittää nimen perusteella. Niistä voi olla hyötyä, jos haluat kokeilla tietyn säännön toimintaa:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White ja Yellow (vedensininen, musta, sininen, fuksia, harmaa, vihreä, lime, kastanja, laivastonsininen, oliivi, violetti, punainen, hopea, turkoosi, valkoinen ja keltainen)

Kun määrität värin nimen perusteella, älä lisää #-merkkiä nimen alkuun.

Seuraava luettelo ei ole kattava, vaan voit muuttaa elementtien ulkonäköä käyttämällä monia eri yhdistelmiä (sekä monia eri ominaisuuksia). Näiden ehdotusten avulla pääset alkuun. Valitse koodinpätkä kaksoisnapsauttamalla ja kopioi se leikepöydälle.

Saat lisää vinkkejä Musen käyttämiseen tutustumalla Musen Ohje ja opastusohjelmat -sivuun tai Musen Tapahtumat-sivuun, jolla on käynnissä olevia tai tallennettuja verkkoseminaareja.