Een website maken met Zimplit CMS

23-9-10 16:15Een website maken met Zimplit CMS

Pagina 1 van 17file:///Users/--/Desktop/Gallerys/Zimplit%20CMS/Zimplit%20Manual/zimplit/TMP32bn697jtm.htm

Een website maken met ZIMPLIT. Geen kennis van html nodig.

www.acc.dds.nl/lesonline/zimplit/

Download Zimplit handleiding pdf

Download de Zimplit bestanden

Zimplit CMS Handleiding

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

Het is een kwestie van teksten maken en foto's toevoegen.

www.zimplit.com

Voor deze cursus staan de Zimplit websites al bij ACC. Je hoeft dus niets teinstalleren.

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 jouwweb inlog adres is:

www.acc.dds.nl/web/zim200/zimplit.php (dit is een voorbeeld!)

Dan is dit je online webadres om je site te bekijken:

www.acc.dds.nl/web/zim200/index.php

Jou Username en Password zijn dezelfde: zim200(dit is een voorbeeld!)

1 Inloggen

http://www.zimplit.com/index.html



Username:Password:

Klik op: Start

2 Toolbar

Na het inloggen, wordt de site wordt geopend in de browser. Het is een gewonewebsite, met uitzondering dat je gebruik kunt maken van de menu's. Je beschiktover alle nodige gereedschappen om je website te beheren in de Zimplitwerkbalk 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 enepagina naar de andere gaat.

Wijzigingen kunnen geannuleerd worden door het invoeren van detoetsencombinatie Ctrl + Z (Command + Z, met Mac). Of door een foto of tekst teselecteren en te klikken op de Enter toets

4 Tekstverwerking



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, ente kiezen tussen de volgende opties uit de werkbalk:

1. "Vet" maakt de geselecteerde tekst vet / plain. Selecteer de tekst die u wiltwijzigen en2. klik op "Bold" op de werkbalk. 3. "Italic" maakt de geselecteerde tekst cursief / Selecteer de tekst die je wiltwijzigen en klik op "Italic" on the toolbar. op de werkbalk.4. "Onderstrepen" maakt de tekst onderstreept / Selecteer de tekst die je wiltwijzigen en5. 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 zijnen de resolutie 72 dpi.



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 waarinje 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. Voegdaaronder een foto in. Schrijf een bijbehorende tekst. En herhaal dit een aantalkeren tot het onderwerp compleet is

Foto's mogen niet breder zijn dan 800 pixels en 72 dpi.



Als je foto's wilt verkleinen kan je het beste gebruik maken van Pixresizer. Ziede Pixresizer gebruiksaanwijzing onderaan.

6 Pagina's

Een website bestaat uit webpagina's. Als je een nieuwe webpagina, klikt op"Nieuwe pagina" op de werkbalk

De eerste pagina die je ziet is Page 1

7 Pagina naam veranderen

Klik op Site menu

Klik op menu structure



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 eenwebsite over een navigatie menu beschikken. Het navigatie menu is de rodebalk. Op het navigatie menu komen de navigatie knoppen: Home, About enContact te staan.



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 inPage to be copied: Home (index.html)Klik op Save



De About pagina is een copie van de Home paginaJe bent nu op de About pagina (grijze balk)

Selecteer Home in het tekst vlak. Delete Home en type: AboutKlik 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 inPage to be copied: Home (index.html)Klik op Save

De Contact pagina is een copie van de Home paginaJe bent nu op de Contact pagina (grijze balk)

Selecteer Home in het tekst vlak. Delete Home en type: ContactKlik in de toolbar op save.

9 De website in de Browser bekijken

Type in de browserbalk dit webadres in:




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. Zowerkt het navigatie menu van je website

De menu struktuur van een website

Klik op Home in het navigatie menuKlik 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.



Klik in de Toolbar op Save

Klik in het menu op Contact.

Typ in het teksvlak je Naam, Telefonnummer en Emailadres.

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 pageKlik 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 eenandere pagina of website. Maak een tekst link, selecteer de tekst die je wiltmaken en klik op "Add link". op de werkbalk. Een popup venster verschijnt. Geefhet adres op die naar de link die moet leiden, en klik op "OK".



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 klikvervolgens op "Add link" op de werkbalk . Geef het adres op die naar de linkmoeten leiden, en klik op "OK".

13 Bestanden toevoegen

Als je een bestand (bijvoorbeeld in een PDF-formaat) naar een webpagina, kliktop de plaats waar je de tekst wilt toevoegen van een link met de naam van hetdocument. Klik op "Toevoegen" op de werkbalk en selecteer "Bestand". Eenpopup 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 920pixels breed zin en 280 pixels hoog, de resolutie 72 Dpi

14 Code weergeven

Gebruikers die vertrouwd zijn met het programmeren websites hebben de



Gebruikers die vertrouwd zijn met het programmeren websites hebben demogelijkheid om hun site met pagina-codes te programmeren. Klik op "Code" HTML . Een popup vensterverschijnt 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 wijzigingendie je hebt gemaakt.

15 Zimplit installeren met FTP

Zimplit downloaden en installeren

Downoad Zimplit (Mac, Windows) van http://www.zimplit.com/

Na het downloaden van Zimplit moet je het bestand uitpakken. Het pakket omvatZimplit software als een PHP bestand (zimplit.php) en de standaard versie bevatook een gratis website-ontwerp.

Upload het bestand naar de server Zorg ervoor dat de zimplit.php bestand indezelfde 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 naarde Server van je Provider.

Daarna is je website online op het internet te zien.

Installeer FilezillaVul de FTP ( File Transfer Protocol) gegevens in die je van je Provider hebtgekregen.(Dit is een voorbeeld!)

Host: ftp.planet.nlGebruikersnaam: mijnsiteWachtwoord: 2010Poort: 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

http://www.zimplit.com/

http://filezilla-project.org/



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 mapOpen op de Externe site de map public_htmlDit 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: Sluitenals door een trage verbinding de bestandenoverdracht niet lukt sluit dan Filezillaaf (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 bestanduitpakken. Het pakket omvat Zimplit software als een PHP bestand (zimplit.php) .

http://www.zimplit.org/download/zimplit_cms_1.2_standalone.zip



www.zimplit.org/download/zimplit_cms_1.2_standalone.zip

TemplatesJe kunt uit een aantal mooie designs voor je website kiezen. Deze designs oftemplates kan je downloaden op de website van Zimplit. Door de html en css teveranderen kan je het ontwerp zelf aanpassen.

Download een template van www.zimplit.com. Pak die uit en plaats die in deZimplit 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.phpbestand in dezelfde map als de index.html file van je website.

Gebruik een FTP-programma om de CHMOD rechten van de zimplit.php bestandnaar 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 Fileattributes

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.

http://www.zimplit.com/designs.php



17 Zimplit map verwijderen om je website te verwijderen (Let op! deze actie kanniet 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, gratiste downloaden.

www.nederlandstaligesoftware.nl/softwareprogrammas/pixresizer.html

Grote foto's kan je verkleinen maar kleine foto's kan je niet vergroten want zeworden onscherp! De foto's moeten maximaal 800 pixels breed zijn met eenresolutie van 72 Dpi

http://www.nederlandstaligesoftware.nl/softwareprogrammas/pixresizer.html



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 terechtmoeten 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.

ProviderAls je zelf over een Zimplit website wilt beschikken met een eigen domeinnaamdan heb je een webaccount nodig met PHP bij een Provider. bijv: www.dds.nl.Je moet dan wel zelf de zimplit software installeren bij DDS (uploaden met eenFTP programma). Het voordeel is dat je zelf het ontwerp van je website kuntaanpassen.

Gratis website Je kunt je ook gewoon aanmelden bij www.webklik.nl 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

WebwinkelBen je van plan een online webwinkel beginnen dan kan je een gratis accountmet betaalmogelijkheden bij bijv: www.mijnwebwinkel.nl

Webwinkel voorbeelden

20 Aanmelden bij Google.

Als je wilt dat je website met Google gevonden kan worden dan kan je webadreshier gratis aanmelden: www.google.nl/addurl/

http://www.dds.nl/

http://www.webklik.nl/

http://www.webklik.nl/listing

http://www.mijnwebwinkel.nl/

http://www.mijnwebwinkel.nl/referenties/#2

http://www.google.nl/addurl/

Een website maken met Zimplit CMS

Documents

Transcript of Een website maken met Zimplit CMS