Bsc5 bk TOI. Proces- en presentatieportfolio Inleiding websites maken met Macromedia Dreamweaver. Technisch Ontwerp en Informatica

Bsc5 – bk5100 - TOI Proces- en presentatieportfolio

Inleiding websites maken met Macromedia Dreamweaver

Technisch Ontwerp en Informatica http://toi.bk.tudelft.nl/bsc5 [email protected]

Bsc5 – bk5100 - TOI Inleiding websites maken met Macromedia Dreamweaver Procesportfolio [week 2 t/m 17] • voortgang en verloop van het ontwerpproces • GEEN productpresentatie • maakt het ontwerpproces inzichtelijk (analyse)

Presentatieportfolio [Eindpresentatie] • presentatie van het gehele ontwerp • te gebruiken bij de eindpresentatie (jurypresentatie) • te gebruiken als portfolio

Bsc5 – bk5100 - TOI Inleiding websites maken met Macromedia Dreamweaver

Rooster: • week 2 t/m 7: – inleveren procesportfolio kwartaal 1 • week 6: Feedback procesportfolio • week 10 t/m 17: – inleveren procesportfolio kwartaal 2 • week 12: College Lichtstudie + uitleg opdracht Lichtstudie • begeleiding op afspraak. • eindpresentatie: Presentatieportfolio (optioneel: proefversie met feedback)


Procesportfolio Maak binnen de groep EN met de ontwerpdocent en tutor afspraken hoe je het procesportfolio precies in wil zetten. In deze afspraken leg je vast: - Moment van publiceren - Inhoud en eventueel vorm - Taakverdeling • Inleveren en publiceren: afspreken met de docent, doch uiterlijk dinsdag • Updates mogelijk


Procesportfolio – inhoud • Ontwerp Proces • Wat zijn de belangrijkste conclusies/beslissingen • Op welk onderdeel is gefocust? Welke afwegingen zijn gemaakt? • Naar aanleiding van de bijeenkomst met de docent • Overzicht belangrijkste aandachtspunten, besluiten, etc

• Voor de docent • Producten • eventueel: planning, notulen, Bespreek dit met je docent en leg dat vast in groepsafspraken.


Procesportfolio – algemene aanwijzingen • Het gaat om kwaliteit, niet om de kwantiteit. • Hou je wekelijkse pagina dus eenvoudig. » Dit houd ook het maken en bekijken efficient. • Zie je procesportfolio als een logboek waar je wekelijks een nieuw hoofdstuk voor maakt. • Voorkom herhaling. • Zorg voor een heldere indeling en navigatie (simpel = beter)


Procesportfolio – algemene aanwijzingen De inhoud bestaat tenminste uit: • samenvatting van het verloop (beslissingen, knelpunten) • reflectie op het ontwerpproces • planning voor het verdere verloop De informatie zal voornamelijk bestaan uit tekst die op belangrijke punten ondersteund wordt met afbeeldingen. Vermijd het integraal opnemen van presentatieposters: die zijn bedoeld voor papier – gebruik losse plaatjes en plaats tekst als tekst (niet als plaatje)

Bsc5 – bk5100 - TOI Inleiding websites maken met Macromedia Dreamweaver • Ingeleverde websites TOI website > Bachelor > Informatica V > gepubliceerde sites • Je publiceert de website van je groep wekelijks zelf ¾Zie de inleverpagina hoe je je website publiceert • de wekelijkse site wordt naast eerder ingeleverde pagina’s gezet. • NIET de pagina van de vorige week uitbreiden: geen inhoud herhalen • Je hoeft zelf geen links naar voorgaande weken te maken


Beoordelingscriteria: • Informatie wordt op een voor het web geschikte manier overgebracht • De website is bruikbaar voor de ontwerpcommunicatie met de docent • Structuur en indeling website • Navigatie • De website ziet er verzorgd uit • De website is goed leesbaar • Verhouding tussen plaatjes en tekst • Afmetingen en type plaatjes geschikt voor het web • Bruikbaarheid voor bezoeker (ook op tragere verbindingen)



TOI-pedia Dreamweaver handleidingen: http://toi.bk.tudelft.nl/toi-pedia


Dreamweaver • Definiёren van een ‘Site’ • Bestandsbeheer • werk op de D:\, bv in: D:\Bsc5\ • maak gebruik van een overzichtelijke mappenstructuur: • bv: plaatjes in images\


Bestandsbeheer (2) • hoofdlettergevoelig Alle bestandsnamen in kleine letters

• spaties Gebruik geen spaties in bestandnamen, maar bv een underscore _

• index.html ‘Begin’ van je website:


Tekst

( text-tab in Dreamweaver )

• Paragrafen • nieuwe paragraaf: enter • nieuwe regel: shift + enter • Uitlijnen • Bold, Italic, etc • titels: H1, H2... (Heading) • opsommingen: OL en UL

(Ordered/Unordered List)


Links • Relatief: point-to-file tool in properties-bar

• Target: _blank voor een nieuw venster • Absoluut: http://www.google.com


Links • Binnen een pagina: “anchor”

• Gebruikt de ‘point-to’ tool en wijs het anchor-symbool in de pagina aan, of typ als link #[naam]


Samenvatting: • Definieren van een ‘Site’ • Bestandsbeheer • Aanmaken HTML bestanden • Aanpassen eigenschappen pagina • Tekst • Links • F12 voor preview in je browser


• Browsers • verschillende schermafmetingen (resoluties) • lettertype en lettergrootte » verschillende omgevingen vragen enige flexibiliteit: ‘precies zo’ is vrijwel nooit te realiseren • Functioneel v.s. ‘decoratief’


Plaatjes • (scherm)resolutie: • 1024 x 768 is een redelijke standaard

• Bestandformaten: JPG, GIF, PNG, BMP, TIFF • Nooit resizen in Dreamweaver • Thumbnails


Photoshop • resizen • omzetten naar ander type: • JPG voor foto’s • PNG en GIF voor grafiekjes, icoontjes etc. • ‘Save for Web’ functie in Photoshop


Plaatjes in Dreamweaver • Invoegen: • slepen vanuit ‘Files’ rechts • Insert > Image

• Image properties

• ‘Alt’, Uitlijnen, Border


Tables • ‘Table’-tab • Breedte absoluut/relatief • een table kun je gebruiken als layout hulpmiddel, maar probeer dit te beperken


Styles (CSS) • ‘opmaak-template’ • Dreamweaver: nieuwe style aanmaken


Stylesheets • opslaan ( .css ) • linken: Elk HTML-bestand moet expliciet gelinked worden aan een CSS-bestand: • “Attach Style Sheet”


CSS : classes ‘groep’ voor opmaak Bijvoorbeeld: - bijschrift - citaat - etc


CSS : redefine Tag Bijvoorbeeld: links (a) anchor heading (h1 .. h6) paragraph (p) list item (li) table (table) en/of veld van een table (td) Maar ook: bold (strong), italic (em), image (img), etc


CSS Links : • Maak een nieuwe style aan (binnen je css-bestand) en kies ‘redefine Tag’ en kies uit de lijst de tag “a”

• door expliciet “decoration: none” aan te vinken, kun je het lijntje onder een link weghalen


CSS Links : “hover” • Maak een nieuwe style aan kies “Advanced” kies uit de lijst de tag “a:hover”

• door bijvoorbeeld ‘underline’ te kiezen, kun je een lijntje onder de link laten verschijnen als “hover”


Samenvatting: • Invoegen van plaatjes • Tabellen • Stylesheets (CSS)


Layouts • Layers (div’s)


Layouts - Styles • Klik de layer aan • De Selector staat automatisch ingesteld voor de layer die je geselecteerd hebt


Positionering en afmetingen van Layers • Let bij verticale postionering op dat tekst niet in elke browser evenveel ruimte inneemt. • Maak Layers niet te breed • Via Properties kan bijvoorbeeld de breedte relatief gemaakt worden (%) of de hoogte leeg, zodat de layer automatisch meeschaalt met de inhoud. • Overflow Scroll


Templates • meerdere pagina’s maakt met terugkerende elementen een eenzelfde opmaak • Maak een template op basis van een standaard pagina • Verwijder alle elementen die niet ‘vast’ zijn in een template • File > Save As Template


Templates – Editable Regions • Standaard zijn alle onderdelen van een template gelocked • Voor de elementen die van pagina tot pagina verschillen: Insert > Template Objects > Editable Region


Templates – pagina aanmaken op basis van een Template File > New - Tabblad Templates


Template bewerken • Assets Panel • Template dubbelklikken • Bij het opslaan wordt om een bevestiging gevraagd of gekoppelde pagina’s bijgewerkt moeten worden.


HTML-code • code view • code & design view • design view


Samenvatting: • Layout mbv Layers • Templates • HTML Code


Inleveren • InfoBase • inleveren in groepen • 1 iemand logt de eerste keer in en maakt de groep aan • zorg dus dat je alle NetID’s bij de hand hebt • zorg dat je een naam hebt verzonnen voor je groep: • naam bevat uitsluitend de tekens: a-z, 0-9, - en _ • vervolgens kan iedereen uit de groep inleveren voor de groep


Inleveren • website zippen • Ga naar de map die je in DW aangewezen hebt als basis van je ‘Site’ • Selecteer alle bestanden en mappen • Klik rechts en kies “7-Zip > Add to Archive...” • kies “.ZIP”


Inleveren • Aandachtspunten: • heb je een index.html? • staat je index.html direct in de map die je als ‘Site’ gedefinieerd hebt? • niet de map zippen, maar de inhoud van de map • is het geheel niet te groot (gezipped max 20MB)

Bsc5 bk TOI. Proces- en presentatieportfolio Inleiding websites maken met Macromedia Dreamweaver. Technisch Ontwerp en Informatica

Recommend Documents