Banestruktur kun tabel III

For at forstå mig, forestil tabellerne med egenskaben "elasticitet" Vi vil se, fordi jeg forestiller mig det. Og jeg arbejder stadig på det dokument, der skal gemmes som portal2.htm

1

Se her for oprindelige størrelse af fangsten.

I den øverste celle, ham holde tænker på at lægge titlen lader, jeg ønsker at gøre nu er at sætte et logo og et billede. Jeg placere markøren over den tekst, der blev indsat før, og jeg vælge alle, og vi vil være en stor hjælp, at have DW arbejdsplads delt i Design:

2

Forstør

Som vi vil se, om eller ikke afsnit i denne celle (<td> </ td>) og se, om nogen:

<td align="center" bgcolor="#FFF1D6"> <h1> uden billeder Web Design </ h1> <p </ p> </ td>

For at gøre dette helt klart, vi skal lade den være tændt.:

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

Men for cellen ikke forsvinder, må der være noget i det, for hvis ikke, er væk! med denne kombination af specialtegn: hvad vi gør i indsætte et tegn usynlig i cellen, kan ikke se noget, men også forsvinder ;) Vil gå ud og se, at DW sætter det alene og blot slette teksten og etiketten fra baren over Ejendom Inspektør:

3

Når denne 'rene' alt kommer til Indsæt / Tabel med denne konfiguration:

4

Og billederne ikke skal bruge, overlade det til dit valg, hvis aplicáis baggrund på bordet eller ej, eller celle, som vi havde gjort i tidligere institutter. I mit tilfælde, hvis jeg gjorde. Hvad det vil gøre, er at lægge alle justering (i midten, bredde og størrelse til cellen / kolonnen til venstre:

5

150 px, som før vi havde givet til kolonnen af ​​muligheder, eller menu. Den æstetiske effekt er afgørende for en hjemmeside, således at disse kolonner skal være fuldt ud lige, hvis du har en 200 px, må den anden også være 200 px.

I PSP (eller et grafikprogram) skabe et billede, der ville tjene til dette formål, og vi vil overveje, hvilke foranstaltninger de kolonner eller symmetrien af ​​disse vil blive elimineret, om vi har givet den samme værdi for W .

Vi vil se ;)

Forbered tre billeder, er en af ​​100/100, 150/150, 200/200 pixels, og vi vil indsætte dem én efter én, for at se hvad der sker: Sæt den første, 100/100 px:

6

Vi havde ikke sat i cellen tilpasning, er derfor til venstre, der er standard. Det bryder symmetrien af ​​kolonnerne, men er slukket centrum, så denne kan tjene som at centrere den, og knowhow. Justering = center i celle

7

For at kontrollere dig selv, kan du også prøve at fjerne bredden værdi, eller endda ændre det til 100 OS er det?

8

Det er fuldstændig tilpasset til billedet, dens størrelse .. så hvis det er mindre, og vi ønsker, at kolonnen har en bestemt bredde, vi giver det separat, eller vi vil være dårligt design.
Overhold godt, mig selv, hele rækken har samme højde som billedet, og dermed. vil med det næste billede, derfor højden, vi behøver at bekymre dig, bare for at skabe billedet, da den samme, der har denne, som vil være Line, og selvfølgelig påvirker også bordet, hvor den indsatte .

Du må ikke ændre bredden værdien af ​​cellen, men overlader det til 100, vi ser ske med den anden, 150 px:

9

Er perfekt, den første, selvom cellen ikke har den samme værdi af billedet bredde ...! Du ser, fordi de kalder 'elastisk'?

11

* Bemærk: Se også i den kasse, hvor vi ser værdien i cellen, siger han, 100 (150), være ... 100 er den værdi, som vi har lagt før, og i parentes, som vi faktisk har. ;)

For at afslutte kontrollen, ser vi sker med billedet af 200 px:

12

Og det samme vil ændre værdien til celle størrelse! Det er forår! ;) Derfor kan vi se, at der blot sender, er de billeder eller indhold. Fordi vi brugte et billede, men en tekst, vi vil gøre det samme. En lang binding, som .. Den tabelcelle ... er 'strækkes' til at omfatte alt indhold, vi indsætter, og snart vil vi have sat en bestemt størrelse ... forlænge og vokse så meget som det indhold, som vi indsætter i dem!

Med hensyn til højde, hvis du nogensinde kommer til at konstatere, at cellen er højere, eller en plads der er tilbage på billedet:

13

Skal være som vist i fangsten er der en etiket på denne Casp <p> (para) indeholder ikke mere, at selv om vi .. dette og generer os! fjerner vi ;)

Vi vil derfor passende størrelse til det billede, vi bruger, at i mit tilfælde er 150/150 px, og nedenstående billeder, jeg bemærke, at den maksimale højde, hvis jeg ønsker at fjerne design, uanset om 150px .

I den højre celle, indsætte en tabel med 100%, og denne gang har vi ikke sat tilbage eller noget, den gennemsigtige og at vi vil se bunden, som vi havde før:

13

I højre kolonne, et billede, indsætte og tildele den samme værdi (kolonne), der har bredt billede, du ser, højden er mindre end 150px.

14

Du kan se bedre i følgende skærmbillede:

15

og ikke behøver at bekymre sig om justering eller noget andet.

I den anden kolonne indsætte et billede af en tekst, og jeg tildele central justering, og er "flydende" i midten, som er hvad jeg ville, for det næste trin.

16

En celle ikke overdrage nogen gauge.

Og nu kommer det interessante ting, for hvis i den første tabel, erstatte de 780 px fra toppen, 100%, "stretch" alle borde:

17

Skriv 100 for at skifte til%

Se her eksempel

Hold samme design vi havde, men det vil gøre slutbrugeren, når du indtaster vores hjemmeside, har den opløsning, du har, se fuld skærm på 600, 800, 1024, 1280 eller højere.

Da jeg stadig gerne mere 'recogidita ", dvs med den oprindelige værdi af 780 px, men nu ved vi, hvordan du kan ændre, at hver enkelt at vælge, hvordan du bedst lide ;)

Svar