• Een ontwerp dat gesliced is *
• Kennis van Html of PHP **
* Let op dat je hem goed hebt gesliced. Anders kan je het werk overnieuw doen na deze tutorial.
** Heb je hier geen verstand van, dat moet je dat eerst leren. Anders ga je fouten maken.
Wat leer je?
1 Ontwerp omzetten naar Html
2 Een Html ontwerp omzetten naar Webspell
1. Ontwerp omzetten naar Html
Wat je hier voor nodig hebt is het geslicede ontwerp. Je hebt bijvoorbeeld bij dit ontwerp gebruik gemaakt van ImagaReady. Als je een ontwerp sliced, dan wordt de afbeelding in een grote tabel gezet maar verschillende hoogtes en breedtes. Eerst moeten we de buttons omzetten zodat je erop kan klikken. Bij Html codes doen we dat met:
code:<a href="http://jelink">***</a>
Bij de *** plaats je dan je afbeelding of je tekst.
Hieronder zie je 2 voorbeelden:
- Link d.m.v tekst
- Link d.m.v afbeelding
We nemen aan dat je al een tabel hebt met de slice erin en nemen we nu een stukje tabel uit de navigatie:
Zoals je kan zien heb ik een stuk uit de tabel gehaald en als achtergrond gebruikt. Let daar wel op want anders werkt de tabel niet meer goed. Het andere stuk is de link waar je "Titel" ziet staan wat dan de titel van het stukje tekst is waar je op kan klikken.
Nu gaan we hetzelfde doen maar dan gaan we van een afbeelding een link maken:
Zoals je ziet is hier maar weinig aan gedaan. Maar er zijn wat stukken tussen geplaatst en er is een deel om op te klikken
Waar je wel op moet letten is dat je het "border="0"" deel er ECHT in doet, anders krijg je een afbeelding met een rand eromheen.
We hebben nu de links behandeld in het ontwerp. Verder hoef je nu niks meer te doen. Wel moet je deze procedure onthouden
voor de volgende uitleg.
2. Html ontwerp omzetten naar Webspell
We hebben op dit moment een ontwerp die online kan staat waar je op kan klikken.
Maar nu gaan we het ontwerp naar Webspell omzetten.
Er worden in het volgende stuk de volgende dingen uitgelegd:
- In een stuk tabel latest news includen
- De links kloppend maken
- De content toevoegen
- Pagina titel naar webspell brengen
- MySQl verbinding maken
- Stylesheet verbinden
We beginnen met het laten kloppen van de links.
Als je een link in Webspell hebt, zorg je altijd dat de inhoud binnen je ontwerp blijft. In de zogenoemde content. Natuurlijk moet je eerst een content hebben voordat je dat kan zien, maar dat behandelen we zometeen.
Als je in webspell een link hebt wil je het includen in de content en dat gaat d.m.v het volgende: index.php?site=
Als je dus de volgende link hebt:
code:<a href="http://jelink.nl">Titel</a>
Dan wordt het dit:
<a href="index.php?site=**">Titel</a>
Bij de ** komt de verdere link. Wil je bijvoorbeeld naar de About.php pagina.. dan zet je op de plaats van de sterretjes
"about" neer (zonder de "" tekens). Om naar de hoofd pagina te gaan laat je "?site=" weg en blijf "index.php" over.
We moeten natuurlijk ook de functies zoals Latest nieuws includen:
Om daarmee te beginnen heb je meestal een tabel zoals in de volgende code:
Hierin is 2e deel verplaatst en is het nieuwe 2e deel het stukje waar de include moet. Je kan het blauwe deel ook vervangen door een andere include zoals de login.
Nu gaan we de content toevoegen aan je pagina.
Het beste is altijd om een pagina zo te slicen dat hij uit kan rekken, waar je hopenlijk rekening mee hebt gehouden bij het slicen.
Als je een goede slice hebt is het volgende misschien wel jouw content gebied (bij een goede slice):
code:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
!--In dit stuk komt het bovenste gedeelte van je content.--!
<td><img src="images/content_boven.jpg" height="" width=""></td>
</tr>
<tr>
!--Nu doe je de achtergrond van de content tussen de achtergrond tekens zodat je zich herhalen hoe lang het nieuws ook wordt.--!
<td background="images/achtergrond_content.jpg" width="" height="">
</td>
</tr>
<tr>
!--In dit stuk komt het onderste gedeelte van je content.--!
<td><img src="images/content_beneden.jpg" height="" width=""></td>
</tr>
Nu heb je de content goed. Let er wel op dat je template goed heb gesliced zodat hij uitrekt.
Nu gaan we de belangrijke extra codes toevoegen, die zorgen voor verbinding met je _stylesheet, MySQL
Wat je bovenaan moet zetten boven de html pagina is het volgende:
Vergeet je dit, dat werkt je pagina voor een deel niet en kloppen er veel dingen niet.
Nu gaan we nog 1 simpel ding doen, en dat is de Titel pagina aanpassen. Die je boven in je browser ziet.
Tussen de Head tags staan bij elke pagina de volgende tags:
code:<title>Titel naam voor in de Browser.</title>
Dit moet worden:
<title><? echo PAGETITLE; ?></title>
Nu is alles goed en zou je pagina moeten werken.
In de meeste gevallen zal het niet werken, omdat er veel dingen fout kunnen gaan zoals kleine tekens die je bent vergeten, een verkeerde slice zoals bij 70% het geval is. Of andere fouten.
Daarom is het ook erg handig dat je verstand hebt van PHP & Html voordat je eraan begint.
