Practica 1

CREAR UNA PAGINA HTML BASE
OBJETIVO:
DISEÑAR UNA PAGINA QUE SIRVA DE BASE PARA DESARROLLAR LA ESTRUCTURA DE

UN SITIO QUE ADMINISTRE INFORMACION USANDO PHP.
1. Abrir la aplicación Dreamweaver MX y que en lo sucesivo la identificaremos como DW a lo largo de la

práctica.
2. DW mostrará una página en blanco donde comenzará su diseño. Presione la opción Ver del menú
principal de DW. Seleccione la opción Código si es que no esta ya marcada.
Observará la estructura y el código básico de una página HTML. No cambie el modo de observar la página
en DW.
En DW existe una caja de texto antecedida por la palabra Título :, ubíquela y escriba en ella; Página Base,
después presione Enter. Esto asigna un nombre a la página que se insertará entre las etiquetas <title>
... </title>. También puede escribir directamente entre las etiquetas para obtener el mismo resultado.
TIP :
En DW existen tres modos de trabajar al diseñar páginas. La primera es observando sólo el Código que
compone la página. El segundo es ver el Diseño gráfico de la página. Este permite ver la representación
visual de la página en diseño. Y por último, el modo Código y Diseño que muestra en una parte de la
ventana el código y en otra el diseño gráfico.
NOTA : Dreamweaver MX Versión Educativa tiene un error en su módulo de edición pues en algunas
ocasiones al cortar y pegar líneas de códigos inserta secuencias de caracteres extraños similares a los
siguientes : ?????e????eA?Ð??????. Si esta realizando esta práctica y copia el código y lo pega en DW,
debe revisar a conciencia cada línea pues estos caracteres extraños pueden afectar los resultados
esperados.
3. Presione la combinación de teclas Ctrl+S para guardar esta página con el nombre : DISCLI_pbase.htm
en la carpeta \ITC-DISCLI.
4. Debajo de la etiqueta <body> escriba el siguiente código :
<div id="Cabecera" style="position:absolute; left:0px; top:0px;

width:190px;height:94px; z-index:1">
<img src="Imagenes-Sitio/DISCLI-Cabecera.gif" width="775" height="149">
</div>
TIP :
El código anterior pertenece al lenguaje HTML e indica que se defina un Layer o Capa que contendrá una
imagen o recurso gráfico. Observe el uso de las etiquetas <div>, </div> e <img>.
5. Presione la tecla F12 para que DW ejecute el Navegador y se muestre el resultado de la página. Observe
los resultados y regrese a DW. Hasta aquí ha incluido una cabecera de identidad para su página.
Las imágenes han sido prediseñadas a fin de lograr un máximo de avance en esta práctica. Estas
imágenes se encuentran en la carpeta /ITC-DISCLI/Imagenes-Sitio.
6. Presione Ctrl+S para guardar nuevamente los cambios. Haga esto cada vez que incluya nuevo código.
7. Ahora incluirá una capa que permita agregar un texto descriptivo de la función de la página. De nuevo se
usará otro layer. Escriba el siguiente código debajo de lo último que incluyó a su página.
<div id="Modulo" style="position:absolute; left:423px; top:57px; width:306px;

height:34px; z-index:2">
<font color="#FFFFFF" size="5" face="Arial Black"><em><strong>Semestre Ene-Jun
<font color="#006600">04</font></strong></em></font>
</div>
TIP :
Observe el código, solicite información si tiene alguna duda y haga notas sobre las etiquetas <font>,
<em> y <strong>. Este paso tiene como finalidad colocar un texto sobre la cabecera en el cual se
indique la función o los datos que contendrá la página.
8. Si desea, guarde cambios y observe los resultados.
9. El siguiente paso consiste en agregar un pequeño cintillo informativo que se desplace de derecha a
izquierda, atrayendo la atención del usuario sobre alguna información que consideramos importante de
comunicar. Observe la nueva etiqueta <marquee> que se utilizará. Escriba el siguiente código debajo de
lo último que incluyo en su página.
<div id="Banner" style="position:absolute; left:3px; top:127px; width:400px;

<marquee bgcolor="#FFFFFF" scrolldelay="150" border="0" style="font-size: 8
pt;
font-family: Arial, Helvetica, sans-serif" width="400" height="15">
<font color="#ff0000">Catedrático   ::
Ing. Ricardo González González   ::
Listas preliminares de Multimedia     ::
  Regularización 22 de Junio 2004 salón y hora de clase.
</font>
</marquee>
</div>
TIP :
Observe el código, solicite información y haga notas sobre la etiqueta <marquee>. Este paso tiene como
finalidad colocar un texto en
movimiento sobre la cabecera que muestre información importante contenida en esta página.
10. Guarde sus cambios y observe los resultados.
11. En este paso incluirá una capa que muestre una leyenda sobre los derechos de propiedad de la página.
Escriba el siguiente código debajo del layer Banner en su página DISCLI-pbase.htm.
<div id="Derechos" style="position:absolute; left:391px; top:373px; width:354px;

<p align="center" style="font-size: 8pt; font-family: Arial,Helvetica,sans-
serif">
<font color="#006600">Instituto Tecnológico de Celaya :: © 2005 Todos los
derechos reservados</font>
</p>
</div>
12. Este es el último paso para la creación de una página base que nos ayude a diseñar ascendentemente un
pequeño sitio demostrativo usando PHP.
Agregará un último recurso visual prediseñado utilizando Macromedia Flash MX. Se trata de una película
con elementos de animación que apoyan el tema visual de la página. El nombre de esta película es
BarraDigital.swf y se encuentra en la carpeta /ITC-DISCLI/Imagenes-Sitio .
Este elemento será incorporado al final de su página base, agregando el siguiente código.
<div id="BarraDigital" style="position:absolute; left:0px; top:394px; width:398px;

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0" width="775" height="31">
<param name="movie" value="Imagenes-Sitio/BarraDigital.swf">
<param name="quality" value="high">
<param name="SCALE" value="exactfit">
<embed src="Imagenes-Sitio/BarraDigital.swf" width="775" height="31"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave flash" scale="exactfit">
</embed>
</object>
</div>
TIP :
La interpretación del código anterior es la siguiente : Se define un layer o capa identificada con el nombre
BarraDigital así como sus atributos de
estilo. Dentro de ésta, se incluye un objeto cuya definición en código esta disponible en la URI que se indica.
A continuación se definen los parámetros de nombre de la película, calidad y escala en que se mostrará. Por
último, se incrustará en la página la
definición visual ( <emdeb>) de la película, con las dimensiones en que aparecerá en el navegador.
13. Guarde sus cambios y observe los resultados.

RESUMEN :
Al completar esta práctica deberá tener en la carpeta \ITC-DISCLI un archivo llamado DISCLI-pbase.htm que
será usado en las siguientes prácticas como base para diseñar y construir progresivamente un sitio demostrativo
utilizando PHP.
TIP : Al completar esta página NO debe de agregar otros elementos, pues se usará como base en las siguientes
prácticas. Se recomendará en cada práctica, hacer una copia de esta página y renombrarla para trabajar en ella.
El código completo de cómo debe quedar esta página se muestra a continuación. Observe que el código en color
es el que aporta esta práctica.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Pagina Base</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="Cabecera" style="position:absolute; left:0px; top:0px; width:190px; height:94px;

z-index:1"><img src="Imagenes-Sitio/DISCLI-Cabecera.gif" width="775" height="149">
</div>
<div id="Modulo" style="position:absolute; left:423px; top:57px; width:306px; height:34px;

z-index:2"><font color="#FFFFFF" size="5" face="Arial Black"><em><strong>Semestre
Ene-Jun <font color="#006600">04</font></strong></em></font>
</div>
<div id="Banner" style="position:absolute; left:3px; top:127px; width:400px; height:22px; z-

index:0">
<marquee bgcolor="#FFFFFF" scrolldelay="150" border="0" style="font-size: 8 pt; font-
family: Arial,
Helvetica, sans-serif" width="400" height="15">
<font color="#ff0000">Catedrático   ::   Ing. Ricardo
González
González   ::   Listas
preliminares de Multimedia   ::   Regularización 22 de
Junio 2004 salón y hora de clase.</font>
</marquee>
</div>
<div id="Derechos" style="position:absolute; left:391px; top:373px; width:354px;

height:15px;
z-index:4">
<p align="center" style="font-size: 8pt; font-family: Arial, Helvetica, sans-serif">
<font color="#006600">Instituto Tecnológico de Celaya :: © 2005 Todos los
derechos reservados</font> </p>
</div>
<div id="BarraDigital" style="position:absolute; left:0px; top:394px; width:398px;

height:13px;
z-index:6">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
6,0,29,0"
width="775" height="31">
<param name="movie" value="Imagenes-Sitio/BarraDigital.swf">
<param name="quality" value="high"><param name="SCALE" value="exactfit">
<embed src="Imagenes-Sitio/BarraDigital.swf" width="775" height="31" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
shockwave-flash"
scale="exactfit"></embed>
</object>
</div>
</body>
</html>

Practica 1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Practica 1

Hochgeladen von

Copyright:

Verfügbare Formate

CREAR UNA PAGINA HTML BASE

DISEÑAR UNA PAGINA QUE SIRVA DE BASE PARA DESARROLLAR LA ESTRUCTURA DE

1. Abrir la aplicación Dreamweaver MX y que en lo sucesivo la identificaremos como DW a lo largo de la

4. Debajo de la etiqueta <body> escriba el siguiente código :

<div id="Cabecera" style="position:absolute; left:0px; top:0px;

<div id="Modulo" style="position:absolute; left:423px; top:57px; width:306px;

8. Si desea, guarde cambios y observe los resultados.

<div id="Banner" style="position:absolute; left:3px; top:127px; width:400px;

10. Guarde sus cambios y observe los resultados.

<div id="Derechos" style="position:absolute; left:391px; top:373px; width:354px;

<div id="BarraDigital" style="position:absolute; left:0px; top:394px; width:398px;

13. Guarde sus cambios y observe los resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<div id="Cabecera" style="position:absolute; left:0px; top:0px; width:190px; height:94px;

<div id="Modulo" style="position:absolute; left:423px; top:57px; width:306px; height:34px;

<div id="Banner" style="position:absolute; left:3px; top:127px; width:400px; height:22px; z-

<div id="Derechos" style="position:absolute; left:391px; top:373px; width:354px;

<div id="BarraDigital" style="position:absolute; left:0px; top:394px; width:398px;

Das könnte Ihnen auch gefallen