3 Website opbouwen: vervolg

Vormingplus Limburg, L. Frederix

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:

Website opbouwen: vervolg Elementen

14

Vormingplus Limburg, L. Frederix 3.1.3 Fotogalerie en diapresentatie Bij een fotogalerie en een diapresentatie kan je meerdere foto’s tegelijkertijd uploaden door de Ctrltoets 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


15

Vormingplus Limburg, L. Frederix 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.


16

Vormingplus Limburg, L. Frederix 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.


17


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 Webadres (domein) aanpassen

18

Vormingplus Limburg, L. Frederix 5. 6. 7. 8.

Plaats ‘alt text’ bij de foto’s (zie 2.1.3, optie E). Zorg ervoor dat andere websites een link plaatsen naar je eigen website. Zet regelmatig nieuwe inhoud op je website, bijvoorbeeld via een blog. 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.

Website opbouwen: vervolg Website optimaliseren voor zoekmachines (SEO)

19


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:

Website opbouwen: extra Blog

20

Vormingplus Limburg, L. Frederix 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:


21

Vormingplus Limburg, L. Frederix 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/#more3927 voor meer informatie.


22


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:

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.

Website opbouwen: extra Toepassingen embedden

23

Vormingplus Limburg, L. Frederix 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. Website opbouwen: extra Toepassingen embedden

24


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:

Naam Leeftijd

Jan 25j

Jos 34j

Paul 55j


25


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 Naam Jan Jos Paul

Leeftijd 25j 34j 55j

bijhorende html-code

Naam Leeftijd

Jan 25j

Jos 34j

Paul 55j

Om aan te geven dat ‘Naam’ en ‘Leeftijd’ titels zijn, vervangen we Naam Leeftijd door Naam Leeftijd De html-code wordt dan:

Naam Leeftijd

Jan 25j

Jos 34j

Paul 55j

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.


26


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:

Website opbouwen: extra HTML/CSS aanpassen

27

Vormingplus Limburg, L. Frederix 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:
{flexifooter:content}

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; } Website opbouwen: extra HTML/CSS aanpassen

28

Vormingplus Limburg, L. Frederix 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.

Website opbouwen: extra HTML/CSS aanpassen

29

3 Website opbouwen: vervolg

Recommend Documents