Dalla precedente lezione abbiamo iniziato a lavorare con la pagina
frame esempio3, vorrei continuare su questa e portarla a
termine realizzando un vero sito web.
La struttura con frame più classica sarebbe l'esempio1, andiamo
comunque avanti con l'esempio3 che ha in più la quarta finestra in
basso in confronto all'esempio1, vi spiego poi come eliminare il
quarto frame se non vogliamo averlo fra i piedi.
La trattazione di questo capitolo e abbastanza lungo e verrà
ripartito in più parti, procedete con calma e senza fretta, al
termine avrete realizzato un sito completo in ogni parte.
Prima di realizzare un sito si dovrebbe partire da un idea su cosa
basare il sito. Fare un sito che parli di noi non serve praticamente a
nulla, a nessuno interessa che studi avete fatto, cosa mangiate o
bevete e quali sono i vostri hobby.
Se fate un sito dovete interessare i visitatori, se la materia
trattata non e interessante, chi viene per la prima volta in seguito
non verrà più a visitarvi.
Un buon punto di partenza per trovare un idea vincente e quella di
basare il sito sul vostro Hobby, non specificare che hobby vi
interessa ma trattare quell'hobby professionalmente, facciamo alcuni
esempi:
Al di fuori del computer, il vostro hobby e la pesca, la caccia, la
cucina, gli acquari, la meccanica, lo sport? Prendete la vostra
materia preferita di cui sicuramente conoscete vari aspetti tecnici e
basiamo il sito su questa materia.
Al momento stiamo ancora studiando la parte tecnica e quindi sarebbe
affrettato fare questo discorso, visto però che realizzeremo un sito
completo, fatevi almeno un'idea su cosa volete realizzare, sopratutto
per dare un titolo al sito, che dovremmo inserire nelle nostre pagine.
Prendiamo un argomento di esempio per realizzare il sito, facciamo un
giornale, e intitoliamo il nostro giornale NotizieIT.
La prima cosa da fare e nominare tutte le pagine del frame con
l'intestazione NotizieIT, se avete già trovato un nome per il vostro
sito mettete il vostro, cosi non dovrete modificarlo in seguito
Per quanto riguarda la pagina index.htm abbiamo visto come
intestarlo nella precedente lezione, dove vi dicevo di modificare la
voce Nuova pagina 1
con il nome del vostro sito,
se non lo avete fatto andate a rileggere la lezione 26, aprite
index.htm con il Blocco note e modificatelo. Per le altre pagine
basterà aprire le pagine e cliccare su di essa con il pulsante destro
del mouse, selezionando Proprietà pagina, nella finestra che
compare eliminate VolontariWEB.com e inserite il titolo che avete
scelto, noi faremo riferimento a NotizieIT
Dopo aver eliminato la voce e
inserito il vero titolo, nell'anteprima di Internet Explorer dovremmo
leggere il nostro titolo come qui sotto NotizieIT
Può sembrare una sciocchezza ma
questa voce sarà presto inserita nei motori di ricerca e avere Nuova
Pagina a chi sta cercando la materia che trattate non e molto utile.
Dopo aver rinominato tutte le pagine nell'intestazione, andiamo avanti
nel nostro progetto.
Iniziamo dalla barra superiore, con FrontPage Express apriamo la
pagina barra.htm e immediatamente andiamo a impostare il colore
bianco allo sfondo della pagina che altrimenti vedremmo in
grigio.
Abbiamo detto che la barra superiore conterrà il titolo del sito a
sinistra e a destra un banner pubblicitario. Iniziamo a parlare del
banner pubblicitario, questo e molto importante per un sito che si
vuol far conoscere, e quindi bene aderire a qualche scambio banner.
Aderire ad uno scambio banner significa che per ogni banner che viene
mostrato sul nostro sito, un nostro banner verrà mostrato in altri
siti che partecipano allo scambio, in pratica uno scambio di favori,
tu fai pubblicità a me e io lo faccio a te.
Cosa si intende per banner?
Un banner non e altro che un immagine GIF o JPG dove e inserito un testo che
pubblicizzi il nostro sito, visto che il nostro sito tratta di
notizie, inseriremo nel banner il titolo e cosa contiene il nostro sito.
Andiamo quindi a realizzare un banner. La lezione per come si realizza
immagini e banner é già stato trattato, vedi dalla lezione 14 alla
19.
In questo caso dobbiamo realizzare un banner dalle dimensioni di 468x60,
dovete quindi impostare tale misura al posto di 120x60 indicato nelle
precedenti lezioni.
Riassumiamo, aprite il Paint di windows, dal menu Immagini -
Attributi inseriamo la misura 468 e 60, la finestra bianca si
restringe alla dimensione impostata, inseriamo quindi il testo nel
riquadro e salviamo l'immagine con nome banner468.bmp, convertiamolo
in GIF con ThumbsPlus ed ecco pronto il nostro banner pubblicitario
Oddio, il banner qui sopra non e un
granché, ma va bene per farsi un idea.
Utilizzeremo questo banner per aderire ad uno scambio banner, per il
momento non aderite a nessun scambio banner, finiamo prima il sito,
vado comunque a descrivervi l'inserimento dello scambio banner dal
circuito di Aiutamici.com
Metropoli.
In qualsiasi circuito di scambio banner bisogna prima registrarsi e
inserire i dati del nostro sito, indirizzo web, descrizione del
contenuto, indirizzo e-mail, ecc. Alla fine bisogna copiare il codice
dello scambio banner da inserire nel nostro sito. Posizionate quindi
la freccia del mouse all'inizio del codice, cliccate il pulsante
sinistro e tenendolo premuto selezionate tutto il codice interessato,
la selezione verrà mostrato in nero con testo invertito in bianco
come nell'esempio qui sotto.
Se volete provare a inserire il
codice banner selezionate il codice in azzurro qui sotto, e il codice
del sito VolontariWEB che partecipa al circuito Metropoli, poi lo
eliminerete, intanto fate un po' di pratica.
<!------- Aiutamici Metropoli Code ------------->
<script language="JavaScript"> var code = '';
var now = new Date();
var nIndex = now.getTime();
document.write('<s' + 'cript src="http://www.aiutamici.com/adv/aiutamiciadv468.asp?ID=133&nocache=' + nIndex + '">');
document.write('</' + 's' + 'cript>');
</script>
<script language="JavaScript">document.write(code);</script>
<!--------- Fine Aiutamici Metropoli Code --------------->
Dopo la selezione premete i stasti CTRL+C
per copiare il codice selezionato in memoria.
Torniamo quindi su FrontPage Express per inserire il codice banner
appena copiato, si presenterà la pagina in questa forma, con la
tabella ristretta al contenuto del testo, dobbiamo quindi eliminare il
testo spazio dedicato al banner 468x60, e al suo posto inserire
un TAG HTML
Per inserire il TAG HTML andiamo al
menu Inserisci - Tag HTML
e incolliamo nella finestra il codice
che abbiamo copiato premendo la combinazione di tasti CTRL+V
diamo OK e dove prima era presente il
testo compare un quadratino giallo
Salviamo la pagina e andiamo ad
aggiornare la pagina index.htm
vedremmo quindi il circuito banner
inserito nel nostro sito, ma notiamo un piccolo problema, il circuito
banner di Metropoli, sotto al normale banner fa comparire una striscia
gialla dove indica il servizio di scambio banner, qui non si vede
perfettamente. Dobbiamo quindi intervenire sull'altezza del frame, le
scelte sono due, o restringiamo la barra per nascondere la fascia
gialla, oppure la allarghiamo per mostrarla completamente. Conoscendo
il circuito banner Metropoli so che la fascetta gialla e alta 10 pixel
più 60 pixel del banner, l'altezza del frame per contenere il
circuito deve essere alto 70 pixel.
Andiamo quindi ad aprire la pagina index.htm con il Blocco
note e impostiamo 70 al posto di 64 pixel.
<frameset framespacing="0"
border="0" rows="70,*,30"
frameborder="0">
<frame name="superiore" scrolling="no" noresize target="sommario" src="barra.htm">
<frameset cols="150,*">
<frame name="sommario" target="principale" src="menu.htm">
<frame name="principale" src="home.htm" target="_self" scrolling="auto">
</frameset>
<frame name="inferiore" scrolling="no" noresize target="sommario" src="barrasotto.htm">
<noframes>
<body>
salviamo la modifica e torniamo a controllare l'aspetto della pagina,
ed ecco che il banner compare per intero
Abbiamo cosi impostato il nostro
scambio banner.
Continua nella
lezione successiva
|
Torna
alla
