suggerimenti per capire come strutturare una pagina (/sito)

[webmasterone]

Dovuta premessa.

Mi diletto da sempre a costruire pagine web amatoriali
Sono un utente fai da te

E (purtroppo!!) sono sempre rimasto legato alla vecchia maniera di fare siti (html e tabelle)

ho infatti cominciato con l' ASP e sono poi passato definitivamente al PHP.

ho appena preso uno spazio e sto per spostare le mie paginette (fatte in php) sul nuovo spazio
(qui potete vedere di cosa si tratta. Sono proprio due pagine in croce, per ora parcheggiate sul mio spazio web: http://www.webmasterone.it/wm1/om/)

con l'occasione del nuovo spazio, ho deciso di "imparare" a usare i css e abbandonare il vecchio sistema (Html + tabelle) e quindi ho cominciato a leggere e studiare le varie guide sui CSS

si lo so, ci vorrà del tempo, ma se non comincio mai, non cambierò mai...


ma veniamo alla domanda che mi preme, a cui non riesco a trovare una soluzione

pensavo di realizzare una pagine a colonna singola con header, sotto al quale mettere (in orizzontale) il menù, sotto al qual e mettere il contenuto, e sotto al quale (infine) mettere il footer

quindi una classica struttura del tipo:

<div id="container">
        <div id="header"></div>
        <div id="navigation"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>

ma veniamo alla mia domanda

a oggi avrei realizzato tre frame, quello superiore e inferiore contenenti l'header e il footer, e quello centrale contenente di volta in volta quello che mi serve

tenete presente che le mie pagine contengono soprattutto form

come gestisco ora tutto questo con i div ?

se clicco su un menù devo caricare il contenunto non i un frame ma in un div

il contenuto del div (id="content") è un form. quando premo il tasto invio come faccio a elaborare i dati e caricarli nel div senza ricaricare il resto ?

ho cercato un po' in rete e le soluzioni che ho trovato sono in Ajax

ad esempio questa per caricare il contenuto nel DIV a seconda del menù scelto:

    <script  type="text/javascript">
        $("#navigation ul li").click(function() {
            var param =  $(this).attr("id");
            if (param == "index") {
                goto_url = param + ".php"
                window.location.href = goto_url;        
            }else if (param == "#") {                    
            }else{
                $.ajax({  
                    type: "GET", 
                    url: param + ".php", 
                    success: function(response) {
                        $("#content").html(response);                
                    } 
                });
            }
        })
    </script>

o questa , da implementare nella pagina del form (caricata dentro al DIV), da legare al bottone per catturare i campi e , elaborare il codice e generare la risposta da rimettere nel div

$(document).ready(function() {
    $("#bottone").click(function() {
    var testo = $("#testo").val();
        $.ajax({  
            type: "POST", 
            url: "modulo.php", 
            data: "testo=" + testo,      
            dataType: "html",
            success: function(response) 
            {
                $("#content").html(response);                
            } 
        });
    })
});

possibile che sia l'unica soluzione ?

mi date qualche consiglio su come impostare il lavoro, e eventualmente qualche guida (documentazione) da seguire?

sono davvero molto confuso....

Web

[Mich_]

La logica dell'HTML e` che si ricarica la pagina, non un singolo <div>.
Utilizzando JS si puo` anche ricaricare un solo oggetto nella pagina. E` la tecnica usata dai software che hai citato.
Pero` questa tecnica ha lo svantaggio che se un browser ha il JS disabilitato o non funzionante, la navigazione fallisce, per cui non e` una buona cosa.

Normalmente header e footer sono pezzi molto piccoli rispetto al resto della pagina, e se ci sono immagini sono sempre la stessa, che quindi non viene scaricata tramite la rete ma viene usata quella in cache.

Altrimenti l'HTML ha gli <iframe> dentro ai quali si carica una pagina completa (vedi qualsiasi manuale per come si usano).

Nota comunque che il passaggio da tabelle a <div> (lasciami usare questa espressione) non cambia queste logiche.

Invece l'uso di un software lato server per "montare" le pagine al volo (ASP, PHP, JSP, ...) puo` aiutarti a fare pagine con degli elementi comuni, in cui intervieni solo sulle parti che cambiano. E` la logica dei CMS (content management system - per info vedi il forum dedicato).

[webmasterone]

La logica dell'HTML e` che si ricarica la pagina, non un singolo <div>.
Utilizzando JS si puo` anche ricaricare un solo oggetto nella pagina. E` la tecnica usata dai software che hai citato.
Pero` questa tecnica ha lo svantaggio che se un browser ha il JS disabilitato o non funzionante, la navigazione fallisce, per cui non e` una buona cosa.

Normalmente header e footer sono pezzi molto piccoli rispetto al resto della pagina, e se ci sono immagini sono sempre la stessa, che quindi non viene scaricata tramite la rete ma viene usata quella in cache.

Altrimenti l'HTML ha gli <iframe> dentro ai quali si carica una pagina completa (vedi qualsiasi manuale per come si usano).

Nota comunque che il passaggio da tabelle a <div> (lasciami usare questa espressione) non cambia queste logiche.

Invece l'uso di un software lato server per "montare" le pagine al volo (ASP, PHP, JSP, ...) puo` aiutarti a fare pagine con degli elementi comuni, in cui intervieni solo sulle parti che cambiano. E` la logica dei CMS (content management system - per info vedi il forum dedicato).

ok, quindi mi sembra di capire, si a ricaricare tutta la pagina per intero, corretto ?

penso che mi muoverò in questa direzione, piuttosto che usare stratagemmi (jquery o ajax) oppure iframe....

grazie per il momento, se troverò altri ostacoli mi rifarò vivo.