Anem a muntar ja una veritable pàgina web.

Si us plau ... l eed atentament i seguir pas a pas el tutorial. Cal primer entendre bé, per més tard no tenir problemes a l'hora d'executar els passos i que tot quedi genial, val?

Aquesta vegada l'estructura ha de ser per totes la mateixa, els continguts evidentment podreu variar cadascuna, però l'estructura convé que sigui la mateixa val? A més, el convertirem en el nostre index des del qual accedirem a la resta dels documents.

Anem a 'enganyar' als navegadors que no siguin IE, perquè vegin vores on no n'hi ha Això si, de moment i fins no aplicar estils propis, no podrem sinó simular vores sòlids, sense virgueries

També treballarem el concepte d'anar niant taules unes a altres, quan fem dissenys gràfics per portar a taules, veureu que és com construir un trencaclosques i la forma d'unir les peces és d'aquesta manera.

Comencem:

Anem a crear aquesta pàgina, com si fos totalment independent del que hem anat fent fins ara. Creem una carpeta nova, a la qual anomenarem web sense imatges, o portal, per exemple, en el nostre Lloc.

* Notes: Cada carpeta que tenim dins del lloc, és el que anomenarem Directoris i dins dels directoris, podem crear de nou un document index.htm. Per veure'ls en els navegadors, ara si que caldrà posar tota la ruta, no com quan hem creat el index, htm principal, que n'hi havia prou amb posar l'adreça que ens va donar el servidor per arribar a la pàgina.

Dins d'ella, anirem guardant els documents que després vincularem a l'Índex que ja tenim i així podrem veure el nostre treball.

Obrirem un nou document htm i inserirem una taula. Ens anirem acostumant-nos a assignar una mesura d'ample, que serà generalment amb la qual sempre començarem una pàgina i que són 780 px.

* Nota: D'aquesta manera ens assegurarem que es vora perfecta en una resolució de 800. Es treballa així, perquè encara hi ha la majoria de gent que usen aquesta mateixa resolució Més tard podrem triar si li traiem aquesta mesura o continuem amb ella)

Aquest document, serà el index del nou directori, així que el guardem, dins d'ell, amb el nom index.htm.

* Nota: Alerta, al guardar-lo, assegurar-se que ho feu en el directori o carpeta correcte, si no, trepitjaria el que hem modificat i és el index principal de la nostra web. Si no voleu córrer aquest risc, guardar amb un altre nom, com per exemple portal.htm, websinimg.htm ... etc,.

Com ja hem vist com configurar les propietats de la pàgina, aquest serà el primer pas, us deixo un enllaç, per si no ho recordeu: Propietats de la pàgina.

Una vegada que hàgim configurat les propietats de la pàgina, inserim una taula amb aquesta configuració:

4 files, 1 columna

Esp cel · la 1

Vora 0

Des del Inspector de Propietats i amb la Taula seleccionada:

Ample = 780px

Alinear = Centre

Color de fons per a la taula = # DE931C

Seleccionem totes les files i posem un color de fons a les Cel · les <td> O 1-1 tant és, només que per agilitzar, podem fer-ho així

Observem que en haver configurat les propietats de la pàgina, ja no hem de donar format al text.

I l'alineació n'hi ha prou que la apliquem a la cel · també. D'aquesta manera ja ens oblidem de l'alineació del text. Bastés amb donar-la a la cel · la.

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. * Nota: Crearem moltes taules per realitzar aquest exercici, i volem que es vegin bé en tots els navegadors, el donar un color de fons a la Taula, és perquè es vegi un Vora d'un color que haguem escollit. Per això, aplicarem un altre diferent a les cel · les, que seria el que faria de color triat per la pàgina.

Repetirem aquests passos en cadascuna de les taules que inserim. És a dir: Crear la taula, i configurar l'ample, (que si variés a partir d'ara) color de fons a la Taula, a la Cel · la i alineació tant a la taula, com a la cel · la. És molt important que ens habitem a això, ja que més endavant ens va a evitar molts trastorns i males estones de perquè no ens fa cas en aplicar un estil, val?

Per ajudar-nos i veure molt millor el treball, és interessant posar la taula en mode Ampliada:

Això ens ajudés i si comproveu així mateix en vista prèvia, veureu que no afectés en res a l'aspecte de la pàgina, només ens facilités la feina.

Ens situem a la primera fila i inserim una nova taula,

1 fila, 2 columnes

Alineada al centre

Esp cel · la 1

Vora 0

Ample, a partir d'ara, a 100%

Afegir el color de fons a la taula (color base)

Alineació ara no cal donar-la a la taula, ja que la tenim imbricada en una que té un ample concret, (780 px) el 100% que li hem assignat a aquesta, serà per tant el 100% de 780px. Podeu si voleu donar, però no es mourà d'on l'hem col · locat i del que es tracta és de treballar el menys possible no?

Igual que abans, apliquem el color de fons a la Cel · la:

L'aspecte que va tenint serà així:

* Nota: Veiem més petites les taules en les captures, perquè per mostrar els vaig donar una altra mida!

En la segona i última fila, s'inseriria una taula amb 1 fila i 1 columna. A la qual, només s'inseriria el color base al fons de la taula, podem usar-les o no, però ara ens farà la primera de separació i l'última de peu de pàgina:

A les cel · les, podem donar-los l'alineació encara que de moment els anem a inserir cap contingut. Així més tard ja estarà aplicat. La de dalt, quedés bé sense res, com a separació del que serà el títol i la resta, però en la de baix, podem inserir el nostre correu o els drets d'autor i quedés molt millor si aquesta just al centre, no?

Ens anem a situar en la tercera a on inserim els continguts. Inserim una taula nova, configurada com les anteriors, només que seran 1 fila i tres columnes:

Apliquem el color de fons a la taula i després a les cel · les:

Aquestes tres columnes, són les que van a carrega els continguts de la pàgina, així que les dues laterals, seran les diferents opcions que després tindrem. Estem muntant una estructura, més o menys d'un Portal, així que aquestes columnes laterals, han de ser més estretes que la central.

Amb el cursor situat a la primera cel · la, l'inspector de Propietats, li donem aquests valors:

Després a la lateral dreta, els posem igual. Si seleccionem la taba, veurem que queden així:

Les columnes marquen l'amplada: 150 i la central que no li vam donar res més que alineació, ocupés la resta, del 100% de la primera taula, que era 780 px. recordeu? i no mostra res.

* Nota: La xifra que veiem al bell mig de 100%, ens indica que la taula la inserim amb aquest percentatge. No heu de fer gaire cas al que mostra la captura, ja que he editat l'ample de la primera taula, perquè em deixés mostrar tota i la captura no fos massa gran. Però si al concepte que indica ... ens diu que la taula és un 100% de l'anterior, on aquesta inserida i que la seva amplada en píxels és de 483. Us ho comento només com a dada, per si us fijasteis, per tenir una idea del que signifiquen aquests números. Més tard és interessant si hem de dissenyar una web, tenint en compte això, podem fer-ho al mil · límetre.

Si escrivim un text i premem diversos Enter, l'aspecte que ha de tenir des del navegador serà així:

Veure Aquí

Vaig escriure un text en cada cel · la i vaig anar aplicant un format de capçalera de diferents mides, a cada text.

És hora de comprovar en els navegadors que es veuen igualitària en tots dos, Si no és així chiquis ... alguna cosa no va ser del tot bé, pel que us aconsello començar tot de nou, millor que a hores d'ara, intentar veure on està el problema val??

Jo vaig a posar a la web, un exemple de cada tutorial, vosaltres podeu anar després de cada tutorial i un cop aquest tot correcte, treballant en el mateix document, per així no embolicar-nos més, val?

L'exemple d'aquest Estatut, ho veurem en Web Disseny - Shalana , com Portal.