Hvordan lage en skygge for en Web Tabell
Hvis du vil legge til et tredimensjonalt utseende til et bord på en nettside, kan du gi den en "skygge". Det er ingen måte å legge en skygge bare ved å legge en kode til bordet selv, men du kan gjøre det med CSS (Cascading Style Sheet) kode, som definerer stilen til en HTML-element. Du må også ta de nødvendige skritt for å skape en skygge bilde i et program.
Bruksanvisning
Lag Shadow bilde
1 Åpne et bilderedigeringsprogram som vil tillate deg å lage et bilde med gjennomsiktig bakgrunn. Gå til "File", "New" og sett dimensjonene til 800 piksler bred og 800 piksler høy. Sett bakgrunnen til gjennomsiktig.
2 Klikk på rektangelet delen verktøyet og klikk på den øvre venstre hjørne av det nye dokumentet. Dra den ned mot nederste høyre hjørne av dokumentet for å gjøre valget, men ikke forlenge den helt til det nederste høyre hjørne. La en lik mengde plass fra høyre side av dokumentet og nedre kant (ca 10 piksler).
3 Klikk på en lys eller medium nyanse av grått i fargepaletten og velg "Fill" eller "Paint Bucket" verktøyet. Klikk på valget for å fylle den med gråtone. Høyreklikk på valget å de-velge det.
4 Gå til "Effects" -menyen i programmet, og velg "Blur" -funksjonen. Den nederste og høyre side av det grå området du opprettet vil viske ut (i de 10 pixel områder du igjen på høyre og nedre sider) og innsiden av det grå området vil fortsatt se solid.
5 Klikk på markeringsverktøy igjen og velg fra øverste venstre hjørne på innsiden kantene av uklare kanter (i utkanten av den faste delen). Klikk på "Slett" for å isolere uklart høyre og nedre sider. Lagre dokumentet som en PNG bildet slik at det kan beholde den gjennomsiktige bakgrunnen.
Lag koden
6 Last skyggen bildet til serveren din, eller til en gratis image hosting nettsted, for å gi bildet en URL (http://hostingsite.com/shadowbackground.png).
7 Skriv inn CSS (Cascading Style Sheet) kode mellom <head> </ head> taggene i HTML for siden der du vil at tabellen skal vises.
<Style type = "text / css">
table {
bakgrunn: url (http://hostingsite.com/shadowbackground.png) no-repeat nederst til høyre;
margin: -10px 10px 10px -10px;
}
</ Style>
Kontroller at nettadressen for bildet er etter "bakgrunn" og marg størrelser er det samme som hvor mye plass du igjen på høyre og nedre kant av bildet. Hvis du allerede har CSS definere stilen på nettsiden, bare taste inn koden for tabellen i eksisterende CSS.
8 Tast koden for tabellen, i HTML av dokumentet, uansett hvor du vil at den skal vises på siden (hvor som helst mellom <body> </ body> tags):
<Table>
<Tr> <td> Dette er en celle. </ Td> <td> Dette er en annen celle. </ Td> </ tr>
<Tr> <td> Første celle i andre rad. </ Td> <td> Second celle i andre rad. </ Td> </ tr>
</ Table>
Lagre HTML-dokumentet for siden og oppdater siden for å se tabellen med en skygge.
Hint
- For å legge til flere rader i tabellen, fyller sekvensen <tr> <td> </ td> <td> </ td> </ tr> under siste linje og før </ table> tag. Du kan også legge til flere celler ved å legge mer <td> </ td> kodene mellom <tr> </ tr> koder.