Modificar un document

Abans de seguir, ens situarem i fer bé les coses ;) Ja sabem donar format al text, inserir imatges i crear taules ... En el proper tutorial aprendrem a crear vincles o enllaços.

Però abans, anem a modificar un parell de documents dels que tenim ja fets.

1 º Obrim el Dream i anem al document index.htm, l'obrirem i directament anem a, (des Arxiu / Desar o de la pròpia pestanya del document) ho fem però amb un nom diferent:

practica1.htm

2 º Al tauler d'Arxius que tenim a la part dreta del Dream, veurem que encara continua estant el index.htm, no? Si, ha d'estar aquí, l'obrim de nou i anem a modificar-lo perquè sigui la portada de la nostra pàgina, serà també des de la qual ens anem a desplaçar a altres documents que anem creant fins a conèixer bé el programa i puguem crear la nostra web definitiva.

Doncs bé, anem a crear un index, adequat, amb una taula, i inserirem una imatge que ens agradi i defineixi. Sera la portada de la nostra pàgina i també des de la qual podrem desplaçar-nos o navegar :) als altres documents que anem creant fins a conèixer bé el programa i crear la nostra autèntica web.

Iniciem el Dream i obrim el document index.htm que tenim ja fet. Es tracta d'esborrar del tot, també podríem tranquil · lament obrir un de nou i guardar-lo amb el mateix nom, pisaríamos l'anterior i quedaria el nou. Una altra forma serà entrant al Codi font i esborrar tot el que trobem entre les etiquetes <body> i </ Bobby> Fer-ho com més us agradi val?

* Nota: Veurem amb més deteniment l'opció de Propietats de la pàgina, encara ens queden moltes coses per veure abans.

Però anem a posar fons a l'body i per a això, feu clic en Propietats de la Pàgina:

1

Des examinar, buscarem una imatge, que haurem preparat ja abans, i guardat a la carpeta d'imatges del lloc. Veureu que tot el fons queda cobert amb aquesta imatge:

2

3 º Inserir / Taula amb aquests valors:

3

En l'Inspector de Propietats, veurem la configuració de la taula així:

4

i la taula (ocupés més o menys espai a la pantalla, depenent de la vostra resolució, però l'aspecte serà igual) així:

Taula

4 º En la Fila superior, inserirem una imatge que haguem preparat i que servirà de top. Les mides de la imatge han de ser màxim 780 px, d'ample i jo vaig posar d'alt 200 px. Com que la idea és aprofitar al màxim l'espai, aquestes són les mesures que més s'usen a nivell professional. Encara que també podem trobar de 150 px d'alçada.

5 º Situem el cursor dins de la Fila del medi i en el Inspector de Propietats, li donarem un color de fons i alineació:

5

Veurem que el cursor es situa automàticament al centre de la cel · la.

Pulso la tecla Enter un par de veces e inserto una tabla con estos valores: 6 º Inserim ara un títol, jo vaig posar: Exemples practiques amb el Dreamweaver 8 Pols la tecla Enter un parell de vegades i inserit una taula amb aquests valors:

67

7 º Repetir el pas n º 5. I aplicar a les cel · les, un color sòlid de fons i alineació al centre. Fixar-se que en situar el cursor i començar a inserir text, aquest queda ja en el centre, no haurem de alinear com fèiem en el correu o com vam fer al principi. ;)

Des del Inspector de Propietats també, donarem format de font, mida i color al text. El seleccionem i desplegant els submenús:

8

Veureu que el Dream, aplica un Estil, Estilo8. Més endavant veurem com crear-los d'una altra forma més personalitzats.

8 º Ara només ens queda guardar el document amb el nom index.htm, fins que sapiguem posar Enllaços a aquests textos que acabem d'inserir.

I ho veurem en el proper tutorial. Veure com em va quedar al meu Aquí.

Respondre