realizzare un layout da tavola grafica [era: help principiant]

[capuno]

salve ragazzi devo realizzare un sito web e sto cercando di realizzare il layout con l'utilizzo di CSS. Vorrei realizzare una cosa come nel file allegato. Sto avendo un pò di difficoltà sono ancora un perfetto principiante.

[fcaldera]

benvenuto nel forum
ti invito a leggere il regolamento in evidenza (soprattutto la parte evidenziata in rosso) prima di aprire ulteriori thread

[capuno]

Ammetto le colpe e senza nessuna giustificazione. Il tuo titolo non fa una piega è più indicato e aumenta le possibilità di ricevere una risposta adeguata. Grazie del benvenuto, mi impegnerò a non scrivere messaggi che vanno contro le regole di questo forum!

[oronze]

aggiungo un altro consiglio: molte delle persone che leggono la discussione non hanno moltissimo tempo per creare tutto il layout ma se tu esponi volta per volta il tuo problema, hai la possibilità di avere maggiori risposte poichè un conto è dire, il layout va fatto così:
bla bla bla bla
un altro è dire:
dovevi mettere margin-left: -5px;
porta via meno tempo

[capuno]

Grazie

Ma sono alle prime armi e sto ancora cercando di capire come avere un layout simile a quello del jpg! Sto leggendo varie guide in questi giorni ma ancora il risultato non si avvicina a quello desiderato! Non appena entrerò nell'ottica potrò mettere a disposizione il mio lavoro per avere consigli e modifiche! Ma nel frattempo se qualcuno ha suggerimenti su come impostare una base per avere quel layout ne sarei molto lieto.

Thanks

[oronze]

c'è un div laterale con l'albero, un div con il menù, un div con la scritta e poi le varie immagini...credo sia posizionato tutto in maniera assoluta (position: absolute) ma se non so il link non posso esserti d'aiuto...piuttosto che chiedere a noi studiati come è stato realizzato quel layout

[Mich_]

Da quanto ho capito io, capuno ha uno schema grafico e vuole sapere con quale (tipo di) layout lo puo` realizzare.

Per poter procedere, occorre conoscere meglio a cosa serve il tutto: infatti il Web ha strutture semantiche diverse per realizzare cose diverse, e occorre rispettare sempre la sematica, altrimenti la cosa funziona in un brwoser e fallisce in altri o i motori non la piazzano correttamente.

Ecco alcune domande per iniziare.
E` una pagina iniziale (una specie di menu iniziale) in cui le varie immaginette sono dei link? O e` una cosa ripetuta in varie pagine?

E` una struttura fissa (cioe` e` abbastanza piccola da entrare in ogni browser e va fatta esattamente in quel modo)? O e` una cosa che dev'essere in qualchemodo elastica?


Puoi anche vedere alcuni layout/menu pronti: nei "link utili" ci sono riferimenti ad alcune raccolte (ma alle domande di cui sopra devi comunque rispondere, esplicitamente o implicitamente).

[capuno]

Originariamente inviato da Mich_
Da quanto ho capito io, capuno ha uno schema grafico e vuole sapere con quale (tipo di) layout lo puo` realizzare.

Per poter procedere, occorre conoscere meglio a cosa serve il tutto: infatti il Web ha strutture semantiche diverse per realizzare cose diverse, e occorre rispettare sempre la sematica, altrimenti la cosa funziona in un brwoser e fallisce in altri o i motori non la piazzano correttamente.

Ecco alcune domande per iniziare.
E` una pagina iniziale (una specie di menu iniziale) in cui le varie immaginette sono dei link? O e` una cosa ripetuta in varie pagine?

E` una struttura fissa (cioe` e` abbastanza piccola da entrare in ogni browser e va fatta esattamente in quel modo)? O e` una cosa che dev'essere in qualchemodo elastica?


Puoi anche vedere alcuni layout/menu pronti: nei "link utili" ci sono riferimenti ad alcune raccolte (ma alle domande di cui sopra devi comunque rispondere, esplicitamente o implicitamente).

Ciao Mich
Il sito sarà una vetrina dei lavori di due fotografi aggiungendo la biografia e qualche utile informazione, e link attinenti al mondo della fotografia. Adesso questo è un sito per un progetto di esame quindi non sarà pubblicato on line, ma verranno effettuati test off line sull'usabilità ecc... Le immagini rappresantano la mia idea di mettere una galleria sull'home page (mi piacerebbe tanto renderla uguale allo schema grafico) che presenti in modalità casuale o fissa (adotterò la soluzione più semplice) i lavori dei due fotografi, e che ad ogni click si possa vedere un ingrandimento dell'immagine selezionata. Inoltre lo schema sarà fisso anche per le altre pagine ovvero Logo, immagine di sinistra, e menù di navigazione dovranno ripetersi anche nelle altre pagine.
Per far tutto ciò dovrei usare i CSS ma la cosa al momento mi crea problemi in quanto non ho ben capito il funzionamento dei fogli di stile... ma ci sto lavorando su.

Grazie di tutto

[Mich_]

Non hai specificato se la struttura e` fissa o fluida.
Suppongo quindi una cosa fissa (piu` semplice da realizzare).

La struttura io la vedo formata cosi`:

<body>
  <div id="riquadro">
    <div id="menu">
      <ul>[*]<a href="..." title="...">[*]<a href="..." title="...">[*]<a href="..." title="...">[/list]
    </div> 
    <div id="logo">
      <img .... />
    </div>
    <div id="contenuto">
      
    </div> 
  </div> 
</body>

Dopodiche` il CSS dovra` contenere (questa e` una bozza da cui partire, non e` il CSS completo):

html, body {
  width: 100%;
  height: 100%;
  font-size: 100.01%;
}
#riquadro {
  position: absolute;
  left: 50%;
  height: 50%;
  width: ...px;
  height: ...px;
  margin-left: -...px;  /* la meta` di width, ma negativo */
  margin-top: -...px;  /* la meta` di height, ma negativo */
  background: #COLOR url(immaginedisfondo.jpg);
}
#menu {
  position: absolute;
  width: ...px;
  right: 10px;   /* o il valore che vuoi*/
  background: #...;
  color: #...;
}
#logo {
  position: absolute;
  width: ...px;
  height: ...px;
  left: 150px;   /* o il valore che vuoi*/
  top: 200px;   /* o il valore che vuoi*/
}
#contenuto {
  position: absolute;
  overflow: auto;     /* per le pagine successive - per questa non serve */
  width: ...;
  height: ...;
  right: 10px;
  bottom: ...px;
}

Nota che l'uso dei posizionamenti e` normalmente piuttosto difficile, ma mi sembra che in questo caso sia necessario.
Comunque non si possono usare i posizionamenti se non si e` capito il contenuto dei seguenti articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

[capuno]

Sono riuscito a fare i primi passi e ho iniziato a litigare con i css... vorrei capire adesso come posso mettere il menu di navigazione in posizione orizzontale e parallelamente alla posizione del logo...

HTML:

<link href="stile.css" type="text/css"
 rel="stylesheet" />
</head>
<body>
<div id="riquadro">
<div id="menu">
<ul>[/list]
[img]../chisiamo.gif[/img]
<ul>[/list]
[img]../contatti.gif[/img]
<ul>[/list]
[img]../links.gif[/img]
<ul>[/list]
</div>

<div id="contenuto"></div>
<a title="..." href="...">
</a></div>
[img]../logo.gif[/img]
<div id="logo"
 style="top: 200px; left: 150px; width: 147px; height: 73px;">[img]gallery.gif[/img]</div>
</body>
</html>

mentre il css è il seguente :

html, body {
  width: 100%;
  height: 100%;
  font-size: 100.01%;
}
#riquadro {
  position: absolute;
  left: 50%;
  height: 50%;
  width: ...px;
  height: ...px;
  margin-left: -...px;  /* la meta` di width, ma negativo */
  margin-top: -...px;  /* la meta` di height, ma negativo */
  background: #COLOR url(immaginedisfondo.jpg);
}
#menu {
  position: absolute; 
  top: 0;
  width: 200px;
  right: 10px;   /* o il valore che vuoi*/
  background: #...;
  color: #...;
}
#logo {
  position: absolute;
  width: ...px;
  height: ...px;
  left: 150px;   /* o il valore che vuoi*/
  top: 200px;   /* o il valore che vuoi*/
}
#contenuto {
  position: absolute;
  overflow: auto;     /* per le pagine successive - per questa non serve */
  width: ...;
  height: ...;
  right: 10px;
  bottom: ...px;
}

Credo sia una lunga strada quella che mi aspetta... ma avrò pazienza! Grazie