WORKSHOP DREAMWEAVER by uxu13127

VIEWS: 71 PAGES: 30

									WORKSHOP DREAMWEAVER




     November 2009
        Workshop 3

Uw eerste website maken met
       Dreamweaver
                Algemeen
Doel van deze workshop is om Uw eerste website
te maken aan de hand van een template
Aan de hand van een aantal stappen zal dit
worden gedaan;
1. De lokale hoofdmap
2. Een sjabloon maken
3. De homepage maken
4. De site testen
                   Algemeen
We nemen bij deze workshop als voorbeeld de site
  www.dewitte-kerk.nl
Aan de hand hiervan bouwen we de website op zoals de:
 de site plannen
 een sjabloon voor de site kiezen
 op basis van het sjabloon de start pagina maken
 tekst en afbeeldingen aan de site toevoegen
 een tweede pagina maken en de koppelingen met
  de eerste pagina maken
 de site in de browser testen
  Stap 1; Lokale Hoofdmap maken
• Dreamweaver legt alle bestanden van de site
  vast in een map; de Lokale hoofdmap
  genoemd of wel kortweg de hoofdmap.
• Dus voor iedere site wordt een aparte map
  aangelegd
              Dreamweaver starten



                                 de nieuwe site starten




Eerst openen we Dreamweaver en vervolgens klikken we op de knop van
“dreamweaver site”. Deze knop is op 2 plaatsen zichtbaar.
          Wizard Site defenitie 1



                                      Invoegen gegevens
                                      de witte-kerk
                                      www.dewitte-kerk.nl




                                            Vervolg instellen site



Nadat we op de knop van “Dreamweaver site” hebben gedrukt
wordt de wizard site defenitie geopend. We gaan nu de gegevens
invullen
              Wizard Site defenitie 2




Bij dit venster kiezen we voor; nee ik wil geen servertechnologie
Servertechnologie gebruiken we wanneer we een dynamische websites bouwen
en dat is nog niet het geval
                 Wizard Site defenitie 3




Bij dit venster kiest u eerst voor lokale kopien en vervolgens geeft u aan waar
Dreamweaver de bestanden voor de site opslaat en kan terugvinden.
Deze map noemen we de hoofdmap.
               Wizard Site defenitie 4




Bij dit venster geeft u aan als Dreamweaver U vraagt; Hoe wilt u de verbinding
tot stand brengen met u server? Geen
Er wordt nog geen webserver voor de witte-kerk gemaakt .
We ontwikkelen en testen alleen op onze eigen computer.
               Wizard Site defenitie 5




Aan het einde van de site defenitie wizard toont dreamweaver een
samenvatting/ overzicht van de gemaakt keuzes
     Stap 2; het sjabloon maken
• Kenmerken van het sjabloon
• Sjabloon maken op basis van voorbeeldpagina
• Sjabloon aanpassen
   - Een bewerkbaar gebied invoegen
   - De voettekst aanpassen
• Het sjabloon opslaan
                            Wizard Sjabloon 1




Sjabloon maken aan de hand van een voorbeeldpagina
1. Kies bestand nieuw(Ctrl+N)
2. Selecteer links de optie leeg sjabloon (Empty Template)
3. Kies daarna in het vak sjabloontype een van de opties. Wij hebben gekozen voor de HTML- sjabloon
4. Kies onder lay-out de optie 3colum hybrid and footer
5. Klik daarna op maken (Create)
De layout van de pagina wordt ingesteld via een CSS-bestand. Dreamweaver vraagt waar u dit wilt opslaan
We maken eerst een nieuwe map genaamd CSS om CSS-bestanden op te slaan
We slaan de sjabloon op met de standaard naam die Dreamweaver geeft namelijk in ons geval thrColHybHdr.css
                    Wizard sjabloon 2




Dit is de eerste layout van het sjabloon De standaard teksten gaan we vervangen
door eigen tekst
           De Sjabloon aanpassen 1
Elke voorbeeldpagina van Dreamweaver heeft voorbeeldtekst
Deze gaan we nu vervangen
1. In het vak titel(Untitled Document) gaan we de titel in vullen in ons geval;
     dewittekerk
2. De standaardtekst boven de pagina (header) vervangen we ook door titel
     de Witte Kerk Venlo
3. Selecteer in de linkerkolom de koptekst Inhoud sidebar 1 en vervang deze
     door uw keuze. In deze kolom maakt u een navigatie menu . Dit bereikt U
     door in de eigenschap controle op de knop ongenummerde lijst te klikken
     Vervolgens hebben wij gekozen voor de lijst
    Inhoud
      -Algemeen en
      -contact
Later zult u met de menu items koppelingen gaan maken naar de andere
pagina’s van de site
             De Sjabloon aanpassen 2
4. Een bewerkbaar gebied invoegen
     We gaan nu de standaard tekst centraal op de pagina aan passen.
     De koptekst en het menu blijven overal het zelfde maar de inhoud van de pagina is
     steeds anders Daarom maken we het sjabloon leeg en plaatsen hiervoor een
     bewerkbaar gebied (editable region). Dit doen we als volgt
     - verwijder alle tekst dmv backspace
     - kies nu voor Invoegen, Sjabloonobjecten, Bewerkbaargebied (insert,Template objects,
     Editable region)
     - we noemen het bewerkbare gebied; Inhoud en zeggen OK
     Nu hebt u aangegeven dat dit gedeelte van de pagina kan worden veranderd/aangepast
    - Let op dat elk sjabloon minimaal een bewerkbaar gebied moet hebben anders kunnen
     pagina’s die op basis van het sjabloon zijn gemaakt niet meer worden aangepast
4a Bij het menu onder de linkerkolom maken we ook een bewerkbaar gebied genaamd
     Specials
5. De voettekst aanpassen, vervang de algemene tekst footer door eigen keuze. Wij hebben
     voor ons voorbeeld genomen Copyright HCC Noord-Limburg
Sjabloon aanpassen 3
                      Sjabloon opslaan
                                     Standaard sjabloon




•   De opmaak van het sjabloon is sober maar dit sjabloon kunt u nu wel opslaan in
    de website. Dreamweaver bewaart de sjablonen altijd in een aparte map
    Templates. Als de map Templates nog niet bestaat maakt Dreamweaver deze map
    vanzelf aan. Het opslaan van het sjabloon gaat als volgt;
• 1. Kies bestand opslaan (file save)
• 2. In het vak beschrijving (Description) vullen we in basissjabloon de wittekerk
• 3. In het vak opslaan als de bestandsnaam;
     sjabloon wittekerk
• 4. Klik vervolgens op de knop opslaan
In de palet bestanden ziet u de nieuwe map Templates verschijnen
    Stap 3; De homepage maken
• De homepage opmaken
• Een volgende pagina toevoegen
• Koppelingen aanbrengen
       Stap 3a; Een homepage maken 1
Nu gaan we de eerste pagina van de site maken. Deze noemen we de homepage .
De homepage wordt gebaseerd op het gemaakte sjabloon
We kiezen ;
 - bestand nieuw (file new)
 - In de linkerkolom kies Pagina van sjabloon(page from template).
   In de kolom site verschijnt een lijstje met de aanwezige sites (dewittekerk)
- Kies sjabloon wittekerk en vervolgens maken (create)
- De home page wordt nu gemaakt

Nu gaan we de homepage opslaan
- Kies bestand opslaan (Ctrl+S)
- Geef de homepage de bestandsnaam index.html
- Klik opslaan
Stap 3a; Een homepage maken 2
Stap 3b; Een homepage opmaken 1
Stap 3b; Een homepage opmaken 2
De basis homepage is nu klaar maar moet nog
helemaal worden aangekleed
• Titel opgeven
• Tekst invoeren
• Een afbeelding invoegen
Stap 3b; Een homepage opmaken 3
Stap 3c; Een volgende pagina toevoegen
Nu de homepage klaar is wordt het interessant om andere
pagina’s toe te voegen
Als voorbeeld zullen we een tweede pagina toevoegen.
Dit gaat als volgt
- Kies bestand nieuw en selecteer het bestand sjabloonwittekerk
- Selecteer maken
- Kies bestand opslaan
- Als het venster opslaan wordt geopend geef je de pagina de
   bestandsnaam algemeen.html
We gaan onze tweede pagina aankleden doormiddel van
• Koptekst toevoegen
• Teksten aanpassen
Stap 3c; Een volgende pagina toevoegen
    Stap 3d; Koppelingen aanbrengen
•   Wanneer er meer dan twee pagina’s op de site zijn kunnen ze met behulp van
    hyperlinks worden gekoppeld.
    Dit kan op verscheidene manieren gebeuren onder andere;

•   Een hyperlink maken we met de knop hyperlink in het tabblad algemeen
    (Common) in de werkbalk invoegen (insert)
•   Een hyperlink maken met Wijziging, Koppeling maken(Modify, Make linke)
•   Via het palet Bestanden (files) om koppelingen aan te brengen of te wijzigen
•   Een link maken met het vak Koppeling (link) in eigenschapcontrole
    Stap 3e; het sjabloon nogmaals
        aanpassen en opslaan
Om goed te kunnen navigeren in onze website hebben we in het algemene
sjabloon een menu geplaatst
• We openen het template sjabloon snel via het welkomstvenster
• Vervolgens selecteren we het menu item contact en maken we een koppeling naar
    de pagina algemeen.html.
• Dit doen we door naast het vak koppeling van eigenschappencontrole. Het venster
    Bestand selecteren wordt geopend. Hierin staan alle bestanden van de site
• Selecteer algemeen.html en klik op ok
• Kies bestand opslaan (Ctrl+S)
• Daar het sjabloon gewijzigd is vraagt Dreamweaver of alle bestanden die op dit
    sjabloon gebaseerd zijn bijgewerkt dienen te worden
• Aangezien we dit willen bevestigen we dit door op bijwerken te klikken
• Na enige seconden is onze site bijgewerkt
• Wanneer we onze site nu via het welkomstscherm openen via algemeen.html of
    index.html zien we dat het menu met de hyperlinks is aangepast is aangepast
            Stap 4 ; De site testen
• De algemene opzet van onze site is nu klaar.
• De pagina’s zijn gemaakt en de koppelingen tussen de
  pagina’s zijn gemaakt. Vervolgens hebben we ze veilig op onze
  schijf opgeslagen
• Het is nu het moment om onze website te testen in onze
  browser. Dit kan als volgt;
  - druk op F12 (de pagina wordt direkt in de standaardbrowser
    geladen) of
  - via de werkbalk op de knop :
    Voorvertonen=> Fouten opsporen in browser.
    Via een snelmenu kan dan een browser worden gekozen
    (onderscheid primaire of secundaire browser)
                          Tot Slot

 Nu hebben we in het kort de hele site gedefenieerd
Alleen moet de site nu nog upgeload worden naar
de web-server
Vervolgens kunt u alle toeters en bellen aan uw site toevoegen
Zoals meerdere pagina’s toevoegen, ander lettertype,
foto-album en dergelijke

								
To top