CSS, DIV e Layout con Dreamweaver: la pagina prende forma – 3a parte
Visto 8,897 volte
Pubblicato il : 3.11.2009
Categorie: DREAMWEAVER
Leggi i commenti a questo video
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”
Lascia un commento
Usa il tuo account Facebook oppure compila il form Sei già iscritto?Entra
Argomenti collegati
Newsletter
NOVITA’
Più visti
- 1400 pennelli gratuiti per Photosho... 94,436 volte
- Video tutorial: Immagini HDR con Ph... 65,102 volte
- Immagini a colori dentro al bianco ... 49,573 volte
- Più di 800 texture gratuite per Pho... 43,013 volte
- Aggiungere tatuaggi con Photoshop 40,472 volte
- File grafici gratuiti su PSD Graphi... 34,714 volte
- Photoshop: pennelli gratuiti ad alt... 34,431 volte
- Fai dimagrire la barra degli strume... 31,295 volte
- Video tutorial: foto ritocco dei ri... 28,672 volte
- 158 Pattern gratuiti per Photoshop 28,500 volte
Who's Online
- 0 Members.
- 22 Guests.
November 3rd, 2009 alle 11:06
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?
November 3rd, 2009 alle 11:09
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
November 3rd, 2009 alle 12:13
@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
November 3rd, 2009 alle 15:40
Che bello… grazie!!!
November 4th, 2009 alle 11:35
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
November 4th, 2009 alle 12:16
Ehi! Grazie espanico!
Non ti preoccupare per quello che mi chiedi… la risposta arriva nei prossimi tutorial
November 4th, 2009 alle 17:48
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!
November 4th, 2009 alle 18:26
STREPITOSO MAX . Come sempre , ottimo tutorial , 10+ , impareremo tutti molto da te , non mi stancherò mai di ringraziarti!!!
November 4th, 2009 alle 19:52
Felice che la “classe” sia contenta
ce la si mette tutta, come al solito!
PS. Passa parola
November 8th, 2009 alle 15:56
ma perche il download del video e cosi’ lento?
November 9th, 2009 alle 09:31
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.
November 9th, 2009 alle 12:37
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.
November 9th, 2009 alle 13:05
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
November 9th, 2009 alle 14:04
Grazie, aspetto che lo spiegate voi….
November 20th, 2009 alle 15:07
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!!
November 20th, 2009 alle 15:11
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…
November 20th, 2009 alle 15:32
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à
November 21st, 2009 alle 00:03
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!!
November 21st, 2009 alle 11:37
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
November 27th, 2009 alle 16:42
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
November 27th, 2009 alle 16:53
Hey a te, Rubber Soul :shakehand2
Abbiamo avuto un’oretta di panico per un problema di sistema. :amazed:
Adesso funziona tutto nuovamente
December 6th, 2009 alle 13:50
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!
December 7th, 2009 alle 09:38
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
December 7th, 2009 alle 14:11
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ì!
December 7th, 2009 alle 15:04
divertiti
December 7th, 2009 alle 15:46
a fare cosa? a cercare la risposta a questa nuova domanda? :p
January 30th, 2010 alle 23:57
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
March 26th, 2010 alle 00:34
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.
March 26th, 2010 alle 09:29
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ì
March 26th, 2010 alle 11:57
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.
March 26th, 2010 alle 23:36
Grande Maaaaaaaaaaaaaax!!!!!!
May 5th, 2010 alle 00:43
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
May 5th, 2010 alle 08:41
esattamente come lo hai scritto…
p:hover{background-color:#999999;}
May 5th, 2010 alle 16:23
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
May 5th, 2010 alle 16:47
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
May 5th, 2010 alle 17:18
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à
May 5th, 2010 alle 18:06
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…
May 12th, 2010 alle 14:35
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
May 12th, 2010 alle 14:49
puoi postare il link della pagina così capisco meglio?
June 25th, 2010 alle 09:55
Grandi questi video tutorial! Mi sto facendo un full immersion!
August 29th, 2010 alle 12:54
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
August 30th, 2010 alle 10:40
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