Adicion de contenido a dreamweaver
-
Upload
rodrigo-perez -
Category
Documents
-
view
1.036 -
download
0
Transcript of Adicion de contenido a dreamweaver
ADICIÓN DE CONTENIDO A DREAMWEAVER CS5Por: Rodrigo Pérez
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
CARPETA RAÍZEs un folder en la computadora en donde se alojan todas las páginas y recursos del sitio web.
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.
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.
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
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
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
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
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.
TEXTO E IMÁGENES
Son elementos básicos en todo sitio. La forma en como se acomodan requiere el
uso de CSS o tablas
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
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
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.
CARACTERES ESPECIALES
Algunos de estos caracteres como: Copyright Ampersand
Se representa en HTML por nombre o un número llamado entidad
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.
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)
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.