PÁGINAS WEB Unidad

PARA
EMPRENDEDORES
CON
8
DREAMWEAVER CC

Logros e
r a p á g in as web d
tablas pa eaver CC
• Diseñreosas con Dreamw de
emp p a r a p á ginas web
banner p CC
• Elaborerosas en Photosho eb de
emp p a r a p áginas w
menús aver CC
• Agregreosas en Dreamwe g inas web
emp los d e p á
U t il iz o hiper vínecnu Internet
• esa s
para empr

Perseverancia:
El trabajo, la persistencia y la diligencia son las madres de la buena
suerte (Benjamín Franklin).

5 Educación Secundaria
Sesión 29 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC

Proyecto:
Diseño tablas para páginas web de empresas
con Dreamweaver CC
MODELO FINAL
Aprende
Podemos vincular
nuestras redes sociales
con imágenes.

Actividades de la sesión
a) Inserto tablas para la página web
de empresas.
b) Agrego información en la página
de inicio.
c) Manejo propiedades de imágenes
en la página de inicio.

a) Inserto tablas para la página web de empresas.

2 Ctrl + Alt + T

3
1

1 Ingresa a Dreamweaver, crea un nuevo

documento en blanco y crea un nuevo
sitio web. 4
2 Presiona las teclas Ctrl + Alt + T para
insertar tablas.
3 Agrega la cantidad de filas y columnas,
como muestra la imagen.
4 Haz clic en el botón Aceptar. 5 Ctrl + Alt + M
5 Haz clic para seleccionar toda la fila 1
y presiona las teclas Ctrl + Alt + M para
combinarlas.
6 Coloca el alto de la fila 1 (250), de la
fila 2 (700) y de la fila 3 (35).

6
104 Educación Secundaria 5
UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 29

b) Agrego información en la página de inicio.

1 Agrega, en el centro de la página, una

nueva tabla de 700 px de 7 x 3. Agrega
dos imágenes en cada lado.
2 Agrega los títulos correspondientes para el 1
texto.
3 Ingresa en una página web de tecnología
para usar la información.
4 Haz clic para seleccionar el texto a copiar
en la página web y, luego, presiona clic
derecho.
5 Haz clic en la opción Copiar. 2
6 Presiona las teclas Ctrl + V para pegar el
texto copiado en la celda seleccionada.
7 Agrega en el otro extremo una tabla de 140
px de 1x7.
8 Agrega las imágenes necesarias para el
extremo sobre tecnología, dejando una
celda por imagen.
9 Agrega los estilos para el fondo de las 3
tablas, como muestra la imagen.

4 5
Ctrl + V
7
6

8 Recuerda
Las imágenes deben ser
guardadas primero, antes de ser
insertadas en la página.
9

5 Educación Secundaria 105

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 29

c) Manejo propiedades de imágenes en la página de inicio.

1 Haz clic en la primera imagen para modificar sus
propiedades.
2 Haz clic en el recuadro de vínculo para que se
muestre el cursor.
3 Haz clic en la carpeta Buscar el archivo del 1
recuadro de vínculo.
4 Busca el archivo en la carpeta donde está
guardado y selecciónalo.
5 Haz clic en el botón Aceptar para establecer el 2
vínculo de la imagen.
3
6 Haz clic derecho en el texto seleccionado
debajo de la imagen.
7 Haz clic en la opción Crear vínculo para vincular
la misma imagen.
8 Haz doble clic en la misma imagen que habíamos
seleccionado anteriormente.
9 Realiza el mismo proceso para la siguiente
imagen.
10 Agrega imágenes de las redes sociales más 4
usadas.

8
6

7
9
Recuerda
Podemos vincular las
imágenes con las páginas web
10 de las redes sociales.

106 Educación Secundaria 5

UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC

Sesión 30
Proyecto:
Elaboro banner para páginas web de empresas
en Photoshop CC
MODELO FINAL
Aprende
Photoshop permite la creación
de fotomontajes para los
banner de las páginas web.

Actividades de la sesión
a) Creo un nuevo documento para
crear banner.
b) Diseño el banner para la página
web.
c) Agrego el banner en la página web.

a) Creo un nuevo documento para crear banner.

1 Ingresa al programa Photoshop CC. 1
2 Haz clic en el botón Crear nuevo.
3 Haz clic en el ancho y alto, y agrega los valores
1000 x 200 píxeles.
4 Cambia la resolución del archivo a 180.
5 Haz clic en el botón Crear. 2
6 Se muestra la ventana con el documento creado.

3
6 4

5 Educación Secundaria 107

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 30

b) Diseño el banner para la página web.

Aprende
Podemos fusionar capas en Ctrl + V
Photoshop y tener una sola imagen. 4
5
Ctrl + T
1 Ingresa a Google y escribe el texto a
buscar en la ficha Imágenes.
2 Haz clic derecho en la imagen de la
vista previa.
3 Haz clic en la opción Copiar imagen.
4 Haz clic en la ventana de Photoshop y 6
presiona las teclas Ctrl + V.
5 Presiona las teclas Ctrl + T para
reducir el tamaño de la imagen, luego,
presiona la tecla Enter.
6 Copia otra imagen referente al tema de
7
tecnología.
7 Reduce el tamaño de la imagen y
ubícala en su lugar respectivo. 8
8 Haz clic en la herramienta Texto.
9 Escribe el texto correspondiente en las 9
imágenes.
10 Presiona las teclas Ctrl + S y guarda el 10
banner creado. Ctrl + S

108 Educación Secundaria 5

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 30

c) Agrego el banner en la página web.

1 Haz clic en la celda donde se va a
insertar el banner. 2
2 Haz clic en la ficha Insertar de los
paneles.
3 Haz clic en el botón Imagen. 3
4 Haz clic en el archivo que se ha creado
en el programa de Photoshop.
1
5 Haz clic en el botón Aceptar.
6 Haz clic en el botón Aceptar de la
optimización de imágenes.
7 Agrega un nombre para la imagen, si
es necesario.
8 Haz clic en el botón Guardar.
9 Observa el banner, creado en
Photoshop, en la página web.
10 Haz clic en el botón Vista previa en
tiempo real y guarda los cambios.
4

6
5

MODELO FINAL

9 7
8

Recuerda
Guarda los cambios
realizados en la página
10 web y muestra la vista
previa en el navegador.

5 Educación Secundaria 109

Sesión 31 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC

Proyecto:
Agrego menús para páginas web de empresas
en Dreamweaver CC

MODELO FINAL

Aprende
En la versión CC, los menús se
desarrollan vía programación
HTML, que es el lenguaje para
crear páginas web.

Actividades de la sesión
a) Abro la página web principal.
b) Creo una barra de navegación.
c) Agrego nombres en la barra de
navegación.

a) Abro la página web principal.

1

1 Ingresa al programa Dreamweaver CC 2018 y haz clic en el menú Archivo.

2 Haz clic en la opción Abrir o presiona las teclas Ctrl + N.
3 Haz clic en la carpeta que contiene los archivos guardados.
4 Haz clic en la página que se va a seguir trabajando en la sesión.
5 Haz clic en el botón Abrir.
6 Se muestra la página web en el programa. 3

6
4

110 Educación Secundaria 5

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 31

b) Creo una barra de navegación.

Aprende
2 Para crear menús en
la versión CC 2018,
se realiza a través de
programación HTML.

1 Haz clic en el espacio donde se va a insertar

la barra de navegación.
2 Haz clic en el botón Expandir paneles.
3 Haz clic en la ficha Insertar y selecciona la
opción Html. 5
4 Haz clic en la opción Componentes de 6
Bootstrap.
5 Haz clic en la etiqueta Navbar.
6 Haz clic en la opción Basic Navbar.
7 Haz clic en el botón Aceptar, si se muestra la
ventana de Confirmación.
8 Haz clic en el botón Código.
9 Observa todos los códigos que se han 7
mostrado en la vista Código.

Recuerda
Podemos insertar una imagen en 9
el banner que represente nuestro
logotipo.

5 Educación Secundaria 111

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 31

c) Agrego nombres en la barra de navegación.

1 Dentro de los códigos creados, busca la clase
“navbar-brand”. 1 2
2 Cambia el texto que se encuentra por el que va
ha tener la página web.
3 Haz clic en el botón inicio de la programación de
la etiqueta <li class=.
3
4 Selecciona hasta el cierre de la misma etiqueta
</li> Y presiona la tecla Supr.
5 Ordena las etiquetas que tendrán el nombre de
los botones, donde empieza la etiqueta <li class
=”active”.
6 Ordena las etiquetas y cambia el nombre, 4 Supr
copia las etiquetas para los demás menús
respectivamente.
7 Verifica los códigos que debemos eliminar que 5
no son necesarios.
8 Agrega la etiqueta navbar-right para que se
muestren los botones en el lado derecho de la
página web. 6
9 Haz clic en el botón Vista previa en tiempo real.

8 9

MODELO FINAL

Recuerda
Verifica los códigos creados
para que podamos eliminar lo
que no es necesario.

112 Educación Secundaria 5

UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC

Sesión 32
Proyecto:
Utilizo hipervínculos de páginas web para
empresas en Internet

MODELO FINAL

Aprende
Los hipervínculos nos llevan hacia
otra página web, debemos contar
con una página Index o principal.

Actividades de la sesión
a) Creo una copia de la página web.
b) Agrego imágenes para las sedes
de la empresa.
c) Inserto imágenes para la galería de
imágenes.

a) Creo una copia de la página web.

1 Abre la página web de la sesión anterior. 2

2 Haz clic en el menú Archivo. 1
3 Haz clic en la opción Guardar como. 3
4 Cambia el nombre de la página web por:
“NOSOTROS”.
5 Haz clic en el botón Guardar.
6 Borra el contenido de la página web que
está en el centro de la página.

6
4
5

5 Educación Secundaria 113

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 32

b) Agrego imágenes para las sedes de la empresa.

1
2

1 Agrega los nombres de los campos que se van

a mostrar en la página web.
2 Haz clic en la celda para insertar la imagen
del campo.
3 Haz clic en el botón Imagen, de la ficha Insertar, 4
de las opciones de HTML respectivamente.
4 Haz clic en una de las imágenes a utilizar como
referencia del campo.
5 Haz clic en el botón Aceptar para que se
muestre la imagen.
6 Haz clic en el tamaño de la imagen y cambia el
tamaño, como muestra la imagen.
5
7 Cambia el color de las celdas que contienen los
nombres de los campos.
8 Haz clic para seleccionar el origen de la imagen,
presiona Ctrl + C.
9 Pega el origen en el vínculo con las teclas Ctrl
+ V y guarda los cambios realizados.

Aprende 6
Todas las imágenes que vamos
a utilizar en la página web deben
estar guardadas en el sitio web.

Ctrl + C 8 7

Ctrl + V
9

114 Educación Secundaria 5

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC
Sesión 32

c) Inserto imágenes para la galería de imágenes.

2 Recuerda
Ahora podemos realizar
los vínculos de todas las
3 páginas creadas con sus
respectivos enlaces.

4 5

1 Haz clic en la celda donde se va a insertar la primera imagen de la

galería.
2 Haz clic en la ficha Insertar con la opción HTML activa.
3 Haz clic en la opción Imagen.
4 Haz clic en la carpeta que contiene las imágenes descargadas del
Internet.
5 Haz doble clic en la primera imagen a insertar.
6 Haz clic en el botón Alternar restricción de tamaño para desactivar
el candado.
7 6
7 Haz clic en los valores An. (140) y Al. (100) respectivamente.
8 Agrega todas las imágenes para la galería que vamos a mostrar.
9 Guarda los cambios realizados y haz clic en el botón Vista previa en
tiempo real.

MODELO FINAL
8

5 Educación Secundaria 115

 UNIDAD 8: Páginas web para emprendedores con Dreamweaver CC

Proyecto emprendedor N.°4

Páginas web de boletines informáticos

ACTIVIDADES
1 Elabora páginas web que permitan
informar a los estudiantes.
2 Diseña el contenido de la información de
cada autor peruano.
3 Elabora una galería de imágenes.
4 Para ello, deberás utilizar los programas
necesarios que se han empleado en esta
unidad de proyecto.

Editorial informativo

1 Ingresa al programa Dreamweaver.

2 Crea una plantilla de página web.
3 Cambia el contenido de la plantilla.
4 Añade las imágenes respectivas.

Contenido informativo

1 Crea un duplicado de la página web

anterior.
2 Añade el texto y la imagen correspondiente
a cada uno de los autores peruanos.
3 Añade los hipervínculos en cada una de
las imágenes empleadas.

Galería de imágenes

1 Crea otro hipervínculo o enlace de la página.

2 Añade una galería de imágenes de autores
peruanos.
3 Inserta los hipervínculos para cada imagen.
4 Enlaza toda la página web para navegar en
ella.

116 Educación Secundaria 5