|
Propiedades de Página:
Vamos a comenzar a
maquetar nuestra página,
para ello abriremos
Dreamweaver y el
documento index.html que
habíamos creado
anteriormente.
Los pasos preliminares
los daremos en el
inspector de
propiedades, situado en
la parte inferior de la
pantalla. Nota que los
paneles en esta versión
de dreamweaver se abren
y se cierran según
nuestra voluntad, de
modo que si lo tienes
cerrado basta con hacer
clic en el triángulo
negro invertido
situado en el medio y se
desplegará.
Hacemos clic en
Propiedades de la página
y se abrirá una nueva
ventana donde podremos
configurar algunas
opciones:
Fuente de la página:
esta es la fuente que
predominará en el
documento mientras no le
indiquemos otra cosa, al
igual que el tamaño,
negrilla (B) y el color
del texto.
Color de fondo:
Este color será un color
parecido al del fondo
que usaremos para la
base de la página web,
de esta forma, si falla
la descarga de la imagen
del servidor veremos
este color y la
composición global de la
página no se verá tan
mal.
Imagen de fondo:
en este caso sera 2.jpg
que corresponde al
diseño de una tira
alargada tableada con un
foco de luz en el medio.
Si en este momento
hacemos clic en
Aceptar, esto es lo
que veremos:
Observa que tanto el
fondo del documento como
algunos datos del
inspector propiedades
han cambiado para
ajustarse a la
configuración que hemos
dispuesto en propiedades
de página. Más adelante
cambiaremos algunas
cosas más en esta
opción.
Crear Tablas
Vamos ahora a distribuir
el resto de los fondos
en tablas. Yo lo llamo
modelo de tablas
anidadas, porque van
unas dentro de otras y
es una de las
distribuciones más
sencillas que podemos
realizar dentro de este
modelo.
Tal vez te preguntes,
¿qué es y para que sirve
una tabla?.
Intentaré explicar esto
breve y con lenguaje de
andar por casa. Una
tabla será una especie
de cajón donde nosotros
pondremos de manera
ordenada todos los
elementos de nuestra
página web; de forma,
que aunque en otros PC´s
usen resoluciones de
pantalla diferentes a la
nuestra, la página se
verá exactamente igual o
lo más parecido posible
a como nosotros la hemos
concebido. Hacemos clic
en el icono que marca la
flecha y se abrirá la
ventana que vemos, ahí
rellenaremos los
siguientes datos:
Filas:
1
Columnas:1
Ancho de tabla 95
en porcentaje
Grosor del borde
1
Relleno de celda
40
Espaciado entre
celdas 0
Esto es
lo que veremos ahora en
la pantalla. Vamos a
modificar la tabla un
poco más desde el
inspector de
propiedades:
|
Cambiamos
los
valores
que
están
marcados
con
el
recuadro
rojo
en
la
figura
inferior: |
|
Colocamos
el puntero del ratón
justo donde marca la
flechita en la imagen
(dentro de la tabla
creada):
Clic en
el iciono de crear tabla
y en la ventana
emergente rellenamos con
los siguientes datos:
Luego
en el inspector de
propiedades de la
tabla, terminamos de
rellenar los que
faltan:
Situamos ahora el
puntero del ratón en
el interior de la
tabla dorada y clic
nuevamente en el
icono de tabla.
|
y
rellenaremos
con
los
siguientes
datos: |
|
y en
el inspector de
propiedades lo
completamos así:
Ahora
solo queda abrir un poco
la tabla central, para
ello clic en el centro
de la tabla como hemos
hecho anteriores veces y
clic varias veces en la
tecla enter. Nuestra
página tendrá ahora este
aspecto:
Mi página web
Si
queremos ver el
resultado de nuestra
página en el
navegador, clic en la
tecla F12 y
Dreamweaver nos
preguntará si queremos
salvar las
modificaciones en el
documento, le decimos
que si y automáticamente
visualizaremos la página
en el explorer.
Lo
que debemos saber:
Si por
cualquier circunstancia
necesitamos cambiar de
una tabla a otra para
modificar cualquier
aspecto de la
configuración de la
misma, es muy sencillo.
Basta con hacer clic en
el borde de la tabla y
los puntos de selección
la rodearán. Sabemos que
estamos en el punto
exacto del borde porque
el puntero del ratón
cambia de forma (ver
figura).
-
Aspectos que hemos
modificado en las
tablas:
Alineación:
Con esto indicaremos
que la tabla se
alineará en el
centro de la página
sea cual sea el
tamaño del monitor
donde se visualice.
Especificar Ancho:
Con esto le
indicaremos el
margen que deberá
dejar a ambos lados
de la tabla tanto a
la derecha como a la
izquierda de la
misma con respecto
al fondo del monitor
o la pared de su
tabla inmediata (si
está dentro de otra)
Relleno
de Celdas:
Con este valor
indicaremos que
desde el borde de la
tabla, hasta donde
se sitúe el cursor
para escribir habrá
un espacio de XX
píxeles.
Espaciado entre
Celdas: cada
celda tiene un borde
interior y otro
exterior, con este
valor modificamos el
espacio que hay
entre ambos bordes.
Tamaño del Borde:
este valor
determinará cómo de
ancho se verá el
borde de la tabla
creada.
Modificaremos
igualmente los
colores para este
borde, tomando
muestras del fondo
base que hemos
puesto.
Fondo:
Pondremos color de
fondo por motivos
anteriormente
explicados y además
una imagen de fondo.
Para
enseñarme este resultado
en el foro: Archivo -
Guardar como y nómbralo
parte1.html
Por el
momento esto es todo.
Nos veremos en el
siguiente tutorial. |
Material necesario para empezar a trabajar:
