Dal layout al modello di pagina con Dreamweaver CS4 – 2a parte

Visto 4,026 volte

Pubblicato il : 17.11.2009

Categorie: DREAMWEAVER

Leggi i commenti a questo video

Condividi e segnala questo video

Incorpora questo video nel tuo sito

Dal layout al modello di pagina con Dreamweaver CS4 – 2a parte

Una volta creato il modello della nostra pagina con Dreamweaver CS4 non dobbiamo fare altro che capire quali parti rimarranno, presumibilmente, invariabili e quali potranno subire delle variazioni più o meno costanti.
Per questo introduciamo il nuovo concetto delle aree ripetute e di quelle modificabili che ci vengono in aiuto in tutti quei casi in cui le pagine debbano essere strutturate con contenuti differenziati ma basate sullo stesso formato iniziale.
In questo video tutorial vediamo come si modifica un template e come si applica alle nostre pagine.

30 Commenti a “Dal layout al modello di pagina con Dreamweaver CS4 – 2a parte”

  1. Freddy Says:
    November 17th, 2009 alle 19:15

    Un passo dopo l’altro preceduti dal generale Max a cavallo, ci siamo avviati su questa kilometrica strada di cui abbiamo percorso 8 o 9 metri.
    Naturalmente sto scherzando, però ti va dato il merito che la politica dei piccoli passi paga perchè, senza affollare la mente, le procedure da te spiegate con molta chiarezza restano e non si sciolgono come neve al sole.
    Però la lezione inizia con un cliente che voleva che gli cambiassi il logo in 100 pagine e, finisce ma il logo nel modello è ancora bloccato.
    Ciao e stammi bene

  2. Max Says:
    November 17th, 2009 alle 19:20

    ahi ahi ahi… caro il mio freddy… domani mi torni con il diario firmato dai genitori :D
    La procedura per cambiare il logo in ognuna delle 100 pagine consiste nel trasformare la zona del logo in un’area modificabile.
    Oppure ancora potresti fare questa simpatica variazione….. mmmm… no.. ci ho ripensato… mi sa che devi aspettare il prossimo tutorial :D :D

  3. Freddy Says:
    November 17th, 2009 alle 20:05

    Caro il mio Max …..che per modificare il logo si doveva trasformare la zona in un’area modificabile c’ero arrivato. Il mio voleva essere un pistolotto tanto per sorridere.
    Non me ne volere
    P.S. La simpatica variazione mi ha incuriosito ……un piccolo anticipo?

  4. Max Says:
    November 17th, 2009 alle 20:16

    Eheheheheh… sei sempre un passo in là, fratello! :D
    Anticipazioni? Mannaggia … come faccio? E se poi mi scoprono? :D :D
    Scherzi a parte… il logo è un’immagine che, in HTML, significa TAG.
    I tag hanno degli attributi.
    Questi possono essere modificabili tramite….
    vabbeh… ma così ti dico tutto…. aspetta il prossimo tutorial ;)

  5. vincenzo Says:
    November 17th, 2009 alle 23:01

    Ma non potresti copiare il codice e copiarlo nelle nuove pagine e poi modificando i contenuti?

  6. Max Says:
    November 18th, 2009 alle 11:50

    E’ proprio il tipo di perdite di tempo che si vorrebbe evitare, Vincenzo.
    Ovviamente la risposta è si ma, se hai solo 4 pagine da modificare va tutto bene, se ne hai 20 o 30 incomincia a diventare una scocciatura.
    Lo scopo dell’informatica dovrebbe essere quello di aiutarci a perdere meno tempo possibile.
    Lo so… è un po’ da pigri… ma ci piace tanto :D

  7. Sephzero Says:
    November 18th, 2009 alle 12:22

    scusate, ma per cambiare il logo in 100 pagine e più non basta modificare il file .jpg? tanto alla fine tutte le pagine fanno riferimento allo stesso .jpg nella sottocartella /immagini/grafica/ della root del sito..

    Cambiane uno per cambiarne mille! :P

  8. Max Says:
    November 18th, 2009 alle 12:29

    Ottima osservazione!
    Ma se cambiano le dimensioni? devi comunque aggiornarti i parametri dell’immagine manualmente o rischi di non mantere le proporzioni giuste.
    Ad ogni modo quello del logo è un esempio per farvi capire che se ci sono degli elementi che vogliamo poter variare con comodità (e senza usare un database o programmazione lato server) si può fare.
    Un altro esempio è dato dal fatto che in una pagina potremmo avere la necessità di cambiare l’esposizione di prodotti e descrizioni.
    Oppure potremmo voler valutare dei banner da cambiare periodicamente senza fare nessun copia e incolla.
    Se ci pensate sono veramente molte le possibilità di applicazione di questa soluzione.

  9. Sephzero Says:
    November 18th, 2009 alle 12:42

    vabbè, se cambiano le dimensioni dell’immagine ovviamente si cambiano anche i parametri nel modello, quello vien da se. :)
    Appena finito di vedere il videotutorial comunque, molto interessante come sempre! Ma ho una domanda..in questo modo è la lungheza dei testi (come ad esempio il contenuto LOREM IPSUM etc. etc.) a dover tener conto della dimensione dei DIV e non viceversa, giusto? Se abbiamo un contenuto troppo lungo l’impaginazione va a farsi benedire? Io di solito mi creo sempre nei DIV che uso dei box con lo scroll per evitare di finire le righe a mia disposizione.

  10. Max Says:
    November 18th, 2009 alle 12:54

    Altra ottima osservazione Seph ;)
    In teoria qui bisognerebbe ragionare in modo preventivo sulla progettazione dei contenuti.
    Questo è il capitolo più doloroso dell’attività del buon web designer/web master/project manager.
    Può capitare (e di fatto accade spesso) che il cliente in una pagina voglia 100 righe di testo (e chi le legge?) e in un’altra ne voglia 10.
    Per questo prima di lavorare sul layout bisognerebbe avere un quadro più dettagliato possibile rispetto a come sono fatti i contenuti sia in termini qualitativi che quantitativi.
    Con il sistema che abbiamo utilizzato in questi tutorial il layout si “spacca” nel caso di un contenuto più lungo del previsto.
    Per ovviare a questa cosa bisognerebbe lavorare annullando le altezze dei div e ragionando solo con le larghezze.
    In altre parole: dei div contenitore, navigazione e contenuto (stando agli esempi fatti fino a qui) setti il width ma non l’height.
    In questo modo l’adattamento sarà automatico.
    E, soprattutto, non metti barre di scorrimento dentro la pagina che… perdonami.. è proprio una cosina da evitare il più possibile ;)

  11. Sephzero Says:
    November 18th, 2009 alle 13:01

    Non sapevo come risolvere.. :( chiedo pietà! (anche se li uso per non creare pagine troppo lunghe verticalmente..ad esempio 800×500 di DIV CONTENITORE :P )
    In ogni caso è sempre bene che ci sia un rapporto più o meno paritario tra l’altezza (nel nostro caso) del div contenuto e del div navigazione?

  12. Max Says:
    November 18th, 2009 alle 13:07

    ehehehe :D
    In teoria sarebbe meglio mantenere equilibrio tra i due se, come nell’esempio sono affiancati e con sfondi più o meno diversi.
    Direi che una buona norma è quella di tenerli alti uguali.
    Per questo ti suggerivo di annullare i valori di hieght e mantenere solo quelli di widht.
    In questo modo se si allunga uno si allunga anche l’altro e tutto rimane più bilanciato ;)

  13. Sephzero Says:
    November 18th, 2009 alle 13:12

    Penso di aver capito… :) ora torno a lavoro ed attendo con impazienza il prossimo tutorial..siete mitici! ^_^

  14. mr sponkie Says:
    November 18th, 2009 alle 14:53

    Scusa max . ma siccome anche io ho il “vizietto” di mettere lo scroll sul contenuto , potresti spiegare meglio questa nuova opzione?
    Perchè se faccio come dici te ,poi la barra di navigazione che sta sul lato sinistro , accanto al contenuto , va a farsi benedire.. E poi , scusa , ma anche il HEIGHT del div container devo annullare , giusto?

  15. simone Says:
    November 27th, 2009 alle 01:18

    salve vi seguo sempre e siete perfetti….non riesco a creare delle pagine con riquadri dai bordi tondeggianti e di colore sfumato…..sto impazzendo

  16. Max Says:
    November 27th, 2009 alle 09:39

    ci arriviamo Simo, ci arriviamo ;)

  17. Simone Says:
    November 28th, 2009 alle 01:27

    :) …non avevo dubbi.
    Ma devo realizzarli con photoshop e poi inserire l’immagine ? :P :)

  18. Max Says:
    November 28th, 2009 alle 10:01

    mmmm….. non esattamente…. ho capito… vedo di preparare un tutorial :P

  19. simone Says:
    November 28th, 2009 alle 15:47

    Ti ringrazio…credo che sarà un tutoria molto interessante anche perchè l’utilizzo di sfondi o sezioni con sfumature e bordi arrotondati migliorerebbe moltissimo la grafica del sito…sempre in relazione al tipo di sito ovviamente…
    Cmq…rinnovo i miei complimenti…state facendo un bel lavoro e offrendo un ottimo servizio…in più siete simpatici e disponibili…Cosa vuoi di + dalla vita ? :)

  20. Max Says:
    November 30th, 2009 alle 09:59

    Bella Simo!
    Nel frattempo se vuoi c’è già un tutorial per creare uno sfondo sfumato alla pagoina, lo trovi qui http://www.total-photoshop.com/2009/06/creare-uno-sfondo-sfumato-per-le-tue-pagine-web-con-dreamweaver/

  21. roberto Says:
    December 7th, 2009 alle 12:31

    Ciao, sono un nuovo visitatore e ti ringrazio anche io, e molto, per questa documentazione, GRANDE!
    Ho un problema. Se nel div #principale inserisco più testo di quello proposto, quest’ultimo si va ad accavallare sugli altri, come nel tuo esempio su #footer. Ho provato a fare delle prove, tipo al div #contenitore ho inserito come hight = AUTO ma nulla. Dove sbaglio?
    Grazie ancora di tutto.

  22. Max Says:
    December 7th, 2009 alle 13:06

    Ciao nuovo visitatore :D
    La risposta alla tua domanda è: ci sono almeno due strade da percorrere.
    O progetti il contenuto in modo tale che sia capace di stare entro certi spazi oppure modifichi le dimensioni del DIV che contiene il tutto.
    In questa seconda ipotesi puoi considerare di crearti un modello in cui i tuoi DIV siano una regione modificabile con tanto di attributo (Height) modificabile.
    Questo però comporta non avere un CSS esterno ma sempre interno al documento.
    La terza opzione è quella (bruttissima che sconsiglio vivamente) di inserire uno scroll all’interno del Div. Se puoi evitarla è meglio a meno di personalizzarla in modo tale da farla sembrare quasi un “benefit” della pagina.
    Oppure ancora… puoi pensare di distribuire il contenuto che pensi debba stare su un’unica pagina in più pagine.
    Si tratta di un escamotage che però può avere senso soprattutto se hai un contenuto piuttosto corposo.
    Una delle buone regole da rispettare sempre è non costringere i tuoi visitatori a doversi pippare un testo lungo decine e decine di righe.
    O ci si dota del dono della sintesi (vivamente consigliato) oppure si “splittano” i contenuti su più pagine.

  23. Alex Says:
    January 16th, 2010 alle 01:01

    Ciao,
    per risolvere il problema della lunghezza del testo variabile tra le varie pagine del sito, ho deciso di settare solo il campo width e non l’height nei div contenitore e contenuto, così facendo però mi si presenta un problema irrisolvibile [ x me;) ]
    Quando visualizzo la pagina nel browser scompare l’immagine di sfondo del div contenitore e non so dove va a finire…cosa mi sfugge??
    Cmq complimenti x i tutorial!

  24. roberto Says:
    February 25th, 2010 alle 10:17

    Ciao Max, ho provato ad eseguire l’applicazione del template creato come da tue indicazioni con una nuova pagina. Ricevo questo errore:
    Tag body non bilanciato.
    Dove ho sbagliato?

    Grazie di tutto

  25. roberto Says:
    February 25th, 2010 alle 10:19

    mi rispondo da solo.
    Non avevo chiuso il tag ….
    scusate

  26. Max Says:
    February 25th, 2010 alle 10:23

    Mi piace quando mi togliete le parole dalla penna :-D

  27. eleni Says:
    February 25th, 2010 alle 16:11

    Ciao,
    ho già posto il mio problema sul forum, ma non ottengo risposta,e sono veramente disperata!!!!!!
    dunque ,ho seguito x filo e x segno i tutorial per creare un modello di pagina,e fin qui tutto ok,(anzi, devo ringraziarvi perchè i tutorial sono davvero molto chiari anche per totali incompetenti come me!)
    ma nel momento in cui creo una nuova pagina dal modello mi scompaiono tutti gli sfondi che avevo messo.
    allora x cercare disperatamente di capirci qualcosa(considerate che bazzico con dreamweaver da un mesetto e totalmente da autodidatta!!) ho fatto check browser compatibility sul mio modello
    e risulta tutto a posto, mentre se lo faccio sulla mia nuova pagina da modello mi dà “Error parsing styles”…
    che vuol dire? come posso fare? rivoglio i miei sfondi!!!!! sto impazzendo…

  28. raffaele Says:
    February 25th, 2010 alle 18:49

    ciao posso sapere perche quando voglio inserire il modello nel nuovo file html ,invece di darmi il modello , mi da un link ,che mi riporta al modello ? grazie in anticipo

  29. Max Says:
    February 25th, 2010 alle 19:13

    non devi inserire il modello in un file ma creare un nuovo file partendo da un modello.
    Lo fai andando sul menu FIle> Nuovo … Pagina da Modello ;-)

  30. Giovanni Petrellese Says:
    March 4th, 2010 alle 15:58

    ciao a tutti,sono giorni e giorni ke ci sbatto la testa,ma come cakkio si fa a collegare le varie pagine ai rispettivi tasti nella barra di navigazione?ES. voglio creare un’altra pagina da collegare al tasto CHI SIAMO,un altra pagina con contenuti diversi da collegare al tasto CONTATTI ecc ecc,grazie mille x la futura risposta :)

Lascia un commento

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

Connettiti con il tuo account Facebook