CSS, DIV e Layout con Dreamweaver: la pagina prende forma – 3a parte
In questo video
Pubblicato il 3 November, 2009
Abbiamo impostato le griglie generali del nostro layout di pagina ora incominciamo a perfezionarne l’aspetto per fare in modo che il nostro progetto assuma l’aspetto di un vero documento web perfettamente formattato con i CSS.
Usiamo classi, div e css per formattare la nostra barra di navigazione e creiamo gli spazi giusti per il nostro contenuto centrale aggiungendo una fotografia che dovrà risultare perfettamente impaginata intorno al nostro testo.
CATEGORIE: DREAMWEAVER
Video lezioni Photoshop
Fantastico… la pagina ha davvero preso forma…
Ma ora ho un nuovo problema: sono “fissato” con i layout dall’altezza “fissa”… prima di utilizzare DW risolvevo inserendo nelle varie pagine un bel frame
(potrei farlo ancora, ma non è molto conforme ai nuovi standard) con il quale potevo scrollare il contenuto al suo interno… so che con i div si può ottenere un risultato analogo personalizzando anche le scrollbar (in modo che vengano lette anche da browser differenti da IE)!!! Ma come? Ci sarà un tutorial su una cosa del genere?
Alessandro R., 2 anno fà
Ciao Max, dopo aver visto e sentito il tuo ultimo e come sempre ben fatto tutorial, ti faccio il mio apprezzamento per la parola PHP (vuol dire che in seguito parlerai anche di php?) Spero di si.
Ora pongo una domanda: Perchè il testo nel div#contenuto quando diamo un valore di padding non si autoformatta ai nuovi margini costringendoci a modificare le dimensioni del div, mentre lo fa con la foto?
Dirai che sono un vero scocciatore in effetti lo sono.
Auguro lunga vita
Freddy, 2 anno fà
@Alessandro.
Niente panico… arriviamo anche lì
@Freddy.
tempo al tempo.
PHP arriva, guys
La questione che poni riguarda essenzialmente l’ingombro del contenuto. Se ci fosse stato più contenuto anche il div avrebbe dovuto adattarsi in termini di dimensioni.
E… non scocci assolutamente, siamo qui per voi
Max, 2 anno fà
Che bello… grazie!!!
Alessandro R., 2 anno fà
CIao, vorrei farti i complimenti per l’ottima guida, le attendo sempre con mpazienza
sei riuscito a farmi capire certe in modo semplicissimo che su guide testuali non avevo mai riuscito a capire ….
Un domanda non se fara parte di un porssimo tutorial, tipo una volta creata la home page, per le altre pagine tipo contatti, chi siamo ecc… come si fa a fare richimando sempre la stessqa struttura e grafica della home page? grazie ancora e speriamo arrivi presto la 4a parte
CIao
espanico, 2 anno fà
Ehi! Grazie espanico!
Non ti preoccupare per quello che mi chiedi… la risposta arriva nei prossimi tutorial
Max, 2 anno fà
NOOOOOOOOOOOOOOOO , x la prima volta non mi sono perso di addirittura 1 giorno il tuo tutorial , corro subito ai ripari MAX
, so già che non rimarrò deluso , quindi ti ringrazio anticipatamente .
FORZA TOTAL-PHOTOSHOP!
mr sponkie, 2 anno fà
STREPITOSO MAX . Come sempre , ottimo tutorial , 10+ , impareremo tutti molto da te , non mi stancherò mai di ringraziarti!!!
mr sponkie, 2 anno fà
Felice che la “classe” sia contenta
ce la si mette tutta, come al solito!
PS. Passa parola
Max, 2 anno fà
ma perche il download del video e cosi’ lento?
raffaele, 2 anno fà
Raffaele, temo che si tratti di un problema di banda…. oppure ci sono troppi utenti connessi sullo stesso video. Prova a scaricarlo tra qualche minuto.
Max, 2 anno fà
Ciao, siete grandi e simpatici…
Vorrei fare un corpo centrale che si modifica con il cliccare di alcuni loghi che gli sono intorni, come posso fare???
Precisamente vorrei quando clicco il logo devono aprirsi nel corpo centrale 3 foto e un descrizione.
enrico, 2 anno fà
Cavoli… stai chiedendo una cosina da nulla da spiegarsi in quattro righe….
oppure andare sul forum e vedere se qualcuno ha già sperimentato questa cosa e vuole condividere con te il processo
Qui occorre javascript o Ajax… mi sa che devi aspettare che ci si arrivi coi tutorial
Max, 2 anno fà
Grazie, aspetto che lo spiegate voi….
enrico, 2 anno fà
Ciao max sei un grande!!
volevo ringraziarti per i tutorial, ho imparato di piu’ in una giornata guardando i tuoi tutorial che in due anni che leggo libri su dreamweaver…grazie davvero!!
biagio, 2 anno fà
max volevo chiederti una cosa, ho creato un nuovo modello con un area modificabile del menu di navigazione, ma quando aggiorno i link , non vengono aggiornati i link delle altre pagine collegate al modello.
E’ un bag di dreamweaver, ho sono io(molto probabile) che non ne sono capace?sapresti spiegarmelo?
Grazie ancora…
biagio, 2 anno fà
Grazie Biagio, felice di essere utile alla “causa” dei nuovi web designer
Non sono sicurissimo di aver capito la tua domanda ma se ho correttamente interpretato i link, in realtà li dovresti cambiare nel modello. Il menu di navigazione, in teoria, dovrebbe rimanere “fisso”.
Se però ho interpretato male abbi pazienza che ho una certa età
Max, 2 anno fà
Scusa max se ti ho risposto solo ora, ma e’ tutto il giorno che guardo i tuoi tutorial e cerco di imparare, anche perche’ sono a casa con la febbre
!!
Cerco di spiegarmi meglio, ho creato un modello con un menu di navigazione con dei link impostati, poi ho creato delle pagine dal modello creato in precedenza e tutto va bene, quando pero’ vado a modificare il riferimento del link(ad esempio link dove siamo collegato alla pagina dovesiamo.html modifico alla pagina doveeravamo.html) ad un altra pagina, le pagine create dal modello non aggiornano il link alla nuova pagina.
spero di essermi spiegatomeglio questa volta, e ti ringrazio ancora per questi splendidi tutorial!!
SEI UN GRANDE MAX!!
biagio, 2 anno fà
Innanzitutto sei tu che si un Grande… visto che con la febbre ti guardi i tutorial
Quello che mi chiedi trova una risposta nel tutorial della prossima settimana, ossia la modifica degli attributi.
Dagli un occhio e poi ne riparliamo
Intanto guarisci che devi essere bello in forze per spippolare sulle tue pagine web!
Take care
Max, 2 anno fà
Hey buon Max!
sto seguendo i tuoi tutorial e devo dire che sono fantastici!
purtoppo non riesco a visualizzare ne scaricare i video di questa lezione e di quella successiva!
?!?!
grazie davvero per quello che stai facendo, e’ davvero utile!
Federico
Rubber Soul, 2 anno fà
Hey a te, Rubber Soul :shakehand2
Abbiamo avuto un’oretta di panico per un problema di sistema. :amazed:
Adesso funziona tutto nuovamente
Max, 2 anno fà
Ciao Max… sono qui per farti la domanda dell’altra volta…. come faccio a rendere un div scrollabile? Mi consigli di aspettare il video tutorial e intanto utilizzo un frame, o è una cosa che si può scrivere in poco tempo…
Grazie!
Alessandro R., 2 anno fà
Ehi Ale, la risposta è semplice.
Nello stile di quel div devi settare la proprietà overflow sul parametro che ti serve (scroll, auto, hidden). Sperimenta e fammi sapere
Max, 2 anno fà
grazie… è andata alla grande… ho messo la proprietà “overflow-y: scroll” … penso di aver fatto bene!!! Ora ho postato un altro quesito… :amazed: sul forum!!!! Spero di trovare una soluzione anche a quello!!! A martedì!
Alessandro R., 2 anno fà
divertiti
Max, 2 anno fà
a fare cosa? a cercare la risposta a questa nuova domanda? :p
Alessandro R., 2 anno fà
per via dell’influenza bastarda questo pomeriggio non sono uscito,ma almeno mi sono divertito a guardare estasiato i tuoi video fatti con iper professionalità! Ti vorrei porgere qualche domandina!
!
!
Come si fa a far posizionare il footer sempre in basso? e come ti regoli con le varie compatibilità con ie5/6?visto che ormai pure i governi consigliano di passare a un altro browser
Mi scuso se il commento non è stato postato nell’ultimo tutorial,ma lo ritenevo più attinente all’argomento trattato
Pino Antani, 2 anno fà
Ciao Max,grazie per questi tutorial, volevo chiederti perchè lo schema pagina non è stato creato all’interno del file index? non è lo schema della pagina iniziale?
in questo modo come faccio a collegare lo schema pagina alla pagina iniziale?
Spero tu posso darmi delucidazioni sono al primo approccio ed ho le idee confuse.
grazie ciao.
Filippo, 2 anno fà
Se per schema intendi il css la risposta è semplice: in questa maniera lo stesso “schema” può essere applicato a più pagine e se voglio cambiare qualcosa (font, colori, etc.) lo posso fare su un solo documento (il foglio di stile) e il cambiamento si applicherà a tutte le altre pagine.
Più comodo di così
Max, 2 anno fà
No Max io intendevo lo schema pagine con i div, perchè questi vengono creati in un nuovo file e non all’interno dell file index? e se nel caso funzionasse come il file css che ci serve per tutte le pagine che andremo a creare come si applicano queste proprietà a tutte le pagine?
grazie.
Filippo, 2 anno fà
Grande Maaaaaaaaaaaaaax!!!!!!
angelo, 2 anno fà
Ciao Max…ottime lezioni.
Una cosa, ma se nel menu volessi fare in modo che al rollover cambi il colore di sfondo cioè tutto il rettangolo grigio diventi piu scuro per esempio. Posso usare il comando p:hover nel css? come faccio a impostarlo direttamente sul tag ?
Grazie……ciao
Giorgio, 2 anno fà
esattamente come lo hai scritto…
p:hover{background-color:#999999;}
Max, 2 anno fà
ok grazie, però c’è una cosa che non mi convince: devo in ogni caso modificare il codice cioè inserire il all’interno dei tag . Solo in questo modo il rollover intorno al link coincide anche con il rollover del testo del link. Dreamweaver però, ovviamente, fa al contrario, cioè dentro ai …..non altra soluzione che prendere in mano il codice vero?….tipo un impostazione di DW…..grazie
Giorgio, 2 anno fà
Giorgio, abbi pazienza… non ho capito una cippa di quello che mi chiedi…. puoi spiegarmelo come se fossi un bimbo di 6 anni?
In realtà non ne ho molti di più mentalmente quindi abbi pietà di me
Max, 2 anno fà
ahahahah ok ok.
con il p:hover funziona. Se io creo i vari link dall’interfaccia grafica di DW (come nel video) nel codice i link (cioè i tag ) sono dentro ai tag del paragrafo (). In questo modo se io creo la regola p:hover se il cursore passa sullo spazio grigio si attiva il rollover ma il testo non ha alcun rollover poiche il cursore non è sopra al testo.
Se invece modifico il codice scambiando i tag cioè mettendo il link èiù esterno e al suo interno il la cosa funziona bene e al passaggio del mouse sia l’area esterna che il testo hanno effetto rollover. Io vorrei capire se c’è una funzione di DW che permette di scambiare l’rdine dei tag in automatico e non manualmente nel codice. Grazie per la disponibilità
Giorgio, 2 anno fà
Mah… io non me ne preoccuperei troppo, l’importante è che i colori di sfondo coincidano. In fondo il link si attiva solo quando vai sopra il testo ancorato e compare la fatidica “manina”…
Alternativa potrebbe essere quella di impostare la regola in questa maniera
#tuodiv p:hover a:hover { background-color: colortrasùdeciock; }
è la prima cosa che mi è venuta in mente…
Max, 2 anno fà
ciao ho seguito attentamente tutte e 3 le lezioni, interessante…è ciò che cercavo! un problema: com’è possibile che inserisco un padding nel DIV contenuto vedo area grigia (dello spazio) salvo e quando guardo il risultato su web non cambia assolutamente nulla!? dove sbaglio? grazie
Lucia Caccia, 2 anno fà
puoi postare il link della pagina così capisco meglio?
Max, 2 anno fà
Grandi questi video tutorial! Mi sto facendo un full immersion!
Dario, 1 anno fà
Finalmente dei video in italiano. Ho scoperto per caso la loro esistenza. Ottimi!! Anche se sono nuovo, posso chiederti ugualmente un consiglio??!! … Se ho già realizzato un modello con DW CS4 completo di menu, posso trasformare quest’ultimo in un menu fluttuante? Ho trovato del codice Java funzionante, con la posizione giusta in cui inserirlo, ma non riesco a capire quale porzione di codice della pagina (riguardante appunto il menu) devo tagliare ed inserire dentro lo script Java per fare in modo che il menu si sposti con lo scrolling della pagina. Sono pedante, vero? Per questo doppiamente grazie!!
Luca
Luca Dovina, 1 anno fà
Caspita Luca, detta così faccio un po’ fatica a risponderti… di solito gli script sono sempre accompagnati da un piccolo file di istruzioni. Se non c’è può darsi che le istruzioni siano nella pagina del sito dal quale lo hai scaricato.
In genere, mi viene da dire, i Javascript vengono messi tra l’inizio e la fine del tag head ma ci sono fior di eccezzioni.
Fai un controllo sul sito dal quale hai scaricato il tutto e poi sappimi dire.
A presto
Max, 1 anno fà
ciao! prima di tutto devo dirti che sei un grande! Tutto fato molto bene e con intelligenza!! intelligenza che io non ho per risolvere un problema del pippero: non ho capito come dividi le diverse sezioni nella home page contenente in alto il logo, a sinistra i collegamenti ipertestuali e a destra il testo.
Io ho usato i frame, ma non credo che sia la soluzione corretta… mi potresti risolvere questo oscuro arcano?
grazie mille e ancora complimenti!
eddy, 1 anno fà
Uei Eddy… troppi complimenti… guarda che sono un timidone io
E’ tutto spiegato nei tutorial precedenti. Take a look
Max, 1 anno fà
salve, max ma per posizionare il logo al centro del DIV come si fa?
se metto margin right e left su auto non funge
ecco il codice:
#contenitore #header img {
height: 80px;
width: 200px;
border: 2px dotted #F00;
float: none;
margin-right: auto;
margin-left: auto;
}
giiig, 1 anno fà
Ciao Max mi puoi di aiutare !!!! devo inserire le foto con DW nel layout del mio sito
e non so il procedimento Aiutooooooooooooooooo
Grazie in anticipo
Maila, 1 anno fà
Grande max… ottimi tutorial..
Volevo chiederti un informazione, perche quando vado ad inserire il bordo all’immagine non me la posiziona attorno all’immagine, ma crea un rettangolo più in alto???
Zelia, 1 anno fà
Ciao Max,
Ho seguito oggi con piacere il tuo tutorial sul Layout pagina con DIV mi è stato facile seguirti e fare ua nuova pagina con te!
Il mio problema: vorrei aggiornare e rinnovare il mio sito web, ma ho molte dubbi, se sceglire i DIV come vorrei e crareare naturalmente una pagina modello, o rinnovarlo usando come fatto l’ultima volta per l’impaginazione le tabelle. Questo è il primo dilemma, che vedendo il codice della home di Aruba che anche se complessa usa ancora le tabelle mi alimenta il dubbio.
Mi rimane anche sempre il dubbio che la pagina con i frame (la mia prima e meditata versione del mio sito), dal punto di vista della navigazione e della manutenzione è molto pratica se non la migliore (‘).
Se uso Div come posso indicare le dimensioni pari al 100% della pagina.
Ti ringrazio da subito, anche se penso da autodidatta che se mi fai una pagina vuota con i div della mia home mi aiuteresti moltissimo a capire da solo, sapendo di non sapere.
Fammi sapere. Enio
Enio, 6 mese fà