Precedente :: Successivo |
Autore |
Messaggio |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 12 Set 2005 22:01 Oggetto: * costruire un template |
|
|
Eccoci pronti...
allora vada per il modello scelto. Come primo passo cosa devo fare ?
sfondo grigio e parte centrale nera ?
Su questa parte centrale nera metterò tutti i miei elementi. Inizio dall'immagine ?
Aspetto notizie... grazie! |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 10:03 Oggetto: |
|
|
ok, iniziamo
ho schematizzato il layout per una piu' facile comprensione e il lavoro che andremo a fare e' piu' o meno questo:
nota per gli altri: il layout e' stato buttato giu' da lucky boy con un programma di grafica ed e' sicuramente il primo passo quando si decide di creare una pagina web: sapendo quale sara' il risultato finale e' meno probabile dover tornare sul layout ad inserire nuovi div
nel caso pero' ci ripensiate in corso d'opera, niente paura: la progettazione a div permette di sconvolgere il layout con pochi ritocchi se non nessuno e semplicemente agendo sul css
bon, ritorniamo al layout e complichiamo un po' le cose: anziche' in html, scriveremo in xhtml che da html si differenzia molto poco, ma in compenso e' piu' compatibile col futuro del web
xhtml usa gli stessi tag di html, ma dev'essere piu' curato: annidato correttamente, i tag devono essere sempre chiusi e quelli che normalmente non si chiudono (<img> <br> etc) vanno chiusi cosi': />
ma vedremo procedendo
per iniziare, crea un file template.htm (anche col blocco note) e prima di tutto dichiari quale sara' il linguaggio che userai da li' in avanti, inserendo il doctype (non spaventarti se le info sono tante: per ora limitati a copiare e incollare):
Codice: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>A.C.M.E. ltd</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="esterno">
<div id="interno">
<div id="header"></div>
<hr />
<div id="corpo">
<div id="colonnasx"></div>
<hr />
<div id="colonnadx"></div>
</div>
<hr />
<div id="footer"></div>
</div>
</div>
</body>
</html>
|
ho creato una serie di contenitori annidati e li ho divisi in alcuni punti con delle righe (hr) che servono a suddividere le sezioni nel caso di navigatori che disabilitino i css; nota come il tag hr sia stato chiuso malgrado sia un tag "vuoto" (quel che ti dicevo sopra, in pratica)
ora crea un file stile.css e scrivi:
Codice: |
body {
background: gray;
text-align: center; /*commento: questo serve per allineare il layout con ie*/
font-family: "century gothic", verdana, arial, sans-serif;
font-size: 80%;
}
hr {
display: none;
} /*commento: rendo invisibile hr perche' non infastidisca il mio layout in modalita' normale*/
#esterno {
width: 750px;
margin: 10px auto 10px auto; /*commento: i quattro valori vanno dati in senso orario partendo dall'alto: top right bottom left */
border: 1px solid yellow;
}
#interno {
margin-left: 150px;
border-left: 1px solid yellow;
}
#header {
height: 200px;
border-bottom: 1px solid yellow;
}
#corpo {
text-align: left; /*commento: i div superiori erediteranno l'allineamento centrato da body */
}
#colonnasx {
margin-right: 155px;
}
#colonnadx {
width: 150px;
float: right;
border-left: 1px solid yellow;
}
#footer {
clear: both;
}
|
|
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 12:22 Oggetto: |
|
|
passo numero due: il menu di navigazione principale
mettiamo che si tratti del sito di un'azienda e mettiamo che mi servano le pagine home, chi siamo, prodotti, servizi, contatti
quel che mi serve e' un elenco delle pagine a disposizione, per l'esattezza un elenco non ordinato, quindi usero' il tag ul
in template.htm inseriro':
Codice: |
...
<div id="header">
<ul>
<li><a href="index.htm">home</a> |</li>
<li><a href="chisiamo.htm">chi siamo</a> |</li>
<li><a href="prodotti.htm">prodotti</a> |</li>
<li><a href="servizi.htm">servizi</a> |</li>
<li><a href="contatti.htm">contatti</a> |</li>
</ul>
</div>
...
|
non ha alcuna importanza se le pagine ancora non esistono, le faremo man mano
per formattarlo in modo che compaia orizzontale, nel file stile.css scrivero':
Codice: |
#header {
...
text-align: right;
padding-right: 10px; /*commento: questo per mantenere il menu staccato dal bordo dx del layout */
}
#header ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline: /*commento: in questo modo trasformo un elemento blocco in un elemento in linea */
margin: 0px;
padding: 0px;
color: yellow;
}
#header a {
color: yellow;
font-weight: bold;
text-decoration: none;
}
#header a:visited{
color: green;
}
#header a:hover {
color: black;
background: yellow;
}
#corpo {...
|
elementi blocco: tutti quelli che provocano un a-capo dopo la loro chiusura (div, p, li, ul, table...)
elementi in linea: quelli che non lo provocano (a, span... )
nota: nel tag li ho inserito un trattino dopo la chiusura del tag a: mi serve per separare - una volta messi in orizzontale - i vari link; formatto tale trattino con color: yellow nel css nella formattazione del li
link: se voglio differenziare i tag visitati da quelli non visitati, e' opportuno inserire la voce visited prima della voce hover, altrimenti e' facile che non si ottenga il risultato desiderato |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 13:30 Oggetto: |
|
|
rebelia ha scritto: | Codice: |
...
<div id="header">
<ul>
<li><a href="index.htm">home</a> |</li>
<li><a href="chisiamo.htm">chi siamo</a> |</li>
<li><a href="prodotti.htm">prodotti</a> |</li>
<li><a href="servizi.htm">servizi</a> |</li>
<li><a href="contatti.htm">contatti</a> |</li>
</ul>
</div>
...
|
|
Ma tutta questa parte la inserisco prima dell'ultimo
</body>
</html> - Giusto ???? |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 13:33 Oggetto: |
|
|
rebelia ha scritto: | Codice: |
#header {
...
text-align: right;
padding-right: 10px; /*commento: questo per mantenere il menu staccato dal bordo dx del layout */
}
#header ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline: /*commento: in questo modo trasformo un elemento blocco in un elemento in linea */
margin: 0px;
padding: 0px;
color: yellow;
}
#header a {
color: yellow;
font-weight: bold;
text-decoration: none;
}
#header a:visited{
color: green;
}
#header a:hover {
color: black;
background: yellow;
}
#corpo {...
|
|
Questa prte va inserita dopo:
#header {
height: 200px;
border-bottom: 1px solid yellow;
cominciando da qui con:
text-align: right;
padding-right: 10px; /*commento:
??? grazie... |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 13:38 Oggetto: |
|
|
LuckyBoy ha scritto: |
Ma tutta questa parte la inserisco prima dell'ultimo
</body>
</html> - Giusto ???? |
scusa, forse sono stata poco precisa: per comodita', non inserisco ogni volta tutto quanto, ma solo il div interessato
per *dove* inserire le aggiunte, fai sempre riferimento all'id del div: in questo caso, l'id e' "header", percio' tutta la parte che sta tra <ul> e </ul> compresi andra' inserita all'interno di quello che nel primo pezzo di codice ho segnato come <div id="header"> (qua in mezzo, in pratica) </div>
quello in alto e' semplicemente il canovaccio su cui andremo a costruire il sito, i div-contenitore principali, ma non contengono ancora nulla
passo passo inseriremo i vari elementi, il menu di navigazione principale e' il primo di essi e per dove andra' a finire fai riferimento all'immagine che ho linkato li' sopra 
L'ultima modifica di rebelia il 13 Set 2005 13:40, modificato 1 volta |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 13:38 Oggetto: |
|
|
LuckyBoy ha scritto: |
Questa prte va inserita dopo:
#header {
height: 200px;
border-bottom: 1px solid yellow;
cominciando da qui con:
text-align: right;
padding-right: 10px; /*commento:
??? grazie... |
esatto, proprio cosi' e termina dove iniziano le definizioni del div successivo (cioe' corpo)
nota: la parte tra /* e*/ non e' necessario che la riporti: sono solo dei commenti che inserisco io per spiegarti il perche' di certi passaggi
ad ogni modo e' utile a volte commentare il codice che scriviamo: se lo si fa nel css, bisogna usare /* per aprire e */ per chiudere, mentre se lo si fa nella pagina (x)html bisogna usare <!-- per aprire e --> per chiudere |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 13:52 Oggetto: |
|
|
ok ok non sono le tue spiegazioni... è la mia Zucca....
Comunque capito...
Però le scritte non mi restano tutte su una riga e mi compare un rettangolo giallo con delle riche in basso strane ... !?!...
 |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 13:57 Oggetto: |
|
|
LuckyBoy ha scritto: |
Però le scritte non mi restano tutte su una riga e mi compare un rettangolo giallo con delle riche in basso strane ... !?!...
 |
siccome ti rispondo un po' da un pc e un po' da un altro e vado male a portarmi dietro l'esempio, ti scoccia caricare le pagine in rete e mandarmi il link, cosi' controllo direttamente?
metti il materiale in una cartella chiamata ad esempio "test" e caricala nel dominio che hai attivato l'altro giorno
cosi', senza tanti giri strani: la carichi tutta intera nella cartella principale del sito (quella dove ci sono le pagine gia' attive) ed io seguiro' il link http://www.tuodominio.net/test/ e vedro' il risultato
non preoccuparti: se nessuno ha il link, nessuno trova la cartella ed una volta completato e spostato nella sua sede definitiva il tutto, la rimuoviamo  |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 14:01 Oggetto: |
|
|
ci provo  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 14:08 Oggetto: |
|
|
LuckyBoy ha scritto: | ci provo  |
'spe, trovato l'errore:
Codice: |
#header ul li {
display: inline: |
mi e' scappato un : anziche' un ; alla fine di "inline"
l'attributo termina SEMPRE con ;
non me n'ero accorta e da li' il problema: modifica e dovrebbe andare a posto 
L'ultima modifica di rebelia il 13 Set 2005 22:49, modificato 1 volta |
|
Top |
|
 |
horus Macchinista


Registrato: 22/03/05 10:48 Messaggi: 2554 Residenza: Sirio e dintorni
|
Inviato: 13 Set 2005 14:08 Oggetto: |
|
|
Se non erro su tophost la cartella test esiste all'attivazione e viene usata appunto per testare il dns sul dominio, le strade sono due:
1. cancelli tutto il contenuto di tale cartella e ci metti i tuoi file.
2. crei una nuova cartella col nome che preferisci, ci mettii file e lo dici a Rebelia. |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 14:53 Oggetto: |
|
|
horus ha scritto: | Se non erro su tophost la cartella test esiste all'attivazione e viene usata appunto per testare il dns sul dominio, le strade sono due:
1. cancelli tutto il contenuto di tale cartella e ci metti i tuoi file.
2. crei una nuova cartella col nome che preferisci, ci mettii file e lo dici a Rebelia. |
visto che si tratta di un mio errore individuato e corretto, a questo punto non ne vale neanche la pena: meglio continuare da qua senza complicarci la vita e deviare inutilmente il thread
cmq grazie per la segnalazione, ne terro' conto la prossima volta che suggerisco un nome per una cartella a qualcuno 
L'ultima modifica di rebelia il 13 Set 2005 22:50, modificato 1 volta |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 16:34 Oggetto: |
|
|
ho messo la pagina online ... visto? |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 20:45 Oggetto: |
|
|
Ok OK
Allora fin qui ci siamo ... step successivo ??? Inseriamo le immagini ???
 |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 20:48 Oggetto: |
|
|
edit: rieccomi
dunque: le immagini sulla colonna di destra, se non ricordo male, giusto?
poniamo che si tratti del sito di una libreria e che quella sezione serva per segnalare gli ultimi arrivi (beh, quasi ) e poniamo che cliccando sull'immagine si vada alla relativa scheda
la colonna e' impostata a 150px e fingiamo che sia perche' gia' sapevamo che le immagini sarebbero state di 100px di larghezza per 200px di altezza
il codice della pagina sara':
Codice: |
...
<div id="colonnadx">
<h2>Proposte del giorno</h2>
<a href="#" title="Vai alla scheda del libro"><img src="cartella/foto1.jpg" alt="Siddartha - H. Hesse" /></a><br />
<a href="#" title="Vai alla scheda del libro"><img src="cartella/foto2.jpg" alt="Diario - A. Frank" /></a><br />
<a href="#" title="Vai alla scheda del libro"><img src="cartella/foto3.jpg" alt="Aforismi - O. Wilde" /></a><br />
</div>
...
|
e nel css scrivero':
Codice: |
...
#colonnadx {
...
text-align: center;
}
#colonnadx img {
width: 100px;
height: 200px;
}
...
|
sempre nel css, appena sotto hr {display: none;}, aggiungi anche un img {border: 0px;} per evitare il bordino attorno all'immagine quando aggiungi il link alla stessa
dimenticavo!
alla nostra pagina manca un titolo, elemento di poca importanza nel caso che si usi un'immagine di intestazione, ma utilissimo se il navigatore disabilita la grafica
fai questa modifica al div header:
Codice: |
...
<div id="header">
<h1>libreria rossi - firenze</h1>
<ul>
<li><a href="index.htm">home</a> |</li>
<li><a href="chisiamo.htm">chi siamo</a> |</li>
<li><a href="prodotti.htm">prodotti</a> |</li>
<li><a href="servizi.htm">servizi</a> |</li>
<li><a href="contatti.htm">contatti</a> |</li>
</ul>
</div>
...
|
e quest'aggiunta al css:
Codice: |
hr, h1 {
display: none;
}
|
in questo modo il browser non mi mostrera' ne' la linea creata con hr, ne' il contenuto del tag h1, cioe' il titolo della pagina
la costruzione con la barra di sinistra che arriva in cima e' un po' atipica, ma una volta capito il meccanismo, non credo che sara' difficile applicarlo anche a layout diversi
quanto sopra per l'inserimento delle immagini nella struttura della pagina
nella... ehm... "prossima puntata" ti spieghero' ad usare invece le immagini come decorazione
edit: non so come vedi tu il codice (dipende dalla tua risoluzione) ad ogni modo tutto quel che sta scritto tra <a href e /a> va messo possibilmente su una stessa riga
se proprio hai bisogno di rompere la riga, molto meglio farlo prima di un attributo o addirittura - nel caso ad esempio di title o di alt - all'interno del testo dello stesso
mi spiego:
Codice: |
<a href="#" title="vai alla
scheda del libro"><img /></a>
|
va benissimo, mentre
Codice: |
<a href="#" title="vai alla scheda del libro">
<img />
</a>
|
in alcune situazioni potrebbe darti dei problemi, percio' meglio evitare |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 21:55 Oggetto: |
|
|
wow...
tartufo un po... lo adatto alle mie esigenze e ci sentiamo...
grazie ! |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 22:09 Oggetto: usare le immagini per decorare i div |
|
|
ci sono immagini che hanno un loro motivo di esistere come tali all'interno della pagina, come ad esempio le copertine dei libri di prima, oppure delle foto panoramiche, ma ci sono anche delle immagini che servono unicamente a decorare il nostro layout
fingiamo che il nostro logo sia quest'immagine:
e che io la voglia piazzare in cima alla colonna di sinistra
inseriro' l'immagine nella cartellina assieme alle altre e NEL CSS scrivero':
Codice: |
...
#esterno {
...
color: white;
background: black url(cartella/pennino.gif) no-repeat center top;
}
...
|
cioe':
- dico di usare il bianco per il testo (lo si puo' fare direttamente nel body, ma nel nostro caso il div #esterno contiene tutto il resto, percio' va ugualmente bene)
- dico di usare il nero per lo sfondo del div
- dico di andarsi a prendere l'immagine pennino.gif inserita all'interno della directory "cartella"
- dico di NON ripeterla (cioe' di riprodurla una sola volta)
- specifico che la voglio in cima e centrata rispetto al div
per ottenere lo stesso risultato, avrei potuto scrivere:
Codice: |
background-color: black;
background-image: url(cartella/pennino.gif);
background-repeat: no-repeat;
background-position: center top;
|
altri valori per background sono:
- per l'url puo' essere utilizzato un percorso assoluto anziche' relativo (http://www etc)
- per repeat i valori sono: repeat, no-repeat, repeat-x, repeat-y
- per position: top, bottom, left, right, center, oppure in percentuale o ancora in pixel; in questi ultimi due casi, il conteggio partira' dall'angolo in alto a sinistra
quand'e' possibile, la versione contratta dei comandi ci permette di risparmiare peso, oltre ad essere piu' veloce e snella
l'immagine non interferira' con il resto del layout, perche' misura 130x130 pixel ed io ho dato al div #interno un margin-left di 150 pixel |
|
Top |
|
 |
LuckyBoy Eroe in grazia degli dei


Registrato: 14/07/05 14:23 Messaggi: 96 Residenza: Lago di Garda
|
Inviato: 13 Set 2005 23:20 Oggetto: |
|
|
ho provato a modificare un po il progetto (non arrabbiarti ) ... è on-line.
Alcune informazioni:
come mai sotto home | contatti| eccc... c'è così tanto spazio ?
come mai la colonna di dx risulta sotto la foto e non affiancata ???
Preciso che dove adesso c'è la foto poi andranno due o tre immagini con alcune brevi descrizioni ma volevo vedere come stava.
nella colonna di sx vorrei mettere il logo, vedo adesso le tue indicazioni domani proverò.
comunque se vuoi dare un'cchiata è on-line. grazie buona notte.  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 13 Set 2005 23:44 Oggetto: |
|
|
LuckyBoy ha scritto: | ho provato a modificare un po il progetto (non arrabbiarti ) ... è on-line. |
e perche' dovrei arrabbiarmi? questo e' un tutorial ad uso e consumo di chiunque voglia approfondire, poi e' chiaro che ognuno lo adatta alle proprie esigenze
Citazione: |
Alcune informazioni:
come mai sotto home | contatti| eccc... c'è così tanto spazio ?
|
ti basta modificare il valore height di #header per ridurla
io consiglierei sia di ridurre l'altezza di #header, sia di dare un po' di luce in alto al menu con #header ul {margin-top: 50px;}
Citazione: |
come mai la colonna di dx risulta sotto la foto e non affiancata ???
|
perche' dovevi inserirla in <div id="colonnasx">(qua)</div> e NON li' dove sta, perche' sposta sotto quel che ci sta dopo, cioe' i div colonnasx e colonnadx
come puoi vedere dal codice che ho postato, il div id=corpo non chiude immediatamente, ma chiude SOTTO gli altri due, proprio perche' serve da contenitore; una corretta indentazione degli elementi serve proprio per poter capire a colpo d'occhio cosa contiene cosa e dove finisce
ah, non puoi usare [color] all'interno di html: quelli sono solo... mmm... "tag" semplificati ad uso e consumo dei forum e poco altro
altro errore: nella colonna di destra hai scelto di inserire un secondo menu e correttamente hai usato il tag <li>, solo che <li> va inserito SEMPRE all'interno di <ul> (per ottenere un elenco non numerato) oppure <ol> (per ottenere un elenco numerato/cifrato)
quindi: <ul><li>contenuto</li><li>contenuto</li></ul>
altro errore: NON inserire <br> tra un tag <li> e l'altro: alla sua chiusura ( </li> ) il tag <li> va GIA' a capo (e' un elemento blocco, ricordi?) e se vuoi spaziare le voci, ti consiglio piuttosto di modificare in questo modo il css:
Codice: |
...
#colonnadx{
...
}
#colonnadx ul li {
margin-bottom: 20px;
}
...
|
se per qualche motivo all'interno di template.htm devi usare <br>, ricordati di chiuderlo in questo modo <br /> perche' non stai piu' scrivendo in html come nella prima pagina che abbiamo costruito, ma stai scrivendo in xhtml e le regole sono leggermente diverse
Citazione: |
Preciso che dove adesso c'è la foto poi andranno due o tre immagini con alcune brevi descrizioni ma volevo vedere come stava.
|
stava... nella colonna sbagliata
Citazione: |
nella colonna di sx vorrei mettere il logo, vedo adesso le tue indicazioni |
mmmno, non e' quello il posto del logo: la colonna di sinstra andra' a formare il punto centrale della pagina, quella dove ci sta il contenuto vero e proprio, cioe' quello che cambia in ogni sezione, mentre il resto fa da corollario e resta generalmente invariato in tutte le pagine interne
il posto del logo e' in alto a sinistra dove ti ho fatto piazzare l'immagine pennino; vista la richiesta di uno spazio tutto lungo per verticale, pensavo che il logo che dovevi usare fosse una cosa tipo questa:
considera che il punto focale e sempre visibile in una pagina anche aprendo una finestra ridimensionata e' proprio in alto a sinistra: ecco perche' e' usato per piazzarci il logo nella stragrande maggioranza dei casi
occhio, perche' nella pagina che ho visto, il tag h1 parla ancora di librerie
sarebbe meglio modificare anche a:hover del menu principale, perche' sul giallo l'arancio ha una leggibilita' scarsissima: ti consiglio di sostituire quest'ultimo col nero (di invertire i colori, in pratica) |
|
Top |
|
 |
|