Miten luoda pyöristetyt reunat taulukoihin Dreamweaverissa

Taulukoiden pyöristetyt reunat lisäävät yrityksen verkkosivustolle visuaalisen elementin, jonka avulla voit kiinnittää huomiota tiettyihin alueisiin. Ympäröi esimerkiksi uusi tuote tai uutiskirje, jossa on pyöristetty pöytä, ja se on ristiriidassa selainikkunan suorakulmaisen muodon kanssa juuri niin, että se erottuu. Oletuksena HTML-taulukoissa on terävät kulmat, mutta muutamat yksinkertaiset CSS-koodit Dreamweaver-ohjelmassa tasoittavat nämä reunat. CSS: n avulla voit myös ohjata taulukon ääriviivojen värejä sekä reunan leveyttä ja tyyliä.

1.

Avaa Dreamweaver-sovelluksesi ja valitse sivusto, joka sisältää sivun, johon haluat pyöristetyn pöydän näkyvän.

2.

Avaa sivu näytölle kaksoisnapsauttamalla sivuston Tiedostot-paneelin sivun kuvaketta. Jos Tiedostot-paneeli ei näy näytössä, valitse "Tiedostot" ikkunan valikosta.

3.

Napsauta muokkausikkunan yläosassa olevaa "Jaettu" -painiketta, jos haluat tarkastella sekä sivun suunnittelunäkymää että koodinäkymää samanaikaisesti jaetussa näytössä, tai valitse Näytä-valikosta "Koodi ja suunnittelu". HTML-koodin ikkuna avautuu jaetun näytön yläreunaan.

4.

Kirjoita, ilman lainausmerkkejä, avausmerkinnän alapuolelle ja koodisivun sulkumerkin yläpuolelle. Tämä tunniste sisältää CSS-koodisi.

5.

Napsauta kohdistinta tunnisteiden välillä, paina "Enter" aloittaaksesi uuden rivin ja kirjoita ".roundcorners {" (ilman lainausmerkkejä). Termi "roundcorners" on tyylisi nimi, joten tämä voi olla mikä tahansa haluamasi nimi. Tyypillisesti nimi tyyli, joka kuvaa sitä, mitä se tekee parempaan koodin luettavuuteen.

6.

Anna seuraavat koodirivit erillisillä riveillä, jotka olet juuri kirjoittanut:

tausta: #ffffff; raja: 2px kiinteä # 000000; -webkit-border-säde: 30px; -moz ylittävä-säde: 30px; -MS-border-säde: 30px; border-säde: 30px; }

7.

Selaa Dreamweaver-muotoiluikkunassa alas sivulle, jossa on pöytä, jossa on pyöristetyt kulmat. Jos haluat lisätä taulukon ensin sivulle, napsauta kohdistinta kyseisessä paikassa, napsauta sitten "Taulukko" -painiketta tai valitse "Taulukko" Lisää-valikosta. Napsauta taulukkoa kerran, kun haluat valita sen, ja taulukon HTML-koodi korostuu automaattisesti yllä olevassa koodiikkunassa.

8.

Napsauta, jos haluat sijoittaa kohdistimen

tunniste, ennen oikeaa ">" -kannaketta. Lisää välilyönti sanan TABLE ja seuraavan koodin välille painamalla välilyöntinäppäintä. Kirjoita seuraava:

class = "roundcorners"

Tämä kertoo selaimesta tarkastelemaan tyyliäsi, joka on määritelty nimellä "roundcorners", kun piirrät taulukkoa. teidän

tag näyttää seuraavasti:

9.

Valitse Tiedosto-valikosta Tallenna-komento ja valitse sen jälkeen Dreamweaver-tiedostojen paneelissa olevan tiedoston kuvake. Napsauta "Laita" -painiketta Tiedostot-paneelin yläosassa, jos haluat sijoittaa tämän päivitetyn sivun Web-palvelimellesi. Voit tarkastella pyöristettyä suorakulmioa selaimesi sivulta.

vinkkejä

  • CSS: ssä hypensillä alkavat koodilinjat ovat välttämättömiä monen selaimen yhteensopivuuden kannalta. Linja, jossa on "moz", on Firefoxille; "ms" on Internet Explorer; "webkit" on Safari ja Chrome.
  • Jos haluat muuttaa kulmien käyrää, pienennä tai lisää 30px-arvoa kaikkiin riveihin, joissa se näkyy tunnisteessa.
  • Jos haluat muuttaa taulukon taustan tai taulukon reunan väriä, vaihda "ffffff" tai "000000" heksakoodilla valitsemallesi värille.
  • Jos haluat muuttaa rajapaksuutta, muuta "2px" -arvoa merkinnän rivillä.
  • Jos haluat luoda katkoviivan ääriviivan sijasta, muuta "raja" -rivin sanaa "kiinteä" ilmaisuksi "katkenneeksi" ilman lainausmerkkejä.
  • Jos haluat tallentaa itsellesi jonkinlaisen kirjoittamisen tai jos olet unohtanut raja-radiuskoodin syntaksin, online-CSS-kehyssäde-generaattorin avulla voit kirjoittaa nurkakoon ja se luo CSS-koodin kopioida ja liittää Dreamweaveriin.

Varoitus

  • Testaa aina valmis sivusi useissa selaimissa ja käyttöjärjestelmissä varmistaaksesi, että koodaamasi pyöreän kulman vaikutus näkyy oikein. Jos sinulla ei ole pääsyä useisiin selaimiin ja käyttöjärjestelmiin, selaimen otosten sivusto näyttää yhden URL-osoitteen valitsemissasi selaimissa ja käyttöjärjestelmissä, ja lähettää sitten raportin tuloksista, joissa on kuvakaappauksia.
 

Jätä Kommentti