Incorporare video e contenuti HTML in Adobe Muse

Per HTML incorporato si intende il codice sorgente generato da un sito Web di terze parti, ad esempio Google, YouTube, Flickr o Picasa. Potete registrare un account per questi siti Web, accedervi, quindi copiare il codice incorporato dal sito e aggiungerlo al vostro sito Muse.

Quando si incolla in una pagina del codice HTML incorporato, è come inserire una finestra in cui viene visualizzato il contenuto di un altro sito.

Il codice HTML incorporato consente di aggiungere in modo rapido e facile informazioni complesse (come mappe, previsioni del tempo, quotazioni di mercato, ecc.) e contenuti multimediali (come video, presentazioni e file audio). Offre inoltre l’ulteriore vantaggio di utilizzare un sito di terze parti come servizio di hosting e interfaccia di caricamento. Ad esempio, se create un account gratuito per YouTube, potete creare un vostro canale YouTube e caricarne il contenuto video nel vostro sito. YouTube contiene una pagina Web che semplifica il processo di caricamento e vi permette di archiviare i file video. Per aggiornare il vostro sito Muse con nuovi video, dovrete semplicemente aggiungere i video al vostro canale YouTube, copiarne il codice da incorporare e incollarlo in una pagina Muse.

Questa sezione spiega come copiare del codice sorgente da Tumblr. Tumblr è un servizio online gratuito che richiede di creare un account e di accedere e che permette di pubblicare dei post di blog. I blog sono di facile utilizzo e particolarmente utili per consentire l’aggiornamento del sito da parte di utenti privi di competenze tecniche. La maggior parte dei siti di blog offrono un’interfaccia online. Potete quindi utilizzare un qualsiasi browser per accedere al vostro account e pubblicare nuovi post, senza ricorre ad alcun software aggiuntivo e senza alcuna nozione di programmazione HTML.

Nota: i visitatori che visualizzano il sito Web non devono disporre di un account Tumblr per visualizzare il blog incorporato nella pagina. L’account serve solo a voi durante la progettazione del sito per creare un blog personalizzato e generare il codice da incorporare nel sito Web.

1. Per seguire questa esercitazione non è necessario creare un account Tumblr. È sufficiente copiare il codice riportato di seguito generato dal sito Tumblr dopo aver creato un blog gratuito:

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

2. Nella vista Pianificazione, fate doppio clic sulla miniatura della pagina “events” per aprire la pagina e modificarla nella vista Progettazione.
3. Fate clic al centro della pagina vuota e usate uno dei seguenti metodi per incorporare il codice HTML:

• Scegliete Modifica > Incolla, oppure utilizzate la scelta rapida da tastiera Comando+V (Mac OS) o Control+V (Windows) per incollare il codice direttamente nella pagina.
• Scegliete Oggetto > Inserisci HTML. Fate clic nel campo della finestra Modifica HTML che viene visualizzata e incollate il contenuto. Fate clic su OK per chiudere la finestra Modifica HTML.

Nota: in molti casi, Muse riconosce il codice HTML e incorpora automaticamente nella pagina l’HTML incollato. Tuttavia, se sulla pagina compare il codice stesso e non il contenuto del sito Web di terze parti, scegliete Oggetto > Inserisci HTML.

Dopo aver incorporato il codice HTML, un riquadro blu con maniglie evidenzia i post di blog inseriti per l’account Tumblr Katie’s Cafe.

4. Con lo strumento selezione trascinate le maniglie per ridimensionare il contenuto del blog, in modo che occupi circa l’80% della larghezza della pagina. Centrate il contenuto del blog sulla pagina in modo che la grafica dello sfondo affiancato resti visibile a sinistra e a destra. Dei rettangoli blu di misurazione mostrano la distanza dagli altri oggetti. Una guida di allineamento rossa compare brevemente per indicare quando l’oggetto selezionato è centrato verticalmente.

Il codice HTML è ora incorporato nella pagina Muse. Per modificare eventualmente il codice HTML, fate clic con il pulsante destro del mouse su un elemento HTML incorporato e scegliete Modifica HTML dal menu di scelta rapida. Viene aperta la finestra Modifica HTML in cui potete visualizzare il codice precedentemente incollato.

Ora potete verificare le modifiche apportate alla pagina “events”:

5. Scegliete File > Anteprima pagina nel browser per visualizzare la pagina “events” in una nuova finestra del browser.

Mentre scorrete l’elenco dei post del blog, l’intestazione resta sopra ai contenuti della pagina. Questo avviene perché la pagina “events” si basa sulla pagina mastro Primo piano e il contenuto dell’intestazione della pagina mastro è stato impostato come primo piano.

La pagina “events” è ora completa. Nella sezione successiva viene spiegato come incollare in un widget del contenuto HTML incorporato, per controllare in che modo verrà visualizzato tale contenuto di terze parti in base all’interazione del visitatore.

Incorporare un video in un sito Web Muse

Al momento il contenitore di destinazione ha un riempimento grigio. Tuttavia, potete inserire in esso qualsiasi tipo di contenuto, ad esempio diversi file di immagini, rettangoli con riempimento, testo o HTML incorporato copiato da un altro sito.

Per questo esempio verrà incollato del codice HTML generato da YouTube.

Supponiamo che abbiate visitato una pagina su YouTube.com per visualizzare un video che avevate caricato nel vostro account. Se fate clic sul pulsante Condividi e quindi su Incorpora, potete accedere e copiare il codice da incorporare per il video.

Per questo esercizio, il codice da incorporare per il video Katie’s Cafe è già stato copiato e non dovete quindi visitare YouTube. Copiate e salvate negli Appunti il codice da incorporare riportato di seguito:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

In questo codice, i tag iFrame racchiudono il collegamento al file video pubblicato su YouTube. Un iFrame è un contenitore HTML che consente di visualizzare all’interno di una finestra il contenuto aggiunto alla pagina Web.

Dopo aver copiato il codice riportato qui sopra, tornate a Muse.

1. Con lo strumento selezione fate clic sul bordo grigio della pagina, in modo che l’indicatore della selezione in alto a sinistra presenti la dicitura “Pagina”, a indicare che è selezionata l’intera pagina.
2. Fate clic sul contenitore di destinazione più grande con riempimento grigio. L’indicatore della selezione in alto a sinistra presenta la dicitura “Composizione”. Fate di nuovo clic sul contenitore di destinazione grigio, in modo che l’indicatore della selezione presenti la dicitura “Contenitore”. Fate clic di nuovo (compare la dicitura “Destinazione”) e quindi ancora una volta, per ottenere la dicitura “Cornice immagine”. Premete Canc per rimuovere la cornice immagine dal contenitore di destinazione.

Con il contenitore di destinazione interno ancora selezionato, occorre ora incollare in esso il codice HTML appena copiato.

Nota: come abbiamo visto per il contenitore di attivazione, incollare un contenuto all’interno del contenitore di destinazione del widget può risultare difficoltoso. A seconda dell’elemento selezionato, è possibile che il codice del video venga incollato al di fuori del widget e incorporato direttamente nella pagina. Procedete quindi con cautela. Se quando fate clic su Anteprima il video viene visualizzato immediatamente anche se non avete fatto clic sull’immagine protagonista, significa che il codice video non è stato incollato correttamente nel contenitore. Il video deve poter essere visualizzato solo dopo aver fatto clic sull’immagine protagonista.

Per incollare il codice del video nel contenitore di destinazione (quando l’indicatore della selezione riporta la dicitura “Contenitore”):

3. Scegliete Oggetto > Inserisci HTML. Nella finestra visualizzata, selezionate il segnaposto di testo predefinito e premete il tasto Canc per rimuoverlo. Scegliete Modifica > Incolla per incollare nel campo del codice HTML il codice di YouTube precedentemente copiato. Fate clic su OK per chiudere la finestra Codice HTML.

Nota: in molti casi, Muse rileva automaticamente quando viene incollato del codice HTML e lo riconosce come tale anziché come semplice testo. Se preferite, potete quindi fare clic con il pulsante destro del mouse (o tenendo premuto il tasto Control) mentre è selezionato il contenitore di destinazione interno e scegliere Incolla dal menu di scelta rapida. In alternativa potete scegliere Modifica > Incolla o utilizzare le scelte rapide da tastiera per incollare il codice sorgente nel contenitore di destinazione. Muse offre diversi metodi per incollare il codice video nel contenitore di destinazione.

Dopo aver incollato il codice nel contenitore di destinazione, viene visualizzato il primo fotogramma del video (una tazza di caffè), a indicare che il codice HTML è stato incorporato correttamente. Il video non viene riprodotto mentre modificate la pagina nella vista Progettazione. Verrà riprodotto solo dopo che avrete fatto clic sul pulsante Anteprima nel pannello di controllo o quando visualizzate un’anteprima della pagina in un browser.

4. Con lo strumento selezione, ridimensionate il contenitore di destinazione per adattarlo alle dimensioni del contenuto video HTML incorporato. Deve essere di circa 670 pixel di larghezza e 415 pixel di altezza. Quando è selezionato il video, l’indicatore della selezione presenta la dicitura “HTML”.
5. Con il contenitore di destinazione selezionato, premete il tasto Esc una volta per selezionare il contenitore esterno. Oppure, se preferite, fate clic altrove per deselezionare il widget Visualizzazione scatola luminosa, quindi fate clic su di esso due volte: con il primo clic viene selezionata la composizione e con il secondo il contenitore più grande. Con lo strumento selezione, trascinate le maniglie del contenitore in modo da centrare in esso il contenitore di destinazione. Ridimensionate il contenitore a 710 pixel di larghezza e 460 pixel di altezza.
6. Utilizzate il menu Riempimento per impostare il colore di riempimento del contenitore (marrone, #63301B) e impostatene l’opacità su 100.

7. Selezionate la cornice di testo nella parte inferiore del contenitore e premete Canc per rimuoverla. La cornice di testo può essere usata per aggiungere una didascalia al contenuto di destinazione, ma per questo progetto di esempio non viene utilizzata.
8. Selezionate la casella di chiusura (X) nell’angolo in alto a destra del contenitore. Fate clic all’interno della casella di chiusura per selezionarne l’etichetta ed eliminarla. Utilizzate il menu Riempimento per impostare il colore di riempimento su Nessuno. Fate clic sull’icona della cartella accanto alla sezione Immagine del menu Riempimento e selezionate il file icon-close.png. Con lo strumento selezione, ridimensionate la casella di chiusura in modo da visualizzare l’intera immagine da usare come icona di chiusura.
9. Con lo strumento selezione, riposizionate il contenitore di destinazione e quello attivatore, portandoli nel punto desiderato sulla pagina.
10. Con la composizione selezionata, fate clic sul pulsante con la freccia blu per aprire il menu Opzioni. Per questo esempio, utilizzate le seguenti impostazioni:
    • Posizione: Scatola luminosa
    • Transizione: Dissolvenza
    • Riproduzione automatica: disattivato
    • Ordine casuale: disattivato
    • Nascondi tutti inizialmente: disattivato
    • Abilita passaggio con il dito: attivato
    • Attivazione superiore: disattivato
    • Pulsante Chiudi: attivato
    • Mostra parti di scatola luminosa durante la modifica: attivato
    • Mostra tutto in modalità progettazione: attivato

Fate clic all’esterno del menu Opzioni per chiuderlo. Il widget è ora configurato ed è pronto per essere provato.

In questa esercitazione avete già avuto modo di incorporare nelle pagine del codice HTML per aggiungere un blog Tumblr alla pagina “events”. Avete anche incollato del codice HTML incorporato in un widget per composizione Scatola luminosa, per visualizzare un video YouTube in una finestra per scatola luminosa quando il visitatore fa clic su un pulsante. In questa sezione viene trattato un ulteriore tipo di codice HTML incorporato, proveniente dal sito Google Maps. Effettuate le seguenti operazioni:

1. Se la pagina “visit” non è già aperta nella vista Progettazione, fate clic su Pianificazione e quindi doppio clic sulla miniatura della pagina “visit”.

Questo codice sorgente è stato copiato dal sito maps.google.com. Potete creare una mappa personalizzata per un indirizzo (o, come in questo caso, per più località). Si tratta di un servizio gratuito; è sufficiente digitare un indirizzo (o più indirizzi) e fare clic sul pulsante Crea mappa.

Dopo aver creato una mappa, Google Maps permette di immettere un titolo e una descrizione. Quindi potete fare clic sul pulsante Link (Collegamento) per accedere al codice. Selezionate il codice HTML fornito nel campo “Incolla HTML da incorporare nel sito web”, quindi tornate a Muse e incorporate il codice HTML in una pagina.

Per questa esercitazione, non è necessario creare una nuova mappa ma se volete potete provare a immettere un indirizzo, creare una mappa e copiarne il codice. Se preferite vedere semplicemente come funziona, potete usare un codice HTML già precedentemente generato.

2. Copiate il seguente codice sorgente:

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. Incollate il codice nella parte superiore della pagina “visit”. Con lo strumento selezione, posizionate il codice HTML incorporato in corrispondenza del centro verticale della pagina, verso l’alto, in modo che un quarto della mappa si sovrapponga all’area dell’intestazione. Accertatevi di lasciare dello spazio tra la mappa e la grafica del fiore in basso, per poter aggiungere del testo descrittivo.
4. Con lo strumento testo, trascinate per creare una cornice di testo sotto la mappa incorporata. Copiate il seguente testo e incollatelo nella cornice di testo:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie’s impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

5. Dal pannello Testo, applicate le seguenti impostazioni per formattare il testo:
   • Font: Droid Serif (o altro font serif a vostra scelta)
   • Dimensione font: 14
   • Colore font: #222222
   • Allineamento: A sinistra
   • Interlinea: 120%

L’aggiunta della descrizione della mappa completa la pagina “visit”.

6. Scegliete File > Anteprima pagina nel browser per verificare il risultato in un browser.

Il codice HTML incorporato per la mappa Google è interattivo. Potete fare clic sulle frecce per spostare la mappa nella sua finestra e utilizzare i pulsanti + e - per ingrandirla o ridurla.

Il design del sito è ora completato. Le restanti sezioni descrivono come apportare gli ultimi tocchi e come pubblicare il sito come versione di prova gratuita.

 Incorporare HTML nelle pagine Adobe Muse

Potete incorporare il codice HTML nelle pagine del sito per aggiungere funzioni complesse che vengono visualizzate dinamicamente da un server Web di terze parti. Queste porzioni di codice possono essere copiate da qualsiasi provider di servizi Web (come Google, Yahoo!, YouTube e molti altri) e incollate in Muse. In questa sezione, verranno presi in esame due esempi diversi di HTML incorporato e verrà spiegato come aggiungere rapidamente a un sito Web creato in Muse del contenuto social media e una mappa interattiva di Google Maps.

Innanzitutto occorre finalizzare il contenuto della home page. Se avete seguito le sezioni precedenti, la pagina Home sarà già aperta nella vista Progettazione. In caso contrario, nella vista Pianificazione fate doppio clic sulla miniatura Home per aprirla e modificarla nella vista Progettazione. Aggiungerete quindi il codice HTML incorporato nella presentazione precedentemente aggiunta alla pagina Home.

Aggiungere un feed HTML Twitter per visualizzare i post più recenti

Potete impostare un account gratuito con molti servizi Web diversi, tra cui Twitter, che consente di pubblicare dei messaggi da visualizzare sul loro sito Web. Tuttavia, oltre a visualizzarli su Twitter.com, potete utilizzare il vostro account per accedere e copiare il codice da incorporare in modo da visualizzare gli stessi messaggi su un vostro sito Web.

In questo esempio, è stato impostato un account fittizio per Kevin’s Koffee Kart. Per fare ciò è necessario accedere a Twitter come nuovo utente e completare il modulo di registrazione. In seguito, potete utilizzare l’interfaccia del sito per pubblicare messaggi e copiare il codice da incorporare per visualizzarli altrove sul Web. Si tratta della stessa procedure usata per condividere i post di blog, contenuti video, feed RSS, informazioni azionarie, previsioni meteo, risultati di partite e molti altri tipi di dati dinamici. Se create un sito per un cliente, chiedetegli se utilizzano già tali servizi per condividere informazioni con i suoi clienti. In molti casi, potrete accedere con i dati del suo account e ottenere il codice da incorporare per i dati da visualizzare nel nuovo sito.

Per evitare di dover accedere a Twitter e creare un nuovo account, utilizzate il codice da incorporare copiato da Twitter per l’account Kevin’s Koffee Kart, riportato di seguito:

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Testo segnaposto facoltativo</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

La pagina Home è quasi completata. Occorre solo aggiungere un ultimo elemento.

Dopo aver rivisto la pagina Home, fate clic sul collegamento Pianificazione per tornare a tale vista.

Aggiungerete ora un tipo diverso di HTML incorporato nella pagina KART MAP.

Utilizzare HTML incorporato per inserire una mappa Google Maps in una pagina Web Muse

Esercitazione video

In questa sezione, verrà aggiunto del contenuto alla pagina KART MAP aggiungendo del codice HTML incorporato che carica una mappa generata da Google Maps. Questo è solo un altro piccolo esempio delle possibilità offerte dall’utilizzo di HTML incorporato nel sito. È possibile incorporare contenuti da molti altri siti di terze parti, come ad esempio YouTube, Flickr o Picasa nonché aggiungere moduli, blog e altre funzioni complesse che è possibile controllare accedendo al proprio account e pubblicando i contenuti sui siti corrispondenti.

Aggiunta di iframe al sito per visualizzare altre pagine del sito con HTML incorporato

Con lo stesso metodo precedentemente descritto, potete utilizzare il codice HTML incorporato anche per incorporare un’intera pagina Web in un iframe. Ad esempio, potete digitare uno snippet di codice come il seguente:

<iframe title="Titolo del contenuto" src="http://urlqui.com" width="900" height="500" style="border: 0;"></iframe>

Nel codice qui sopra, sostituite il testo che si trova tra le virgolette di title="" e url="" con il titolo e l’URL della pagina Web esterna. È anche possibile personalizzare la larghezza e l’altezza della finestra iframe in base ai valori desiderati per il design del proprio sito.

Facoltativamente, potete anche aggiungere un attributo per evitare che l’iframe contenga una barra di scorrimento, aggiungendo il codice seguente al tag iframe di apertura:

scrolling="no"

Scegliendo Oggetto > Inserisci HTML potete aprire una nuova finestra Codice HTML e incorporare un iframe ovunque sul sito, quindi impostare un URL (l’indirizzo di un sito, ad esempio www.google.com) per visualizzare al suo interno un sito disponibile in Internet.

Potete anche utilizzare un iframe per incorporare un’animazione, ad esempio le animazioni HTML5 create in Adobe Edge. Trovate il nome del file HTML creato da Adobe Edge e utilizzatelo nell’attributo URL dell’iframe:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Quindi caricate il file HTML di Adobe Edge (e relativi file dipendenti) nello stesso server host, insieme ai file del sito di Muse. Se esportate il sito per FTP, potete copiare il file HTML nella cartella generata da Muse durante l’esportazione. Se pubblicate il sito direttamente sui server di hosting di Adobe Business Catalyst® facendo clic sul collegamento Pubblica in Muse, potete caricare i file con Adobe Dreamweaver® o un qualsiasi client FTP. Per ulteriori informazioni su come caricare i file mediante FTP sui server di hosting Business Catalyst, consultate la sezione sulla pubblicazione di siti Web.

Formattate gli elementi del modulo di contatto

Utilizzando alcune regole CSS standard, potete formattare gli elementi del modulo di contatto creato nell’interfaccia della console amministratore di Business Catalyst. Potete regolare la visualizzazione del modulo e dei relativi elementi in modo che siano coerenti con il design delle vostre pagine.

Dopo aver incollato il codice sorgente del modulo dalla console di amministrazione alla pagina in Muse, il modulo viene visualizzato con i propri stili predefiniti.

Come per qualsiasi altro elemento, potete utilizzare le maniglie laterali per ridimensionare il modulo e spostarlo sulla pagina fino alla posizione desiderata.

Fate clic sul modulo con il pulsante destro del mouse (o tenendo premuto il tasto Control) e scegliete HTML dall’elenco che compare.

Si apre la finestra Codice HTML in cui è visualizzato il codice incollato dalla console di amministrazione alla pagina. Portate il cursore nella parte superiore, prima della prima riga di codice, e premete più volte il tasto Invio (Windows) o A capo (Mac OS), per spostare il codice del modulo verso il basso e creare lo spazio necessario in cui aggiungere gli stili.

In questa area sopra il codice del modulo potrete incollare o digitare le regole CSS che determineranno l’aspetto degli elementi del modulo.

A titolo di esempio, copiate il codice seguente:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

Incollate il codice nella parte superiore della finestra HTML, sopra al modulo.

Per chiudere la finestra HTML, fate clic su OK. L’aspetto del modulo viene aggiornato in base alla nuova formattazione. Fate clic su Anteprima o scegliete File > Anteprima pagina nel browser per vedere come verrà visualizzato nel sito pubblicato.

Potete utilizzare questo stesso metodo per controllare molti dei vari elementi del modulo inclusi quando aggiungete il codice di contatto copiato da Business Catalyst.

Prendete in esame il codice incollato nella parte superiore della finestra. Osservate i due tag “style” all’inizio e alla fine delle regole CSS. Si tratta di elementi importanti: senza questi tag di apertura e chiusura, infatti, le regole CSS non possono funzionare. Ecco i due tag “style”, visualizzati singolarmente:

<style type="text/css">

</style>

Questi tag di apertura e chiusura dello stile indicano al browser che all’interno si trovano le regole di formattazione CSS. Accertatevi sempre che questi tag si trovino nella parte superiore della finestra, prima di incollare all’interno le regole CSS.

Quando dovete modificare gli elementi del modulo per aggiornarne l’aspetto, è necessario richiamare la “classe” (ovvero il nome assegnato ai vari elementi nel modulo) e specificare la proprietà da aggiornare, quindi impostarne i relativi attributi.

Considerate la riga di codice seguente:

input.textarea {

background-color: #fff;

}

Il termine input.textarea è il nome assegnato a un tipo di campo di testo (la sua “classe”). Quindi, la riga successiva richiama la proprietà da modificare. In questo caso background-color fa riferimento al colore di sfondo del campo di testo. Dopo i due punti, #fff è un metodo di scrittura abbreviata del codice CSS che sta per #ffffff (ossia il valore esadecimale per il colore bianco).

In altre parole, la regola qui sopra significa “imposta il colore di sfondo di questo tipo di campo di testo su bianco”.

Per aggiornare il modulo, potete anche impostare per il colore di sfondo del campo di testo un valore comune dei colori Web: “red” (rosso). Il codice seguente imposta su rosso il colore di sfondo per quel tipo di campo di testo:

input.textarea {

background-color: red;

}

Le regole CSS sono scritte in base al linguaggio CSS. Così come si apprende una lingua, con un po’ di pratica si può acquisire la necessaria competenza. Per ulteriori informazioni sulla sintassi (grammatica utilizzata per scrivere tali regole) consultate le esercitazioni e le guide di riferimento CSS disponibili gratuitamente online da W3Schools.

Una volta pronti a iniziare a modificare i moduli di contatto, potrete utilizzare l’elenco di seguito per individuare il nome della classe e le relative proprietà che possono essere regolate per ciascun elemento modulo.

<style type="text/css">

</style>

Rimozione degli elementi predefiniti dall’inizio del modulo di contatto

Per impostazione predefinita, quando incollate il modulo sulla pagina, questo inizia con i seguenti due elementi.

Per rimuovere uno di questi elementi o entrambi, aprite la finestra HTML ed esaminate il codice sorgente che avete incollato (appena sotto il tag di stile CSS eventualmente aggiunto).

Per rimuovere la riga *Required (*Obbligatorio), individuate questa riga di codice ed eliminatela:

<span class="req">*</span> Required

Per rimuovere l’etichetta e il menu Title (Titolo), individuate le seguenti righe di codice ed eliminatele:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Elenco di classi e proprietà per aggiungere regole CSS e formattare i moduli di contatto

Quando assegnate dei valori di colore, potete usufruire di una gamma di colori molto più ampia ricorrendo a uno strumento online, ad esempio kuler, oppure a un programma di modifica immagini (come Photoshop o Fireworks) per creare valori di colore esadecimali. I valori esadecimali iniziano sempre con il simbolo #, seguito da una combinazione di 3 o 6 caratteri alfanumerici (0-9 e A-F).

Potrebbe risultare più facile usare lo strumento contagocce in Muse per selezionare i colori presenti nel design corrente. Potete copiare i valori di colore esadecimali dal campo nel selettore colore e incollarli nel codice. I seguenti 16 colori per Web possono essere specificati anche per nome e risultano utili per testare una regola:

Aqua (azzurro), Black (nero), Blue (blu), Fuchsia (fucsia), Gray (grigio), Green (verde), Lime (verde limetta), Maroon (bordeaux), Navy (blu scuro), Olive (oliva), Purple (viola), Red (rosso), Silver (argento), Teal (verde acqua), White (bianco) e Yellow (giallo)

Quando specificate i colori per nome, non includete il simbolo # prima del colore.

L’elenco seguente non è completo, esistono molte combinazioni diverse (e molte altre proprietà che è possibile utilizzare) per modificare gli elementi. Usate questi suggerimenti come punto di partenza. Fate doppio clic per selezionare uno snippet di codice, quindi copiatelo negli Appunti.

Per ulteriori suggerimenti sull’utilizzo di Muse, visitate la pagina dedicata all’Aiuto e alle esercitazioni di Muse oppure la pagina dedicata agli eventi Muse per webinar in diretta e registrati.