Documente Academic
Documente Profesional
Documente Cultură
Web( Dreamweaver)
ii Diseo de Pginas Web (Dreamweaver CS6)
CONTENIDO
1.1. Qu es Dreamweaver? 2
4.6 Listas. 36
5 Imgenes. 55
6 Hipervnculos. 66
9 Capas. 103
1.1 Qu es Dreamweaver?
OPCIN 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 INVESTIGACIN
Vista Cdigo
Vista Diseo
Multipantalla
Administracin de archivos
Actualizar documento
Ayudas visuales
Validacin W3C
Vista previa
Vista En vivo
Vista Dividir
Ttulo de la pgina web
Herramienta seleccionar
Herramienta Zoom
Tamao mvil
Tamao escritorio
Selector de etiquetas
Herramienta mano
Establecer nivel de aumento
Tamao tableta
Tamao de ventana
Indicador de codificacin
Cuadro de direccin
TRABAJOS DE INVESTIGACIN
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
22 Diseo de Pginas Web (Dreamweaver CS6)
2. Haz clic en un botn 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 accin.
TRABAJOS DE INVESTIGACIN
1. Concepto de Servidor.
2. Funcin 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 cdigo HTML para
explicar el cdigo o facilitar otra informacin. El texto del comentario aparece slo en la
vista Cdigo y no se muestra en los navegadores.
Para insertar comentarios al documento, realiza:
1) Sitate en el men Insertar Comentario.
2) O haz clic en el comando Comentario, del panel Insertar, de la categora
Comn.
En la vista Cdigo, se inserta una etiqueta de comentario (<!-- -->) y sita el
punto de insercin 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 vietas para agrupar los
diferentes elementos de la lista.
6
9
5 11
1 7
3
8
2 12
10
4
38 Diseo de Pginas Web (Dreamweaver CS6)
11
5 9
3 6
3. Una vez configuradas las anteriores opciones, haz clic en el botn Aceptar.
4. Se visualizar un cuadro de dilogo parecido al que se muestra abajo, en
donde se habrn de configurar todos las propiedades del Estilo CSS.
5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic
sobre el botn Aceptar.
5. Si se requiere crear submens en algn men, posicinate al final del texto del
men y pulsa la tecla < ENTER >; una vez que te haya creado la vieta pulsa la
tecla < TABULADOR > (esto aplicar una sangra a la vieta 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 debers dar < ENTER >
al final del texto del submen. Ejemplo:
7. Ahora debers colocar los hipervnculos a cada men y submen, para ello, en
la vista Cdigo, 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 Diseo de Pginas Web (Dreamweaver CS6)
13. Las siguientes propiedades de tipo CSS te ayudarn a definir mejor las
propiedades del men:
Definicin de propiedades de tipo CSS
Font-family: Establece la familia de fuentes (o serie de familias) del estilo.
Font-size: Define el tamao del texto.
Font-style: Especifica normal, italic u oblique como estilo de la fuente.
Line-height: Establece el alto de la lnea en la que se coloca el texto
Text-decoration: Aade subrayado, sobreimpresin o tachado al texto o
hace que el texto parpadee.
Font-weight: Aplica una cantidad especfica o relativa de negrita a la
fuente.
Font-variant: Establece la variante de versales en el texto.
Text-transform: Convierte en mayscula la primera letra de cada palabra
de la seleccin o convierte todo en maysculas o minsculas.
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.
IMGENES.
5.1 Concepto de Imagen.
Una imagen es el grfico vectorial o no vectorial, que muestra una presentacin
visual de algo en formato digital.
8
5 12
4
13
10
1
7
11
3 1
2 9
6 1
TRABAJOS DE INVESTIGACIN
HIPERVNCULOS.
6.1 Concepto de Hipervnculo.
Los hipervnculos son links (vnculos) que al ser pulsados nos redirigen hacia otra
pgina o archivo; permitiendo conectar los diferentes elementos de una Pgina Web.
En Dreamweaver es posible establecer hipervnculos a cualquier elemento del
documento como puede ser: texto, imgenes, multimedia, etc.
TRABAJOS DE INVESTIGACIN
6
1
4
2
3 7
8
5
Para aplicar formato a las celdas, selecciona una celda, rengln o columna y
modifica las propiedades que desees.
1 6
2
7
4 5
8
3
La seleccin anterior indica que guardar la pgina principal (la llamada pgina
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 pgina principal, el mismo cuadro de dilogo
an no se cerrar ya que tendr seleccionado otro marco para despus
guardarlo. Cuando se haya terminado de guardar todos los marcos, la ventana
Guardar como, se cerrar automticamente.
88 Diseo de Pginas 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 vnculo 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 aparecern 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 mrgenes izquierdo y derecho
en pxeles.
7. Alto de mrgenes. Establece el alto de los mrgenes superior e inferior en
pxeles.
TRABAJOS DE INVESTIGACIN
FORMULARIOS.
8.1 Concepto de Formulario.
Los formularios son los elementos que se utilizan para la recoleccin 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 nmero mximo de caracteres que se puede mostrar
en el campo.
2. Car. mx. Establece el nmero mximo de caracteres que se puede introducir
en los campos de texto de una lnea.
3. Desactivado. Desactiva el rea de texto.
4. Slo lectura. Convierte el rea de texto en un rea de texto de slo lectura.
5. Tipo. Especifica si el campo es de una lnea, de varias lneas o de contrasea.
- Una lnea. Campo para una sola lnea de texto.
- Multilnea. Campo para varias lneas de texto.
- Contrasea. Campo para slo contrasea.
1 3
2 4
1 1
1. Nombre del botn. Asigna un nombre al botn.
2. Valor. Determina el texto que aparece dentro el botn.
3. Accin. Determina qu ocurre cuando se hace clic en el botn.
96 Diseo de Pginas Web (Dreamweaver CS6)
1
3
1
1. Valor activado. Establece el valor que debe enviarse al servidor cuando se
activa la casilla de verificacin.
2. Estado inicial. Determina si la casilla de verificacin 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 Diseo de Pginas Web (Dreamweaver CS6)
1
2
1
1. Campo de archivo. Especifica el nombre del objeto de campo de archivo.
2. Ancho car. Establece el nmero mximo de caracteres que se puede mostrar
en el campo.
3. Car. mx. Especifica el nmero mximo 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. mx. Sin embargo, si el
usuario intenta escribir el nombre del archivo y la ruta, el campo de archivo
slo admitir el nmero de caracteres especificado en el valor Car. mx.
1
1. Campo oculto. Especifica el nombre del campo.
2. Valor. Asigna un valor al campo. Este valor se transfiere al servidor cuando se
enva el formulario.
TRABAJOS DE INVESTIGACIN
CAPAS.
9.1 Concepto de Capa.
Las capas son recuadros que pueden colocarse en cualquier parte de la Pgina
Web y tener cualquier clase de contenido HTML. Las capas pueden ocultarse y solaparse
entre s, lo que proporciona una gran ventaja para el diseo.
3
8
1 4
7 10
9
5
2
1. Elemento CSS-P. Indica el nombre de la capa, que puede ser cambiado a travs
del panel Elementos PA o desde el cuadro de texto nombre de la capa.
2. Desb. Controla cmo aparecen los elementos PA en un navegador cuando el
contenido desborda el tamao especificado del elemento PA, y puede tomar los
valores:
VISIBLE. Muestra todo el contenido de la capa, haciendo ms grande la
capa.
HIDDEN. Slo 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 Diseo de Pginas 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 INVESTIGACIN
ELEMENTOS MULTIMEDIA.
10.1 Insertar Audio.
Incorporar sonido a la Pgina Web no es muy recomendable, ya que en algunas
ocasiones el usuario que visita el sitio suele estar escuchando su propia msica 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 mtodo para aadir sonido son: su finalidad, el tipo de usuarios a
los que est destinado, el tamao de archivo, la calidad de sonido y las diferencias en los
navegadores.
3. Completa el resto de las opciones del cuadro de dilogo y haz clic en Aceptar.
114 Diseo de Pginas Web (Dreamweaver CS6)