| Precedente :: Successivo |
| Autore |
Messaggio |
Wolverine
Dio minore
Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru
|
 Inviato: 07 Lug 2006 19:46 Oggetto: |
 |
|
| rebelia ha scritto: | (#fff e' il valore esadecimale del bianco ed essendo le coppie di cifre uguali a due a due, e' possibile contrarlo e scrivere #fff anziche' l'originario #ffffff)
|
si imparano sempre cose nuove  |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 07 Lug 2006 20:09 Oggetto: |
|
|
| Wolverine ha scritto: | | rebelia ha scritto: | (#fff e' il valore esadecimale del bianco ed essendo le coppie di cifre uguali a due a due, e' possibile contrarlo e scrivere #fff anziche' l'originario #ffffff)
|
si imparano sempre cose nuove |
beh, quando mi capita inserisco info random non solo per la persona con cui sto lavorando, ma soprattutto per chi ci legge e ci leggera' in futuro 
allora, 'sta intestazione! hai deciso se ci metti un'immagine o se la lasci solo testuale!?  |
|
| Top |
|
|
Wolverine
Dio minore
Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru
|
| Inviato: 07 Lug 2006 20:20 Oggetto: |
|
|
immagine...ma devo ancora farmela con photoshop   |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 07 Lug 2006 20:22 Oggetto: |
|
|
| Wolverine ha scritto: | | immagine...ma devo ancora farmela con photoshop |
speta! tu mi dici come vuoi impostare l'header e io ti guido a farlo, ok?
testuale?
foto elaborata?
intestazione fatta da zero con photoshop?
dimmi tu che preferisci |
|
| Top |
|
|
Wolverine
Dio minore
Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru
|
| Inviato: 07 Lug 2006 20:25 Oggetto: |
|
|
bè....una semplice immagine....niente di particolare...non capisco se sono io che sto entrando in paranoia o tu che la prendi troppo sul serio
***
edit by reb - la parte relativa alla creazione dell'header continua qui |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 16 Lug 2006 22:58 Oggetto: |
|
|
ok, ora che abbiamo creato l'header, riprendiamo in mano il codice
l'html per ora e' completo (eventualmente sara' da ritoccare quando inserirai i contenuti nelle pagine ancora vuote), percio' concentriamoci sul css; m'accorgo che i colori scelti mal si abbinano con l'header o comunque che si puo' fare di meglio, percio' cerco di ottenere un risultato piu' omogeneo
per prima cosa, modifico il colore di sfondo e per far questo apro l'immagine con il programma di grafica, con lo strumento prelievo colore scelgo una tonalita' che mi piace (#b0bbc6) e la sostituisco a quella esistente (#BFFFF9):
| Codice: |
body {
background: #b0bbc6;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
text-align: center;
}
|
visto che ho un'intestazione come si deve, non ho piu' bisogno del titolo, percio' lo rendo invisibile aggiungendo h1 (il tag che ho usato) agli elementi da non visualizzare:
| Codice: |
hr, h1 {
display: none;
}
|
decido di rimuovere sia i bordini blu, che lo sfondo bianco e agisco sul div #contenitore in questo modo:
| Codice: |
#contenitore {
rimuovo questo --> background: #fff;
width: 750px;
rimuovo questo --> border: 1px solid navy;
margin: 10px auto 10px auto;
padding: 0px;
}
|
quindi ora il div #contenitore sara' formattato in questo modo:
| Codice: |
#contenitore {
width: 750px;
margin: 10px auto 10px auto;
padding: 0px;
}
|
al div #header aggiungo finalmente l'intestazione faticosamente creata: per prima cosa do l'altezza (la stessa dell'immagine) e inserisco il comando background dando il percorso dell'immagine (url etc) determinando che non lo voglio ripetere (no-repeat) e che deve essere posizionato partendo dall'alto a sinistra; tolgo anche la righina blu messa in precedenza, percio' l'header da questo:
| Codice: |
#header {
border-bottom: 1px solid navy;
}
|
si trasformera' in questo:
| Codice: |
#header {
height: 150px;
background: url(immagini/header.jpg) no-repeat top left;
}
|
non ho ancora impostato il colore dei link: visto che ora ho uno sfondo scuro, decido di farli bianchi e di fare in modo che al passaggio del mouse i colori si invertano, percio' inserisco nella parte alta del css i seguenti comandi:
| Codice: |
a {
color: #fff;
background: #b0bbc6;
}
a:hover {
background: #fff;
color: #b0bbc6;
}
|
nota: e' opportuno indicare sia il colore di sfondo che il colore del link, in modo che se qualcuno usa un css alternativo riesce a sovrascrivere tutto correttamente
menu: sostituisco la righina di prima color navy con una di un colore preso nella parte scura dell'immagine e aggiungo un po' di luce sopra e sotto in modo che i link non stiano troppo appiccicati:
| Codice: |
#menu {
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #284f78;
}
|
i valori del padding e tutti quelli espressi in quel modo si leggono dall'alto in senso orario, quindi: top - right - bottom - left (alto - destra - basso - sinistra)
apporto una piccola modifica ai link del menu togliendo la sottolineatura (text-decoration: none) e aggiungendo un po' di "superficie cliccabile" con del padding:
| Codice: |
#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
}
|
(siamo a buon punto con la rivoluzione  )
sostituisco anche il colore usato per il bordino in fondo al corpo della pagina, cosi' come ho fatto per il menu:
| Codice: |
#contenuto {
padding: 10px;
text-align: left;
border-top: 1px solid #284f78;
}
|
aggiungo un po' di luce tra il corpo della pagina e il footer dando a quest'ultimo 10 pixel di margin:
| Codice: |
#footer {
margin-top: 10px;
}
|
ricapitolando, il css ora e' questo:
| Codice: |
body {
background: #b0bbc6;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
text-align: center;
}
hr, h1 {
display: none;
}
img {
border: 0px;
}
a {
color: #fff;
background: #b0bbc6;
}
a:hover {
background: #fff;
color: #b0bbc6;
}
#contenitore {
width: 750px;
margin: 10px auto 10px auto;
padding: 0px;
}
#header {
height: 150px;
background: url(immagini/header.jpg) no-repeat top left;
}
#menu {
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #284f78;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
#menu ul li a {
text-decoration: none;
padding: 5px 10px 5px 10px;
}
#contenuto {
padding: 10px;
text-align: left;
border-bottom: 1px solid #284f78;
}
#footer {
margin-top: 10px;
}
#footer ul {
list-style: none;
margin: 0px;
}
#footer ul li {
display: inline;
margin: 0px;
padding: 0px;
}
|
e il sito da cosi':
e' diventato cosi':
modificando UN SOLO FILE: questo esempio ti da un'idea della forza di come sia conveniente spostare tutta la formattazione in un css esterno e non cedere alla tentazione di infilare della formattazione in linea, con il rischio di dimenticare qualche sostituzione in caso di aggiornamento e cmq comportando un lavoro molto piu' gravoso, visto che si tratterebbe di modificare tutte le pagine anziche' un unico file
p.s. dimmi se ti piace, altrimenti lo buttiamo per aria e lo rifacciamo
L'ultima modifica di rebelia il 27 Ago 2006 10:23, modificato 1 volta |
|
| Top |
|
|
Wolverine
Dio minore
Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru
|
| Inviato: 23 Lug 2006 10:40 Oggetto: |
|
|
| bellissimo....per ora ho usato per l'header l'immagine che hai fatto tu.Appena riesco a sistemarmi con photoshop provo a farne una io.....adesso che abbiamo (hai) organizzato un buon skin passo ai contenuti... |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 23 Lug 2006 12:26 Oggetto: |
 |
|
| Wolverine ha scritto: | | bellissimo....per ora ho usato per l'header l'immagine che hai fatto tu.Appena riesco a sistemarmi con photoshop provo a farne una io.....adesso che abbiamo (hai) organizzato un buon skin passo ai contenuti... |
beh, adesso e' semplice:
- se devi inserire del testo usa il tag per i paragrafi <p></p>
- se devi inserire una lista puntata usa il tag <ul></ul> per aprirla e chiuderla
- se devi inserire una lista numerata usa il tag <ol></ol> per aprirla e chiuderla
- in entrambe i casi usa <li></li> per aprire e chiudere i vari punti elenco
- se inserisci un'immagine, un a-capo o una linea di separazione, ricordati di chiudere il tag in questo modo: <img src="..." /> oppure <br /> oppure <hr />
- per i titoli usa i vari hn: <h1></h1> (ma questo gia' lo stai usando per l'intestazione); <h2></h2> per i titoli di pagina e via via fino a <h6></h6> per i titoletti meno importanti (di solito con h3-h4 esaurisci le necessita' )
- occhio ad aprire e chiduere correttamente i tag e ad annidarli bene
- occhio a non inserire immagini troppo grandi
- se metti a disposizione roba da scaricare, indica il formato e il peso
- e per quel che mi son dimenticata... leggiti questo
buon lavoro, ocio che quando torno ti controllo |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
