|
Nu uw sitemap is aangemaakt kunnen we pas beginnen met het aanmaken van onze eerste webpagina.
We gaan via File --> New en krijgen dan volgend scherm te zien. 
We kiezen hier bij Category: Basic page, en bij Basic page: HTML en drukken op Create. We krijgen nu een witte blanco pagina te zien, en daarboven de volgende buttons. 
- Show code view: Hiermee krijg je de html code ( broncode ) te zien.
- Show code en design views: Hiermee wordt je werkblad in twee gesplitst, bovenaan de html code en onderaan de design view ( ontwerpvenster ).
- Show design view : gewone ontwerpvenster waar we nu in zitten.
- Title : Het woord zegt het zelf ( waar we de titel van onze pagina kunnen ingeven.
Wat we nu vervolgens kunnen doen is onze pagina instellingen meegeven.
We klikken hiervoor in de menubalk op Modify --> Page properties en komen dan in volgend scherm terecht. 
Hier kunnen we zeer veel zaken ingeven: Appearance: Hier zie je volgende zaken staan. - Page font: Het basisfont dat je wil gebruiken in je site.
- Size: De grootte van je fontkeuze.
- Text color: De kleur van je font.
- Background color: De achtergrondkleur van je pagina.
- Background image: Indien je geen kleur wenst in te geven maar een bestaande afbeelding als achtergrond. Vb. een gifje ( dit word gelijk herhaald over de ganse pagina).
- Left margin: Hier kan je ingeven hoeveel pixels de inhoud van de pagina vanaf de linkerkant moet staan.
- Top margin: Hier kan je ingeven hoeveel pixels de inhoud van de pagina vanaf de bovenkant moet staan.
- Right margin: Hoeveel verwijdert vanaf de rechterzijde.
- Bottom margin: Uiteraard hoeveel verwijdert van de onderzijde van de pagina.
Links: Hier geven we de instellingen voor onze links. - Link font: Dit is het lettertype dat je wil gebruiken voor de links.
- Size: De tekengrootte van deze links.
- Link color: De link kleur wanneer er niet over gegaan wordt of op geklikt.
- Rollover links: De kleur als je met de muis over de links gaat.
- Visited links: De kleur wanneer je de pagina reeds hebt bezocht.
- Active links: De kleur van de links wanneer je op een bepaalde pagina bent.
- Underline style: Hier kan je ingeven of de links moeten onderlijnd worden of niet.
Headings: Hier kan u het lettertype en kleuren ingeven voor elke grootte van headings. Title/Encoding: Hier kan u eveneens de titel van de pagina ingeven. Tracing image: Dit is niet van toepassing. Wat we nu kunnen doen is bij Appearance ons gewenste lettertype ingeven en achtergrondkleur of afbeelding.
Ik verkies als Page font: Verdana, size: small, text color: #000000, background color : #cccccc
We klikken nu op Apply, en schakelen nu over naar Links.
We geven hier eveneens in bij Link font: Verdana, Size: small, Link color: #006699, Rollover color: #0099cc, Visited links: #0099cc, Active links: #33ccff, en bij Underline style kiezen we voor Never underline.
We klikken nu Apply en dan op OK. We gaan voor de aardigheid eens even een blikje werpen in onze html code. Zoals tevoren reeds vermeld kan je hier naartoe via de Button Code bovenaan uw werkblad.
Je krijgt nu ongeveer volgend scherm te zien. 
Je merkt dat elke stap zeer zuiver wordt weggeschreven in de html code.
Wat er nu gebeurt, is met de pagina instellingen is dat dreamweaver nu een soort van stylesheet heeft geplaatst in deze broncode. Normaal is het veel mooier om deze te plaatsen in een hiervoor speciaal gemaakt stylsheet, maar dit wordt in een latere les wel even uitgelegd hoe je dit kan doen.
We schakelen terug even over naar ons werkblad via de button Design.
In het venster Title: geven we even de naam van dit document in vb. welkomstpagina.
We gaan dan nu even met onze cursor op ons werkblad staan en zetten hier vb. de tekst.
Welkom op mijn eerste site.
We gaan nu even kijken in ons properties panel ( indien je dit onderaan uw scherm niet terug vind kan je dit oproepen via Windows --> Properties , of door Ctrl+F3 te klikken.
Hier zie je reeds dat het font en size en kleur reeds zijn ingegeven en moeten dus normaal niet opnieuw worden aangepast.
In dit geval nu gaan we dat wel even doen door eerst onze tekst te selecteren,
en dan in ons properties panel volgende instellingen mee te geven: Format: Heading 1, en in het kleurvakje waar je nu zwart ziet staan klik je op het gekleurde vlakje en kiest even een gewenste kleur.
Zo dat ziet er al helemaal anders uit met die hoofding. 
Wanneer we nu achter onze H1 ( Heading 1 ) op enter of return drukken en een nieuwe tekst schrijven zal je zien dat het terug op zijn normale font style staat.
Indien dit niet het geval is en de kleur nog steeds is zoals de heading, moet je eens even kijken in je properties onder Style: Hier moet je dan even veranderen in None. En zal je nu wel terug het juiste font krijgen zoals staat ingegeven in je pagina instellingen. Als een nieuwe Paragraaf begint dan heb je eveneens in je properties panel de mogelijkheid om deze in de gewenste richting uit te lijnen. 
We typen nu onder de Heading een willekeurige tekst, Ik heb gekozen om deze zolang links uit te lijnen.
We krijgen nu ongeveer onderstaan voorbeeld. 
Voor het invoegen van een link doen we net hetzelfde als hierboven vermeld, maar deze kunnen we dan eveneens even selecteren en in ons properties panel in het vakje naast Link: De gepaste url intypen, en daaronder bij target: of hij in een _blank page of op een andere wijze moet openen. Je zal merken dat deze gelijk de instellingen overneemt die we ingaven in onze pagina instellingen. Vb. 
Wat we nu gaan doen is gewoon onze pagina even opslaan.
Dit doen we via File --> Save as of Ctrl+S en geven deze de naam index.htm, of je mag ook index.html ingeven.
Nu zie je dat uw pagina aan de rechterzijde in uw sitemap geplaatst is. 
Het enige dat we nu nog even gaan doen in deze les is het testen van deze pagina in de browser.
Dit doen we door gewoon F12 te drukken.
Je kan nu zien dat alles naar behoren werkt.
De links hebben hun rollover toestand, de url's werken goed. Goed voor een beginneling he. Volgende les maken we het nog een beetje interessanter hoor.
|
14°C 
