Frenetic - HTML/Ramar del 4

HTML - Mer avancerade ramar

Nu har vi kommit ganska långt i vårt ramskapande och alla grunder är på plats. Det sista som behöver besvaras är då hur man egentligen kan bygga upp en sida som delas upp både horisontellt och vertikalt?

Vi har egentligen redan gått igenom hur man gör det, vad vi inte vet ännu är hur man ska tänka när man skriver ramarna. Vi bygger vidare på vårt dokument, men nu vill vi ha en liten ram högst upp, för att t.ex. göra lite reklam för en ny vykortstjänst?

<html>
<head>
<title>Lär dig ramar med Frenetic!</title>
</head>

<frameset cols="150,*">
<frame name="navigation" src="navigation.html">
<frameset rows="30,*">
<frame name="banner" src="vykort.html">
<frame name="display" src="start.html">
</frameset>
</frameset>
</html>

Om du vill se hur det ser ut, kan du se det på den här bilden.

Om du istället vill ha bannern längst ner, ändrar du ordningen på "30,*" till "*,30", samt ändrar ordningen på "vykort.html" och "start.html". Koden blir då följande.

<html>
<head>
<title>Lär dig ramar med Frenetic!</title>
</head>

<frameset cols="150,*">
<frame name="navigation" src="navigation.html">
<frameset rows="*,30">
<frame name="display" src="start.html">
<frame name="banner" src="vykort.html">
</frameset>
</frameset>
</html>

För att få djupare förståelse i hur ramarna fungerar, skriver vi även om koden för att den ska visa bannern från kant till kant över hela browsern, högst upp. Som du märker på koden, ändras ordningen på "rows" och "Cols", detta för att man hela tiden måste ange minsta gemensamma nämnare och därefter stycka vidare i dokumentet.

<html>
<head>
<title>Lär dig ramar med Frenetic!</title>
</head>

<frameset rows="30,*">
<frame name="banner" src="vykort.html">
<frameset cols="150,*">
<frame name="navigation" src="navigation.html">
<frame name="display" src="start.html">
</frameset>
</frameset>
</html>