05-02-2013    
 

   Homepages maken.

het begin   eigen startpagina   handleidingen   manuals   validate  

editors   dreamweaver   foto-albums   CMS   flash/javascript   VanAllesWat



Het Begin
Hoe maak ik nou eigenlijk een homepage?
Om pagina's op je webruimte te zetten moet je eerst die pagina's maken, gewoon op je eigen computer. Met kladblok (een programma wat op elke windows computer zit) maak je eerst je beginpagina (met bijvoorbeeld de tekst: Hallo, dit is mijn site) en die noem je index.html en dus geen Index.html, index.htm, home.html, Home.html of home.htm.
Met html-codes kun je deze pagina verfraaien en van links en andere website attributen voorzien zoals kleurtje.
Vervolgens ga je dit bestand (en al je andere bestanden die je op je website wil plaatsen) van jouw pc naar de server van DeDS overzetten. Hiervoor gebruik je een ftp-client (File Transport Protocol, een programma om bestanden over te zetten). Log daarmee in naar onze server en je komt meteen op de juiste plek (je www map) waar je je bestanden en mappen neer moet zetten. Zie ook onze ftp-pagina over het transporteren van bestanden.
Let wel
Onze server (en die van de meeste providers) is hoofdletter-afhankelijk, in tegenstelling tot je eigen pc. Dit geldt voor zowel de mapnamen als de bestanden. Wen je dus aan om zowel mappen, images en bestanden als de links ernaar toe allemaal in kleine letters te benoemen. Ook de extensies ! Mocht een image of bestand wel op je eigen pc te zien zijn en niet op je website op de server, dan ligt de oorzaak waarschijnlijk aan het hoofdlettergebruik. Gebruik ook nooit samengestelde tekens (á, ë) of symbolen (#, €, $, %, @) in benamingen van je mappen, images of andere bestanden.


Mijn eigen startpagina
Een leuke oefening is om je eigen startpagina te maken voor op je computer.
Hierop kun je je eigen geliefde zoekmachine's zetten en kun je hiervanuit naar je eigen homepage op DeDS met de statistieken ervan.
Ook kun je hierop een link zetten naar je concept-homepagina op je eigen computer.
Je kunt er nog van alles meer bijzetten, zoals links naar plattegronden en vervoer.
Kortom, een hele riks "dagelijkse" links, om zo je favorietenlijst in je browser overzichtelijk te houden met niet-alledaagse links.
Ter verduidelijking is hier een oerlelijk voorbeeld.


Handleidingen Nederlands
- Nederlandstalige cursus Frontpage
- Handleiding HTML
- websitemaken.be
- Cursussen CSS en DHTML
- vertalingen van w3c.nl
- online flash cursus


Manuals Engelstalig
- WDG html-alfabet
- Sizzling HTML Jalfrezi
- a dictionary of HTML META Tags
- Cascading Style Sheets, level 1, van W3C
- Cascading Style Sheets, level 2, van W3C


Validate
- WDG met html-validator en html-alfabet en css-properties css
- W3C met html-validator en css-validator


Homepage Editors
Er zijn veel WYSIWYG programma's op de markt, waarmee je zonder enige kennis van html of javascript prachtige webpagina's kunt maken. Niet allemaal maken ze echter je webpagina's geschikt voor niet-internetexplorer-browsers. Een ervan is Microsoft's Frontpage, die ook berucht is om het onnodig uitbreiden van de code.
Een goede gratis editor is NVU.
Met het gratis Webdwarf kun je heel eenvoudig plaatjes en foto's deels over elkaar zetten.
Ook het niet gratis dreamweaver wordt vaak geroemd.
Verder kun je op opensourcecms.com een aantal interessante programma's online uitproberen, zoals het Image-Galleries programma Coppermine.


Dreamweaver
Dreamweaver is niet gratis maar wordt vaak geroemd.
Het 'edit sites' werkt volgens de gebruiksaanwijzing. Via 'site' vult u de 'edit sites' wizard in volgens de gebruiksaanwijzing. Bij 'edit sites' kiest u 'edit' en vult u een naam in. Kies in het volgende scherm 'no' (als uw site PHP gebruikt, dan ondersteunen wij dit niet. Ik neem aan, dat u een enkelvoudige site opzet). Kies in scherm 3 voor een kopie op uw computer te houden. Dan komt het scherm 'sharing files'. Kies connect to remote server: ftp
Vul in hostnaam = ftp.deds.nl
Map of folder = leeg laten
FTP Login = uw accountnaam
Password = uw password
Test hier uw verbinding. (dat werkt natuurlijk alleen als u verbonden bent met het internet). De rest invullen volgens de gebruiksaanwijzing tot 'done'. Dan in het rechtse schermpje 'files' de juiste map uitzoeken (met de index.htm er in) en met het blauwe pijltje omhoog worden de benodigde files in uw www-map gezet (dat werkt natuurlijk alleen als u verbonden met met het internet).


Foto-albums voor op je homepage
Op opensourcecms.com kun je een aantal interessante programma's online uitproberen, zoals het Image-Galleries programma Coppermine en Webalbum.
Met het gratis Jalbum genereer je eenvoudig mooie fotoalbums op je eigen pc die je dan via een ftp-programma overzet naar je website.
Zie ook onze fototips pagina.


CMS
Tegenwoordig wordt het opzetten en onderhouden van een website veelal gedaan met behulp van een systeem genaamd CMS (Content Management System). Door een CMS programma op de server van je hostingprovider te installeren kun je op een tamelijk eenvoudige manier je website maken en onderhouden.
Meer hierover vind je op onze cms pagina.

Alle cms-systemen draaien op php en zijn dus niet te gebruiken met een gewoon (gratis) DeDS-account.
Dit is wel mogelijk door lid te worden van onze vereniging  Open Domein.


Flash en Javascript
Hiermee kun je prachtige animaties en presentaties maken voor op je website.
Meer hiervoor op onze Flash en Javascript pagina.


Van Alles Wat
  • Wil je geen streep onder de links op je homepage, zet dan deze code in de HEAD van je pagina
        <style><!--a{text-decoration:none}//--></style>
  • Wil je de link bij het aanwijzen onderstrepen, zet dan deze code in de HEAD van je pagina (inclusief kleuraanpassing
        <style fprolloverstyle>A:hover {color: #A7800A; text-decoration: underline}</style>
  • Wil je een enkele link niet onderstrepen, zet dan tussen het anker: style="text-decoration: none"
        bv: <a href="www.deds.nl" style="text-decoration: none">link zonder onderstreep</a>
  •     Om je foto's iets minder makkelijk van je homepage
        te kunnen kopieren kun je de zgn "imagetoolbar" (zie
        op de afbeelding hiernaast) onderdrukken door onderstaande
        code in de HEAD van de pagina te zetten
            <meta http-equiv="imagetoolbar" content="no">
  • Kleurenschuifbalk
    Zet onderstaande code in de BODY van de pagina. Kleuren aanpassen naar eigen wens...
        <p><!--webbot bot="HTMLMarkup" startspan --><style type="text/css">
        <!--
        BODY {
        scrollbar-face-color: BAC679;
        scrollbar-highlight-color: #FFFFFF;--
        scrollbar-3dlight-color: 000000;
        scrollbar-darkshadow-color: FFFFFF;--
        scrollbar-shadow-color: FFFFFF;
        scrollbar-arrow-color: 000000;
        scrollbar-track-color: D6DFA5;
        }
        -->
        </style><!--webbot bot="HTMLMarkup" endspan -->
  • Wil je een gratis gastenboek op je site?




terug naar de klussende doener