Video's en HTML-inhoud insluiten in Adobe Muse

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>

2. Dubbelklik in de overzichtsweergave op de miniatuur van de pagina "events" om deze te open en te bewerken in de ontwerpweergave.
3. 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.

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

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:

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

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

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

4. 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.
5. 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.
6. 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.

7. 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.
8. 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.
9. 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.
10. 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

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.

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.

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.

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

3. 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.
4. 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.

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

6. Kies Bestand > Voorvertoning van pagina weergeven in browser om te zien hoe de pagina Visit in de browser wordt weergegeven.

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>

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

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.

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

Videozelfstudie

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.

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.

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.

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.

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.

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.

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

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.