Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Ingesloten HTML-code gebruiken om een blog op een Muse-site weer te geven

Ingesloten HTML-code verwijst naar de broncode die wordt gegenereerd door een website van derden, zoals Google, YouTube, Flickr of Picasa. U kunt een account openen bij deze websites, u aanmelden en vervolgens de ingesloten code kopiëren van die site en toevoegen aan uw eigen site.

Wanneer u ingesloten HTML-code plakt in een pagina, is het net alsof u een venster opneemt op een pagina in uw site dat de inhoud van die andere site bevat.

Met ingesloten HTML-code kunt u snel en eenvoudig complexe informatie (zoals kaarten, weersvoorspellingen en beursnoteringen) en rich media (zoals digitale video's, diapresentaties en audiobestanden) toevoegen. Deze strategie heeft het extra voordeel dat u een site van derden kunt gebruiken als hostingservice en uploadinterface. Als u bijvoorbeeld een gratis account opent bij YouTube, kunt u uw eigen YouTube-kanaal maken en de video-inhoud voor uw site uploaden. YouTube bevat een webpagina die het uploadproces vereenvoudigt en de video op hun site host. Wanneer u uw site wilt bijwerken, voegt u eenvoudig meerdere video's toe aan uw YouTube-kanaal, kopieert u de ingesloten code en plakt u deze in een pagina om nieuwe video's toe te voegen aan uw Muse-site.

In dit deel gaat u de broncode van Tumblr kopiëren. Dit is een gratis online service waarbij u een account moet maken en u zich moet aanmelden, waarna u blogberichten kunt posten die openbaar zijn. Blogs zijn eenvoudig te gebruiken en zijn met name handig wanneer u het iemand die niet erg technisch is makkelijk wilt maken zijn/haar eigen site bij te werken. De meeste blogsites hebben een online interface, zodat u elke browser kunt gebruiken om u aan te melden bij uw account en nieuwe berichten kunt posten zonder HTML-kennis of aanvullende software.

Opmerking: Bezoekers die uw website bezoeken, hebben geen Tumblr-account nodig om de blog weer te geven die u op de pagina insluit. Alleen u hebt het account nodig omdat u de website ontwerpt. Met het account kunt u een eigen blog maken en de insluitcode genereren die u vervolgens aan uw website toevoegt.

  1. Voor deze zelfstudie hoeft u geen Tumblr-account te maken. U hoeft alleen de volgende code te kopiëren die is gegenereerd door de Tumblr-website na het maken van een gratis blog:

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

  1. Dubbelklik in de overzichtsweergave op de miniatuur van de pagina "events" om deze te open en te bewerken in de ontwerpweergave.
  2. Klik in het midden van de lege pagina en gebruik een van de volgende methoden om de HTML-code in te sluiten:
  • Kies Bewerken > Plakken of gebruik de sneltoetscombinatie Command+V (Mac) of Control+V (Windows) om de code rechtstreeks op de pagina te plakken.
  • Kies Object > HTML invoegen. Klik in het veld van het venster HTML bewerken dat wordt geopend en plak de inhoud daarin. Klik op OK om het venster HTML bewerken te sluiten.

Opmerking: In de meeste gevallen zal Muse HTML-code herkennen en wordt de HTML-code die u rechtstreeks in de pagina plakt automatisch ingesloten. Als u echter de code op de pagina te zien krijgt in plaats van de inhoud van de website van derden, kiest u Object > HTML invoegen.

Na het insluiten van de HTML-code ziet u een blauw kader met handgrepen rondom de blogberichten die zijn ingevoerd voor de Tumblr-account Katie's Cafe.

  1. Gebruik het gereedschap Selecteren om de handgrepen te slepen en het formaat van de bloginhoud te veranderen zodat deze ongeveer 80% van de paginabreedte beslaat. Centreer de bloginhoud op de pagina zodat de zich herhalende achtergrondafbeelding aan de linker- en rechterkant te zien is. Blauwe meetrechthoeken geven de afstand tot andere objecten aan. Een rode uitlijningshulplijn is kortstondig zichtbaar om aan te geven wanneer het geselecteerde object verticaal is gecentreerd.
Verander het formaat en de positie van pagina
Verander het formaat en de positie van de Tumblr-blog op de pagina "events".

Dit is dat alles wat u hoeft te doen om HTML-code in Muse-pagina's in te sluiten. Als u de HTML-code wilt bewerken, klikt u met de rechtermuisknop op een ingesloten HTML-element en kiest u HTML bewerken in het contextmenu dat wordt geopend. Hiermee opent u het venster HTML bewerken waarin u de code die u eerder hebt geplakt kunt bewerken.

Nu is de tijd om de wijzigingen te bekijken die u in de pagina "events" hebt doorgevoerd:

  1. Kies Bestand > Voorvertoning van pagina weergeven in browser om de weergave van de pagina "events" in een nieuw browservenster te bekijken.

Als u naar beneden bladert, wordt de koptest weergegeven boven op de andere pagina-inhoud. Dit gedrag treedt op omdat de pagina "events" de stramienpagina Voorgrond gebruikt en de koptekstinhoud van die stramienpagina is ingesteld op weergave op de voorgrond.

De pagina "events" is nu voltooid. Nu gaat u leren hoe u ingesloten HTML-inhoud in een widget kunt plakken om te bepalen hoe de inhoud van de website van derden wordt weergegeven op basis van gebruikersinteractie.

Een video insluiten in uw Muse-website

Momenteel is de doelcontainer gevuld met een grijze vulkleur. U kunt echter allerlei typen inhoud in de doelcontainer opnemen, inclusief verschillende afbeeldingsbestanden, gevulde rechthoeken, tekst of ingesloten HTML-code die u van een andere website hebt gekopieerd.

In dit voorbeeld gaat u ingesloten HTML-code plakken die door YouTube is gegenereerd.

Stel dat u een pagina op YouTube.com hebt bezocht om een video te bekijken die u met uw account hebt geüpload. Als u op de knop Delen klikt en vervolgens op Insluiten, kunt u de ingesloten code voor de video bekijken en kopiëren.

Een video insluiten
Nadat u de gewenste videogrootte hebt geselecteerd, kopieert u de ingesloten code die door YouTube is gegenereerd.

De ingesloten code voor de video van Katie's Cafe is al naar uw site gekopieerd en u hoeft dus niet naar YouTube te gaan. Kopieer de onderstaande ingesloten code naar het klembord:

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

De bovenstaande code gebruikt iFrame-tags rondom de koppeling naar het videobestand dat op YouTube is gepost. Een iFrame is een HTML-container waarmee u inhoud binnen een "venster" kunt weergeven wanneer u deze aan de webpagina toevoegt.

Na het kopiëren van de bovenstaande code gaat u terug naar Muse.

  1. Gebruik het gereedschap Selecteren om op de grijze rand van de pagina te klikken, zodat in de selectie-indicator in de linkerbovenhoek het woord Pagina wordt weergegeven. Dit betekent dat de gehele pagina is geselecteerd.
  2. Klik op de grootste doelcontainer met de grijze vulkleur. In de selectie-indicator in de linkerbovenhoek wordt het woord Compositie weergegeven. Klik nogmaals op de grijze doelcontainer, zodat in de selectie-indicator het woord Container wordt weergegeven. Klik er nogmaals op (het woord Doel wordt weergegeven) en vervolgens nog eenmaal totdat in de selectie-indicator het woord Afbeeldingskader wordt weergegeven. Druk op Backspace (Windows) of op Delete (Mac) om het afbeeldingskader uit de doelcontainer te verwijderen.

Terwijl de binnenste doelcontainer is geselecteerd, moet u nu de HTML-code plakken die u hierboven in de doelcontainer hebt gekopieerd.

Opmerking: Net als bij het plakken van de hoofdafbeelding in de triggercontainer, kan het plakken van code binnen een doelcontainer lastig zijn, omdat de code IN de doelcontainer van de widget moet worden geplakt. Het is mogelijk (afhankelijk van het element dat u momenteel hebt geselecteerd) om de videocode buiten de widget te plakken, zodat deze rechtstreeks op de pagina wordt ingesloten. Ga zorgvuldig te werk… als u de lichtbak test door op Voorvertonen te klikken en ziet dat de video wordt weergegeven ook al hebt u nog niet op de hoofdafbeelding geklikt, betekent dit dat de videocode niet correct in de container is geplakt en daarom direct wordt weergegeven. De video moet alleen worden weergegeven nadat u op de hoofdafbeelding hebt geklikt.

Ga als volgt te werk om de videocode in de doelcontainer te plakken (terwijl in de selectie-indicator het woord Container wordt weergegeven).

  1. Kies Object > HTML invoegen. Selecteer in het venster dat wordt weergegeven de standaardplaatsaanduiding voor tekst en druk op Delete (Mac) of op Backspace (Windows) om deze te verwijderen. Kies Bewerken > Plakken om de gekopieerde YouTube-code in het HTML-codegebied te plakken. Klik op OK om het venster HTML-code te sluiten.

Opmerking: In veel gevallen zal Muse automatisch detecteren dat u HTML-code plakt en begrijpen dat het om HTML-code en niet om onbewerkte tekst gaat. Als u er de voorkeur aan geeft, kunt u in plaats van een HTML-venster te openen via Object > HTML invoegen ook met de rechtermuisknop klikken (of klikken terwijl u Control ingedrukt houdt) wanneer de binnenste doelcontainer is geselecteerd en Plakken kiezen in het contextmenu dat wordt geopend. (Of kies Bewerken > Plakken of gebruik de sneltoetscombinatie om de broncode in de doelcontainer te plakken). Muse biedt veel methoden om hetzelfde doel te bereiken en de videocode in de doelcontainer te plakken.

Na het plakken van de code in de doelcontainer wordt het eerste frame van de video weergegeven (een kop koffie). Dat eerste frame van de video geeft aan dat u de HTML-code correct hebt ingesloten. De video wordt niet afgespeeld terwijl u de pagina in de ontwerpweergave bewerkt. Deze wordt alleen afgespeeld nadat u op de knop Voorvertonen hebt geklikt in het regelpaneel of de pagina bekijkt in een browser.

  1. Gebruik het gereedschap Selecteren om desgewenst het formaat van de doelcontainer te wijzigen, zodat deze past bij de grootte van de ingesloten HTML-video-inhoud. De breedte moet ongeveer 670 pixels zijn en de hoogte ongeveer 415 pixels. Terwijl de video is geselecteerd, wordt in de selectie-indicator het woord HTML weergegeven.
  2. Terwijl de doelcontainer is geselecteerd, drukt u eenmaal op Escape om de buitenste container te selecteren. Als u daar de voorkeur aan geeft, klikt u weg van de lichtbakcompositiewidget en klikt u vervolgens tweemaal: eenmaal om de compositie te selecteren en een tweede maal om de grotere container te selecteren. Gebruik het gereedschap Selecteren om de handgrepen van de container te slepen, zodat de doelcontainer daarin gecentreerd wordt. Verander het formaat van de container tot een breedte van 710 pixels en een hoogte van 460 pixels.
  3. Gebruik het menu Vulling om de vulkleur van de container in te stellen op een bruine kleur (nr. 63301B) en de dekking van de vulkleur op 100.
Menu Vulling
Stel de vulkleur en de dekking van de container in via het menu Vulling.

  1. Selecteer het tekstkader onder aan de container en druk op Delete (Mac) of op Backspace (Windows) om het te verwijderen. Het tekstkader kan een titel voor de doelinhoud bevatten, maar in dit project wordt het niet gebruikt.
  2. Selecteer het sluitvakje (met een X) in de rechterbovenhoek van de container. Klik op het sluitvakje om het label ervan te selecteren en te verwijderen. Kies in het menu Vulling de vullingskleur Geen. Klik op het mappictogram naast de afbeeldingssectie van het menu Vulling, blader naar het bestand met de naam icon-close.png en selecteer dit. Gebruik het gereedschap Selecteren om de grootte van het sluitvakje aan te passen, zodat het volledige sluitpictogram wordt weergegeven.
  3. Gebruik het gereedschap Selecteren om de positie van zowel de doelcontainer als de triggercontainers te veranderen en ze te verplaatsen naar een locatie op de pagina waar u deze wilt weergeven.
  4. Terwijl Compositie is geselecteerd, klikt u op de blauwe pijlknop om het deelvenster Opties te openen. Voor dit voorbeeld gebruikt u de volgende instellingen:
    • Positie: Lichtbak
    • Overgang: Infaden
    • Automatisch afspelen: Uitgeschakeld
    • Willekeurige volgorde: Uitgeschakeld
    • In eerste instantie alles verbergen: Uitgeschakeld
    • Vegen inschakelen: Ingeschakeld
    • Triggers bovenaan: Uitgeschakeld
    • Knop Sluiten: Ingeschakeld
    • Lichtbakonderdelen tonen tijdens bewerken: Ingeschakeld
    • Alles tonen in ontwerpmodus: Ingeschakeld
Compositieopties
Werk de instellingen in het menu Opties bij om te bepalen hoe de widget zich gedraagt.

Klik ergens buiten het menu Opties om het te sluiten. De widget is nu geconfigureerd en kan worden getest.

Eerder in deze zelfstudie hebt u geleerd hoe u HTML in pagina's kunt insluiten om een Tumblr-blog op de pagina met gebeurtenissen toe te voegen. U hebt ook geleerd hoe u ingesloten HTML kunt plakken in de lichtbakcompositiewidget om een YouTube-video in een lichtbakvenster weer te geven wanneer de bezoeker op een knop klikt. In deze sectie verkent u een ander type ingesloten HTML dat op de site van Google Maps beschikbaar is. Voer de volgende stappen uit:

  1. Als de pagina Visit nog niet is geopend in de ontwerpweergave, klikt u op Overzicht en dubbelklikt u vervolgens op de miniatuur van de pagina Visit om de pagina te bewerken.

Deze broncode is gekopieerd van de site maps.google.com. U kunt een aangepaste kaart maken voor één adres (of in dit geval voor meerdere locaties). Het is een gratis service. U geeft gewoon het adres (of de adressen) op en u klikt op de knop Kaart maken.

Klik op Kaart maken
Klik op Kaart maken om een kaart te genereren op basis van de adressen die u hebt ingevoerd.

Nadat u een kaart hebt gemaakt, kunt u in de interface van Google Maps een titel en een beschrijving invoeren. Vervolgens kunt u op de knop Koppelen klikken om toegang te krijgen tot de code. Selecteer de HTML-code in het veld met de naam: HTML plakken om deze in te sluiten in de website. Nu kunt u terugkeren naar Muse en de HTML-code insluiten op een pagina.

Voeg HTML-code toe aan uw pagina
Gebruik de interface van Google Maps om de HTML-code voor de kaart te genereren.

In deze zelfstudie hoeft u niet zelf een nieuwe kaart te maken. Als u liever zelf een kaart wil maken, experimenteert u gewoon door een willekeurig adres in te voeren, een kaart te maken en de code te kopiëren. Als u alleen maar wilt testen hoe dit werkt, kunt u met wat vooraf gegenereerde HTML-code werken.

  1. Kopieer de onderstaande broncode:

<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. Plak de code boven aan de pagina Visit. Gebruik het gereedschap Selecteren om de ingesloten HTML-code in het verticale midden aan de bovenkant van de pagina te plaatsen, zodat ongeveer een kwart van de kaart het koptekstgebied overlapt. Laat wat ruimte vrij tussen de kaart en de bloem eronder, zodat u een beschrijvende tekst kunt toevoegen.
  2. Gebruik het gereedschap Tekst om een tekstkader onder de ingesloten kaart te plaatsen. Kopieer de volgende tekst en plak de tekst in het tekstkader:

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. Gebruik het deelvenster Tekst om de volgende instellingen toe te passen om de tekst vorm te geven:
    • Lettertype: Droid Serif (of een willekeurig ander serif-lettertype)
    • Lettergrootte: 14
    • Tekstkleur: #222222
    • Tekstuitlijning: Links
    • Regelafstand: 120%

Na het toevoegen van de beschrijving aan de kaart is de pagina Visit nu compleet.

  1. Kies Bestand > Voorvertoning van pagina weergeven in browser om te zien hoe de pagina Visit in de browser wordt weergegeven.
Webpagina met een kaart
In de voltooide pagina Visit is een volledig functionele Google-kaart opgenomen.

De ingesloten HTML-kaart van Google is interactief. U kunt op de pijlen klikken om binnen het kaartvenster in de kaart te schuiven en u kunt ook op de knoppen + en - klikken om in en uit te zoomen.

Het siteontwerp is nu gereed voor alle pagina's. In de resterende gedeelten van deze zelfstudie leert u hoe u de puntjes op de i zet en hoe u de site als gratis proefversie publiceert.

 HTML insluiten in uw Adobe Muse-pagina's

U kunt HTML-code in pagina's van uw site insluiten om complexe sitefuncties toe te voegen die op dynamische wijze via een externe webserver worden weergeven. Deze codefragmenten kunnen van een aantal webserviceproviders worden gekopieerd, zoals Google, Yahoo, YouTube en vele andere, en vervolgens eenvoudig op Muse-pagina's worden geplakt. In deze sectie bekijken we twee verschillende voorbeelden van ingesloten HTML en u zult zien hoe u snel social-media-inhoud en een interactieve Google-kaart kunt toevoegen aan een website die in Muse is gemaakt.

Eerst dient u de inhoud van de startpagina te voltooien. Als u de voorgaande secties hebt gevolgd, is de startpagina wellicht al geopend in de ontwerpweergave. Als dat niet het geval is, dubbelklikt u in de overzichtsweergave op de miniatuur van de startpagina om deze te openen voor bewerking in de ontwerpweergave. U voegt de ingesloten HTML toe boven de diapresentatie die u eerder hebt toegevoegd aan de startpagina.

Een ingesloten HTML Twitter-feed toevoegen om de meest recente posts weer te geven

U kunt een gratis account instellen bij veel verschillende webservices, zoals Twitter, zodat u berichten kunt posten die op hun website worden weergeven. Naast het weergeven van de informatie op Twitter.com, kunt u uw account echter ook gebruiken om u aan te melden en de insluitcode te kopiëren, zodat u dezelfde berichten kunt weergeven op een website die u hebt gemaakt.

In dit voorbeeld is een fictieve account ingesteld voor Kevin's Koffee Kart. U dient zich dus bij Twitter aan te melden als een nieuwe gebruiker en het registratieformulier in te vullen. Daarna kunt u de interface van de site gebruiken om berichten te posten en de insluitcode te kopiëren waarmee u deze elders op het web kunt weergeven. Dit is hetzelfde proces dat u gebruikt voor het delen van blogposts, video-inhoud, RSS-feeds, aandeleninformatie, weersvoorspellingen, wedstrijdstanden en vele andere soorten dynamische gegevens. Als u een site voor een klant maakt, vraag dan of deze dergelijke services al gebruikt om gegevens gemakkelijker te delen met hun klanten. In veel gevallen kunt u hun accountgegevens gebruiken om u aan te melden en vervolgens de insluitcode verkrijgen voor de gegevens die u wilt weergeven.

U ziet hier de van Twitter gekopieerde insluitcode voor het account van Kevin's Koffee Kart, zodat u zich niet hoeft aan te melden bij Twitter en een account hoeft te maken:

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

<div id="twitFeed">Optional Placeholder Text</div>

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

 

  1. Kopieer de code die hierboven wordt weergegeven.

  2. Ga terug naar Muse. Vaak kunt u gewoon op de gewenste plaats op de pagina klikken. Daarna klikt u met de rechtermuisknop en kiest u Plakken in het contextmenu. U kunt ook de sneltoetsen voor plakken gebruiken (Command-V voor de Mac of Ctrl-V voor Windows). In Muse wordt herkend dat de tekst die u plakt broncode is in plaats van normale tekstinhoud.

    Opmerking:

    In het zeldzame geval dat de code niet als HTML wordt herkend, kunt u Object > HTML invoegen kiezen om het venster HTML-code te openen. Vervolgens plakt u alleen de broncode die u naar het venster hebt gekopieerd, en klikt u op OK om het venster te sluiten en de code in te sluiten.

  3. Na het insluiten van de broncode (die feitelijk een venster in uw sitepagina maakt om de gekoppelde inhoud van een website van derden weer te geven), wordt deze mogelijk niet op de gewenste wijze op de pagina weergegeven. De standaardweergave van de ingesloten HTML-inhoud voor Twitter wordt weergegeven.

    Broncode insluiten
    De gegevens van de Twitter-feed worden weergegeven zoals verwacht, maar de tekst is niet opgemaakt.

  4. Vergroot het tekstgebied van de Twitter-feed door op de handgrepen die de ingesloten HTML omringen te klikken en breid deze uit om de breedte van de pagina grotendeels te vullen en ongeveer een derde van de hoogte van de pagina.

    Maak vak met ingesloten code groter
    Rek de breedte en hoogte van het venster met de gegevens van de Twitter-feed op naar een veel groter formaat.

    Hierdoor kan de tekst binnen een veel grotere ruimte worden weergegeven, hoewel de tekst op het moment nog steeds de standaardgrootte heeft.

    Vervolgens werkt u de code in het HTML-codevenster bij om bepaalde CSS-stijlen toe te voegen die bepalen hoe de dynamische tekst wordt weergegeven. Deze bewerking zal geen invloed hebben op de manier waarop de geposte berichten op Twitter.com worden weergegeven, maar verandert wel de opmaak van de tekst op uw site.

  5. Kopieer de volgende CSS-stijlcode:

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

    Opmerking:

    Neem een moment om vertrouwd te raken met de hierboven vermelde code. U ziet dat de stijlen zijn opgenomen tussen een openingstag die aangeeft wat de code is () en een afsluitende tag, zodat browsers weten dat de CSS-stijlregels zijn afgesloten (). Wanneer u uw eigen ingesloten HTML-code opmaakt, gebruikt u deze tags als haakjes rond de betroffen stijlen. In dit geval host de Twitter-website de geposte berichten en wordt de CSS id-selector #twitFeed gebruikt om te bepalen hoe de tekst op de site wordt weergegeven. De hierboven vermelde code gebruikt dus de stijlnaam (verkregen van de Twitter-site) en voegt bepaalde regels toe die bepalen hoe de tekst op uw site wordt weergegeven, waarbij de door Twitter.com toegepaste stijlen worden overschreven. Ga naar de website W3C Schools voor meer informatie over CSS-regels voor het opmaken van tekstinhoud.

  6. Klik met de rechtermuisknop in het venster met de ingesloten HTML-code en kies HTML in het contextmenu dat wordt weergegeven. Hiermee opent u het venster HTML-code, zodat u de broncode ziet die u eerder hebt geplakt. U kunt dit venster op elk gewenst moment tijdens het bewerken van een site openen en de HTML-broninhoud bijwerken. Klik boven de HTML-code die u eerder hebt ingesloten, helemaal boven in het venster. Plak de nieuwe stijlcode die u in stap 5 hebt gekopieerd.

    Ingesloten HTML-code
    Plak de stijlcode in het venster HTML-code, boven de Twitter-broncode die u eerder hebt geplakt.

  7. Klik op OK om het HTML-venster te sluiten. Na het aanbrengen van deze wijziging in de stijl van de Twitter-tekst, wordt de aan de Twitter-site gekoppelde post nu in witte tekst en veel groter vóór de diapresentatie op de startpagina weergegeven.

    Webpagina met Twitter-tekst
    De voltooide Twitter-feed na het bijwerken van de grootte van het HTML-object en het opmaken van de tekststijlen.

De startpagina is bijna voltooid. Er is slechts één laatste element om aan de pagina toe te voegen.

  1. Kies Bestand > Plaatsen. Ga in het dialoogvenster Importeren naar het bestand DailyDrip.png in de map Kevins_Koffee_Kart en selecteer dit bestand. Klik op Selecteren.

  2. Nadat u de afbeelding op de startpagina hebt geplaatst, kiest u het gereedschap Selecteren en plaatst u de afbeelding aan de linkerzijde, bij de bovenkant van de diapresentatie, zodat deze de bovenrand van de diapresentatie gedeeltelijk overlapt.

  3. Klik op Voorvertonen om de animatie van de diapresentatie te bekijken en te zien hoe deze wordt weergegeven onder de Daily Drip-afbeelding en de bruine druppelafbeelding.

    Het voltooide ontwerp van de startpagina
    Het voltooide ontwerp van de startpagina.

Wanneer u de startpagina hebt gecontroleerd, klikt u op de koppeling Overzicht om terug te gaan naar de overzichtsweergave.

Vervolgens kunt u een ander type ingesloten HTML aan de pagina KART MAP toevoegen.

  1. Dubbelklik op de miniatuur KART MAP om de pagina in de ontwerpweergave te openen om te bewerken.

  2. Gebruik Tekst om een tekstkader op de KART MAP boven aan de pagina-inhoud direct onder de koptekst te slepen.

  3. Typ de volgende regel: Looking for the Koffee Kart? Kijk hier voor realtime locatie-updates gedurende de dag.

  4. Selecteer de tekst en open het deelvenster Alineastijlen. Klik op de stijl Georgia Body Medium om de alineastijl toe te passen op de koptekst op de pagina KART MAP.

Ingesloten HTML gebruiken om een Google-kaart in te voegen op uw Muse-webpagina

Videozelfstudie

Videozelfstudie
lynda.com - James Fritz

In deze sectie voegt u inhoud toe aan de pagina KART MAP door ingesloten HTML toe te voegen waarmee een door Google Maps gegenereerde kaart wordt geladen. Dit is slechts een van de vele mogelijkheden van het gebruik van ingesloten HTML op uw site. U kunt inhoud van vele externe sites opnemen, zoals YouTube, Flickr of Picasa, of formulieren, blogs en andere complexe sitefuncties toevoegen die u beheert door uw account te openen en inhoud op de overeenkomstige sites te plaatsen.

  1. Open een nieuw browservenster en ga naar Google Maps.

  2. Typ een adres of zoekterm, zoals Adobe SF, om de echte locatie te zoeken waar u de map wilt maken.

  3. Klik op de knop Koppelen die in het gedeelte rechtsboven van de interface verschijnt en vervolgens op de optie voor het aanpassen en voorvertonen van de ingesloten kaart.

  4. In het venster Aanpassen dat wordt weergegeven, stelt u de grootte van de aangepaste kaart in op breedte 850 en hoogte 470. Verplaats de kaart in het venster om ervoor te zorgen dat de adrestekst volledig zichtbaar is.

  5. Kopieer de resulterende HTML uit het Google-venster. Als u liever niet uw eigen Google Map-code genereert, kopieert u gewoon de volgende broncode:

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

    <!-- Als u het delen van uw locatie wilt uitschakelen, *moet* u naar https://www.google.com/latitude/apps/badge gaan en de Google Public Location-badge uitschakelen. Het verwijderen van dit codefragment is niet afdoende! -->

    Kopieer de HTML-broncode uit het Google Maps-venster
    Kopieer de HTML-broncode uit het Google Maps-venster.

  6. Ga terug naar Muse. Klik met de rechtermuisknop op de pagina en kies Plakken om de code te plaatsen. U kunt ook Object > HTML invoegen kiezen om het venster HTML-code te openen of de standaardsneltoetsen gebruiken om de code te plakken (Command-V voor MAC of Control-V voor Windows).

  7. Met het gereedschap Selecteren plaatst u de kaart aan de linkerkant van de pagina.

  8. Klik op Voorvertonen om te zien hoe de Google-kaart aan bezoekers op de livesite wordt weergegeven. Klik op de navigatieknoppen voor de kaart. U ziet dat deze volledig interactief is en dat u kunt inzoomen en over de kaart in het ingesloten venster kunt bewegen.

iFrames toevoegen aan uw site om andere sitepagina's met ingesloten HTML weer te geven

Naast het gebruik van ingesloten HTML voor het invoegen van code die u van een externe website hebt geplakt, kunt u ook een volledige webpagina in een iFrame insluiten met dezelfde methode. U kunt bijvoorbeeld een codefragment typen, zoals:

<iframe title="Titel voor deze inhoud" src="http://uwurl.com" width="900" height="500" style="border: 0;"></iframe>

Vervang in deze code de tekst in title="" en url="" door de gewenste titel en URL van de externe webpagina. U kunt de breedte en hoogte van het iFrame-venster ook aanpassen aan de gewenste waarden van het ontwerp van uw site.

U kunt ook een attribuut toevoegen dat ervoor zorgt dat er geen schuifbalk wordt weergegeven voor het iFrame. Dat doet u door het volgende toe te voegen aan de openingstag van het iFrame:

scrolling="no"

Door Object > HTML invoegen te kiezen, kunt u een nieuw venster HTML-code openen en een iFrame ergens anders op uw site insluiten. Vervolgens stelt u een willekeurige URL in (een siteadres, zoals www.google.nl) om in dat frame een actieve internetsite weer te geven.

U kunt een iFrame ook gebruiken voor het insluiten van animatie, zoals de HTML5-animaties die in Adobe Edge zijn gemaakt. Zoek de naam van het door Adobe Edge gemaakte HTML-bestand en gebruik die bestandsnaam in het URL-attribuut van uw iFrame:

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

</iframe>

Vervolgens dient u het Adobe Edge HTML-bestand (en afhankelijke bestanden) te uploaden naar dezelfde hostserver, naast uw Muse-sitebestanden. Als u uw site naar FTP exporteert, kunt u het HTML-bestand naar de map kopiëren die door Muse tijdens het exporteren wordt gegenereerd. Als u rechtstreeks naar de Adobe Business Catalyst®-hostservers publiceert door op de koppeling Publiceren in Muse te klikken, kunt u de software van Adobe Dreamweaver® of een willekeurige FTP-client gebruiken om de bestanden te uploaden. Zie Websites publiceren voor meer informatie over het uploaden van bestanden via FTP naar de Business Catalyst-hostservers.

De elementen van een contactformulier opmaken

Met sommige standaard CSS-regels kunt u de elementen opmaken van het contactformulier dat u in de interface van de Business Catalyst-beheerconsole hebt gemaakt. U kunt het formulier en de formulierelementen anders weergeven zodat deze beter aansluiten bij uw paginaontwerp.

Nadat u de broncode van het formulier uit de beheerconsole op de Muse-pagina hebt geplakt, wordt het formulier met de standaardstijlen weergegeven.

De willekeurige HTML-code plakken
Na het plakken van de willekeurige HTML-code wordt het formulier weergegeven op de pagina.

Net als elk ander element, kunt u de zijgrepen gebruiken om de afmetingen van het formulier aan te passen en het naar de gewenste locatie op de pagina verplaatsen.

Klik met de rechtermuisknop (of houd Control ingedrukt en klik) op het formulier en kies HTML in de lijst die wordt weergegeven.

Gebruik het contextmenu om HTML te selecteren
Gebruik het contextmenu om HTML te selecteren in de lijst met opties.

Het venster HTML-code wordt weergegeven. Hier ziet u de code die u uit de beheerconsole op de pagina hebt geplakt. Plaats de cursor boven in het scherm, voor de eerste coderegel en druk een paar keer op Enter (Windows) of Return (Mac) om de formuliercode omlaag te verplaatsen en ruimte te maken voor de stijlen.

Druk op Enter of Return om een paar regels ruimte in te voegen boven de bestaande code
Druk op Enter of Return om een paar regels ruimte toe te voegen boven de bestaande code.

In dit gebied boven de formuliercode kunt u de CSS-regels plakken of typen die de weergave van de formulierelementen beïnvloeden.

Kopieer de code hieronder om te zien hoe dit werkt:

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

Plak de code in het bovenste gedeelte van het HTML-venster, en wel boven het formulier.

Plak de CSS-stijlen boven in het HTML-venster
Plak de CSS-stijlen boven in het HTML-venster.

Klik op OK om het HTML-venster te sluiten. De weergave van het formulier is nu bijgewerkt met de nieuwe opmaak. Klik op Voorvertonen of kies Bestand > Voorvertoning van pagina weergeven in browser om te zien hoe het er op de gepubliceerde site uitziet.

Met dezelfde strategie kunt u veel van de verschillende formulierelementen beheren die worden opgenomen wanneer u de contactformuliercode toevoegt die u uit Business Catalyst hebt gekopieerd.

Bekijk de code die u boven in het venster hebt geplakt. Let op de twee stijllabels boven en onder aan de CSS-regels die aan deze regels voorafgaan en deze afsluiten. Dit is belangrijk, want zonder de openings- en sluitingslabels werken de CSS-regels niet. Hier worden alleen de twee stijllabels weergegeven:

<style type="text/css">

</style>

Deze openings- en sluitingsstijllabels vertellen de browser dat de tussenliggende code CSS-opmaakregels bevat. Zorg er altijd voor dat deze labels boven in het venster staan, voordat u de CSS-regels in het venster plakt.

Wanneer u wijzigingen in uw formulierelementen wilt aanbrengen om de weergave van deze elementen bij te werken, dient u de ''klasse'' aan te geven (dit is de naam die aan de verschillende elementen in het formulier is toegewezen). U geeft hierbij de eigenschap op die u wilt bijwerken en vervolgens stelt u de kenmerken ervan in.

Bekijk de onderstaande coderegel:

input.textarea {

background-color: #fff;

}

Het woord input.textarea is de naam die is toegewezen aan één type tekstveld (de ''klasse''). De volgende regel verwijst naar de eigenschap die u wilt wijzigen. In dit geval verwijst background-color naar de achtergrondkleur van het tekstveld. En de #fff na de dubbele punt is een snelle schrijfwijze in CSS-code voor #ffffff (de hexadecimale kleurwaarde die de kleur wit opgeeft).

De regel hierboven betekent dus gewoon het volgende: stel de achtergrondkleur van dit type tekstveld in op wit.

Als u het formulier wilt bijwerken, kunt u de achtergrondkleur van het tekstveld ook toewijzen aan een algemene webkleurwaarde, namelijk rood. Met de onderstaande code wordt de achtergrondkleur van dat type tekstveld ingesteld op rood:

input.textarea {

background-color: red;

}

CSS-regels worden in hun eigen taal geschreven. En net als met alle nieuwe talen duurt het even voordat u deze taal onder de knie hebt. Meer informatie over de syntaxis (de grammatica die wordt gebruikt om deze regels te schrijven) vindt u in de uitstekende zelfstudies en CSS-handleidingen die gratis online ter beschikking zijn gesteld door W3Schools.

Wanneer u uw eigen contactformulieren wilt bewerken, kunt u de onderstaande lijst gebruiken om de klassenaam en de bijbehorende eigenschappen te identificeren die u voor elk formulierelement kunt aanpassen.

Opmerking:

Denk eraan uw lijst met CSS-regels altijd tussen de labels voor het openen en sluiten van de stijl te plaatsen, anders kunnen de browser en de ontwerpweergave de regels niet renderen:

<style type="text/css">

</style>

De standaardelementen verwijderen van de bovenzijde van het contactformulier

Wanneer u het formulier op de pagina plakt, begint dat formulier standaard met de volgende twee elementen.

Als u één of beide elementen wilt verwijderen, opent u het HTML-venster en bekijkt u de geplakte broncode (vlak onder het CSS-stijllabel dat u wellicht hebt toegevoegd).

Als u de regel *Required wilt verwijderen, zoekt u de volgende coderegel en verwijdert u deze:

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

Als u het label en het menu Title wilt verwijderen, zoekt u de volgende coderegels en verwijdert u deze:

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

Opmerking:

Wees tijdens het bewerken van de HTML-code voorzichtig dat u niet per ongeluk andere tags dan de hierboven vermelde regels verwijdert. Het verwijderen van slechts één extra teken, zoals >, kan ertoe leiden dat het formulier defect raakt. Als dat gebeurt, gaat u terug naar de beheerconsole en kopieert u de code om deze weer op de pagina te plakken, waarbij u de bewerkte code vervangt.

De lijst met klassen en eigenschappen om CSS-regels toe te voegen en contactformulieren op te maken

Wanneer u kleurwaarden toewijst, krijgt u een veel grotere verscheidenheid aan kleuren wanneer u een onlineprogramma gebruikt, zoals Kuler, of een beeldbewerkingsprogramma (Photoshop of Fireworks) om hexadecimale kleurwaarden te maken. Hexadecimale kleurwaarden beginnen altijd met het #-symbool, gevolgd door een combinatie van drie of zes alfanumerieke tekens (0-9 en A-F).

Het is misschien gemakkelijker om het pipet in Muse te gebruiken om kleuren uit uw bestaande ontwerp te selecteren. U kunt de hexadecimale kleurwaarden uit het veld in de Kleurkiezer kopiëren en in de code plakken. U kunt de volgende 16 webveilige kleuren echter via hun naam opgeven. Deze kleuren kunnen heel handig zijn wanneer u een regel wilt testen:

Aqua, Zwart, Blauw, Fuchsiakleurig, Grijs, Groen, Limoen, Kastanjebruin, Marine, Olijf, Paars, Rood, Zilver, Blauwgroen, Wit en Geel

Als u de kleuren op naam opgeeft, hoeft u het #-symbool niet voor de kleur te plaatsen.

De volgende tabel is niet volledig, er zijn vele verschillende combinaties (en veel andere eigenschappen die u kunt gebruiken) die elementen beïnvloeden. Gebruik de volgende suggesties om aan de slag te gaan. Dubbelklik om een codefragment te selecteren en kopieer dat vervolgens naar het klembord.

Raadpleeg de pagina Muse Help en zelfstudies voor meer tips voor het werken met Muse of de pagina Muse Events voor live en opgenomen webinars.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid