JS64 Solutions 64 Ashley Avenue Belfast, BT9 7BU Noord-Ierland
De website aanpassen: MartijntjeSmits.nl Inhoud 1. De onderdelen van de adminpagina
2
2. Pagina's aanmaken
3
3. Posts schrijven in Markdown
4
1
1. De onderdelen van de adminpagina De adminpagina ziet er zo uit:
Het bovenste stuk Auth, met Groups en Users, is zodat je – mocht je dat willen – andere mensen een account kunt geven om posts voor de website te schrijven. Om de website zelf aan te passen heb je de onderdelen onder Msnl_Site nodig. In het kort werkt het zo: onder Pages maak je nieuwe pagina's aan; deze kun je vullen met Posts. Per Post moet je selecteren op welke Page je wil dat deze verschijnt. In het linkergedeelte van de website staat een lijstje (de Navigation) met verschillende Pages die je hebt aangemaakt. Daarnaast staat een foto; dit is de Side_ Image. Wanneer je een Page aanmaakt kan je er een Side_Image aan koppelen zodat wanneer een bezoeker op die pagina komt, het gekoppelde plaatje in het linkergedeelte van de website verschijnt. In de categorieën Files en Images kun je bestanden resp. plaatjes toevoegen die je vervolgens in de tekst van de Posts kunt verwerken. Ter illustratie:
2
2. Pagina's aanmaken Om een nieuwe pagina aan te maken klik je op de adminpagina naast het kopje Pages op Add. Je ziet dan het volgende scherm:
Bij Title schrijf je de naam van de pagina. Als List in navigation is aangevinkt, verschijnt deze pagina in het lijstje op het linkergedeelte van de website; als het niet is aangevinkt bestaat de pagina dus nog wel maar staat hij niet in dat lijstje. Bij Side image kun je een plaatje kiezen dat in het linkergedeelte van de website verschijnt als je op 3
de pagina klikt. In het menu worden alle plaatjes vermeld die je in de categorie Side_ Images hebt toegevoegd. Als Published niet is aangevinkt bestaat de pagina alleen als klad. Als je Default aanvinkt wordt deze pagina ingesteld als je nieuwe startpagina. We hebben een testpagina genaamd “Markdown” op de website gezet. Probeer bij wijze van oefening om deze zo in te stellen dat hij niet in de navigatielijst vermeld wordt. Als je wil kan je de pagina wel laten bestaan voor als je snel even hulp nodig hebt bij het opmaken van de website. LET OP: Side_ Images moeten altijd vierkant zijn. Het maakt verder niet zo veel uit hoe groot het plaatje precies is, als je maar zorgt (met Paint ofzo) dat het min of meer vierkant is. Dit is omdat ze voor de opmaak van het linkergedeelte gekrompen worden om precies in het vakje te passen, dus als je ze niet vierkant maakt krijg je een lachspiegeleffect met een in de hoogte danwel breedte samengeperste foto.
3. Posts schrijven in Markdown (Hoe komt men op deze pagina) Om de posts op te maken gebruik je Markdown. Dit is een soort lichte HTML die aan de browser doorgeeft hoe de tekst moet worden weergeven. Misschien klinkt dat intimiderend, maar het is niet zo moeilijk. # Kopjes (dit is Kop 1)
Kopjes (dit is Kop 1)
## Dit is kop 2
Dit is kop 2
Voor gewone tekst hoef je verder niks te doen.
Voor gewone tekst hoef je verder niks te doen.
Je kunt ook zo kopjes maken, afhankelijk van wat je zelf het handigste vindt:
Je kunt ook zo kopjes maken, afhankelijk van wat je zelf het handigste vindt:
Kop 1 =====
Kop 1
Kop 2 -----
Kop 2
## Tekens opmaken Om iets *cursief* te maken moet er één set sterretjes omheen; voor **vet** twee. Met achterwaartse apostrofen kan je iets 4
Tekens opmaken Om iets cursief te maken moet er één set sterretjes omheen; voor vet twee. Met
`monospace` maken dwz. alle letters even breed. achterwaartse apostrofen kan je iets monospace maken dwz. alle letters even breed. ##Lijstjes Een lijstje met bullet points moet zo: * Begin met twee spaties. * Dan een sterretje. * Nog een spatie. * Dan je tekst. Genummerde lijstjes kunnen ook: 1. Eén spatie 2. Het nummer 3. Een puntje 4. De tekst De regel voor beide typen lijstjes is dus dat de tekst altijd na 4 tekens (spaties meegeteld) begint.
Lijstjes Een lijstje met bullet points moet zo: • • • •
Begin met twee spaties. Dan een sterretje. Nog een spatie. Dan je tekst.
Genummerde lijstjes kunnen ook: 1. 2. 3. 4.
Eén spatie Het nummer Een puntje De tekst
De regel voor beide typen lijstjes is dus dat de Voor een lijst met sub-items moet ieder volgend tekst altijd na 4 tekens (spaties meegeteld) niveau vier tekens verder staan dan het vorige, begint. dus zo: Voor een lijst met sub-items moet ieder volgend niveau vier tekens verder staan dan het vorige, 1. Item A dus zo: * Dinges * Dinges 2. Item B * Dinges 1 1. Dingesje 2. Nog een dingesje * Dinges 2 * Dinges 3
1. Item A • Dinges • Dinges 2. Item B • Dinges 1 1. Dingesje 2. Nog een dingesje • Dinges 2 • Dinges 3
##Iemand quoten Zet een > en een spatie voor elke paragraaf, tevens voor regels die wit moeten blijven:
Iemand quoten
Zet een > en een spatie voor elke paragraaf, > Taking elephants across the Alps is not as tevens voor regels die wit moeten blijven: much fun as it sounds. The Alps are difficult enough when alone, and elephants are peculiarly Taking elephants across the Alps is not fitted for not crossing them. as much fun as it sounds. The Alps are > difficult enough when alone, and > Will Cuppy, The Decline and Fall of elephants are peculiarly fitted for not 5
Practically Everybody (1950)
crossing them. Will Cuppy, The Decline and Fall of Practically Everybody (1950)
## Links Om een stukje tekst tot een aanklikbare link te maken zet je de linktekst tussen [vierkante haakjes] en de URL tussen (gewone). Dus zo:
Links
[Klik hier!] (http://www.martijntjesmits.nl/markdown/)
Om een stukje tekst tot een aanklikbare link te maken zet je de linktekst tussen [vierkante haakjes] en de URL tussen (gewone). Dus zo: Klik hier!
## Plaatjes De plaatjes moeten eerst via de adminpagina zijn toegevoegd! Om een plaatje in de tekst te zetten moet je er als het ware naar linken. Dat gaat zo: ![alt text](/media/img/Vacanti_mouse.jpg)
Plaatjes De plaatjes moeten eerst via de adminpagina zijn toegevoegd! Om een plaatje in de tekst te zetten moet je er als het ware naar linken. Dat gaat zo:
Dus eerst een uitroepteken, dan tussen [vierkante haakjes] de zogenaamde alt text, dwz. Dus eerst een uitroepteken, dan tussen een beschrijving voor blinden en computers. [vierkante haakjes] de zogenaamde alt text, dwz. Vervolgens tussen (gewone haakjes) het pad een beschrijving voor blinden en computers. naar het plaatje. Vervolgens tussen (gewone haakjes) het pad naar het plaatje. Omdat het op de website staat begint het pad altijd met /media/img/ en daarna volgt de bestandsnaam die je het bestand zelf gegeven hebt bijv. "plaatje.jpg".
Omdat het op de website staat begint het pad altijd met /media/img/ en daarna volgt de bestandsnaam die je het bestand zelf gegeven Je kunt ook direct naar een plaatje op een andere hebt bijv. "plaatje.jpg". website linken, dan zet je de hele URL (dus met Je kunt ook direct naar een plaatje op een andere 6
http:// enzo) van het plaatje tussen de (...). ## Documenten Je kan direct naar je eigen PDFs en .docbestanden linken, mits je die eerst op de adminpagina onder "Files" hebt toegevoegd. Dat gaat min of meer hetzelfde als gewone links: [Aanklikbare tekst bijv de titel] (/media/files/bestandsnaam.pdf) ## Meer hulp nodig?
website linken, dan zet je de hele URL (dus met http:// enzo) van het plaatje tussen de (...).
Documenten Je kan direct naar je eigen PDFs en .docbestanden linken, mits je die eerst op de adminpagina onder "Files" hebt toegevoegd. Dat gaat min of meer hetzelfde als gewone links: Aanklikbare tekst bijv de titel
Meer hulp nodig?
Dit hier is een goede uitleg (in het Engels): [Daring Fireball Markdown Syntax] (http://daringfireball.net/projects/markdown/)
7
Dit hier is een goede uitleg (in het Engels): Daring Fireball Markdown Syntax