Precedente :: Successivo |
Autore |
Messaggio |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 12:13 Oggetto: |
|
|
fino a quitutto semplice...adesso inserisco i bannerini carini |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 12:16 Oggetto: |
|
|
Wolverine ha scritto: | fino a quitutto semplice...adesso inserisco i bannerini carini |
fermo la'!
lo si fa sul template (colpa mia che non ci ho pensato prima) e nel modo corretto e poi si ricopia la parte nel file gia' fatto (questo e' il motivo per cui bisogna prima completare il template con tutti gli elementi, sic!)
dammi un minuto che ti butto giu' il codice corretto |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 12:24 Oggetto: |
|
|
COSì non va bene? |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 12:29 Oggetto: |
|
|
nella stessa cartella dove hai i files, creati una sottocartella che chiamerai "immagini" e salvaci dentro i quattro bannerini
poi prendi in mano il file template.html e modifica il footer come segue:
Codice: |
<div id="footer">
<ul>
<li><a href="http://www.madvero.it/"><img src="immagini/madvero.bmp" alt="Vai al sito di Madvero" /></a></li>
<li><a href="http://zeusnews.it/"><img src="immagini/olimpo.jpg" alt="Vai al forum dell'Olimpo Informatico" /></a></li>
<li><a href="http://www.beppegrillo.it/"><img src="immagini/beppe.jpg" alt="Vai al blog di Beppe Grillo" /></a></li>
<li><a href="http://www.imperium-romanum.it/"><img src="immagini/forrom.gif" alt="Vai al sito dell'Imperium Romanum" /></a></li>
</ul>
</div>
|
per favore controlla anche la chiusura della pagina che - dopo la chiusura di footer - deve essere composta da tre tag come segue:
Codice: |
</div>
</body>
</html>
|
mi sono "mangiata" la chiusura del div principale in qualche passaggio e devi correggere
***
per tornare al footer: NON preoccuparti se i banner vanno a finire uno sotto l'altro, poi risolviamo; per ora preoccupati solo di avere l'elenco taggato correttamente e che le immagini siano visualizzate
una volta che il div footer e' pronto, copia il codice anche nella pagina index.html e poi procediamo (pero' prima pensa se ti servono altri elementi "comuni" che provvediamo ad inserirli prima di continuare con la preparazione delle pagine)
vado a correggere i post precedenti, dimmi quando ci sei |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 12:34 Oggetto: |
|
|
Wolverine ha scritto: | COSì non va bene? |  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 12:40 Oggetto: |
|
|
Wolverine ha scritto: | Wolverine ha scritto: | COSì non va bene? |  |
perche' non fare di meglio, se si puo'?
spiegazione tecnica:
quel che proponi e' un elenco di link, percio' tecnicamente e' giusto taggarlo come tale, cioe' usando un elenco puntato  |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 12:48 Oggetto: |
|
|
cioè?  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 13:13 Oggetto: |
|
|
Wolverine ha scritto: | cioè?  |
cioe' come ti ho scritto due post sopra
scrolla per la spiegazione, cmq il codice corretto e' questo:
Codice: |
<div id="footer">
<ul>
<li><a href="http://www.madvero.it/"><img src="immagini/madvero.bmp" alt="Vai al sito di Madvero" /></a></li>
<li><a href="http://zeusnews.it/"><img src="immagini/olimpo.jpg" alt="Vai al forum dell'Olimpo Informatico" /></a></li>
<li><a href="http://www.beppegrillo.it/"><img src="immagini/beppe.jpg" alt="Vai al blog di Beppe Grillo" /></a></li>
<li><a href="http://www.imperium-romanum.it/"><img src="immagini/forrom.gif" alt="Vai al sito dell'Imperium Romanum" /></a></li>
</ul>
</div> |
non limitarti a copiare quel che ti scrivo, ma leggi i post e le spiegazioni per favore! |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 13:17 Oggetto: |
|
|
le spiegazioni le leggo.....il codice lo capisco.....  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 13:24 Oggetto: |
|
|
Wolverine ha scritto: | cioè?  |
sic!
vabbe', andiamo avanti
ora il template e' pronto e gia' hai anche il file index: mossa successiva e' creare gli altri files
prendi il template e salvalo con gli altri nomi seguendo l'impostazione data qui:
Codice: |
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="chi_sono.html">Chi sono</a></li>
<li><a href="articoli.html">Articoli</a></li>
<li><a href="giochi.html">Giochi</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="link.html">Link utili</a></li>
</ul>
</div> |
creali anche se ancora non hai contenuti
all'interno della cartellina principale creati anche una cartellina "download" dove salverai i files della sezione download
vado a scolare il riso o oggi non si mangia
ci sentiamo dopo |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 04 Lug 2006 13:30 Oggetto: |
|
|
rebelia ha scritto: | Wolverine ha scritto: | cioè?  |
sic!
vabbe', andiamo avanti
|
il caldo incomincia a darti alla testa
hai saltato qualche mex della pagina precedente...  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 14:05 Oggetto: |
|
|
edit |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 14:08 Oggetto: |
|
|
Wolverine ha scritto: | Footer:inseriro le solite scritte della serie"sito senza scopi di lucro" e poi i vari banner.... |
ok inserisci nel template e nel file index.html come segue:
Codice: |
<div id="footer">
<p>bla bla bla</p>
<ul>
[la parte dei banner]
</ul>
</div>
|
ho dimenticato null'altro, mr wolverine?  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 14:44 Oggetto: |
|
|
ok, torniamo alle pagine
tra quelle gia' pronte hai la sezione di download, percio' procediamo con quella
le voci attualmente presenti sono:
- PAC MAN
- MUTANT SPIDER
- ANTICITY
- BRUCIA FORMICHE
- LABIRINTO
apri il template e salvalo come download.html; il codice che devi inserire nella parte centrale e' questo:
Codice: |
<div id="contenuto">
<p> [testo che vuoi inserire a presentazione] </p>
<ol>
<li><a href="download/pacman.zip" title="Scarica lo zip di Pac-Man">Pac-man</a> - file in formato zip da 240kb</li>
<li><a href="download/mutant_xpiders.zip" title="Scarica lo zip di Mutant Spider">Mutant Spider</a> - file in formato zip da 174kb</li>
<li><a href="download/antcity.zip" title="Scarica lo zip di Antcity">Antcity</a> - file in formato zip da 754kb</li>
<li><a href="download/brucialetutte.zip" title="Scarica lo zip di Brucia formiche">Brucia formiche</a> - file in formato zip da 322kb</li>
<li><a href="download/labirinto.zip" title="Scarica lo zip di Labirinto">Labirinto</a> - file in formato zip da 864kb</li>
</ol>
</div>
|
e anche la pagina download e' completata  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 14:48 Oggetto: |
|
|
pagina chi sono:
solito file template.html
solito salvataggio con altro nome (in questo caso chi_sono.html)
e solita modifica al div contenuto:
Codice: |
<div id="contenuto">
<p>Probabilmente vorreste sapere il mio nome.Ma si...visto che avete visitato il mio sito ve lo devo. Mi chiamo Gabriele. Nome da Webmaster:Qvirites. Ho aperto questo sito per poche e semplici ragioni:</p>
<ol>
<li>Non sapevo che fare</li>
<li>Non sapevo come buttare via il mio tempo</li>
<li>Per quanto scriva male mi piace scrivere</li>
<li>Voglio far conoscere al mondo le mie idee e quelle di chi mi appoggia nella costruzione di questo sito.</li>
</ol>
<p>Queste sono le banali ragioni che mi hanno portato a pacioccare con il codice HTML e, tra un errore e l'altro, a creare questa sottospecie di sito.</p>
<p>Cosa fa precisamente questo sito? Quale sarebbe la sua funzione?
Eh!... bella domanda! Sinceramente parlando:non lo so neanche io. Ho le idee confuse? No. Le idee le ho chiare, il punto è che il sito non rientra in una determinata categoria. Diciamo che è un mix... avreste mai pensato di unire articoli riguardanti politica e attualità a sezioni dedicate ai giochi?!Solo un pazzo lo farebbe.... ed ecco perchè l'ho fatto! Sono pazzo! Comunque, sarebbe complicato spiegarvi tutto adesso (anche perchè non so scrivere un gran chè) e inoltre vi ho rubato fin troppo tempo con queste quattro righe. Dunque, se avete intenzione di conoscere a fondo il mio "regno", visitate interamente il sito, qualche cosa di utile lo roverete!</p>
<p>Buona navigazione!!</p>
<p>Gabriele (Qvirites)</p>
</div>
|
L'ultima modifica di rebelia il 04 Lug 2006 15:09, modificato 2 volte |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 14:51 Oggetto: |
|
|
appena sei arrivato fin qua e mi confermi che non ci sono problemi (nel caso ci fermiamo e torniamo sulle parti poco chiare), passiamo alla formattazione per rendere il tuo sito un po' piu' come piace a te
primo passo, trasformare le liste da verticali a orizzontali  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 15:55 Oggetto: |
|
|
beh, visto che ho qualche minuto, procedo a rendere orizzontali i due menu
apri il file stile.css e aggiungi alcuni parametri al div #menu come segue:
Codice: |
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
|
che tradotto vuol dire:
- list-style: none; -> non mettere alcun simbolo prima della voce
- margin: 0px; -> non mettere alcun margin all'elemento
- padding: 0px; -> non mettere alcun padding all'elemento
- display: inline; -> questo elemento - che di solito manda a capo l'elemento successivo - fallo diventare "in linea" cioe' fai in modo che *non* mandi a capo l'elemento successivo (spiegazione MOLTO a spannoni, ma per ora e' sufficiente)
la stessa cosa e' da scrivere per l'elenco del footer, quello con i bannerini:
Codice: |
#footer {
}
#footer ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#footer ul li {
display: inline;
margin: 0px;
padding: 0px;
}
|
con l'occasione, ho aggiunto anche #footer { } che facilmente mi servira' piu' avanti
riepilogo: a questo punto il css sara' piu' o meno cosi':
Codice: |
body {
background: white;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
text-align: center;
}
hr {
display: none;
}
img {
border: 0px;
}
#contenitore {
width: 750px;
border: 1px solid navy;
margin: 10px auto 10px auto;
padding: 0px;
}
#header {
border-bottom: 1px solid navy;
}
#menu {
border-bottom: 1px solid navy;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
#contenuto {
padding: 10px;
text-align: left;
border-bottom: 1px solid navy;
}
#footer {
}
#footer ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#footer ul li {
display: inline;
margin: 0px;
padding: 0px;
}
|
L'ultima modifica di rebelia il 27 Ago 2006 10:21, modificato 1 volta |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 04 Lug 2006 16:38 Oggetto: |
|
|
se tutto finora e' andato a buon fine, cliccando sulle pagine il browser dovrebbe visualizzare qualcosa di simile:
(in versione piu' grande, naturalmente: quest'immagine e' ridotta del 50%)
nota: al momento i link sono appiccicati l'uno all'altro, ma provvederemo a staccarli al piu' presto
***
e ora passiamo a qualcosa di piu' divertente: i colori
appena ti sei portato in pari con il codice, ti consiglio di pacioccare un po' con questo strumento fino a quando trovi la combinazione che ti ispira, mi posti lo screenshot (non e' possibile postare il link) oppure anche solo i codici colore che trovi nell'area contrassegnata dal cerchio rosso:
altra cosa da decidere: come intendi impostare l'intestazione? vuoi inserirci un'immagine tipo quella di zn oppure preferisci lasciare il testo cosi' com'e'? |
|
Top |
|
 |
Wolverine Dio minore


Registrato: 27/07/05 10:56 Messaggi: 817 Residenza: Tamen-ni-gru
|
Inviato: 07 Lug 2006 19:35 Oggetto: |
|
|
scusa se posto dsolo adesso è solo che ultimamente sono un po' incasinato...cmq,per quel che riguarda l'aspetto...pensavo aun colore come questo
lo inserisco nel codice body gusto?  |
|
Top |
|
 |
rebelia Dio maturo


Registrato: 17/07/03 09:22 Messaggi: 7987
|
Inviato: 07 Lug 2006 19:41 Oggetto: |
|
|
dipende cosa vuoi farne
se quel che ti interessa e' che diventi lo sfondo allora si; nel file stile.css scriverai:
Codice: |
body {
background: #BFFFF9;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
text-align: center;
}
|
(te l'ho staccato dal resto per evidenziarlo)
anziche' il background: white; che c'era prima
aggiungerei quest'ultimo al div contenitore, in questo modo:
Codice: |
#contenitore {
background: #fff;
width: 750px;
border: 1px solid navy;
margin: 10px auto 10px auto;
padding: 0px;
}
|
(#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)
altra domanda:
rebelia ha scritto: | come intendi impostare l'intestazione? vuoi inserirci un'immagine tipo quella di zn oppure preferisci lasciare il testo cosi' com'e'? |
L'ultima modifica di rebelia il 07 Lug 2006 20:01, modificato 1 volta |
|
Top |
|
 |
|