Trasformare un immagine in una tabella

arles90 · 16 Apr 2011

Salve a tutti ragazzi...premetto che ho provato a cercare se nel forum esisteva già una risposta alla mia domanda, ma non l'ho trovata o non sono stato abbastanza bravo quindi vi espongo il mio problemuccio.

Allora ho creato con photoshop il layout grafico di un sito che vorrei creare...ho usato lo slice tool per spezzare il layout in più parti e poi tramite la funzione di ps mi sono ricavato la pagina html + css + immagini gif (alcuni mi hanno sconsigliato questo procedimento)

Fin qui tutto ok...apro la pagina con dreamweaver ritrovandomi il layout perfettamente cosi come l'ho creato, soltanto che ora ovviamente ogni sezione del layout sono solo immagini, io vorrei trasformare le varie sezioni in tabelle dove poterci inserire i contenuti (foto-testo-flash ecc)

Si può fare? Se si...Come si fa? Grazie in anticipo

p.s: sono alle prime armi abbiate pietà di me

qui c'è il codice css che mi ha creato in auto photoshop

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>layout sito</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- Save for Web Styles (layout sito.psd) --> <style type="text/css"> <!--  #Tabella_01 { 	position:absolute; 	left:0px; 	top:0px; 	width:960px; 	height:900px; }  #layout-sito-01_ { 	position:absolute; 	left:0px; 	top:0px; 	width:960px; 	height:25px; }  #layout-sito-02_ { 	position:absolute; 	left:0px; 	top:25px; 	width:50px; 	height:875px; }  #btn-home_ { 	position:absolute; 	left:50px; 	top:25px; 	width:111px; 	height:60px; }  #btn-forum_ { 	position:absolute; 	left:161px; 	top:25px; 	width:128px; 	height:61px; }  #btn-gallery_ { 	position:absolute; 	left:289px; 	top:25px; 	width:149px; 	height:61px; }  #btn-svago_ { 	position:absolute; 	left:438px; 	top:25px; 	width:124px; 	height:60px; }  #btn-tutorial_ { 	position:absolute; 	left:562px; 	top:25px; 	width:149px; 	height:60px; }  #btn-scambiox20link_ { 	position:absolute; 	left:711px; 	top:25px; 	width:199px; 	height:60px; }  #layout-sito-09_ { 	position:absolute; 	left:910px; 	top:25px; 	width:50px; 	height:875px; }  #layout-sito-10_ { 	position:absolute; 	left:50px; 	top:85px; 	width:111px; 	height:150px; }  #layout-sito-11_ { 	position:absolute; 	left:438px; 	top:85px; 	width:472px; 	height:150px; }  #layout-sito-12_ { 	position:absolute; 	left:161px; 	top:86px; 	width:277px; 	height:149px; }  #table-1_ { 	position:absolute; 	left:50px; 	top:235px; 	width:600px; 	height:225px; 	background-image: url(images/foto-tabella-1.gif); }  #table-02_ { 	position:absolute; 	left:650px; 	top:235px; 	width:260px; 	height:225px; }  #table-3_ { 	position:absolute; 	left:50px; 	top:460px; 	width:200px; 	height:400px; }  #table-4_ { 	position:absolute; 	left:250px; 	top:460px; 	width:400px; 	height:200px; }  #table-5_ { 	position:absolute; 	left:650px; 	top:460px; 	width:260px; 	height:400px; }  #table-6_ { 	position:absolute; 	left:250px; 	top:660px; 	width:400px; 	height:200px; }  #layout-sito-19_ { 	position:absolute; 	left:50px; 	top:860px; 	width:860px; 	height:40px; }

questa invece è l'immagine del layout..(non si vede tutto)
per rendere l'idea a me interesserebbe inserire contenuti in tutti gli spazi bianchi (che sarebbero le tabelle che vorrei in css ma che adesso sono solo immagini)

micio86 · 17 Apr 2011

No

Credo non si possa fare...
Ovvero lo devi fare manualmente cm faccio io.
Io faccio come te, creo il layout grafico 1500x1500 ad esempio. Poi lo divido in 3 sezioni orizzontali: header, main e footer.Saranno 3 div aventi come sfondo il pezzo d'immagine centrato e non ripetuto. Poi pezzo x pezzo mi aggiusto la mia grafica magari senza uso di tabelle (usa sempre i div). Faccio in modo che la finestra centrale si adatti da 800 a 1280 in orizzontale senza dover scrollare in x. Stessa cosa faccio in Y a seconda del contenuto del main. Infine faccio i test su IE6 IE7 e Firefox.

arles90 · 18 Apr 2011

micio86 ha scritto:
Credo non si possa fare...
Ovvero lo devi fare manualmente cm faccio io.
Io faccio come te, creo il layout grafico 1500x1500 ad esempio. Poi lo divido in 3 sezioni orizzontali: header, main e footer.Saranno 3 div aventi come sfondo il pezzo d'immagine centrato e non ripetuto. Poi pezzo x pezzo mi aggiusto la mia grafica magari senza uso di tabelle (usa sempre i div). Faccio in modo che la finestra centrale si adatti da 800 a 1280 in orizzontale senza dover scrollare in x. Stessa cosa faccio in Y a seconda del contenuto del main. Infine faccio i test su IE6 IE7 e Firefox.

Non ho capito tanto bene...sono un po ignorante

....io creo il layout su photoshop poi divido la parte superiore dove c'è il menu (header) la parte centrale (quella che vorrei trasformare in tabelle) dove ci sono i vari rettangoli bianchi (main) e poi il resto dello sfondo dalla fine del rettangolo bianco in poi (footer)

L'immagine di sfondo non è ripetuta e sono d'accordo con te con l'adattare per non far scrollare...ma io ancora non capisco dopo aver fatto il layout come ci inserisco dentro il contenuto? Sono tutte immagini

micio86 · 19 Apr 2011

Ho capè!

Si ma te devi prendere le parti che ti interessano e usarle come sfondo... in modo da scriverci sopra.Hai i 3 pezzi orizzontali no?!
Su Header e footer non cè molto da fare... tipo min-width max-width height e margin:auto.
All'interno del main magari avrai dei box? A quel punto l'immagine di sfondo dovrai dividerla dai box ovviamente, mentre i box li dovrai usare (1 solo ripetuto se sono uguali) sui singoli box ke saranno dei div più piccoli. Mi fai vedere l'immagine magari??
Poi se oggi riesco a fare il template x il sito della mia band te lo mando zippato!

micio86 · 19 Apr 2011

Tipo

Devi dividerle così e poi CSS a morire.
Lo sfondo header non lo carico ke occupa troppo cmq devi togliere il menu bar totalmente e lasciare solo lo sfondo.
Ovviamente se non conosci Css te lo sogni di farlo.... :book:

arles90 · 26 Apr 2011

Creare box model con angoli arrotondati

micio86 ha scritto:
Devi dividerle così e poi CSS a morire.
Lo sfondo header non lo carico ke occupa troppo cmq devi togliere il menu bar totalmente e lasciare solo lo sfondo.
Ovviamente se non conosci Css te lo sogni di farlo.... :book:

Grazie micio per la risposta, a causa del lavoro non ho potuto continuare comunque sono ripartito da zero dividendo tutte le zone come hai fatto tu, ho impostato il colore di sfondo e poi volevo creare un box con angoli arrotondati prendendo le immagini di sezione del layout grafico, ho seguito la guida anche di questo sito

https://www.mrw.it/css/articoli/creare-box-angoli-arrotondati_833.html

cosa sbaglio? Come puoi vedere non ci sono le immagini tagliate con photoshop nonostante le ho caricate

Seguo tutti i passi ma non mi escono fuori le immagini nell'anteprima

CSS:

HTML:

<style type="text/css">
.background {
	background-color: #EC1D83;
}
.contenitore alto{
	width: 860px;
	background-image:url(../../images/header-contenitore.gif);
	background-repeat:no-repeat;
	background-position: center top;
	padding-top:20px;
}
.contenitore medio{
	width:860px;
	background-image:url(../../images/main-contenitore.gif);
	background-repeat:repeat-y;
	background-position: center;
}
.contenitore basso{
	width:860px;
	background-image:url(../../images/footer-contenitore.gif);
	background-repeat:no-repeat;
	background-position: center bottom;
	padding-bottom:20px;
}
.box-testo
{
  margin: 0px 10px 0px 10px;
}
</style>
</head>

<body class="background">
<div class="contenitore alto">
<div class="contenitore medio">
  <div class="contenitore basso">
   <div class="box-testo">aiutatemi!
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Il risultato è questo:

micio86 · 26 Apr 2011

Forse le immagini non sono in: ../../images/header-contenitore.gif
ma per esempio sono in: ../images/header-contenitore.gif
oppure sono in: images/header-contenitore.gif

Dipende dove hai la pagina del css

arles90 · 26 Apr 2011

micio86 ha scritto:
Forse le immagini non sono in: ../../images/header-contenitore.gif
ma per esempio sono in: ../images/header-contenitore.gif
oppure sono in: images/header-contenitore.gif

Dipende dove hai la pagina del css

La cartella non era situata dove c'era la pagina, adesso l'ho messa e ho cambiato le directory in dreamweaver ma niente risulta sempre lo stesso perchè?

micio86 · 27 Apr 2011

Cavolo!!!

Manca l'height!!!!!
Lo devi mettere fisso all'altezza delle immagini se no hai delle linee di altezza 0, perchè all'interno dei div non cè e non ci deve essere testo!!!
Inoltre i nomi delle classi devono essere senza spazi tipo: contenitore_alto

arles90 · 27 Apr 2011

Graziee!

micio86 ha scritto:
Manca l'height!!!!!
Lo devi mettere fisso all'altezza delle immagini se no hai delle linee di altezza 0, perchè all'interno dei div non cè e non ci deve essere testo!!!
Inoltre i nomi delle classi devono essere senza spazi tipo: contenitore_alto

Ho tolto gli spazi nelle classi e mi ha dato finalmente il risultato

...ho impostato anche le altezze delle immagini per far uscire il box delle dimensioni che voglio però sono sorti 2 problemi

1° ho impostato la posizione centrale per il box ma si visualizza a sinistra

2° Non so perchè ma il box mi appare con l'header il footer e poi il main perchè?
Per farti capire ti posto l'immagine

HTML:

<style type="text/css">
.background {
	background-color: #EC1D83;
}
.contenitore_alto{
	width: 860px;
	height:100px;
	background-image:url(images/header-contenitore.gif);
	background-repeat:no-repeat;
	background-position: center top;
	padding-top:20px;
}
.contenitore_medio{
	width:860px;
	height:425px;
	background-image:url(images/main-contenitore.gif);
	background-repeat:repeat-y;
	background-position: center;
}
.contenitore_basso{
	width:860px;
	height:100px;
	background-image:url(images/footer-contenitore.gif);
	background-repeat:no-repeat;
	background-position: center bottom;
	padding-bottom:20px;
}
.box-testo
{
  margin: 0px 10px 0px 10px;
}
</style>
</head>

<body class="background">
<div class="contenitore_alto">
<div class="contenitore_medio">
  <div class="contenitore_basso">
   <div class="box-testo">aiutatemi!
    </div>
   </div>
  </div>
 </div>
</body>
</html>

micio86 · 27 Apr 2011

Xkè sbagli la struttura:

HTML:

<div class="contenitore alto"></div>
<div class="contenitore medio"></div>
<div class="contenitore basso"></div>

Li devi vedere come 3 rettangoli distinti e per centrarli nel css devi mettere:

margin-left:auto;
margin-right:auto;

Mentre per le dimensioni per fare un bel sito dovresti non mettere i width fissi ma usare min-width:720px e max-width:920px

Sono valori messi a caso ma che cmq fan vedere il sito anche su schermi 800x600
senza scrollare in orizzontale.
Header e Footer avranno height fisso mentre il main sarà auto a seconda del contenuto.

arles90 · 28 Apr 2011

Grazie!

micio86 ha scritto:
Xkè sbagli la struttura:

HTML:

<div class="contenitore alto"></div> <div class="contenitore medio"></div> <div class="contenitore basso"></div>

Li devi vedere come 3 rettangoli distinti e per centrarli nel css devi mettere:

margin-left:auto;
margin-right:auto;

Mentre per le dimensioni per fare un bel sito dovresti non mettere i width fissi ma usare min-width:720px e max-width:920px

Sono valori messi a caso ma che cmq fan vedere il sito anche su schermi 800x600
senza scrollare in orizzontale.
Header e Footer avranno height fisso mentre il main sarà auto a seconda del contenuto.

Grazie micio, grazie alle tue dritte sono riuscito a creare il layout del sito per intero, forse ci ho aggiunto molto codice inutile ma mi va bene cosi, ho provato su altervista e almeno per ora lo carica in mezzo secondo

...ma mi servi ancora XD adesso pian piano ci sto inserendo il contenuto, ti volevo chiedere una cosa anzi 2 prima di continuare a riempire il tutto con i contenuti

1° Sto usando photoshop e dreamweaver...come faccio con quest'ultimo a testare il mio sito su ogni risoluzione? Devo cambiare io la risoluzione del mio schermo o ci sta un' apposita funzione?

2° Quando finirò di inserire il contenuto della homepage installerò un forum, quello che però mi interessa e creare un form iscrizioni con login e password (magari con messaggio di benvenuto a log in avvenuto) che colleghi l'utenti sia al sito che al forum...cioè se un utente si logga sul sito vorrei che lo stesso utente possa loggarsi sul forum con le stesse credenziali e non avere 2 account diversi, spero mi sono spiegato bene....grazie in anticipo!

micio86 · 28 Apr 2011

Beh

Per le dimensioni basta che rimpicciolisci la finestra e questa non scrolli in orizzontale fino a un certo punto. Altrimenti puoi si cambiare un attimo la tua risoluzione e vedere.
Cmq prendi d'esempio questo sito ke ho fatto: www.laserpunch.tk
Il CSS lo trovi in alemicio.altervista.org/css/style.css
Guarda bene #header #main e #footer e rispettivi #sfondo_header, #sfondo_main e #sfondo_footer.

Per i login non me ne intendo di forum... studiati un po di php e sessioni magari.
In php una volta fatto il login memorizzi una variabile di sessione ovvero $_SESSION['tua_variabile'] che resta memorizzata anche al cambio di pagina. Quindi dovresti fare un if(isset($_SESSION['tua_variabile'])) accedi al forum o che ne so...
Ovviamente se non sai php non posso aiutarti diversamente. :book:

arles90 · 28 Apr 2011

ridimensionamento

micio ho visto che con la risoluzione 1024x768 appare lo scroll orizzontale, mentre a quelle superiori no...la risoluzione 800x600 non mi interessa perchè ormai è destinata a scomparire, ma quella 1024 mi interessa...come posso fare per ridimensionare il layout a quella risoluzione? Magari poi (ho già il codice) farò in modo che il sito si imposti con quello che ho adesso in automatico a risoluzioni maggiori per gli utenti che hanno una risoluzione schermo maggiore di 1024 mentre per quelli che hanno 1024 mi serve il ridimensionamento per togliere quel fastidioso scroll...come fare?

alevr86 · 29 Apr 2011

DIV nidificati

Come mai usi i div nidificati (uno dentro l'altro)?
Se tu vuoi dividere il layout in tre contenitori (header, maini, footer), essi devono essere sequenziali e non nidificati...

Alessandro

alevr86 · 29 Apr 2011

ridimensionamento

Ti converrebbe creare un div contenitore esterno con:
- width fissa (1024)
- heigth auto
Così solo per schermi con risoluzione minore di 1024 ti apparirebbe lo scroll orizzontale.
I tre div (header, main, footer) andrebbero al suo interno.

Alessandro

micio86 · 29 Apr 2011

Ripeto

Guarda il mio css e capirai

Cerca

Cerca

Trasformare un immagine in una tabella

arles90

Nuovo Utente

micio86

Utente Attivo

arles90

Nuovo Utente

micio86

Utente Attivo

micio86

Utente Attivo

Allegati

arles90

Nuovo Utente

micio86

Utente Attivo

arles90

Nuovo Utente

micio86

Utente Attivo

arles90

Nuovo Utente

micio86

Utente Attivo

arles90

Nuovo Utente

micio86

Utente Attivo

arles90

Nuovo Utente

alevr86

Nuovo Utente

alevr86

Nuovo Utente

micio86

Utente Attivo

Discussioni simili