Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 21
  1. #1

    [Newbie] Sito a partire da bozza su Fireworks

    Ciao a tutti, eccomi con una domanda che probabilmente risulterà stupida a tutti voi... vi prego di portare pazienza perchè è la prima volta che provo a realizzare un sito con css e xhtml

    La mia collega mi ha passato la grafica completa del sito, realizzata in formato png su fireworks... normalmente si salvano i tagli e lui ti fa automaticamente la pagina html con le tabelle e le immagini al posto giusto... ma per farla con xhtml e css come devo fare? VVoVe:

    Come faccio per replicare esattamente l'immagine png che mi è stata passata con xhtml e css? VVoVe:

    Cioè, io mi scrivo la struttura del sito con xhtml... ma poi come faccio coi css a renderla precisamente uguale alla mia immagine?
    Aiutooooo!
    Allie Graywords

  2. #2
    intando potresti allegarci l'immagine...detto questo lavori sul background e sulle immagini vere e proprie...vediamo se siamo in grado di aiutarti..

  3. #3
    innanzitutto separa contenuto e presentazione

    le immagini che fanno parte della presentazione le inserirai come sfondi della tua stupenda marcatura


  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Il primo passo e` capire la struttura logica della pagina.
    Se parti dalla grafica, il lavoro diventa piu` difficile.

    Il linguaggio moderno (XHTML) separa contenuto da presentazione (come suggeriva Andrea): se parti dalla presentazione, poi devi adeguare il contenuto, e cio` non e` molto sano.

    In linea di massima, il grafico (la persona che si occupa della presentazione) deve lavorare sui blocchi logici.
    E` un percorso diverso da quanto si fa con la carta stampata, ma e` necessario perche` nel Web non puoi sapere con quale strumento verra` visualizzata la pagina (cosa che invece e` nota nella tipografia tradizionale).

    Il vantaggio e` che la pagina verra` vista in maniera ottimale (non necessariamente identica) in tutti i browser, compreso quelli non visuali.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Grazie a tutti, siete molto gentili

    In genere da noi si parte con la grafica e poi si "traduce" in HTML, questa volta però volevo provare ad usare XHTML e CSS perchè vorrei lasciarmi alle spalle i vecchi layout tabellari, ho scelto questo sito per iniziare perchè ha una grafica piuttosto minimal, però appunto non saprei come fare per avere una resa identica (il più possibile ) alla grafica che mi è stata passata
    Vi allego la bozza in jpg così magari mi date qualche suggerimento

    Grazie ancora!
    Allie Graywords

  6. #6
    io farei cosi...un box contenitore con dentro due div flottanti con sotto il div menu..in uno inserirai logo (cerchio rosso) ed il testo sottostante nell'altro invece posizionerei i vari blocchi di testo e ricerca..

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Allora io vedo in quell'immagine:
    - un blocco a sinistra con logo e nomi
    - nel blocco a dx vedo un header, un corpo, un footer.

    Quindi la struttura logica sara`:
    codice:
    <body>
     <div id="logoNomi">
       [img]...[/img]
       <ul id="persone">[*]primo nome[*]secondo nome
         ...[/list]
     </div>
    
     <div id="contenuto">
       <div id="header">
         
    
     ... </p>
       </div>
       <div id="corpo">
         ....
       </div>
       <div id="footer">
         
    
     ... </p>
       </div>
     </div>
    </body>
    Solo a questo punto posso iniziare a posizionare i blocchi:
    codice:
    html,body {
      font: 100%; /* eventualmente selezionare il font-family */
      width: 100%;
    }
    body {
      background: /* azzurro che vuoi */;
    }
    #logoNomi {
      float: left;
      width: 30%;
      margin: 0;
      padding:0;
      border: 0;
    }
    #contenuto {
      float: left; /* oppure right */
      width: 69%;  /* lascio 1% per gli arrotondamenti */
      margin: 0;
      padding:0;
      border: 0;
    }
    
    #logo {
      width: /* quello che e` */;
      height: ...;
      margin: auto;
    }
    #persone {
      list-style-type: none; /* non ricordo se va messo qui o nel li */
    }
    #persone li {
      font-variant: small-caps;
    }
    
    #header {
      width: 100%;
      ...
    }
    #corpo {
      width: 100%;
      ...
    }
    #footer {
      width: 100%;
      ...
    }
    ...
    Si procede poi partendo dall'esterno verso i particolari.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Grazie ancora a tutti
    Sono arrivata a questo punto: link
    e questo è il CSS link ; potreste dirmi se ci sono degli errori concettuali (avevo dimenticato di dire che nella parte bianca nella metà inferiore della pagina ci andranno delle cose ! ) e farmi capire come posso posizionare al meglio i vari elementi per farli risultare come nella bozza?

    Grazie ancora per il vostro preziosissimo aiuto!

    (ovviamente devo ancora mettere i colori, i font ecc. alle varie parti del testo ! )
    Allie Graywords

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Rigurado la DTD: in questa fase io preferisco usare XHTML 1.0 Strict, per compatibilita` con le versioni vecchie dei browser.

    Ci sono degli errori di sintassi (non rilevate dai browser), tipo l'inserimento di testo o link direttamente nei <div>, e altre sciocchezze del genere (che non sono poi tanto sciocchezze: una sintassi corretta serve per avere una visualizzazione migliore in ogni browser).
    Usando XHTML 1.1 non puoi omettere il prologo XML (ma IE6 poi interpreta a modo suo).

    Ti conviene controllare il codice sia XHTML che CSS tramite i validatori: validatore HTML validatore CSS

    font: metti sempre un font generico, altrimenti se il browser non ha il verdana, visualizza con font con grazie (esempio: font: 100% Verdana, arial, sans-serif; )
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  10. #10
    Ciao! Avevo sospeso il lavoro per qualche tempo, ed ora rieccomi qui!
    Ecco il punto dove sono arrivata, ma ho alcuni dubbi... come mai il logo rimane inchiodato lì in alto a sx e nn si sposta neanche se lo prego in cinese? E come mai i link sotto la scritta Soon sono diventati minuscoli? VVoVe:

    Aiutooooo
    Allie Graywords

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.