Site maken zonder html-kennis met RocketCake
Site maken zonder html-kennis? Online editors om websites te bouwen winnen terrein, vaak vanwege onder meer de mooie sjablonen. Wil je liever niet beginnen vanaf zo’n kant-en-klaar ontwerp, dat vaak alsnog eindigt in een betaalde optie, dan heb je aan RocketCake een desktop-programma waarmee je van niets een mooie site bouwt.
Het Engelstalige programma bevat slechts vijftien templates (sjablonen) ter inspiratie. Het is het de bedoeling dat je met RocketCake een eigen site creëert die je later makkelijk kunt updaten. RocketCake is een zogeheten WYSIWYG-editor. Je hoeft dus geen html-codes te typen. Je stelt je eigen site samen door elementen op het werkvlak te plaatsen en de zaak daarna te uploaden. Elementen zijn tekstvakken, knoppen, afbeeldingen, menu’s, diashows, filmpjes, audiofragmenten en meer. Wat RocketCake bijzonder maakt, is dat het een editor is om zogeheten responsive websites te bouwen. Zo’n responsive website is mobielvriendelijk, want de opmaak past zich aan het scherm aan van het toestel waarmee iemand de site bezoekt.
Een responsive webpagina blijft er netjes uitzien, of je die op een grote monitor bekijkt of een klein smartphonescherm. Hiervoor zal de website een aantal onderdelen aanpassen, zoals de lettergrootte, de rangschikking van bepaalde elementen en de manier hoe het menu op het scherm staat.
Download RocketCake hier. Er is een versie voor Windows en een voor macOS. In deze workshop gebruiken we de gratis editie. Daarmee maak je makkelijk een vlot werkende responsive website. Er is ook een professionele editie van RocketCake, die 39 euro kost. Met de professionele versie mag je een onbeperkt aantal websites maken. Ook zit er css-ondersteuning bij, waarmee je snel opmaakstijlen aanpast op een hele site. Versie 3.1 van RocketCake werd verbeterd zodat je website beter scoort bij Google en andere zoekmachines. Verder bevat de gratis versie een paar functies die vroeger alleen in de betaalde editie zaten.
Werkomgeving en weergave
Bovenaan in de werkomgeving staat de balk met knoppen om een nieuwe pagina toe te voegen, om een preview te bekijken met Internet Explorer en om de website te publiceren op internet. Rechts vind je de Toolset met alle elementen die je op een webpagina kunt plaatsen. Bovenaan links zie je de structuur van alle pagina’s van je website.
Daaronder staan de Properties. Hier wijzig je de eigenschappen van ieder element dat je selecteert. Stel dat je een afbeelding wilt toevoegen aan een pagina, dan selecteer je in de Properties het afbeeldingsbestand en geef je aan of de afbeelding afgeronde of scherpe hoeken moet hebben enzovoort…
©PXimport
Helemaal onderaan bepaal je de weergavebreedte. Standaard is dat de Desktop-weergave. Via het kleine uitklapmenu linksonder kun je ook werken in de weergave van een aantal populaire mobiele apparaten, zoals de iPhone, iPad, Samsung Galaxy, LG… Vind je in dit menu niet de gewenste breedte, dan kun je ook Custom selecteren en via een schuifje de breedte aangeven die op het scherm moet verschijnen. Die breedte-instelling is belangrijk voor het bepalen van de breekpunten, die we verderop bespreken.
Kleuren en homepage
Laten we beginnen met de homepage. In dit voorbeeld maken we de website van een ambitieuze rockband. In plaats van te beginnen met een sjabloon kies je Empty page. Het gedeelte Properties zal zich aanpassen aan ieder element dat je selecteert. Klik bijvoorbeeld op de achtergrond van de eerste pagina, dan kun je bij BackgroundColor een achtergrondkleur selecteren. Standaard staat daar 000000, de html-code voor wit. Door op het vakje met de drie puntjes te klikken hal je de kleurenkiezer tevoorschijn. In de Properties geef je deze webpagina een titel. Die zal straks bovenaan in het browservenster verschijnen. De naam van de homepage laat je op index.html staan. Een browser zoekt altijd naar de index-pagina om als homepage te tonen.
Eronder bepaal je de kleuren van de vier soorten hyperlinks. LinkColor bepaalt de kleur van de links die nog niet zijn bezocht, LinkColorActive slaat op links die iemand op dit moment bezoekt, LinkColorHover is de kleur van een link waar de muisaanwijzer naar wijst en LinkColorVisited slaat op links die iemand al heeft bezocht.
©PXimport
Navigatiebalk en introbeeld
Om een navigatiebalk te plaatsen selecteer je in de Toolset het item Navigation Menu en klik je daarna op het werkvlak. In deze navigatiebalk typ je de menu-items waarvoor je webpagina’s wilt aanmaken. Houd de namen van die items kort. In ons voorbeeld zijn dat The band, Who, Where, When, Why en Media. Bovenaan staan de knoppen om de tekst van die navigatie-items op te maken. Als je op de navigatiebalk zelf klikt, dan pas je in de Properties de kleur en de vorm aan van de balk. Zo kun je BackGroundMode kiezen voor Color, Image, Gradient en Styled Button. In Gradient bepaal je de kleurtinten van de overgang en in Styled Button krijgt de menubalk een bol uiterlijk.
We willen ook een banner of introbeeld toevoegen. Daarvoor plaats je eerst het item Container. In de Properties bij ImageNameklik je op de drie puntjes om het plaatje dat je vooraf hebt klaargemaakt, te selecteren. Als het te groot is, vraagt RocketCake of het de afbeeldingsgrootte mag aanpassen. Dat mag. De titel ‘Mad Dog’ die je bovenaan dit artikel op de banner ziet, hebben we zelf aan het plaatje toegevoegd met een ander programma. In principe kun je ook tekst met het item Floating Text over een afbeelding plaatsen. Dit geeft helaas een onvoorspelbaar resultaat op mobiele apparaten.
Ben je tevreden, sla dan het werkbestand ergens op de harde schijf op als .rcd-bestand.
Kolommen
Onder de banner wil je de thuispagina van inhoud voorzien in één, twee of drie kolommen. Daarvoor kies je in Toolset het item Container with Columns. RocketCake vraagt hoeveel kolommen je wilt hebben. Ook wil de applicatie weten wat de minimale breedte is van een kolom. Wij kiezen hier voor twee kolommen en de standaardinstelling 150. Dat betekent dat op een breed scherm de kolommen netjes naast elkaar te zien zijn. Als een kolom op een klein scherm kleiner wordt dan 150 pixels dan zal die niet meer naast, maar onder de vorige kolom verschijnen.
In dit voorbeeld stellen we via de Properties de linkerkolom in op MinWidth 500. 500 is het breekpunt voor de linkerkolom. Als de schermbreedte te klein wordt, zal de bezoeker de inhoud van de rechterkolom onder de linkerkolom lezen. Bovendien hebben we de banner ingesteld op MaxWidth 1000.
©PXimport
Om de rechterkolom smaller te maken dan de linker, klik je eerst op de linkerkolom. De Size staat daar standaard op 50%, auto. Wijzig dat bijvoorbeeld in 70%, auto. Hierdoor floept de tweede kolom tijdelijk onder de eerste. Dit los je op als je op de tweede kolom klikt en bij Size 30%, auto invult. Hierdoor krijg je een 70/30-verhouding. Daarna vul je de kolommen met tekst, die je ook vormgeeft zoals met een tekstverwerker. In zo’n kolom kun je vanuit de Toolset ook Headings (kopjes) toevoegen. Dankzij Heading 1, 2, 3 blijven de kopjes goed uitzien.
Om een afbeelding toe te voegen plaats je de cursor in de tekst en klik je in de Toolset op Image. Daarna navigeer je naar de locatie waar de afbeelding wacht. Klik af en toe op de knop Preview om je werk in een browser te bekijken.
Als je op zo’n tekstkolom klikt, zie je in de Properties dat de Padding standaard is ingesteld op 10, 10, 10, 10. De Padding is de afstand van de tekst tot de kolomrand. Het eerste getal slaat op bovenaan, het tweede op onderaan, het derde op rechts en het vierde op links. Als je in een tekstvak wat meer padding aan de rechterkant wilt, moet je de derde waarde instellen op bijvoorbeeld 20.
Padding is dus de afstand aan de binnenkant van een vak, Margin is de afstand aan de buitenzijde. Als je wat meer ruimte wilt tussen de onderkant van de foto en de bovenkant van de tekst die daaronder staat, dan wijzig je de Margin van 0, 0, 0, 0 in bijvoorbeeld 0, 10, 0, 0.
Extra pagina’s
Nu de homepage klaar is, wil je natuurlijk meer pagina’s maken voor je project. Dat gaat met de knop Add Page. Het programma vraagt of je een volledige nieuwe pagina wilt aanmaken of een kopie van een reeds bestaande webpagina. In dit voorbeeld maken we gebruik van de stijl van onze homepage: de zwarte achtergrond, het lettertype, de lettergrootte, de breedte van container… Dus gaan we voor de tweede optie. Daarna halen we de banner weg en wijzigen we de inhoud van de tekstcontainer.
Wil je onderaan iedere pagina een footer, dan voeg je ook daar een Container of Container with Columns toe en typ je bijvoorbeeld de contactinformatie of de copyrightgegevens. Speciale tekens zoals het copyrightsymbool zijn niet direct met het toetsenbord in te voeren. In RocketCake kies je zulke speciale tekens via het menu Insert, Insert Text Symbol.
©PXimport
Koppelingen
Je wilt natuurlijk dat de knoppen in het navigatiemenu verwijzen naar de juiste pagina’s. Hiervoor selecteer je eerst de knop in het navigatiemenu en klik je dan op de knop met het kettinkje. Of je drukt op de rechtermuisknop en kiest Insert hyperlink. Hierdoor opent een keuzevenstertje waar je moet kiezen tussen linken naar een externe webpagina, een e-mailadres, een pagina van dit project of een bepaald bestand. Selecteer de optie Page in the project. Daarna zie je een lijst van aangemaakte webpagina’s waarin je de juiste selecteert.
Bij Target kies je ervoor om de webpagina te openen in een nieuw browservenster of in het geopende browservenster. Deze laatste optie is gangbaar. Als je de linkermuisknop ingedrukt houdt terwijl je een knop van het navigatiemenu aanwijst, voeg je submenu’s toe die je dan op dezelfde manier laat verwijzen naar bestaande webpagina’s.
Masterpages
RocketCake werkt ook met zogeheten masterpages. Als je een website met veel pagina’s maakt, zal deze techniek de opmaak aanzienlijk versnellen. Een masterpage is een opgemaakt model dat als sjabloon fungeert voor andere pagina’s. Zo’n masterpage is dus geen reguliere webpagina. Zo maak je er een: maak een nieuwe webpagina, plaats het keuzemenu, zorgt dat het menu werkt zoals het hoort en maak deze pagina op zonder echte tekstinhoud. Dan voeg je uit de Toolset een Content Placeholder toe. Zonder dit element werkt de masterpage niet. Geef deze speciale pagina een duidelijke naam, bijvoorbeeld masterpage.html. Vervolgens maak je een of enkele webpagina’s die je niet van lay-out voorziet.
©PXimport
Je typt tekst, voegt eventueel een afbeelding toe en slaat deze pagina op. Bij deze pagina’s met inhoud kijk je onderaan bij de Properties in het veld Master Page. Daar activeer je de optie UseMasterPage. Als je het vinkje hebt aangezet, verschijnt een nieuw vakje waarin je de naam van de bedoelde masterpage selecteert. Je kunt meerdere masterpages gebruiken. Op dit moment zie je nog niets, maar als je op de knop Preview klikt, zul je merken dat de inhoud van deze pagina netjes in de Content Placeholder van de geselecteerde masterpage wordt gepubliceerd.
Media invoegen
Met RocketCake voeg je YouTube-filmpjes toe door in de Toolset het item YouTube video te selecteren. Daarna vul je in de Properties het webadres in van het filmpje. Al even makkelijk is het toevoegen van een fotogalerij. Nadat je Image Gallery hebt gekozen uit de Toolset, selecteer je de verschillende foto’s in de vakjes ImageFile1, ImageFile2 enzovoort. Er zijn verschillende manier om de foto’s in de galerij te vergroten. Je kunt ze bijvoorbeeld in een nieuw venster openen, in een pop-upvenstertje, maar het mooiste vinden wij als grote afbeelding op een afzonderlijke laag.
Publiceren
Je bent klaar? Dan kun je de website publiceren op internet of op een lokale schijf. RocketCake is voorzien van een ftp-functie om alles netjes op de server te plaatsen in de map die je provider daarvoor ter beschikking stelt. Vul daarvoor het ftp-adres in, de gebruikersnaam en het wachtwoord. Gebruik eventueel de optie Save Password om het wachtwoord op te slaan. Wanneer je de website publiceert op je harde schijf, kun je de homepage bezoeken door het bestand index.html te openen met je internetprogramma.
