Asetteluvaihtoehtojen käyttäminen Dreamweaverin CSS-ominaisuuspaneelissa

CSS Designer Properties -paneelin yläosasta löydät CSS-ominaisuudet, joita käytetään yleisesti sivuasettelujen luomiseen. Voit määrittää näiden asetusten avulla korkeuden, leveyden, tasauksen, sijainnin ja välin. Nämä asetukset ovat ihanteellisia sivuasettelujen luomiseen luokka- ja tunnustyyleillä esimerkiksi kuvien ja sijainnin tasaamiseksi

tageja monisarakkeisten asettelujen luomiseen.

Voit käyttää CSS-ominaisuuspaneelin Asettelu-vaihtoehtoja asettaaksesi nämä arvot:

• Leveys: Määritä leveys mille tahansa elementille, jonka mitat voidaan määrittää, kuten a

  tag. Kokovaihtoehdot ovat pikseli (px), piste (pt), pica (pc), prosentti (%), em, rem, ex ja ch.

• Korkeus: Määritä korkeus mille tahansa elementille, jonka mitat voidaan määrittää.

  • Min ja Max Width: Määritä minimi- ja enimmäisleveydet

    tagit ja muut lohkoelementit. Nämä vaihtoehdot ovat hyödyllisiä, kun määrität leveyden prosentteina selainikkunasta. Voit esimerkiksi asettaa suunnittelun leveydeksi 80 prosenttia selainikkunasta ja asettaa sitten enimmäisleveydeksi 1 000 pikseliä, jotta asetteluasi ei venyisi 1 000 pikseliä leveämmäksi.

  • Min ja Max Height: Määritä vähimmäis- ja enimmäiskorkeudet

    tagit ja muut lohkoelementit.

  • Marginaali: Aseta elementin ympärillä olevan tilan määrä. Reunuksilla voidaan luoda tilaa elementin reunan ja sivun muiden elementtien, kuten kuvan ja tekstin tai kahden väliin.

    tunnisteet. Voit asettaa marginaalin erikseen ylä-, oikea-, ala- ja vasemmalle. Täyte mitataan pikseleinä, pisteinä, tuumina, senttimetreinä, millimetreinä, pica-, ems-, exs- ja prosentteina.

  • Täyte: Asettaa tilan määrän elementin rajojen sisällä. Voit esimerkiksi käyttää täytettä luodaksesi tilaa a:n reunojen väliin

    tunniste ja sen sisältö. Voit asettaa pehmusteen erikseen ylä-, oikea-, ala- ja vasemmalle. Täyte mitataan pikseleinä, pisteinä, tuumina, senttimetreinä, millimetreinä, pica-, ems-, exs- ja prosentteina.

    Täytön ja marginaalivälin asettaminen voi olla hankalaa. Kun lisäät marginaalin ja täyteyksen elementtiin, kuten kuvaan tai

    -tunnistetta, lisäät elementin kokonaiskokoa ja sen tarvitsemaa tilaa asettelussa.

• Sijainti: Sijainti-vaihtoehto, joka on käytettävissä Ominaisuudet-paneelin Asettelu-osion alaosassa, muuttaa tapaa, jolla elementit sijoitetaan sivulla. Sijoittaminen voi muuttaa dramaattisesti tapaa, jolla lohkotason elementit (kuten taulukko, luettelo, otsikko, kappale ja

  tunnisteet) näkyvät selaimessa.

  • Peri: Sinun ei tarvitse määrittää tätä oletusasetusta. Ellei muuta vaihtoehtoa ole valittu, jokainen elementti perii pääelementtinsä sijainnin.

  • Staattinen: Sijoita sisältö sen sijaintiin asiakirjan kulussa. Oletuksena kaikki HTML-elementit, jotka voidaan sijoittaa, ovat staattisia.

  • Absoluuttinen: Käytä ylä- ja vasenta koordinaattia ohjataksesi elementin sijaintia suhteessa selainikkunan vasempaan yläkulmaan tai elementin sisältävän elementin vasempaan yläkulmaan.

  • Korjattu: Sijoita elementti suhteessa selaimen vasempaan yläkulmaan. Kiinteää sijoittelua käyttävän elementin sisältö pysyy vakiona, vaikka käyttäjä vierittäisi sivua alas tai poikki.

  • Suhteellinen: Käytä sijaintia suhteessa kohtaan, johon lisäät elementin sivulle, tai suhteessa sen säilöön.

  • Float: Tasaa elementit, kuten kuvat ja

    -tunnisteet sivun tai muun säilön vasemmalla tai oikealla puolella, jolloin teksti tai muut elementit kietoutuvat sen ympärille. Napsauta Float-kentän kuvakkeita määrittääksesi seuraavat neljä vaihtoehtoa: Peri, Oikea, Vasen tai Ei mitään.

  • Tyhjennä: Estä kelluva sisältö menemästä päällekkäin alueen vasemmalla tai oikealla puolella tai elementin molemmilla puolilla. Tämä vaihtoehto on hyödyllinen, kun kelluva elementti, kuten a

    -tunniste, jota käytetään sivupalkin luomiseen, menee päällekkäin toisen lohkotason elementin kanssa, kuten tagin, jota käytetään sivun alatunnisteen luomiseen.

  • Overflow-x ja -y: Kerro selaimelle, kuinka elementin sisältö näytetään, jos säilö, kuten a

    -tunniste, ei mahdu elementin koko korkeuteen tai leveyteen. Ylivuotovaihtoehdot ovat

  • Näkyvä: Pidä sisältö, kuten kuva tai teksti, näkyvänä, vaikka se laajenee säilön määritetyn korkeuden tai leveyden yli.

  • Piilotettu: Leikkaa sisältö pois, jos se ylittää säiliön koon. Tämä vaihtoehto ei sisällä vierityspalkkeja.

  • Vieritys: Lisää säilöön vierityspalkkeja riippumatta siitä, ylittääkö sen sisältö elementin koon.

  • Automaattinen: Tuo vierityspalkit näkyviin vain, kun säilön sisältö ylittää sen rajat.

• Näyttö: Ilmoita, renderöidäänkö elementti selaimessa tai miten. Voit esimerkiksi muuttaa järjestämättömän luettelon sijainnin vaaka-asennosta pystysuoraan valitsemalla Upotettu tai piilottaa elementin ja tehdä sen näkymättömäksi valitsemalla Ei mitään. Voit käyttää Näytä-vaihtoehtoa komentosarjakielen kanssa elementtien näytön muuttamiseen dynaamisesti.

• Näkyvyys: Hallitse, näyttääkö selain elementin vai ei. Näkyvyysvaihtoehdot ovat

  • Peri: Elementillä on sen elementin näkyvyys, johon se sisältyy (oletus).

  • Näkyy: Elementti näytetään.

  • Piilotettu: Elementtiä ei näytetä.

  • Kutista: Käytetään HTML-taulukoiden kanssa. Kutistamalla voidaan poistaa sarake tai rivi vaikuttamatta muuhun taulukon asetteluun.

• Z-indeksi: Säädä elementin sijaintia Z-koordinaatissa, joka ohjaa elementtien pinoamisjärjestystä suhteessa toisiinsa. Korkeamman numeron omaavat elementit menevät päällekkäin pienempien numeroiden kanssa.

• Peittävyys: Säädä elementin peittävyystasoa välillä 0,0 (täysin läpinäkyvä) 1,0:aan (täysin läpinäkymätön). Jos esimerkiksi kirjoitat peittävyyskenttään 0,5, elementin peittävyys pienenee 50 prosenttiin.