CSS, DIV e Layout con Dreamweaver: la pagina prende forma – 3a parte

CSS, DIV e Layout con Dreamweaver: la pagina prende forma – 3a parte

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.

42 Commenti a “CSS, DIV e Layout con Dreamweaver: la pagina prende forma – 3a parte”

  1. Alessandro R. Says:

    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?

  2. Freddy Says:

    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

  3. Max Says:

    @Alessandro.
    Niente panico… arriviamo anche lì ;)

    @Freddy.
    PHP arriva, guys ;) tempo al tempo.
    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 :)

  4. Alessandro R. Says:

    Che bello… grazie!!!

  5. espanico Says:

    CIao, vorrei farti i complimenti per l’ottima guida, le attendo sempre con mpazienza :D 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

  6. Max Says:

    Ehi! Grazie espanico!
    Non ti preoccupare per quello che mi chiedi… la risposta arriva nei prossimi tutorial ;)

  7. mr sponkie Says:

    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! :)

  8. mr sponkie Says:

    STREPITOSO MAX . Come sempre , ottimo tutorial , 10+ , impareremo tutti molto da te , non mi stancherò mai di ringraziarti!!!

  9. Max Says:

    Felice che la “classe” sia contenta ;) ce la si mette tutta, come al solito!
    PS. Passa parola ;)

  10. raffaele Says:

    ma perche il download del video e cosi’ lento?

  11. Max Says:

    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.

  12. enrico Says:

    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.

  13. Max Says:

    Cavoli… stai chiedendo una cosina da nulla da spiegarsi in quattro righe…. :D
    Qui occorre javascript o Ajax… mi sa che devi aspettare che ci si arrivi coi tutorial ;) oppure andare sul forum e vedere se qualcuno ha già sperimentato questa cosa e vuole condividere con te il processo

  14. enrico Says:

    Grazie, aspetto che lo spiegate voi….

  15. biagio Says:

    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!!

  16. biagio Says:

    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…

  17. Max Says:

    Grazie Biagio, felice di essere utile alla “causa” dei nuovi web designer :D
    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à :D

  18. biagio Says:

    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!!

  19. Max Says:

    Innanzitutto sei tu che si un Grande… visto che con la febbre ti guardi i tutorial :D
    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

  20. Rubber Soul Says:

    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

  21. Max Says:

    Hey a te, Rubber Soul :shakehand2
    Abbiamo avuto un’oretta di panico per un problema di sistema. :amazed:
    Adesso funziona tutto nuovamente

  22. Alessandro R. Says:

    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!

  23. Max Says:

    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 ;)

  24. Alessandro R. Says:

    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ì!

  25. Max Says:

    divertiti ;)

  26. Alessandro R. Says:

    a fare cosa? a cercare la risposta a questa nuova domanda? :p

  27. Pino Antani Says:

    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 :D !
    Mi scuso se il commento non è stato postato nell’ultimo tutorial,ma lo ritenevo più attinente all’argomento trattato :D !

  28. Filippo Says:

    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.

  29. Max Says:

    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ì ;-)

  30. Filippo Says:

    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.

  31. angelo Says:

    Grande Maaaaaaaaaaaaaax!!!!!!

  32. Giorgio Says:

    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

  33. Max Says:

    esattamente come lo hai scritto…
    p:hover{background-color:#999999;}

  34. Giorgio Says:

    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

  35. Max Says:

    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 :-D

  36. Giorgio Says:

    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à

  37. Max Says:

    :D ora ho capito…..
    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… ;-)

  38. Lucia Caccia Says:

    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

  39. Max Says:

    puoi postare il link della pagina così capisco meglio?

  40. Dario Says:

    Grandi questi video tutorial! Mi sto facendo un full immersion!

  41. Luca Dovina Says:

    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

  42. Max Says:

    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

Lascia un commento

Usa il tuo account Facebook oppure compila il form Sei già iscritto?
Entra

Connettiti con il tuo account Facebook