UNIVERSIDAD JUÁREZ DEL ESTADO DE

DURANGO
FACULTAD DE INGENIERÍA, CIENCIAS Y ARQUITECTURA

PROGRAMACIÓN II
LIC. EDUARDO RAMÍREZ CALDERÓN
PAGINA WEB
MIGUEL REYES ÁVILA
ALDO FRAYRE CASTRO
MISAEL GARCÍA ESQUIVEL
FRANCISCO MARTÍNEZ SERMEÑO
COMO CREAR UNA
PAGINA WEB
Primer paso:
El primer paso es hacernos una idea de cómo
queremos que quede nuestra pagina, que formato
queremos que tenga y de que tema vamos a tratar en
ella.
El fin de esto es buscar las herramientas que nos
permitan darle forma y que el resultado logre
convencernos.
Segundo paso:
Una vez que ya tenemos la idea de lo que queremos
hacer, necesitamos de la ayuda de las herramientas
necesarias para llevar a cabo dicha idea.
Dichas herramientas son por ejemplo, programas
enfocados a la construcción y edición de sitios y
aplicaciones Web, servidores para “subir” nuestro sitio
a la red.
Nosotros hemos elegido un editor llamado
DreamWeaver
Tercer paso:
Preparar nuestro entorno de trabajo. Una vez que hayas
descargado e instalado el DreamWeaver, necesitas crear las
carpetas en las cuales vamos a meter todo el contenido de
nuestra Web. Vamos a crear dos carpetas
Una carpeta que llamaremos "web" que es donde irá todo el
contenido de nuestra web e iremos guardando nuestra
página a medida que la vayamos creando. Al mismo tiempo
dentro de esta carpeta "web" crearemos una nueva carpeta
que llamaremos "imágenes". Esto que parece una tontería,
es MUY IMPORTANTE, ya que nos permitirá tener
organizada nuestra web, y a la hora de subir la web será
mucho más fácil.
Cuarto paso:
Bueno, una vez hecho todo lo anterior, vamos a hacer
nuestra primera pagina web. Vamos a utilizar el
sistema que utilizan la mayoría de webmasters. Vamos
a trabajar con Etiquetas DIV.... te explico:
Una Etiqueta DIV es un pequeño rectángulo, donde
podemos poner cosas dentro. Es decir, las DIV se
utilizan para dividir la web en partes, y trabajar esas
partes de forma individual. Mira, por ejemplo, la web
que vamos a realizar mediante el tutorial, se
compondrá de 4 Etiquetas DIV ,mira el dibujo:
Es muy sencillo, a cada etiqueta le daremos un tamaño
determinado. Lo haremos mediante una Hoja de Estilo
que es un documento donde escribimos el tanto el
tamaño que queremos darle a las etiquetas, como la
posición que queremos que tengan. Dentro de cada
DIV podremos poner muchas cosas: Texto, Tablas,
Listas, Imágenes, Links, etc...
Quinto paso:
Bueno, una vez que te haya quedado claro todo lo
anterior, es hora comenzar con la creación de nuestra
pagina web.

Vamos a ejecutar el DreamWeaver. Vamos a Archivo >

Nuevo > Página en blanco > Html
Elige esta
opción,
una pagina
html
 Sexto paso:
Poniendo el Titulo a la pagina. Vete a la parte de
Código y pon el Titulo que quieras a tu pagina web.
Nosotros le pondremos como Titulo: “Pagina Web”
Este es el
icono para
seleccionar
el código

Aquí esta
nuestro titulo

Aquí entre las etiquetas

body va el contenido de la
web
Séptimo paso:
Ok, ya has visto el dibujo de como queremos que quede
nuestra web. Ahora vamos a crear las Etiquetas DIV
correspondientes a cada parte de nuestra web.
Ahora, vamos a crear 4 Etiquetas DIV correspondientes a
nuestras 4 partes de la web. Cada vez que creemos una
DIV, nos pedirá un nombre.
La primera etiqueta DIV la llamaremos cabecera
La segunda etiqueta DIV la llamaremos menú
La tercera etiqueta DIV la llamaremos contenido
La cuarta etiqueta DIV la llamaremos footer
Vamos al menú
y
seleccionamos
“insertar”

Seleccionamos la opción
“etiqueta DIV”
Nos va a aparecer la siguiente ventana:

Aquí no
debemos
escribir nada

En esta casilla escribimos el nombre de la

DIV ya sea cabecera, menú, contenido o
footer
Deberá aparecer lo siguiente:

Esto lo podemos borrar

Estas son nuestras etiquetas DIV

Octavo paso:
Dar forma y tamaño a las DIV. Hoja de estilo Css.
Bueno, una vez que tengamos creadas nuestras 4
"partes" de la web, necesitaremos darle Forma y
tamaño, además de colocarlas como queramos.
Utilizaremos una Hoja de estilo Css.
¿Qué es una Hoja de estilo Css? Pues una Hoja de
estilo es un documento donde escribimos las
dimensiones que queremos que tengan nuestras
etiquetas, también escribimos la posición que
queramos darles (ponerlas a la derecha a la izquierda)
El color de fondo etc.
Ahora vamos crear nuestra Hoja de estilo, pero antes vamos a ver
que medidas vamos a darles a La cabecera, al menú, al contenido y
al footer. Una vez que apliquemos la Hoja de Estilo a nuestra
página nuestras etiquetas pasarán a tener esta forma:

Así se ve después
Así se ve antes
Nuestra pagina queda mas o menos así:
Noveno paso:
Creando nuestra cabecera. Bueno, una vez llegado a este
punto debes tener la estructura de la web bien formada.
Colócate dentro de la DIV Cabecera, y Escribe lo que
quieras, puedes también utilizar una imagen , como hemos
hecho nosotros, en ese caso deberás ir a Insertar > Imagen.
Recuerda tener la imagen que quieras utilizar dentro de la
carpeta "imágenes" que creamos al principio.
Vamos a crear nuestra Cabecera Web, nosotros utilizaremos
una de las cabeceras que tenemos a disposición en el sitio:

http://www.crearunaweb.net/cabeceras-web/cabeceras-para-web.html
http://www.crearunaweb.net/cabeceras-web/cabeceras-para-web.html
Nuestra cabecera queda así:
Decimo paso:
Creando nuestro Menú y Nuestro Contenido. Para
crear nuestro Menú, nos basaremos en la utilización
de una Tabla. Es muy sencillo, colócate dentro de la
Etiqueta DIV que creamos con el nombre "menú". Una
vez dentro, vete a Insertar > Tablas.

Nuestra tabla queda de la siguiente forma:

 Pon un ancho de tabla del 100%
esto hará que la tabla se ajuste
al ancho de la DIV

Esta es la tabla que hicimos

para el menú
Ultimo paso:
Una vez que tenemos finalizado el menú, seguimos los
mismos pasos para darle un estilo a nuestra DIV de
contenido y a la de footer

Después de completar todos estos pasos tenemos un

producto final al que solo le restan unos toques.

Puedes hacer una pagina siguiendo tus ideas sobre el

formato, la de nosotros quedo así:
FIN
GRACIAS!!