3 Website opbouwen: vervolg - Weeblyweeblyvormingplus.weebly.com/uploads/1/3/9/7/13978160/... ·...

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:



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



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.



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.


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.


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.

http://kb.weebly.com/webmaster-tools.html

http://weeblyforums.com/seo-tips/

http://kb.weebly.com/google-analytics.html


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:



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:



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.

http://weeblyforums.com/2012/05/fighting-spam-in-weebly-when-should-you-take-action/#more-3927

http://weeblyforums.com/2012/05/fighting-spam-in-weebly-when-should-you-take-action/#more-3927


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.

http://www.google.com/calendar/



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.

http://drive.google.com/



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>

http://www.spreekwoord.nl/

http://www.citaten.net/tools/tools.html

http://www.flash-gear.com/npuz/



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.

http://pressbin.com/tools/excel_to_html_table/index.html


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:



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

http://weeblyforums.com/2012/02/weebly-flexible-footer-create-drag-drop-content-footer/



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.

3 Website opbouwen: vervolg - Weeblyweeblyvormingplus.weebly.com/uploads/1/3/9/7/13978160/... ·...

Documents

Transcript of 3 Website opbouwen: vervolg - Weeblyweeblyvormingplus.weebly.com/uploads/1/3/9/7/13978160/... ·...