Kuidas luua ümarad servad Dreamweaveri tabelites

Tabelite ümardatud servad lisavad teie ettevõtte veebisaidile visuaalse elemendi, mida saate kasutada konkreetsete valdkondade tähelepanu juhtimiseks. Näiteks ümbritseb ümardatud laudaga uus toode või uudiskiri ja see on vastuolus brauseri akna ristkülikukujulise kujuga just selleks, et silma paista. Vaikimisi on HTML-tabelitel teravad nurgad, kuid mõned lihtsad CSS-koodid teie Dreamweaveri programmis säravad neid servi. CSS-i abil saate kontrollida ka tabeli kontuuri värvi, samuti ka laiuse laiust ja stiili.

1.

Avage oma Dreamweaveri rakendus ja valige sait, mis sisaldab lehekülge, kus soovite ümardatud tabelit kuvada.

2.

Topeltklõpsake lehe ikoonil lehel Failid, et see leht ekraanile avada. Kui paneel Failid ei ole ekraanil nähtav, valige aknas menüüst "Failid".

3.

Klõpsa redigeerimisakna ülaosas asuvale nupule „Split”, et vaadata nii jaotuse ekraanil nii lehekülje disainivaadet kui ka koodivaadet, või valige menüüst Vaade „Kood ja disain”. Jaotatud ekraani ülaosas kuvatakse HTML-koodi aken.

4.

Sisestage ilma sitaideta "" sildi all oleval sildil ja sulgege sildi tagakood. See silt sisaldab teie CSS-koodi.

5.

Klõpsake kursori vahel sildid, vajutage "Enter", et alustada uut rida ja tippida ".roundcorners {" (ilma jutumärkideta). Mõiste "ümmargused" on teie stiili nimi, nii et see võib olla iga soovitud nimi. Tavaliselt nimetate stiili midagi, mis kirjeldab, mida see teeb parema koodi loetavuse huvides.

6.

Sisestage järgmised read rida allpool joone, mida just sisestasite, järgmistel ridadel:

taust: #ffffff; piir: 2px tahke # 000000; -webkit-border-radius: 30 px; -moz-border-radius: 30 px; -ms-piiri-raadius: 30 px; raadius: 30 px; }

7.

Kerige Dreamweaveri disainiaknas alla lehele, kus on tabel, mis vajab ümardatud nurki. Kui peate lehele kõigepealt tabeli lisama, klõpsa kursori sellel asukohal, seejärel klõpsake nuppu "Tabel" või valige menüüst Lisamine tabel. Klõpsake üks kord selle valimiseks ja tabeli HTML-kood esile tõstetakse ülaltoodud koodiaknas automaatselt.

8.

Klõpsake kursori asetamiseks

silt, enne parempoolset ">" kronsteini. Vajutage tühikut, et lisada sõna TABEL ja järgmise koodi vahele tühik. Sisestage järgmine:

class = "roundcorners"

See ütleb brauserile, et vaadata tabelit joonistades oma stiili, mis on määratletud nimega "roundcorners". Teie

silt näeb välja järgmiselt:

9.

Valige menüüst File (Fail) käsk "Save" (Salvesta), seejärel klõpsake selle valimiseks paneelil Dreamweaver Files (Faili) oma faili ikooni. Selle värskendatud lehe veebiserverisse paigutamiseks klõpsake paneeli ülaosas asuval nupul "Pane". Ümardatud ristküliku vaatamiseks vaadake oma brauseri lehekülge.

Nõuanded

  • CSS-i hüpeenidega algavad koodijooned on vajalikud mitme brauseri ühilduvuse jaoks. "Moz" rida on Firefoxi jaoks; "ms" on Internet Exploreri jaoks; "webkit" on mõeldud Safari ja Chrome'i jaoks.
  • Nurkade kõvera muutmiseks vähendage või suurendage "30 px" väärtust kõigil ridadel, kus see sildil kuvatakse.
  • Tabeli tausta või laua äärise värvi muutmiseks asendage "ffffff" või "000000" kuuenda koodiga teie valitud värvi jaoks.
  • Piiripaksuse muutmiseks muutke sildi "piiri" rida "2px" väärtust.
  • Katkestatud kontuuri loomiseks tahke ühe asemel vahetage sõna "tahke" "piiri" real "katkendlikuks" ilma jutumärkideta.
  • Kui soovite ennast mõnda tüüpi kirjutada või kui olete kunagi unustanud piiri-raadiokoodi süntaksi, võimaldab CSS Border Radius'i generaator sisestada nurga suuruse ja genereerib CSS-koodi Dreamweaveri kopeerimiseks ja kleepimiseks.

Hoiatus

  • Kontrollige alati oma lõpp-lehekülge mitmes brauseris ja operatsioonisüsteemis, et kontrollida, kas kodeeritud ümmargune nurkefekt kuvab õigesti. Kui teil ei ole juurdepääsu mitmele brauserile ja operatsioonisüsteemile, käivitab brauserivõtete veebisait teie valitud brauserites ja operatsioonisüsteemides ühe URL-i, seejärel saadab teile tulemuste ekraanipiltidega aruande.
 

Jäta Oma Kommentaar