MODULE 4 : WEBSITEX5(11)

Transcriptie

1 MODULE 4 : WEBSITEX5(11) In deze benadering maken we een site met een startpagina en 3 kleine pagina s. We doen dit met een tool op de PC: WebSiteX(Versie 9 is volledig gratis, maar beperkter dan versie 11, maar die moet je even activeren met guido_willekens@telenet.be en paswoord WebSiteX502. Na downloaden moet je dit bestand unzippen, en de Setup.exe uitvoeren. De installatie wijst zichzelf uit. De opbouw van de site gebeurt nu in 5 stappen: Personalia ingeven en een thema kiezen De site structuur bepalen De individuele pagina s maken Enkel tekst alleen Met prentje Met filmpje Geavanceerde opmaak (menu, titels, schuifbalken) Publiceren Stap 1: Personalia ingeven en een thema kiezen. We starten de tool en beginnen aan een nieuw project. Geef het een naam. Noteer dat we dit project ook zullen opslaan als een apart bestand met de extensie.iwp. We klikken op Volgende: In de eerste stap geven we algemene informatie: - naam van de site - auteur - URL - beschrijving - taal - favicon SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 20

2 We kiezen vervolgens een template met een horizontale menu, uit de reeks gratis templates. Tenslotte passen we de header aan door er tekst met rand en een logo op te plaatsen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 21

3 Stap 2: De site structuur bepalen. In de volgende stap gaan we de site map van onze site vastleggen. Naast de startpagina (hernoemen) voorzien we nog 3 pagina s voor Visie, Activiteiten en Foto Galerij. We kunnen met Hernoemen de namen aanpassen en met de pijltjes de volgorde. Stap 3: De individuele pagina s maken. De layout van een pagina is standaard 4 zones. We kunnen dit aanpassen door rijen en kolommen bij te maken en eventueel achteraf terug te hergroeperen. De startpagina zullen indelen zodat we een brede tekst kunnen plaatsen, daarnaast info van het bestuur, daaronder een google map en een link naar de facebook pagina. Gebruik tekst met spaties en enters om afstand tussen zones te krijgen (2 de rij!). SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 22

4 Vraag een voorvertoning om het resultaat te zien en pas eventueel aan. Maak bvb. de tekst groter. Op tweede pagina plaatsen we wat tekst en een afbeelding: je kiest eerst het object tekst, en dat komt aan de linkerkant, dan de afbeelding en die komt aan de rechterkant. We maken op dezelfde manier de derde pagina over de activiteiten, en vierde pagina over de foto galerij. Als je weinig ruimte hebt op de hosting server kan het interessant zijn om eerst een google account te maken en dan een google kalender en google foto app aan te maken. Je kan dan een link embedden in een iframe in je pagina. Plaats hiervoor eerst een joker tekst die je achteraf na het exporteren kan vervangen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 23

5 Activiteiten kalender via Google: In google ga je naar instellingen agenda s klik op de naam van de agenda die je wil delen en vervolgens kopieer je de code die staat bij agenda insluiten. Open dan de pagina over de activiteiten in BlueGriffon, selecteer de joker tekst en ga naar de bron code. Vervolgens plak je deze code in de plaats van de geselecteerde tekst. Het resultaat ziet er zo uit: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 24

6 Foto album via Google: Je moet eerst in google met de app foto s een album maken om te delen, foto s selecteren voor het album en het een naam geven. Je ziet voor delen naast de sociale websites ook de link. Klik op gereed en deze link staat op het klipboard. Je kan het vervolgens als link in de pagina invoegen met Blue Griffon. Het resultaat is dan: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 25

7 Een voorbeeld van een goedkope oplossing: GOOGLE mail foto s agenda IIS7.5 localhost C:\inetpub\wwroot\femmavorselaar\ TELENET users.telenet.be/femmavorselaar Stap 4: Geavanceerde opmaak (menu, titels, schuifbalken) In deze stap bepalen we het uiterlijk van onze site: in de gratis versie kan dit niet. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 26

8 Stap 5: Publiceren In de laatste stap zetten we de tool aan het werk om alles voor ons te maken. Het resultaat laten we eerst op onze PC opslaan in de map../femmavorselaar. We kunnen vervolgens ook kiezen om de inhoud van deze site bij onze Provider of Hosting bedrijf te plaatsen. We moeten dan wel beschikken over de naam van de Host, en een geldige gebruikersnaam en bijhorend wachtwoord. Niet vergeten!! Onze site is een project en dit moeten we opslaan als een bestand met extensie.iwp. Daarvoor klikken we bovenaan op Opslaan. We kunnen nu op elk moment op dit bestand dubbelklikken, de tool gaat open en we kunnen kiezen op welke stap we willen terugkomen: bijvoorbeeld de startpagina aanpassen: daarvoor moeten we bij stap 2 zijn. Na de aanpassingen, altijd stap 5 doen en het project opslaan. Je kan ook altijd navigeren met de terug- en volgende-pijl. Nog goed om weten: Je kan op elk moment de pagina testen door op de knop Voorvertoning te drukken. Via Help krijg je heel wat uitleg. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 27

9 Op de volgende bladzijden kan je het resultaat bewonderen. BANNER MENU CONTENT FOOTER SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 28

10 We kijken nog snel even naar de broncode van de index pagina: de prefix im staat voor het bedrijf dat de tool maakt: incomedia. In de HEADER herkennen we de titel, onze naam uit de personalia, een stylesheet verwijzing, en een verwijzing naar de javascript voor In de BODY zien we op de eerste plaats de BANNER en bijhorende tekst. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 29

11 Dan het navigatie menu. Vervolgens de eigenlijke inhoud (content) SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 30

12 Tenslotte is er de onderkant: hier vinden we Footer, momenteel nog leeg. Conclusie van deze oefening: met zo een tool op de PC kan je snel een mooie website opbouwen, zonder enige kennis van HTML of CSS. Anderzijds het je de pagina s wel op je PC staan, en niets belet je om toch een paar aanpassingen te doen, die met de tool niet kunnen: bijvoorbeeld tabellen of een formulier toevoegen. Je kan zelf de Stylesheet aanpassen. Vergeet niet dat wanneer je stap 5 terug uitvoert, al deze aanpassingen verloren gaan! Dus best de tool omgeving en de target omgeving gescheiden houden De site aan onze wensen aanpassen Je kan het resultaat nu nog aan je wensen aanpassen. Hiervoor heb je een tool nodig die een site overzicht kan geven en individuele pagina s kan tonen, liefst met de mogelijkheid om in split view te werken: zowel de broncode als het browserresultaat. Ook de gebruikte stijlen moeten te zien zijn. Zijn er gratis alternatieven voor het zeer goede, maar dure Dreamweaver? Een goede tool is Bluegriffon, maar die ondersteunt geen site overzicht. Beter is de Expression Web 4 SP2 die Microsoft heeft vrijgegeven, maar heeft het nadeel enkel in het Engels te werken en vrij complex is. Je hebt onderliggend ook het.net framework4.0 nodig. Hier te downloaden: - voor.net - voor Expression Enkele instellingen om het eenvoudiger te maken: - zet de weergave in licht uiterlijk i.p.v. donker: Tools Application Options General Tab Use your current Windows color scheme aanvinken. - Panels: enkel Folder list, Tag Properties en CSS properties - View Toolbars: enkel Standard en Formatting ((klik met RM op de zone van de toolbars) - stel de browser in om te kijken met F12: File Preview in browser: maak uw keuze. - werk in split screen: code en design tegelijk te zien SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 31

13 Na de instellingen ziet de tool er zo uit: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 32

14 Aanpassingen aan de opmaak Als je hier meer wil over leren kan je gaan kijken op Hoe stylesheet elementen gebruiken? CSS Algemene notatie: body { background-color: #EFEFEF; line-height: 1.5em; font-family: Verdana, Geneva, sans-serif; font-style:normal; font-size: 18; } Gebruik een ID voor een single element #maincontent{ float: left; height: auto!important; height: 500px; margin-right: 20px; min-height: 500px; width: 620px; Gebruik een class voor vele elementen.box{ float: left; margin: 001.2em 0; } Specifieke opmaal binnen een class.box h4 { background-color: #CAD12E; color: #fff; padding: 4px 8px; }.box p { padding: 4px 8px; width: auto; } HTML Apart bestand: <link rel="stylesheet" type="text/css" href="css/style.css" /> OF in de body of head: <style type="text/css"> { background-color: #EFEFEF;} </style> <div id="maincontent"> </div> <div class="box"> <h4>titel</h4> <p>tekst</p> </div> Hoe kleuren aanpassen? Op websites gebruikt men een speciale notatie voor kleuren: #CAD12E. Steeds beginnen met # en dan de waarden voor Rood, Groen, Blauw want daarmee worden de kleuren opgebouwd. Een waarde is een getal tussen 0 en 255, maar ze wordt hexadecimaal genoteerd: dus van 00 tot FF. De waarde 00 komt overeen met alle licht uit (= zwart) De waarde FF komt overeen met alle licht aan (= wit) Voorbeelden: # is zwart (soms afgekort als #000) #FFFFFF is wit #FF0000 is rood: alle licht aan voor rood, geen groen en geen blauw # is donker grijs: 42 is een lage waarde (weinig licht) en evenveel rood als groen en blauw Een kleur nodig? Laat je helpen op SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 33

15 Een voorbeeld van aanpassingen De lettergrootte aanpassen In de style.css: zet de font op 12 pt. De achtergrond aanpassen In de template.css: open bg.jpg met paint en pas de kleuren aan: bijvoorbeeld twee tinten roze Als je wat ervaring hebt opgedaan met WebSiteX5 en een reeks aanpassingen met succes hebt gemaakt kan je ook overwegen om direct van een gratis template te vertrekken en daarop de inhoud te plaatsen en de aanpassingen te doen. Te vinden op internet: zoek in google naar free templates : (eenvoudigste) SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 34

16 Als je deze methode definitief wil gebruiken kan je best de software aankopen op de site van Incomedia: Een idee van de prijs van de verschillende versies: Een gelijkaardig pakket is Xara WebStyle: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 35