Sesión de Dreamweaver CS6 - Colegio Miguel Ángel Buonarroti..

Transcripción

Colegio Miguel Ángel Buonarroti Curso: Computación
Adobe Dreamweaver CS6
Mg. Carlos Antonio Huamán Terrazas.
Presentación
 Es un programa donde se puede desarrollar páginas Web.
 El diseño de Web, es un proyecto o planificación de una estrategia de mercado
aplicado a Internet, debido a la gran facilidad y flexibilidad de la red para llegar a
la mayor cantidad de personas sin importar las distancias. Para ello se cuenta con
numerosos recursos y programas como Adobe Dreamweaver CS6 que nos
permiten lograr llegar de una manera eficaz a tal objetivo, como por ejemplo
crear una página Web de tu promoción de colegio, club deportivo favorito, artista
preferido o hasta elaborar una Web Site completa para una empresa.
Profesor: Mg. Carlos A. Huamán Terrazas
1
Conceptos previos de diseño de Web
 En el área de trabajo de Diseño de Web hay muchos conceptos que debemos
tener en cuenta, ya que están relacionados directamente y conocerlos será muy
importante para el buen aprendizaje de Adobe Dreamweaver CS6.
Página Web
Es un documento electrónico diseñado para el Internet que contiene algún tipo de información como
texto, imagen, vídeo, animación u otros que contienen hipervínculos para enlazar una página de otra.
WebSite
o Sitio Es el conjunto de páginas Web ordenadas jerárquicamente bajo una sola dirección de Internet (URL)
Web
HTML
Son siglas que al castellano significa Lenguaje Marcado de Hipertextos, básicamente se trata de un
conjunto de etiquetas o códigos que sirven para definir la configuración del texto o de otros elementos
de la página. La última versión de estas etiquetas es HTML 5.
Conceptos previos de diseño de Web
Navegador Web
Es un programa que nos permite visualizar y movernos en una página Web.
FTP
Son siglas que al castellano significa protocolo de transferencias de archivos y sirve para enviar y/o
recibir archivos de una máquina a otra. Por ejemplo, para enviar y almacenar los archivos de las
páginas Web, las cuales son visualizadas en Internet.
Hosting
En castellano significa hospedar o alojar y sirve para poner una o varias páginas Web a un servidor de
Internet, las cuales pueden ser vistas en cualquier lugar del mundo con acceso a Internet.
Dominio Es un nombre y dirección de Internet.
2
Estructura de trabajo
 Para ingresar al Dreamweaver sigue los siguientes pasos:
Otra forma de ingresar al Adobe Dreamweaver CS6
3 Dar clic a Inicio –
Todos los Programas –
Adobe Master Collection CS6 –
Adobe Dreamweaver CS6
2 1 Estructura de pantalla de trabajo
Cuando ingrese al Dreamweaver CS6, visualizare lo siguiente:
N°
3
Descripción
Abrir un elemento existente
Aquí se puede abrir las últimas páginas web diseñadas con Adobe Dreamweaver CS6.
2
Crear Nuevo
Esta opción nos permite elegir en que perspectiva o lenguaje desea trabajar.
3
Elementos destacados
En esta sección se muestra las mejoras e innovaciones de Adobe Dreamweaver CS6.
1
2
Parte 1
3
Estructura de pantalla de trabajo
Al escoger la opción Crear Nuevo ‐ HTML, visualizare las siguientes opciones:
1
2
5
3
4
N
°
Parte Descripción
1
Barra de menú
Muestra los comandos básicos que contienen los programas para Windows, desde como abrir un archivo, como guardar o insertar código, hasta la ayuda que nos proporciona el programa acerca de sus funciones.
2
Barra de herramientas del documento
Posee botones que nos permite diferenciar las vistas del documento y también nos deja ver algunos comandos relativos a la visualización del documento.
3
Documento de trabajo
Es el área de trabajo de diseño, donde se inserta el texto, imagen, video o animación.
4
Inspector de propiedades
Permite examinar y editar las propiedades mas comunes del elemento de la pagina, texto o imagen seleccionada.
5
Panel insertar
Contiene botones para crear e insertar objetos como tablas, imágenes o vínculos y están organizados por categoría: Común, Diseño y Formulario, entre otros
4
Barra de representación de estilos. Contiene botones que permite ver como
aparecería el diseño en distintos tipos de medios si se utiliza hojas de estilos
dependientes de los medios.
Para habilitarla debemos:
1. Clic derecho.
1
2
2. Escoger Representación de estilos.
Mi primera página Web
Titulo en la barra de título.
5
Tipos de visualización
Tipos de visualización
6
Usar etiqueta HTML
Si deseas ver todo el código fuente HTML (el código de programación interno de la
página Web) que se genera automáticamente, debes realizar el siguiente paso:
Usar etiqueta HTML
Escribir código HTML
Cuando estás en la vista de Etiqueta HTML, puedes escribir en ella, este formato se
llama formato de programación y debes saber los códigos de programación que
quieres que se ejecuten en la página Web, para ello realiza los siguientes pasos:
7
Formato de texto
En Adobe Dreamweaver CS6 hay herramientas que te ayudan a dar formato de
texto de forma muy sencilla ya que se aplican formatos predeterminados, para
aplicarlos realiza los siguientes pasos:
Propiedades de página
Adobe Dreamweaver CS6 brinda una gama de ventajas para hacer que la página
Web que estas diseñando quede muy vistosa y con apariencia profesional, como
dar color, tamaño, formato de fuente al texto, insertar imagen de fondo, aplicar
color de fondo de página, vínculos, entre otros. Para ingresar a las propiedades de
mi página web debo hacer lo siguiente:
8
Aplicar imagen de fondo
Las imágenes de fondo dan una apariencia más profesional y atractiva a tu página
Web. Para aplicar imagen de fondo realiza los siguientes pasos:
Guardar página Web
Luego de haber creado la página web, esta puede ser previsualizada en un
navegador Web. Para ello, primero debemos guardar la página Web.
Luego de guardar, puedes previsualizar tu página Web en un navegador, yendo a la opción Archivo – Vista previa en el navegador – escoge el navegador o presionando la tecla F12
9

Sesión de Dreamweaver CS6 - Colegio Miguel Ángel Buonarroti..

Transcripción

Documentos relacionados

ADOBE DREAMWEAVER CS6 (24 HORAS)

Antecedentes Personales Nombre : Mauricio Hernán Drago Torrijos