SESION DE APRENDIZAJE

I. DATOS INFORMATIVOS:
1.1 INSTITUCION EDUCATIVA: “LA VICTORIA DE AYACUCHO”.
1.2 LUGAR: Ascensión.
1.3 NIVEL EDUCATIVO: Secundaria de Menores:
1.4 GRADO Y SECCIONES: 5ª “A, “C”.
1.5 FECHA: 02 al 06 de noviembre del 2015.
1.6 RESPONSABLE: Prof: Angel Mendez Yalli.
II. DATOS CURRICULARES:
2.1. AREA: Educación Para el Trabajo.
III. NOMBRE: Ingresar contenidos y editar propiedades de una tabla
IV. PROPOSITOS:
Capacidad Pensamiento creativo.
Fundamental
Aprendizaje esperado Se utiliza correctamente una tabla para crear una página web.
Actitud Se interesa por utilizar correctamente la barra de herramientas
y propiedades, demostrando responsabilidad.
V. TEMA TRANSVERSAL: Educación para la vida.
VI. SECUENCIA DIDACTICA:
En la sesión de aprendizaje se ha determinado que el proyecto a realizar es tener
conocimientos básicos de la utilización de tablas en una creación de una página web.
ACTIVIDAD DUR.
APROX
Despertar el interés y activar saberes previos de los estudiantes haciendo las
siguientes interrogaciones:
 ¿Cómo cree que estén diseñados las páginas web para su buena presentación 10 m
y organización?
 Mostramos ejemplos de páginas webs.
 Ponemos a disposición del alumno, la hoja de información respecto al tema se
analiza varios puntos del contenido, donde explicaremos como ingresar
contenidos (textos, imágenes) en una tabla, como también editar a través de 60 m
las propiedades de una tabla.
 El docente apoya y orienta en todo momento de acuerdo a las diversas
dificultades que presenta el desarrollo del tema, realimentando y reflexionando
sobre el proceso de enseñanza-aprendizaje del tema tratado
El facilitador presenta ejemplos de páginas webs para su elaboración en casa. 10 m

VII. EVALUACION:
Criterio de evaluación: Ejecución de procesos de producción.
INDICADORES TECNICAS INSTRUMENTOS
Realiza páginas webs insertando tablas. Observación.  Registro de
Evaluación.
VIII. MEDIOS Y MATERIALES:
 Pcs.
 Ficha de ejemplos aplicativos.
 Plumones de pizarra acrílica.
IX. BIBLIOGRAFIA:
 ENCICLOPEDIA ENCARTA 2015.
 MANUAL DE MACROMEDIA DREAMWEAVER-
 MACROMEDIA DREAMWEAVER 8 ABEL ESPINOZA HERRERA.

Huancavelica, noviembre del 2015.

C.N. “LA VICTORIA DE AYACUCHO.

HUANCAVELICA.

--------------------------------------
PROF. ANGEL MENDEZ YALLI.
DOCENTE
 Ficha de Aprendizaje

Curso: Creación de páginas Web con Dreamweaver

Contenido: Tablas y multimedia

Tema: Ingresar contenidos en una

tabla Duración: 03 horas

pedagógicas

Logros de aprendizaje
 Utiliza tablas, agregando texto e imagen.

Conocimientos previos

Aplicación: modifica la tabla.

Mapa de Contenidos
TABLAS

Agregando texto Agregando una

imagen

Contenidos de aprendizaje

Agregando texto

En esta ficha trabajaremos el texto de la página inicio.html del web site Noticias.

Paso 1: Da clic en la celda donde ingresarás el texto, en la primera celda de la

primera fila (la que mide 200 píxeles de ancho).

Í 1······················ ······················ ··-~ .. J ~ ~ L .

i
Para obtener menor
espaciado, utiliza las
-oTICIAS AL DÍA
Paso 2: Ingresa el siguiente texto: teclas: Enter+Shift.
log de Noticias Escolares
..................................................

1 .

Paso 3: Edita el texto creando

 1. Crea una nueva regla CSS para ambos textos:
 “Blog de Noticias Escolares”
(subtítulo1)
 “Noticias al día” (título1)
2. Para subtítulo1:
 Font: Palatino
 Font style: italic
 Font weight: bold
3. Para título1:
 Font: Verdana
 Font size: 14
 Font weight: bold

Obtendrás el siguiente resultado: OTICIAS AL DÍA

log de Noticias Escolares

Si ya has realizado la Actividad 3.3 puedes continuar con

Paso 4: Luego de editar la cabecera, ahora debes ingresar texto a la parte del contenido. Haz
clic en la segunda celda de la segunda fila.

OTICIASAL DÍA
~log--·d-e-N-o-ti-ci-a-s -E~
sco-
la-r-e-s. -~--- . ..,..
1 L.L ,a..,.,,, :

Paso 5: Ingresa el siguiente texto:

ruy buenos días a tod@s! !

~n este blog compartiremos las últimas novedades que ocurren en el dia a

~ escolar. Desde aquí publicaremos todas las actividades del año de
iodos los grados de nuestro colegio, así como cumpleaños del alumnado,
Observa cómo la celda se
rersonal docente y administrativo.
acomoda (en altura) a la cuerpo
~a idea es que tod@s participemos compartiendo materiales: escritos,
cantidad de información que
fotos, ideas, trabajos, música, preguntas, etc. Seremos una fuente de
ingresas rtercambio de información.

~uestro crecimiento depende de ustedes, ya que el blog es de tod@s

nosotros, así que escnbenos con tus dudas, sugerencias o materiales a:
h2~c~clia@gin,ail:c:<>11:L.i.T~,~-sP.~¡,J]].º.~! ., .,., .,

Paso 6: Edita ahora el contenido del “cuerpo” para lo cual crearás una regla con las siguientes
características:

1. El saludo cámbialo a Encabezado 2.

2. Para el “cuerpo”, creas una regla CSS con el mismo nombre:

 Font: Trebuchet MS
 Font size: 12
 Text align: justify

Luego, aplica la regla al texto escogido. Para ello, selecciona el texto y en Inspector de
propiedades, dirígete a la opción Clase y escoge la regla correspondiente.

<bodv > <table.tabla> <tr > <td> <o>

Propiedades l...~~~--;::::::::::::::::-~f!!!!!!!!!~~~~~~~~~!!!!-.~~~~~~J
[ <>KTMLj Formato [Párrafo •] Clase
"=~~~~~~=
ª1:i CSS ID Ninguna

El resultado debe ser el siguiente:

Muy buenos días a tod@s!!

n este blog compartriemos las últimas novedades que ocurren en el día a cfi¡
escolar, Desde aqui publicaremos todas las actividades del año de todos lo
~rados de
nuestro colegio, así como cumpleaños del alumnado, persona
docente y administrativo.

a idea es que tod@s participemos compartiendo materiales: escritos, fotos

deas, trabaojs, música, preguntas, etc. Seremos una fuente de intercambio de
nformación.

Nuestro crecimiento depende de ustedes, ya que el bloe es de tod@s nosotros

'1Si que escríbenos con tus dudas, sugerencias o materiales a
hoticiasaldia@&mail.com. ¡Te esperamos!
 Agregando una imagen

Realiza lo siguiente:

Paso1: Crea una carpeta “imagen” dentro del web site Noticias y luego descarga la imagen
noticias.jpg de la plataforma y guárdala en esa carpeta:

Archivos I Activos I
~[fEil N_o_tici_·a_s ~J [
.... Vista local .... J Recuerda que la carpeta
f ti a 1 .[} tl' I a:] Noticias se encuentra

Aroh.ivo.s locales Tam... Tipo I 1! 11 Moc

ubicada dentro de tu carpeta
El ~ Sitio - Noticias (C: \J_lls ... Carpeta 07/1 de trabajo DREAMWEAVER
$)..e, imagen Carpeta 07/1
; L..... li notidas.jpg 26KB Imagen J 07/1

--~ inido.html 3KB Firefox H 07/1 Insertar

Gomú111...,.
m

~ Insertar etiqueta Div

Paso 2: Selecciona la primera celda de la segunda fila y da ~ ,. Imágenes : Imagen

clic en la opción imagen del panel Insertar:

Paso 3: Elige el archivo noticias.jpg de la carpeta imagen, luego clic en Aceptar, y en la

siguiente ventana no coloques ningún atributo y da clic en Aceptar.
'
.......
¡
l

¡Muy buenos días a tod@s!!

k.o. este blog compartiremos las úhimas novedades que octDTen en el día a
~ escolar. Desde aqui publicaremos todas las actividades del año de
¡i
~odos los grados de nuestro colegio, asi como cumpleaños del alumnado, ¡
pcíSooaldocentey administratr.·o. i
: ¡
La idea es que todos participemos compartiendo materiales:escritos,
fotos, ideas, trabajos, música, preguntas etc. Seremos una fuente de
intercambiode imormación.

¡Nuestro crecsnieatc depende de ustedes,ya que el blog es de todos

~sotros, asi que cscribenos con tus dudas, sugerencias o materiales a:
1
......................... ................................... b<>ticiasaldia@g,nail.com.Te .esperainos!.............. . <

Antes de ver tu avance en el navegador, no te olvides de colocar el nombre a la página.

Dirígete al espacio de título (ubicado en la barra Documento) y denomínalo: Noticias al día -
Inicio:

Título: NOTICIAS AL DIA - Inicio

Presiona F12, selecciona Guardar y observa tus avances en el navegador. De esta manera,
obtendrás el siguiente resultado.

··:]oocumentosintilulo ~+------------------------------------"I

Muy buenos días a tod@s!!

En este blog compartiremos las úitimas novedades que OC\DTen en el dia a

dia escolar.Desde aqu:ipublicaremos todas las actividadesdel año de
todos los gradosde nuestro colegio,asi como cumpleañosdel ahmloado,
personal docente y administrativo.

La idea es que todos participemos compartiendo materiales: escritos,

fotos, ideas, trabajos, música. preguntas etc. Seremos una fuente de
intercambiode información_

Nuestro crecimiento depende de ustedes, ya que el blog es de todos

nosotros, as.i que esaibenos con tus dudas, sugereocias o materia1es a:
noticiasaldia.@gmail.com Te esperamos!

GLOSARIO
Navegador: es un software que
permite el acceso a Internet,
interpretando la información de
archivos y sitios web para que
éstos puedan ser leídos.

Aplica lo aprendido

Aplicación 3.4: En la página deportes.html del web site noticias coloca información
de las actividades deportivas que realiza tu colegio, utiliza fotos o imágenes

5
 INFOPUC
INSTITUTO DE INFORMÁTICA

Ficha de Aprendizaje N° 10

Curso: Creación de páginas Web con Adobe Dreamweaver

Capítulo III: Tablas y multimedia

Tema: Editar propiedades de una tabla

Duración: 2 horas pedagógicas

Logros de aprendizaje
 Editar las propiedades de una tabla.

Conocimientos previos

Observa la siguiente tabla ¿Qué opciones crees que se han aplicado?

Mapa de Contenidos

Tablas

Agregar o
eliminar filas y
columnas

Insertar Unir o dividir Color de fondo

columna Insertar fila de la tabla
celdas

1
 INFOPUC
INSTITUTO DE INFORMÁTICA

Contenidos de aprendizaje

Agregar o eliminar filas y columnas

Continuando con el trabajo en la página de inicio.html del web site Noticias, agregaremos una
columna de ancho diminuto que servirá de margen entre el texto y el borde de la tabla.
el di• di•
e todo I~
s, pe n•~

1tos, f osl
,rcam d~

)s noso os~
ternlle •l

Insertar columna

Realiza lo siguiente:
Paso 1: Seleccionar la celda de
referencia dar clic derecho para que se OTICIAS AL DIA
.--=============~==========~========
muestre un menú con opciones donde log de 110ti tbla
debes elegir Tabla

Paso 2: al dar clic en la opción Tabla Insertar columna ~ Ctrl+Mayús+A

se mostrarán otras opciones entre ellas
Insertar filas o columnas ...
e insertar/eliminar filas o columnas,
elige insertar columna.

Con este método por defecto se inserta una columna a la izquierda de la celda de igual
tamaño.
- :NOTICIAS AL DIA
'iB'log de noti.c.ias escolaee«
------ 2:00· ------------ 2:00· -------i

Otra forma de realizar lo mismo es seleccionando el indicador verde de la columna de

referencia y ubicar la opción Insertar columna a la derecha.

OTICIAS AL DIA

Seleccionar columna
Borrar ancho de columna
Insertar columna izquierda
Insertar colu mna derecha

2
 INFOPUC
INSTITUTO DE INFORMÁTICA

Paso 3: cambia el ancho de la nueva columna a 5 píxeles. Guarda los

cambios realizado y con F12 observa que ahora hay un espacio “en blanco”
entre la línea de la tabla y tu texto

Siguiendo el mismo procedimiento, inserta una columna al lado derecho del cuerpo de la web

GLOSARIO
Píxeles: son los puntos de
color.

Insertar fila

Para insertar una fila inferior en la tabla. Debes hacerlo desde el menú Insertar.
Para ello coloca el cursor en una celda de la última fila, luego del menú Insertar selecciona la
opción Objetos de tabla y lego Insertar fila inferior.

Modificar Formato Comandos Sitio

Ctrl+E
Insertar. fila arriba
Imagen Ctrl+Alt+I
I Insertar fila C$bajo

Objetos de imagen
Insertar columna a la irzquierda
Media
Insertar. columna a la derecha
Consultas de medios ...
Importar datos de tabla ...
Tabla Ctrl+Alt+ T
Objetos de tabla
Objetos de diseño

Resultando:

It
'noti·c·iasa1·di a@.~ ail.com T C esP.eramos :1 . -
-g,: I
.-.-:.-.~::.~.. ~·.·.·.·.·.·.·.·.·.·.·.·.·.·.·.·.·:~·:.. ·.~·.·.·.·.·.·.·.·.·.·.·.·.·.·.·:_ _·:~~~·-·.·.·.·.·.·.·.·.·.·.·.·.·:.· ·:~"'["""""""" ---~, ..
, ·---,~· ::

Unir o dividir celdas

Otra herramienta es la que permite la unión de una o más celdas.

3
 INFOPUC
INSTITUTO DE INFORMÁTICA

Paso 1: Selecciona la última fila de la tabla, para unir las dos celdas.

I . I ob-"ciasal_dia_
r, · @_,:_ai)
co" _Tm_ese_:_eram-os_! _,jji

Paso2: da clic derecho y elige la opción Tabla y luego Combinar celdas

Tabla Seleccionar tabla

Formato de párrafo Com~ar celdas Ctrl+Alt+M

l.ista Dividir celda ... Ctrl+Alt+S

El resultado:
tiobcrasalellalaJgmall.com Ie
1¡
esperamos!

De esta misma forma también puedes acceder a la opción dividir celda.

Color de fondo de la tabla

Si no se define el color de la tabla, es transparente y refleja el color que está debajo. Para
modificar el color de la tabla interior que se creó dentro de la primera fila (menú de la web), realiza
lo siguiente:

Paso 1: Selecciona la tabla, para ello colócate en una de sus celdas y con clic derecho elige
las opciones:

Tabla Seleccionar tabla ~

[NOTICIAS AL DIA
'plog de noticias escolares

Paso 2: En el Inspector de Nueva regla CSS ~

propiedades, crea una nueva regla Tipo de selector: I I Aceptar

Elija Ll1tipo de selector contexwal para la rei¡la CSS.
CSS a la que la denominarás i Clase (puede ser aplicable a rualquier elemento HTM.) • I i Cancelar

colortabla.
Nombre del selector:
Elija o introduzca Ll1nombre para el selector.

color tabla

Este nombre de selector aplicará la regla a

todos los elementos HTML con clase "colortabla".
4
 INFOPUC
INSTITUTO DE INFORMÁTICA

Paso 3: En la nueva ventana, dentro de la categoría Fondo, haz clic en la opción

Background-color y escoge un color de fondo para la tabla y das clic en Aceptar.

Definición de regla CSS para .colortabla

Categoría Fondo

~
1Fao:mndi:o Background -color:
Bloque .==c'c=~~~~~~~~~~~~~
Cuadro
Borde Lista Background-image:
Posición
Extensiones Background -repeat:

Transición Background-attachment:

Background-position (X):

Background-position (Y):

Paso 4: Luego con la tabla seleccionada (de acuerdo a como has aprendido), dirígete al
Inspector de propiedades y, en la opción Clase, elige colortabla:

Filas _· x. •_,
[.._pi__ ] Ren. cel da Alinear [ Predet. •] Cl ase co1orbi1J1a
Co ls . 8 Esp. ce lda Borde O

l;;tl ';71 ~I 11:1 gen

I0w

Ahora de forma similar crea dos regla CSS más, la primera para la tabla de 800 pixeles nómbrala
colorfondotabla (usa blanco) y para la segunda colorpiepagina (usa plomo) y aplícala solo a la
última fila.

Finalmente el resultado será:

Muy buenos días a tod@s!!

En este blog compartiremoslas últimas novedades que ocurren en el día

a día escolar. Desde aquí publicaremostodas las actividades del año de
todos los grados de nuestro colegio, asi como cumpleaños del
alumnado, personal docente y administrativo.

La idea es que todos participemos compartiendomateriales:escritos,

fotos, ideas, trabajos, música. preguntas etc. Seremos una fuente de
intercambio de información.

Nuestro crecimientodepende de ustedes, ya que el blog es de todos

nosotros, así que escnbenos con tus dudas, sugerenciaso materiales a:
noticiasaldia@gmail.comTe esperamos!

5
 COLEGIO NACIONAL DE CIENCIAS Y ARTES
“LA VICTORIA DE AYACUCHO”

INFOPUC
INSTITUTO DE INFORMÁTICA

Aplica lo aprendido

Aplicación 3.5: entro del mismo web site Noticias, crea la

página web
calendario.html, utilizando como referencia la página esquema.html.

Aplicación 3.6: En el web site medioambiente, crea la página

contenido3.html y crea una tabla (principal) de con las siguientes
características: