inserire script nel proprio siti, non riesco purtroppo...

[edstarink]

Salve, sto cercando di entrare in questo mondo, ma ancora faccio fatica.
Ho trovato un sito che ti permette di creare effetti particolari usando modelli css
il sito è questo:
http://www.dynamicdrive.com/style/

Quello che vorrei sapere è questo:
Ci sono due codici, uno css e uno html, cosa devo fare per ricreare quel' effetto:
Mi spiego meglio, ho una struttura nel sito e già contiene un file css, siccome posso solo copiare il codice, dovei creare un fil.ss vuoto e incollare al suo interno il codice? in quel caso il nome del file ha importanza per il collegamento?

stessa cosa per il file html, non so come muovermi.
Se volessi avere l' effetto delle foto che si spostano e hanno un' effetto particolare, dovrei copiare il codice html nella pagina e nel punto esatto dove le voglio mettere?

Se fosse cosi, credo che l' effetto venga generato dal file css, per questo chiedo se devo fare una modifica invasiva al codice.
Potete aiutarmi
Grazie infinite

[edstarink]

Scusate se rispondo da solo, ma qualcosa sono riuscito a fare. Ho creato un sito vuoto e due file, uno css e uno html. ho copiato i codici che ho recuperato dal sito che ho linkato e li ho inseriti nei rispettivi file. Alla fine ho fatto associa html al file css e come per magia qualcosa è successo. Il banner è apparso, ma con tutte le tendine aperte e non come visibile nel sito e non si richiude, forse perché ho dimenticato di fare qualcos' altro?

[edstarink]

Semplifichiamo...
ho fatto un po di ricerche e sono venuto alla conclusione che qualsiasi cosa che faccio con htlm e foglio associato css non da risultati come da modello esempio.
Allora, probabilmente manca un passaggio che tutti danno per scontato e che io non conosco. Utilizzo microsoft expression web (padre del vecchio front page e molto evoluto) per realizzare siti.
Prendo per esempio un banner con effetto rollover, e copio il codice testuale nel file css che ho creato nel mio sito esempio.
Stessa cosa con il file HTML e infine, associo al file html, quel file css con la funzione "associa modello css"
Faccio una anteprima nel browser, vedo qualcosa di simile molto scarnificato, ma non vedo ne l' effetto, ne la grafica di quei banner che tra l' altro non utilizzano immagini jpg. Cosa manca? perché è così difficile anche se prendo un modello funzionante e molto semplice? possono due file css e html riprodurre un' effetto menu a discesa senza aver installato altro componente?
per favore, fate ordine nella mia testa spiegandomi solo i passaggi più semplificati, come avete fatto con i file pbp...

[nivasio]

ti faccio un esempio: http://www.dynamicdrive.com/style/cs.../3d_flip_menu/ questo menu, prendi quello che sta tra <style> e </style>, cioè div.nav{
position: relative; eccetera,
e lo inserisci nel tuo file css,aprilo semplicemente con un editor per file di testo, infatti div nav è il pezzo di codice css che ti comanda il menu di navigazione, poi nel html dove vuoi che compaia inserisci <div class="nav">

eccetera, infatti vedi che si chiama div nav come nel file css, fallo sempre con un programma qualsiasi col quale tu possa scrivere normalmente dentro il file html come se fosse un file di testo. e vedrai che funziona

[edstarink]

Ti ringrazio moltissimo, quindi non devo copiare tutto! solo questo:

style>
div.nav{
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
div.nav input{
    display: none;
}

div.nav label.mainlabel, div.nav div.menuflip{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; /* transition speed etc */
}

div.nav label.mainlabel{ /* menu anchor text style */
    width: 200px; /* width of anchor text */
    font: bold 20px Tahoma;
    position: relative;
    top: 0;
    display: block;
    padding-left: 34px; /* add left padding to make room for icon */
    cursor: pointer;
}
div.nav label.mainlabel:before{ /* menu anchor icon */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border:7px solid darkgreen;
    -webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
    box-shadow: inset 0 0 2px gray, 0 0 5px gray;
    border-radius: 30px;
}

div.nav div.menuflip{ /* DIV that flips over to reveal main menu */
    position: absolute;
    margin: 0;
    top: 0;
    padding: 4px;
    background: white;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    width: 200px;
    border: 1px solid gray;
    -webkit-box-shadow: 2px 2px 15px #B5B5B5;
    box-shadow: 2px 2px 15px #B5B5B5;
    border-radius: 10px;
    background: #eee;
}

div.nav div.menuflip h4{
    margin: 0;
    margin-bottom: 4px;
    font-size: 20px;
    padding: 4px 0 0 6px;
}

div.nav div.menuflip ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
div.nav div.menuflip ul li{
    border-bottom: 1px inset gray;
}
div.nav div.menuflip ul li:last-of-type{
    border-bottom: none;
}
div.nav div.menuflip ul li:hover{
    border-bottom-color: transparent;
}

div.nav div.menuflip ul li a{
    display: block;
    color: blue;
    text-decoration: none;
    padding: 6px;
    border-radius: 10px 0 10px;
    -webkit-transition: none;
    transition: none;
}

div.nav div.menuflip ul li a:hover{
    background: #515151;
    color: white;
}

div.nav div.menuflip label.close{ /* close button */
    position: absolute;
    right: 5px;
    top: 8px;
    padding-top: 1px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    color: white;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 5px gray;
    box-shadow: 0 0 5px gray;
    width: 20px;
    height: 20px;
    background: black;
    font-size: 18px;
}
div.nav input:checked ~ label.mainlabel{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
div.nav input:checked ~ div.menuflip{
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
</style>

Io invece ho copiato tutto il contenuto.
Perchè usare un file notepad? Io vedo il codice in expression web, posso decidere se vedere il risultato oppure solo il codice o entrambi. Solitamente cambio sempre da codice i valori, mai dalla grafica.
Dopo provo..tra l' altro sto entrando nel linguaggio html, ho studiato un po nel' attesa di una risposta e mi comincia ad entrare in testa qualcosina, tipo che il css è una evoluzione del html e che serve per creare effetti che l' html non puo generare. Comunque sono in simbiosi e ho gia fatto un' esempio diclasse per associare un solo cambiamento a tutto quello appartenente a quella classe. Il sito che ho fatto è molto bello e professionale, ma è statico e non mi piace :-)
a dopo e grazie ancora

[edstarink]

Sono un babbeo, era explorer che non visualizzava lo script. Sto lavorando con imac 27 con windows in emulazione e vedevo con safari l' effetto, mentre la prewiev con explorer mi visualizzava la tendina tutta aperta. Ho aggiornato con chrome e adesso lo script funziona, per fortuna :-)

cosa succede se creo un nuovo file.css insieme a quello che gestisce il sito? si puo fare oppure deve essere uno solo?
Ho provato a prendere il codice css di un menu a tendina per inserirlo nel mio al prosto di quelli testuali, ma non volevo toccare il css originale. Ne ho creato un' altro e ho fatto l' associazione a quel file con l' html del banner a tendina ma è venuta una porcheria...ho sbagliato a creare un' altro file css?

[nivasio]

puoi inserire + file css nell header del sito, per il resto non ci ho capito....un fico secco

[edstarink]

Grazie, volevo solo dire se potevo creare più file css anche perché il sito è molto grande e vorrei avere più effetti in file separati. Ho visto che è possibile e funziona. Ora ho chiaro il concetto del file css e adesso capisco molte cose sul fatto che cercavo di capire le funzionalità dei preset del programma, ma non vedevo per esempio il banner o il testuale al' interno solo perchè non faceva parte del programma ma era un codice annidato dentro il file css. :-)

[edstarink]

Rieccomi, scusa ma mi sta addentrando sempre di più per realizzare quello che in realtà vorrei inserire nel mio sito: Un menu orizzontale in alto con funzione slide a tendina.
Il mio sito ha un frame principale con banner per la navigazione ed è in formato .dwt
Se provo a sostituire i banner originali con quelli animati, si scompone tutta la struttura. Come potrei ovviare a questo problema?
anche se elimino i vecchi banner e abbino quelli nuovi con collegamento al file css, viene sempre un macello, cosa che non accade se faccio questo dentro una pagina vuota html.

[nivasio]

dei file .dwt non so nulla, se non che sono associati al programma Dreamweaver , del quale so solo cheè un editor visuale. Questi tipi di programmi non l'ho mai usati, per quello che può valere il mio consiglio se vuoi imparare qualcosa di html e css ti conviene non usarli, però mi posso sbagliare. cmq io non posso aiutarti perché non ho idea di come si possano apportare modifiche usando un programma visuale. secondo me faresti meglio a prendere un template base in html e css (in rete ce ne sono tanti gratuiti) e poi apportare le modifiche agendo sul codice nei file.