Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

Utilizzare HTML incorporato per inserire un blog in un sito 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>

  1. Nella vista Pianificazione, fate doppio clic sulla miniatura della pagina “events” per aprire la pagina e modificarla nella vista Progettazione.
  2. 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.

  1. 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.
Ridimensionate e posizionate la pagina
Ridimensionate e posizionate il blog di Tumblr sulla pagina “events”.

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”:

  1. 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.

Incorporazione di un video
Dopo aver selezionato le dimensioni desiderate per il video, copiate il codice da incorporare generato da YouTube.

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”):

  1. 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.

  1. 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”.
  2. 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.
  3. Utilizzate il menu Riempimento per impostare il colore di riempimento del contenitore (marrone, #63301B) e impostatene l’opacità su 100.
Menu Riempimento
Utilizzate il menu Riempimento per impostare il colore di riempimento e l’opacità del contenitore.

  1. 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.
  2. 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.
  3. Con lo strumento selezione, riposizionate il contenitore di destinazione e quello attivatore, portandoli nel punto desiderato sulla pagina.
  4. 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
Opzioni di composizione
Modificate le impostazioni nel menu Opzioni per controllare il funzionamento del widget.

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.

Fate clic su Crea mappa
Fate clic su Crea mappa per generare una mappa basata sugli indirizzi immessi.

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.

Aggiungete il codice HTML nella pagina
Utilizzate l’interfaccia di Google Maps per generare il codice HTML della mappa.

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.

  1. 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>

  1. 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.
  2. 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.

  1. 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”.

  1. Scegliete File > Anteprima pagina nel browser per verificare il risultato in un browser.
Pagina Web con mappa
La pagina “visit” contiene una mappa Google completamente funzionante.

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>

 

  1. Copiate il codice riportato qui sopra.

  2. Tornate a Muse. In molti casi, è sufficiente fare clic sulla posizione desiderata nella pagina, quindi clic con il pulsante destro del mouse e scegliere Incolla dal menu di scelta rapida. In alternativa, potete utilizzare le scelte rapide da tastiera per il comando Incolla (Ctrl+V in Windows e Comando+V in Mac OS). Muse rileva in automatico che il testo da incollare è codice di origine, anziché contenuto di testo normale.

    Nota:

    Qualora il codice non dovesse essere riconosciuto come HTML, potete scegliere Oggetto > Inserisci HTML per aprire la finestra Codice HTML. Quindi incollate nella finestra il codice di origine copiato e fate clic su OK per chiudere la finestra e incorporare il codice.

  3. Dopo aver incorporato il codice sorgente (con cui viene creata una finestra nella pagina del sito in cui visualizzare il contenuto collegato da un sito Web di terze parti), è possibile che non venga visualizzato sulla pagina esattamente come desiderate. La visualizzazione predefinita del contenuto HTML incorporato per Twitter è illustrata di seguito.

    Importate il codice sorgente
    I dati del feed Twitter sono visualizzati come previsto, ma il testo non è formattato.

  4. Per aumentare le dimensioni dell’area del testo feed di Twitter, fate clic sulle maniglie del codice HTML incorporato ed espandetelo fino a riempire quasi completamente la larghezza della pagina e circa un terzo dell’altezza.

    Espandete la casella del codice incorporato
    Estendete la larghezza e l’altezza dei dati feed di Twitter per ottenere dimensioni notevolmente maggiori.

    Il testo viene quindi visualizzato in un’area molto più grande. Tuttavia al momento il testo è ancora delle dimensioni predefinite.

    Ora dovrete aggiornare il codice nella finestra Codice HTML per aggiungere gli stili CSS e definire l’aspetto del testo dinamico. Questa operazione non influenza il modo in cui i messaggi pubblicati vengono visualizzati su Twitter.com, ma solo la formattazione del testo sul vostro sito.

  5. Copiate il seguente codice di stile CSS:

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    Nota:

    Prendetevi il tempo necessario per acquisire dimestichezza con il codice qui sopra. Osservate come gli stili sono racchiusi tra un tag di apertura che specifica di che tipo di codice si tratta () e un tag di chiusura che comunica ai browser che le regole di stile CSS sono completate (). Se dovete creare un codice HTML di stile incorporato, dovrete utilizzare questi stessi tag prima e dopo gli stili su cui desiderate agire. In questo caso, il sito Web di Twitter ospita i messaggi pubblicati e utilizza un selettore ID CSS denominato #twitFeed per controllare in che modo il testo viene visualizzato sul vostro sito. Il codice riportato sopra utilizza quindi lo stesso nome di stile (ottenuto dal sito di Twitter) e aggiunge alcune regole che definiscono in che modo il testo verrà visualizzato sul vostro sito, sostituendo gli stili applicati da Twitter.com. Per ulteriori informazioni sulle regole CSS per la formattazione di contenuti di testo, visitate il sito Web W3C Schools.

  6. Fate clic con il pulsante destro del mouse nella finestra del codice HTML incorporato e scegliete HTML dal menu di scelta rapida. Viene aperta la finestra Codice HTML in cui potete visualizzare il codice sorgente precedentemente incollato. In qualsiasi momento durante la modifica di un sito, potete aprire questa finestra e aggiornare il contenuto sorgente HTML. Fate clic sul codice HTML precedentemente incorporato, nella parte superiore della finestra. Incollate il nuovo codice di stile che avete copiato al passaggio 5.

    Codice HTML incorporato
    Incollate il codice nella finestra Codice HTML, sopra il codice sorgente di Twitter precedentemente incollato.

  7. Per chiudere la finestra HTML, fate clic su OK. Dopo aver modificato lo stile del testo di Twitter, il messaggio collegato dal sito di Twitter viene visualizzato come testo bianco e di dimensioni maggiori, sopra la presentazione della pagina Home.

    La pagina Web mostra il testo di Twitter
    Il feed di Twitter completato, dopo la modifica delle dimensioni dell’oggetto HTML e la formattazione degli stili di testo.

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

  1. Scegliete File > Inserisci. Nella finestra di dialogo Importa, individuate e selezionate il file denominato DailyDrip.png che si trova nella cartella Kevins_Koffee_Kart. Fate clic su Seleziona.

  2. Dopo aver inserito l’immagine sulla pagina Home, con lo strumento selezione posizionatela a sinistra vicino al bordo superiore della presentazione e parzialmente sovrapposta a quest’ultima.

  3. Fate clic su Anteprima per riprodurre la presentazione e osservate come viene visualizzata sotto le immagini delle gocce e del nastro con la dicitura “Daily Drip”.

    Il design finale della pagina Home.
    Il design finale della pagina Home.

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.

  1. Fate doppio clic sulla miniatura KART MAP per aprire la pagina nella vista Progettazione e iniziate a modificarla.

  2. Con lo strumento testo trascinate una cornice di testo sulla pagina KART MAP, vicino al bordo superiore del contenuto della pagina, appena sotto l’intestazione.

  3. Digitate il seguente testo: “Looking for the Koffee Kart? Check here for real-time location updates throughout the day.” (Alla ricerca del Koffee Kart? Fate clic qui per sapere sempre dove si trova, in tempo reale).

  4. Con il testo selezionato, aprite il pannello Stili di paragrafo. Fate clic sullo stile denominato Georgia Body Medium (Georgia testo medio) per applicare lo stile di paragrafo al testo del titolo sulla pagina KART MAP.

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

Esercitazione video

Esercitazione video
lynda.com - James Fritz

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.

  1. Aprite una nuova finestra browser e visitate Google Maps.

  2. Digitate un indirizzo o un termine di ricerca, come Adobe SF, per trovare una posizione reale con cui creare la mappa.

  3. Fate clic sul pulsante Collegamento in alto a destra nell’interfaccia e quindi sull’opzione Personalizza e visualizza in anteprima la mappa incorporata.

  4. Nella finestra Personalizza, impostate la larghezza della mappa su 850 e l’altezza su 470. Riposizionate la mappa nella finestra in modo che il testo dell’indirizzo sia completamente visibile.

  5. Copiate l’HTML risultante dalla finestra di Google Maps. Oppure, se preferite non generare voi stessi il codice della mappa Google Maps, potete semplicemente copiare il codice sorgente di seguito:

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- Per disattivare la condivisione della posizione, dovete visitare https://www.google.com/latitude/apps/badge e disattivare il badge di posizione pubblica di Google. Non è sufficiente rimuovere questo snippet di codice. -->

    Copiate il codice sorgente HTML dalla finestra di Google Maps
    Copiate il codice sorgente HTML dalla finestra di Google Maps.

  6. Tornate a Muse. Fate clic con il pulsante destro sulla pagina e scegliete Incolla per inserire il codice. Potete anche selezionare Oggetto > Inserisci HTML per aprire la finestra Codice HTML, oppure utilizzare la scelta rapida da tastiera standard per incollare il codice (Comando+V per Mac OS, Ctrl+V per Windows).

  7. Con lo strumento selezione, posizionate la mappa sul lato sinistro della pagina.

  8. Fate clic su Anteprima per vedere come la mappa di Google Maps verrà effettivamente visualizzata dai visitatori del sito. Fate clic sui pulsanti di navigazione della mappa e osservate come è completamente interattiva, con la possibilità di effettuare zoom o scorrimento all’interno della finestra incorporata.

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.

Incollate il codice HTML arbitrario
Dopo aver incollato il codice HTML arbitrario, il modulo viene visualizzato sulla pagina.

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.

Potete utilizzare il menu di scelta rapida per selezionare HTML
Dalle opzioni nel menu di scelta rapida, selezionate HTML.

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.

Premete Invio o A capo per aggiungere alcune righe di spazio sopra il codice esistente
Premete Invio o A capo per aggiungere alcune righe di spazio sopra il codice esistente.

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.

Incollate gli stili CSS nella parte superiore della finestra HTML
Incollate gli stili CSS nella parte superiore della finestra HTML.

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.

Nota:

Ricordate sempre di racchiudere l’elenco delle regole CSS con i tag di apertura e chiusura di stile, altrimenti lo stile non potrà essere applicato dal browser né nella vista Progettazione:

<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>

Nota:

Fate attenzione quando modificate il codice HTML a non rimuovere accidentalmente altri tag oltre alle righe indicate qui sopra. Anche la rimozione di un singolo carattere, ad esempio >, può causare il mancato funzionamento del modulo. Se ciò si dovesse verificare, tornate alla console di amministrazione, quindi copiate e incollate di nuovo il codice nella pagina, sostituendo quello modificato.

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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online