Download Diapositiva 1 - Computacionguillermo

Creación de una pagina Web en dream weaber
Alumno : Kevin Guillermo silva caro
Tema : taller de office
Profesor : víctor
Índice:
conceptos básicos:
.Que es el dreamweaver?
.Como guardar un documento
Conceptos del tema:
.como editar paginas Web
.Las barras
.Inspectores y paneles
.vista de un documento
.Crear o editar paginas Web sin conexión a Internet
.Abrir un sitio Web
.Ver un sitio Web
.Subir archivos al servidor
.Propiedades de un documento
.Tablas
.Hiperenlaces
.imagenes
Concepto básicos
• Que es el dreamweaver?
• Dreamweaver CS5 es un software fácil de usar que permite crear páginas
web profesionales.
• Las funciones de edición visual de Dreamweaver CS5 permiten agregar
rápidamente diseño y funcionalidad a las páginas, sin la necesidad de
programar manualmente el código HTML.
• Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
• Como guardar un documento?
Para guardar un documento, puedes utilizar cualquiera de las siguientes
operaciones.
• Hacer clic en el botón Guardar de la barra de herramientas estándar.
• Pulsar la combinación de teclas Ctrl + S.
• Hacer clic sobre el menú Archivo y elegir la opción Guardar.
• Dreamweaver incluye la posibilidad de, en el caso de estar trabajando
simultáneamente con varios documentos, poder guardar todos de golpe, sin
la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar
cualquiera de las siguientes operaciones.
• Hacer clic en el botón Guardar todo de la Barra de herramientas
estándar.
• Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Conceptos del tema
•
•
Editar paginas Web
Concepto:
•
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario
crear los documentos con la extensión HTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso el Bloc de
notas incluido en Windows para hacerlo.
Para poder poner una página web en Internet, es necesario contratar a alguna
empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24
horas del día. El precio por disponer de espacio propio en el servidor dependerá de
la empresa, del espacio en disco, volumen de transferencia y otras opciones que
podamos contratar.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo
utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar
cada uno de los elementos de la página, al mismo tiempo que es más complicado
crear una apariencia profesional para la página, sobre todo si no estamos
demasiado familiarizados con el HTML. Aunque también es cierto que escribir el
código nos da más control sobre él, y sobre todo al principio, nos ayudará a
aprenderlo rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más
utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye,
es Adobe Dreamweaver.
•
•
•
•
• Entorno de dreamweaver
• Al arrancar Dreamweaver aparece una pantalla inicial como
ésta, vamos a ver sus componentes fundamentales. Así
conoceremos los nombres de los diferentes elementos y será
más fácil entender el resto del curso. La pantalla que se
muestra a continuación (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qué elementos
quiere que se vean en cada momento y dónde, como veremos
más adelante.
• Las barras
•
La barra de la aplicación:
•
La barra la aplicación se incorporó en la versión anterior
de Dreamweaver. Si tenemos la ventana maximizada
veremos todos los elementos de la barra ocupando una
sola línea, si no, ocuparán dos líneas, como en la
imagen superior.
Esta barra contiene los siguientes elementos: los
menús (en la imagen, en la parte inferior),
varios botones propios de la aplicación,
el conmutador de espacio de trabajo yuna caja de
•
búsquedas para obtener ayuda on line
.
•
La barra de estado.
•
Esta barra la encontramos debajo de la ventana
de documento, y nos da información sobre el
mismo.
A la izquierda, encontramos el selector de
etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha
encontramos las herramientas de Selección,
Mano (para desplazarse) y Zoom. Y otros datos
como el tamaño de la ventana, el tamaño de la
página o su codificación.
•
•
•
La barra de herramientas estándar.
•
la barra de herramientas
estándar contiene iconos para realizar las
acciones más habituales del
menú Archivo y Edición. De izquierda a
derecha: Nuevo archivo, Abrir, explorar
con Adobe Bridge, Guardar, Guardar
todo, Imprimir el código fuente, Cortar,
Copiar, Pegar, Deshacer y Rehacer. Esta
barra puede ser muy útil, pero en realidad
casi todo el mundo usa esos comandos
directamente con el teclado (Ctrl + G para
guardar, Ctrl + C para copiar, etc
•
La barra de herramientas de
documento.
•
La contiene iconos que nos permiten
cambiar entre las distintas vistas de
edición y la vista en vivo, acceder
cómodamente al título de la página, o
realizar las distintas opciones de
validación que nos ofrece el programa.
•
•
La barra de representación de estilos.
•
Esta barra, menos utilizada, nos permite
ver la apariencia de nuestra web en
distintos dispositivos, si estamos
utilizando hojas distintas que dependan
del eso. En esta nueva versión se han
añadido más opciones, como las de ver
los estilos que dependen de pseudo
clases activas, como cuando el cursor
está sobre un elemento.
•
La barra de navegación con
navegador.
•
Esta barra nos permite usar
Dreamweaver como un navegador web y
navegar por las páginas de nuestro sitio,
aunque sólo tiene sentido con la Vista en
vivo, como ya veremos.
Como también veremos al personalizar el
entorno, algunos paneles,
como Insertar nos permiten colocarlo
como otra barra de herramientas.
•
•
Inspectores y paneles
•
Inspector de propiedades
•
El inspector de Propiedades muestra las
opciones propias del objeto o texto
seleccionado, permitiéndonos editarlas, por lo
que se convierte en uno de los elementos más
utilizados en Dreamweaver. Por ejemplo,
cuando el elemento seleccionado sea una
imagen, mostrará su ubicación, dimensiones,
peso, clase, etc...
Este panel puede mostrar dos tipos de
propiedades, HTML y CSS, que podemos
aplicar a los diferentes elementos de la página
Web que estemos diseñando.
•
•
El panel Insertar.
•
En el panel Insertar, encontramos todos los
elementos que podemos encontrar en el
menú Insertar, clasificados en
categorías. Podemos emplearlo para insertar
imágenes, enlaces, multimedia, tablas,
formularios... cualquier elemento que nuestra
web necesite.
Como vemos en las imágenes, es posible
configurar este panel para verlo como menú,
como panel flotante o como una barra de
herramientas integrada en la ventana de
trabajo.
Personalizar el área de trabajo es bastante
intuitivo, pero si necesitas ayuda, te
recomendamos este avanzado .
•
•
• Vistas de un documento
• la vista Diseño :permite
trabajar con el editor
visual.
• La vista Código :La vista
Código se utiliza para
poder trabajar en un
entorno totalmente de
programación, de código
fuente. No permite tener
directamente una
referencia visual de cómo
va quedando el documento
según se va modificando el
código.
•
•
•
La vista Dividir :
La vista Dividir permite dividir la ventana
en dos zonas: Código y Diseño. La zona
izquierda muestra el código fuente, y la
derecha el editor visual. Cuando se
realiza un cambio en alguna de las
zonas, este cambio se aplica
directamente sobre la otra.
•
•
La Vista en vivo :
La vista en Vivo es una mejora reciente
de Dreamweaver. Nos ofrece una vista
del resultado final no editable. A
diferencia de la vista Diseño, que nos
permite editar los elementos, esta vista
nos permite interactuar con ellos, tal
como lo haríamos con el navegador.
La función de esta vista es la de
ahorrarnos tiempo, al no tener que
comprobar que pequeños cambios se
previsualizan correctamente en el
navegador.
•
•
•
La vista Código en vivo :
Esta vista se emplea conjuntamente con
la Vista en vivo. Divide la pantalla como la
vista Dividir, pero sin que podamos editar
el código. Lo que hace es que al
seleccionar partes de la web en la Vista
en vivo, se seleccione su correspondiente
código fuente.
Configuración de un sitio local
•
•
•
•
•
•
•
Crear o editar un sitio Web sin conexión a
Internet:
Una vez creadas las carpetas que
formarán la estructura del sitio local, o por
lo menos la carpeta raíz, ya es posible
definir el nuevo sitio.
Para ello hay que dirigirse al menú Sitio,
a la opción Administrar sitios... o
directamente a Nuevo sitio.
Recuerda que a través del
panel Archivos, se puede cambiar a
cada uno de los sitios definidos.
También podemos acceder desde el
icono de acceso rápido de la barra de la
aplicación a la opción Administrar
sitios o Nuevo sitio...
En el caso de haber seleccionado la
opción Administrar sitios, aparece una
ventana que contiene la lista de sitios
locales definidos
Por supuesto, pueden existir varios sitios
locales en un mismo ordenador.
propiedades y formato
•
•
•
Características del texto:
Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a
través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través
del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.
Comenzamos viendo las propiedades HTML:
•
Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o formato predeterminado.
•
Estilo: El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se
muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a
través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel
de Propiedades ya que de normal nosuele utilizarse, debido a que los vínculos aparecen
subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo
•
Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las
listas en el siguiente apartado.
•
•
•
Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una
especie de margen que
se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la
izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que
por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,
creará una sublista dentro de ésta.
Hiperenlaces
•
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.
•
Referencia absoluta:
•
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa
del archivo, incluyendo el protocolo http://.
Por ejemplo, http://www. aulaclic .com,
o http://www.misitio.com/seccion2/pagina1.html.
La referencia absoluta es independiente de la ubicación de la página que
contiene el enlace, y será válida siempre que no cambie la ubicación del archivo
enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de
nuestro sitio (enlaces externos).
•
•
•
•
•
•
Referencia relativa al documento :
La ubicación del archivo enlazado se toma en relación con la ubicación del la
página. Es decir, partimos de la carpeta en la que se encuentra el documento.
Si queremos enlazar con una página o archivo dentro de la misma carpeta, no
tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.
Si está en una subcarpeta de la página actual, no tenemos más que indicar el
nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por
ejemploimagenes/miimagen.gif.
Imágenes
•
Insertar una imagen: Para insertar una imagen hay
que dirigirse al menú Insertar, a la opción Imagen.
Después de esto, ya es posible seleccionar una
imagen a través de la nueva ventana. Cuando te
acostumbres, te será más cómodo acceder con la
combinación de teclas Ctrl + Alt + I.
•
•
Propiedades de una imagen
Ancho y Alto son las dimensiones de la imagen.
Dreamweaver las pondrá directamente.
•
Como pasaba con el texto, podemos crear un
hiperenlace en la imagen escribiendo la dirección en
el campo Vínculo, y decidir en qué ventana se abre
con el campo Destino. Podemos hacer que cada
zona de la imagen tenga un vínculo distinto, creando
un Mapa de imagen
•
n el campo Alt escribimos el texto que remplazará
a la imagen si ésta no puede mostrarse. Es un
atributo muy importante que deberíamos incluir
siempre para hacer páginas accesibles. Por ejemplo,
el texto que se escribe será leído por los programas
lectores para invidentes. Si lo que queremos es
mostrar un ayuda contextual cuando el usuario tenga
el cursor sobre la imagen, debemos de empelar el
atributo title.
•
En Clase podrás asignarle un estilo que hayas
creado anteriormente, así podrás darle alineación,
bordes e incluso tamaño con sólo un clic.
•
Cambiar el tamaño de una imagen: Por un lado, podemos cambiar el tamaño con
el que se ve una imagen, pero dicho cambio de tamaño no se aplica
directamente sobre el archivo de imagen, que conservará el tamaño original.
•
Es muy probable que la imagen resultante no sea de buena calidad, en
comparación de cómo podría quedar modificándola desde un editor externo,
como Fireworks, Photoshop, etc..
•
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa
el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:
•
•
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 Ancho o Alto. 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.
Tablas
•
Insertar una 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 elAncho 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 de la página
o del elemento contenedor) 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). Si lo ponemos a 0 o en blanco, la tabla no
mostrará borde.
Relleno de celda (cellpadding) indica la
distancia entre el contenido de las celdas y los
bordes de éstas.
Espacio entre celdas (cellspacing) indica la
distancia entre las celdas de la tabla.
•
•
• Seleccionar elementos de una
tabla:
• Existen varias formas
de seleccionar una tabla. Una de
ellas es a través del
menú Modificar estando el punto
de inserción en la tabla, o
desplegando el menú
contextual de la tabla al pulsar
con el botón derecho sobre ella.
En ambos casos aparece la
opción Tabla, a través de la cual
se puede elegir la
opción Seleccionar tabla.
• También es posible seleccionar
una pulsando con el ratón sobre
el borde exterior que la rodea, o
pulsando <table> que aparece en
la barra de estado de la ventana
de documento.
Bibliografía:
• http://www.aulaclic.es
• http://dreamweaver-cs3.blogspot.com/