Sito statico responsive

Salve a tutti, anni fa avevo imparato le basi dell'html e del css ed ero riuscito a creare un piccolo sito. Sono passati molti anni e non ricordo praticamente un tubo. Voi direte "studia"...vero, ma visto che ora ho bisogno di un sito responsive, ho studiato un po ma non ci ho capito una mazza. Il sito che devo creare è semplicissimo, allego una immagine per far capire più o meno di cosa ho bisogno. Navigando ho trovato questo sito( http://www.marchettidesign.net/2012/...eb-responsive/ ) dove spiega il da farsi, ho scaricato i file e li ho caricati nel mio sito di prova, ma come detto prima non ci ho capito niente e non so come adattarlo alle mie esigenze. Qualcuno mi può aiutare? Grazie mille

[bcprojects]

un layout base è composto da un header, un container ed un footer. Come penso saprai l'header è dove va logo e menu del sito, mentre il footer e dove vanno inserite le informazioni aggiuntive, i crediti o la mappa del sito. il container è dove va il contenuto del sito e delle varie pagine. generalmente per l'header e il footer si fa in modo che vengano visualizzati in ogni pagina del sito ma senza usare il "copia e incolla", vale a dire utilizzando un solo file che vale per tutte le pagine, cosa che torna utilissima nel momento in cui si deve modificare qualcosa. si può fare semplicemente con la funzione include() in php. Detto ciò, per fare un sito responsivo si utilizza prevalentemente il css, quindi il template che hai scaricato avrà un foglio di stile .css dove puoi modificare le varie classi degli elementi. In un sito responsivo tutto (o quasi) deve essere a dimensioni variabili, quantomeno la larghezza, utilizzando le misure in percentuale. ad esempio:

Nell'html:

<div id="header">CONTENUTO</div>

Nel CSS:

#header{
width: 100%;
height: 300px;
margin: 0;
background-color: #000000;
color: #FFFFFF; 
}

Con la larghezza impostata al 100% l'elemento sarà sempre a tutto schermo, qualsiasi sia la risoluzione del dispositivo.

Inoltre la cosa fondamentale per fare un sito responsivo è che ad ogni elemento della pagina sia associata una classe. Questo perchè poi nel foglio di stile del tuo sito vengono riutilizzate per la corretta visualizzazione su tablet e smartphones, e anche per comodità quando si vuole fare una modifica da applicare a tutte le pagine del sito. Per fare un esempio supponiamo che si vuole che l'header contenga un immagine di sfondo se visualizzato dal computer, che abbia un immagine di sfondo diversa se visualizzato da un tablet e che abbia un colore di sfondo anziche un immagine se visualizzato dallo smartphone:

La pagina HTML è una sola e il codice è sempre lo stesso:

<div id="header">CONTENUTO</div>

Il foglio di stile .css:

/* Stile per smartphone */
@media (max-width: 767px) {

#header{
width: 100%;
height: 300px;
margin: 0;
background-color: #000000;
color: #FFFFFF;
}
}


/* Stile per tablet */
@media (min-width: 768px) and (max-width: 980px) {

#header{
width: 100%;
height: 300px;
margin: 0;
background-image: url(img/1.jpg);
color: #FFFFFF; 
}
}

/* Stile per computer */
@media (min-width: 1200px) {

#header{
width: 100%;
height: 300px;
margin: 0;
background-image: url(img/2.jpg);
color: #FFFFFF; 
}
}

Il foglio di stile dice al sito che fino ad un massimo di 767px (dimensione massima standard dello smartphone) l'header deve essere nero, che da 767px a 980px (risoluzione standard tablet) deve avere come sfondo l'immagine "1.jpg" , che da un minimo di 1200px (risoluzione minima dei monitor quindi il sito base) in poi deve avere come sfondo l'immagine "2.jpg".

Questi sono semplici concetti base, ma se sei molto inesperto la vedo difficile che tu riesca ad adattare un sito responsivo gia pronto alle tue esigenze. questo genere di siti contengono quasi sempre almeno tre linguaggi (html,css,java) e se non si ha un minimo di esperienza diventa molto complicato. se vuoi imparare ti consiglio di creare qualcosa da zero, gradualmente studiando le basi e chiedendo sul forum, se invece ti interessa solo fare un sito puoi usare i cms gia pronti come wordpress.

Ciao e grazie della risposta, ho provato a mandarti un messaggio in pvt ma non parte, sai il perche?