Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
* un semplice template
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
Wolverine
Dio minore
Dio minore


Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru

MessaggioInviato: 07 Lug 2006 19:46    Oggetto: Rispondi citando

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 Wink
Top
Profilo Invia messaggio privato HomePage Yahoo MSN
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 07 Lug 2006 20:09    Oggetto: Rispondi citando

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 Wink


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 Smile

allora, 'sta intestazione! hai deciso se ci metti un'immagine o se la lasci solo testuale!? Razz
Top
Profilo Invia messaggio privato HomePage
Wolverine
Dio minore
Dio minore


Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru

MessaggioInviato: 07 Lug 2006 20:20    Oggetto: Rispondi citando

immagine...ma devo ancora farmela con photoshop Laughing Embarassed
Top
Profilo Invia messaggio privato HomePage Yahoo MSN
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 07 Lug 2006 20:22    Oggetto: Rispondi citando

Wolverine ha scritto:
immagine...ma devo ancora farmela con photoshop Laughing Embarassed


speta! tu mi dici come vuoi impostare l'header e io ti guido a farlo, ok? Smile

testuale?
foto elaborata?
intestazione fatta da zero con photoshop?

dimmi tu che preferisci Smile
Top
Profilo Invia messaggio privato HomePage
Wolverine
Dio minore
Dio minore


Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru

MessaggioInviato: 07 Lug 2006 20:25    Oggetto: Rispondi citando

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 Wink

***

edit by reb - la parte relativa alla creazione dell'header continua qui
Top
Profilo Invia messaggio privato HomePage Yahoo MSN
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 16 Lug 2006 22:58    Oggetto: Rispondi citando

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 Mr. Green )

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 Smile

p.s. dimmi se ti piace, altrimenti lo buttiamo per aria e lo rifacciamo Wink


L'ultima modifica di rebelia il 27 Ago 2006 10:23, modificato 1 volta
Top
Profilo Invia messaggio privato HomePage
Wolverine
Dio minore
Dio minore


Registrato: 27/07/05 10:56
Messaggi: 817
Residenza: Tamen-ni-gru

MessaggioInviato: 23 Lug 2006 10:40    Oggetto: Rispondi citando

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... Wink
Top
Profilo Invia messaggio privato HomePage Yahoo MSN
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 23 Lug 2006 12:26    Oggetto: Rispondi

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... Wink


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' Mr. Green )
  • 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 Mr. Green


buon lavoro, ocio che quando torno ti controllo Razz Wink
Top
Profilo Invia messaggio privato HomePage
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 2 ore
Vai a Precedente  1, 2, 3
Pagina 3 di 3

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi