Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Elementen 14
3 Website opbouwen: vervolg
3.1 Elementen
3.1.1 Bestand
Op je website kan je een bestand plaatsen (doc, pdf, …) dat door je bezoekers gedownload kan
worden
.
3.1.2 Links
Zowel bij het typen van tekst (2.1.1) als bij het opmaken van een foto (2.1.3) zijn we de knop
tegengekomen. Hiermee kan je een link maken met een andere website, een pagina op je eigen
website, een bestand of een e-mailadres:
Ook aan een knop of button kan je een link koppelen:
Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Elementen 15
3.1.3 Fotogalerie en diapresentatie
Bij een fotogalerie en een diapresentatie kan je meerdere foto’s tegelijkertijd uploaden door de Ctrl-
toets ingedrukt te houden.
3.1.4 YouTube Video
Vul het webadres van de YouTube Video in.
3.1.5 Google-kaart
Vul het adres in dat je wil weergeven.
3.1.6 Contactformulier
Als je het contactformulier aan je website toevoegt, krijg je een standaard contactformulier dat je
naar eigen keuze kan aanpassen. Klik hiervoor op formulieropties
Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Elementen 16
Veldeigenschappen
Per veld kan je de eigenschappen aanpassen. Je hebt de mogelijkheid om de bezoeker te verplichten
om het veld in te vullen. Dan staat er bij het veld een sterretje. Klik op het veld om aan te passen.
Overzicht van de ingediende contactformulieren
Via invoeren bekijken kun je een overzicht van de ingediende formulieren raadplegen.
Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Elementen 17
3.1.7 Links naar sociale media
Rechtsboven staan de icoontjes van Facebook, Twitter, LinkedIn en RSS feeds. Als je de links invult,
verschijnen ze ook op je website. Als de links leeg blijven, komt deze informatie niet op je website
terecht.
Misschien wil je deze optie uitschakelen? Dan kan dit via Designopties:
3.1.8 Elementen kopiëren
Elementen die je op een pagina hebt aangemaakt, kan je kopiëren of verplaatsen naar een andere
pagina van je website. Klik hiervoor op het groene pijltje in de linkerbovenhoek van het element.
Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Webadres (domein) aanpassen 18
3.2 Webadres (domein) aanpassen Het scherm met de 3 opties (zie 1.2.1), kan je opnieuw bekomen via Instellingen.
3.3 Website optimaliseren voor zoekmachines (SEO)
3.3.1 Enkele tips
1. Voeg kernwoorden en een omschrijving van je website toe.
Op het tabblad pagina’s kan je ook voor elke pagina apart deze informatie invoegen:
2. Kies paginanamen die relevante zoektermen kunnen zijn.
3. Geef betekenis aan je links: bijvoorbeeld ‘Bezoek onze webwinkel met sportartikelen’ i.p.v.
‘klik hier om onze webwinkel met sportartikelen te bezoeken’.
4. Maak gebruik van titels. Zoekmachines vinden titels belangrijker dan gewone tekst.
Vormingplus Limburg, L. Frederix
Website opbouwen: vervolg Website optimaliseren voor zoekmachines (SEO) 19
5. Plaats ‘alt text’ bij de foto’s (zie 2.1.3, optie E).
6. Zorg ervoor dat andere websites een link plaatsen naar je eigen website.
7. Zet regelmatig nieuwe inhoud op je website, bijvoorbeeld via een blog.
8. Maak gebruik van Google webmasterhulpprogramma’s (Webmaster Tools) om meer inzicht
te krijgen in je zichtbaarheid voor Google. Zie http://kb.weebly.com/webmaster-tools.html
voor meer informatie.
Zie http://weeblyforums.com/seo-tips/ voor meer tips.
3.3.2 Aantal bezoekers
Via de overzichtspagina van je websites, kan je zien hoeveel pagina’s bezocht zijn en hoeveel
individuele bezoekers je website geraadpleegd hebben.
Als je gedetailleerde informatie wil, kan je gebruik maken van Google Analytics. Zie
http://kb.weebly.com/google-analytics.html voor de bijhorende uitleg.
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Blog 20
4 Website opbouwen: extra
4.1 Blog
4.1.1 Blogpagina aanmaken
4.1.2 Bericht toevoegen
Door op New Post te klikken, krijg je ruimte om een nieuw bericht aan te maken. Hiervoor kan je de
bijhorende elementen gebruiken:
Voor lange berichten die je niet onmiddellijk volledig wil tonen, is het element ‘Meer lezen –
onderbreking’ interessant.
Koppel je bericht aan een of meerdere categorieën:
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Blog 21
Per bericht kan je instellen of commentaren al dan niet toegelaten zijn (optie 1 of 3) en of je ze
vooraf wil goedkeuren (optie 2):
Ook als je ‘openen’ kiest, kan je via ‘Comments’ achteraf nog ongewenste commentaren verwijderen.
Via Blog Settings kan je de optie instellen die bij elk nieuw bericht als standaardoptie wordt
weergegeven.
4.1.3 Zijbalk blog
Standaard verschijnt deze zijbalk aan de rechterkant:
Zodra je berichten post en er categorieën aan koppelt, worden de
velden ‘Archives’ en ‘Categories’ geüpdatet.
Je kan velden verwijderen of andere elementen toevoegen. Bij het
tabblad elementen verschijnt de volgende reeks keuzemogelijkheden:
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Blog 22
4.1.4 Bloginstellingen
4.1.5 Commentaren
Via Comments krijg je een overzicht van de commentaren. Je kan commentaren goedkeuren,
verwijderen of als spam opgeven.
4.1.6 Facebook commentaren
In plaats van de standaard ‘Comments-tool’ van Weebly, kan je ook de tool van Facebook in je blog
opnemen. Zie
http://weeblyforums.com/2012/05/fighting-spam-in-weebly-when-should-you-take-action/#more-
3927
voor meer informatie.
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Toepassingen embedden 23
4.2 Toepassingen embedden Toepassingen die niet standaard in Weebly zitten, kan je embedden met behulp van embed code
onder more…
We bekijken enkele voorbeelden.
4.2.1 Andere website
Je kan een link leggen naar een andere website, maar je kan die website ook embedden in je eigen
website.
Gebruik ‘Aangepaste HTML’. Plaats hierin de volgende code met daarin de website die je wil
embedden:
<object data=http://www.vormingpluslimburg.be width="600" height="400"> <embed
src=http://www.vormingpluslimburg.be width="600" height="400"> </embed> Error: Embedded
data could not be displayed. </object>
4.2.2 Video en audio
Niet enkel YouTube, maar ook video en audio die op andere websites staan, kan je (meestal)
embedden. Kopieer daarvoor de embed code van de video of de audio in ‘Aangepaste HTML’. Die
embed code vind je in de buurt van de video die je wil embedden.
4.2.3 Activiteitenkalender
Een kalender die je (bijvoorbeeld) in Google agenda hebt aangemaakt, kan je op je website plaatsen.
Kalender aanmaken
Ga naar www.google.com/calendar/
Log in met je google-account. Als je nog geen gmailadres hebt, klik dan op de knop ‘Aanmelden’
rechtsbovenaan om het account aan te maken.
Als je ingelogd bent, zie je de kalender waarin je afspraken of activiteiten kan toevoegen.
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Toepassingen embedden 24
Kalender embedden
Om de agenda in je website te embedden, doe je het volgende:
Stap 1. Klik bij ‘Mijn agenda’s’ op het pijltje en kies ‘Instellingen’:
Klik op de naam van je agenda. In het voorbeeld is dit ‘Mijn agenda’:
Stap 2. Zo kom je in het venster ‘Agendagegevens’:
Om de kalender te embedden, kopieer je de code die bij ‘Deze agenda insluiten’ staat, naar een
‘embed code’- element in je website.
Stap 3. Om ervoor te zorgen dat je bezoekers de agenda op je website kunnen zien, moet je de
agenda openbaar maken. Ga hiervoor naar ‘Deze agenda delen’:
Zet een vinkje voor ‘Deze agenda openbaar maken’:
Klik op ‘Opslaan’ en bevestig dat je de wijziging wil doorvoeren.
4.2.4 Google drive
Documenten die je in Google drive (= Google docs) http://drive.google.com/ maakt, kan je
embedden in je website. Bijvoorbeeld als je een enquête (form) hebt gemaakt die je wil embedden,
klik dan rechtsbovenaan op ‘Meer acties’ en kies ‘Invoegen’:
De code ‘<iframe scr= …’ die je dan bekomt, plak je in je website in een embed code- element.
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Toepassingen embedden 25
Hierdoor verschijnt de bijhorende enquête op je website.
4.2.5 Spreekwoord / Citaat van de dag
Websites met spreekwoorden of citaten, bieden meestal ook een mogelijkheid om een spreekwoord
of citaat van de dag op je website te plaatsen. Voorbeelden zijn http://www.spreekwoord.nl/ (klik
onderaan op spreekwoord van de dag) of http://www.citaten.net/tools/tools.html. Kopieer de code
naar een embed code- element.
4.2.6 Puzzel
Via http://www.flash-gear.com/npuz/ kan je van een eigen foto een puzzel maken. Upload een foto
van je computer en kies het formaat van de puzzelstukken. Kopieer de code die dan verschijnt naar
een embed code- element.
4.2.7 Tabel
Voorbeeld
Om de tabel op op je website te plaatsen, plak je de volgende html-code in een embed code
element:
<table
border="2px"
frame="hsides"
rules="rows"
cellpadding="10px"
width="100%"
>
<tr align="left"> <th>Naam</th> <th>Leeftijd</th> </tr>
<tr> <td>Jan</td> <td>25j</td> </tr>
<tr> <td>Jos</td> <td>34j</td> </tr>
<tr> <td>Paul</td> <td>55j</td> </tr>
</table>
Vormingplus Limburg, L. Frederix
Website opbouwen: extra Toepassingen embedden 26
Van Excel naar html (zonder opmaak)
Als je een Exceltabel hebt die je naar html-code wil omzetten, kan je gebruik maken van de tool
http://pressbin.com/tools/excel_to_html_table/index.html.
Een voorbeeld:
Tabel in Excel bijhorende html-code
Naam Leeftijd
Jan 25j
Jos 34j
Paul 55j
<table> <tr> <td>Naam</td> <td>Leeftijd</td> </tr> <tr> <td>Jan</td> <td>25j</td> </tr> <tr> <td>Jos</td> <td>34j</td> </tr> <tr> <td>Paul</td> <td>55j</td> </tr> </table>
Om aan te geven dat ‘Naam’ en ‘Leeftijd’ titels zijn, vervangen we
<td>Naam</td> <td>Leeftijd</td>
door
<th>Naam</th> <th>Leeftijd</th>
De html-code wordt dan:
<table>
<tr> <th>Naam</th> <th>Leeftijd</th> </tr>
<tr> <td>Jan</td> <td>25j</td> </tr>
<tr> <td>Jos</td> <td>34j</td> </tr>
<tr> <td>Paul</td> <td>55j</td> </tr>
</table>
Door deze html-code in een embed code- element te plakken, krijg je een tabel zonder opmaak.
Opmaak toevoegen
Je kan bijvoorbeeld de opmaak toevoegen zoals in bovenstaand voorbeeld. Het is echter meer en
meer gebruikelijk om de opmaak in de css-file aan te passen, zie 4.3.2.
Vormingplus Limburg, L. Frederix
Website opbouwen: extra HTML/CSS aanpassen 27
4.3 HTML/CSS aanpassen Als je extra wijzigingen wil aanbrengen aan de opmaak van je website, kan je de html/css code
aanpassen. Ga hiervoor naar Design en klik vervolgens op.
Dan krijg je toegang tot de volgende bestanden:
Vormingplus Limburg, L. Frederix
Website opbouwen: extra HTML/CSS aanpassen 28
Als je deze bestanden wijzigt, creëer je een aangepast design. In de lijst van designs worden de
aangepaste designs met het volgende icoon weergegeven:
We bekijken enkele voorbeelden waarin het nuttig is om een aangepast design aan te maken,
namelijk bij het wijzigen van de voetnoot en bij het invoegen van tabellen.
4.3.1 Voetnoot
Bron: http://weeblyforums.com/2012/02/weebly-flexible-footer-create-drag-drop-content-footer/
Heb je graag een uitgebreide voetnoot die op alle pagina’s van je website hetzelfde is? Door
onderstaande instructies te volgen, creëer je zo’n voetnoot waarin je meerdere Weebly-elementen
kan plaatsen.
Ga hiervoor naar Design > HTML/CSS bewerken.
Stap 1. Voeg aan het main-style.css bestand de volgende code toe:
#flexifooter{
width: 960px;
color: #888800;
font-size: 15px;
background: #2a2a2a;
text-align: center;
padding: 28px 0px 20px 0px;
}
Stap 2. Voeg aan alle page layout bestanden (html) de volgende code toe, juist boven de lijn waarin
footer staat:
<div id="flexifooter">{flexifooter:content}</div>
Stap 3. Ga naar een pagina van je website. Via stap 1+2 is er onderaan de pagina een zone gecreëerd.
Voeg elementen toe aan deze voetnoot. Alle informatie die je toevoegt, verschijnt automatisch ook
op alle andere pagina’s van je website.
4.3.2 Tabel
Plak de html-code van de tabel – zonderopmaak – in een embed code element, zie 4.2.7.
Om de opmaak te definiëren, kan je de css-code van je website aanpassen. Ga hiervoor naar Design >
HTML/CSS bewerken. Voeg aan het main-style.css bestand bijvoorbeeld de volgende code toe:
table { border-collapse: collapse; width: 100%; }
th { background-color: #222; color: #fff; }
Vormingplus Limburg, L. Frederix
Website opbouwen: extra HTML/CSS aanpassen 29
th, td { border: 1px solid #444; padding: 5px; text-align:center; }
tr:nth-child(even) { background-color: #fdfdfd; }
tr:nth-child(odd) { background-color: #e1e1e1; }
Dan ziet de tabel er als volgt uit:
Heb je liever andere kleuren, dan kan je de css-code uiteraard naar eigen keuze aanpassen.