Adicion de contenido a dreamweaver

28
ADICIÓN DE CONTENIDO A DREAMWEAVER CS5 Por: Rodrigo Pérez

Transcript of Adicion de contenido a dreamweaver

Page 1: Adicion de contenido a dreamweaver

ADICIÓN DE CONTENIDO A DREAMWEAVER CS5Por: Rodrigo Pérez

Page 2: Adicion de contenido a dreamweaver

SITIO DE DREAMWEAVER

Es un conjunto de archivos y activos Se pueden crear las paginas Cargarlas a un servidor Mantener el sitio actualizando archivos y

transfiriéndolos al servidor. Se pueden mantener y editar sitios que no

creados con Dreamweaver

Page 3: Adicion de contenido a dreamweaver

CARPETA RAÍZEs un folder en la computadora en donde se alojan todas las páginas y recursos del sitio web.

Page 4: Adicion de contenido a dreamweaver

CREANDO UNA PÁGINA WEB

Dreamweaver proporciona opciones para crear un documento Nuevo Documento en blanco Diseño predeterminado Plantilla preexistente

Los páginas web se guardan con la extensión HTML (Archivos de lenguaje de hipertexto)

Los archivos HTML se guardan en un lenguaje basado en etiquetas que muestran la página a través del navegador.

Page 5: Adicion de contenido a dreamweaver

OTROS TIPOS DE ARCHIVOS

Tipo Descripción Extensión Uso

CSS Hoja de estilos en cascada

.CSS Aplicar formato al contenido HTML y controlar posición

de varios elementos en la

página

XML Lenguaje de formato

ampliable

.xml Contiene datos en formato original

XSL Lenguaje de hoja de estilos

ampliable

.xls Aplican formato a los datos XML que

se muestran en una página web.

Page 6: Adicion de contenido a dreamweaver

OTROS TIPOS DE ARCHIVOS

Tipo Descripción Extensión Uso

CFML Lenguaje de formato

ColdFusion

.cfm

páginas dinámicas

PHP Preprocesador de

hipertexto

.php

JS Javascript .js

ASP Paginas de servidor activas

.asp

Page 7: Adicion de contenido a dreamweaver

NOMBRANDO ARCHIVOS

Un buen nombre: facilita el desarrollo de un sitio, especialmente al

trabajar en equipo. Ayuda a los visitantes a encontrar archivos del

sitio. Aplique los siguientes consejos para todos los

archivos que utilice en la web

Page 8: Adicion de contenido a dreamweaver

NOMBRES DE ARCHIVO APROPIADOS

Nombre únicos con significado No repita nombres Indique el contenido del archivo en el nombre

Nombre de carpetas, con significado Use nombres que ayuden a organizar y localizar

el contenido. Utilice letras minúsculas siempre

Mezclar mayúsculas con minúsculas aumente en riesgo de links rotos.

Algunos servidores son sensibles en este detalle

Page 9: Adicion de contenido a dreamweaver

NOMBRES DE ARCHIVO APROPIADOS

Sea consistente en el uso de extensiones Use extensiones comunes para todo su sitio. El usar extensiones diferentes incrementa el

riesgo de links rotos. No olvide incluir las extensiones en

Macintosh Aunque mac no requiere extensiones, las

navegadores la necesitan para desplegar páginas correctamente.

Utilice guión medio o bajo en lugar de espacios Algunos navegadores no reconocen espacios en

blanco

Page 10: Adicion de contenido a dreamweaver

NOMBRES DE ARCHIVO APROPIADOS

Utilice solo letras y números Muchos símbolos especiales no son reconocidos

En lo posible mantenga los nombres cortos Algunos navegadores limitan a 25 caracteres

para nombres de archivo.

Page 11: Adicion de contenido a dreamweaver

TEXTO E IMÁGENES

Son elementos básicos en todo sitio. La forma en como se acomodan requiere el

uso de CSS o tablas

Page 12: Adicion de contenido a dreamweaver

APLICANDO FORMATO BÁSICO A TEXTO Y PÁRRAFOS

Se puede hacer de dos formas: Desde la categoría texto, panel insertar Desde el inspector de propiedades

Page 13: Adicion de contenido a dreamweaver

OPCIONES DEL INSPECTOR DE PROPIEDADES

Opción Función o propósito

Formato Establece el estilo de párrafo del texto seleccionado

ID Asigna una ID al texto seleccionado

Clase Muestra el estilo de clase CSS que se aplica al texto

Negrita Aplica <b></b> o <strong> </strong> al texto

Cursiva o Itálica

Aplica <i></i> <em></em> al texto

Lista sin ordenar

Crea una lista con viñetas

Lista ordenada

Crea una lista numerada

Blockquote Inserta sangría

Quitar Blockquote

Anula sangría

Vinculo Crea un link

Page 14: Adicion de contenido a dreamweaver

OPCIONES DEL PANEL INSERTAR

Opción Función o propósito

B Aplica formato negrita

I Aplica formato cursiva

S Aplica el formato destacado

¶ Aplica el formato párrafo al texto seleccionado

“” Aplica el formato comillas en versalita

PRE Aplica texto con formato predeterminado

H1, h2, h3 Aplica formatos de encabezados

Ul, ol, li Aplica listas ordenadas y no ordenadas

Dl, dt, dd Aplica formatos de lista de definición

Abbr. Marca abreviaturas de un texto y proporciona su significado

W3c Marca las siglas de un texto y proporciona su significado.

Page 15: Adicion de contenido a dreamweaver

CARACTERES ESPECIALES

Algunos de estos caracteres como: Copyright Ampersand

Se representa en HTML por nombre o un número llamado entidad

Page 16: Adicion de contenido a dreamweaver

IMPORTANDO DOCUMENTOS DE OFFICE

Se pueden insertar documentos de Word y Excel en una página web

DW recibe el HTML convertido y lo inserta en la página.

Las opciones del formato en que se inserta el documento son: Solo texto (ningún formato) Estructura

Se conservan párrafos, listas y tablas pero sin formato Estructura y formato básico

Se conservan párrafos y tablas y texto formateado con b, i, u y strong.

Estructura y formato completo (HTML y CSS) Limpiar espaciado de párrafo de Word

Limpia espacios adicionales entre párrafos al pegar el texto.

Page 17: Adicion de contenido a dreamweaver

MODIFICANDO EL TAMAÑO DE LAS IMAGEN

Al modificar el tamaño, la calidad puede reducirse

Lo más adecuado es cambiar el tamaño desde un editor (Fireworks)

Page 18: Adicion de contenido a dreamweaver

PRINCIPALES PROPIEDADES DE UNA IMAGEN

ID Nombre de identificación

Alt descripción de la imagen para que un lector la

pueda leer. Vínculo

Liga de la imagen hacia un sitio web.

Page 19: Adicion de contenido a dreamweaver

FUNCIONES BÁSICAS DE EDICIÓN DE IMÁGENES

Sin tener que recurrir a un programa externo se pueden usar las siguientes funciones: Volver a muestrear

Añade o quita pixeles en imágenes a las que se les cambio el tamaño, esto es útil para mejorar el tiempo de descarga y reducir el tamaño del archivo.

Recorte Reduce el área de las imágenes

Brillo y contraste Se utiliza para corregir imágenes demasiado claras u

obscuras. Perfilar

Ajusta el enfoque y aumenta el contraste en los bordes dentro de la imagen

Page 20: Adicion de contenido a dreamweaver

MARCADOR DE POSICIÓN DE IMÁGENES Es un gráfico que se usa para simular el espacio que

ocupará la imagen definitiva cuando se incorpore a la página web.

Son útiles por dos razones: En la etapa de maquetación Para avanzar en el desarrollo en lo que el material

gráfico está disponible. Las propiedades de un marcador son:

Nombre: el que aparece como etiqueta Altura y anchura. Color: color de relleno del marcador Texto Alternativo: texto que describe la imagen para un

navegador de solo texto o lectores de pantalla. Cuando esté listo para agregar la imagen haga

doble clic sobre el marcador y seleccione la imagen.

Page 21: Adicion de contenido a dreamweaver

CREANDO VÍNCULOS (TIPOS)

Interno: va hacia la página dentro el mismo sitio y puede ser: Relativa al documento Relativa a la raíz del sitio

Externo: va hacia otro sitio y se representa como ruta

absoluta Anclaje con nombre

Va a una posición específica dentro de la misma página.

Correo electrónico Se abre un nuevo mensaje de correo en el

programa predeterminado.

Page 22: Adicion de contenido a dreamweaver

INSERTANDO CONTENIDO MULTIMEDIA Se pueden añadir películas creadas con

Adobe Flash (SWF) Contienen animaciones y contenido interactivo

Flash Video (FLV) Incorpora video de diversas fuentes

Los videos flash añaden interactividad al sitio. El comando Insertar FLV crea los siguientes archivos:

Un archivo SWF de reproductor de video Un archivo SWF de aspecto para mostrar el video en una

página web. Un archivo main.asc que debe cargarse en Flash Media

Server Los archivos anteriores se deben cargar en el mismo

directorio que el archivo HTML al que se le esta añadiendo el video.

No olvide cargar estos archivos en el servidor web.

Page 23: Adicion de contenido a dreamweaver

INSERTANDO MAPAS DE IMÁGENES

Una mapa es una imagen que ha sido dividida en regiones o zonas interactivas

Cuando se hace clic sobre una zona interactiva, sucede una acción, como: activar un vínculo.

Existen tres tipos de zonas interactivas Rectangular Circular Poligonal

Define una zona irregular dando clic en las esquinas del la imagen hasta cerrar la forma.

Page 24: Adicion de contenido a dreamweaver

IMAGEN DE SUSTITUCIÓN

Es una imagen que cambia cuando el puntero pasa sobre ella.

Se requieren dos imágenes para crearla La principal: que se carga al iniciar la página La secundaria: que aparece al pasar el puntero

sobre ella. Las dos imágenes deben ser del mismo

tamaño, sino dreamweaver ajusta el tamaño de la segunda para ajustarla a la primera.

Page 25: Adicion de contenido a dreamweaver

TRABAJANDO CON TABLAS

Se usan las tablas para crear y dar formato a los datos.

Su objetivo principal presentar la información en filas y columnas.

Se pueden utilizar en la maquetación para establecer el diseño de imágenes y texto.

El uso de encabezados en tablas mejora la accesibilidad del sitio, ya que ayudan a los lectores a mantener un seguimiento de la información en la tabla.

Es posible importar una tabla de Excel o archivos de base de datos.

Page 26: Adicion de contenido a dreamweaver

FORMULARIOS

Se pueden utilizar para interactuar, enviar u obtener información cuando un visitante se encuentra en nuestro sitio.

Algunos ejemplos son: Formas de contacto Libro de visitantes Encuestas Órdenes de compra

Cuando el visitante introduce información en un formulario y hace clic en el botón de envío, la información se transfiere a un servidor, donde es procesada por una aplicación.

Page 27: Adicion de contenido a dreamweaver

ELEMENTOS QUE PUEDE CONTENER UN FORMULARIO Campo de texto

Acepta un valor alfanumérico y provee un espacio donde el usuario puede introducir texto.

Existe tres tipos: Una línea: para respuestas cortas Varias líneas: para respuestas largas Contraseña: aparecen asteriscos en vez de letras.

Campo de archivo Permite al visitante seleccionar un archivo y subirlo al

servidor web. Casillas de verificación

Permite al visitante marcar una sola opción o escoger una o más opciones de un grupo de casillas.

Botón de opción Permite al visitante escoger opciones que se excluyen

mutuamente. Es decir solo una de las opciones queda seleccionada.

Page 28: Adicion de contenido a dreamweaver

Lista/Menú Permite al visitante seleccionar varias opciones

de un lista. Se utiliza para mostrar muchos elementos en

poco espacio. Botones

Realizan acciones cuando se hace clic sobre ellos. Menú de Salto

Es una lista que permite que las opciones se vinculen a otro documento o archivo.

Actúa como navegación del sitio No debe mezclarse con otros elementos del

formulario.