Frenetic - Webbdesigntips/Skapa webbinterface

Webbdesign / Skapa webbsida

8. Lägga in i HTML

För att få ordning på alla dessa bilder, behöver vi lägga dem i tabeller. Har du inte hållit på med tabeller förut, eller hållit på väldigt lite med det, rekommenderar jag att du tittar igenom tabelldelen i HTML-introduktionen innan du fortsätter.

1. Nu kommer lagret 'Slice' som vi gjorde väl till pass. Nu ska vi nämligen lägga in bilderna i tabeller. De två taggar som är extra intressanta är COLSPAN och ROWSPAN, en del av TD-taggen, som anger hur många kolumner respektive rader en cell ska sträcka sig. Vi tittar lite närmare på vissa delar nedan.

2. För att göra tabellen enklare har jag bestämt mig för att göra en ny tabell inne i en cell för de tre bilder som kommer högst upp till vänster (utklippt till höger). Detta gör att vi kan hoppa över celler för dessa bilder helt och hållet just nu.

Det finns en fördel till med att lägga dessa två bilder och det är att bilderna verkligen kommer att ligga intill varandra. Det är mycket jobb med tabellerna för att få bilderna att ligga ordentligt intill varandra om man blandar text och bilder som man gör i ett interface, speciellt om man måste använa många COLSPAN och ROWSPAN. Tabellen blir väldigt enkel för dessa tre bilder. Den ser ut enligt följande:

Givetvis ska du ha dina egna filnamn. Kom ihåg att alla attribut till tabellen (border, Cellspacing, Cellpadding) måste sättas till 0, annars kommer bilderna inte gå ihop i tabellen. Lägg inte heller något mellanrum mellan TD-taggarna och IMG-taggen, då blir det ett mellanslag även i slutresultatet.

3. Vi tittar närmare på 'Slice'-lagret igen, så vi kan börja göra tabellen. Detta kommer jag fram till på mitt interface:

Första 4 färgerna på vänster sida bildar en cell, med den smala kanten som bakgrund. I denna cell läggs sedan tabellen ovan in. Under dessa finns en cell till. I första raden har vi alltså 2 celler.
Dags att räkna färger i mellersta raden lodrätt. Fingrarna på högerhanden räcker till och jag får det till tre färger.
Räkna färger i sista spalten. Det blir tre där också.

Summerar vi ovanstående kommer vi fram till att tabellen ska vara 3x3 celler. Innan vi börjar skriva koden, tänk på följande:

Bilder som klipps ut precis ska vara en egen bild i cellen.
Bilder som följer ett mönster och optimerats ska användas som bakgrund i en tabell.

Dags att börja skriva! För att lättare hänga med vart vi befinner oss, har jag länkat alla bilder till dess motsvarighet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Frenetic - Att göra ett webbinterface</title>
</head>
<body bgcolor="#003366" text="#99ccff" link="#ffffff" vlink="#ffffff" alink="#99ccff">
<div align="center">
<table cellspacing="0" cellpadding="0" border="0" width="610">
<tr>
<td rowspan="2" valign="top" background="done-vnk.gif">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="done-hem.gif" width="169" height="168" alt="Hem" border="0"></td>
</tr>
<tr>
<td background="done-vok.gif"> </td>
</tr>
<tr>
<td><img src="done-vb.gif" width="169" height="32" border="0"></td>
</tr>
</table>
</td>
<td background="done-ok.gif" height="72">
<img src="07-02-01.gif" width="111" height="25" alt="Länkar" border="0">
<img src="07-02-02.gif" width="120" height="25" alt="Bilder" border="0">
<img src="07-02-03.gif" width="108" height="25" alt="Gästbok" border="0">
</td>
<td height="72" width="36"><img src="done-hok.gif" width="36" height="72" border="0">
</tr>
<tr>
<td valign="top">
<p align="center"><img src="done-logo.gif" width="322" height="131" border="0"></p>
<p>Här kommer själva innehållet vara</p>
</td>
<td background="done-hk.gif"> </td>
</tr>
<tr>
<td width=22 background="done-vnb.gif"> </td>
<td background="done-nb.gif"> </td>
<td><img src="done-hnb.gif" width="36" height="36" border="0"></td>
</tr>
</table>
</div>
</body>
</html>

4. Då är allt klart! Som du märker är det inte så mycket jobb med HTML-koden, allt annat jobb med grafik däremot tar väldigt mycket längre tid. Är du beredd att se hur det blev?