Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Diseno de Paginas Web Dreamweaver CS6
Diseno de Paginas Web Dreamweaver CS6
Web( Dreamweaver)
ii Diseño de Páginas Web (Dreamweaver CS6)
CONTENIDO
4.6 Listas. 36
5 Imágenes. 55
6 Hipervínculos. 66
9 Capas. 103
OPCIÓN 2:
1) Metacomando < Win + R >.
2) Teclea la palabra Dreamweaver.
3) Pulsa la tecla < Enter >.
Área de trabajo
Barra de herramientas
Paneles
Estado
Inspector de propiedades
TRABAJOS DE INVESTIGACIÓN
Vista Código
Vista Diseño
Multipantalla
Administración de archivos
Actualizar documento
Ayudas visuales
Validación W3C
Vista previa
Vista En vivo
Vista Dividir
Título de la página web
Herramienta seleccionar
Herramienta Zoom
Tamaño móvil
Tamaño escritorio
Selector de etiquetas
Herramienta mano
Establecer nivel de aumento
Tamaño tableta
Tamaño de ventana
Indicador de codificación
Cuadro de dirección
TRABAJOS DE INVESTIGACIÓN
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
22 Diseño de Páginas Web (Dreamweaver CS6)
2. Haz clic en un botón para seleccionar una de las opciones y haz clic en Listo.
o Nuevo. Permite crear un sitio nuevo.
o Editar. Sirve para modificar un sitio existente.
o Duplicar. Crea una copia del sitio seleccionado. La copia aparece en la
ventana de lista de sitios.
o Quitar. Elimina el sitio seleccionado; no podrá deshacer esta acción.
TRABAJOS DE INVESTIGACIÓN
1. Concepto de Servidor.
2. Función de los servidores.
3. Tipos de servidores.
4. Importancia de la estructura de un Sitio Web.
4.2 Comentarios.
4.6 Listas.
4.2 Comentarios.
Un comentario es un texto descriptivo que se inserta en el código HTML para
explicar el código o facilitar otra información. El texto del comentario aparece sólo en la
vista Código y no se muestra en los navegadores.
Para insertar comentarios al documento, realiza:
1) Sitúate en el menú Insertar Comentario.
2) O haz clic en el comando Comentario, del panel Insertar, de la categoría
Común.
En la vista Código, se inserta una etiqueta de comentario (<!-- -->) y sitúa el
punto de inserción en medio de dicha etiqueta. Ahí teclea el comentario.
4.6 Listas.
En Dreamweaver CS6, es posible insertar tres tipos de listas, que son:
Lista sin ordenar: muestra una especie de viñetas para agrupar los
diferentes elementos de la lista.
6
9
5 11
1 7
3
8
2 12
10
4
38 Diseño de Páginas Web (Dreamweaver CS6)
11
5 9
3 6
3. Una vez configuradas las anteriores opciones, haz clic en el botón Aceptar.
4. Se visualizará un cuadro de diálogo parecido al que se muestra abajo, en
donde se habrán de configurar todos las propiedades del Estilo CSS.
5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic
sobre el botón Aceptar.
5. Si se requiere crear submenús en algún menú, posiciónate al final del texto del
menú y pulsa la tecla < ENTER >; una vez que te haya creado la viñeta pulsa la
tecla < TABULADOR > (esto aplicará una sangría a la viñeta y servirá para crear
el submenú). Ejemplo:
6. Algunas veces se requiere crear otro submenú dentro del submenú del menú
principal, para ello, repite los mismo pasos pero ahora deberás dar < ENTER >
al final del texto del submenú. Ejemplo:
7. Ahora deberás colocar los hipervínculos a cada menú y submenú, para ello, en
la vista Código, teclea la etiqueta <a href="#"> antes del texto de cada menú
o submenú y al final escribe la etiqueta </a>. Ejemplo:
#header {
padding-top: 120px;
}
ul, ol {
list-style:none;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 15px;
display:block;
}
.nav li a:hover {
text-shadow: 0 0 1px brown;
background-color:#434343;
.nav > li {
float:left;
width:140px;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
text-align:left;
}
/* Mostrar submenus */
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
50 Diseño de Páginas Web (Dreamweaver CS6)
13. Las siguientes propiedades de tipo CSS te ayudarán a definir mejor las
propiedades del menú:
Definición de propiedades de tipo CSS
Font-family: Establece la familia de fuentes (o serie de familias) del estilo.
Font-size: Define el tamaño del texto.
Font-style: Especifica normal, italic u oblique como estilo de la fuente.
Line-height: Establece el alto de la línea en la que se coloca el texto
Text-decoration: Añade subrayado, sobreimpresión o tachado al texto o
hace que el texto parpadee.
Font-weight: Aplica una cantidad específica o relativa de negrita a la
fuente.
Font-variant: Establece la variante de versales en el texto.
Text-transform: Convierte en mayúscula la primera letra de cada palabra
de la selección o convierte todo en mayúsculas o minúsculas.
Color: Establece el color del texto.
Igual para todo: Establece las mismas propiedades de margen para Top,
Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e
izquierda respectivamente del elemento al que se aplica.
IMÁGENES.
5.1 Concepto de Imagen.
Una imagen es el gráfico vectorial o no vectorial, que muestra una presentación
visual de algo en formato digital.
8
5 12
4
13
10
1
7
11
3 1
2 9
6 1
TRABAJOS DE INVESTIGACIÓN
HIPERVÍNCULOS.
6.1 Concepto de Hipervínculo.
Los hipervínculos son links (vínculos) que al ser pulsados nos redirigen hacia otra
página o archivo; permitiendo conectar los diferentes elementos de una Página Web.
En Dreamweaver es posible establecer hipervínculos a cualquier elemento del
documento como puede ser: texto, imágenes, multimedia, etc.
TRABAJOS DE INVESTIGACIÓN
6
1
4
2
3 7
8
5
Para aplicar formato a las celdas, selecciona una celda, renglón o columna y
modifica las propiedades que desees.
1 6
2
7
4 5
8
3
La selección anterior indica que guardará la página principal (la llamada página
index) que es aquella que contendrá todos los marcos dentro del mismo
documento. Nota: se recomienda que se guarde con el nombre de index.html.
Una vez que se haya guardado la página principal, el mismo cuadro de diálogo
aún no se cerrará ya que tendrá seleccionado otro marco para después
guardarlo. Cuando se haya terminado de guardar todos los marcos, la ventana
Guardar como, se cerrará automáticamente.
88 Diseño de Páginas Web (Dreamweaver CS6)
1
2 4
1 1
7
3 5
6 1
1 1
1
1. Nombre de marco. Nombre utilizado por el atributo target de un vínculo o por
un script para referirse al marco
2. Orig. Especifica el documento de origen que debe mostrarse en el marco.
3. Desplaz. Especifica si aparecerán barras de desplazamiento en el marco.
4. Bordes. Muestra u oculta los bordes del marco actual al visualizarlo en un
navegador.
5. Color de borde. Establece un color de borde para todos los bordes del marco.
6. Ancho del margen. Establece el ancho de los márgenes izquierdo y derecho
en píxeles.
7. Alto de márgenes. Establece el alto de los márgenes superior e inferior en
píxeles.
TRABAJOS DE INVESTIGACIÓN
FORMULARIOS.
8.1 Concepto de Formulario.
Los formularios son los elementos que se utilizan para la recolección de datos del
usuario y se emplean muy cotidianamente para el registro de usuarios, comentarios,
inicio de sesiones, etc.
3 6
4
1 1 1
1
1
7
1 5
1
1 1
4
6
1
3
1
1
2
1
1. Ancho car. Establece el número máximo de caracteres que se puede mostrar
en el campo.
2. Car. máx. Establece el número máximo de caracteres que se puede introducir
en los campos de texto de una línea.
3. Desactivado. Desactiva el área de texto.
4. Sólo lectura. Convierte el área de texto en un área de texto de sólo lectura.
5. Tipo. Especifica si el campo es de una línea, de varias líneas o de contraseña.
- Una línea. Campo para una sola línea de texto.
- Multilínea. Campo para varias líneas de texto.
- Contraseña. Campo para sólo contraseña.
1 3
2 4
1 1
1. Nombre del botón. Asigna un nombre al botón.
2. Valor. Determina el texto que aparece dentro el botón.
3. Acción. Determina qué ocurre cuando se hace clic en el botón.
96 Diseño de Páginas Web (Dreamweaver CS6)
1
3
1
1. Valor activado. Establece el valor que debe enviarse al servidor cuando se
activa la casilla de verificación.
2. Estado inicial. Determina si la casilla de verificación está seleccionada o no
cuando el formulario se carga en el navegador.
3. Clase. Aplica reglas de Hojas de estilo en cascada (CSS) al objeto.
1 3
5
1 1
5 1
6
2
7 1
1
1
98 Diseño de Páginas Web (Dreamweaver CS6)
1
2
1
1. Campo de archivo. Especifica el nombre del objeto de campo de archivo.
2. Ancho car. Establece el número máximo de caracteres que se puede mostrar
en el campo.
3. Car. máx. Especifica el número máximo de caracteres que debe contener el
campo. Si el usuario utiliza Examinar para localizar el archivo, el nombre del
archivo y la ruta pueden superar el valor de Car. máx. Sin embargo, si el
usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo
sólo admitirá el número de caracteres especificado en el valor Car. máx.
1
1. Campo oculto. Especifica el nombre del campo.
2. Valor. Asigna un valor al campo. Este valor se transfiere al servidor cuando se
envía el formulario.
TRABAJOS DE INVESTIGACIÓN
CAPAS.
9.1 Concepto de Capa.
Las capas son recuadros que pueden colocarse en cualquier parte de la Página
Web y tener cualquier clase de contenido HTML. Las capas pueden ocultarse y solaparse
entre sí, lo que proporciona una gran ventaja para el diseño.
3
8
1 4
7 10
9
5
2
1. Elemento CSS-P. Indica el nombre de la capa, que puede ser cambiado a través
del panel Elementos PA o desde el cuadro de texto nombre de la capa.
2. Desb. Controla cómo aparecen los elementos PA en un navegador cuando el
contenido desborda el tamaño especificado del elemento PA, y puede tomar los
valores:
VISIBLE. Muestra todo el contenido de la capa, haciendo más grande la
capa.
HIDDEN. Sólo visualiza el contenido de la capa que quepa dentro de ella.
SCROLL. Muestra la barra de desplazamiento, aunque el contenido de la
capa pueda ser visualizado totalmente
AUTO. Muestra la barra de desplazamiento cuando sea necesario.
106 Diseño de Páginas Web (Dreamweaver CS6)
3. Guarda el archivo.
4. Adjunta la hoja de estilos con el documento a la que desees aplicar los estilos
creados.
5. Por último, aplica el estilo CSS a la capa deseada.
TRABAJOS DE INVESTIGACIÓN
ELEMENTOS MULTIMEDIA.
10.1 Insertar Audio.
Incorporar sonido a la Página Web no es muy recomendable, ya que en algunas
ocasiones el usuario que visita el sitio suele estar escuchando su propia música cuando
se encuentran navegando en Internet, y esto puede resultar molesto para el internauta.
Sin embargo, en Dreamweaver es posible insertar diferentes tipos de audio, como
.wav, .midi y .mp3, entre otros. Los factores que hay que tener en cuenta antes de optar
por un formato y un método para añadir sonido son: su finalidad, el tipo de usuarios a
los que está destinado, el tamaño de archivo, la calidad de sonido y las diferencias en los
navegadores.
3. Completa el resto de las opciones del cuadro de diálogo y haz clic en Aceptar.
114 Diseño de Páginas Web (Dreamweaver CS6)