Vævsstruktur, kun med borde

Lad os ride og en rigtig webside.

Venligst ... l ØDVENDIGHEDEN omhyggeligt, og følg den trin for trin tutorial. Vi må først forstå det, for at undgå problemer senere, når udførelsen af ​​trin og alt er godt, right?

Denne gang strukturen skal være alligevel, indholdet af kurset kan du variere dem hver, men strukturen bør være det samme gælder? Hertil kommer, vil vi gøre vores indeks, hvorfra man kan få adgang til resten af ​​dokumenterne.

Vi kommer til at 'snyde' med andre browsere end IE, for at se, kanter, hvor der ingen er ;) At hvis, nu og ikke anvender dine egne stilarter, men vi kan ikke simulere solide grænser, uden fancy ting ;)

Arbejder også begrebet Indskudsbord gå på hinanden, når vi bringer grafiske designs til borde, vil du se, der er ligesom at bygge et puslespil, og hvordan man kan sætte brikkerne er på denne måde.

Vi begynder:

Lad os skabe denne side, som fuldstændig uafhængig af, hvad vi har gjort hidtil. Opret en ny mappe, vi kalder internettet uden billeder eller Portal, for eksempel, på vores hjemmeside.

* Bemærkninger: Hver mappe, som vi har i området, er, hvad vi vil kalde og mapper i mapper, kan vi genskabe et dokument index.htm. At se dem i browsere, du nu nødt til at sætte hele ruten, ikke kan lide når vi skabte indekset, HTM vigtigste, det var nok til at sætte den adresse, du gav serveren for at nå den side.

Inden for det, vil vi gemme dokumenter så vil linke i det indeks, vi har, så vi kan se vores arbejde.

Htm Vi vil åbne et nyt dokument, og indsætte en tabel. Vi vil vænne sig til at tildele en bredde måling, som normalt altid starte med en side og er 780 px.

* Bemærk: På denne måde sikrer vi vil se perfekt i en opløsning på 800. Det fungerer godt, fordi selv der de fleste mennesker, der bruger samme løsning Senere kan du vælge, hvis vi tager denne handling eller fortsætte med det)

Dette dokument vil være indekset for nyt bibliotek, så vi holde det inden for det, med navnet index.htm.

1

* Bemærk: Advarsel, når du gemmer den, skal du sørge for at gøre det i den rigtige mappe eller mappen, ellers ville vi gå den ændrede og er den vigtigste indeks på vores hjemmeside. Hvis du ikke vil tage denne risiko, gemme den under et andet navn, som Portal.htm, websinimg.htm ... osv,.

Som vi har set, hvordan man konfigurere egenskaberne for siden, vil dette være det første skridt, jeg forlader et link, behøver du ikke huske: Egenskaber for side.

Når du har konfigureret egenskaberne for siden, indsætte en tabel med denne konfiguration:

4 rækker, 1 kolonne

CellSpace 1

Edge 0

2

Fra Property Inspector, og den valgte tabel:

3

Bredde = 780px

Align = center

Baggrundsfarve til tabellen = # DE931C

Vælg alle rækker, og sætte en baggrundsfarve til celler <td> O giver både 1-1, kun for hastighed, kan vi gøre det

3_3

Vi bemærker, at efter at have sat de sideegenskaberne ikke længere nødt til at formatere teksten.

Og lineup er nok til at anvende den til cellen også. På denne måde, og vi glemmer tekstjusteringen. Nok til at give den til cellen.

para realizar este ejercicio, y queremos que se vean bien en todos los navegadores , el dar un color de fondo a la Tabla , es para que se vea un Borde de un color que hayamos elegido. * Bemærk: Vi vil skabe mange tabeller for denne øvelse, og vi ønsker at se godt ud i alle browsere, hvilket giver en baggrundsfarve til bordet, er at gøre det til at se en kant af en farve vi har valgt. Så vil vi anvende en anden en til cellerne, hvilket ville være den valgte farve ville gøre for siden.

Gentag disse trin for hver af de tabeller, vi indsætter. Det er: Opret bord og indstille bredden (hvis du varierer fra nu) baggrundsfarve til bordet, og cellen tilpasning til bordet både til cellen. Det er meget vigtigt for os at dvæle ved dette, fordi vi senere vil undgå mange problemer og dårlige tider for os, fordi ingen sag at anvende en stil, right?

For at hjælpe os og gøre en langt bedre job, er det interessant at tabellen i Udvidet modus:

4

Dette vil hjælpe os, og hvis comprobáis selv i preview, vil du se noget, der ikke ville påvirke udseendet på siden, bare forsyne os med arbejdet.

Vi er placeret i forreste række, og indsætte en ny tabel,

1 række, 2 kolonner

Center-linie

CellSpace 1

Edge 0

Wide, fra nu af, 100%

5

Føj baggrundsfarve til bordet (base farve)

Justering nu ikke behov for at give det til bordet, som vi har indlejret i en, der har en bredde Konkret (780 px) 100%, som vi har tildelt den, vil derfor være 100% af 780px. Du kan hvis du ønsker at give det, men vil ikke flytte fra, hvor vi har lagt, og hvad det er at arbejde så lidt som muligt til højre? ;)

6

Som før, vi anvender baggrundsfarven i cellen:

7

Den del, der vil blive givet som:

8

* Bemærk: Vi ser små borde i fangsten, fordi jeg gav en anden skærm størrelse!

I den anden og sidste række, indsætte ville en tabel med 1 række og 1 kolonne. At der, ville man indsætte grundfarven til bunden af ​​tabellen, kan vi bruge dem eller ej, men nu vil vi gøre den første og sidste adskillelse af sidefod:

9

Cellerne, kan vi give lineup, men for nu de kommer til at indsætte indhold. Det senere vil blive anvendt. Den øverste, bo godt med noget, som adskillelse af hvad der vil være titlen og resten, men på bunden, kan vi indsætte vores mail eller ophavsret ;) og meget bedre, hvis du bor lige i midten, right?

Vi vil sætte i den tredje, som er hvor vi indsætte indholdet. Indsæt en ny tabel, ligesom den foregående sæt, kun at være 1 række og tre kolonner:

10

Vi anvender baggrundsfarven til bordet og derefter til cellerne:

11

Disse tre søjler er dem, der vil indlæse indholdet af siden, så de to sider, er de forskellige muligheder, så vil vi have. Vi sætter en struktur, mere eller mindre af en portal, så disse afstivere, være smallere end den plante.

Med markøren i den første celle i Property Inspector, giver vi disse værdier:

12

Efter højre side, satte dem lige. Hvis vi vælger den tobak, ser vi, at ned til dette:

13

Søjlerne markerer bredde: 150 central, og vi gav ikke noget mere end tilpasning, besat resten, 100% af den første tabel, der var 780 px. huske det? og viser ingenting.

* Bemærk: det tal, vi ser lige i centrum på 100% angiver, at det indsatte bordet med denne procentsats. Du skal ikke betale meget opmærksomhed at vise et øjebliksbillede, siden jeg ændre bredden af ​​den første tabel, så lad mig vise det hele og fange var ikke for stor. Men hvis det koncept, som viser ... fortæller os, at bordet er et 100% af det ovenstående, hvor denne indsat, og at dens bredde i pixels er 483. Jeg kommenterede, så data, hvis du fijasteis, at få en idé om, hvad disse tal betyder. Senere er det interessant, hvis vi skal designe en hjemmeside, med dette i tankerne, kan vi gøre for at millimeter.

Hvis vi skriver en tekst og tryk på Indtast nummer, vil det aspekt, at skal have browseren være som følger:

Se her

Jeg skrev en tekst i hver celle og blev anvendelse af en header format forskellige størrelser, hver af disse tekster. ;)

Det er tid til at tjekke i browsere, som er igualitas i både, ;) Hvis ikke chiquis ... noget ikke var helt rigtigt, så jeg råde dig til at starte helt forfra, bedre end i dag, forsøger at se, hvor problemet er værd at gøre?

Jeg vil sætte på nettet, et eksempel på hver tutorial, kan du gå efter hver vejledning og når det er okay, der arbejder i det samme dokument, så det ikke tiing mere, okay?

Eksemplet i denne tutorial, vil vi se i Web Design - Shalana som Portal.

Svar