Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat.

Transcriptie

1 Een website maken met ZIMPLIT. Geen kennis van html nodig. Download Zimplit handleiding pdf Download de Zimplit bestanden Zimplit CMS Handleiding Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat. Het is een kwestie van teksten maken en foto's toevoegen. Voor deze cursus staan de Zimplit websites al bij ACC. Je hoeft dus niets te installeren. Algemene informatie Zimplit is platform onafhankelijk en werkt op Mac, Windows en Linux. Inhoud: Je hebt 2 webadressen: een web inlog adres en een web online adres. Als jouw web inlog adres is: (dit is een voorbeeld!) Dan is dit je online webadres om je site te bekijken: Jou Username en Password zijn dezelfde: zim200(dit is een voorbeeld!) 1 Inloggen Pagina 1 van 17

2 Username: Password: Klik op: Start 2 Toolbar Na het inloggen, wordt de site wordt geopend in de browser. Het is een gewone website, met uitzondering dat je gebruik kunt maken van de menu's. Je beschikt over alle nodige gereedschappen om je website te beheren in de Zimplit werkbalk in de linker bovenhoek. Uitloggen: klik op het kruisje rechtsboven van de toolbar 3 opslaan van je Website Na elke actie of verandering moet je de bestanden opslaan door te klikken op "Opslaan" op de werkbalk. Anders verlies je alle opgeslagen gegevens als je van de ene pagina naar de andere gaat. Wijzigingen kunnen geannuleerd worden door het invoeren van de toetsencombinatie Ctrl + Z (Command + Z, met Mac). Of door een foto of tekst te selecteren en te klikken op de Enter toets 4 Tekstverwerking Pagina 2 van 17

3 4 Tekstverwerking Plaats de cursor aan het begin van de regel waar je met de tekst wilt hebben. Bij het opmaken van tekst, selecteert je de tekst die je wenst te formatteren, en te kiezen tussen de volgende opties uit de werkbalk: 1. "Vet" maakt de geselecteerde tekst vet / plain. Selecteer de tekst die u wilt wijzigen en 2. klik op "Bold" op de werkbalk. 3. "Italic" maakt de geselecteerde tekst cursief / Selecteer de tekst die je wilt wijzigen en klik op "Italic" on the toolbar. op de werkbalk. 4. "Onderstrepen" maakt de tekst onderstreept / Selecteer de tekst die je wilt wijzigen en 5. klik op "Onderstrepen" on the toolbar. op de werkbalk. 6. Opmaak van de tekst die je kunt gebruiken standaard tekstformaat. Selecteer de tekst die je wilt gebruiken en klik op "text format" op de werkbalk. Selecteer het geschikte formaat (Normaal, Kop 1, Kop 2, titel 3). 5 Afbeeldingen toevoegen Foto's moeten in JPEG formaat zijn. De beeldgrootte moet max. 800 pixels zijn en de resolutie 72 dpi. Pagina 3 van 17

4 Plaats de cursor aan het begin van de regel waar je met de foto wilt hebben. Klik op "Insert Image " op de werkbalk. Een popup venster verschijnt waarin je de afbeelding vanuit je computer uploaden. Klik op Browse (Bladeren) en ga naar de map met foto's op je PC. Kies de foto die je op je webpagina wilt hebben en klik op open Opdracht1 Bedenk een onderwerp. Plaats de openingstekst groot boven in de pagina. Voeg daaronder een foto in. Schrijf een bijbehorende tekst. En herhaal dit een aantal keren tot het onderwerp compleet is Foto's mogen niet breder zijn dan 800 pixels en 72 dpi. Pagina 4 van 17

5 Als je foto's wilt verkleinen kan je het beste gebruik maken van Pixresizer. Zie de Pixresizer gebruiksaanwijzing onderaan. 6 Pagina's Een website bestaat uit webpagina's. "Nieuwe pagina" op de werkbalk Als je een nieuwe webpagina, klikt op De eerste pagina die je ziet is Page 1 7 Pagina naam veranderen Klik op Site menu Klik op menu structure Pagina 5 van 17

6 Kies Rename Page Verander de naam in Home. Klik op OK. Klik op Save Changes Plaats de cursor linksboven in het tekstvlak Type Home Klik op in de Toolbar op Save 8 structuur en navigatie Om van de ene pagina te naar de andere pagina te kunnen klikken heeft een website over een navigatie menu beschikken. Het navigatie menu is de rode balk. Op het navigatie menu komen de navigatie knoppen: Home, About en Contact te staan. Pagina 6 van 17

7 De eerste pagina van een website is de Home page of index.html Een 2e pagina, de About pagina maken. Klik in het menu op Home. Klik in de Toolbar op: Make new page Vul bij Page name: About in Page to be copied: Home (index.html) Klik op Save Pagina 7 van 17

8 De About pagina is een copie van de Home pagina Je bent nu op de About pagina (grijze balk) Selecteer Home in het tekst vlak. Delete Home en type: About Klik in de toolbar op save. Een 3e pagina, de Contact pagina maken. Klik in het menu op Home. Klik in de Toolbar op: Make new page Vul bij Page name: Contact in Page to be copied: Home (index.html) Klik op Save De Contact pagina is een copie van de Home pagina Je bent nu op de Contact pagina (grijze balk) Selecteer Home in het tekst vlak. Delete Home en type: Contact Klik in de toolbar op save. 9 De website in de Browser bekijken Type in de browserbalk dit webadres in: Pagina 8 van 17

9 Klik op Enter Je ziet nu hoe je website er online uitziet. Klik op About, Contact en weer op Home en je ziet de pagina's verspringen. Zo werkt het navigatie menu van je website De menu struktuur van een website Klik op Home in het navigatie menu Klik in de Toolbar op Site menu Klik in het Menu scherm op Menu structure and options Je ziet hier de menu structuur van een website. Bovenaan Home in vet (je zit nu op de Home page) Daaronder About en Contact. 10 De pagina' About en Contact van inhoud (Content) voorzien. Klik in het menu op About. Typ in het teksvlak de informatie waarover de website gaat. Pagina 9 van 17

10 Klik in de Toolbar op Save Klik in het menu op Contact. Typ in het teksvlak je Naam, Telefonnummer en adres. Klik in de Toolbar op Save. 10 De website in de Browser bekijken Type in de browserbalk dit webadres in: Klik op About, Contact en weer op Home en je ziet de pagina's verspringen. Je website is klaar 11 Een webpagina verwijderen Klik in de het menu op Contact Klik in de Toolbar op de prullebak - Delete this page Klik in het venster op OK Klik in de Toolbar op Save. Let op! Deze actie kan niet ongedaan worden gemaakt. De eerste pagina: Page1 of Home pagina kan je niet verwijderen Je kunt je website uibreiden met meer pagina's. Je kunt in de Toolbar met het Site menu de naam van de pagina's veranderen. Extra's 12 Links maken Een koppeling is een klikbaar item op een webpagina die normaliter leidt tot een andere pagina of website. Maak een tekst link, selecteer de tekst die je wilt maken en klik op "Add link". op de werkbalk. Een popup venster verschijnt. Geef het adres op die naar de link die moet leiden, en klik op "OK". Pagina 10 van 17

11 het adres op die naar de link die moet leiden, en klik op "OK". Om een afbeeldings link te maken, klik op de afbeelding die je wilt te maken. Een popup venster verschijnt in de rechter benedenhoek van het beeld en klik vervolgens op "Add link" op de werkbalk. Geef het adres op die naar de link moeten leiden, en klik op "OK". 13 Bestanden toevoegen Als je een bestand (bijvoorbeeld in een PDF-formaat) naar een webpagina, klikt op de plaats waar je de tekst wilt toevoegen van een link met de naam van het document. Klik op "Toevoegen" op de werkbalk en selecteer "Bestand". Een popup venster verschijnt waar je bestanden kunt uploaden vanaf je Pc. (4) voor ervaren gebruikers Een Header of Banner moet in JPEG formaat zijn. De beeldgrootte moet 920 pixels breed zin en 280 pixels hoog, de resolutie 72 Dpi 14 Code weergeven Gebruikers die vertrouwd zijn met het programmeren websites hebben de Pagina 11 van 17

12 Gebruikers die vertrouwd zijn met het programmeren websites hebben de mogelijkheid om hun site met pagina-codes te programmeren. Klik op "Code" HTML. Een popup venster verschijnt waarin u eem keuze maakt om de HTML of CSS codes te bekijken. Hier kan het ontwerp en de functies van de site veranderen. Sla de wijzigingen die je hebt gemaakt. 15 Zimplit installeren met FTP Zimplit downloaden en installeren Downoad Zimplit (Mac, Windows) van Na het downloaden van Zimplit moet je het bestand uitpakken. Het pakket omvat Zimplit software als een PHP bestand (zimplit.php) en de standaard versie bevat ook een gratis website-ontwerp. Upload het bestand naar de server Zorg ervoor dat de zimplit.php bestand in dezelfde map als de index.html file van je website. Download Filezilla (Mac, Windows) van //filezilla-project.org/ FileZilla is een programma waarmee je website bestanden kunt uploaden naar de Server van je Provider. Daarna is je website online op het internet te zien. Installeer Filezilla Vul de FTP ( File Transfer Protocol) gegevens in die je van je Provider hebt gekregen.(dit is een voorbeeld!) Host: ftp.planet.nl Gebruikersnaam: mijnsite Wachtwoord: 2010 Poort: Vul niets in of 21 Als je een engelse versie van Filezilla hebt dan zie je: Host, Username, Password, Port, Connect. Klik op snelverbinden om verbinding te maken met de server Pagina 12 van 17

13 Je hebt nu verbinding met de Server van je Provider. Links zie je de Lokale Site. De lokale site is je Pc waar de website map op staat. Rechts zie je de Externe site. Dat is de server van de Provider. Zoek op je Pc naar de Zimplit map Open op de Externe site de map public_html Dit is de map waar de bestanden van je website map in moeten komen Klik op met de Rechtermuis op de geselecteerde bestanden en klik op: Upload De bestanden worden nu naar de Public_html map verstuurd. Wacht net zolang totdat alle bestanden in de Public_html map zitten. Filezilla afsluiten om de verbinding met de server te verbreken. Bestand: Sluiten als door een trage verbinding de bestandenoverdracht niet lukt sluit dan Filezilla af (Bestand -sluiten) en begin opnieuw. Om met Zimplit te kunnen werken moet je Zimplit CHMOD rechten toekennen 16 installeren Zimplit Na het downloaden van Zimplit standalone software, moet je het bestand uitpakken. Het pakket omvat Zimplit software als een PHP bestand (zimplit.php). Pagina 13 van 17

14 Templates Je kunt uit een aantal mooie designs voor je website kiezen. Deze designs of templates kan je downloaden op de website van Zimplit. Door de html en css te veranderen kan je het ontwerp zelf aanpassen. Download een template van Pak die uit en plaats die in de Zimplit map. De basis template die we in de cursus gebruiken is = nr 55. Upload het bestand Zimplit naar de server Zorg ervoor dat de zimplit.php bestand in dezelfde map als de index.html file van je website. Gebruik een FTP-programma om de CHMOD rechten van de zimplit.php bestand naar 777 op de server in te stellen. * Kies voor 777 voor alle bestanden! Klik met je muis op de Zimplit map in de Externe site en kies voor Change File attributes V Vink Write aan Numeric Value: 777 V Vink Recurse into subdirectories aan (Mac Flle - Info) Pas toe op alle onderdelen Klik op OK. Nu kan je aan de slag gaan met Zimplit. Pagina 14 van 17

15 17 Zimplit map verwijderen om je website te verwijderen (Let op! deze actie kan niet ongedaan worden gemaakt) Zet de CHMOD rechten op 755 en pas toe op alle onderdelen (Mac) V Vink Write aan V Vink Recurse into subdirectories aan 18 Pixresizer Als je foto's wilt verkleinen kan je het beste gebruik maken van Pixresizer, gratis te downloaden. Grote foto's kan je verkleinen maar kleine foto's kan je niet vergroten want ze worden onscherp! De foto's moeten maximaal 800 pixels breed zijn met een resolutie van 72 Dpi Pagina 15 van 17

16 Plaats al je foto's in 1 map. Maak een nieuwe lege map Kies: Work with multiple Files 1 Load Picture. Source: Kies de map met je foto's Destination: Kies de nieuwe lege map waar de geresizde foto's in terecht moeten komen. 2 Select New Size. Kies: Custom size: 800 (pixels) of kleiner. 3 Select File Format. Kies: JPEG4 Klik op: Save Picture Je ziet in de verloop balk dat het resizen gebeurd. Ok. It's all done. Klaar Download de Pixresizer manual Pdf 19 Een eigen website beheren. Met je Pc kan je via de browser een eigen website maken en beheren. Provider Als je zelf over een Zimplit website wilt beschikken met een eigen domeinnaam dan heb je een webaccount nodig met PHP bij een Provider. bijv: moet dan wel zelf de zimplit software installeren bij DDS (uploaden met een FTP programma). Het voordeel is dat je zelf het ontwerp van je website kunt aanpassen. Gratis website Je kunt je ook gewoon aanmelden bij voor een gratis website. Daar kun je op ongeveer dezelfde wijze een website maken als in deze cursus. Het aantal ontwerpen (templates) waar uit je kunt kiezen is beperkt. Webklik voorbeelden Webwinkel Ben je van plan een online webwinkel beginnen dan kan je een gratis account met betaalmogelijkheden bij bijv: Webwinkel voorbeelden 20 Aanmelden bij Google. Als je wilt dat je website met Google gevonden kan worden dan kan je webadres hier gratis aanmelden: Pagina 16 van 17

17 Pagina 17 van 17