|
Administreres af: |
|
Brug af tabeller |
Tilbage til oversigtstabel Tilbage |
Af: novicen.dk
Før du kan opsætte den resterende del af din skabelonside, er det nødvendigt at du får yderligere oplysninger om de grafiske elementer som indgår på web-stedet. De grafiske elementer er fastholdt i en tabel, der indsættes i stedet for den tekst og på den placering, hvor du tidligere har skrevet "Midte". Du kan ikke opsætte betingelserne for tabellen, før du kender egenskaberne for grafikken, som indgår i layoutet.
Tabeller anvendes generelt som fikseringselementer og kan i meget stor grad anvendes til at få et web-layout tilpasset, så det fremstår nøjagtigt sådan som du ønsker det. Tabeller er inddelt i rækker og kolonner der tilsammen danner et gitter af celler. Det er muligt at justere, om der skal være ramme på tabellen (BORDER), om der skal være luft mellem cellevæg og indhold i de enkelte celler (CELLPADDING) og om der skal være afstand mellem de enkelte celler (CELLSPACING).
Ser du på det færdige layout for deSign's web-sted skulle det gerne give dig en ide om, at du skal anvende en tabel med fire kolonner og tre rækker, hvilket totalt giver tolv celler. Fordelingen er som angivet herunder.
| Kolonne | |
||||||||||||||
|
|
|
Til at danne billedrammen om indholdet på siden er der otte grafiske elementer. De fire er hjørnerne, der alle indsættes som forgrundsbilleder, for at skabe de korrekte højder og bredder for de rækker og kolonner, som tabellen indeholder. De fire øvrige er kanterne, der skal forbinde hjørnerne. Kanterne skal indsættes som baggrundsbilleder i cellerne for at opnå fliselægningseffekten og for den øverste og den nederste kant skal kantbillederne indsættes i hver to celler.
Du kan finde egenskaberne for alle billeder ved at du i WebWriters Stifinder vælger den mappe, hvor de grafiske elementer er placeret og derefter efter tur højreklikker på hvert billede og vælger egenskaber. Husk at du til denne gennemgang bør have slået visning af alle filer til i WebWriters Stifinder.
Via fanebladet "Billedfremviser" kan du se, hvordan billedet faktisk ser ud og via "Generelt" vil du bl.a. kunne se højde og bredde for det aktuelle billede. Her er vist en af knapperne, hvor du ser angivelsen til 140 pixel bredde og 25 pixel højde. Ved at se egenskaberne for de øvrige knapper, vil du kunne se, at de alle har samme størrelse og at de alle findes i to varianter, en variant der fremstår som standard og en variant der fremstår som valgt.
Baggrundsbillederne til den tabelcelle, hvor indholdet skal vises, vil du tilsvarende finde er 480 x 320 pixel store - bredde x højde. De enkelte hjørner er 50 x 50 pixel og det indsatte logo er 100 x 160 pixel. Knapper og logo er gjort transparente, således at baggrundsfarven kan skinne igennem. Det giver en pænere overgang mellem konturerne, hvis der samtidig anvendes antialias - kantudjævning. For at du kan se konturerne af de grafiske elementer er der herunder tilføjet en ramme omkring billederne på 1 pixel (BORDER="1").
Vær opmærksom på, at du forud for visning og håndtering af de filer du ser i WebWriters Stifinder bør foretage en opdatering - F5 eller "Vis" -> "Opdater" - hvis du forinden har foretaget ændringer i filstrukturen ved at bruge andre programmer. WebWriters Stifinder opdateres ikke automatisk.
| Til top |
I din skabelonside skal du nu markere ordet "midte" og slette det. Du skal i stedet have indsat den tabel, som skal fiksere de enkelte billeder, som indgår på siden.
Klik igen på ikonet for indsættelse af tabel og sæt markeringerne så du får fire kolonner, tre rækker, ingen kant, ingen afstand mellem celler og ingen afstand fra tekst til cellevæg. Du skal også sørge for, at alt tekst er positioneret til top.
Klik Ok og se resultatet.
Hver række er markeret med <TR>...</TR> og hver kolonne er indenfor hver række angivet med <TD></TD>. Hvis du tæller antallet af <TD></TD> TAG indenfor den nye tabel, vil du se, at der er tolv - svarende til det antal celler, som du tidligere kunne udregne skulle være i tabellen.
Du kan endnu ikke se, hvordan din tabel ser ud i browseren, da der ikke er noget indhold, som kan fylde tabellen ud. Det er derfor ønskeligt, at du får indsat hjørnerne. Ikke at det netop skal være hjørnerne du starter med men det vil være oplagt at starte med disse, da de giver et indtryk af tabellens samlede fremtoning idet de markerer yderpunkterne i layoutet.
| Til top |
Den resulterende kode, når du er færdig, vil have fået indsat de respektive hjørner i de celler, hvor du har placeret dem. Korrekt udført vil øverste og nederste rækkers yderste celler nu have indhold.
Vær opmærksom på, at du har foretaget indsætning på en måde der medfører at den relative sti ud til de grafiske elementer automatisk bliver indsat korrekt. Dette sker når du i forvejen har gemt den HTML-side, som du arbejder i. Hvis du senere flytter din HTML-side til en anden mappe, vil den relative angivelse ud til grafikken ændre sig og du vil måske ikke længere kunne se billederne, når du tester siden af. I sådanne tilfælde, skal du manuelt tilrette stien, så den passer til den nye placering.
| Til top |
Du skal have indsat den menu, som du skal navigere på dit web-sted med. Menuen består af fem knapper, der alle er placeret i mappen /knapper. Knapperne indsættes i tabellen i anden rækkes anden celle. Den første række anvendes alene til at vise kanten og den anden rækkes første celle anvendes tilsvarende til at vise den yderste venstre lodrette kant.
Ud over knapperne skal du have indsat et logo - der findes i mappen /grafik - og det giver tilsammen seks billeder. Skab derfor ca. ti liniers luft i cellen, ved at du sætter markøren midt mellem <TD> og </TD> i den celle, hvor knapperne skal indsættes.
Efter tur trækker nu, på samme måde som du indsatte rammens hjørner, de enkelte knapper over på den tomme plads, således at du fylder op oppefra. Start med at indsætte den øverste knap med en linies luft ovenover knappen og de resterende knapper på linien umiddelbart under den ovenstående knap. Du skal indsætte knapperne i deres "...op.gif" tilstand.
Logoet indsætter du med en ekstra linies luft ovenover. Skab ekstra luft - tomme linier - efter behov.
Test din skabelon af i browserne. Resultatet ser meget forvirrende ud, da knapperne er sat i forlængelse af hinanden og logoet er placeret nogenlunde midt i billedet. Det kan du ændre på, ved at du efter hvert knap-billede indsætter et linieskift - <BR>. Det gør du ved at placere markøren hvor du vil indsætte dit linieskift og derefter vælge det tilsvarende ikon fra ikonlinien eller ved at trykke <Ctrl>+<retur>.
Billedet er indsat med en IMG TAG og den fylder alt mellem de tilhørende < og > tegn:
<IMG SRC="knapper/forsideop.gif" BORDER="0" WIDTH="140" HEIGHT="25" ALT="">
Herefter er resultatet meget mere præsentabelt selvom der mangler baggrundsbilleder og indhold.
| Til top |
Fra din undersøgelse af, hvor store de grafiske elementer er, har du fundet, at bredden på baggrundsbillederne i den celle, hvor indholdet skal være, er 480 pixel. Du skal derfor nu have sat bredden på den kolonne hvor indholds-cellen er - den celle hvor teksten skal være - til 480 pixel og derefter have indsat baggrundsbilledet. Indholds-cellen er den tredie celle i den anden række men det vil være en god ide, altid at sørge for at breddejusteringer foretages enten i den øverste eller i den nederste række.
Find den rigtige kolonne - den tredie - i den øverste række og placer markøren mellem D og > i cellens start-TAG - <TD>. Tryk derefter på mellemrumstasten og vent et øjeblik. Når der fremkommer en ny dialogboks som rullemenu trykker du på "w" tasten for WIDTH. Tryk på retur-tasten for at vælge bredden. Vælg [tal] fra den nye "rullemenu" og indsæt 480 som angivelse for den aktuelle bredde i pixels i den dialogboks, som nu fremkommer og hvor du bliver bedt om en værdi. Alternativt kunne bredden angives i % af tabelbredden, hvis der skulle være behov for dette.
Test siden i browserne. Du skal kunne se, at tabellen har udvidet sig, så der er blevet plads til indholdet.
I den anden rækkes tredie celle skal du have indsat baggrundsbilledet. Du skal anvende samme fremgangsmåde, som da du indsatte baggrundsbilledet i BODY TAG'en for skabelonsiden, da du oprettede denne. I cellens start-TAG højreklikker du midt mellem T og D. Derefter vælger du redigering af stylesheet - typografi - og finder frem til background-image. Vælg dig frem til "forsidebg.jpg" og bekræft dette valg indtil du kommer tilbage til kodevinduet.
Du skal have aktiveret ikonet for de avancerede indstillinger i dialogboksen for at kunne udføre ovenstående.
Ved test i browserne vil du finde ud af, at baggrundsbilledet ikke bliver vist i Netscape browseren. Det skyldes, at der ikke er indsat indhold i cellen, hvor baggrunden er indsat. Du kan åbne cellen ved at indsætte et hårdt mellemrum - tvunget mellemrum: - i cellen eller ved at indsætte et gennemskinneligt - transparent - .gif-billede.
Det tvungne mellemrum kan du indsætte med "Indsæt" -> "Hårdt mellemrum" eller ved genvejen Ctrl+<space>.
Test igen siden i browserne. Netscape vil nu også vise baggrundsbilledet.
På tilsvarende vis skal du nu have indsat baggrundsbillederne for de seks celler, der indeholder kanterne. Husk for hver celle at indsætte et hårdt mellemrum for også at få baggrundsbilledet vist i Netscape.
| Til top |
Baggrundsbilledet er 320 pixel højt og for at du kan få gjort hele baggrunden synlig, skal tabellen justeres i højden, så den kommer til at passe med baggrundsbilledet. Justeringen kan foretages ved at justere indholdet i en af cellerne i den samme række til en tilsvarende højde. Hvis du altså får hele indholdet i menu-cellen til at være samme højde som baggrundsbilledet, vil hele baggrundsbilledet blive synligt.
Du har indsat fem knapper på hver 25 pixel i højden samt et logo på 160 pixel. Dette giver tilsammen 285 pixel og der mangler derfor 35 pixel i at hele baggrunden kan vises. Det er muligt at justere/positionere et billede ved at indsætte luft omkring billedet. Der kan indsættes lige meget i hver side og/eller foroven og samtidig forneden.
Da der indsættes lige meget luft foroven og forneden kan du ikke ramme de nødvendige 35 pixel eksakt. Du må vælge mellem 2x17 eller 2x18 pixel. På grund af fliselægningseffekten vil 2x18 pixel netop vise den første øverste pixel af den nedenforliggende flise og dette kan virke skæmmende på udseendet. Du skal derfor vælge 2x17 pixel som du i dette layout skal indsætte over og under logoet. Såfremt udregningerne ikke passer helt med det synsmæssige indtryk, kan det være nødvendigt at efterjustere tallene så de synsmæssigt kommer til at passe.
Højreklik indenfor logo'ets IMG TAG:
<IMG SRC="grafik/logo.gif" BORDER="0" WIDTH="100" HEIGHT="160" ALIGN="bottom" ALT="">
Sæt derefter margin i top og bund til 17 pixel. Du kan samtidig eksperimentere med at sætte luft i siderne til 3..4 pixel, som du nu synes. Det vil skabe en bedre visuel effekt, når teksterne på knapperne flugter med logo'ets billeddel.
Om du kan anvende positionering og tilpasning ved at indsætte luft omkring et billede er helt afhængigt at, hvordan dit layout ser ud. Som et alternativ kan der indsættes et gennemskinneligt .gif-billede på meget få pixel over kant - 5x5 pixel er brugbart - der efterfølgende tvinges til den størrelse som kræves.
| Til top |
Når du ser de enkelte baggundsbilleder for hver side - ved at højreklikke på billedet og vælge "Egenskaber" - vil du se, at der på forsidebilledet er indsat fire små markeringer i højre side og at der i venstre side er en lodret markering langs billedet. Det vil være pænest for layout'et at den tekst som indskrives i cellen ikke vil komme ind over disse områder og det er derfor nødvendigt, at begrænse det område, som teksten kan bruge. Det vil også være pænest for den samlede fremtoning af web-stedet, hvis alle sider fremtræder ensartet. Det betyder, at når du skifter fra en web-side og til en anden, så vil tekst og billeder fremstå på samme placeringer og dermed ikke virke flakkende for øjet. Med andre ord vil det blive mere roligt at gennemse web-stedet.
Til formålet kan du anvende en tabel med fast bredde hvor der samtidig er indlagt luft mellem tekst og cellekant.
I den celle, hvor du har indsat forsidebaggrunden, er der i øjebliket indsat et tvunget mellemrum. Du skal finde dette og fjerne det, hvorefter du skaber luft i koden - tomme liner - på samme måde som du gjorde, da du skulle indsætte menuen.
Indsæt nu en tabel med en række, en kolonne, en kant på 1 pixel, ingen afstand mellem celler, luft mellem tekst og cellevæg på 10 pixel og 400 pixel bred. Skriv derefter en tekst på nogle hundrede karakterer bestående af små - korte - ord. Det kan være ligegyldigt, hvad du skriver. Teksten skal alene anvendes til at justere tabellen ind efter.
Når du tester siden af i browseren, vil du se tabellens kanter og deraf kunne justere tabellen ind, så den bliver optimal i forhold til indholdet og de flader på baggrundsbilledet, som ikke må berøres. Du kan efterjustere tabellen ved at højreklikke i TABLE TAG'en. Herved fremkommer der en lidt mindre dialogboks end den, hvor du opretter tabellen men du har adgang til de egenskaber, som er gældende for hele tabellen.
Når du - efter gentagne forsøg - har fundet en passende bredde på tabellen samt luft mellem tekst og cellevæg, sætter du rammetykkelsen til nul. Du skal have fundet frem til værdier omkring 375 pixel for tabelbredde og 20 pixel luft.
Teksten kan du - indtil videre - lade være som den er, den skal tilrettes for hver enkelt side.
| Til top |