Aprire voce di un Menu all'interno di un Frame sulla stessa Pagina

Printable View

22-10-2013, 12.22.12

Aprire voce di un Menu all'interno di un Frame sulla stessa Pagina

Salve a tutti! Mi sto cimentando nella creazione di un sito provvisorio per l'azienda per la quale lavoro. Ho superato molti problemi consultando questo forum, ma per questo non riesco proprio a trovare una risposta soddisfacente. Vi espongo il problema..

Ho creato la pagina home divisa in 3 frame; logo, il frame in alto in cui è presente il logo dell'azienda; menu, sulla sinistra con le varie voci e contenuti, il frame più grosso, sulla destra, in cui vorrei far comparire appunto i contenuti delle varie voci del menu. Ho letto che bisogna nominare i frame ed usare un particolare codice in cui inserire come 'target' il nome dei frame, ma pur avendo fatto le operazioni consigliate, non funziona.. Ho forse sbagliato a nominare i frame? utilizzando CSS ho dichiarato i vari nomi e dimensioni tra i tag <style></style>.

Potete aiutarmi in qualche modo?
grazie in anticipo,
Matteo
22-10-2013, 17.13.20
Taitaonline

Praticamente tenere sempre fissi il DIV "logo" e il DIV "menù" e poi andare a variare il DIV "contenuti" a seconda del link associato, giusto ?

Hai pensato all'include tramite PHP ?

Se ti stai scrivendo il codice a manina tramite il pannello di controllo, posso darti una mano... ma se stai utilizzando un qualsiasi editor mi sa che io non sono in grado o perlomeno, posso darti due dritte ma non certo dirti 'dove' e 'come' andare a toccare il codice. :mrgreen:

P.S.) Un consiglio a priori però te lo posso dare: lo stile mettilo tutto dentro a un foglio CSS esterno che poi richiamerai in tutte le pagine, altrimenti come vari qualcosa, poi ti toccherà andare nel codice di ogni pagina per fare la stessa cosa ... Finchè le pagine son due o tre poco male ma se cominciano ad essere decine diventa un delirio. :roll:
23-10-2013, 09.17.45

Purtroppo non so cosa sia l'Include! Conosco un po' il linguaggio HTML e CSS, ma PHP non so proprio. Comunque sì, sto scrivendo il codice da zero di mio pugno.

<style type="text/css">

body {
margin: 0 auto;
width:1000px
}

#logo{
float: center;
width: 1000px;
}

#menu{
float: left;
width: 300px;
}

#contenuti{
float: right;
width: 700px;
}

</style>

Ho impostato così la divisione della pagina, e vorrei che i link presenti in 'Menu' si aprissero nella medesima pagina, dentro 'Contenuti'. Non riesco però a trovare il modo :cry:
23-10-2013, 13.59.18
Taitaonline

Si, si, ho capito ... Ed è più semplice a farsi che a dirsi : sempre ammesso che tu ti possa accontentare di un sito senza tanti fronzoli, ecco. Tu vorresti una cosa tipo quella che ho io nel mio vecchio sitarello (se clicchi il link che ho in firma lo vedi, ma non è obbligatorio) ... Io ho il menù a destra ma la sostanza è quella.
Di PHP non ne capisco nulla neppure io ma la 'funzione' Include è semplicissima e non comporta nulla se non un semplice "copia-incolla" sulle varie pagine.

Vediamo se riusciamo a farlo passo-passo ?

Intanto potremo sistemare i CSS in un foglio esterno, così da non dovere poi essere obbligati a metter mano a tutte le pagine se per caso dovessi cambiarti un colore di sfondo o qualche parametro dei tre DIV.
Per farlo ti basta aprire una nuova pagina, inserirci dentro tutto il codice che ora hai all'interno della pagina ricopiandolo pari-pari e poi salvare quella pagina nominandola come pare a te con estensione .css ... chessò... oroitaliano.css ? ... Una volta fatto questo, tra i TAG <head> ed </head> di ogni pagina che andrai a creare (compresa ovviamente l'attuale pagina index) dovrai inserirci questo codicillo qui :

Codice:

<link href="../oroitaliano.css" type="text/css" rel="stylesheet">

Finito ! Ora hai il tuo foglio di stile esterno che potrai utilizzare per aggiungere qualsiasi cosa tu voglia in tutte le tue pagine.

Il secondo passo per arrivare alla tua richiesta, sarà rinominare la tua pagina index ... Immagino che ora tu abbia un'unica pagina chiamata index.html giusto ? Quella pagina occorre rinominarla in index.php; non cambierà nulla, tranquillo: questo cambio di estensione farà in modo che possa essere letto l'eventuale codice php che si andrà ad inserire all'interno della pagina.

Se fatto tutto questo, la pagina ti funziona regolarmente andiamo avanti, altrimenti 'ripariamo i danni' ... :wink:

...Lo so che magari ti rompi gli zebedei a leggere tutte queste pappardelle, e sicuramente io farei pure prima a scriverti qua direttamente il codice che devi usare... Ma poi ?
Io sono un vecchiaccio che odia la 'pappa pronta' e che magari conosco poche cose, ma quelle poche "so anche perchè bisogna farle" ... E credo che questo sistema sia utile soprattutto quando magari ci si trova a dover risolvere un problema senza nessuno che ti dica cosa fare. :mrgreen:
24-10-2013, 12.07.04

io sono abbastanza giovine, ma odio la pappa pronta. difatti piuttosto che usare un editor per siti, ho preferito studiarmi passo passo l'html e creare un codice mio, quindi sfondi una porta aperta!

il sito l'ho rattoppato con la creazione di un iframe su cui redirectare le voci del menu e funziona, tuttavia il metodo che mi stai proponendo mi sembra funzionale. ho fatto in remoto ( si dice così? ) e il tutto funziona, quindi se hai voglia di proseguire nella spiegazione ti ringrazio :D
24-10-2013, 14.22.41
Taitaonline

Yesss...
Tecnicamente anche con gli Iframe puoi ottenere quello che vuoi ma, anche se magari in questo caso la cosa potrebbe non interessarti, sappi che con gli Iframe ti giochi buona parte di visibilità del sito... Nel senso (spiego meglio) il sito si vedrà normalmente, ma saranno i motori di ricerca ad avere problemi nel trovarlo: a questi ultimi, gli Iframe non piacciono proprio; in ogni caso queste sono questioni di altra natura, come la validazione del sito ecc... ecc... Se poi, da quanto hai scritto nel tuo primo messaggio, questo dovrà essere un sito "provvisorio" (o di prova), ecco che molte cose, in questo caso, si possono anche tralasciare. :roll:

Hai anche fatto bene a farti tutte le prove in remoto, stupido io che magari non te l'ho consigliato subito, sorry.

Ordunque, proseguiamo:

Terzo passo : andiamo a crearci le pagine per i due DIV che dovranno rimanere identici durante la navigazione; semplicissimo anche in questo caso.
Ci creiamo due pagine in TXT, una la chiameremo "logo.txt" e l'altra "menulaterale.txt" (poi le potrai chiamare come meglio credi, ma per ora utilizziamo quei nomi che sono abbastanza intuitivi) ... Dentro a logo.txt andrai a ricopiare il codice che hai usato nella tua Index all'interno del DIV logo, dentro a menulaterale.txt invece ricopierai i link che hai inserito nel tuo DIV menu.
Fatto questo dovresti vedere la tua pagina Index praticamente vuota sia nella parte alta che nella parte di sinistra e visualizzare solo il DIV dei contenuti.

Quarto passo : tutto il "famigerato" PHP che ci occorre sono due righe di codice :

Codice:

<?php include("_logo.txt"); ?> la prima e: <?php include("_menulaterale.txt"); ?> la seconda

Codice che andremo ad inserire all'interno dei due DIV (logo e menu) della pagina Index.
Cosa fa ? Quella righetta in PHP non fa altro che dire al browser di andarsi a leggere il contenuto del DIV nelle paginette TXT che abbiamo appena creato, nulla di più, nulla di meno... In sostanza non cambia nulla, ma in pratica, se tu avessi un sito con 20/30 pagine (o più) e dovessi cambiare/aggiungere/togliere un link dal menù laterale, ecco che andando a variare i contenuti della pagina in TXT, automaticamente vari i contenuti di tutte le pagine del sito, senza dover ripetere la stessa cosa 20 o 30 volte.

In pratica, il tuo DIV del menù, nelle pagine dovrebbe risulare scritto così:

Codice:

<div id="menu"> <?php include("_menulaterale.txt"); ?> </div>

e quello del logo uguale.

Fatte queste operazioni, se tutto funziona, puoi tranquillamente crearti tutte le pagine che vuoi: per sveltire la cosa (senza riscriverti da zero il codice ogni volta) puoi benissimo aprirti a pannello la pagina Index, salvarla con un nome differente (se lavori direttamente dal pannello la pagina Index non verrà sovrascritta... credo ci sia pure scritto) e poi andare a variare il contenuto del DIV contenuti, senza andare a toccare altro.
Creata la nuova pagina di basterà rientrale nella pagina menu.txt e inserire il link che punta a questa nuova pagina ... E così di seguito per tutte le altre pagine che vorrai inserire. :mrgreen:
24-10-2013, 15.07.40
alemoppo
Il tutto è giustissimo.

Mi permetto soltanto di "migliorare" ulteriormente la questione (anche soltanto per imparare, magari non implementandolo mai: trovare un utente che non vuole la pappa pronta non capita più molto spesso).

La "soluzione" che propongo è questa: creare un file html unico (es. un template vuoto) e cambiare solo il contenuto a seconda della pagina da visualizzare. Mi spiego meglio: prendiamo come riferimento il sorgente attuale di oroitaliano:

Codice HTML:

<head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?> <title>Oro Italiano - Strenne Natalizie</title> <style type="text/css"> body { margin: 0 auto; width:1000px } #logo{ float: center; width: 1000px; } #menu{ float: left; width: 200px; } #contenuti{ float: right; width: 800px; } </style> </head> <body> <body bgcolor="black"> <div id="boxbig"> <div id="logo"> <p align"center"><img src="http://oroitaliano.altervista.org/immagini/headlogo.jpg"></p> </div> <div id="menu"> <br><br><br> <a href="http://oroitaliano.altervista.org/informazioni.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottoneinformazioni.jpg"></a> <br> <a href="http://oroitaliano.altervista.org/prodotti.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottonelistaprodotti.jpg"></a> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonefaiiltuoordine.jpg"> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonecontattaci.jpg"> </div> <div id="contenuti"> <iframe src="http://oroitaliano.altervista.org/immagini/infoprimapagina.jpg" name="contenuti" width="800" height="400" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0"></iframe> </div> </div> </body> </html>

Attualmente, ogni pagina contiene lo stesso identico codice, e varia soltanto la parte del contenuto. Quindi si può sfruttare questa cosa in questo modo:

Codice PHP:

<head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?> <title>Oro Italiano - Strenne Natalizie</title> <style type="text/css"> body { margin: 0 auto; width:1000px } #logo{ float: center; width: 1000px; } #menu{ float: left; width: 200px; } #contenuti{ float: right; width: 800px; } </style> </head> <body> <body bgcolor="black"> <div id="boxbig"> <div id="logo"> <p align"center"><img src="http://oroitaliano.altervista.org/immagini/headlogo.jpg"></p> </div> <div id="menu"> <br><br><br> <a href="http://oroitaliano.altervista.org/informazioni.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottoneinformazioni.jpg"></a> <br> <a href="http://oroitaliano.altervista.org/prodotti.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottonelistaprodotti.jpg"></a> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonefaiiltuoordine.jpg"> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonecontattaci.jpg"> </div> <div id="contenuti"> <?php include("pagina.html"); //nota: può essere pagina.php, pagina.txt, pagina.htm...... L'importante è che sia un testo ?> </div> </div> </body> </html>

In questo modo, verrebbe da pensare di fare pagine identiche a questa, modificando soltanto il nome della pagina da includere... Ma non sarebbe molto saggio! Perché riscrivere ogni volta lo stesso codice inutilmente?

La soluzione "finale" è quella di fare un'unica pagina, e includere la pagina dinamicamente tramite un parametro GET passato nell'url (è più o meno così che funzionano i siti pseudo-seri).

Codice PHP:

<head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1?> <title>Oro Italiano - Strenne Natalizie</title> <style type="text/css"> body { margin: 0 auto; width:1000px } #logo{ float: center; width: 1000px; } #menu{ float: left; width: 200px; } #contenuti{ float: right; width: 800px; } </style> </head> <body> <body bgcolor="black"> <div id="boxbig"> <div id="logo"> <p align"center"><img src="http://oroitaliano.altervista.org/immagini/headlogo.jpg"></p> </div> <div id="menu"> <br><br><br> <a href="http://oroitaliano.altervista.org/informazioni.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottoneinformazioni.jpg"></a> <br> <a href="http://oroitaliano.altervista.org/prodotti.html" target="contenuti"><img src="http://oroitaliano.altervista.org/immagini/bottonelistaprodotti.jpg"></a> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonefaiiltuoordine.jpg"> <br> <img src="http://oroitaliano.altervista.org/immagini/bottonecontattaci.jpg"> </div> <div id="contenuti"> <?php if(isset($_GET['pagina']) && file_exists($_GET['pagina'].'.html')) include($_GET['pagina'].'.html'); else include('home.html'); ?> </div> </div> </body> </html>

So benissimo che il pezzo

Codice PHP:

<?php if(isset($_GET['pagina']) && file_exists($_GET['pagina'].'.html')) include($_GET['pagina'].'.html'); else include('home.html'); ?>

può apparire arabo, ma non è così!

Mettiamo caso che questa pagina si chiami "index.php". Richiamandola in questo modo: "index.php?pagina=informazioni", la variabile $_GET['pagina'] avrà valore "informazioni".

Codice PHP:

if(isset($_GET['pagina']) && file_exists($_GET['pagina'].'.html'))

Questa riga controlla se esiste un parametro inviato nella pagina: isset($_GET['pagina']) ritorna vero se, appunto, esiste $_GET['pagina'], mentre file_exists($_GET['pagina'].'.html') controlla se esiste il file chiamato $_GET['pagina'].html. Nel nostro caso, "informazioni.html".
Se entrambe le condizioni sono vere, lo script includerà include($_GET['pagina'].'.html');, quindi "informazioni.html". Altrimenti, includerà una pagina predefinita (home.html).

Perché è meglio utilizzare questo "metodo"?
Prima di tutto, c'é meno codice ripetuto (anzi, direi quasi nessuno). Inoltre, se si vuol modificare un attimo la struttura della pagina, è sufficiente farlo nell'unica pagina, invece di andare a modificare tutti i file con il codice identico. Infine, con poche modifiche, è possibile salvare il contenuto non in file, ma nel database, rendendo la struttura del sito più pulita.

----------
Esempio:
In questo stesso forum, se guardate l'URL, notate un numero dopo la sezione:

Codice:

http://forum.it.altervista.org/html-xhtml-e-css/195795-più testo

Ora non ha molto senso spiegare in dettaglio come funziona, ma corrisponde circa a:

Codice:

http://forum.it.altervista.org/html-xhtml-e-css/?index.php?parametro=195795

In questo modo, leggendo $_GET['parametro'], il forum può capire il numero della discussione che stiamo leggendo. Il carattere "?" non si visualizza perché è stato nascosto grazie alle rewrite-url da htaccess (questo è tutto un altro discorso: cercando anche in questo forum si troveranno info su questo argomento).
----------

In un post so benissimo che non è possibile spiegare decentemente questa cosa, anche se semplice. Linko una discussione che aveva un problema simile.

Ovviamente, se non sono stato chiaro (come penso), fai pure sapere!

EDIT: dimenticavo: il codice html che stai utilizzando (nel tuo sito) è abbastanza obsoleto (e ci sono anche degli errori). Brevemente:
- manca l'apertura <html>
- Proprietà come
  
  Codice HTML:
  
  bgcolor="black"
  
  non sono più compito dell'html, ma del css che si occupa, appunto, dello stile. L'html deve definire soltanto la struttura della pagina.
- alcuni errorini del tipo
  
  Codice HTML:
  
  align"center"
- Per spaziare gli elementi, utilizza la proprietà margin di css, e non una cosa come:
  
  Codice HTML:
  
  <br><br><br>
  
  Il tag <br> serve per mandare a capo il testo, e non per distanziare elementi nella pagina!
- hai 2 tag <body>! In una pagina html dovrebbe essere unico!
In generale, aiuta molto utilizzare il validatore HTML. Non dico che bisogna aver 0 errori, ma è uno strumento utile per scovare degli errori.

Ciao!
25-10-2013, 13.10.42
Taitaonline

Uhmmm... Il criterio credo di averlo capito, però mi perdo sulla pratica (ignoranza mia).

In pratica, tramite il GET si potrebbe avere (esempio mio così mi capisco) diciamo una Index.php con tutta l'intestazione necessaria al funzionamento della stessa (tipo di html utilizzato, body, meta, link al css, ecc. ecc.), per poi andare a variare i "contenuti" che saranno scritti in altre pagine MA, senza tutte quelle info ?

Se fino a qui ho supposto giusto, dove mi perdo io è ... 'come' ...
Ok, quella stringa in PHP mi richiama una pagina ben precisa, ma se io ho dieci o venti pagine differenti... Non credo possa ripetere quel codice 20 volte sempre nella stessa Index variandone solo il nome della pagina ... :roll:
...o mi sfugge qualcosa ? (conoscendomi propendo per questa ultima ipotesi) :mrgreen:

P.S.) Questa cosa non centra nulla con la discussione in corso, però, sbaglio io, oppure c'è qualche problemino col pannello di risposta ? (non riconosce alcuni parametri come il "Bold" e l' "Italic") ...
25-10-2013, 13.31.21
alemoppo

Citazione:

Originalmente inviato da Taitaonline

Non credo possa ripetere quel codice 20 volte sempre nella stessa Index variandone solo il nome della pagina ... :roll:

No infatti, più che altro non ha senso!

In pratica invece di fare 20 pagine differenti (che non ha alcun senso) con:

Codice PHP:

<codice html: head, meta, body...> <?php include("pagina1"); ?> </codice html>

Codice PHP:

<codice html: head, meta, body...> <?php include("pagina2"); ?> </codice html>

Codice:

<codice html: head, meta, body...> <?php include("paginaN"); ?> </codice html>

Si fa un'unica pagina del tipo:

Codice:

<codice html: head, meta, body...> <?php include("pagina".$_GET['numero']); ?> </codice html>

e $_GET['numero'] verrà sostituito (automaticamente, da PHP) con <numero> prelevato da: nomesito.altervist.org/index.php?numero=N

In questo modo, se vuoi modificare il layout di TUTTE le pagine, non devi impazzire a modificare 20 pagine, ma solo la pagina "index.php".

----

Citazione:

Originalmente inviato da Taitaonline

P.S.) Questa cosa non centra nulla con la discussione in corso, però, sbaglio io, oppure c'è qualche problemino col pannello di risposta ? (non riconosce alcuni parametri come il "Bold" e l' "Italic") ...

Sìsì, è un problema già "segnalato" :wink:

Ciao!