Problema zoom

**Giovannino75b32** · 13-04-2011, 23:48

Ciao, sto tentando di fare un favore ad un mio amico, che ha un piccolo albergo, cercando di realizzargli un semplice sito web a costo zero, ma incontro alcuni problemi che non so risolvere. Penso (spero) che si tratti solo di banalità che con la mia incompetenza non riesco a superare, e spero quindi che qualcuno qui riuscirà a dirmi come fare!
Dunque: ho scaricato un template e sono andato a modificarlo con photoshop. Ho diviso in slices, e salvato per web e dispositivi.

Ecco il file, come lo vedevo in Photoshop, prima di salvarlo:
http://gg8.altervista.org/prova/photoshop.JPG

Apro quindi con Dreamweaver, e nelle anteprime con IE e Firefox sembra tutto a posto. Posso zoomare le immagini fino a ridurle a un francobollo, senza problemi:

http://gg8.altervista.org/prova/IE.JPG
http://gg8.altervista.org/prova/firefox.JPG

Ma già googlechrome crea qualche disturbo:
http://gg8.altervista.org/prova/googlechrome.JPG
il mosaico tende infatti a frammentarsi.

Questo diventa ancora più evidente quando, con Dreamweaver, inserisco un form con alcuni campi. Ecco cosa succede:
http://gg8.altervista.org/prova/IE2.JPG
http://gg8.altervista.org/prova/firefox2.JPG
http://gg8.altervista.org/prova/googlechrome2.JPG

Infine, ecco gli html:
http://gg8.altervista.org/prova/sempronio.html
ottenuto da Photoshop, senza alcuna modifica

http://gg8.altervista.org/prova/sempronio2.html
dopo aver inserito i moduli in Dreamweaver

Ecco invece cosa vedo io in Dreamweaver, in modalità progettazione, prima di fare l'anteprima:
http://gg8.altervista.org/prova/dreamweaver.JPG

Mi piacerebbe avere la possibilità di zoomare +o -, senza che si crei alcuna frammentazione della pagina.

Spero che qualcuno possa aiutarmi, tenendo conto che le mie competenze sono molto terra terra!

Ciao, Gio

Ps. Le immagini in questi esempi sono fittizie, solo per fare la prova! Non è quello l’”alberghetto” del mio amico!

**Giovannino75b32** · 14-04-2011, 11:02

Ho provato a fare ricerche nel Forum, senza trovare un argomento analogo che potesse suggerirmi la soluzione. Possibile che solo io ho incontrato questo problema fino ad ora?

**Giovannino75b32** · 14-04-2011, 13:39

Se qualcuno mi aiuta gli regalo un TV Sony TFT 132 cm!

Va meglio così?

**Prill** · 14-04-2011, 14:07

Giovannino, si risponde sul forum quando si può, non è che con post simili ottieni di più, anzi magari indisponi pure chi ti darebbe una mano.
Passando al problema: la tua pagina è interamente da rifare. Infatti usi tabelle per di più con mollte celle inutili e immagini spaziatrici, ma poi risulta anche completamente inaccessibile perché è fatta di sole immagini. Va rifatto un layout con i css, il testo nelle immagini convertito in testo...

**Giovannino75b32** · 14-04-2011, 14:52

ti ringrazio per la risposta e mi scuso per l’ironia. Mi chiedo a questo punto l’utilità dei templates che si trovano a milioni in rete. Insomma, il risultato che ho ottenuto è derivato dal salvataggio del file con Photoshop con “salva per web e dispositivi”, poi ho aperto il file html con Dreamweaver.
Qual è il senso di un sistema di lavoro tanto diffuso (quasi tutti i templates che ho visto in giro sono fatti per Photoshop), se poi uno li apre, li personalizza, li salva per il web, e si ritrova, come dici tu, con una pagina interamente da rifare? Ciao

**Prill** · 14-04-2011, 15:46

Un layout si fa coi css, non con un'immagine esportata in sezioni per la quale photoshop, che non è un editor html, ti ha creato tabelle con celle a profusione solo per immagini spaziatrici in un codice che è inguardabile.
Più senso avrebbe avuto impostare l'immagine in Dreamweaver come sfondo da ricalco e disegnarci poi sopra il layout. Del resto se guardi le tante sezioni dell'immagine ne troverai di certo pezzetti interamente verdi, a che servono se puoi semplicemente impostare un colore di sfondo? Quel che è peggio, se proverai a modificare qualcosa in una cella, ti si sballerà tutto
Una base che potrebbe aiutarti:

codice:

<!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>index2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

* {margin:0; padding:0;}

body {background-color:#4D662C;}

#container {width:1082px;background-color:#5F7C3C;border:1px solid #fff;margin:0 auto}

#header {}

#header #logo {width:882px; float:left}

#header #link {width:200px; float:right}

#content {clear:both}

#col1 {float:left;width:495px;}

#col2 {float:left;width:255px;}

#col3 {float:right;width:332px;}


h2 {color:#fff;background-color:#374B1A; padding:5px 30px}
#menu {  border: 1px solid #fff;border-bottom:none;
}
#menu ul {
  list-style-type:none;
}
#menu li {
  border-bottom: 1px solid #fff;padding:5px 30px
}
#menu a {
  display:block;
  font-family:verdana;
  font-size:16px;
  color: #fff;
  text-decoration: none;

}
#menu a:visited {
}
#menu a:hover {
}

#footer {width:100%;clear:both}

</style>
</head>

<body>

<div id="container">
   <div id="header">
      <div id="logo">Hotel Ristorante Sempronio</div>
      <div id="link">Home - Contatti</div>
   </div>
   <div id="content">
      <div id="col1">
         contenuto colonna 1
      </div>
      <div id="col2">
            <div id="menu">
		<ul>
		[*]Chi siamo
		[*]Servizi
		[*]Camere
		[*]Ristorante
		[*]Contatto
		[*]Foto 
		[/list]
	     </div>
	</div>

      <div id="col3">
        <h2>Novit&agrave; ed eventi</h2>
        

contenuti</p>
        <h2>Novit&agrave; ed eventi</h2>
        

contenuti</p>
      </div>
   </div>
   <div id="footer">footer</div>

</div>



</body>
</html>

Prova ora a riempire le colonne coi tuoi testi, le foto e il resto

Discussione: Problema zoom

Strumenti discussione

Ricerca discussione

Visualizza

Problema zoom

Permessi di invio