NVU-Workshop
Websites bouwen met Nvu
Henk Stoop -
Voorbeeld websites
Docent Website design HkeyDesigns HCC WG Website design KBO WG ICT-Adviseur
Workshop: • Software PC, Data USB • Syllabus is werkplan met: - onderwerpen en opdrachten • Bediening wordt uitgelegd met demo • Oefeningen zelf doen en opslaan • Thuis het geleerde praktiseren • Certificaat van deelname
Hkey-Designs Manders mondhygieniste Slaapadvies Sterrenburg Werkplan HkeyDesigns
1
NVU-Workshop
Webpagina voorbeeld
HkeyDesigns
2
NVU-Workshop
Begrippen Begrippen • Webserver • Host • HTML • URL • FTP • E-mail • HTTP • ISP • • • • •
Programma op PC web Aanbieder van webruimte (HCC) Hyper Text Markup Language Unique Resource Locator File Transfer Protocol Electronic mail HyperTekst Transfer Protocol Internet Service Provider
HkeyDesigns
Handige links • www.dynamicdrive.com • www.mijnhomepage.nl • www.animatieplaatjes.nl • www.handleidinghtml.nl • www.PortableApps.com • www.leejoo.nl • www.w3schools.com • www.mozilla-nl.org • www.websitemaken.be Web tools • IrfanView (foto’s opmaken) • ColorPicker (kleuren overnemen) • Paint (screen dumps) • PowerPoint (figuren maken) • FileZilla (ftp-programma) • FotoStory for Windows • WebalbumGenerator 3 • Picasa
NVU-Workshop
Werkplan 1 5. User interface --------------------------1. Website design hoofdmenu voor wie hoofd- en opmaakwerkbalken website structuur -------------- documentenvenster design ----------------------------- werkpagina met liniaal creativiteit - paginatabs onderhoud - bewerkingsmodus hosting ------------------------------ statusbalk 2. Regels (do’s en dont’s) site beheerder 3. Programma’s Word, Kladblok, IrfanView, PPoint 6. Voorkeuren ----------------------------- algemeen 4. Nvu-programma lettertypen http://portableapps ------------ nieuwe pagina - applications geavanceerd - kompozer Portable download: Kompozer /nvucursus 7. Site beheerder local site inrichten WYSWYG-editor -/nvucursus/website01/ ------- FTP-server pagina’s uploaden help file --------------------------HkeyDesigns
4
NVU-Workshop
Website structuur Provider
Web designer Online verbinding NVU
Local Site Indexpagina
Pagina 1
Foto’s
Pagina 2
CSS
Pagina n
HkeyDesigns
5
NVU-Workshop
Design 1024 px 768 px
19”- Monitor: 562 px
Web designer
22”- Monitor: 19”- Monitor 17”- Monitor
1024 px
Web surfer
818 px
1280 px
(800x600)
HkeyDesigns
6
NVU-Workshop
Hosting Provider
Web designer Web pagina’s index
ftp://home.hccnet.nl index
Pagina’s uploaden
Username: username Password:
Web surfer Web pagina’s index
http://home.hccnet.nl/username http://www.mijnwebsite.nl HkeyDesigns
7
NVU-Workshop
Website PortableApps
HkeyDesigns
8
NVU-Workshop
Help
HkeyDesigns
9
NVU-Workshop
User interface
Menu balk
Hoofd werkbalk Opmaakwerkbalken
Paginatabs
Site beheerder
Status balk
Documenten venster
Bewerkingsmodus werkbalk
HkeyDesigns
10
NVU-Workshop
Werkplan 2 8. Tekst ingeven (O 01) type: “Welkom allemaal” spellingscontrole bron code (html) pagina opslaan (titel+naam.html) pagina bekijken ---------------------9. Tekst opmaken (O 02) lettertype: variabel, vast, type of blok letterstijl letterkleur en grootte pagina bekijken ---------------------10. Tekst positioneren (O 03) uitlijnen inspringen pagina bekijken ----------------------
11. Lijsten (O 04) opsomminglijst genummerde lijst inspringen pagina bekijken --------------------12. Pagina opmaken (O 05, 05a, 05b) paginakleuren/achtergrond - achtergrondafbeelding paginatitel/eigenschappen pagina bekijken --------------------13. Koppelingen (O 06, 6a) gelabelde posities in pagina koppelingen - ander pagina’s binnen de Local Site koppeling is relatief !! - E-Mail adres:
[email protected] - websites: www.xxxxxx.nl (doel) Pagina bekijken --------------------HkeyDesigns
11
NVU-Workshop
Werkblad 3 14. Afbeeldingen (O-07) afbeelding invoegen locatie, afmetingen, vormgeving, koppeling (alternatieve tekst) pagina bekijken ------------------15. Tabellen (O-08) tabel invoegen (1r/2c) Tabeleigenschappen: tabel/cel - tabelachtergrond Tabellen (1r/2c) invoegen - uitlijnen midden en rechts pagina bekijken ---------------------16. Tabellen (O-08a) tabel invoegen (1r/2c), (1r/3c) afbeeldingen invoegen tekst ingeven/uitlijnen pagina bekijken ------------------
17. Oefening (O-9 - maak paginatabel ------------------- opslaan basispagina O9 (#-koppeling) - kopieer basispagina (2x) - maak koppelingen op de pagina’s - sla pagina’s op als O9, O9a en O9b 18. Remote site instellen(O-10) sitebeheerder sitenaam: Remote site server informatie b.v. http://home.hccnet.nl/username login informatie b.v. ftp://home.hccnet.nl gebruikersnaam: xxxxxx Wachtwoord: xxxxxxxxxx pagina bekijken ----------------- remote site testen
HkeyDesigns
12
NVU-Workshop
Werkplan 4 19. Pagina publiceren (O-11) 20. Menuregel links toevoegen pagina ophalen (local site) menuregel items linken ------ pagina publiceren - Welkom -> index.html remote site bekijken ------------- Welke soorten -> soorten.html 20. Webpagina’s (O-12, a, b, c) - Hoe herkennen -> herkennen.html indexpagina maken - Hoe bestrijden -> bestrijden.html - banner index pagina selecteren en links - menuregel: Welkom, Welke soorten, controleren ---------------------Hoe herkennen, Hoe bestrijden - content toevoegen (welkom) indexpagina opslaan (index.html) pagina bekijken ----------------- pagina’s (3) van index copieren en content aanpassen - welke soorten (soorten.html) - hoe herkennen (herkennen.html) - hoe bestrijden (bestrijden.html) HkeyDesigns
13
NVU-Workshop
Werkplan 5 21. Cascading Style Sheets CSS (O12) Opmaak van webpagina’s m.b.v. stijlblad Soorten stijlen: - Inline stile - Intern stijlblad - Extern stijlblad
Stijlbladen Extern Stijlblad Index.html
Pagina 2.html
Pagina 3.html
Mijn stijl.css
- Paginaopmaak - Lettergrootte en kleur -Tabellenopmaak - Blokken - Lagen
Pagina 4.html
HkeyDesigns
14
NVU-Workshop
Wat overblijft 21. 22. 23. 24. 25. 26. 27. 28. 29. 30.
Fotoalbums/Shows Navigatie met knopjes Scripts: Kalender, password, formulieren, fotoboeken Video, geluid Sjablonen IrfanView Picasa 3 Photo Story Web Album Generator …
HkeyDesigns
15
