Repaso Final Dreamweaver MTI Ma. del Rosario Agundis Laguna

PLANEACIÓN DE PROYECTO

Y DERECHOS DE AUTOR.

¿Cuál es el propósito de las encuestan para

desarrollar un proyecto en Dreamweaver?

Las encuestan brindan los elementos

necesarios para el diseño y desarrollo de un

proyecto en Dreamweaver ya que facilita

elementos como:

tipo de audiencia, objetivos, etc.

Accesibilidad de los sitios web

Los factores de accesibilidad es un factor

importante al momento de diseñar sitios

web, ya que se debe pensar en la

diversidad de usuarios que la visitarán,

entre ellos usuarios con discapacidades.

Elementos que mejoran la capacidad

de uso y navegación en sitios web

El diseño de mapas de sitio, textos

alternativos y etiquetado de vínculos son

elementos importantes que siempre se

deben de considerar al momento de

desarrollar o diseñar un sitio web.

Coherencia

El diseño de las páginas es importante ya

que este elemento mantiene la coherencia

de todo el sitio web.

Pruebas de facilidad de uso

Dos aspectos que se miden en el diseño de

sitios web son: nivel de aceptación y

satisfacción de los usuarios así como la

adaptación del usuario a la navegación del

sitio web.

Ejemplo de dos técnicas utilizadas en

las pruebas de facilidad de uso.

• Apoyo en software que registra cada una

de las tareas de los usuarios para un

análisis posterior.

• Utilizar observadores que anoten las

reacciones de los usuarios a medida que

estos realicen tareas en un laboratorio.

Aspectos de credibilidad en un

sitio web

Para que nuestro sitio web brinde

credibilidad a los usuarios se deben

mantener tres aspectos importantes como

son: la actualización del sitio a menudo,

facilitar los medios de contacto con la

empresa y la verificación de la información.

¿Qué es un guión gráfico? (bosquejo)

Es la representación gráfica de un proceso

visual deseado que en dreamweaver

contiene características como: nombre de

archivo, navegación e imágenes o dibujos.

Motivos comunes para utilizar guiones

gráficos en el diseño de sitios web.

• Medir el nivel de aceptación y satisfacción

de los usuarios.

• Adaptación del usuario a la navegación del

sitio Web.

• Aprobación del cliente previa al desarrollo.

• Indicar la colocación de los elementos en

nuestro sitio web.

Principales características de la adición

de imágenes en nuestro sitio web.

Al momento de utilizar imágenes para el

diseño y desarrollo de nuestro sitio web se

deben tener en cuenta dos características

que son: el tamaño de las imágenes y la

relevancia para nuestro sitio.

¿Qué contenido está protegido por las

leyes de copyright ©?

Las leyes de copyright (derecho de copia)

protegen todas aquellas obras tanto

publicadas como no publicadas.

¿Podemos reproducir videos con derechos de

autor en nuestro sitio web, sin autorización previa?

Existe una forma de poder utilizar este

material sin autorización previa del autor,

dicha forma es reproduciendo únicamente el

10% o tres minutos máximo del material.

Interfaz De Dreamweaver

(Espacio De Trabajo)

Un sitio web no publicado en un servidor

remoto o host. ¿se conoce como?

Sitio local o bien la carpeta que contiene

nuestro proyecto guardado en nuestro

ordenador.

Ficha común

En esta ficha contamos con elementos para

inserción cómo: hipervínculo, anclaje, tabla,

imágenes, barra de navegación, etc.

Panel de archivos

Este panel nos ofrece permite ver el mapa

del desarrollo de nuestro sitio local y

remoto. También nos ofrece opciones como:

conectar al servidor remoto, actualizar,

obtener archivos, proteger archivos,

desproteger, sincronizar, expandir, vista

local, organizar archivos en carpetas, etc.

Comando o función “Sincronizar el sitio”

Este comando nos permite descargar los

archivos de nuestro servidor remoto al local

y viceversa.

Películas, Archivos .swf, plantillas, colores, URL,

Shockwave, biblioteca, etc. Son elementos que se

encuentran en:

Este conjunto de elementos se encuentran

en el panel de “Activos”

¿Qué característica tiene la

carpeta raíz?

Esta carpeta aloja el contenido de nuestro

sitio web en nuestro equipo

¿Qué características tiene una carpeta

remota?

Esta otra carpeta aloja el contenido de

nuestro sitio web en el servidor, conocido

también como (host)

Definición de sitios

Esta opción le permite crear y configurar

sitios locales y remotos por medio de dos

fichas de opciones “básicas y avanzadas”.

Proteger

Esta función le permite que sus archivos

puedan ser editados únicamente por el

propietario.

Desproteger

Al contrario de “proteger” esta opción

permite compartir y editar el archivo

seleccionado por más de un integrante de

su equipo de trabajo.

¿Cómo cerrar una conexión remota?

Si usted está utilizando una conexión

remota por medio de Dreamweaver vía

(FTP) y desea cerrar la conexión, utilice el

panel de archivos y haga click en el ícono

“Desconectar del servidor remoto”

Inspector o panel de propiedades

Este panel le permite modificar propiedades

del documento y de objetos insertados en el

mismo, en este panel encontrara algunas

opciones como: » Formato

» Clases

» Vínculos

» Título

» Destino

» Propiedades de página

» CSS

» HTML

» ID

Color de fondo (background)

El procedimiento estándar para poder

cambiar las propiedades de esta opción

como el color hexadecimal es el siguiente:

Menú> Modificar> Propiedades de la página

o documento>. El uso de background

también permite utilizar imágenes en

formatos GIF, JPEG y PNG.

Color Hexadecimal

Son colores sólidos compuestos por

caracteres alfanuméricos por ejemplo: color

negro (#000000), color rojo (#FF0000), etc.

Fuentes (tipografía)

Drreamweaver incluye ciertas fuentes como

predeterminadas por ejemplo. Arial,

verdana, Georgia, sans-serif, Times new

roman, etc.

Uso de fuentes (Tipografía)

Se recomienda el uso de las fuentes

predeterminadas en el diseño de sitios web,

ya que si se utiliza otro tipo de fuente puede

ser mal interpretada o sustituida por una

computadora que no cuente con dicha

fuente instalada. Esto puede afectar al

diseño de sitios web.

Título de página

Existen tres métodos para modificar el título

de la página web que se esta diseñando y

son los siguientes:

1. Menú> Modificar> Propiedades de la página

2. Identificar en la interfaz la parte denominada “Título”

3. Menú> Ver> Código y cambiar el nombre que se

encuentra entre las etiquetas <title>Documento sin

título</title>

Vista “Código”

Esta vista le permite ver el código HTML

que se esta empleando, así como editar la

información de fuente creada por programas

de diseño como (flash) y páginas web de

terceros.

PROCEDIMIENTOS,

COMPONENTES Y FUNCIONES

Imagen de sustitución

Este elemento está compuesto por dos

imágenes, la original y la de sustitución.

Normalmente se utiliza en la creación de

botones.

Optimización y descarga

Métodos para facilitar la velocidad de

descarga de su sitio web

Es importante que nuestro sitio web

descargue imágenes y contenidos de una

forma rápida, para lograr esto se

recomienda tomar en cuenta los siguientes

métodos:

• Hojas de estilo en cascada en el diseño de páginas

• Uso de miniaturas con las imágenes grandes

Optimizar imágenes para su

sitio

El mayor beneficio que se obtiene al

optimizar las imágenes de su sitio web es

“Menor tiempo de descarga”

Elementos de permanencia en todo el

diseño del sitio web

• Diseño de páginas

• Formato de las fuentes

• Botones de navegación

¿Cuántos colores existen en la paleta

de colores?

256 colores

¿Cuántos colores son conocidos como

seguros de la paleta de colores?

216 colores

¿Cuántos colores son reconocidos por los

exploradores de internet?

16 colores

¿Qué elementos cambian al momento de ser visualizados

por diferentes monitores y exploradores web?

Los colores

Ventaja de utilizar etiquetas “div”

Una de las ventajas al momento de utilizar

este tipo de etiquetas en nuestro diseño

web es para los programadores, ya que

facilita la codificación.

Procedimiento para establecer iluminación o

brillo a imágenes en Dreamweaver

Menú> Modificar> Imagen> Brillo/Contraste

Tipo de archivos permitidos para

importar en Dreamweaver

• XML (Xtensible Markup Language (lenguaje

de marcado ampliable o extensible).

• Datos de tabla

• Documento de Word (.doc), (.docx)

• Documento de Excel (.xls), (.xlsx)

Tabla

Este elemento le ayuda a mantener el

diseño de su página o sitio web

¿Cómo agregar textos alternativos?

En el panel o inspector de propiedades

encontraremos un elemento denominado

“Alt” con una casilla para insertar el nombre.

Otra forma es por método de Menú>

Insertar> Objetos de imagen> Marcados de

posición de imagen.

Editar imágenes JPG, PNG, etc.

El método para editar desde Dreamweaver

una imagen es por medio de la Tecla

Control+doble click sobre la imagen. Esta

acción abrirá paralelamente el programa

que usted tenga como predeterminado para

edición de imágenes por ejemplo: Fireworks

o Photoshop.

Eliminar una fila de tabla seleccionada

por método abreviado.

Para eliminar la fila seleccionada presione

las teclas CONTROL+SHIFT+M

Modo de tabla expandida

Procedimiento 1: haga click con el botón

secundario del mouse sobre la tabla,

seleccione la opción “Tabla” y a

continuación “Modo de tablas expandidas”.

Procedimiento 2: Presione las teclas

“ALT+F6”.

Eliminar objetos localmente

Al eliminar un objeto de su carpeta local

como: imagen. JPG, no se aplica el mismo

cambio en su carpeta remota hasta que

usted ejecute la sincronización del sitio.

Mapa de imagen

Esta herramienta sirve para crear “zonas

activas” en partes de la imagen para ser

vinculadas al destino deseado. Se

encuentra en el panel o inspector de

propiedades de forma rectangular, circular o

poligonal.

Perfilar imagen

Esta herramienta incrementa el contraste

alrededor de los bordes de la imagen, para

ejecutar este procedimiento seleccione la

imagen, haga click en el menú> “Modificar>

Imagen> Perfilar y agregue el valor

deseado.

Insertar

Existen dos formatos de archivo que no se

pueden insertar en Dreamweaver ya que

son archivos fuente y sus extensiones son

las siguientes:

.fla ( flash document)

.PSD (photoshop document).

Crear un hipervínculo a texto por

selección

Seleccionar con el cursor el texto o parte del

texto que contendrá el hipervínculo, a

continuación en el panel o inspector de

propiedades agregar la dirección URL o

archivo de destino por medio de la opción

Vínculo.

Opción verificar vínculos

Dreamweaver le ofrece la opción de verificar

todos los vínculos que contiene el diseño de

su sitio web, con el propósito de ayudarle a

no tener vínculos rotos.

Procedimiento 1: Menú> Sitio> Comprobar vínculos en

todo el sitio.

Procedimiento 2. Presionar la tecla F8

Panel de referencia

Este panel ofrece ejemplo en lenguajes de

marcado, programación, estilos CSS como:

html, xml,jsp, php, sql, xslt, etc.

Complementos de página

Estos elementos permiten insertar en su

sitio web applets, plug-ins, videos flv, o por

ejemplo ambientes o loops en formato mp3.

Que objeto o propiedad interpretan los

lectores de pantalla o exploradores.

Los textos alternativos

Herramienta “Párrafo o Formato”

Esta herramienta permite establecer

diferentes formatos de párrafo a los textos y

se encuentra en el panel o inspector de

propiedades > Formato> Encabezado

1,2,3,4,5,6, etc.

Énfasis a una cita de bloque

Para dar un mayor énfasis o importancia a

una cita se utilizan estilos por ejemplo:

negritas, cursivas, subrayado, énfasis,

destacado, código, etc.

Procedimiento: seleccionar el texto o cita y hacer

click con el botón secundario del mouse para

posteriormente seleccionar la opción de “Estilo”.

Comando Ortografía

Este comando le permite funciones como:

omitir palabra, cambiar palabra, cambiar

todas las ocurrencias de palabra, etc. Para

activar esta función existen dos

procedimientos:

1. Menú> Comandos> Ortografía

2. Teclas MAYÚSCULAS+F7

Estilos CSS

Los elementos CSS le proporcionan algunas

ventajas como el modificar colores de fondo,

texto e imágenes entre otros para facilitar el

diseño de sitios web que requieran cambios

por temporadas es decir (primavera, otoño e

invierno).

Lectores de pantalla

Los lectores de pantalla o buscadores

interpretan tres tipos de contenido:

• Títulos de página

• Cuerpo de texto de página

• Encabezado de columnas

Espacio de celdas

Para agregar espacio entre celdas definido

por el usuario, seleccione la tabla, vaya al

panel o inspector de propiedades y el la

opción de “Esp. Celda” coloque el valor de

10 px, o el que deseé.

Plantillas

Las plantillas facilitan el diseño de sitios web

que requieren de elementos que se utilizan

más de una vez

Insertar animaciones flash (.swf)

Insertar animaciones flash (.swf)

Ruta Absoluta

Esta ruta contiene una dirección de internet

completa por ejemplo:

http://www.macromedia.com/

Ruta completa

Contiene la ruta completa del sitio local al

de destino por ejemplo:

http://www.macromedia.com/support/dream

weaver/contents.html

Ruta Relativa a la raíz del sitio

Especifica la ruta de los archivos con

ubicaciones de directorio idénticas por

ejemplo:

/Imágenes/background/fondo_1.jpg

Atributos de “div”

Tres atributos de etiquetas div son:

• ID

• Style

• class

CÓDIGO HTML

Etiqueta “Table”

Se utiliza alternativamente a la

etiqueta “div” para organizar el

contenido del sitio web.

Etiquetas que requieren de valores de

atributos definidos

<body bgcolor=""> y <body background="">

Snippets o fragmentos

Esta opción le permite crear código

HTML y guardarlo para emplearlo

varias veces.

Etiqueta HREF<mailto>

Esta etiqueta le permite crear un vínculo de

correo electrónico mediante código HTML,

otra opción es por medio del Menú>

Insertar> Vínculo de correo electrónico.

Etiqueta <align>

Esta etiqueta se utiliza para la alineación de

textos y objetos en dreamweaver.

Etiqueta <h1>

Se utiliza para cambiar textos de

encabezado.

Etiquetas <h1> y <HTML>

Son etiquetas que no requieren de

valores o atributos definidos

Etiqueta <td>

Representa una celda de tabla.

Etiqueta <div>

Se utiliza como alternativa a las tablas para

organizar el contenido.

Etiqueta <tittle>

Contiene el título de la página web

Etiqueta <p>

Párrafo

Etiqueta <ol>

Lista

Etiqueta <li>

Elemento de lista

Etiqueta <head>

Define la cabecera del documento, que

contiene información sobre el documento

Etiqueta <body>

contiene el cuerpo del documento, lo que

será representado por el navegador.

Etiqueta <EM>

Significa énfasis

Etiqueta <strong>

Énfasis fuerte

Etiqueta <A>

ANCHOR ancla o hipervínculo , puede ser

el origen o el destino del hipervínculo.

Etiqueta <link>

Vincular a objeto

Etiqueta <br>

Salto de línea

Etiqueta <tr>

Fila de tabla

Etiqueta <th>

Encabezado de tabla

Etiqueta <style>

Información de estilo

Etiqueta <ul>

Lista no ordenada

Etiquetas siempre presentes en

HTML

<body>, <head> y <HTML>

Selector de etiquetas

Esta opción le permite insertar una variedad

de etiquetas de código HTML como: b, em,

p, h1, etc.

Procedimiento: Menú>Insertar> Etiquetas