Expression web 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 Expression webin käyttöön. Teemme helpot perussivut, jotka kuka tahansa voi ottaa omaan käyttöön tyyliä ja kuvia muuttamalla.
 

Sivupohjan valmistaminen Ensiksi rakennamme uuden sivuston. Sivuston etuna on kansiorakenteen näkyminen omassa ikkunassaan, jonka avulla sivuja ja kuvia on helpompi hallita. Klikkaa New Site nappia.

Valitse kansio jonka haluat luoda Express web-sivustoksi Browse-napista (1). Luo sivusto lopuksi klikkaamalla OK-nappia (2).

Avaa sivuston automaattisesti luotu www-sivu default.html tuplaklikkaamalla kansioikkunasta tiedostoa. Sivu aukeaa sivunäkymään jossa sitä voidaan muokata. Jos sivu näkyy koodina, voit vaihtaa näkymän graafiseen alaosan Design-taskusta.

Www-sivut perustuu rakenteeltaan taulukoihin ja soluihin. Siksi laadimme ensiksi pohjalle neljärivisen solurakenteen. Ylimpään ja alimpaan tulee bannerikuvat rajaamaan sivua. Keskimmäiset tulevat sisältösoluiksi. Klikkaa Taulukko-nappia (1) ja valitse neljä solua alaspäin (2).

Seuraavaksi säädetään taulukon kokoa ja väriä. Klikkaa taulukon sisällä (1) oikealla hiirinäppäimellä ja valitse pudotusvalikosta Taulukon ominaisuudet - Table Properties (2).

Taulukon ominaisuudet voidaan säätää tämän ikkunan avulla. Valitse ensiksi taulukon sijainti keskelle näyttöä kohdasta Alignment ja valinta Center (1). Säädä taulukon leveydeksi 900 pikseliä (3). Tarkista että lukeman arvo on pikseli (2). Säädä solujen välit 0-arvoksi (4), eli solujen välit poistetaan. Muuta taulukon taustaväri valkoiseksi (5) jos käytämme sivun pohjana jotain muuta väriä. Hyväksy muutokset klikkaamalla OK-nappia (5).

Vaihdamme sivun taustan värin ja annamme sivulle myös otsikon menemällä sivun ominaisuuksiin. Klikkaa missä tahansa sivulla oikealla hiirinäppäimellä ja valitsemalla sivun ominaisuudet Page Properties valikosta.

Saavut automaattisesti taskuun Yleiset - General (1) josta voit antaa sivulle Otsikon - Title (2). Välilehdestä Formatting (3) voit määrittää sivulle taustavärin kohdasta Background (4). Hyväksy tekemäsi muutokset klikkaamalla OK-nappia (5).

Valmista kuvankäsittely-ohjelmalla yläosan bannerikuva 900x150px kokoiseksi ja talleta se samaan kansioon html-sivun kanssa. Valmista myös alaosan rajauskuva ja talleta myös se samaan kansioon. Voit joutua päivittämään kansionäkymää F5-näppäimellä jotta saat kuvat näkyviin. Vedä yläosan kuva ylimpään soluun ja alaosan kuva alimpaan soluun (1). Kuvaa siirtäessä hyväksyt kuvan lisäosien ominaisuusikkunan (2).

Seuraavaksi lisäämme tekstejä sisältösoluun, joka on alemman bannerikuvan yläpuolella. Jätämme yhden solun tyhjäksi yläosan kuvan ja tekstin väliin, jotta saamme sisällön irti yläkuvasta. Klikkaa alempaa tyhjää solua (1).

Klikkaa taulukkovalikkoa ja luo neljä solua vierekkäin (2). Kun käytössä on ylimääräisiä soluja, voimme säätää sisältöjen sijoitusta sivulla.

Kirjoita sivun sisältö keskimmäisiin soluihin. Voit säätää solujen sijaintia ja tekstin reunoja tarttumalla solujen välistä hiiren osoittimella ja liikuttamalla sitä (1). Tekstin tyyliä voidaan muokata maalaamalla teksti (2) ja tekemällä tarvittavat muutokset yläpalkin säätönapeista (3). Tämä tekniikka on tuttua tekstinkäsittelyohjelmista.

Teksti säätyy aluksi solun vasempaan reunaan keskelle. Voit myyttaa sisällön sijaintia klikkaamalla solussa hiiren oikeanpuoleisella napilla (1) ja valitsemalla valikosta solun ominaisuudet Cell properties (2). Voit säätää solun sisällön sijaintia Horisontal- ja Vertical aligment kohdasta (3). Hyväksy lopuksi muutokset OK-napilla (4).

Talleta sivuun tekemäsi muutokset painamalla näppäimistössä kirjaimia Ctrl+s näppäimiä tai klikkaamalla Save-nappia. Voit katsoa sivuasi selaimesta klikkaamalla F12 näppäintä.