Dreamweaver: thread ufficiale

[tutmosi3]

Prima di iniziare la realizzazione pratica di un sito si devono avere ben chiari i canoni che lo distingueranno. Quando hai approntato la bozza (su carta) di come vuoi l'interfaccia si passa alla realizzazione.
Le tabelle ti servono proprio per il posizionamento in maniera perfetta di quello che vuoi. Per esempio potresti usare un metodo piuttosto pratico: imponi una certa dimensione ad un cella in modo da poter posizionare con esattezza l'immagine nella cella sottostante. Non so se mi sono spiegato bene.

Ciao

[Ciaba]

...beh sì...credo...dovrebbe èssere quello che fanno Image Ready e Photoskiopp in automatico quando ad esempio si creano dei Rollhover...in pratica dividono lo spazio in tante tabelle(?)celle(?) diverse che circondano la tua immagine. Certo che fare un lavoro del genere a mano è un'impresa...soprattutto su una pagina totalmente grafica....Sai come si possono gestire le trasparenze o se hanno bisogno di un formato file particolare??....Perchè ho fatto i rollhover su un fondo grafico(fai finta un quadro e quando si passa col topo su dei particolari questi cambiano forma o colore), ma ho dovuto ritagliare una parte dello sfondo, disegnarci sopra la mutazione e poi montarla al millimetro altrimenti si vedeva lo sfasamento...Il risultato è ottimo ma mi piacerebbe poter gestire le trasparenze in maniera diversa.

[tutmosi3]

Alt ... Alt ... Alt

Facciamo un attimo di chiarezza. I rollover sono degli effetti creati da degli script in Java, supportati in maniera più che dignitosa da Dreamweaver. Io li uso pochissimo perchè, se faccio tali effetti, voglio che siano molto eleborati, in questo caso sono costretto ad usare Flash. Comunque tornando a Dreamweaver, puoi fare l'effetto rollover affidando all'immagine base lo stato a riposo del pulsante ed all'immagine di rollover lo stato del pulsante quando il cuersore ci è sopra. In pratica devi fare due immagini.

Se il rollover è solo una sottolinaetura di un testo al passagio del mouse, allora puoi farlo con i fogli di stile. Questo però l'ho fatto pochissimo e non lo ricordo troppo bene.

Sfortunatamente non ho Dreamweaver al lavoro, ma stasera, a casa, vi posso spiegare meglio, qualora il concetto non sia chiaro.
Le immagini trasparenti sono generalmente GIF. Però mi sembra che sia supportata anche dalle PNG.

Ciao

[Ciaba]

...si fino a lì ci sono, image ready e potoskiopp ti permettono di salvare un HTML con detti pulsanti(aree) già funzionati(in pratica fai la pagina completa di tutto!)...basta che importi e dreamweaver la rende disponibile e funzionale...., ho addirittura fatto 3 immagini per un rollhover riposo-sopra-clikkato...è abbastanza semplice..
Il discorso delle trasparenze in gif invece mi interessa...sono andato a vedermi appunto un sito con un meccanismo simile a quello che voglio fare io ed è appunto fatto in gif,...mah...ora sperimento...ci sono controindicazioni per quasto formato??

[tutmosi3]

Le immagini GIF non hanno controindicazioni. Sono le più utilizzate nel web, insieme alle JPG. Supportano le animazioni e le trasparenze, ma hanno solo 256 colori. GIF sta per formato di grafico di interscambio che vuol dire tutto e niente, è comunque un formato compresso largamente utilizzato per la sua leggerezza.
L'esportazione in HTML da Photoshop è una conversione che io ho usato 1 o 2 volte. Tale trasformaqzione fa si che tu abbia già una pagina HTML pronta all'uso. Quindi non capisco perchè tu deva passare per Dreamweaver.
Ciao

[mslv]

Mi chiedo perchè non fanno un programma per fare pagine web che utilizzi i css...

in modo da posizionare immagini e testo in qualunque parte della pagina.

[Ciaba]

Originariamente inviato da tutmosi3
L'esportazione in HTML da Photoshop è una conversione che io ho usato 1 o 2 volte. Tale trasformaqzione fa si che tu abbia già una pagina HTML pronta all'uso. Quindi non capisco perchè tu deva passare per Dreamweaver.
Ciao

...e come faccio tutti i collegamenti tra le pagine e il resto della pianificazione??...nn mi dire in HTML che nn ci capisco una virgola...Inoltre nn è tutto rose e fiori...pur avendo fatto come base un'immagine 1024x768pixel la preview mi risultava nn centrata con dei bordi e con le barre di scorrimento... penso che in dreamweaver si possa correggere...nn so come, ma credo si possa fare.

p.s.Jedi ti ho invaso il 3D...perdonami spero di nn andare troppo fuori tema...se ti servono dritte di basissima mi offro volontario

[Jedi82]

ehm e vero pero...aprine uno nuovo!! Ho capito che in Dw e tutta una questione di tabelle nel senso che riempendo la pagina di tabelle e tutto piu facile, hai molto piu modo di muoverti ma c'e forse altro metodo..no? maybe un po piu facile, ditemi guru!

[Ciaba]

wow scorpion...scusami...nn avevo visto che hai risposto...grazie unmiliardo......stasera provo e poi ti so dire .....grazie di nuovo...Credevo che fosse caduto tutto nel dimenticatoio del forum

[Ciaba]

[OT]...ok...trasloco...Io l'avevo aperto poi nessuno mi rispondeva(invece hanno risposto ma me ne sono accorto solo stasera ), e alla prima occasione mi sono tuffato nell'argomento...Ti devo un paio di giorni doi parcheggio... tx

Tutmosi se ti và di esaurirti ancora un pò sono quì sotto...
http://forum.hwupgrade.it/showthread...hreadid=865839
[/OT]

[tutmosi3]

@ mslv
I fogli di stile permettono di fare una marea di cose ma non ho capito che collegamento possano avere con il posizionamento delle immagini. Essi servono per dare, per esempio, le direttive su font, stile, dimensione delle scritte delle pagine alle quali si appoggiano. Non sono facili da gestire per un software, che è e rimarrà sempre stupido. Per una gestione davvero ottimale ci vuole, e ci vorrà sempre, l'elastica intelligenza umana.

@ Jedi82
I modi sono principalmente 3. Il primo lo hai centrato in pieno: gestire lo spazio con le tabelle. Il secondo lo ha centrato Ciaba: farsi tutto con Photoshop, esportarlo in HTML e poi fare qualche aggiustamento (se serve) con Dreamweaver. Il terzo ve lo dico io: Flash.
Con Flash crei le pagine direttamente partendo dalla loro interfaccia, non ci sono problemi di tabelle in quanto fai finta di avere una lavagna libera sotto le tue mani e ci posizioni quello che vuoi, dove vuoi. Non ci sono problemi di rollover, in quanto associ ad un oggetto uno stato che cambia in base alla posizione del mouse sopra di esso. Non ci sono problemi di dinamismo in quanto ASP e PHP sono supportati alla grandissima. Non ci sono problemi di collegamenti alle altre pagine: in quanto nella barra in basso digiti l'indirizzo al quale si deve connettere il browser. Non ci sono problemi di conversioni, in quanto una volta esportata la pagina in HTML essa è pronta per essere pubblicata.
Il rovescio della medaglia è che sconsiglio di approdare a Flash senza essersi un po' infarinati sull'HTML. Flash viene considerato un software, io lo considero alla stregua di un linguaggio di programmazione, il linguaggio degli Action Script.

Quindi amici ... Buon HTML a tutti, poi se vi va bene, buon Flash a tutti.

Ciao

[tutmosi3]

Eccoci Ciaba

L'idea di Scorpion è eccellente. Le percentuali sono comode per queste occasioni, tieni presente che il ridimensinamento non sarà una bellezza da vedere. Comunque dando 100% avrai sempre l'are piena a dispetto della risoluzione, problema di cui ti parlerò in seguito.
Le immagini di sfondo sono belle ma difficilmente gestibili, specie se uno non è scafato.
Esempio se hai un'immagine 1024*768 (ed il monitor ha risoluzione 1024*768) ti compariranno le barre di scorrimento per 2 motivi: i bordi del foglio sul quale lavori non sono a 0 e non hai tenuto conto dello spazio che IE (o chi per esso) occupa nel monitor con le barre.
Altre difficoltà: se hai una risoluzione maggiore? L'immagine ti apparirà clonata in modo da riempire lo schermo. Un po' come se fossi in Windows ed impostassi uno sfondo del desktop con un'immagine 100*100 in una aera 1024*768 imponendo a Windows di affiancare l'immagine. Il risultato non è di certo esaltante.
Fai attenzione perchè con l'espansione sempre più massiccia di monitor di grandi dimensioni le risoluzioni salgono il 1280*1024 non è poi cosi raro come una volta.
Fai attenzione a dare la precedenza a Firefox. La volpe sta facendo passi da gigante nel mondo dei browser ma IE è ancora largamente oltre l'80% del mercato, quindi se vuoi essere visto da più gente possibile presta un occhio di attenzione a IE.

Ciao

[Ciaba]

...niet...sono riuscito a impostrare le proprietà della pagina inserendo bordi e margini =0 ora si visualizza solo l'immagine( ) ma è sempre sovradimensionata...ergo ci sono ancora le barre di scorrimento
Secondo scorpion dovrei fare l'immagine di partenza più piccola...ok nn è un problema ...il problema è sapere se ci sono delle misure standard da seguire

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="Tabella_01">

p.s. nn c'è modo proprio come in windows di mettere l'immagine centrata??

[tutmosi3]

Le dimensioni non sono costanti perchè i browser che visualizzeranno la pagina sono molti e le configurazioni che gli utenti possono dare sono molteplici. Un esempio su tutti: le dimensioni dei pulsanti della barra.

Nei siti che ho fatto, con immagini di sfondo molto vincolanti, ho risolto creando una pagina iniziale con uno script in Java che all'apertura della index apriva anche un'altra finestra dalle dimensioni prefissate e non modificabili dall'utente. Attenzione che non è tutto oro quello che luccica, la finsetra dovrà avere necessariamente delle dimensioni compatibili con le risoluzioni standard. A meno che tu non voglia tagliare fuori una fetta di utenti, le dimensioni non dovrebbero essere superiori al 640*480, visto che ancora un 10-12% della popolazione lo usa. A questo punto però tagli fuori quel 20% di utenti che ha una risoluzione superiore al 1024*768, che vedrebbero una finestrella grande come una figurina. Così devi fare un altro script che legga la risoluzione dell'utente ed in base a quello apra una finestra piuttosto che un'altra, dove le differenze tra le due dovrebbero essere solo di dimensione. Onestamente sto mettendo troppa carne al fuoco.

p.s. nn c'è modo proprio come in windows di mettere l'immagine centrata??

Onestamente non ho ancora capito dove hai questa immagine. Noto che nelle proprietà del tag body e nelle definizioni della tabella non hai immagini. Quindi deduco ce l'abbia sparsa da qualche parte nel body o all'nterno della tabella. Per centrarla devi assegnargli la centratura orizzontale (come in Word) e quella verticale (scegli Middle dal menù a tendina). Tieni presente che se è dentro ad una cella te la centrerà rispetto a quella cella.

Ciao

[Jedi82]

ma se imparassi flash, devo saper creare qlc ho e strutturale come Dmx? Nel senso devo conoscere la grafica o no x usarlo?

[Ciaba]

...nn sapevo che conoscessi l'arabo.....
Riguardo al file HTML nn so che dirti...se vuoi te lo mando e gli dai un okkio oppure ti posto tutto l'editabile...giusto per capire...mi faresti un enorme favore.

[Ciaba]

...ho dato un occhio al file(la parte eseguibileo come si chiama), e in effetti nn c'è un immagine di sfondo...ma credo che ci sia un motivo(per quello che ho capito quindi potrebbe èssere sbagliato): con IR ho salvato in Html ma lui cos'ha fatto??...in pratica a creato una tabella di base grande quanto l'immagine 1024x... e poi l'ha suddivisa in celle(?) Tabelle(?) uteriormente...in pratica l'immagine intera nella cartella immagini che si è creata con il salvataggio dell'html nn c'è....ma ci sono porzioni di immagine che poi vengono ricomposte secondo lo schema a tabelle....Mi sarò spiegato??

[Jedi82]

a me na cosa che urta terribilmente e quando su Dmx ho una tabella fatta in un certo modo e quando vado a vederne l'anteprima ecco che e totalmente sballataaaaa, ma come diavolo e possibile?? Vi prego ditemi!!!!

E poi una semplie tabella con una colonna e due righe di cui la prima un po meno alta xc diavolo n me la mantiene mai????

[tutmosi3]

Se devo essere sincero non ho capito molto.
Comunque mandami pure il file, io ci darò un occhio compatibilmente con i miei tempi (biblici).
Ho un'altra perplessità, da come la metti sembra che il pacco di roba che hai fatto, pesi un botto. Se pesa molto, la gente non ti vedrà perchè nessuno rimmarrà on line per dare il tempo alla linea di caricare tutto.

Ciao

[Ciaba]

...nn posso mandarti mail(nn le hai abilitate), ma visto che hai poco tempo nn ti stresso uteriormente......cmq l'html pesa 5k e la cartella immagini sui 203k...è tanto??

segue editabile:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SimoSiteRollhover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (SimoSiteRollhover.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
SimoSiteRollhover_Livello_5_over = newImage("immagini/SimoSiteRollhover_Livell-05.jpg");
SimoSiteRollhover_Livello_3_over = newImage("immagini/SimoSiteRollhover_Livell-09.jpg");
SimoSiteRollhover_Livello_3_down = newImage("immagini/SimoSiteRollhover_Livell-10.jpg");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<table id="Tabella_01" width="1025" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img id="SimoSiteRollhover_01" src="immagini/SimoSiteRollhover_01.jpg" width="1024" height="69" alt="" /></td>
<td>
<img src="immagini/spacer.gif" width="1" height="69" alt="" /></td>
</tr>
<tr>
<td rowspan="4">
<img id="SimoSiteRollhover_02" src="immagini/SimoSiteRollhover_02.jpg" width="179" height="699" alt="" /></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('SimoSiteRollhover_Livello_5', 'immagini/SimoSiteRollhover_Livell-05.jpg'); return true;"
onmouseout="changeImages('SimoSiteRollhover_Livello_5', 'immagini/SimoSiteRollhover_Livello-5.jpg'); return true;"
onmousedown="changeImages('SimoSiteRollhover_Livello_5', 'immagini/SimoSiteRollhover_Livell-05.jpg'); return true;"
onmouseup="changeImages('SimoSiteRollhover_Livello_5', 'immagini/SimoSiteRollhover_Livell-05.jpg'); return true;">
<img name="SimoSiteRollhover_Livello_5" id="SimoSiteRollhover_Livello_5" src="immagini/SimoSiteRollhover_Livello-5.jpg" width="356" height="292" border="0" alt="" /></a></td>
<td colspan="3">
<img id="SimoSiteRollhover_04" src="immagini/SimoSiteRollhover_04.jpg" width="489" height="214" alt="" /></td>
<td>
<img src="immagini/spacer.gif" width="1" height="214" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img id="SimoSiteRollhover_05" src="immagini/SimoSiteRollhover_05.jpg" width="111" height="485" alt="" /></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('SimoSiteRollhover_Livello_3', 'immagini/SimoSiteRollhover_Livell-09.jpg'); return true;"
onmouseout="changeImages('SimoSiteRollhover_Livello_3', 'immagini/SimoSiteRollhover_Livello-3.jpg'); return true;"
onmousedown="changeImages('SimoSiteRollhover_Livello_3', 'immagini/SimoSiteRollhover_Livell-10.jpg'); return true;"
onmouseup="changeImages('SimoSiteRollhover_Livello_3', 'immagini/SimoSiteRollhover_Livell-09.jpg'); return true;">
<img name="SimoSiteRollhover_Livello_3" id="SimoSiteRollhover_Livello_3" src="immagini/SimoSiteRollhover_Livello-3.jpg" width="363" height="143" border="0" alt="" /></a></td>
<td rowspan="3">
<img id="SimoSiteRollhover_07" src="immagini/SimoSiteRollhover_07.jpg" width="15" height="485" alt="" /></td>
<td>
<img src="immagini/spacer.gif" width="1" height="78" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img id="SimoSiteRollhover_08" src="immagini/SimoSiteRollhover_08.jpg" width="356" height="407" alt="" /></td>
<td>
<img src="immagini/spacer.gif" width="1" height="65" alt="" /></td>
</tr>
<tr>
<td>
<img id="SimoSiteRollhover_09" src="immagini/SimoSiteRollhover_09.jpg" width="363" height="342" alt="" /></td>
<td>
<img src="immagini/spacer.gif" width="1" height="342" alt="" /></td>
</tr>
</table>
</body>
</html>

p.s. forse la sintassi è andata un pò a ramengo postandola ma dovrebbe èssere quasi giusta