Problema con visualizzazione layout.

**Kanjikill** · 29-08-2006, 22:29

Ciao a tutti.
Vi espongo il mio problema: creo normalmente il layout grafico di un sito web con Photoshop 7 o CS2, divido in sezioni e salvo per il web in HTML e Immagini. Apro il lavoro creato con Dreamweaver MX e aggiungo collegamenti a mio piacimento e fin qui, tutto apposto.

Quando provo a tagliare un'immagine e inserirla come sfondo per immettere del testo l'applicazione lo fa perfettamente ma compromette il layout: le posizioni delle immagini che lo compongono non sono più le stesse e tra un'immagine e l'altra ci sono degli spazi bianchi e questo succede pure in Visualizzazione anteprima in Explorer.

Se invece, dopo aver suddiviso in sezioni passo a ImageReady clicco su Impostazioni Output e clicco su successivo fino all'ultima schermata senza modificar nulla e salvo ottimizzando il layout, lo apro con dreamweaver mx ed eseguo lo stesso procedimento di prima non ho nessun errore di visualizzazione, tutto apposto.

Secondariamente, nel file salvato in HTML non è presente nessuna traccia di CSS nel codice, che da quanto ho capito, dovrebbe esser presente..

Potreste aiutarmi gentilmente?

Grazie in anticipo..!

**Myaku82** · 30-08-2006, 08:35

Il css sei tu che lo devi creare. Puoi inserirlo nella stessa pagina web, utilizzando all'interno del tag <head>

<style type="text/css">

</script>

oppure creandolo su un documento diverso che ha estensione .css e richiamandolo nell'head della pagina web:

<style type="text/css" title="currentStyle" media="screen"> @import "percorso/nome del tuo documento.css";
</style>

ti consiglio quindi di studiarti il codice, se non lo sai già

Esportando da Photoshop o Imageready in HTML, non è detto che ti sia automaticamente creato anche il foglio di stile. Per i margini che tu vedi "montando" la grafica su dreamweaver, dovresti verificare se è un problema solo di Explorer o anche degli altri browser, comunque lo gestisci sempre da css.
Qui su html ci sono delle ottime guide sui fogli di stile e in rete trovi una marea di materiale ...

... spero questa volta di essere stata comprensibile ...

**Kanjikill** · 30-08-2006, 09:13

Originariamente inviato da Myaku82
Il css sei tu che lo devi creare. Puoi inserirlo nella stessa pagina web, utilizzando all'interno del tag <head>

<style type="text/css">

</script>

oppure creandolo su un documento diverso che ha estensione .css e richiamandolo nell'head della pagina web:

<style type="text/css" title="currentStyle" media="screen"> @import "percorso/nome del tuo documento.css";
</style>

ti consiglio quindi di studiarti il codice, se non lo sai già

Esportando da Photoshop o Imageready in HTML, non è detto che ti sia automaticamente creato anche il foglio di stile. Per i margini che tu vedi "montando" la grafica su dreamweaver, dovresti verificare se è un problema solo di Explorer o anche degli altri browser, comunque lo gestisci sempre da css.
Qui su html ci sono delle ottime guide sui fogli di stile e in rete trovi una marea di materiale ...

... spero questa volta di essere stata comprensibile ...

Sì, grazie.

Provvederò a studiarlo!

**Fortebraccio** · 30-08-2006, 10:02

Allora, da quanto ho capito tu usi un layout tabellare creato automaticamente da Photoshop e Image Ready, i CSS li usi per formattare il testo etc.
Il disallineamento lo hai perché le immagini tengono insieme i layout tabellare, ma se tu le imposti come sfondo è come se non di fossero più, infatti ci puoi anche scrivere sopra.
Per ovviare all' inconveniente assicurati che le opzioni di output di Image Ready siano settate così:
opzioni di output > sezioni > genera tabella > celle di spaziatura > auto(basso)
questo creerà sul lato inferiore del layout una fila di celle occupate da immagini spaziatrici trasparenti alte 1 pixel che terranno a posto il layout.
Puoi fare tutto ciò anche successivamente da Dreamweaver, che in modalità tabella permette di inserire immagini spaziatrici per stabilizzare il layout

**Myaku82** · 30-08-2006, 11:13

Originariamente inviato da Myaku82
Il css sei tu che lo devi creare. Puoi inserirlo nella stessa pagina web, utilizzando all'interno del tag <head>

<style type="text/css">

</script>

Ehm ... piccolo errore:

<style type="text/css">

</style>

**Kanjikill** · 30-08-2006, 12:05

Originariamente inviato da Fortebraccio
Allora, da quanto ho capito tu usi un layout tabellare creato automaticamente da Photoshop e Image Ready, i CSS li usi per formattare il testo etc.
Il disallineamento lo hai perché le immagini tengono insieme i layout tabellare, ma se tu le imposti come sfondo è come se non di fossero più, infatti ci puoi anche scrivere sopra.
Per ovviare all' inconveniente assicurati che le opzioni di output di Image Ready siano settate così:
opzioni di output > sezioni > genera tabella > celle di spaziatura > auto(basso)
questo creerà sul lato inferiore del layout una fila di celle occupate da immagini spaziatrici trasparenti alte 1 pixel che terranno a posto il layout.
Puoi fare tutto ciò anche successivamente da Dreamweaver, che in modalità tabella permette di inserire immagini spaziatrici per stabilizzare il layout

Le impostazioni sono già settate in questo modo, solamente che mi hanno detto che la pagina web deve essere già generata in CSS senza aver bisogno di essere convertita..

**Fortebraccio** · 30-08-2006, 12:12

Photoshop ti genera una pagina fatta di div a posizionamento assoluto che non sono il massimo. inoltre il layout non si allunga automaticamente a seconda della quantità di testo che immetti. Usa un layout come quelli della guida sui layout con i CSS che trovi in questo sito. Poi provvederai a mettere le immagini giuste in ogni div (per esempio header,body, footer). Qesti semplici layout fatti con i CSS sono stabilissimi e si allungano automaticamente a seconda della roba che ci metti dentro inoltre con un seplice body switcher in javascript puoi cambiare l' aspetto della grafica.

http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

**Kanjikill** · 30-08-2006, 12:40

Originariamente inviato da Fortebraccio
Photoshop ti genera una pagina fatta di div a posizionamento assoluto che non sono il massimo. inoltre il layout non si allunga automaticamente a seconda della quantità di testo che immetti. Usa un layout come quelli della guida sui layout con i CSS che trovi in questo sito. Poi provvederai a mettere le immagini giuste in ogni div (per esempio header,body, footer). Qesti semplici layout fatti con i CSS sono stabilissimi e si allungano automaticamente a seconda della roba che ci metti dentro inoltre con un seplice body switcher in javascript puoi cambiare l' aspetto della grafica.

http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

Non ho capito cosa dovrei fare..

**Fortebraccio** · 30-08-2006, 23:04

Photoshop/Image Ready e il relativo strumento di slicing servono prevalentemente per creare siti con layouts tabellari , poi si esporta come html+immagini. E' ovvio che non trovo il codice CSS visto che si tratta di un layout fatto con le tabelle. Photoshop ti permette anche la esportazione di un layout fatto con i CSS, ma come ti ho detto sono tutti div a posizionamento assoluto, uno per porzione, quindi è un illusione cercare di creare una layout fatto con I CSS utilizzando Photoshop. Ti devi scrivere il codice CSS magari copiandolo dalla guida che ti ho segnalato, poi ci metti dentro le immagini, lo sfondo il testo etc.

**Kanjikill** · 30-08-2006, 23:58

Originariamente inviato da Fortebraccio
Photoshop/Image Ready e il relativo strumento di slicing servono prevalentemente per creare siti con layouts tabellari , poi si esporta come html+immagini. E' ovvio che non trovo il codice CSS visto che si tratta di un layout fatto con le tabelle. Photoshop ti permette anche la esportazione di un layout fatto con i CSS, ma come ti ho detto sono tutti div a posizionamento assoluto, uno per porzione, quindi è un illusione cercare di creare una layout fatto con I CSS utilizzando Photoshop. Ti devi scrivere il codice CSS magari copiandolo dalla guida che ti ho segnalato, poi ci metti dentro le immagini, lo sfondo il testo etc.

Quindi, ricapitolando, come dovrei procedere?

Creo il layout normalmente, lo divido in sezioni, imposto l'output, lo ottimizzo, lo savo per web come html e immagini e poi? Per aprire e modificare il layout con Dreamweaver MX quale procedimento dovrei seguire, esattamente?

Grazie per la pazienza e la disponibilità!

Discussione: Problema con visualizzazione layout.

Strumenti discussione

Ricerca discussione

Visualizza

Problema con visualizzazione layout.

Permessi di invio