Creación de páginas web utilizando Dreamweaver CC

Tema I. Espacio de trabajo de DWCC

Clase encuentro #1

Ing. Rebeca Hernández Martínez

Especialista Superior en Informática
División Habana, DESOFT

Informatizamos para la Sociedad Cubana

 Sumario

1. El modelo de cascada por prototipo

2. Estructura de un sitio Web
3. Espacio de trabajo de Dreamweaver CC
4. Administración de sitios Web
5. Diseños de páginas web
6. Maquetación de páginas mediante las secciones de
HTML 5.
Modelo de cascada por prototipo

Análisis y Diseño
Acciones que deben
realizar para resolver
Programación
las tareas docentes
Prueba
 Etapas Análisis y Diseño del
modelo de cascada por prototipo

1. Preparar la PC de trabajo instalando los software necesarios :

• Adobe Dreamweaver CC
• Un servidor Web local (ejemplo Xampp)
2. Proponer la estructura física de la carpeta del sitio Web,
interpretando el diseño predeterminado de la página index.html.
3. Crear (discutir) los bocetos de apoyo para la programación de las
páginas.
 Etapa Programación
del modelo de cascada por prototipo

1. Publicar la carpeta del sitio en el servidor Web local.

2. Definir el sitio Web local en DWCC.
3. Crear las páginas secundarias en blanco(Opcional)
4. Crear la página index
 Etapa Prueba
del modelo de cascada por prototipo

Realizar pruebas funcionales del sitio mediante los protocolos:

• http://localhost (simula las condiciones de Internet)

• file:// (hace una vista previa en el navegador)

 Estructura de un sitio Web

Los sitios web pueden tener diferentes estructuras según el

programador pero la mas usada esta dividida por carpetas donde:
Las carpetas:

• _private: contiene todas las páginas secundarias del sitio.

• images: contiene todas las imágenes que van a ser utilizadas en el
sitio (pueden estar a su vez organizadas por subcarpetas)
• css: contiene todas las páginas .css que están vinculadas en el
sitio.
• doc: contiene documentos que pueden estar enlazados en las
páginas
 Administración de sitios Web

La administración de sitio web entra en la Etapa

Programación del modelo de cascada por prototipo

1. Publicar la carpeta del sitio en el servidor Web local.

2. Definir el sitio Web local en DWCC.
3. Crear las páginas secundarias en blanco
Estructura del sitio web en el servidor local
Espacio de trabajo de Dreamweaver CC
 Definir el sitio en DWCC

 Abra Dreamweaver CC y realice una de estas acciones:

1. Elegir menú Sitio / Nuevo sitio

2. Elegir menú Sitio / Administrar sitios / Botón Nuevo Sitio
3. En el panel Archivos, desplegar la lista/Administrar sitios/Botón Nuevo
Sitio

 Completar las opciones del cuadro de diálogo Definir un sitio

 Cuadro de diálogo Definir sitio

1. Ponga nombre al sitio

2. Localice la carpeta raíz en la carpeta personal dentro de htdocs en el
servidor local Deje las demás opciones
3. Localice la carpeta images del árbol de directorios de su sitio por defecto en el cuadro
de diálogo
4. Finalice con Aceptar
 Diseños de páginas web

La estructura de diseño de las páginas puede estar encaminadas a

varias vertientes entre las que pueden ser

• Basadas en texto
• Basadas en diseño visual
Estructura de la Pág. Principal (basada en texto)

Título Anuncio

Navegación

Tópicos Información
Principal
Estructura de la Pág. Principal (basada en diseño visual)

Título Navegación

Diseño visual
principal

Tópicos Navegación
 Crear páginas en blanco

Guardar página web Crear un fichero nuevo

1. Menú Archivo Caso general Página básica HTML en
blanco
2. Guardar como….
o Guardar Desde el menú Desde el panel Sitio
Archivo
1. Clic derecho en una
1. Menú Archivo / Nuevo carpeta del sitio

2. Seleccionar la plantilla 2. Seleccionar nuevo

deseada en una de las archivo en el menú
categorías emergente
3. Poner nombre al
archivo
Maquetación de páginas mediante las
secciones de HTML 5
 Secciones
• <header> Se utiliza como una introducción del elemento que la contiene. como
primer nivel, será una introducción o presentación de toda la página. Si colocamos
un HEADER dentro de un SECTION, contendrá una introducción a esa sección.
También se pueden colocar dentro de un ARTICLE, suele llevar el título, la
descripción corta y el logo de la página.
• <nav> Está pensada para contener la barra de navegación o los enlaces a las
páginas del sitio web, normalmente va en la parte superior de la página o en un
lateral. Suele estar formada por una lista de enlaces con las etiquetas UL y LI.
• <section> Agrupa contenido con un tema común, cada SECTION puede estar
encabezada por una etiqueta H1, H2, dentro de una SECTION suelen haber
etiquetas ARTICLE y también etiquetas DIV y P.
• <article> Representa una unidad de contenido, es decir, contenido que responde a
un tema concreto. Se pueden anidar un ARTICLE dentro de otro ARTICLE. Dentro
de un ARTICLE el contenido se suele estructurar con las etiquetas DIV y P. También
está permitido poner dentro de un ARTICLE una SECTION, siempre que el artículo
sea largo y tenga diferentes secciones, pero lo más natural es que el ARTICLE vaya
dentro de una SECTION.
 Secciones (cont…)
• <aside> Esta etiqueta está diseñada para contenido tangencial, es decir,
menos importante que el cuerpo de la página, y que suele ser de un tema
relacionado indirectamente (o no relacionado) con el tema principal. Se
suele colocar en los laterales de la página. Pero no todo lo que va en los
laterales es ASIDE. Por ejemplo, si la página tiene publicidad en el lateral
derecho, puede colocarse en una etiqueta ASIDE, también una pequeña
reseña sobre el autor podría ir en esta etiqueta

• <footer> Normalmente va al final de la página y contiene información del

tipo: autor, copyright, contacto, mapa del sitio, etc. Se pueden poner
HEADER y FOOTER dentro de SECTION y ARTICLE, aunque no es lo más
normal. No hay nada prohibido, pero debe tener cierta lógica o sentido
semántico
Gracias por asistir a la clase!!!!!!!