1 Dreamweaver MMX. 2 Tekstin muokkaus

Transkriptio

1 1 Dreamweaver MMX Dreamweaverissa on samantyylisiä paletteja kuin Photoshopissa. Niitä voi olla auki useampia, mutta alkuun tarvitaan vain Properties palettia joten sulje ensin kaikki paletit ja napauta sitten "Windows"/"Properties". Properties ikkunan saa näkymään kokonaan napsauttamalla kolmiota sen oikeassa alakulmassa. Paletin sisältö vaihtelee sen mukaan mitä on valittuna. Alla kuva Properties paletista. 2 Tekstin muokkaus Paletin oikeassa yläkulmassa olevia tekstin muotoilu painikkeet toimivat samoin kun tekstinkäsittelyohjelmissa. Ylärivissä: Bold, Italic ja tasaukset vasemmalle (oletus), keskelle ja oikealle. Alarivissä: Luettelomerkki, luettelonumero, sisennyksen poisto ja sisennys. Ensimmäisestä pudotusvalikosta voi valita onko teksti jonkin tason otsikkoa vai pelkkää tekstiä. Toisesta pudotusvalikosta voi valita tekstille fontin. Ota huomioon että kaikissa tietokoneissa ei ole kaikkia samoja fontteja jolloin se korvataan oletusfontilla. Eksoottisten fonttien käyttö siis todennäköisesti rumentaa sivua, kun sitä katsotaan jollain toisella tietokoneella Päivi Vartiainen 1

2 Kolmannesta pudotusvalikosta saa muutettua fontin kokoa. Aivan samalla tavoin kuin missä tahansa tekstinkäsittelyohjelmassa. Neljännestä pudotusvalikosta valitaan tekstille väri. Kun napsautetaan tekstin väri-painikkeen oikeassa alakulmassa olevaa nuolta, saadaan esiin väripaletti, josta tekstin värin voi valita 3 Linkit Linkki voi johtaa saman sivun toiseen kohtaan, toiselle sivulle, tiedostoon tai minne tahansa ulkoiseen tiedostoon internetissä. Linkit tehdään kirjoittamalla osoite kohtaan Link tai klikkaamalla kansion kuvaketta ja valitsemalla tiedosto selaamalla samalla tavalla kuin tiedostoja avataan. Sivun johon olet tekemässä linkkiä täytyy olla tallennettuna ennen kuin voit tehdä linkin. Tämä johtuu siitä, että sivu haluaa tietää tiedoston sijainnin suhteessa omaan sijaintiinsa. Jos siirrät tiedostoa, johon linkki osoittaa tai tiedostoa jossa linkki on, niin linkki ei toimi enää. Tämä pätee myös sivulla näkyviin kuviin. Linkin tekeminen kirjoittamalla on usein kätevämpää kuin ainainen valikkojen selaaminen: Päivi Vartiainen 2

3 Toiselle sivulle tai tiedostoon osoittava linkki (linkkinä toimivan tekstin/kuvan pitää olla valittuna): o Jos sivu/tiedosto on samassa kansiossa, kuin sivu jolle linkkiä tehdään: tiedostonnimi o Jos sivu/tiedosto on alikansiossa joka on samassa kansiossa, kuin sivu jolle linkkiä tehdään: Alikansionnimi/tiedostonnimi Normaalin linkin klikkaaminen avaa (useamman näytön pituisen) sivun selaimessa sivun alusta. Linkin voi kuitenkin tehdä myös niin, että selain avaa sen tietystä kohdasta. Avauskohdat merkitään ankkureilla. 1. Valitse teksti johon osoitetaan, napsauta Insert /Named Anchor ja kirjoita ankkurille nimi. 2. Valitse linkkinä toimivan teksti/kuva ja kirjoita Link kohtaan: sivunnimi#ankkurinnimi Linkki voi myös osoittaa tiedostoon, jonka selain sitten joko kopioi tietokoneelle tai näyttää ruudulla tiedostosta ja selaimen asetuksista riippuen. 4 Hyperlinkin lisääminen Sijoita tekstikohdistin dokumentissa siihen kohtaan mihin haluat lisätä hyperlinkin. Napsauta objektipalkissa olevaa Hyperlinkki painiketta tai valitese Insert valikosta Hyperlink. Ruudulle aukeaa Hyperlink ikkuna. Lisää Text kohtaan teksti, jonka haluat näkyvän hyperlinkkinä sivulla. Link kohtaan kirjoita hyperlinkin osoite. Jos käytät frame sivua, Target kohdassa on pudotusvalikko, missä kaikki nimeämäsi framet ovat näkyvissä. Jos määrität framen, jota ei ole, linkitetty sivu avautuu uuteen ikkunaan, jolla on nimi jonka kirjoitit Päivi Vartiainen 3

4 1. Tab Index kentässä, numeroi tab järjestys 2. Title kentässä, kirjoita hyperlinkin otsikko 3. Access Key kenttä, yhden merkin mittainen näppäimistöoikotie hyperlinkin valitsemiseksi 5 Kuvan lisääminen Aivan ensimmäiseksi tallenna sivu, ellet jo ole sitä tallentanut. Jos et ole tallentanut sivua ennen kuin lisäät kuvan saat ilmoituksen kuvaa lisättäessä: 1. Siirrä tekstikohdistin siihen kohtaan johon haluat lisätä kuvan 2. Valitse Insert valikosta Image Päivi Vartiainen 4

5 3. Ruudulle aukeaa Select Image ikkuna, josta voit valita lisättävän kuvan 4. Kuva sijoitetaan sivulle siihen kohtaan missä kursori oli ja propeties (ominaisuuset) paletti muuttuu vastaavasti osoittamaan kuvan ominaisuuksia. W ja H näyttävät kuvan mitat pikseleinä. Src näyttää polun josta kuva tulee sivulle. Ei kannata muutella jos et tiedä mitä teet. Link Voit tehdä kuvasta linkin kirjoittamalla osoitteen tai klikkaamalla kansion kuvaa "Align" Kuvan tasaus. Kuvan voi esimerkiksi olla tasattuna oikealle niin että teksti juoksee normaalisti sen vasemmalla puolella. "Alt" Tähän voi kirjoittaa tekstin, joka näkyy kuvan tilalla sillä aikaa kun selain lataa sitä Päivi Vartiainen 5

6 6 Taustavärin tai taustakuvan lisääminen 1. Napsauta Modify/Page Properties 2. Title -kohtaan kirjoitettu teksti näkyy selaimen otsikkopalkissa 3. Background Image voit lisätä taustakuvan joka näkyy sivulla olevan tekstin takana. Jos kuva on pienempi kuin sivu, niin sitä toistetaan vieri viereen, niin monta kertaa kuin tarpeellista. 4. Background sivun taustaväri, voit valita värin pudotusvalikosta napsauttamalla Päivi Vartiainen 6

7 7 Taulukon lisääminen Valitse Insert valikosta Table. Ruudulle aukeaa Insert Table ikkuna, jossa voit määrittää taulukon rivien ja sarakkeiden määrän. Cell Padding (Solujen täyttö ) kohdassa määritetään. tarkoittaa solun sisällön ja sisäreunan välistä etäisyyttä pikseleinä Cell Spacing (Solujen välistys) määrittää solujen väliin tulevan tyhjän tilan Width kohdassa määritetään taulukon kokonaisleveys, valittavana on pikselit tai prosentteina ruudun leveydestä. Border kohdassa voidaan määrittää taulukon reunat, pikseleinä Kun valitaan 2 riviä ja kaksi saraketta, tuloksena on ylläolevan näköinen taulukko. Properties paletti muuttuu vastaamaan taulukon ominaisuuksia. Table id kohdassa taulukolle voidaan antaa nimi, mikäli käytetään jotain scriptiä, tällöin taulukko on nimettävä Päivi Vartiainen 7

8 Properties paletin alalaidassa on 6 painiketta, joista sarakkeiden ja rivien arvot voidaan tyhjentää, muuttaa leveys tai korkeus pikseleiksi tai vastaavasti levyes tai korkeus prosenteiksi ruudun leveydestä Samat toiminnot kuin edellä voidaan tehdä myös palkin ylälaidassa olevista pudotusvalikoista kohdissa W ja H. Taulukkoon voi myös lisätä rivejä ja sarakkeita muuttamalla kohtien Rows ja Cols arvot CellPad ja CellSpace kohdassa määritetään taulukon solujen täyttö ja solujen välistys (Cell Spacing, Cell Padding) Align, (Tasaus) kohdassa voidaan määrittää miten tiedot tasataan soluun. Oletuksena on Default, eli keskitys vaakasuunnassa. Valittavana on myös Left, Center ja Right. Taulukon reunat voi määrittää Border kohdassa. Palkin oikeassa reunassa on kysymysmerkki, jota napsauttamalla avautuu Help ikkuna. Alapuolella on Quick Tag Editorin painike. Quick Tag Editor painikkeesta päästään suoraan muokkaamaan HTML koodia, joka avautuu pieneen ikkunaan Properties paletin viereen Päivi Vartiainen 8

9 Bg Color kohdassa voidaan määrittää taulukon taustavär. Brdr Color määrittää taulukon reunojen värin. Värit voi valita joko poimimalla pudotusvalikosta, tai kirjoittamalla värin hexadesimaalikoodi värin nimeä varten varattuun ruuutuu. Bg Image, voidaan laittaa taulukolle tausta kuva. Vieressä olevista painikkeista voidaan selata kuva käyttöön, ensimmäinen painike on Point to File, kun hiiren painiketta pidetään sen päälla alaspainettuna, ruutuu ilmestyy ohjeteksti drag to a file to choose it. Kansiopainikkeesta saadaan avattua Select Image Souce ikkuna, jossa voidaan selata haluttu kuva näkyviin. Taulukon muokkaaminen Taulukkoa voi siirtää kun hiiriosoitin muuttuu taulukon reunalla nelinuoleksi. Koko taulukon saa valittua kun nausattaa taulukon vasenta yläkulmaa. Osoitukseksi siitä että taulukko on valittuna siihen tulee näkyviin koonmuttokahvat taulukon oikeaan alakulmaan. Kun halutaan valita kokonainen sarake, viedään hiiri kyseisen sarakkeen päälle siten, että hiiriosoitin muuttuu pieneksi paksuksi mustaksi nuoleksi, ja napsautetaan Päivi Vartiainen 9

10 Kun halutaan valita kokonainen rivi, toimitaan samoin, viedään hiiri rivin eteen siten että osoitin muuttuu nuoleksi ja napsautetaan. Yksittäisiä soluja voidaan valita maalaamalla ne. Eli napsauttamalla hiirellä yhdessä solussa, ja sen jälkeen vetämällä haluttujen solujen yli hiiren painike pohjassa. Kun taulukon joku solu napsautetaan aktiiviseksi, Properties paletti muuttu allaolevan näköiseksi Solut voidaan yhdistää kun ensin valitaan yhdistettävät solut. Tämän jälkeen Properties paletista voidaan napsautta Solujen yhdistämispainiketta joka yhdistää valitut solut Solut voidaan vastaavasti jakaa, valitsemalla ne ensin, ja napsauttamalla sen jälkeen Split cells -painiketta Yksittäisen solun taustaväriä voidaan muuttaa kun napsautetaan solu aktiiviseksi ja valitaan väri Properties paletista. Samoin voidaan vaihtaa yksittäisen solun reunaviivan väri. Solujen kokoa; leveyttä ja korkeutta voidaan muuttaa myös hiirellä vetämällä. Kun hiiriosoitin muuttuu vieressä olevass kuvassa olevan näköiseksi solun kokoa voi muuttaa Päivi Vartiainen 10

11 Taulkoita voi myös tehdä Layout näkymässä. Napsautetaan Layout view painiketta objektien lisäämispalkissa. Ruudulle aukeaa Getting started in Layout View ikkuna Päivi Vartiainen 11