September 7
Calendari sono spesso utilizzati per la scelta delle date per gli appuntamenti, voli aerei, disponibilità dell'hotel e quando inviare e-cards. Di solito si vede calendari in formato tabella tra cui sei o sette righe e sette colonne. In un sito web basato sul servizio si vedrà la possibilità di passare il mese e / o anno del calendario che si vede per selezionare una data disponibile per un servizio. HTML forma la struttura del calendario, mentre CSS contribuisce a creare l'aspetto del calendario.
1 Creare un file HTML in un editor di testo. Aprire un nuovo file e salvare come .html. Digitare quanto segue per iniziare una pagina web:
<Html>
<Head>
<Title> Nuova pagina </ title>
</ Head>
<Body>
</ Body>
</ Html>
2 Creare una tabella HTML. Digitare il seguente all'interno del <body> </ body> porzione di codice HTML:
<Table>
<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>
</ Table>
Questo crea sette righe vuote per uso nella tabella calendario.
3 Creare una riga con i collegamenti e la visualizzazione mese. Digitare il seguente codice all'interno del tag <table> </ table> porzione di codice HTML:
<Tr>
<Td colspan = "2" align = classe "sinistra" = "prev"> <a href="#"> Prev </a> </ td>
<Td colspan = "3" align = "center" class = "mese"> Novembre 2009 </ td> </ td>
<Td colspan = "2" align = "right" class = "next"> <a href="#"> Avanti </a> </ td>
</ Tr>
4 Creare una riga per i giorni della settimana.
<Tr>
<Td class = "DayoftheWeek"> su </ td>
<Td class = "DayoftheWeek"> Mo </ td>
<Td class = "DayoftheWeek"> Tu </ td>
<Td class = "DayoftheWeek"> Noi </ td>
<Td class = "DayoftheWeek"> Th </ td>
<Td class = "DayoftheWeek"> Fr </ td>
<Td class = "DayoftheWeek"> Sa </ td>
</ Tr>
5 Creare righe per giorni di calendario. Inserisci il codice per aggiungere file di giorni di calendario per il mese. Vedere il seguente esempio:
<Tr>
<Td class = "giorno"> 1 </ td>
<Td class = "giorno"> 2 </ td>
<Td class = "giorno"> 3 </ td>
<Td class = "giorno"> 4 </ td>
<Td class = "giorno"> 5 </ td>
<Td class = "giorno"> 6 </ td>
<Td class = "giorno"> 7 </ td>
</ Tr>
Cinque o sei file di questo formato possono essere necessarie a seconda di quando cadono giorni di calendario.
6 Definire CSS per la tavola. Sopra il <table> riga di codice, inserire il seguente:
<Style type = "text / css">
tavolo {
border: 1px solid nero
ANDARE
blocco di visualizzazione
ANDARE
width: 100%
ANDARE
}
</ Style>
Ciò dà al vostro tavolo un bordo nero di un pixel e riempie la larghezza della pagina. Definire larghezza in pixel, se si dispone di misure esatte (ad esempio larghezza: 500px;).
7 Definire il CSS per celle della tabella. Dopo definizione della tabella CSS, modellare le cellule tabella simile alla seguente definizione CSS:
td.day {
font: 12px Arial
ANDARE
padding: 3px
ANDARE
}
In questo modo tutte le celle della tabella con la classe di "giorno" tre pixel di padding su ogni lato e una dimensione del carattere di 12 pixel e un tipo di carattere Arial.
8 Definire CSS per i collegamenti. Dare collegamenti al giorno un colore diverso rispetto agli altri collegamenti. Definire stili per rollover. Per esempio:
td a {color: red; }
td.day a {color: blue; }
td.day a: hover {color: purple; text-decoration: underline; }
Questo definisce tutti i collegamenti al giorno il blu e tutti gli altri collegamenti cellulari tavolo il rosso. Un utente può fare clic su un giorno specifico per scegliere il giorno che vuole controllare in un albergo o il giorno in cui vuole volare fuori di una città. Il terzo esempio dà tutto il giorno collega un colore viola quando aleggiava e sottolinea la giornata.
9 Definire CSS per la visualizzazione mese. Modellare il seguente esempio:
td.month {font: 14px bold Verdana; }
Questo dà l'indicazione del mese nella parte superiore della tabella calendario di una dimensione di carattere di 14 pixel, il testo in grassetto e Verdana carattere.