Calendari sono spesso utilizzati per la selezione di date per gli appuntamenti, voli aerei, disponibilità dell'hotel e quando inviare cartoline. Di solito vedete calendari in formato di tabella tra cui sei o sette righe e sette colonne. In un sito Web basato su servizio di vedrete un'opzione per passare il mese e/o anno del calendario che vedete per selezionare una data disponibile per un servizio. La struttura del calendario di form HTML mentre CSS contribuisce a creare l'aspetto del calendario.

Istruzioni

1

Creare un file HTML in un testo editor. Aprire un nuovo file e Salva come HTML. Digitare il comando seguente per avviare una pagina Web:

< html >
< head >
< title > nuova pagina < / title >
< / head >
< corpo >
< / body >
< / html >

2

Creare una tabella HTML. Digitare quanto segue all'interno del corpo < >< / corpo > porzione del codice HTML:

< table >
< tr >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< /tr >
< / tabella >

Questo crea sette righe vuote per uso nella tabella del calendario.

3

Creare una riga con display link e mese. Digitare il seguente codice all'interno della tabella < >< / tavolo > porzione del codice HTML:

< tr >
< td colspan = "2" align = "left" class = "prev" >< href = "#" > Prev < /a >< /td >
< td colspan = "3" align = "center" class = "mese" > novembre 2009 < /td >< /td >
< td colspan = "2" align = "right" classe = "next" >< href = "#" > Avanti < /a >< /td >
< /tr >

4

Creare una riga per giorni della settimana.

< tr >
< classe td = "dayoftheweek" > Su < /td >
< classe td = "dayoftheweek" > Mo < /td >
< classe td = "dayoftheweek" > Tu < /td >
< classe td = "dayoftheweek" > abbiamo < /td >
< classe td = "dayoftheweek" > Th < /td >
< classe td = "dayoftheweek" > Fr < /td >
< classe td = "dayoftheweek" > Sa < /td >
< /tr >

5

Creare righe per giorni di calendario. Inserire il codice per aggiungere righe di giorni di calendario per quel mese. Vedere l'esempio riportato di seguito:

< tr >
< classe td = «giorno» > 1 < /td >
< classe td = «giorno» > 2 < /td >
< classe td = «giorno» > 3 < /td >
< classe td = «giorno» > 4 < /td >
< classe td = «giorno» > 5 < /td >
< classe td = «giorno» > 6 < /td >
< classe td = «giorno» > 7 < /td >
< /tr >

Cinque o sei righe di questo formato possono essere necessaria a seconda quando cadono giorni di calendario.

6

Definire CSS per la tabella. Sopra la linea di < table > del codice, inserire il seguente codice:

< style type = "text/css" >
tabella {
border: 1px solid black
VAI
visualizzare: blocco
VAI
Larghezza: 100%
VAI
}
< / stile >

Questo dà il vostro tavolo un bordo nero di un pixel e riempie la larghezza della pagina. Definire la larghezza in pixel se avete misure esatte (ad esempio width: 500px;).

7

Definire il CSS per le celle della tabella. Dopo la tabella definizione CSS, modello vostro celle di tabella simile alla seguente definizione di CSS:

TD.Day () {
tipo di carattere: Arial 12px
VAI
padding: 3px
VAI
}

In questo modo tutte le celle di tabella con la classe di tre pixel, "giorno" di riempimento su ogni lato e una dimensione di 12 pixel e un tipo di carattere Arial.

8

Definire CSS per i link. Dare link di giorno un colore diverso da quello di altri collegamenti. Definire gli stili per rollover. Per esempio:

TD a {color: red;}
TD.Day un {color: blue;}
TD.Day un: hover {color: purple; text-decoration: underline;}

Questo definisce tutti i collegamenti di giorno come blu e tutte le altre pagine di cella di tabella come rosso. Un utente può fare clic su un giorno specifico per scegliere il giorno che vuole check in un hotel o il giorno che vuole volare fuori di una città. Il terzo esempio fornisce tutti i collegamenti di giorno un colore viola quando aleggiava e sottolinea il giorno.

9

Definire CSS per la visualizzazione del mese. Modello di esempio seguente:

TD.month {font: Verdana 14px; in grassetto}

Questo dà l'indicazione del mese nella parte superiore della tabella del calendario una dimensione di 14 pixel, testo in grassetto e font Verdana.