Dreamweaver kotisivut

Kotisivut voi tehdä html-kieltä kirjottaen suoraan muistiolla, mutta se olisi erittäin hidasta ja graafisesti vaikeaa rakentaa. Jotta sivujen tuottaminen olisi helpompaa, on avuksi kehitetty www-sivu editorit. Kyseiset ohjelmat laativat html-, ja css-koodia graafisen käyttöliittymän avulla. Sivun voi suunnitella ja rakentaa miltei samalla tavalla kuin tekstinkäsittelyohjelmalla ja editori kirjoittaa koodin automaattisesti. Tässä kurssissa tutstumme Adobe Dreamweaver käyttöön. Teemme helpot perussivut, jotka kuka tahansa voi ottaa omaan käyttöön tyyliä ja kuvia muuttamalla.
 

Sivupohjan valmistaminen Ensiksi rakennamme uuden sivun. Klikkaa File yläpalkkivalikkoa ja valikosta New... nappia. Tästä aukeaa uuden sivun asetusikkuna.

Valitse New Dokument luodaksesi uuden puhtaan aloitussivun (1). Valitse koodikieleksi html (2). Hyväksy valinnat klikkaamalla Create- nappia(3).

Luodaan uudelle sivulle taulukkopohja. Jotta sivujen elementit ovat järjestyksessä, pitää ne rakentaa aina taulukkoihin. Varmista, että näyttötyyli on Design (1). Klikkaa Insert-valikosta taulukko, eli Table-kuvaketta(2). Tässä esimerkissä luomme ensiksi kolme solua , mutta yhden solun leveän taulukon pohjaksi. Määritä myös sivun sisällön leveydeksi 900 pixeliä (3). Tämä on hyvä leveys, jos sivua halutaan tulostaa. Hyväksy sivun taulukon luonti OK-napilla (4). Www-sivut perustuu rakenteeltaan taulukoihin ja soluihin. Siksi laadimme ensiksi pohjalle kolmerivisen solurakenteen. Ylimpään ja alimpaan tulee bannerikuvat rajaamaan sivua. Keskimmäiseen liitetään itse sisältö.

Valitse taulukko aktiiviseksi klikkaamalla reunasta ja painamalla Ctrl + F3. Voit joutua klikkaamaan useamman kerran ennenkuin osut siihen. Valitse Align-kohdasta Center. Näin saat sivun pysymään keskellä riippumatta näytön resoluutiosta tai tuumakoosta.

Seuraavaksi liitetään kuva sivun yläpalkkiin. Valmista kuvankäsittelyohjelmalla sivun levyinen bannerikuva ja talleta se omaan kansioon. Meidän esimerkissä se on 900 pikseliä leveä. Korkeuden voit säätää haluamaasi arvoon. Klikkaa hiiren osoitin ylimmän solun sisään, eli soluun johon haluat yläbannerikuvan. Klikkaaa Insert-valikosta Image kuvaketta. Valitse tekemäsi kuva valintaikkunasta ja hyväksy se.

Seuraavaksi vaihdamme solun väriä. Valitse aktiiviseksi solu, jota haluat muokata klikkaamalla sen sisälle (1). Aikaisempaan ominaisuus-ikkunaan tulee nyt solun arvot. Valitse Bg, eli taustavärivalitsin (2). Valitse pystyvärivalikosta ensin pääväri ja klikkaa sävyvalikosta haluamasi väri (3). Solun taustaväri pitäisi nyt vaihtua. Anna myös keskimmäiselle solulle taustaväriksi valkoinen, koska muuten siitä tulee taustavärin muutoksien yhteydessä saman värinen.

Vaihdamme sivun taustan värin ja annamme sivulle myös otsikon menemällä sivun ominaisuuksiin. Klikkaa ominaisuusikkunassa olevaa Page Properties nappia (1). Appearance-valikossa on taustavärin valitsin. Klikkaa väriruutua (2)ja valitse haluamasi taustaväri esiin ponnahtavasta liukuvärivalikosta.

Vaihdamme myös sivun otsikon. Tämä on otsikko, joka näkyy hakukoneiden tuloksissa, joten anna sivulle kuvaava otsikko. Klikkaa sivun ominaisuusikkunasta seuraaavaksi Title/Encoding valikko (1). Kirjoita otsikkosi kohtaan Title (2). Hyväksy lopuksi sekä taustavärin, että otsikon muutokset klikkaamalla OK-nappia (3).

Seuraavaksi valmistelemme keskimmäisen sisältösolun asetuksia, jotta sinnelisäämämme sisältö menee oikeaan paikkaan. Voit suurentaa solua tarttumalla solujen välistä ja vetämällä solua suuremmaksi (1). Näin on helpompi hahmottaa solun säätöä myöhemmin. Klikkaa osoitin soluun ja saat solun ominaisuudet auki. Laita sisältö sijoittumaan solun vasempaan yläreunaan valitsemalla Horz Leftiksi ja Vert Topiksi (2). Jos tausta ei ole valkoinen, vaan sivun taustan värinen, muuta se valkoiseksi kohdasta Bg.

Varmista, että osoitin vilkkuu edelleen solun sisällä. Valitse Insert-valikosta Table. Siitä aukeaa uuden taulukon luonti-ikkuna. Valitse ikkunasta riveiksi 2 ja sarakkeiksi 4 (1). Näin voimme sijoitella ja säätää eri sisällöt haluamaamme kohtaan sivulla. Valitse taulukon kooksi 100%, jotta se täyttää koko solun leveydeltään. Hyväksy uusi taulukko klikkamalla OK-nappia.

Säädä solujen sijainti kuvan tapaan tarttumalla soluviivoista ja vetämällä, jotta saamme väliä yläkuvan ja sisällön väliin. Samalla saamme säädettyä linkkivalikon ja leipätekstin sijoitusta. Säädä solujen sisältösijoitus taas solun ominaisuuksista. Laita sisältö sijoittumaan solun vasempaan yläreunaan valitsemalla Horz Leftiksi ja Vert Topiksi kuten aiemmin.

Kirjoita sivun sisältö keskimmäisiin soluihin. Voit hienosäätää solujen sijaintia ja tekstin reunoja tarttumalla solujen välistä hiiren osoittimella ja liikuttamalla sitä. Tekstin tyyliä voidaan muokata klikkaamalla hiiren oikealla näppäimellä tekstiä ja valitsemalla Css Styles -> New... (1). Saat auki New CSS Rule-ikkunan. Anna tekstimääritelmälle jokin nimi (2). Hyväksy määritelmä OK-napilla (3). Nyt aukeaa uusi ikkuna CSS Rule definition for... Voit valita tekstille muodot säätönapeista mm. fonttityylit, koot ja värin (4). Hyväksy määritelmät lopuksi OK-napilla (5).

Voit määritellä valitsemasi tekstityylin tekstiin. Klikkaa tekstiryhmän sisälle osoitin. Ota esiin tekstin ominaisuusikkuna yhdistelmällä Ctrl+F3 ja valitsemalla CSS taskun (1). Ominaisuusikkunasta voi valita haluamasi fonttityylin valikosta Targeted Rule (2). Lopuksi voit hienosäätää fonttia ominaisuusikkunan säätöosasta (3). Fonttien määrittelyn jälkeen voit halutessasi liittää sivulle kuvia tekstin oheen. Liitä kuva haluamaasi kohtaan valitsemalla Image-valinta (1). Kun olet liittänyt kuvan tekstin oheen, voit määritellä sen sijainnin suhteessa tekstiin. Klikkaa kuva aktiiviseksi ja hiiren oikealla näppäimellä saat kuvaan liittyvän ominaisuusvalikon esiin. Kohdasta Align (2) voit siirtää kuvaa tekstin viereen haluamallesi puolelle.

Talleta sivu lopuksi File -> Save käskyllä tai klikkaamalla Ctrl+S yhdistelmää. Talleta sivu samaan kansioon kuin missä kuvasi sijaitsee. Muista ettet käytä tallentamisen nimessä ä/ö kirjaimia, välilyöntejä tai erikoismerkkejä. Sama koskee kuvia nimetessäsi. Tämän jälkeen voit tarkastella sivun ulkonäköä selaimella klikkamalla F12 näppäintä.