1
INDEX Frontpage Handleiding: Pagina
Onderdeel
1 2 3
Index Eerste stappen Website aanpassen: opstarten: Nieuwe pagina maken Wijzigingen Opslaan Tekst opties instellen Modus ontwerpen/splitsen/code/voorbeeld (hyper) links uitleg Hoe maak ik een (hyper) link? Images – foto’s toevoegen Uiterlijk pagina aanpassen Andere kleur kiezen dan de getoonde Hoe maak je een tabel? Tabel eigenschappen instellen/aanpassen. Alinea’s instellen 1 Alinea’s instellen 2 Cellen bewerken Randen maken/wijzigen Inline frames Inline frames eigenschappen instellen Maken van buttons (interactiever knoppen) 1 Maken van buttons (interactiever knoppen) 2 Adobe Reader PDF bestanden importeren. Word Art gebruiken in Frontpage LAATSTE STAP Meer uitleg over Frontpage mappen
4
5 6 7 8 9 10 11 12 13 14 15 16
Begrippen van uw website: Twee begrippen spelen daarin een belangrijke rol. 1. Het begrip ‘Site’. Frontpage gebruikt dit woord voor een complete website. Het begrip ‘Pagina’. Dit is 1 losse bladzijde in uw website. 1 (web)site bestaat meestal uit meerdere pagina’s.
2
Eerste stappen om uw website gemaakt met Frontpage 2003, te beheren. 1. De eerste keer kost ca. 1 uur, afhankelijk van uw kennis. Daarna is het onderhoud/wijzigen met veel minder tijd te doen. 2. Bij mijn Dokumenten een map maken met de naam van uw site. B.v. “Mijn website”. Hierin komen straks alle onderdelen van uw site te staan. 3. Installeer Frontpage 2003 op uw PC. Bij de vraag of dit uw standaard moet worden, ja aanklikken. 4. Installeer Coreftp. 5. Maak de instellingen van Coreftp aan de hand van de handleiding. (éenmalig) 6. Open daarna Coreftp. En download alle gegevens vanaf uw provider en sluit Coreftp. Na afloop af.
7. Installeren Frontpage: 8. Nadat FP is geïnstalleerd kan je het volgende doen: Ga naar “alle programma’s” en zoek “Microsoft office” en dan nog:”office11” op. Daarin staat o.a. “FRONTPG”. Ga op het icoontje staan, klik met rechtermuisknop en kies:”vastmaken aan taakbalk”. Nu komt op het bureaublad onderaan het logo te staan. Handig als je Frontpage veel gaat gebruiken! 9. Open Frontpage 2003. 10. Klik op bestand. Site openen en navigeer naar de map Mijn Dokumenten/ “Mijn website”. Klik op openen. 11. U ziet nu alle gedownloade onderdelen in beeld. 12. U kunt nu een pagina openen, wijzigingen aanbrengen en opslaan ALS… 13. Sluit Frontpage af. 14. Open weer Coreftp. En maak verbinding (connect) 15. Links staan de gegevens van Mijn Dokumenten/ “Mijn website” en rechts die bij de provider. 16. Om de gewijzigde onderdelen te uploaden: selecteer de gewijzigde pagina(‘s) of map(pen) en klik op blauwe pijltje. (Zie ook handleiding Coreftp). 17. TIP: maak een backup van uw sitegegevens op CR-RW, extern geheugen of memorystick.
3
Website aanpassen. Opstarten: Eenmalig instellen: coderingstaal: 1. Start FrontPage op. (Bij de eerste opstart, krijgt u waarschijnlijk een melding, met de vraag of u FrontPage de standaard HTML-editor op uw computer wilt maken. Klik op ‘Ja’) Beginscherm van FrontPage opent. (Er wordt bij het opstarten altijd een lege pagina aangemaakt. U kunt deze pagina wegklikken. Klik in werkbalk op “Bestand” Dit scherm verschijnt:
Klik op “site openen (zie pijl) Ga naar “Mijn Documenten” /“Mijn website” . Dan verschijnt dit menu in beeld:
Klik op “openen” Dan ziet U dit scherm in Frontpage:
Het kan ook zo zijn dat er andere mappen in staan met namen als: vti_pvt; vti_cnf; private; (zie pagina 15 voor meer uitleg) Bij U is het mogelijk dat er ander nog benamingen bij staan. De Startpagina moet altijd INDEX heten. (Anders wordt deze op internet niet gevonden) Klik op de pagina die u wilt aanpassen om die te openen.
4 NIEUWE PAGINA MAKEN: Gebruik daarvoor een basispagina. Deze kunt U naar eigen idee invullen en opslaan als: LET OP – nieuwe naam geven en uploaden. (ook de bijbehorende afbeeldingen, foto’s en/of knoppen uploaden) uit de mappen: images; foto’s; buttons, enz. WIJZIGINGEN OPSLAAN: Om te voorkomen dat Uw wijzigingen kwijtraakt: Voordat U een pagina afsluit: klik op ‘Bestand’ en daarna op “Opslaan als”
Er wordt gevraagd om de pagina een naam te geven. Bestaat die pagina/naam al? (In dit voorbeeld “contact”) en wilt u diezelfde naam behouden? Klik op “opslaan” en daarna in het nieuwe venster op “JA”
Wilt U een andere naam geven? LET OP: maak er dan ook een button van die hiernaar verwijst. Deze button op iedere pagina kopiëren. Typ die in het venster achter “bestandsnaam”.en klik op “opslaan” WIJZIGINGEN/AANVULLINGEN: 1. Tekst wijzigingen: typ tekst en volg aanwijzingen onder “OPSLAAN” 2. Afbeeldingen: volg aanwijzingen onder “IMAGES” Tekst opties instellen Standaard lettertype wijzigen: Extra - paginaopties – standaardlettertypes – Times Roman 10 of 12 pt. U kunt tekst op een pagina zetten, door te typen in uw pagina. De uitlijning staat automatisch op links, dus de regel begint tegen de linkerkant. Het typen werkt hetzelfde als in uw tekstverwerker zoals WORD. Met ‘één verschil: als u op ‘Enter’ klikt, slaat FrontPage een hele regel over. Dit omzeilt u door ‘Shift’ vast te houden als u op ‘Enter’ klikt. In de werkbalk ziet u de verschillende tekst opties. Hiermee kunt u de tekst op uw website aanpassen op dezelfde manier als in Word.
1. 2. 3. 4. 5. 6. 7.
8.
U kunt van tevoren vastgestelde tekstgroottes gebruiken, zoals koptekst, welke veel groter is dan normale tekst. U kunt het lettertype selecteren. Het beste lettertype voor een website is ‘Verdana’ gebleken. Het is goed te lezen en heeft toch een iets minder formeel uiterlijk dan Arial, wat het prettiger te lezen maakt U kunt de lettergrootte kiezen. Standaard is dit bij mij 10 of 12 pt U kunt u uw lettertype VET (bold) maken. Cursief Onderstreept. Uitlijnen links – gecentreerd of rechts Letterkleur
5 MODUS ONTWERPEN/SPLITSEN/CODE/VOORBEELD. Onderaan in uw beeldscherm ziet u de volgende afbeelding:
Tabbladen “Splitsen en code” hoeft U niet te gebruiken, werk altijd in de “ontwerpen”modus. In “voorbeeld” kunt u de pagina bekijken zoals die er in werkelijkheid uitziet of klik op “Bestand”- “voorbeeld in browser” dan werken de links ook nog. U kunt ook een eigen browser toevoegen. (Hyper)links uitleg Een hyperlink (of kortweg link) - met een Nederlands woord verbinding of koppeling. Betkent: een “verbinding” maken B.v. naar een andere website, pagina, afbeelding en/of PDF formaat, emailadres, enz. TIP: Als u een link maakt naar een andere website, klik dan in bovenstaand menu op “doelframe” en kies “openen in nieuw venster”. Zo voorkomt u dat de bezoeker uit uw site verdwijnt en deze opnieuw moet openen. HOE MAAK IK EEN (hyper)LINK? Dit kan op 3 manieren: Manier I.
Figuur 1 1. Klik in de werkbalk op op
(zie figuur 1-1):U ziet dit menu
Selecteer de pagina of afbeelding waar de link naar moet verwijzen. Klik op ‘OK’ er verschijnt een menu met achter “Adres” de naam van de pagina waar naar verwezen wordt. Beter is het om zelf een naam in te geven; in dit voorbeeld “index” of “home” Voorbeeld: u verwijst naar de pagina “index.htm” dan komt er op uw pagina het woord index.htm en als u daar op klikt in browsermodus, komt u op deze pagina. Manier II. Klik op rechtermuistoets. U ziet hetzelfde menu als bij manier I Manier III. Invoegen hyperlink gebruiken: klik in werkbalk op “Invoegen hyperlink” ( zie figuur 1 -2)
6 IMAGES: Foto’s en/of afbeeldingen toevoegen: Om uw site aantrekkelijker te maken, kunt u gebruik maken van plaatjes/foto’s/images. Wel moet u ervoor zorgen dat deze niet te groot zijn, omdat het laden van de pagina niet te lang moet duren. Dit kan namelijk irritatie opwekken bij de bezoekers (zie handleiding “Pixelresizer” en “Welk formaat moet mijn afbeelding hebben?” op deze pagina) Om een image te voegen doet u het volgende: Eerst zorgt u ervoor dat u het image het juiste formaat heeft via pixelresizer. b.v. en in de juiste map op uw computer heeft gezet. (images, foto’s, enz.) Klikt in werkbalk op ‘Invoegen’, ‘Afbeelding’ en kies ‘Uit bestand’.
Hier klikt u op het bestand wat u wilt gebruiken. Klik op ‘Ok’ Het uiterlijk van de pagina aanpassen ( dus niet van de tabel!!!) Om bijvoorbeeld een achtergrond in te stellen, zet cursor ergens op de pagina, klik op de rechtermuisknop en kies ‘Eigenschappen van pagina’. Daar ziet u 5 tabbladen. Onder ‘Algemeen’ kunt u de Titel van de pagina veranderen. Ook kunt u de pagina een achtergrondgeluid geven Bij ‘Achtergrond’ kunt u een achtergrondkleur of -afbeelding instellen. Die afbeelding moet wel minimaal de afmetingen breedte 1400 en hoogte 1000 ;pixels hebben. Erg moeilijk om dat goed te krijgen: kies liever voor een achtergrondkleur. De tabbladen ‘Aangepast’ en ‘Taal’ heeft u niet nodig
7
Andere kleur kiezen dan de getoonde:
Klik in werkbalk bij 8 op zwarte dan ziet U dit menu:
Klik op “Meer kleuren” Dan ziet U dit menu:
Klik op “aangepast” Dan ziet U dit menu:
Klik op “Aangepast kleur toevoegen”; kies selecteren; kies met de pipet de gewenste kleur; noteer ergens het nummer b.v. Hex={FF,CC,FF} dan kunt U later dit terugvinden om dezelfde pagina achtergrond te maken.
Hoe maak ie een tabel? Open de basispagina. Zet de cursor in de middelste cel. Kies in de werkbalk bij "Tabel: tabel invoegen" Dan zie je dit menu: Wijzig/vul in bij de rode punten • Advies: rijen en kolommen naar eigen idee. Kan later worden aangepast op de pagina zelf. Wil je randen? Alleen de kleur en de punten (dikte) aan te geven. Geen randen: Kies kleur "automatisch" Onder "Randen”- “punten" nul invoeren. Klik dan op OK Op de pagina wordt een tabel zichtbaar met stippellijnen, die alleen als hulplijnen dienen: onzichtbaar online! Breedte: ik doe meestal breedte 1000 of 1200 pixels en hoogte 100%. (past zich aan aan elk beeldscherm) Doet U dat ook bij de breedte dan ziet u de site over de volle breedte van het beeldscherm. Allleen opassen geblazen: Afbeeldingen over de volle breetde van de tabel moeten dan ook op 100% breedte worden in gesteld. Moeilijk!! Beter laten!
8
Tabel eigenschappen instellen: Wil je nog iets wijzigen? Klik in werkbalk op Tabeleigenschappen (of via rechtermuisklik) Dan zie je bovenstaand menu weer in beeld. Dan kan er gewijzigd worden. .
Figuur 2 Alinea’s instellen 1: Soms zie je dat tekst zich niet gedraagt zoals je dat zou willen. B.v. veel ruimte tussen de tekstregels e.d. Klik op “opmaak”: dan zie je figuur 2:
Figuur 3
Figuur 4
Klik op “alinea”: dan zie je figuur 4: dit is de standaard instelling. Moet telkens worden aangepast bij het maken van een nieuwe tabel. Let op: bij “afstand” staan normaal geen cijfers in, vul daar 2 keer een nul in.
9 Alinea’s instellen 2: Wilt U niet dat de tekst tegen de linkerrand staat, dat kan op 2 manieren worden aangepast: 1. Nummering/ opsommingstekens gebruiken. Gebruik geen symbolen, want die worden niet door tablets herkend. 2. Onderstaande instelling aanpassen: in dit voorbeeld (figuur 5) springt de tekst 50 pixels vanaf links in. Na tekst: op nul staan laten.
Figuur 5 Cellen bewerken: Zet cursor in een “cel” – dan klik op rechtermuisknop – kies “eigenschappen van cel”:
Wijzig “verticaal uitlijnen”in: boven Klik op “OK”
10
Randen maken/wijzigen. Begin zoals beschreven bij “cellen bewerken” (pagina 9):
Klik op “opmaakprofiel” (links onder in beeld), dan zie je dit menu: >>>>> Klik op `OPMAAK`Dan zie je dit menu:
Klik op “rand” Dan zie je dit menu:
Hier kunnen kleur en randdikte worden ingesteld. Klik op OK en een cel heeft rondom een rand (lijn) In het omcirkelde gedeelte is het ook mogelijk om niet alle randen weer te laten geven, maar alleen boven, onder, links en of rechts. Bijvoorbeeld: U wilt alleen een onderrand. Klik de andere 3 uit.
11
Inline frames. Worden gebruikt als er veel informatie op één pagina moet komen. Dit om teveel scrollen te voorkomen. Een inline frame is een pagina die is ingesloten binnen een webpagina. Op een inline pagina alleen de tekst en afbeeldingen zetten, die nodig zijn. Dus geen opmaak zoals buttons en afbeeldingen zoals header (koptekst), footer (voettekst), enz. Voorbeeld: http://ecoportaal.nl/extraflame_pelletkachels.htm U kunt in line frames op dezelfde wijze aanpassen als standaardframes en ook schuifbalken instellen. Eén van de voordelen men hoeft niet de hele pagina te scrollen maar alleen het inline frame.
Een in line frame aan een pagina toevoegen. Klik (terwijl u in de paginaweergave bent onderaan in het documentvenster) op Ontwerpen
U wilt een inline frame maken op de pagina ”produkten.htm” U mag zelf kiezen of u eerst de blanco inline pagina invoegt en daar later tekst en/of afbeeldingen in zet of u kunt deze pagina eerst helemaal invullen voordat u de het inline frame gaat plaatsen. 1. 2. 3. 4. 5. 6.
Klik op “Bestand” – “Nieuw” en kies in de rechterkolom “Leeg document” Geef deze pagina dezelfde naam met toevoeging van _inline Dit wordt dus “produkten_inline.htm” Zet de cursor op de plaats in de pagina “produkten.htm” waar u dit frame wilt invoegen. Klik op de werkbalk op “Invoegen” en op “In line frame” . Dit komt in de pagina te staan:
7. Klik op “Beginpagina instellen” en kies ”produkten.htm” 8. Allebei de pagina’s opslaan en uploaden met Coreftp.
12
De eigenschappen van een in line frame instellen: Klik terwijl u in de paginaweergave bent (onderaan in het documentvenster) op ontwerpen. Selecteer het gewenste in line frame door de cursor naar de bovenrand van het in line frame te verplaatsen tot deze verandert in een naar links wijzende pijl Klik in het menu Opmaak op Eigenschappen.
en klik er vervolgens op.
Stel in het dialoogvenster Eigenschappen van in line frame een of meer van de volgende opties in (als u de standaardwaarden niet wilt gebruiken): Naam: Beginpagina: Titel: Framegrootte Marges Uitlijning Schuifbalken Alternatieve tekst Rand weergeven tekenen.
Typ de naam van het in line frame. Stel de beginpagina van het in line frame in of wijzig deze. Typ de titel van het in line frame. Stel de breedte of lengte van het frame in pixels of als percentage in. Stel de marges van het frame in pixels in. Stel de positie van het in line frame op de pagina in. Geef uw voorkeursinstellingen voor de weergave van schuifbalken op. Typ de tekst die u in de browser wilt weergeven als de browser geen frames ondersteunt. Schakel dit selectievakje in als u een rand om het in line frame heen wilt
LET OP: Links op een inline pagina moeten als doelframe krijgen: bovenliggend frame i.p.v. standaard of nieuwe venster.
13 Maken van buttons (interactieve knoppen) 1 De simpelste manier is een button kopiëren en een andere naam en linkverwijzing geven. LET OP: die button moet op alle pagina’s gekopiëerd worden.En opgelsagen in de map BUTTONS!!! Alle pagina’s moeten dan ook opgeslagen en geupload worden met Coreftp.. Ook map buttons uploaden. Originele manier: open pagina waarop die buttons moet komen. Klik op “invoegen” – “Interactieve knoppen maken” - kies tabblad “knop”:
X = invullen/bladeren Kies tabblad “lettertype”: kies lettertype en kleuren.
14 Maken van buttons (interactieve knoppen) 2 Kies tabblad “Afbeelding”
Vink aan: Een GIF-afbeelding maken…. Wijzig zonodig de afmetingen. Klik op OK.
Acrobat PDF-bestanden importeren. 1. Start FrontPage en open de pagina waarin u PDF wilt importeren. Aan te bevelen is een inline frame gebruiken. (Zie pagina 11). 2. Klik in het menu Bestand op Importeren. 3. Klik in het dialoogvenster Importeren op Bestand toevoegen. 4. Selecteer in het dialoogvenster Bestand toevoegen aan lijst met te importeren bestanden het PDF-bestand dat u wilt importeren, klik op Openen en klik op OK.
De laatste stap Als u klaar bent, kunt u uw site gaan uploaden naar uw webruimte van de provider. Hoe u dit doet vindt u in de handleiding Coreftp.
15 WORDART GEBRUIKEN IN FRONTPAGE. 1. Als je een mooie koptekst wilt maken of zomaar een opvallende tekst kan je gebruikmaken van WORDART. Voorbeeld:
2. Dat kan in Office Word maar het zit ook in Frontpage ingebouwd. 3. LET OP: bij het maken van tekst in Wordart maakt Frontpage en extra mapje aan met dezelfde naam als die van de pagina. DUS: als je die tekst maakt in bv. de indexpagina, dan wordt bij het opslaan een mapje gemaakt ook met de naam “index”. 4. Vergeet dat mapje niet me te nemen bij het uploaden via Coreftp. Ga als volgt te werk: a) Open de pagina waarin je de tekst wilt zetten
Figuur 6
b) Kijk of in de werkbalk: (zie figuur 1) het icoontje van wordart staat c) Is dat het geval: klik er op en maak een tekst d) Is dat niet het geval? Klik dan op de werkbalk op
en kies
knoppen toevoegen of verwijderen “standaard” e) Zet een vinkje voor “tekenen”: nu staat het Wordart icoontje in de werkbalk. Veel succes.
16 MEER UITLEG: Frontpage-gegevens worden opgeslagen in mappen en bestanden Bij Coreftp. en ook in Windows Verkenner (ALS verborgen bestanden en mappen worden weergegeven) zijn de extra Frontpage-mappen met gegevens wel zichtbaar. Het betreft hier de mappen zoals de mappen “ Private” “dereived” “vti_cnf” en/of “vti_pvt” Deze mappen moet U wel uploaden, maar verder hoeft U er niets mee te doen.
HULPMIDDEL: WEERGEVEN/VERBERGEN
