Webbprogrammering med HTML, CSS, DOM, Javascript, DHTML, MySQL och PHP

En enkel meny

I filen meny.html skapar vi en enkel meny som ger oss möjligheten att länka in olika sidor i ramen innehåll.

När man arbeter med flera HTML-filer kan det vara bra att organisera sin arbetsyta enligt följande: Öppna två texteditorer (två fönster) och ha ett dokument i det ena och ett annat (t ex ramsidan) i det andra. Det här gör att du kan ändra i flera filer samtidigt och snabbt se det nya resultatet när du vill. Prova att göra små ändringar i de olika filerna och testa resultatet i din webbläsare.

Filen får följande utseende.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

	<HEAD>

		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

			CHARSET=ISO-8859-1">

		<TITLE>Meny</TITLE>

	</HEAD>

<BODY>



<TABLE>

<TR>

	<TD colspan="4">

		Nike, en busig hund

	</TD>

</TR>



<TR>

	<TD>

		<A HREF="start.html" TARGET="innehåll">Startsidan</A>

	</TD>

	<TD>

		<A HREF="leksaker.html" TARGET="innehåll">Nikes leksaker</A>

	</TD>

	<TD>

		<A HREF="bilder.html" TARGET="innehåll">Foton</A>

	</TD>

	<TD>

		<A HREF="http://www.google.com" TARGET="innehåll">

				Sök med Google</A>

	</TD>

</TR>

</TABLE>	

	

</BODY>

</HTML>

Kroppen består av ett antal länkar som utgör menyn. Det intressanta här är attributet TARGET som avgör var sidan ska laddas. Vi sätter TARGET till innehåll som är namnet på den ram som vi vill ha allt innehåll i.

Hela menyn har vi lagt i en tabell (TABLE). Tabellen har två rader, rubriken i den översta (första) och själva länkarna i den undre (andra). Vanligtvis har man lika många celler på varje rad i en tabell men det går också att själv välja hur många cellplatser som en cell ska ta upp. För att få rubriken att sträcka ut sig över flera celler (alla i det här fallet) i den översta raden har vi satt attributet COLSPAN till värdet 4 (alltså antalet kolumner som vi vill att cellen ska ta upp). Resultatet blir att översta raden endast består av en cell (rubriken).

Sidan är nu klar och du kan själv testa menysystemet

föregående gå vidare