Web Designer
Essentials
Les 02: De computer
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Doorsnede van Apple’s iMac.
22
Monitor Motherboard CPU ATA sockets RAM sockets Expansion sockets Power Supply Optical Drive Hard Disk Keyboard Mouse
named ‘news_content’.
cell with the editable region named ‘store_con
Opdrachten STORE
Website NEWS in Dreamweaver - MM-2 Opdracht omschrijving: Bouw een eenvoudige structuur voor een website met templates, rollovers en een snippet.
De structuur: De navigatiestructuur van de website dient volgens •
•
• • • • •
De geneste tabelletjes/div-jes en Snippets: Maak een klein tabelletje zoals in dit voorbeeld. • • Plaats in het bestand ‘str1.htm’ drie keer dit tabelletje/div-je:.
de flowchart (fig 1.) in elkaar te worden gezet. • Probeer hiervoor een snippet te gebruiken. Snippets region Maak de site aan binnen Dreamweaver en stel alle Editable zijn erg handig en kunnen je een hoop tijd besparen belangrijke parameters in. wanneer for the buttons namedje een element hebt in je website dat De eerste pagina, ‘index.htm’, mag je zelf vormgeven regelmatig ‘store_interface’. hergebruikt dient te worden. (houd het simpel, maak het jezelf niet moeilijk). De pagina’s in news, store en alle sub-pagina’s, worInleveren van de opdracht: den gemaakt aan de hand van twee templates. (zie Exporteer de instellingen van de site. • ‘De templates’ en fig. 3). Ga naar site > manage sites... Selecteer de site van Plaats op alle pagina’s rollover buttons welke je zelf deze oefening en druk op de knop export... Bewaar maakt in Dreamweaver d.m.v. CSS. de instellingen met de naamEditable websitenaam.ste in de region Geef elke pagina een duidelijk kopregeltje in de folderstructuur zoals aangegeven in het voorbeeld. for content editable regions voor de content. Hieraan kun je • Doe de gezipte opdracht in de Drop op de namedBox‘store_content’. duidelijk zien op welke pagina je bent. server en voorzie deze van klas- en opdrachtcode en natuurlijk je naam!! Zorg voor een folderstructuur zoals in het voorbeeld (fig. 2)
Figuur 1, Flowchart
Criteria: Navigatiestructuur netjes volgens de flowchart. • • Correcte relatieve links. • Correcte folderstructuur. • Folderbeveiliging met index.htm. • Consequent gebruik upper/lower case. • Geen verboden karakters in bestandsnamen. • Correcte templates met editable regions. • Correcte syntax. • Dreamweaver sitemanagement. • Design.
Figuur 2, Folderstructuur
De templates: • •
•
•
e pagina’s in news, store en alle sub-pagina’s worD den gemaakt aan de hand van twee templates. Maak deze templates volgens het volgende voorbeeld (fig. 3). Plaats in elke template twee editable regions zoals aangegeven in de gele kadertjes. Binnen de editable regions plaats je de hyperlinks (news_interface en store_interface) en de kopregels om te kunnen weten waar je bent op de site (news_content en store_content). De pagina str1.htm krijgt andere content namelijk drie geneste tabelletjes of div-jes.
Figuur 3, Templates
11
Les 15: Wat is geluid?
Essentials
Harmonics Een pure sinusgolf zoals we die zien in de getoonde figuren zullen we niet vaak tegenkomen in de audiowereld. De golf op dit moment geeft een zuivere toon van een bepaalde frequentie aan. Instrumenten geven maar zelden een zuivere toon van een bepaalde frequentie. Dit komt omdat die toon is opgebouwd uit allemaal verschillende frequenties, de harmonischen. Stel dat je een geluid van 200 Hz aanslaat op een instrument, dan bestaat het geluid uit die frequentie van 200 Hz, ook wel de fundamentele frequentie genoemd en uit al zijn harmonischen (boventonen en ondertonen).
Even harmonics worden vaak als prettig ervaren om naar te luisteren, oneven of odd harmonics vaak als onprettig. In metalmuziek b.v. zitten veel odd harmonics. Naast het begrip harmonics hebben we ook het begrip octaaf. Een octaaf hoger of lager is resp. een verdubbeling of halvering van de oorspronkelijke frequentie. Een harmonische kan dus een octaaf zijn van de fundamentele frequentie, maar zeker niet alle harmonischen zijn octaven. ADSR envelope of sound (Volume envelope) Fundamentele Freq. 100 ck ta at
de
200 300 400 500 600 700 800
ca y
sustain
Harmonischen
rele
ase
Octaven
ADSR envelope of sound (Volume envelope) ck ta at
de
ca y
sustain
rele
ase
Complex waveform build up from many sine wave harmonics
Complex waveform buildveelvouden up from many De harmonischen zijn hele vansine de wave harmonics ADSR Envelope fundamentele frequentie. Uiteindelijk hoor je wel het Het volume van geluid verandert naarmate de tijd vordert. geluid van 200 Hz, maar dit is dus opgebouwd uit meerdere Timbre close-up (snapshot in time) Dit gaat volgens een bepaald patroon, de ADSR. frequenties. ADSR staat voor Attack, Decay, Sustain en Release. Door Elk instrument heeft zijn eigen harmonics. Door middel de Attack van een geluid kun je, zoals eerder genoemd, van de harmonics en de attack van een geluid kun je vaak geluiden van elkaar onderscheiden. Is het nou een gitaar of herkennen welk instrument er te horen is. Dit wordt de Fundamental een piano? frequency timbre (klankkleur) van een instrument genoemd. also called the 1st harmonic Na de Attack treedt de Decay in, gevolgd door de Sustain De harmonics worden onderverdeeld in upper en lower en 1 3 5 7 9 11 13 15 17 19 21 en Release, zie plaatje. even en oneven (odd). 2 4 6 8 10 12 14 16 18 20 22 odd and even harmonics
Timbre close-up (snapshot in time) ADSR envelope of sound (Volume envelope) ck ta at
de
ca y
sustain
rele
ase
Fundamental frequency also called the 1st harmonic 1
3 2
5 4
7 6
9 8
11 13 15 17 19 21 10 12 14 16 18 20 22
odd and even harmonics
Complex waveform build up from many sine wave harmonics 75
Essentials
Les 08: Folderstructuur Folder van je web-project welke de root-folder van de server bij je ISP voorstelt. Dit is het allereerste bestand dat geopend wordt door de server-software, wanneer er expliciet geen pagina wordt opgegeven in de URL in de adresbalk van de browser.
Folder voor alle images (plaatjes) die gebruikt worden binnen jouw website.
Folder voor Cascading Style Sheets (CSS)
Folder voor alle media die gebruikt worden binnen jouw website, zoals MP3, MP4, Flash, Fonts, downloads, etc. De diverse media worden in subfolders geplaatst.
Folder voor alle externe JavaScript of jQuery bestanden.
Folder voor alle HTML-pagina’s die gebruikt worden binnen jouw website. Net zoals bij de images folder worden ook hierin subfolders gemaakt voor de diverse secties in de website.
Alternatieve folderstructuur voor de website. De verschillende secties binnen je website bevatten de structuur zoals hierboven beschreven. (Let op! De weergave is anders namelijk in een zogenaamde ‘lijstweergave’, dit heeft echter niets met de daadwerkelijke folderstructuur te maken.)
59
