[HTML] Il mio primo vero lavoro...

[Dr_Hazard]

Kiamiamolo cosi... primo lavoro.

In effetti appena finita la scuola, avevo le idee moooolto kiare, volevo fare il webmaster a tutti i costi... lavori a casa, quando vuoi, ti diverti e usi solo il PC, troppo bello. Ma dopo alcuni giri in giro, ho mollato questa idea, sotto consiglio di molte persone + esperte di me.

Nonostante ciò, se qualke conoscente mi kiede di fargli il sito, la risposta è ovviamente si, e quindi sono giunto alla relizzazione del mio primo vero sito, visto ke altri lavori li ho fatti, ma la cosa è sempre andata a finire nel cesso (siti fatti, ma mai aggiornati, persone sparite ecc...).

Il sito ke devo fare, è per un gruppo musicale. Ho incontrato il capoccia l'altro ieri e mi ha spiegato come deve venir su:

Deve essere diviso in 2 sezioni, una ke riguarda il gruppo e basta e l'altra ke riguarda il mondo della musica in generale ed altro (una spece di portale insomma...).

Il bello è ke questo tizio, nn fa altro ke passare nottate intere sui vari siti con gif e immagini, infatti è come se avesse fatto tutto il lavoro lui, in quanto il materiale (tutto tutto tutto, ma proprio tutto) me lo procura lui. Io devo solo "montare" il sito.

Premetto ke nn sono espertissimo, ma me la cavo... Però mi blocco spesso davanti a problemi ke nn mi si sono mai presentati e ai quali nn so davvero mettere mani.

Quindi scrivo questo topic, nella speranza ke piano piano, grazie al vostro aiuto, riesca a concretizzare tutte le idee mirabolanti ke passano nella testa di questo gruppo musicale...

|==========|

Per ora iniziamo con la home page provvisoria.
Dico provvisoria, perke, su rikiesta loro, devo fare una pagina con la scritta ALLESTIMENTO, in attesa del completamento totale del sito.
Ho creato già il foglio di stile e attualmente contiene queste informazioni:

body { 
	 background-color: Black;
	 background-image: url(img/Resize-Wizard-1.jpg);
	 background-repeat: no-repeat;
	 background-attachment: fixed;
	 background-position: center center;
	 font-family: Helvetica, sans-serif;
	 font-size: 12px;
	 }

Sembra una cosa stupida, ma i problemi ke si sono presentati nn sono poki, in quanto la scritta da mettere su, è un file gif (la scritta si dissolve e ricompare ed è senza sfondo, solo scritta) e inserendola nel sito, la qualità fa veramente cagare.

HOME PAGE PROVVISORIA CON SCRITTA (nn adattata)

HOME PAGE PROVVISORIA SENZA SCRITTA

SOLO SCRITTA

Perkè?
Ho anke il progetto PSD di photoshop della scritta (passato poi su image-ready e salvato come gif).
Poi questa scritta, andrebbe cmq rimpicciolita ed inserita tra i 2 bottoni e il castello... lì in messo insomma.
Quali sono le procedure da fare? Uso le tabelle per posizionare la scritta o agisco direttamente sul CSS per dargli dimensione e posizione?



Ciao geni, vi ringrazio in anticipo, ciaooooooooooo !!!

[dafebe]

io sono il meno esperto ma perchè vuoi fare immagine in gif???

realizza l'animazione in flash che sicuramente ha qualità migliore.

che dici brutta l'idea?

[webdemo]

Devi evitare che la tua sfumatura finisca a bianco (bordo estremo).
Per evitare quell'effetto devi creare la tua img nel programma di grafica, gia' con lo sfondo nero.

ciaux

[Dr_Hazard]

Ci ho provato, ma niente...

Ho creato un bordo sulla scritta, di colore nero, con varie proprietà (tutte e nessuna) ma il risultato migliora di poko, ma fa sempre skifo

Lasciamo perdere la scritta, visto ke mi hanno affidato un altro compito, ossia di iniziare a strutturare la pagina e renderla navigabile.

Quindi vi elenco i problemi e dubbi ke mi si sono verificati:

Lo sonfo, è enorme, è 1128x783 e quindi la domanda. Come faccio a fare in modo ke si veda tutto quanto e soprattutto ke sia adattato al browser, anke per coloro ke usano strane risoluzioni. Del tipo ke tra 800x600 e 1024x768, lo sfondo si sposta.
Allora tramite il CSS gli ho dato:

background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

E lo sfondo infatti ora è fisso, e centrato, ma nonostante ciò, ho molti dubbi a riguardo, ossia: come si agisce sullo sfondo per fare in modo ke tutti coloro ke visiteranno il sito nn avranno problemi? Cioè... io ho lo sfondo, nn adattato, quali sono le procedure per utilizzarlo come sfondo del mio sito, ke gli devco fare? Lo ridimensiono? Poi...?

Poi ho il problema di posizionare gli oggetti (immagini) all'interno del sito, a mio piacimento... ma questo sopo lo sfondo

Grazie 1k per l'aiuto, sapevo ke qui mi rispondeva qualcuno (a differenza di altri 2 forum )

Ciaoooooooo!!!

[Vincent.Zeno]

Ciao Hazard...

è parecchio difficile poter rispondere esaurientemente a tutte queste domande in una volta.

ti suggerisco di fare un bel giro nella guide di base di html.it

comunque: gli sfondi non si stiracchiano come le altre immagini, hanno altre proprietà.

una gif di 1MB per dire "in allestimento" è eccessivo,
anche se fosse in flash

uno fondo di 1128x783 è uno strano e faticoso modo di pensare lo sfondo: meglio una cosa piccola e ripetuta.

[Dr_Hazard]

Ok... il giro su html.it lo faccio da quando ho imparato ad andare su internet troppo utile sto sitozzo. Cmq sia, ci sono cose ke il sito nn può spiegarmi o meglio, ci sono, ma dovrei sempre sapere qualcos'altro per seguire le guide ke html.it mi fornisce e quindi perke nn usare il forum?

Come vi ho detto nn parto da 0, ho fatto altri 2-3 siti, ma completamente diversi, tutto HTML puro e basta...

Mentre per questo lavoro, mi servirebbe di creare qualcosa di + serio, professionale, quindi come nn appoggiarsi al CSS ed altro? E qui mi servirebbe il vostro aiuto... la guida sul CSS l'ho letta, ho capito il meccanismo e l'ho usato un pokino, come per esempio in questa ultima modifica del sito per posizionare gli oggetti sulla home page.

Ho usato:

.fire1  {
	  margin-top: 275px;
	  margin-left: 155px;
	  }
	  
.fire2 {
	  margin-top: 275px;
	  margin-left: 655px;
	  }	  
	  
.metal {
	  margin-top: 95px;
	  margin-left: 25px;
	  }	  	  
	  
.band {
	  margin-top: 85px;
	  margin-right: 25px;
	  }

Fire 1 e 2 sono le fiaccole, mentre metal e band i 2 pulsanti.

E questo il risultato --> http://hazard.altervista.org

(Con firefox si vede meglio ed inoltre i pulsanti nn vanno a capo, con IE si...)

Aggiungendo quelle istruzioni, sono riuscito + o - a posizionare le immagini come vorrei ke fossero, ma nn ci sono riuscito completamente e quindi mi rivolgo di nuovo a voi kiedendovi:

1) E' giusto il metodo ke ho usato? C'è qualcosa di + preciso da usare?

2) Come potete vedere, il pulsante metal zone, è + grande rispetto all'altro per via della Z ke sporge... e di conseguenza i 2 pulsanti assumono posizioni diverse... come risolvo?

3) Posso fixare anke le immagini oltre lo sfondo? Se scorro la pagina in basso, anke le fiaccole e i pulsanti scorrono.... no!!! Con firefox, usando 1024x768, la barra nn c'è, in quanto entra tutto nella pagina, mentre con IE si può notare questa cosa, in quanto i 2 pulsanti vanno a capo e quindi si crea + spazio.

Grazie regà... vi prego di nn abbandonarmi a me stesso

Vorrei ultimare questo lavoro il prima possibile, anke perke ki me lo ha kiesto, nn vede l'ora ke sia ultimato, ma lavorandoci sopra, mi rendo conto ke da solo, nn ci metterò poko...

Grazie ankora, ciaooo!!!

[Vincent.Zeno]

Bhè... i "pulsanti" e le immagini fiaccola che hai messo sono contenuti della pagina...
è ovvio che scrollino. Tra l'altro non c'è un contenitore: per cui fanno quello che posso/vogliono.

Ma credo che tu non abbia ancora un'idea dei contenuti e del'impaginazione che vorresti ottenere.

Perché non fai un bel disegno dell'insieme e ce lo posti?
così abbiamo un punto di partenza e una destinazione...

[Dr_Hazard]

Certo ke si!

Questa è la Home Page:



Quali sono gli strumenti da usare per realizzare questa home page nei migliori dei modi (nn conosco flash... ma solo HTML, CSS e Photoshop) ???

Poi premendo i 2 pulsanti si entra in 2 sezioni diverse, una riguardo il mondo metal in generale ( ahah) e l'altro riguarda la il gruppo vero e proprio... ma questo dopo.

Anke se sono 3-4 oggetti, c'è da lavorare! In quanto ho notato ke con IE viene uno skifo a dir poko.... bordi bianki intorno ai pulsanti, nn stanno sulla stessa riga, ecc... come risolvo anke questo problemone?

Ciao geni !!!

[Dr_Hazard]

AGGIORNAMENTO

Ho fatto la sezione METAL ZONE, ke ne dite? La vedete bene?

Vincent.Zeno, ho messo lo screen di come deve essere precisamente... ke mi dici?

Ciao e grazieeeee!!!

[Vincent.Zeno]

Vedi se piace questo modo...
il codice è scritto come capita... mettitelo a posto tu

 <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
<style type="text/css">
body  { 
	  background-color: Black;
	  background-image: url(http://hazard.altervista.org/img/fro...age_resize.jpg);
	  background-repeat: no-repeat;
	  background-attachment: fixed;
	  background-position: center 1px;
	  font-family: Helvetica, sans-serif;
	  font-size: 12px;
	  margin: 0;
	  }
</style>
</head>

<body>

<div style="position: absolute; z-index: 1; left: 20%; top: 30%; border: 1px solid red;" id="livello1">
</div>
<div style="position: absolute; z-index: 1; right: 20%; top: 30%; border: 1px solid red;" id="livello2">
</div>
<div style="position: absolute; z-index: 1; left: 0%; top: 70%; border: 1px solid red;" id="livello3">
</div>
<div style="position: absolute; z-index: 1; right: 0%; top: 70%; border: 1px solid red;" id="livello4">
</div>
</body>

</html>

Ovviamente sconsigliamo l'uso dei frame per il resto del sito:
meglio inclusioni lato server, facili. Includere files in HTML

Per il grigiore delle trasparenze su IE ti suggerisco di creare file gif.

It's all.