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
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 Website opbouwen: vervolg Elementen 15
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. Website opbouwen: vervolg Elementen 16
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 Elementen 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
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. Website opbouwen: vervolg Website optimaliseren voor zoekmachines (SEO) 19
4 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: Blog 20
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: Blog 21
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. Blog 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: <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. Toepassingen embedden 23
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. 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: <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> Toepassingen embedden 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 bijhorende html-code Naam Jan Jos Paul Leeftijd 25j 34j 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 door De html-code wordt dan: <td>naam</td> <td>leeftijd</td> <th>naam</th> <th>leeftijd</th> <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. Toepassingen embedden 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: HTML/CSS aanpassen 27
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; } HTML/CSS aanpassen 28
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. HTML/CSS aanpassen 29