SlideShare una empresa de Scribd logo
NORMAL SUPERIOR DEL DISTRITO  DE BARRANQUILLA   PRESENTADO POR: GLORIA RAMBAL   GRADO: 11 D PRESENTADO A: ANALIDA CARVAJAL TRABAJO DE:  INFORMATICA (Dreamweaver pasos de la pagina web)
En este programa  hice el montaje de un portal web acerca de un plan clase del sistema digestivo en ciencias naturales.  También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello deberás utilizar el atributo style: <p style=&quot;color: red; font-size: 30px;&quot;>Este texto está en rojo y con un tamaño de 30 píxeles</p> El estilo en línea es más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.  Comencemos por explicar el diseño de la página en cuanto al  fondo y formato. El formato de la página es prediseñado, se escoge al  crear el sitio web de la página en el inicio de la aplicación dreamweaver. Hace parte un modelo que aparece en páginas de inicio prediseñadas. Pero no está completamente igual; tiene algunos cambio de acuerdo al mi gusto.  El fondo es blanco con azul para que sea más llamativo para los niños.
Botones  Los botones se crean a partir de la opción INSERTAR que se encuentra en la parte superior de la barra de herramientas del programa. Luego seleccionas MEDIA  y después crear BOTON FLASH. En este botón te sale la acción para que edites el botón a tu gusto y luego lo apliques en la página web. Imágenes  Las imágenes jpg  que aparecen insertadas en la página web están guardadas en una carpeta en la carpeta raíz de la página junto con las imágenes giff para que puedan ser vistas en cualquier pc o al subirlas a la web. Existen dos formas de modificar el tamaño Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.
Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.
Marquesina Las marquesinas fueron utilizadas para darles movimientos a mi nombre y el curso, junto a una imagen giff para animar el efecto:  <marquee direction=&quot;left&quot;>  Texto a mostrar  </marquee>. Tabla Para insertar una tabla hay que dirigirse al menú  Insertar , a la opción  Tabla .    En la nueva ventana habrá que especificar el número de  Filas  y  Columnas  que tendrá la tabla, así como el  Ancho de la tabla  . El  Ancho  puede ser definido como  Píxeles  o como  Porcentaje . La diferencia de uno y otro es que el ancho en  Píxeles  es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en  Porcentaje  indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde  indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).  Relleno de celda  indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas  indica la distancia entre las celdas de la tabla. También se puede establecer si se quiere un  encabezado  para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla. Si queremos incluir un  título , lo indicamos en  Texto , el título aparecerá fuera de la tabla. En  alinear texto  indicamos dónde queremos alinear el título con respecto a la tabla. En  Resumen:  indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario hiperenlace Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace,  que al ser pulsado lleva de una página o archivo a otra página o archivo.Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen .
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Referencia absoluta:  Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicación es en Internet, por ejemplo,  http://www.aulaclic.com , o  http://www.misitio.com/pagina/pagina1.html .  Referencia relativa al documento:  Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar  ../   Referencia relativa al sitio:  Conduce a un documento situado dentro del mismo sitio que el documento actual. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. Puntos de fijación:  Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser  nombre_de_documento.extension#nombre_de_punto . El punto se define dentro de un documento a través del menú  Insertar , opción  Anclaje con nombre . Podríamos referenciar de este modo a un anclaje llamado  parte2  de la siguiente forma:  ../secciones/seccion1.html#parte2.
PANTALLAZO

Más contenido relacionado

PPTX
Páginas web
DOCX
Clase primaria alim saludable
DOC
Plan de clase
PPT
Plan clase
DOC
Planificaciones Ciencias Naturales
PPTX
Pc zombie, spim, ramsomware, spam
PPTX
sistemas cont
PDF
Guia3de Dreamweaver
Páginas web
Clase primaria alim saludable
Plan de clase
Plan clase
Planificaciones Ciencias Naturales
Pc zombie, spim, ramsomware, spam
sistemas cont
Guia3de Dreamweaver

Destacado (18)

PPT
Impacto de la informatica en el ámbito educativo
PPT
¿Como utilizar Power Point? Javier Orozco
DOCX
Resumen reglamentodelbaloncesto.doc
PDF
Putting the Web to Work
PPTX
Como insertar un vídeo de Youtube a un blog
DOC
El conocimiento
PPT
Analisis Sintactico Predictivo
PDF
I Fira de Museus i Educació de l'MMB 2001
PDF
Usabilidad para Pymes y autónomos. Febrero 2009.
PPT
Presentación tic y software libre
PPTX
Presentacion de investigacion pc zombie, epim, ect.
DOC
1 guía controladores_180604
PPT
Presentacion
PPTX
DOCX
Trabajo de herramientas telematicas
DOCX
PLAN DE ESTUDIOS
PDF
Jornada museuseducacio 2014
PDF
Desarrollo De Aplicaciones
Impacto de la informatica en el ámbito educativo
¿Como utilizar Power Point? Javier Orozco
Resumen reglamentodelbaloncesto.doc
Putting the Web to Work
Como insertar un vídeo de Youtube a un blog
El conocimiento
Analisis Sintactico Predictivo
I Fira de Museus i Educació de l'MMB 2001
Usabilidad para Pymes y autónomos. Febrero 2009.
Presentación tic y software libre
Presentacion de investigacion pc zombie, epim, ect.
1 guía controladores_180604
Presentacion
Trabajo de herramientas telematicas
PLAN DE ESTUDIOS
Jornada museuseducacio 2014
Desarrollo De Aplicaciones
Publicidad

Similar a Pasos (20)

DOCX
Resumen de dreamweaver aybeth orozco morales 11 e
DOCX
Resumen de inoformatica
DOCX
Resumen de dreamweaver
PPTX
Ventana de dreamweaver
DOCX
dreamweaver 8
DOCX
dreamweaver
PPTX
Adobe dreamweaver
PPTX
Guia de autoaprendizaje
DOCX
Resumen dreamweaver 8
PDF
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
PPTX
Presentación1
PPTX
Tutorial de dreamweaver
PPTX
Ventana de dreamweaver
PPTX
Dreamweaver cs5 naty
PPTX
Ventana de dreamweaver
PPTX
Dreamweaver a lo ernesto
PPTX
Dreamweaver a lo ernesto
DOCX
Guia 1 prezi
PPTX
Imagen
PPS
Introducción a NVU
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de inoformatica
Resumen de dreamweaver
Ventana de dreamweaver
dreamweaver 8
dreamweaver
Adobe dreamweaver
Guia de autoaprendizaje
Resumen dreamweaver 8
PROCEDIMIENTOS PARA INSERTAR COLORES, IMÁGENES Y VÍNCULOS EN EL DISEÑO DE LAS...
Presentación1
Tutorial de dreamweaver
Ventana de dreamweaver
Dreamweaver cs5 naty
Ventana de dreamweaver
Dreamweaver a lo ernesto
Dreamweaver a lo ernesto
Guia 1 prezi
Imagen
Introducción a NVU
Publicidad

Último (20)

PPTX
Sesion 1 de microsoft power point - Clase 1
PPTX
ccna: redes de nat ipv4 stharlling cande
PDF
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
PDF
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
PDF
MANUAL de recursos humanos para ODOO.pdf
PDF
capacitación de aire acondicionado Bgh r 410
DOCX
TRABAJO GRUPAL (5) (1).docxsjjsjsksksksksk
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
PPTX
Historia Inteligencia Artificial Ana Romero.pptx
PPTX
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
PPTX
Presentacion de Alba Curso Auditores Internos ISO 19011
PPTX
la-historia-de-la-medicina Edna Silva.pptx
PDF
informe_fichas1y2_corregido.docx (2) (1).pdf
PDF
CyberOps Associate - Cisco Networking Academy
PDF
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
PPTX
unidad 3 tecnología 8° básico: planificación y elaboración de un objeto
DOCX
Trabajo grupal.docxjsjsjsksjsjsskksjsjsjsj
PPTX
Power Point Nicolás Carrasco (disertación Roblox).pptx
PDF
TRABAJO DE TECNOLOGIA.pdf...........................
Sesion 1 de microsoft power point - Clase 1
ccna: redes de nat ipv4 stharlling cande
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
PRESENTACIÓN GENERAL MIPIG - MODELO INTEGRADO DE PLANEACIÓN
MANUAL de recursos humanos para ODOO.pdf
capacitación de aire acondicionado Bgh r 410
TRABAJO GRUPAL (5) (1).docxsjjsjsksksksksk
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
historia_web de la creacion de un navegador_presentacion.pptx
Historia Inteligencia Artificial Ana Romero.pptx
CLAASIFICACIÓN DE LOS ROBOTS POR UTILIDAD
Presentacion de Alba Curso Auditores Internos ISO 19011
la-historia-de-la-medicina Edna Silva.pptx
informe_fichas1y2_corregido.docx (2) (1).pdf
CyberOps Associate - Cisco Networking Academy
0007_PPT_DefinicionesDeDataMining_201_v1-0.pdf
unidad 3 tecnología 8° básico: planificación y elaboración de un objeto
Trabajo grupal.docxjsjsjsksjsjsskksjsjsjsj
Power Point Nicolás Carrasco (disertación Roblox).pptx
TRABAJO DE TECNOLOGIA.pdf...........................

Pasos

  • 1. NORMAL SUPERIOR DEL DISTRITO DE BARRANQUILLA   PRESENTADO POR: GLORIA RAMBAL   GRADO: 11 D PRESENTADO A: ANALIDA CARVAJAL TRABAJO DE: INFORMATICA (Dreamweaver pasos de la pagina web)
  • 2. En este programa hice el montaje de un portal web acerca de un plan clase del sistema digestivo en ciencias naturales. También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello deberás utilizar el atributo style: <p style=&quot;color: red; font-size: 30px;&quot;>Este texto está en rojo y con un tamaño de 30 píxeles</p> El estilo en línea es más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno. Comencemos por explicar el diseño de la página en cuanto al fondo y formato. El formato de la página es prediseñado, se escoge al crear el sitio web de la página en el inicio de la aplicación dreamweaver. Hace parte un modelo que aparece en páginas de inicio prediseñadas. Pero no está completamente igual; tiene algunos cambio de acuerdo al mi gusto. El fondo es blanco con azul para que sea más llamativo para los niños.
  • 3. Botones Los botones se crean a partir de la opción INSERTAR que se encuentra en la parte superior de la barra de herramientas del programa. Luego seleccionas MEDIA y después crear BOTON FLASH. En este botón te sale la acción para que edites el botón a tu gusto y luego lo apliques en la página web. Imágenes Las imágenes jpg que aparecen insertadas en la página web están guardadas en una carpeta en la carpeta raíz de la página junto con las imágenes giff para que puedan ser vistas en cualquier pc o al subirlas a la web. Existen dos formas de modificar el tamaño Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.
  • 4. Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.
  • 5. Marquesina Las marquesinas fueron utilizadas para darles movimientos a mi nombre y el curso, junto a una imagen giff para animar el efecto: <marquee direction=&quot;left&quot;> Texto a mostrar </marquee>. Tabla Para insertar una tabla hay que dirigirse al menú Insertar , a la opción Tabla .   En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla . El Ancho puede ser definido como Píxeles o como Porcentaje . La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.
  • 6. Espacio entre celdas indica la distancia entre las celdas de la tabla. También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla. Si queremos incluir un título , lo indicamos en Texto , el título aparecerá fuera de la tabla. En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla. En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario hiperenlace Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen .
  • 7. Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicación es en Internet, por ejemplo, http://www.aulaclic.com , o http://www.misitio.com/pagina/pagina1.html . Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../ Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio. Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto . El punto se define dentro de un documento a través del menú Insertar , opción Anclaje con nombre . Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2.