sfondi sfumati, angoli arrotondati [Era:necessito di un pò di informazioni ...]

[rava34]

Ciao a tutti, è già da un pò di anni che faccio qualche sito internet etc... solo che ora mi accorgo che mi manca ciò che è la grafica. mi spiego meglio, girando nei vari siti vedo sempre grafiche con "doppi sfondi", sfumature, riquadrature etc.. cose che però non si posso fare con Dreamweaver. quindi volevo chiedervi come faccio a realizzare una grafica, per essere più chiaro e permettervi di farmi capire meglio, vi chiedo, come faccio a fare una grafica di questo genere?? http://flash-gallery.com/

spero di ricevere delle vostre risposte, grazie

rava


ps. il mio sito è www.ravaservice.com ( ora lo vedete molto spoglio, poichè lo stò rifacendo e ho minimizzato il tutto. comunque un vostro parere anche se negativo mi farebbe piacere )

[Myaku]

non è il programma che conta, ma il codice
si può gestire tutto da css:
. sfumatura di sfondo: modulo largo un pixel e ripetuto in x, applicato a html, body assieme ad un background-color coincidente con la parte più bassa della sfumatura
. bordi stondati: "nifty corners", oppure usi div annidati e applichi uno sfondo superiore, uno inferiore e la parte centrale con un modulo alto un pixel ripetuto in y. In alternativa, bordi stondati con ombreggiatura li puoi fare anche in js

se non sei pratico con i fogli di stile, puoi iniziare dalla guida base che trovi su css.html.it

intanto di sposto



ps. per quanto riguarda il tuo link personale, c'è una sezione apposta ("Annunci siti web") per la richiesta di pareri. In alternativa, se riguarda solo la grafica, la sezione "loghi, banner & layouts" - una o l'altra, altrimenti è crossposting.

[rava34]

Originariamente inviato da Myaku
non è il programma che conta, ma il codice
si può gestire tutto da css:
. sfumatura di sfondo: modulo largo un pixel e ripetuto in x, applicato a html, body assieme ad un background-color coincidente con la parte più bassa della sfumatura
. bordi stondati: "nifty corners", oppure usi div annidati e applichi uno sfondo superiore, uno inferiore e la parte centrale con un modulo alto un pixel ripetuto in y. In alternativa, bordi stondati con ombreggiatura li puoi fare anche in js

se non sei pratico con i fogli di stile, puoi iniziare dalla guida base che trovi su css.html.it

intanto di sposto



ps. per quanto riguarda il tuo link personale, c'è una sezione apposta ("Annunci siti web") per la richiesta di pareri. In alternativa, se riguarda solo la grafica, la sezione "loghi, banner & layouts" - una o l'altra, altrimenti è crossposting.

ma la parte grafica del sito che abbiamo preso in esame, non è fatta con vera grafica? ( tipo sfondo jpeg/gif e i riquadri idem ) ?

[Myaku]

Originariamente inviato da rava34
ma la parte grafica del sito che abbiamo preso in esame, non è fatta con vera grafica? ( tipo sfondo jpeg/gif e i riquadri idem ) ?

si, ma i layout che prepari sul programma di grafica non lo usi tutto per creare le pagine web.
Non prendi tutto lo sfondo, ma solo una parte. Così come per i riquadri. A volte addirittura potresti ricreare alcuni elementi direttamente su css, senza immagini (ad esempio il box stondato se non avesse l'ombreggiatura)

[rava34]

Originariamente inviato da Myaku
si, ma i layout che prepari sul programma di grafica non lo usi tutto per creare le pagine web.
Non prendi tutto lo sfondo, ma solo una parte. Così come per i riquadri. A volte addirittura potresti ricreare alcuni elementi direttamente su css, senza immagini (ad esempio il box stondato se non avesse l'ombreggiatura)

guarda, io oggi mi sono letto e cercato di capire:
http://css.html.it/guide/leggi/3/gui...iti-con-i-css/
e
http://css.html.it/guide/leggi/19/gu...con-photoshop/

solo che ora non è che abbia molo le idee più chiare!

perchè, ok, mi creo con Pshop esempio la parte sopra, quella con il logo e lo sfondo, però poi per inserirla cosa devo fare? a quel punto faccio una pagina html normale ed inserisco l'immagine! con i fogli di stile cosa ci faccio?
inoltre, creo dei frame? cioè, logo e menù un frame e il contenuto un altro frame così cambia sempre e solo il frame sotto?

[Myaku]

Originariamente inviato da rava34
perchè, ok, mi creo con Pshop esempio la parte sopra, quella con il logo e lo sfondo, però poi per inserirla cosa devo fare?

no. lo sfondo (largo 1 px e alto quanto ti serve, è una cosa), il logo (preferibilmente senza sfondo) dovrebbe essere un'altra. Due elementi distinti

a quel punto faccio una pagina html normale ed inserisco l'immagine! con i fogli di stile cosa ci faccio?

nell'html ci vanno le informazioni (contenuti), nel css la presentazione (ovvero, tutto ciò che riguarda l'aspetto del sito). Uno sfondo non è un contenuto, ma una presentazione.
http://pesanervi.diodati.org/pn/index.asp?a=293

inoltre, creo dei frame? cioè, logo e menù un frame e il contenuto un altro frame così cambia sempre e solo il frame sotto?

ci sono alternative molto più accessibili dei frames. Ne abbiamo parlato diverse volte in xhtml

[rava34]

Originariamente inviato da Myaku
no. lo sfondo (largo 1 px e alto quanto ti serve, è una cosa), il logo (preferibilmente senza sfondo) dovrebbe essere un'altra. Due elementi distinti



nell'html ci vanno le informazioni (contenuti), nel css la presentazione (ovvero, tutto ciò che riguarda l'aspetto del sito). Uno sfondo non è un contenuto, ma una presentazione.
http://pesanervi.diodati.org/pn/index.asp?a=293



ci sono alternative molto più accessibili dei frames. Ne abbiamo parlato diverse volte in xhtml

ti ringrazio per le risposte e spero non sia un problema se ti faccio altre domane....

ok il fatto di 1pix per l'altezza che mi serve però il problema è che nelle varie guide del sito non torvo una guida che mi spiega bene come unire la grafica al CSS ed unire tutto con l'html.
ad esempio, ok faccio il file di 1pix per l'altezza però poi come faccio a dirgli di estenderlo per tutta la lunghezza ? ( e comunque io voglio farlo con il Layout monolitico fisso ).

altra cosa: io creo su Pshop la barra del menù dove metto la barra tutta lunga grigia stondata e sopra metto i vari link home, contatti etc...
1° inserisco tutta la barra oppure solo 1px?
2° come faccio a fare come dicono nella guida a fare il pulsante che cambia quando clicco?
3° creo solo il rettangolino del pulsante in questione di un colore diverso oppure tutta la barra?

scusa ma io ho sempre e solo fatto con Dreamweaver mai con Pshop + css.

rava

[Myaku]

Originariamente inviato da rava34
ad esempio, ok faccio il file di 1pix per l'altezza però poi come faccio a dirgli di estenderlo per tutta la lunghezza ? ( e comunque io voglio farlo con il Layout monolitico fisso ).

usando la proprietà background-repeat o background. La guida di base ai css l'hai vista? (la trovi sempre su css.html.it)

altra cosa: io creo su Pshop la barra del menù dove metto la barra tutta lunga grigia stondata e sopra metto i vari link home, contatti etc...
1° inserisco tutta la barra oppure solo 1px?

guarda, ci sono almeno 3 modi per riprodurla.
1. un'immagine unica + separatore per i link, che però non è la soluzione più leggera
2. modulo di 1 px, parti terminali a sè stanti, separatori per i link
3. immagine unica della dimensione del link, in background ad esso

2° come faccio a fare come dicono nella guida a fare il pulsante che cambia quando clicco?

non ho visto la guida, ma cerca rollover. fattibile in javascript o css

3° creo solo il rettangolino del pulsante in questione di un colore diverso oppure tutta la barra?

no, se l'hover va anche sullo sfondo (grafica della barra) e non solo sul testo, per forza di cose non puoi utilizzare l'opzione 1, altrimenti vincoli la grafica anche agli altri link

[rava34]

Originariamente inviato da Myaku
usando la proprietà background-repeat o background. La guida di base ai css l'hai vista? (la trovi sempre su css.html.it)



guarda, ci sono almeno 3 modi per riprodurla.
1. un'immagine unica + separatore per i link, che però non è la soluzione più leggera
2. modulo di 1 px, parti terminali a sè stanti, separatori per i link
3. immagine unica della dimensione del link, in background ad esso



non ho visto la guida, ma cerca rollover. fattibile in javascript o css



no, se l'hover va anche sullo sfondo (grafica della barra) e non solo sul testo, per forza di cose non puoi utilizzare l'opzione 1, altrimenti vincoli la grafica anche agli altri link

mi sono letto pure la guida base, ho provato a fare le cose come dicono loro nella guida ma non trovo come fare le cose più semplici!

ad esempio... lo sfondo della pagina, lo voglio sfumato dal nero al bianco, poi, come faccio a delimitare la sezione di 760pix? perchè stando a quello che c'è scritto nelle guide che prima avevo indicato dicono che con i fogli di stile css "divido" il foglio per poi inserire ciò che mi interessa nelle divisioni. ma tipo, come faccio a fare un rettangolo con gli angoli smussati?

ti sembrerò scemo ma non ho capito come fare!

[Myaku]

Originariamente inviato da rava34
ad esempio... lo sfondo della pagina, lo voglio sfumato dal nero al bianco, poi, come faccio a delimitare la sezione di 760pix?

crei sull'html un <div>, gli attribuisci un id, e nel css lo richiami dandogli una "width: 760px"

ma tipo, come faccio a fare un rettangolo con gli angoli smussati?

inizia con il cercare "nifty corners".
Altrimenti, devi usare dei div annidati a cui attribuisci
. la parte centrale ripetuta in y
. la parte superiore
. la parte inferiore
(puoi anche ragionare prendendo l'altro asse come riferimento)

ti sembrerò scemo ma non ho capito come fare!

assolutamente no, ma se hai grosse difficoltà a capire le basi può esserti utile iniziare a guardare gli esempi di Layout Gala ed i siti raccolti nelle varie cssgallery in giro per il web.