Banstrukturen endast med tabellerna III

För att förstå mig, tänk borden med egenskapen "elasticitet" Vi får se eftersom jag föreställer mig det. Och jag arbetar fortfarande på det dokument som ska sparas som portal2.htm

1

Se här för originalstorlek av fångsten.

I den översta cellen, låt honom hålla tänker sätta titeln, jag vill göra nu är att sätta en logotyp och en bild. Jag placera markören över den text som infördes före och jag väljer allt, och vi kommer att vara en stor hjälp med DW arbetsytan uppdelad i Design:

2

Förstoring

Som vi kommer att se huruvida punkter i denna cell (<td> </ td>) och se om någon:

<td align="center" bgcolor="#FFF1D6"> <h1> utan bilder Webbdesign </ h1> <p </ p> </ td>

För att göra detta helt klart skulle vi lämna den.:

<td align="center" bgcolor="#FFF1D6"> </ td>

Men för cellen inte försvinner, måste det vara något i det, för om inte, är borta! med denna kombination av specialtecken: vad vi gör sätter ett tecken osynlig i cellen, ser inget, men det försvinner också ;) Kommer gå och se, att DW sätter det ensam och bara ta bort texten och etiketten från ovanför egenskapsinspektören:

3

När denna "rena" alla kommer till Infoga / Tabell med den här konfigurationen:

4

Och bilderna inte kommer att använda, lämna den till din val, om aplicáis bakgrunden till bordet eller inte, eller cell, som vi hade gjort i tidigare institut. I mitt fall om jag gjorde det. Vad det kommer att göra är lägga all inriktning (i mitten, bredd och storlek på cellen / kolumnen till vänster:

5

150 px, som innan vi hade gett till kolumnen alternativ, eller en meny. Den estetiska effekten är viktigt i en hemsida, så att dessa kolumner är att vara helt lika, om du har en 200 px, bör den andra också vara 200 px.

I PSP (eller någon bildbehandlingsprogram) skapa en bild som skulle tjäna för detta ändamål, och vi kommer att överväga åtgärderna i kolumnerna, eller symmetri av dessa kommer att försvinna, om vi har gett samma värde för W .

Vi får se ;)

Förbered tre bilder, en av 100/100, 150/150, 200/200 pixlar, och vi kommer att sätta in dem en efter en, för att se vad som händer: Sätt i den första, 100/100 px:

6

Vi hade inte lagt i cellen inriktning, därför är till vänster som är standard. Det bryter symmetrin i kolumnerna, men är från centrum, så detta kan fungera som att centrera den, och vet hur. Justering = mitt i cell

7

Själv kontrollera, kan du också prova att ta bort bredden värdet, eller ens ändra det till 100 OS är det?

8

Det är helt anpassad till bilden, dess storlek .. så om det är mindre och vi vill att kolumnen har en viss bredd, ger vi det separat, eller vi kommer att vara dålig design.
Observera bra, jag har hela raden samma höjd som på bilden, och därmed. kommer med nästa bild, därför höjden måste vi oroa sig, bara för att skapa bilden, eftersom samma som har detta, som kommer vara en linje, och naturligtvis också att påverka bordet där det infogade .

Inte ändrar bredden värdet i cellen, lämnar den till 100, ser vi händer med den andra, 150 px:

9

Är perfekt, den första, även om cellen inte har samma värde på bildens bredd ...! Du ser att de kallar "elastiskt"?

11

* Obs: Se även i rutan där vi ser värdet i cellen, säger han, 100 (150), vara ... 100 är det värde som vi har lagt fram, och inom parentes, som vi faktiskt har. ;)

För att avsluta kontrollen ser vi händer med bilden av 200 px:

12

Och samma sak kommer att ändra värdet till cell storlek! Det är vår! ;) Därför kan vi se att som bara skickar, är de bilder eller innehåll. Eftersom vi använde en bild, men en text vi kommer att göra detsamma. En lång obligation, som .. Tabellcellen ... är "sträcks" för att täcka allt innehåll vi in ​​och snart kommer vi att ha lagt en viss storlek ... förlängs och växa lika mycket som innehållet som vi sätter i dem!

När det gäller höjd, om ni någonsin råkar konstatera att cellen är högre, eller ett utrymme lämnas på bilden:

13

Bör vara det som visas i fångsten finns en etikett i Casp <p> (para) som inte innehåller mer att även om vi .. detta och bry oss! vi tar bort ;)

Vi kommer därför lämplig storlek för att den bild vi använder det i mitt fall är 150/150 px och bilderna nedan noterar jag att den maximala höjden, om jag vill ta bort utformning, oavsett om 150px .

I den högra cellen infoga en tabell med 100% och den här gången har vi inte lagt tillbaka eller något, den transparenta och att vi kommer att se botten som vi hade tidigare:

13

I den högra kolumnen, infoga en bild och tilldela samma värde (kolumn) som har en bred bild, ser du, höjden är mindre än 150px.

14

Du kan se bättre i följande skärm:

15

och inte behöva oroa sig för anpassning eller något annat.

I den andra kolumnen infogar en bild av en text och jag tilldela centrala inriktning, och "flytande" i centrum vilket är vad jag ville, för nästa steg.

16

En cell har inte tilldela någon mätare.

Och nu kommer det intressanta, för om i den första tabellen, ersätta dem 780 px från toppen, 100%, den "stretch" alla tabeller:

17

Skriv 100 att byta till%

Se här exemplet

Att hålla samma design vi hade, men det kommer att göra slutanvändaren när du skriver vår sajt, har upplösning du har, se helskärm på 600, 800, 1024, 1280 eller högre.

Som jag gillar ännu mer "recogidita", dvs med det ursprungliga värdet av 780 px men nu vet vi hur man ändra på det, var och en välja hur du gillar mest ;)

Svara