design ook items uitsnijden

Website bouwen Blok2

Van Photoshop naar Dreamweaver

(fig1)

Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het design moet namelijk gesliced worden. Alles wat layout is kan later nog van kleur worden veranderd. De slices die door jou als design worden gezien, moet je dus later plaatsen. (fig2)

Slicen Na dat je netjes hulplijnen hebt geplaatst kunnen we de slicetool (snijgereedschap) gebruiken. Snij je design in stukken. Zorg er voor dat je alle stukken zelf hebt gesneden en niet automatisch door de computer. Dit kun je zien aan het blauwe lijntje om een gesneden stukje. Elk stukje krijgt automatisch een nummer. (fig3) ! Vergeet niet een klein verticaal reepje te snijden van je body als je een verloop hebt gebruikt. Je hoeft dus niet de hele body te snijden. Als je alleen een kleur aan de body hebt gegeven hoeft dat niet want die kun je later wel aanpassen, maar een gradian of te wel een verloop dus niet.

(fig2)

design ook items uitsnijden

(fig3)


Van Photoshop naar Dreamweaver Slices bewaren voor web Voordat we de slices gaan bewaren voor web moet we eerst de teksten deactiveren of te wel het oogje voor de laag uitzetten. Deze plaatsen we later in Typo3 (CMS). Daarna gaan we naar bestand / opslaan voor web. (fig5)

(fig6)

Nu opent er een scherm zoals (fig6). Als een slice stukje weinig kleur bevat, kun je gif kiezen in het menuutje rechts van het scherm. Zo niet dan altijd JPG kiezen en tegenwoordig kan het 100% kwalliteit blijven. Als je voor alle slices een keuze van kwaliteit hebt gegeven, geef je een dubbel klik met je muis op een te slicen stukje. Dan verschijnt er een venstertje waar je een naam kan geven aan je onderdeel. LET GOED OP! Geen hoofdletters gebruiken en ook geen spaties bij je naamgeving!!! De volgende stap. Selecteer met je shift toets ingedrukt de slices die je wil bewaren.

(fig4)

(fig5)


Van Photoshop naar Dreamweaver (fig7)

Slices bewaren voor web (vervolg) Maak op een goed gekozen plaats een mapje met een projectnaam. (fig7) Verder kies je bij structuur voor alleen afbeeldingen en bij Slices alleen geselecteerde slices.(fig8) Controleer of je alle afbeelding-stukjes, in het mapje wat je zelf hebt gemaakt, zitten! (fig9)

(fig8)

(fig9)



(fig11)

Dreamweaver Maak een nieuwe site (site/ new site) (fig10). Geef je project een naam en ga verder. Klik achter de witte balk op het mapje, brows totdat je jouw mapje met je slices hebt gevonden en ga verder. (fig11) Kies voor FTP server en vul de volgende gegevens in (fig12): Name: logische naam Hostname: les.cheproject.nl Hostdirectory: project(en dan je nummer) FTP login: cheproject Password: chetje

(fig12) (fig13)

Test daarna of je connectie hebt! Als alles goed is, gaan we weer verder. Kies No en daarna Done (fig13 en fig14)

(fig14)



Dreamweaver Open het venster Files. (fig15) Daar zie je al je onderdelen van je te maken website. Nu gaan we alles overbrengen naar de FTP-server. Dit doen we door op het stekkertje te klikken. (fig16) Nu moeten we nog zorgen dat we onze lokale computer en de FTP server beide kunnen zien. Dit doen we door te klikken op dit icoontje Daarna pakken we ons projectmapje met afbeeldingen op en slepen op het bovenste mapje in het linker scherm. (fig17)

(fig17)

(fig16)



Dreamweaver Nadat alles op de FTP-server staat klikken we op het icoon Managing site ongeveer in het midden van de icoonbalk (fig18). De stappen die we nu moeten doen, lijken wel herhaling maar dat is niet helemaal waar. We kiezen voor de optie nieuw. Daarna kiezen we voor FTP-server. (fig19) Nu moeten we de gegevens opnieuw invoeren die we eerder bij (fig12) hebben ingevoerd. Eerst even testen en dan kunnen we pas echt bouwen aan de site.

(fig19)


Van Photoshop naar Dreamweaver (fig20) (fig21)

Dreamweaver CSS Voor de veiligheid is het handig om een kopie te maken van Dit doen we door op het icoontje te gaan staan en met de rechter muisknop op het icoontje te klikken. Dan kies je edit en dan duplicate. Nu verschijnt er in de lijst een copy van de style.css. Nu kun je als je iets gedaan hebt en het niet meer weet wat, altijd terug naar de basis style.css. Dubbelklik op het icoontje copy style.ss Nu opent er een codescherm met misschien wel herkenbare teksten zoals; body, header etc. Ga naar vensters en zoek CSS styls op tenzij het venster al op het scherm zichtbaar is. (fig20) Je kunt er voor kiezen om in de codetaal te gaan wijzigen (behalve het gedeelte waar aangegeven is; niet wijzigen). Maar je kunt het ook doen in het CSS styls venster. In dit venster staan alle onderdelen die je kunt aanpassen. Als je het hierin ( dubbel klikken op een item) verandert, verandert het gelijk ook in de codetaal. (fig21)



Voordat we gaan wijzigen, openen we eerst ons project. Start de internetbrowser en type ”les.cheproject.nl” (fig22) en kies je project.Nu zie je een bestaande layout. Deze kun je door de CSS styls aan te passen veranderen van vormgeving. (fig23) Nu is het van belang om te bepalen wat design en wat layout is. Alles wat in dreamweaver geplaatst wordt, is layout (niet dynamisch) en alles wat we in Typo3 gaan plaatsen is te veranderen (design). In ons ontwerp is de header en of de footer dynamisch. Deze plaatsen we dus later in Typo3. Wat moet er gebeuren in Dreamweaver? In Dreamweaver geven we stylen aan die direct effect hebben met Typo3. Als je in Typo3 een tekst neerzet dan krijgt het de style mee die je in dreamweaver hebt bepaald. Bijvoorbeeld: kies ik bij de menu items voor een Verdana lettertype met corps 12pt in een grijze kleur, dan worden de menu items in Typo3 gelijk die lettertype en kleur.

(fig23)


Van Photoshop naar Dreamweaver HTML en CSS communiceren met elkaar (fig24)

(fig25)

Kijk in de codetaal. Daar wordt in het grijs aangegeven wat er met het daaronder vermelde onderdeel gedaan moet worden. Verder staat er een korte omschrijving van welk onderdeel er in codetaal staat aangegeven (fig24) Vul op elke plaats waar je een slice van hebt, bij background (fig25) het juiste plaatje of kleur in en bewaar na elke wijziging je document door appeltje s of control s te doen. Nu kun je in de webbrowser (na de pagina te hebben ververst) gelijk zien wat je veranderd hebt. Tip kleur De kleurcode kun je aflezen in photoshop. Klik in je toolbox (gereedschappen) in photoshop op het vlakje om kleur te kiezen en kijk naar wat er onderaan dit venstertje staat achter het # teken. Dit is de kleurkode.

na ok wijziging opslaan door Apple S of Control C in te toetsen

omdat je de bestanden op de FTP hebt gezet moet je hier vanaf de server kiezen

e8e8e8


Van Dreamweaver naar Typo3 Nadat je alles een styl hebt gegeven (alle opdrachten die er in de grijze tekst boven elk item vermeld staan) gaan we de website invullen met design en tekst. Tip Als je later niet tevreden bent met je gekozen style kun je die in dreamweaver gewoon aanpassen en verandert direct de style in Typo3 gelijk mee. Ga naar je webbrowser en type: “les.cheproject.nl/typo3”in. Vul je naam van je project in en het wachtwoord “chetje” in de daarvoor bestemde venster.

Menu en submenu items

Nu zie je je projectnaam bovenaan staan. Links van je scherm staat item pagina en beeld. Als je op beeld klikt, zie je een voorbeeld van je website. Als je op pagina klikt, zie je een invulscherm. Hiernaast staat kort omschreven wat alles inhoudt. Bekijk deze zorgvuldig. (fig26)

links: Header Normaal:Content Rechts:Subcontent Kader:Footer

(fig26)


Van Dreamweaver naar Typo3 Toon: website laten zien Bewerk: inhoudelijk bewerken van je pagina (afhankelijk op welk menu item je rechts klikt) Nieuw: Nieuw menu/submenu item aanmaken Verberg: pagina niet laten zien Pagina eigenschappen: Naam pagina etc. Verwijderen: verwijderen van pagina

Menu en sub menu items aanmaken Klik met je rechter muisknop op het icoontje Home. Nu verschijnt er een venster met allerlei opties (fig27). Als je kiest voor nieuw, kun je een menu item toevoegen. Nu kun je kiezen of het menu item als submenu moet dienen (pagina in) of als een nieuw menu item (pagina na). (fig28) In het volgende venster geef je de pagina een titel (fig29) en sluit af met op het schijfje boven of helemaal onderaan het venster te klikken om je instellingen te bewaren Kijk daarna op het je online website (wel eerst verversen) om te controleren of alles goed is gegaan.

(fig28) (fig27)

Kijk naar hoeveel menu- en submenu items je te pimpen website heeft en maak deze in Typo3 aan. Zorg ervoor dat je de structuur gebruikt die je zelf voor ogen had. Nadat we pagina’s aangemaakt hebben, is het zaak dat we ze concreet gaan invullen. Daarbij moet je denken aan het plaatsen van de headers en/of de footer per pagina.

(fig29)


Van Dreamweaver naar Typo3 maken van meerdere headers

Menu en sub menu items aanmaken Mocht je nu maar een header hebben, is het altijd mogelijk om deze nog te maken in photoshop. Alleen dan moet je wel rekening houden met een aantal dingen: Zorg ervoor dat je de header precies even groot maakt als de eerste. (als het goed is heb je je ontwerp bewaard waar je snijvlakken van hebt gemaakt) Maak een aantal headers (let daarbij op eenheid in je huisstijl) en zorg ervoor dat je bij de naamgeving (opslaan voor web) dat je alleen het item wat je wil snijden een andere naam heeft dan welke er al is gebruikt. Voorbeeld: header1, header2 etc. Typo3 kan deze headers uploaden vanaf de computer waaraan je zit te werken. Je hoeft dus niet meer via de server te uploaden. Dit houdt in dat je niet je afbeeldingen eerst op de ftp server hoeft te zetten:-)


Van Dreamweaver naar Typo3 (fig30)

Bewerk: inhoudelijk bewerken van je pagina (afhankelijk op welk menu item je rechts klikt)

De laatste stappen: het invullen! Als je met je muis klikt op het potloodje, geef je aan dat je de pagina wil bewerken. Als er nog geen potloodje staat, klik je op het blaadje met een plusje er op om (nieuwe) content toe te voegen aan de gekozen pagina. (fig30) Dan verschijnt er een nieuw venster waar je eerst een keuze moet maken. Als je op het plusje in LINKS hebt geklikt dan is dat de bestemming waar de header moet komen. Dat is dus alleen een afbeelding. Dan kies je voor alleen afbeelding. Als je bij NORMAAL op het plusje hebt klikt, verschijnt dit venster ook, maar dan kun je beter kiezen voor tekst en afbeeldingen. (fig31)

zoek je plaatje op je hardeschijf van je computer

(fig31)

Na je keuze te hebben gemaakt, verschijnt er opnieuw een venster. In mijn voorbeeld geef ik in LINKS een nieuwe header. Dat is een afbeelding dus ga ik bladeren in mijn afbeeldingen. Dit doe je op je eigen computer en niet op de FTP. Je zoekt de afbeelding op (werkt het snelst als je handige namen hebt gegeven). Kies de positie waar de afbeelding moet komen te staan. Als je je keuze hebt gemaakt, zie je nog niets gebeuren. (fig32)

(fig32)


Van Dreamweaver naar Typo3 (fig33)

De laatste stappen: het invullen! Eerst moet je op het schijfje (boven of onder aan het venster) klikken om te bewaren. Daarna verschijnt er in het witte vlak je gekozen afbeelding. (fig33) Kijk wederom op het internet naar je website of de afbeelding er staat.

kop boven de platte tekst (in de style zoals je die hebt aangegeven in Dreamweaver)

Teksten en foto’s plaaten Plaatsen van tekst werkt eigenlijk op de zelfde manier. Je klikt op het in het vlak NORMAAL en kiest daarna voor tekst en afbeelding. Daarna typ je je tekst in, kies je je afbeelding die je erbij wilt hebben. Geef aan of de afbeelding links of rechts, boven of onder de tekst moet komen te staan. (fig34) Daarna bewaar je je toepassingen met en bekijk je het resultaat weer op internet. (Vergeet niet telkens te je website te verversen)

Content platte tekst (in de style zoals je die hebt aangegeven in Dreamweaver)

Positie afbeelding in de tekst

Voor nog meer uitleg verwijs ik naar chetje.wordpress.com daar staan ook filmpjes van alle handelingen.

Als je een afbeelding plaatst geef je aan hoeveel pixels de breedte moet worden

Heel veel succes en vooral plezier bij het maken van je website.

(fig34)

design ook items uitsnijden

Recommend Documents