SlideShare una empresa de Scribd logo
1 de 124
Descargar para leer sin conexión
Die d P gna
 sño e á i s
We ( e mwe v r
  b Dr a  a e)
ii    Diseño de Páginas Web (Dreamweaver CS6)




© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido     iii




Sobre este libro…


    Usted es libre de:
          Copiar, distribuir y comunicar públicamente la presente obra.
          Realizar obras derivadas.


    Bajo las condiciones siguientes:
          Reconocimiento. Debe reconocer los créditos de la obra de la manera
           especificada por el autor o licenciador.
          No comercializar. No puede utilizar esta obra para fines lucrativos.


    Si deseas aportar sugerencias, comentarios, críticas o informar sobre errores,
    puedes    enviar   un    mensaje     a   la   siguiente   dirección    electrónica
    daniel.olalde@gmail.com.
iv    Diseño de Páginas Web (Dreamweaver CS6)




© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido   v


                                 CONTENIDO

1   Introducción a Dreamweaver CS6.                                         1

     1.1.   ¿Qué es Dreamweaver?                                        2

     1.2.   Acceso a Dreamweaver.                                       2

     1.3.   Ambiente de Dreamweaver.                                    3

     1.4. Vistas del documento.                                         4

        1.4.1.   Vista Código.
        1.4.2. Vista Diseño.
        1.4.3. Vista Dividir.
        1.4.4. Vista En vivo.
        1.4.5. Vista Código en vivo.
        1.4.6. Vista previa en el navegador.
     1.5.   Crear un nuevo documento.                                   9

     1.6. Abrir un documento.                                           9

     1.7.   Guardar un documento.                                       10

     1.8. Importar y exportar documentos.                               11

     1.9. Cerrar y salir de Dreamweaver.                                12

2   Área de trabajo en Dreamweaver CS6.                                 13

     2.1.   Inspector de propiedades.                                   14

     2.2. Barra de herramientas Documento.                              14

     2.3. Barra de herramientas Estado.                                 15

     2.4. Barra de herramientas Navegación con navegador.               15

     2.5. Panel Insertar.                                               16

     2.6. Panel Estilos CSS.                                            17

3   Configurar un sitio en Dreamweaver.                                 19

     3.1.   Concepto de Sitio.                                          20

     3.2. Tipos de Sitios en Dreamweaver.                               20
vi    Diseño de Páginas Web (Dreamweaver CS6)


                   3.3. Estructura de una Página Web.               21
                   3.4. Configurar un sitio nuevo.                  22
                   3.5. Configuración de un servidor de prueba.     22
                   3.6. Cuadro de diálogo Administrar sitios.       24
                   3.7. Panel Archivos.                             25
            4    Formato a la Página Web.                           27

                   4.1      Propiedades de la página.               28

                         4.1.1   Categoría Apariencia (CSS).
                         4.1.2   Categoría Apariencia (HTML).
                         4.1.3   Categoría Vínculos (CSS).
                         4.1.4   Categoría Encabezados (CSS).
                         4.1.5   Categoría Título / Codificación.
                         4.1.6   Categoría Imagen de rastreo.
                   4.2      Comentarios.                            33

                   4.3      Objeto Fecha.                           33

                   4.4      Reglas horizontales.                    34

                   4.5      Caracteres especiales.                  35

                   4.6      Listas.                                 36

                   4.7      Formato al texto.                       37

                         4.7.1   Menú Formato.
                   4.8      Concepto de Estilo CSS.                 40

                   4.9      Crear estilos CSS.                      41

                      4.9.1      Propiedades CSS.
                   4.10 Editar estilos CSS.                         43

                   4.11 Vincular estilos CSS.                       44

                   4.12 Menús usando hojas de estilos.              45




© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido   vii


5   Imágenes.                                                         55

     5.1.     Concepto de Imagen.                                     56

     5.2. Insertar imágenes.                                          56

     5.3. Marcadores de posición de imagen.                           58

     5.4. Propiedades de imágenes.                                    59

     5.5. Imagen de sustitución (Rollover).                            61

     5.6. Objetos Inteligentes.                                       62

6   Hipervínculos.                                                    66

     6.1. Concepto de Hipervínculo.                                   67

     6.2. Tipos de rutas de los vínculos.                             67

           6.2.1. Rutas absolutas.
           6.2.2. Rutas relativas al documento.
           6.2.3. Rutas relativas a la raíz del sitio.
     6.3. Crear hipervínculos.                                        68

     6.4. Destino de los hipervínculos.                               69

     6.5. Anclaje con nombre.                                         70

     6.6. Vínculo a correo electrónico.                                71

     6.7. Menú de salto.                                               72

     6.8. Zonas interactivas.                                         74

7   Diseño de la Página Web.                                          76

     7.1      Concepto de Tabla.                                       77

     7.2      Creación de tablas.                                      77

     7.3      Formato de tablas y celdas.                             79

     7.4      Insertar filas y columnas.                               81

     7.5      Eliminar filas y columnas.                              82

     7.6      Combinar o dividir celdas.                              82

     7.7      Anidar tablas.                                          83

     7.8      Ordenar tablas.                                         83
viii   Diseño de Páginas Web (Dreamweaver CS6)


                    7.9      Concepto de marcos.                               84
                    7.10 Crear marcos.                                         84
                    7.11 Seleccionar marcos.                                   86
                    7.12 Guardar marcos.                                       86
                    7.13 Propiedades de los marcos.                            88
                    7.14 Hipervínculos en marcos.                              89
            8     Formularios.                                                 91

                    8.1      Concepto de Formulario.                           92

                    8.2      Crear formularios.                                92

                    8.3      Objetos de los formularios.
                          8.3.1   Elemento Campo de texto.
                          8.3.2 Elemento Área de texto.
                          8.3.3 Elemento Botón.
                          8.3.4 Elemento Casilla de verificación.
                          8.3.5 Elemento Botón de opción.
                          8.3.6 Elemento Seleccionar (Lista/Menú).
                          8.3.7 Elemento Campo de archivo.
                          8.3.8 Elemento Campo de imagen.
                          8.3.9 Elemento Campo oculto.
                    8.4      Validación de formularios aplicando JavaScript.   100

                    8.5      Validación de formularios usando HTML5.           101

            9     Capas.                                                       103

                   9.1      Concepto de Capa.                                  104

                   9.2      Insertar capas.                                    104

                          9.2.1   Etiqueta Div.
                          9.2.2 Etiqueta DIV de diseño de cuadricula fluida.
                          9.2.3 Div PA.




© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido   ix


      9.3   Propiedades de la capas.                     105
      9.4   Hojas de estilos en las capas.               107
10   Elementos multimedia.                               108

      10.1 Insertar Audio.                               109

        10.1.1 Etiqueta <AUDIO>.
        10.1.2 Comando Plug-in.
      10.2 Insertar Video.                                111

        10.2.1 Etiqueta <VIDEO>.
        10.2.2 Comando Plug-in.
      10.3 Archivo SWF.                                  112

      10.4 Componente FLV.                               113

      10.5 Películas Shockwave.                          114

      10.6 Control ActiveX.                              114

      10.7 Elemento Applet.                              114
UNIDAD               1
      INTRODUCCIÓN A DREAMWEAVER CS6.

1.1   ¿Qué es Dreamweaver?

1.2   Acceso a Dreamweaver.

1.3   Ambiente de Dreamweaver.

1.4   Vistas del documento.

1.5   Crear un nuevo documento.

1.6 Abrir un documento.

1.7   Guardar un documento.

1.8 Importar y exportar documentos.

1.9 Cerrar y salir de Dreamweaver.
2     Diseño de Páginas Web (Dreamweaver CS6)


                              INTRODUCCIÓN A DREAMWEAVER CS6.
                1.1 ¿Qué es Dreamweaver?
                 Dreamweaver es el software para el desarrollo y diseño de Páginas Web
         adaptables para diversos dispositivos electrónicos.


                1.2 Acceso a Dreamweaver.
                 Para poder acceder a Dreamweaver existen diversas formas, pero las más usuales
         son:
                 OPCIÓN 1:
                 1) Abre el menú Metro de Windows (Presionado la tecla de < Windows >).
                 2) Desplázate por los programas y haz clic en la aplicación Adobe Dreamweaver
                    CS6.




                 OPCIÓN 2:
                 1) Metacomando < Win + R >.
                 2) Teclea la palabra Dreamweaver.
                 3) Pulsa la tecla < Enter >.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6    3


     1.3 Ambiente de Dreamweaver.


        Pestañas del documento                                   Barra de herramientas Documento
                                                                                          s
          Botón de la                                                Conmutador de
                                  Barra de menús
          aplicación                                               espacios de trabajo
                                                   s




                                 Área de trabajo




       Barra de herramientas
                                                                      Paneles
              Estado
                                                   Inspector de propiedades




     1.4 Vistas del documento.
       Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el
contenido del documento, para así usar la vista con la que más nos agrade trabajar.
4     Diseño de Páginas Web (Dreamweaver CS6)


                1.4.1 Vista Código.
                Presenta la codificación para escribir o editar manualmente el código con el que
         se esté trabajando.
                Para activar la Vista código, realiza cualquiera de las siguientes tres opciones:
                  1. Haz clic en botón Código de la Barra de herramientas documento.




                  2. Sitúate en el menú Ver y selecciona la opción Código.
                  3. O presiona la tecla < F10 >.
                      Al realizar cualquiera de las tres opciones anteriores, se mostrará la Vista
                      Código del documento con el que se esté trabajando.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6   5


       1.4.2 Vista Diseño.
       Muestra el contenido de la página web y permite editarlo. Activa la Vista Diseño,
empleando cualquiera de las siguientes opciones:
         1. Haz clic en botón Diseño de la Barra de herramientas Documento.




         2. Sitúate en el menú Ver y selecciona la opción Diseño.




       1.4.3 Vista Dividir.
       Separa en dos el área de trabajo, visualizando en una parte el código y en la otra
la vista diseño. La Vista Dividir, se activa desde:
         1. El botón Dividir de la Barra de herramientas Documento.




         2. O desde el menú Ver  Código y Diseño.
6     Diseño de Páginas Web (Dreamweaver CS6)




                1.4.4 Vista En vivo.
                Es casi similar a la vista diseño, sólo que en esta es posible interactuar con el
         contenido de la página tal y como se estuviera haciendo en el navegador. Activa la Vista
         En vivo, desde:
                  1. El botón Vista En vivo de la Barra de herramientas Documento.




                  2. Desde el menú Ver  Vista en vivo.
                  3. O Metacomando < Alt + F11 >.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6      7




       1.4.5 Vista Código en vivo.
       Divide en dos partes el área de trabajo, mostrando el contenido de la página web
en vivo, y a la vez que es posible editar dicho contenido mediante código.
       Una vez que se haya activado la Vista En Vivo, es posible activar la Vista Código en
vivo. Para ello realiza lo siguiente:
         1. Haz clic en el botón Código en vivo de la Barra de herramientas Documento.




         2. O desde el menú Ver  Código en vivo.
8     Diseño de Páginas Web (Dreamweaver CS6)




                 1.4.6 Vista previa en el navegador.
                 Permite visualizar la página web en alguno de los navegadores instalados en el
         equipo (por lo regular es el navegador que se tiene por default).
                 Para ejecutar la página en un navegador, presiona la tecla < F12 > o haz clic en el
         ícono       de la Barra de herramientas Documento.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6      9


     1.5 Crear un nuevo documento
      Para crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente:
       1. Menú Archivo  Nuevo.
          En la categoría Página en blanco del cuadro de diálogo Nuevo documento,
          selecciona el tipo de página que deseas crear en la columna Tipo de página.
       2. O Metacomando < Ctrl + N >.




     1.6 Abrir un documento
      Para abrir un documento en Dreamweaver CS6, realiza lo que se señala a
continuación:
       1. Menú Archivo  Abrir.
       2. O Metacomando < Ctrl + O >.
      Una vez realizado alguno de los procedimientos anteriores aparecerá el cuadro
de diálogo Abrir, donde deberás seleccionar el documento a abrir.
10    Diseño de Páginas Web (Dreamweaver CS6)




                1.7 Guardar un documento
                 Para guardar un documento en Dreamweaver CS6, presiona el Metacomando
         < Ctrl + S > o haz clic en el menú Archivo  Guardar.
                 Al guardar por primera vez un documento aparecerá el cuadro diálogo Guardar
         como, donde se habrá de especificar el nombre del archivo y el tipo de documento a
         guardar.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6       11




1.8 Importar y exportar documentos.
      Dreamweaver, permite importar archivos al documento, para que éstos
sean colocados en el área de trabajo. Los documentos que permite importar
Dreamweaver CS6 son:
            XML en plantilla. Dreamweaver crea un nuevo documento basado en
             la plantilla especificada en el archivo XML. Después rellena el
             contenido de cada región editable de ese documento con los datos
             del archivo XML. El documento resultante aparece en una nueva
             ventana de documento.
            Datos de tabla. Importa datos de tabla en el documento guardando
             en primer lugar los archivos (por ejemplo, archivos de Microsoft
             Excel o archivos de base de datos) en formato de texto delimitado.
12     Diseño de Páginas Web (Dreamweaver CS6)


                             Documento de Word. Al importar un documento de Word,
                              Dreamweaver recibe el HTML convertido y lo inserta en la página
                              Web.
                             Documento de Excel. Importa al área de trabajo una hoja de cálculo
                              y Dreamweaver la convierte en código HTML.
                 Para importar cualquier documento a Dreamweaver, realiza:
                          1. Haz clic en el menú Archivo  Importar  Selecciona la opción del
                              archivo que desees importar.
                 Asimismo es posible exportar la página web a otros formatos, que son:
                             Datos de plantilla como XML.
                             Tabla.
                 Para exportar la página Web, realiza lo siguiente:
                          1. Haz clic en el menú Archivo  Exportar  Selecciona la opción del
                              archivo que desees exportar.


                1.9 Cerrar y salir de Dreamweaver.
                 Para cerrar un documento en Dreamweaver CS6, presiona el Metacomando
         < Ctrl + F4 >.
                 Para salir de Dreamweaver, realiza:
                 1) Metacomando < Ctrl + Q > o < Alt + F4 >.
                 2) Menú Archivo  Cerrar.


                                 TRABAJOS DE INVESTIGACIÓN


                 1. Historia de Dreamweaver desde sus comienzos hasta la actualidad.
                 2. Novedades de Dreamweaver CS6.
                 3. Requisitos para instalar Dreamweaver CS6.
                 4. Concepto de Archivo XML.


© 2013. Derechos Reservados Daniel Olalde Soto.
UNIDAD                          2
 ÁREA DE TRABAJO EN DREAMWEAVER CS6.

2.1   Inspector de propiedades.

2.2   Barra de herramientas Documento.

2.3 Barra de herramientas Estado.

2.4 Barra de herramientas Navegación con navegador.

2.5 Panel Insertar.
14     Diseño de Páginas Web (Dreamweaver CS6)


                            ÁREA DE TRABAJO EN DREAMWEAVER CS6.
                2.1 Inspector de propiedades.
                 El Inspector de propiedades permite examinar y editar las propiedades más
         comunes del elemento seleccionado actualmente, como texto o cualquier objeto
         insertado.




                2.2 Barra de herramientas Documento.
                 La barra de herramientas Documento contiene los comandos y opciones
         relativos a la visualización del documento y a su transferencia entre los sitios local y
         remoto.


                       Vista Código
                                      Vista Diseño
                                                       Multipantalla
                                                                    Administración de archivos

                                                                                 Comprobar compatibilidad con navegadores

                                                                                         Actualizar documento




                                                                                      Ayudas visuales

                                                                          Validación W3C
                                                                Vista previa
                                                Vista En vivo
                                Vista Dividir
                                                                               Título de la página web




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 2 – Área de trabajo en Dreamweaver CS6           15


     2.3 Barra de herramientas Estado.
      La barra de herramientas Estado, se sitúa en la parte inferior de la ventana de
documento, proporciona información adicional sobre el documento que está creando.

                                                          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

                         Tamaño del documento y tiempo de descargar estimado

                                                                    Indicador de codificación




     2.4 Barra de herramientas Navegación con navegador.
      La barra de herramientas Navegación con navegador se activa en la Vista en vivo
y muestra la dirección de la página que está viendo en la ventana de documento.
             Vista Código en vivo
                                              Controles de navegador
                                                             Opciones de la vista en vivo




                                                Cuadro de dirección

                           Activar modo de inspección
16     Diseño de Páginas Web (Dreamweaver CS6)


                2.5 Panel Insertar.
                 El panel Insertar contiene botones para crear e insertar objetos al documento.
         Los botones se encuentran organizados en categorías, entre las que se puede cambiar
         seleccionando la categoría deseada del menú desplegable Categoría.
                 El panel Insertar está organizado en las categorías siguientes:
                       Categoría Común. Permite crear e insertar
                        los objetos que se utilizan con más
                        frecuencia, como las imágenes y las tablas.
                       Categoría Diseño. Permite insertar tablas,
                        elementos de tabla, etiquetas div, marcos
                        y widgets de Spry. También puede elegir
                        dos vistas para tablas: Estándar (valor
                        predeterminado) y Tablas expandidas.
                       Categoría Formularios. Contiene botones
                        que permiten crear formularios e insertar
                        elementos     de    formulario,   incluidos
                        widgets de validación de Spry.
                       Categoría Datos. Permite insertar objetos
                        de datos de Spry y otros elementos
                        dinámicos, como juegos de registros,
                        regiones repetidas y grabar formularios de
                        inserción y actualización.
                       Categoría Spry. Contiene botones para
                        crear páginas de Spry, incluidos objetos de datos y widgets de Spry.
                       Categoría jQuery Mobile. Contiene botones para crear formularios en
                        lenguaje jQuery.
                       Categoría InContext Editing. Contiene botones para la creación de
                        páginas de InContext Editing, incluidos botones para Regiones editables,
                        Regiones repetidas y la administración de clases CSS.

© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 2 – Área de trabajo en Dreamweaver CS6   17


            Categoría Texto. Permite insertar diversas etiquetas de formato de texto
             y listas, como b, em, p, h1 y ul.
            Categoría Favoritos. Permite agrupar y organizar los botones del panel
             Insertar que utiliza con más frecuencia en un lugar común.


     2.6 Panel Estilos CSS.
      El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan
a un elemento de página actualmente seleccionado (modo Actual) o las reglas y
propiedades que afectan a todo un documento (modo Todo). El panel Estilos CSS
también permite modificar propiedades CSS tanto en modo Todo como en modo Actual.
18    Diseño de Páginas Web (Dreamweaver CS6)


                                 TRABAJOS DE INVESTIGACIÓN


                1. World Wide Web Consortium.
                        a. ¿Qué es?
                        b. Organización.
                        c. ¿Para qué se creó?
                        d. ¿Quiénes lo crearon?
                2. Activar o desactivar los paneles de Dreamweaver.




© 2013. Derechos Reservados Daniel Olalde Soto.
UNIDAD                    3
  CONFIGURAR UN SITIO EN DREAMWEAVER.

3.1   Concepto de Sitio.

3.2 Tipos de Sitios en Dreamweaver.

3.3 Estructura de una Página Web.

3.4 Configurar un sitio nuevo.

3.5 Configuración de un servidor de prueba.

3.6 Cuadro de diálogo Administrar sitios.

3.7 Panel Archivos.
20     Diseño de Páginas Web (Dreamweaver CS6)


                             CONFIGURAR UN SITIO EN DREAMWEAVER.
                3.1 Concepto de Sitio.
                  Un Sitio es el conjunto de archivos de hipertexto (páginas web) y carpetas
         relacionados entre sí, con un diseño similar y
         un objetivo en común.
                  Cada sitio Web tendrá una dirección
         única, es decir, nunca se podrán repetir las
         URL’s.


                3.2 Tipos de Sitios en Dreamweaver.
                  Un sitio de Dreamweaver permite organizar y administrar todos los documentos
         Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y administrar y
         compartir archivos.
                  Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según
         el entorno de desarrollo y el tipo de sitio Web que se desarrolle:
                     • Carpeta raíz local: Almacena los archivos con los que se está trabajando.
                   Dreamweaver se refiere a esta carpeta como el “sitio local”. Esta carpeta suele
                   encontrarse en el equipo local, pero también se puede encontrar en un servidor
                   de red.
                     • Carpeta remota: Almacena los archivos para pruebas, producción,
                   colaboración, etc. Dreamweaver se refiere a esta carpeta como el “sitio remoto”
                   en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo
                   donde se ejecuta el servidor Web.
                     • Carpeta de servidor de prueba: La carpeta en la que Dreamweaver procesa
                   páginas dinámicas.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6   21


3.3 Estructura de una Página Web.




paginaweb




 documentos




    imagenes



       videos



       scripts




  multimedia



    basedatos
22     Diseño de Páginas Web (Dreamweaver CS6)


                3.4 Configurar un Sitio nuevo.
                 Configurar un sitio de Dreamweaver permite organizar todos los documentos
         asociados con un sitio Web. El cuadro de diálogo Configuración del sitio es donde se
         especifica la configuración del sitio de Dreamweaver.
                 Para abrir el cuadro de diálogo Configuración del sitio, haz clic en el menú Sitio
          Nuevo sitio.




                3.5 Configuración de un servidor de prueba.
                 Un servidor de prueba permite generar y mostrar contenido dinámico mientras
         se trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un
         servidor en funcionamiento o un servidor de producción.
                 1. Seleccione Sitio  Administrar sitios.
                 2. Haz clic en Nuevo Sitio (para configurar un nuevo sitio), o bien selecciona un
                    sitio de Dreamweaver ya existente y haz clic en Editar.
                 3. En el cuadro de diálogo Configuración del sitio, selecciona la categoría
                    Servidores y proceda de una de las siguiente formas:




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6   23




             Haz clic en el botón Añadir nuevo servidor para añadir un nuevo
              servidor.
             O selecciona un servidor existente y haz clic en el botón Editar
              servidor existente
4. Especifica las opciones Básicas que sean necesarias y luego haz clic en el la
   pestaña Avanzadas.




   Nota: Debes especificar un URL Web en la pantalla Básicas al especificar un
   servidor de prueba.
24     Diseño de Páginas Web (Dreamweaver CS6)


                 5. Bajo Servidor de prueba, selecciona el modelo de servidor que desea usar
                      para su aplicación Web.
                 6. Haz clic en Guardar para cerrar la pantalla Avanzadas. Seguidamente, en la
                      categoría Servidores, especifica el servidor que acabas de añadir o editar
                      como servidor de prueba.


                3.6 Cuadro de diálogo administrar sitios.
                 El cuadro de diálogo Administrar sitios se emplea para crear nuevos sitios, editar,
         duplicar, eliminar un sitio o importar o exportar la configuración de un sitio.
                 1.   Selecciona Sitio  Administrar sitios y selecciona un sitio de la lista.




                 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.

© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 1 – Introducción a Dreamweaver CS6   25


           o   Exportar. Permite exportar la configuración de un sitio como archivo
               XML (*.ste).
           o   Importar. Permite seleccionar un archivo de configuración de un sitio
               (*.ste).


     3.7 Panel Archivos.
       Utilice el panel Archivos para ver y administrar los archivos del sitio de
Dreamweaver.




       Al visualizar sitios, archivos o carpetas en el panel Archivos, puedes cambiar el
tamaño del área de visualización y expandir o contraer el panel Archivos.
26    Diseño de Páginas Web (Dreamweaver CS6)


                                 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.




© 2013. Derechos Reservados Daniel Olalde Soto.
UNIDAD            4
           FORMATO A LA PÁGINA WEB.

4.1   Propiedades de la página.

4.2 Comentarios.

4.3 Objeto Fecha.

4.4 Reglas horizontales.

4.5 Caracteres especiales.

4.6 Listas.

4.7 Formato al texto.

4.8 Concepto de Estilo CSS.

4.9 Crear estilos CSS.

4.10 Editar estilos CSS.

4.11 Vincular estilos CSS.

4.12 Menús usando hojas de estilos.
28     Diseño de Páginas Web (Dreamweaver CS6)


                                    FORMATO A LA PÁGINA WEB.
                4.1 Propiedades de la página.
                 Al momento de crear una Página Web es recomendable crear sitios que sigan un
         mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
                 El formato de la página se define a través del cuadro de diálogo Propiedades de
         la página. Para abrir dicho cuadro de diálogo realiza cualquiera de las siguientes
         opciones:
                 1. Metacomando < Ctrl + J >.
                 2. Haz clic en el menú Modificar  Propiedades de la página.
                 3. Haz clic derecho sobre el área del documento y del menú contextual
                     selecciona la opción Propiedades.




                 4. En el Inspector de propiedades, haz clic sobre el botón Propiedades de la
                     página.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web    29


      Empleando cualquiera de las opciones anteriores se mostrará el cuadro de
      diálogo Propiedades de la página, en donde se habrán de configurar las
      propiedades del documento.




      4.1.1 Categoría Apariencia (CSS).
      La categoría Apariencia (CSS) permite especificar la fuente y el tamaño de la letra;
así como el color del texto, color de fondo, aplicar una imagen de fondo, los márgenes
del área del documento.
30    Diseño de Páginas Web (Dreamweaver CS6)


                4.1.2   Categoría Apariencia (HTML).




                La categoría Apariencia (HTML), permite especificar varias opciones básicas para
         el diseño de página y éstas son:
                       Imagen de fondo. Aplica como fondo la imagen seleccionada.
                       Fondo. Define un color de fondo para la página.
                       Texto. Especifica el color de la fuente del texto.
                       Vínculos. Especifica el color al texto del vínculo.
                       Vínculos visitados. Especifica el color que va a tomar los vínculos visitados.
                       Vínculos activos. Especifica el color que se va mostrar cuando se haga clic
                        sobre el vínculo.
                       Márgenes. Permiten establecer los márgenes del documento, es decir, la
                        distancia entre donde empieza el contenido de la página y la ventana del
                        navegador.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web      31


       4.1.3 Categoría Vínculos (CSS).
       La categoría Vínculos (CSS) se emplea para definir la fuente, tamaño y colores de
los vínculos, así como el estilo del vínculo.




       4.1.3   Categoría Encabezados (CSS).
       La categoría Encabezados (CSS), permite definir la fuente de los encabezados, el
estilo de la fuente (cursiva o negrita), así como el tamaño y color que se va aplicar a cada
tipo de encabezado.
32    Diseño de Páginas Web (Dreamweaver CS6)


                4.1.5 Categoría Título / Codificación.
                La categoría Título / Codificación permite establecer el tipo de codificación del
         documento en cuestión conforme al idioma utilizado al crear las Páginas Web, así como
         especificar el formulario de normas Unicode que debe aplicarse a tal tipo de codificación.




                4.1.6 Categoría Imagen de rastreo.
                La categoría Imagen de rastreo permite insertar un archivo de imagen para usarlo
         como plantilla gráfica al diseñar la Página Web, así como, establecer la opacidad de la
         imagen de rastreo.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web      33


     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.




              En la vista Diseño, aparece el cuadro de diálogo Comentario. Introduce el
               comentario y haz clic en Aceptar.




     4.3 Objeto Fecha.
       Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual
con el formato que prefieras (con o sin la hora) y ofrece la posibilidad de actualizarla cada
vez que guarde el archivo.
34     Diseño de Páginas Web (Dreamweaver CS6)


                 Para insertar el objeto fecha en el documento, realiza:
                 1. Sitúa el puntero de inserción en el lugar donde desees insertar la fecha.
                 2. Realiza alguno de los siguientes procedimientos:
                          Menú Insertar  Fecha.
                          Categoría Común, del panel Insertar, haz clic en el ícono Fecha.
                 3. En el cuadro de diálogo Insertar fecha, selecciona el formato de día de la
                      semana, fecha y hora.
                      Si se desea que la fecha insertada se actualice cada vez que se guarde el
                      documento, activa la casilla Actualizar automáticamente al guardar. Pero si
                      se requiere que la fecha se convierta en texto normal cuando se inserte y no
                      se actualice automáticamente, desactiva dicha opción.




                 4. Haz clic en Aceptar para insertar la fecha.


                4.4 Reglas horizontales.
                 Las Reglas horizontales son el elemento que se usa para separar secciones dentro
         de una misma página.
                 Para insertar una regla horizontal realiza:
                 1.   Sitúate en el menú Insertar  HTML  Regla horizontal.
                 2.   O de la Categoría Común del panel Insertar, haz clic en el comando Regla
                      Horizontal.
© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web      35


       Al seleccionar la regla horizontal insertada, el Inspector de propiedades cambia
para permitirnos modificar las propiedades de dicho objeto.


                               Ancho de la regla                  Alineación de la regla




                              Grosor de la regla             Aplicar sombra
                 Asignar un nombre de ID                         Asignar clase


     4.5 Caracteres especiales.
       Cuando se trabaja con páginas web, muchas de las ocasiones es necesario
emplear caracteres especiales tales como ñ, ©, á, ü, por mencionar algunos; para esto
Dreamweaver dispone de diferentes caracteres que podemos incorporar al documento.
       Para insertar caracteres especiales, haz clic en el menú Insertar  HTML 
Caracteres especiales  Otro. Una vez hecho lo anterior se mostrará el cuadro de
diálogo Caracteres especiales, ahí deberás seleccionar el carácter buscado.
36     Diseño de Páginas Web (Dreamweaver CS6)


                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.




                        Lista ordenada: muestra un número para indicar el orden de cada uno
                         de los elementos que integran la lista.




                        Lista de definición: se encuentra compuesta por términos o
                         expresiones y su definición.




                 Para insertar cualquiera de éstos tres tipos de listas, sitúate en el menú
         Formato  Lista  y selecciona el tipo de lista que desees emplear.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web     37




      4.7 Formato al texto.
       El contenido del texto del documento en Dreamweaver posee atributos que
permiten dar formato al texto, como es; cambiar el tipo de fuente, el tamaño de letra, la
alineación, el color de la fuente, el estilo, etc.
       Para dar formato rápidamente al texto emplea el Inspector de propiedades, ya sea
usando la categoría HTML o CSS (Para que se pueda aplicar el formato al texto, deberás
previamente haberlo seleccionado).
              Inspector de propiedades Categoría HTML.

                                                               6
                                                                           9
                                                           5                          11
                                   1                               7
                                                     3
                                                                       8




                                  2                                                        12
                                                                               10
                                                               4
38    Diseño de Páginas Web (Dreamweaver CS6)


                1. Formato. Permite seleccionar un formato de párrafo ya definido para HTML,
                    que puede ser un encabezado, párrafo o formato predeterminado
                2. ID. Asigna una ID a la selección. El menú desplegable ID enumera todos los ID
                    declarados pero no utilizados en el documento.
                3. Clase. Muestra el estilo de clase que se aplica actualmente al texto
                    seleccionado. Si no se ha aplicado ningún estilo a la selección, el menú
                    emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la
                    selección, el menú aparece en blanco.
                4. Vínculo. Crea un vínculo de hipertexto del texto seleccionado.
                5. Negritas. Aplica estilo de negritas al texto seleccionado.
                6. Cursiva. Aplica estilo de cursiva al texto seleccionado.
                7. Lista sin ordenar. Crea una lista con viñetas del texto seleccionado.
                8. Lista ordenada. Crea una lista numerada del texto seleccionado.
                9. Disminuir sangría. Anula o quita la etiqueta < blockquote >. En una lista su
                    anulación elimina la anidación de la lista.
                10. Aumentar sangría. Inserta sangría en el texto seleccionado, la aplicación de
                    sangría crea una lista anidada.
                11. Título. Especifica el texto de información sobre una herramienta para un
                    vínculo de hipertexto.
                12. Destino. Permite especificar el marco o la ventana donde se cargará el
                    documento vinculado.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web                39


      Inspector de propiedades Categoría CSS.
                                                                  7
                                    1
                                                                                        12
                                                              4       8
                                                                              10




                                                                                   11
                                                5                         9
                            3                             6

               2

1. Regla de destino. Es la regla que está editando en el Inspector de propiedades
   de CSS. Si hay una regla ya existente aplicada al texto, se mostrará el formato
   de la regla que afecta al texto al hacer clic en el texto de la página. También
   puedes emplear el menú emergente Regla de destino para crear nuevas reglas
   CSS y nuevos estilos en línea o aplicar clases existentes al texto seleccionado.
2. Editar regla. Abre el cuadro de diálogo Definición de regla CSS para la regla de
   destino. Si seleccionas Nueva regla CSS del menú emergente Regla de destino
   y haces clic en el botón Editar regla, Dreamweaver abrirá el cuadro de diálogo
   Definición de nueva regla CSS.
3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades para la regla de
   destino en la vista actual.
4. Fuente. Cambia la fuente de la regla de destino.
5. Tamaño. Establece el tamaño de la fuente para la regla de destino.
6. Color. Establece el color seleccionado como color de fuente en la regla de
   destino.
7. Negritas. Añade la propiedad de negrita a la regla de destino.
40     Diseño de Páginas Web (Dreamweaver CS6)


                 8. Cursiva. Añade la propiedad de cursiva a la regla de destino.
                 9. Alinear a la izquierda. Alinea el texto hacia la izquierda.
                 10. Alinear al centro. Alinea el texto al centro.
                 11. Alinear a la derecha. Alinea el texto hacia la derecha.
                 12. Justificar. Justifica el texto seleccionado.


                4.7.1 Menú Formato.
                 También puedes emplear el menú Formato, para modificar el aspecto del texto;
         dentro de este menú encontrarás los submenús para:
                     Aumentar Sangría o Anular sangría.
                     Asignarle formato al párrafo.
                     Alinear el texto.
                     Crear listas.
                     Aplicar estilos predefinidos.
                     Crear o aplicar estilos CSS.
                     Modificar el color de texto.


                4.8 Concepto de Estilo CSS.
                 Los Estilos CSS, también conocidos como Hojas de Estilos en Cascada (Cascading
         Style Sheets) son el conjunto de reglas de formato que determina el aspecto del
         contenido de la Página Web.
                 Las reglas CSS, pueden residir en las ubicaciones siguientes:
                     Hojas de Estilo CSS Externas. Son el conjunto de reglas CSS almacenadas
                        en un archivo CSS (.css) y con éstas se deberá emplear una vinculación al
                        archivo CSS.
                     Hojas de Estilo CSS Internas. Son el conjunto de reglas CSS incluidas en
                        una etiqueta < STYLE > dentro del cuerpo del documento o de la etiqueta
                        < HEAD >.



© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web      41




4.9 Crear estilos CSS.
 Para crear un estilo CSS en Dreamweaver, realiza:
 1. Para abrir el cuadro de diálogo Nueva Regla CSS, realiza cualquiera de las
     siguientes opciones.
        A. Haz clic en el menú Formato 
            Estilos CSS  Nuevo.
        B. O del panel Estilos CSS, haz clic en
            el ícono Nueva regla CSS.




 2. Después de haber realizado alguno de los procedimientos anteriores se
     mostrará el siguiente cuadro de diálogo, en donde se habrá de especificar:
     Tipo de selector. Permite elegir alguno de los siguientes tipos de selector:
         Clase. Crea un estilo personalizado que pueda aplicarse como atributo
            class a cualquier elemento HTML.
         ID. Define el formato de una etiqueta que contenga un atributo ID
            concreto.
         Etiqueta. Redefine el formato predeterminado de una etiqueta HTML
            específica.
         Compuesto. Define una regla compuesta que afecte a dos o más
            etiquetas, clases o ID simultáneamente.
42    Diseño de Páginas Web (Dreamweaver CS6)


                    Nombre del selector. Define el nombre del estilo CSS.
                    Definición de la regla. Permite establecer en donde se va a crear la hoja de
                    estilos, entre las siguientes dos opciones:
                         Sólo este documento. Incrusta el estilo en el documento actual.
                         Nuevo archivo de hojas de estilo. Crear una hoja de estilos externa, es
                           decir, un documento CSS (.css)




                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.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web   43




      5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic
          sobre el botón Aceptar.


     4.10 Editar estilos CSS.
      Los estilos CSS que se crean en Dreamweaver permiten editar tanto las reglas
internas como las externas que se hayan aplicado en el documento.
      Para editar una regla CSS, realiza:
      1. Abre el panel Estilos CSS.
      2. Selecciona la regla CSS que desees editar.
      3. Haz clic en el botón Editar estilo    , del panel
          Estilos CSS.
      4. Realiza los cambios necesarios y haz clic en
          Aceptar para conservar los cambios realizados.
44     Diseño de Páginas Web (Dreamweaver CS6)


                4.11 Vincular estilos CSS.
                 Cuando se quiere usar una hoja de estilos externa en un documento HTML, lo que
         único que se tiene que hacer es vincular la hoja de estilos en el documento.
                 Para establecer vínculos en una hoja de estilos CSS externa, realiza:
                 1. Abre el panel Estilos CSS.
                 2. En el panel Estilos CSS, haz clic en el botón Adjuntar hoja de estilos     .
                 3. En el cuadro de diálogo Vincular hoja de estilos externa, configura las
                     siguientes opciones:
                     Arch./URL. Oprime el botón Examinar para localizar la hoja de estilos a
                     vincular.
                     Añadir como. Activa Vincular para establecer un vínculo entre el documento
                     actual y la hoja de estilos externa, o la opción Importar para utilizar una hoja
                     de estilo externa como referencia.
                     Media. Especifica el medio de destino de la hoja de estilo.
                     Vista previa. Permite verificar que la hoja de estilo aplica los estilos que se
                     desean en la página actual.




                 4. Por último, pulsa sobre el botón Aceptar.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web   45


     4.12 Menús usando hojas de estilos.
       El elemento esencial en una Página Web es el uso de menús, ya que gracias a ellos
permiten que el usuario pueda desplazarse en cada página que compone el sitio Web.
       Hoy en día la mayoría de los menús se realizan con el uso de hojas de estilos y
html. Anteriormente era muy frecuente ver Páginas Web con menús hechos en Flash,
pero la desventaja era el tiempo en que tardaba de cargarse, por lo que terminaron
quedando obsoletos.
       Para crear menús usando hojas de estilos, se deben crear dos documentos: un
documento HTML (.html) y el otro una Hoja de estilos (.css).
       El documento HTML deberá contener los siguientes dos elementos:
       Una capa y una lista sin ordenar, para ello procede a realizar lo siguiente:
       1. Primero crea una capa desde la vista Código, escribiendo las etiquetas <div>
          … </div>.




       2. A continuación, cambia a la vista Diseño y posiciona el puntero dentro del
          rectángulo.
       3. Activa el botón Lista sin ordenar        del Inspector de propiedades.
       4. Procede a crear los menús principales, tecleando el nombre del menú después
          de cada viñeta. Ejemplo:
46    Diseño de Páginas Web (Dreamweaver CS6)




                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:




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web   47




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:




8. En la etiqueta <div> teclea los siguientes atributos y valores:
                               class="nav" id="menu"
48    Diseño de Páginas Web (Dreamweaver CS6)


                9. Dentro de la etiqueta <ul> tecla los siguiente atributo y valor:
                                                     class="nav"




                10. Guarda el archivo HTML y crea una página CSS.
                11. Teclea los siguientes estilos.
                    @charset "utf-8";
                    /* CSS Document */
                        *{
                              padding:0px;
                              margin-top:inherit;
                        }

                        #header {
                              padding-top: 120px;
                        }

                        /* Formato del menú completo */
                        #menu {
                               margin:0 auto;
                               width:1000px;
                               font-family:Calibri;
                               font-size:12px;
                               text-align:center;
                        }


© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web   49


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)


                12. El resultado será el siguiente:




                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.


                Definición de propiedades de fondo de estilos CSS
                       Background-color: Establece el color de fondo del elemento.
                       Background-image: Establece la imagen de fondo para el elemento.
                       Background-repeat: Determina si la imagen de fondo se repite y de qué
                        forma lo hace.


© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web      51


      Background-attachment: Determina si la imagen de fondo está fija en su
       posición original o se desplaza con el contenido.
      Background-position (X) y Background-position (Y): Especifican la
       posición inicial de la imagen de fondo en relación con el elemento.


Definición de propiedades de bloque de estilos CSS
      Word-spacing: Establece el espacio adicional entre las palabras.
      Letter-spacing: Aumenta o disminuye el espacio entre letras o caracteres.
      Vertical-align: Especifica la alineación vertical del elemento al que se
       aplica.
      Text-align: Establece cómo se alineará el texto dentro del elemento.
      Text-indent: Especifica la cantidad de sangría que se aplica a la primera
       línea de texto.
      White-space: Determina de qué forma se gestiona el espacio en blanco
       dentro del elemento.
      Display: Especifica si un elemento se muestra y, si es así, cómo lo hace.


Definición de las propiedades del cuadro de estilos CSS
      Width y Height: Establecen el ancho y alto del elemento.
      Float: Determina qué lado de otros elementos, como texto, Div PA, tablas,
       etc., flotará alrededor de un elemento.
      Clear: Define los lados que no permiten elementos PA. Si aparece un
       elemento PA en el lado libre, el elemento con esta configuración pasará a
       situarse debajo de él.
      Padding: Especifica la cantidad de espacio entre el contenido de un
       elemento y su borde (o el margen si no hay ningún borde).
      Margin: Especifica la cantidad de espacio entre el borde de un elemento
       (o el relleno si no hay borde) y otro elemento.
52    Diseño de Páginas Web (Dreamweaver CS6)


                       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.


                Definición de propiedades de borde de estilos CSS
                       Style: Establece el aspecto del estilo del borde.
                       Igual para todo: Establece las mismas propiedades de estilo de borde para
                        Top, Right, Bottom y Left.
                       Width: Especifica el grosor del borde del elemento.
                       Igual para todo: Establece el mismo borde para Top, Right, Bottom y Left.
                       Color: Establece el color del borde: Puede especificar colores distintos
                        para cada lado, pero su visualización dependerá del navegador.
                       Igual para todo: Establece el mismo color de borde para Top, Right,
                        Bottom y Left.


                Definición de las propiedades de lista de estilos CSS
                       List-style-type: Establece el aspecto de viñetas o números.
                       List-style-image: Permite especificar una imagen personalizada para
                        viñetas.
                       List-style-Position: Determina si el elemento de texto de la lista se ajusta a
                        una sangría (outside) o si el texto se ajusta al margen izquierdo (inside).


                Definición de las propiedades de posición de estilos CSS
                       Position: Determina cómo deberá colocar el navegador el elemento
                        seleccionado. Ofrece las opciones siguientes:
                        -   Absolute: coloca el contenido utilizando las coordenadas introducidas
                            en los cuadros Placement en relación con el ascendente más próximo
                            con posición absoluta o relativa o, si no hay ningún ascendente con


© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 4 – Formato a la Página Web    53


        posición absoluta o relativa, con la esquina superior izquierda de la
        página.
    -   Relative: coloca el bloque de contenido utilizando las coordenadas
        introducidas en los cuadros Placement en relación con la posición del
        bloque en el flujo de texto del documento.
    -   Fixed: coloca el contenido utilizando las coordenadas introducidas en
        los cuadros Placement en relación con la esquina superior izquierda del
        navegador.
    -   Static: coloca el contenido en su ubicación en el flujo de texto. Esta es
        la posición predeterminada de todos los elementos HTML que pueden
        colocarse.
   Visibility: Determina el estado inicial de visualización del contenido. La
    visibilidad predeterminada de la etiqueta body es visible. Seleccione una
    de las siguientes opciones de visibilidad:
    -   Inherit: hereda la propiedad de visibilidad del padre del contenido.
    -   Visible: muestra el contenido, independientemente del valor del
        contenido padre.
    -   Hidden: no muestra el contenido, independientemente del valor del
        contenido padre.
   Z-Index: Determina el orden de apilamiento del contenido. Los elementos
    con un índice z superior aparecen por encima de los elementos con un
    índice z inferior (o sin índice z). Los valores pueden ser positivos o
    negativos.
   Overflow: Determina lo que debe ocurrir si el contenido de un contenedor
    (por ejemplo, una DIV o una P) supera el tamaño de éste. Estas
    propiedades controlan la ampliación de la siguiente manera:
    -   Visible: aumenta el tamaño del contenedor para que todo su
        contenido sea visible. El contenedor se expande hacia abajo y hacia la
        derecha.
54    Diseño de Páginas Web (Dreamweaver CS6)


                        -   Hidden: mantiene el tamaño del contenedor y recorta cualquier
                            contenido que no quepa. No hay barras de desplazamiento.
                        -   Scroll:   añade       barras     de   desplazamiento     al   contenedor
                            independientemente de que el contenido exceda o no el tamaño del
                            contenedor.
                        -   Auto: presenta las barras de desplazamiento solamente cuando el
                            contenido del contenedor excede de sus límites.
                       Placement: Especifica la ubicación y el tamaño del bloque de contenido.
                       Clip: Define la parte del contenido que será visible.


                Definición de las propiedades de extensiones de estilos CSS
                       Page-break-before: Efectúa un salto de página al imprimir antes o después
                        del objeto al que se aplica el estilo.
                       Cursor: Cambia la imagen del puntero cuando éste se encuentra sobre el
                        objeto al que se aplica el estilo.
                       Filter: Aplica efectos especiales al objeto controlado por el estilo, incluidos
                        desenfoque e inversión.




© 2013. Derechos Reservados Daniel Olalde Soto.
UNIDAD                        5
                         IMÁGENES.

5.1   Concepto de Imagen.

5.2 Insertar imágenes.

5.3 Insertar marcadores de posición de imagen.

5.4 Propiedades de imágenes.

5.5 Imagen de sustitución (Rollover).

5.6 Objetos inteligentes.
56    Diseño de Páginas Web (Dreamweaver CS6)


                                                  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.


                5.2 Insertar imágenes.
                Cuando se insertan imágenes en Dreamweaver, el programa genera una
         referencia del archivo de imagen.
                Para insertar imágenes en Dreamweaver, realiza:
                1. Posiciónate en el lugar donde desees colocar la imagen.
                2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro de
                    diálogo Seleccionar origen de imagen:
                    A) Metacomando < Ctrl + Alt + I >.
                    B) Panel Insertar  Categoría Común  Imagen.
                    C) Menú Insertar  Imagen.
                3. En el cuadro de diálogo abierto, selecciona la imagen que desees insertar en
                    el documento.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 5 – Imágenes   57


4. Una vez selecciona la imagen, haz clic en Aceptar.
5. Se mostrará una ventana emergente que te preguntará si deseas crear una
   copia del archivo en la carpeta del sitio, pulsa en el botón Sí.
   Teclea el nombre de la imagen o deja el nombre que se muestra por default.
6. Haz clic en Guardar.
   Si se ha activado el cuadro de diálogo Preferencias, aparecerá el cuadro de
   diálogo Atributos de accesibilidad de la etiqueta de imagen, donde podrás
   configurar:
       -   Texto alternativo. Se emplea para anotar un texto en caso de que no
           se muestre la imagen en el navegador.
       -   Descripción larga. Anota la ubicación de un archivo, que aparecerá
           cuando el usuario haga clic en la imagen o en el ícono de carpeta para
           desplazarse hasta el archivo.




7. Por último haz clic en Aceptar, para insertar la imagen.
58    Diseño de Páginas Web (Dreamweaver CS6)


                5.3 Marcadores de posición de imagen.
                 Los marcadores de posición de imagen son gráficos que se utilizan hasta que el
         gráfico definitivo esté listo para su incorporación al sitio Web.
                 Para insertar marcadores de posición de imagen, realiza:
                 1. Sitúate en el lugar del documento donde desees colocar el marcador de
                    posición de imagen.
                 2. Después realiza cualquiera de las siguientes opciones, para abrir el cuadro de
                    diálogo Marcador de posición de imagen.
                    A) Menú Insertar  Objetos de imagen  Marcador de posición de imagen.
                    B) Categoría Común del panel Insertar, haz clic sobre el menú Imágenes y
                        selecciona el ícono Marcador de posición de imagen.
                 3. En el cuadro de diálogo abierto, selecciona el tamaño y color del marcador, y
                    asígnale una etiqueta de texto.




                 4. Para finalizar, haz clic en Aceptar.


                    Sustitución de un Marcador de posición de imagen.
                    Para poder actualizar el origen de la imagen, realiza:
                    1. Da doble clic sobre el marcador de posición de imagen o del Inspector de
                        propiedades, haz clic en el ícono de Carpeta situado junto al campo de
                        Origen.


© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 5 – Imágenes   59


          2. Se abrirá el cuadro de diálogo Seleccionar origen de imagen, ahí
             selecciona la imagen que desees remplazar en el marcador de posición de
             imagen.




          3. Por último, presiona el botón Aceptar.
          Nota: Cuando se visualice en el navegador, el texto de etiqueta y tamaño no
          mostrarán.


     5.4 Propiedades de imágenes.
      Para modificar las propiedades de las imágenes, utiliza el Inspector de
propiedades; una vez que tengas la imagen seleccionada.
60   Diseño de Páginas Web (Dreamweaver CS6)



                        1

                                                            8
                            5                                            12
                                        4
                                                                                                   13
                                                                10
                                                                 1




                                    7
                                                                          11
                    3               1
         2                                                           9
                                                  6                  1


              1. ID. Asigna un nombre como identificador para usarlo después como
                  comportamiento.
              2. Mapa. Permite asignar una etiqueta y crear un mapa de imagen.
              3. Herramientas de Zona interactiva. Permite crear zonas en donde el usuario
                  pueda interactuar con la imagen.
              4. Origen. Muestra la ubicación de la imagen.
              5. Vínculo. Especifica un hipervínculo a la imagen.
              6. Destino. Especifica el marco o la ventana donde se cargará la página vinculada.
              7. Original. Permite reemplazar la imagen actual por otra imagen.
              8. Alt. Asigna un texto alternativo en caso de que no se muestre dicha imagen.
              9. Herramientas Editar. Permite editar la imagen para mejorar su presentación.
              10. An. Especifica el ancho de la imagen.



© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 5 – Imágenes     61


   11. Alt. Especifica el alto de la imagen.
   12. Alternar restricción de tamaño. Activa esta opción en caso de querer restringir
       proporcionalmente el tamaño de la imagen.
   13. Clase. Asigna un estilo CSS creado con anterioridad.


     5.5 Imagen de sustitución (Rollover).
       Una imagen de sustitución es aquella que, al visualizarse en un navegador,
cambia cuando el puntero se posiciona sobre ella.
       Para crear una imagen de sustitución se requieren dos imágenes: la imagen
principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la
que se muestra al posicionar el puntero sobre la imagen principal). Ambas imágenes
deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia el
tamaño de la segunda imagen para que se ajuste a las propiedades de la primera.
       Las imágenes de sustitución están automáticamente configuradas para que
respondan al evento onMouseOver.
       Para crear una imagen de sustitución, realiza:
       1.   Posiciona el puntero en el lugar donde deseas que aparezca la imagen de
            sustitución.
       2.   Después realiza cualquiera de las siguientes opciones, para abrir el cuadro de
            diálogo Insertar imagen de sustitución.
            A. Categoría Común del panel Insertar, haz clic en el menú Imágenes y
               selecciona el icono Imagen de sustitución.
            B. Menú Insertar  Objetos de imagen  Imagen de sustitución.
       3.   Configura las opciones y haz clic en Aceptar.
62     Diseño de Páginas Web (Dreamweaver CS6)




                       Nombre de la imagen. Especifica el nombre de la imagen de sustitución.
                       Imagen original. La imagen que se mostrará al cargarse la página.
                       Imagen de sustitución. La imagen que se visualizará cuando el puntero
                        pase por encima de la imagen original.
                       Precargar imagen de sustitución. Realiza una carga previa de imágenes en
                        la caché del navegador para que la imagen no tarde en aparecer cuando el
                        usuario pase el puntero sobre la imagen.
                       Texto alternativo (Opcional). Texto que describa la imagen para los
                        usuarios que utilicen un navegador de sólo texto.
                       Al hacerse clic, ir a URL. El archivo que desea que se abra cuando un
                        usuario haga clic en la imagen de sustitución.


                5.6 Objetos inteligentes.
                 Un objeto inteligente es una imagen para Web que mantiene una conexión en
         vivo con la imagen original de Photoshop. Al actualizar la imagen original en Photoshop,
         Dreamweaver ofrece la posibilidad de actualizar la imagen en Dreamweaver simplemente
         haciendo clic en un botón.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 5 – Imágenes   63


Para inserta un objeto inteligente, realiza:
1. Sitúa el puntero en el lugar de la página donde desees insertar el objeto
   inteligente (la imagen).
2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro de
   diálogo Seleccionar origen de imagen:
   A) Metacomando < Ctrl + Alt + I >.
   B) Panel Insertar  Categoría Común  Imagen.
   C) Menú Insertar  Imagen.
   D) También puedes arrastrar el archivo PSD a la página desde el panel
       Archivos si se almacenan los archivos de Photoshop en el sitio Web (sí es
       así, omite el paso siguiente).
3. Localiza el archivo de imagen PSD de Photoshop en el cuadro de diálogo
   Seleccionar origen de imagen.




4. En el cuadro de diálogo Optimización de imágenes que aparece, ajusta la
   configuración de optimización como sea necesario y haz clic en Aceptar.
64    Diseño de Páginas Web (Dreamweaver CS6)




                5. Guarda el archivo de imagen para la Web en una ubicación dentro de la
                    carpeta raíz de su sitio Web.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 5 – Imágenes   65


              TRABAJOS DE INVESTIGACIÓN


1. Extensiones de imágenes que permite Dreamweaver insertar al documento.
2. Insertar Imágenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD             6
                     HIPERVÍNCULOS.

6.1   Concepto de Hipervínculo.

6.2 Tipos de rutas de los vínculos.

6.3 Crear hipervínculos.

6.4 Destino de los hipervínculos.

6.5 Anclaje con nombre.

6.6 Vínculo a correo electrónico.

6.7 Menú de salto.

6.8 Zonas interactivas.
Unidad 6 – Hipervínculos   67


                                   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.


      6.2 Tipos de rutas de los vínculos.
      Cuando se crean vínculos, resulta fundamental conocer la ruta de archivo entre el
documento desde el que establece el vínculo y el documento con el que lo establece.
      Cada Página Web tiene una dirección exclusiva, denominada URL (Localizador
Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un
vínculo local (un vínculo de un documento con otro documento del mismo sitio), no suele
ser necesario especificar el URL completo del documento de destino.


      6.2.1 Rutas absolutas.
      Proporcionan la URL completa del documento vinculado, incluido el protocolo
que se debe usar (http://), por ejemplo, http://www.dcompusite.blogspot.com/.


      6.2.2 Rutas relativas al documento.
       Se emplean para vínculos locales, resultan particularmente útiles cuando el
documento actual y el documento con el que se establece el vínculo se encuentran en la
misma carpeta, por ejemplo, dreamweaver/contents.html.


      6.2.3 Rutas relativas a la raíz del sitio.
      Indican la ruta desde la carpeta raíz del sitio hasta un documento. Se usan cuando
se trabaja con un sitio Web grande que usa varios servidores o un servidor que alberga
varios sitios, por ejemplo, /support/dreamweaver/contents.html.
68     Diseño de Páginas Web (Dreamweaver CS6)


                6.3 Crear hipervínculos.
                 Para crear hipervínculos en Dreamweaver CS6, realiza lo siguiente:
                 1. Selecciona el texto o imagen y del Inspector de propiedades da clic en el cuadro
                    de texto Vínculo                                     .
                 2. Escribe la ruta y el nombre del archivo del documento o URL en el cuadro de
                    texto Vínculo o haz clic en la carpeta y selecciona el archivo (si se desea
                    realizar una referencia absoluta).
                 3. En el menú desplegable Destino, selecciona una ubicación para abrir la página.




                 Otra forma de crear hipervínculos es desde el menú Insertar  Hipervínculo. Se
         mostrará el cuadro de diálogo Hipervínculo, donde deberás especificar las siguientes
         propiedades:
                       Texto. Especifica el texto que se empleará como vínculo.
                       Vínculo. Asigna la ruta del hipervínculo.
                       Destino. Especifica la ubicación para abrir el archivo.
                       Título. Escribe un título de página para el hipervínculo.
                       Clave de acceso. Permite introducir una tecla para activar el hipervínculo
                        en el navegador con dicha tecla.
                       Índice de fichas. Introduce un número para el orden de fichas.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 6 – Hipervínculos   69




     6.4 Destino de los hipervínculos.
       El destino del hipervínculo determina en qué ventana va a ser abierto el vínculo.
Esto puede especificarse desde el Inspector de propiedades, categoría HTML a través de
la opción Destino, o en el cuadro de diálogo Hipervínculo del menú Insertar 
Hipervínculo.
       _blank carga el documento vinculado en una nueva ventana sin nombre del
navegador.
       new carga el documento vinculado en una nueva ventana del navegador.
       _parent carga el documento vinculado en el marco padre o en la ventana padre
del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado,
el documento vinculado se cargará en la ventana completa del navegador.
       _self carga el documento vinculado en el mismo marco o la misma ventana que
el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso
especificarlo.
       _top carga el documento vinculado en la ventana completa del navegador,
eliminando de esta forma todos los marcos.
70    Diseño de Páginas Web (Dreamweaver CS6)


                6.5 Anclaje con nombre.
                 Los anclajes con nombre permiten establecer marcadores en un documento, que
         por lo regular se colocan en un tema específico o en la parte superior del documento.
                 Para crear un anclaje con nombre, realiza lo siguiente:
                 1. Coloca el cursor en el lugar donde se desea insertar el anclaje con nombre.
                 2. Después realiza alguno de los siguientes procedimientos:
                    A) Menú Insertar  Anclaje con nombre.
                    B) Metacomando < Control + Alt + A >.
                    C) Del panel Insertar, Categoría Común, haz clic en el botón Anclaje con
                        nombre.




                 3. En el cuadro Nombre de anclaje, escribe un nombre para el anclaje y haz clic
                    en Aceptar. (El nombre del anclaje no puede contener espacios.)
                    El marcador del anclaje aparecerá en el punto de inserción.


                 Para usar el anclaje con nombre en un hipervínculo, realiza:
                 1. Selecciona el texto o imagen que servirá como anclaje.
                 4. Después realiza alguno de los siguientes procedimientos:
                    A) Menú Insertar  Hipervínculo.
                    B) Del panel Insertar, Categoría Común, haz clic en el botón Hipervínculo.
                    C) Del Inspector de propiedades, posiciónate en el cuadro de texto Vínculo.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 6 – Hipervínculos   71


       2. En cualquiera de las tres opciones anteriores, desplegar el menú contextual
          de Vínculo y elige el marcador de
          texto a emplear en el hipervínculo.


       Nota: Todo los anclajes con nombre
aparecerán con el signo “#” al principio del nombre de anclaje asignado.


     6.6 Vínculo a correo electrónico.
       Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva
ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador
del usuario). En la ventana de mensaje de correo electrónico, el cuadro “Para” se
actualiza automáticamente con la dirección especificada en el vínculo del mensaje de
correo electrónico.
       Para crear un vínculo de correo electrónico, realiza:
       1. Sitúate en el menú Insertar  Vínculo de correo electrónico.
          O del panel Insertar de la categoría Común, haz clic en el botón Vínculo de
          correo electrónico.
       2. Se mostrará el cuadro de diálogo Vínculo de correo electrónico, en donde se
          habrá de especificar las siguientes propiedades:
          Texto. Define el texto que se mostrará como vínculo de correo electrónico.
          Correo electrónico. Define el correo electrónico al cual se va a mandar la
          información.
72     Diseño de Páginas Web (Dreamweaver CS6)


                 3. Por último, haz clic en Aceptar.
                 Otra forma de crear un hipervínculo a un correo electrónico, es desde el Inspector
         de propiedades, en la opción Vínculo deberás teclearla palabra MAILTO, seguida de dos
         puntos y el correo electrónico (MAILTO:daniel.olalde@gmail.com).




                6.7 Menú de salto.
                 Un menú de salto es un menú emergente de un documento que pueden ver los
         visitantes del sitio y que ofrece vínculos con documentos o archivos. Puedes crear
         vínculos con documentos del sitio Web, documentos de otros sitios, correo electrónico,
         gráficos o cualquier tipo de archivo que se pueda abrir en un navegador.
                 Cada opción de un menú de salto está asociada a un URL. Cuando los usuarios
         eligen una opción, se les remite al URL asociado. Los menús de salto se insertan dentro
         del objeto de formulario Menú de salto.
                 Un menú de salto puede contener tres componentes:
                      • Opcional: un mensaje de selección de menú, como la descripción de una
                        categoría para los elementos del menú o instrucciones, como “Elija una
                        opción”.
                      • Obligatorio: una lista de elementos de menú vinculados: el usuario elige una
                        opción y se abre un documento o un archivo vinculado.
                      • Opcional: un botón Ir.
                 Para insertar un menú de salto, realiza:
                 1. Sitúa el punto de inserción en la ventana de documento.
                 2.    Luego realiza alguno de los siguientes procedimientos:




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 6 – Hipervínculos   73


      A) Menú Insertar  Formulario  Menú de salto.
      B) En la categoría Formulario del panel Insertar, haz clic en el botón Menú
        de salto.
3. Se mostrará el cuadro de diálogo Insertar menú de salto, en donde deberás
   especificar las siguientes opciones:
      • Botón más (+). Inserta un nuevo elemento.
      • Botón menos (-). Elimina un elemento.
      • Botones de flecha. Suben o bajan puestos en la lista.
      • Texto. Escribe el nombre de un elemento sin nombre.
      • Al seleccionarse, ir a URL. Accede al archivo de destino o escribe su
        ruta.
      • Abrir URL en. Especifica si el archivo debe abrirse en la misma ventana
        o en un marco.
      • Insertar botón Ir tras el menú. Selecciona esta opción para insertar un
        botón Ir en lugar de un mensaje de selección de menú.
      • Seleccionar primer elemento tras el cambio de URL. Selecciona esta
        opción si has insertado un mensaje de selección de menú (“Elija una
        opción”) como primer elemento del menú.
74     Diseño de Páginas Web (Dreamweaver CS6)




                 4. Para finalizar, haz clic en Aceptar.


                6.8 Zonas interactivas.
                 Un mapa de imagen es una imagen que se ha dividido en regiones o zonas
         interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una acción.
                 Al insertar un mapa de imagen del lado del usuario, se crea una zona interactiva y,
         a continuación, se define un vínculo que se abrirá cuando el usuario haga clic en la zona
         interactiva.
                 Para crear una zona interactiva, realiza:
                 1. Selecciona la imagen a la que desees aplicar la zona interactiva.
                 2. En el cuadro de texto Mapa del Inspector de propiedades, introduce un
                    nombre exclusivo para el mapa de imagen.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 6 – Hipervínculos   75


3. Selecciona la herramienta circular, rectangular o poligonal, según sea el caso
   y arrastrando el puntero sobre la imagen crea la zona interactiva.
4. Una vez seleccionada la zona interactiva, en el cuadro Vínculo, escribe el
   hipervínculo o haz clic sobre el ícono Carpeta para localizar y seleccionar el
   archivo que deberá abrirse cuando el usuario haga clic en la zona interactiva.
5. En el cuadro de lista desplegable Destino, selecciona la ventana o marco
   donde se abrirá el vínculo.
6. En el cuadro de texto Alt, escribe el texto alternativo en caso de que no se
   muestre la imagen en el navegador.
7. Al terminar de definir todas las zonas interactivas del mapa de imagen, da clic
   en un área en blanco del documento para cambiar el Inspector de propiedades.




               TRABAJOS DE INVESTIGACIÓN


1. Extensiones de imágenes que permite Dreamweaver insertar al documento.
2. Insertar Imágenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD            7
            DISEÑO DE LA PÁGINA WEB.

7.1   Concepto de Tabla.

7.2 Creación de tablas.

7.3 Formato de tablas y celdas.

7.4 Insertar filas y columnas.

7.5 Eliminar filas y columnas.

7.6 Combinar o dividir celdas.

7.7 Anidar tablas.

7.8 Ordenar tablas.

7.9 Concepto de marcos.

7.10 Crear marcos.

7.11 Seleccionar marcos.

7.12 Guardar marcos.

7.13 Propiedades de los marcos.

7.14 Hipervínculos en marcos.
Unidad 7 – Diseño de la Página Web   77


                             DISEÑO DE LA PÁGINA WEB.
      7.1 Concepto de Tabla.
      Una tabla es la herramienta eficaz para presentar una serie de datos de forma
clara y organizada en una Página Web. También son usadas para el diseño del
documento.
      Las tablas están compuestas por filas y columnas, y la intersección entre una fila
y una columna es conocida con el nombre de celda.


      7.2 Creación de tablas.
      Para insertar tablas en el documento, realiza cualquiera de las siguientes
opciones:
      1. Menú Insertar  Tabla.
      2. Metacomando < Ctrl + Alt + T >.
      3. Panel Insertar  Categoría Común  Tabla.
      Realizada alguna de las opciones anteriores, se mostrará el cuadro de diálogo
Tabla en donde se habrá de especificar:
               Filas. Determina el número de filas de la tabla.
               Columnas. Especifica el número de columnas de la tabla.
               Ancho de tabla. Establece el ancho de la tabla en pixeles o como
                porcentaje del ancho de la ventana del navegador.
               Grosor del borde. Define el ancho en pixeles de los bordes de la tabla.
               Relleno de celda. Detalla el número de pixeles entre el borde y el
                contenido de una celda.
               Espacio entre celdas. Especifica el número de pixeles entre celda
                contiguas de una tabla.
               Sección Encabezado. Brinda las siguientes opciones de encabezado:
                   o Ninguno. No permite encabezados de columna o de fila para la
                       tabla.
78    Diseño de Páginas Web (Dreamweaver CS6)


                           o Izquierda. Convierte la primera columna de la tabla en una columna
                               para encabezados, lo que permite introducir un encabezado para
                               cada fila de la tabla.
                           o Superior. Convierte la primera fila de la tabla en una fila de
                               encabezados, lo que permite introducir un encabezado para cada
                               columna de la tabla.
                           o Ambos. Permite introducir encabezados de columna y de fila de la
                               tabla.
                       Texto. El título de tabla que se ubica fuera de la misma.
                       Resumen. Descripción de la tabla.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 7 – Diseño de la Página Web   79


      7.3 Formato de tablas y celdas.
       El formato de las tablas y de las celdas se especifica a través del Inspector de
propiedades. Ambos elementos contienen diferentes atributos
       Para dar formato a la tabla, posiciona el puntero del mouse sobre las esquinas de
la tabla y luego haz clic izquierdo.

                                                                        6
                    1
                                                         4
                          2




                                         3                       7
                                                                                     8
                                                         5




       1. Id de tabla. Especifica un ID para la tabla.
       2. Filas y Cols. Número de filas y columnas que tendrá la tabla.
       3. An. El ancho de la tabla en píxeles o porcentaje.
       4. Rell. Celda. Determina el número de píxeles entre el contenido de una celda y
           los límites de la misma.
       5. Esp. Celda. Número de píxeles entre celdas de tabla contiguas.
       6. Alinear. Determina dónde aparecerá la tabla en relación con otros elementos
           del mismo párrafo, como por ejemplo texto o imágenes.
       7. Borde. Especifica el ancho en píxeles de los bordes de la tabla.
       8. Clase. Establece una clase CSS en la tabla.
80    Diseño de Páginas Web (Dreamweaver CS6)


                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



                1. Combinar celdas. Combina las celdas, filas o columnas seleccionadas para
                    crear una sola celda.
                2. Dividir celda. Divide una celda para crear dos o más celdas.
                3. Horiz. Especifica la alineación horizontal del contenido de una celda, fila o
                    columna.
                4. Vert. Especifica la alineación vertical del contenido de una celda, fila o
                    columna.
                5. An (Ancho) y Al (Alto). Configura el ancho y alto de las celdas seleccionadas
                    en píxeles o como porcentaje del ancho o alto total de la tabla.
                6. No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda en
                    una sola línea. Cuando la opción No aj. está activada, las celdas se adaptarán
                    para incluir todos los datos a medida que se introducen o pegan en una celda.




© 2013. Derechos Reservados Daniel Olalde Soto.
Unidad 7 – Diseño de la Página Web   81


 7. Encabezado. Aplica a la celda seleccionada el formato de celdas de
     encabezado de tabla. De forma predeterminada, el contenido de las celdas
     de encabezado de la tabla aparecerá en negrita y centrado.
 8. Fondo. El color de fondo de una celda, columna o fila elegido mediante el
     selector de color.


7.4 Insertar filas y columnas.
 Para añadir filas y columnas a la tabla, realiza:
     1. Posiciónate en la celda de acuerdo donde quieras insertar la fila o columna.
     2. Haz clic en el menú Modificar  Tabla  Insertar filas o columnas. O
        presiona los Metacomandos:
        < Ctrl + M > = Insertar fila.
        < Ctrl + Shift + A > = Insertar columna.
    3. Si se elige la opción Insertar filas o columnas, se mostrará el cuadro de
        diálogo Insertar filas o columnas; donde se habrá de especificar el número
        de filas o columnas y el lugar donde se insertarán.




    4. Una vez configurada la ventana, pulsa sobre el botón Aceptar.
82      Diseño de Páginas Web (Dreamweaver CS6)


                 7.5 Eliminar filas y columnas.
                  Para eliminar una fila o una columna, haz clic en una celda que desees eliminar y
         selecciona el menú Modificar  Tabla  Eliminar fila o Eliminar columna, según sea el
         caso.
                  También puedes seleccionar una fila o columna completa y luego dar clic en el
         menú Edición  Borrar o presionar la tecla < Supr >.


                 7.6 Combinar o dividir celdas.
                  Dreamweaver, incluye herramientas que permiten aumentar o disminuir el
         número de filas o columnas que ocupa una celda.
                  Para combinar celdas en una tabla, primero se deben tener seleccionadas las
         celdas contiguas a combinar. Luego posicionarse en el menú Modificar  Tabla 
         Combinar celdas.
                  Otra opción es desde el botón Combinar celdas         del Inspector de propiedades
         ampliado.
                  Para dividir una celda, haz clic en la celda y selecciona el menú Modificar  Tabla
          Dividir celda.
                  O desde el botón Dividir celdas       el Inspector de propiedades ampliado.
                  En el cuadro de diálogo Dividir celda, especifica cómo deseas dividirla.




© 2013. Derechos Reservados Daniel Olalde Soto.
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6
Curso Dreamweaver CS6

Más contenido relacionado

La actualidad más candente

Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
alya123
 
Cómo subir archivos en slideshare
Cómo subir archivos en slideshareCómo subir archivos en slideshare
Cómo subir archivos en slideshare
Renata Rodrigues
 

La actualidad más candente (20)

Cài đặt windows 8.1 64bit tự động qua mạng lan part 3
Cài đặt windows 8.1 64bit tự động qua mạng lan   part 3Cài đặt windows 8.1 64bit tự động qua mạng lan   part 3
Cài đặt windows 8.1 64bit tự động qua mạng lan part 3
 
Curso de diseño CSS
Curso de diseño CSSCurso de diseño CSS
Curso de diseño CSS
 
Ejercicios de HTML
Ejercicios de HTMLEjercicios de HTML
Ejercicios de HTML
 
Fichas de la ventana principal de Word 2010
Fichas de la ventana principal de Word 2010Fichas de la ventana principal de Word 2010
Fichas de la ventana principal de Word 2010
 
What is a Content Management System or CMS
What is a Content Management System or CMSWhat is a Content Management System or CMS
What is a Content Management System or CMS
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
100 ejercicios para hacer examenes de microsoft word
100 ejercicios para hacer examenes de microsoft word100 ejercicios para hacer examenes de microsoft word
100 ejercicios para hacer examenes de microsoft word
 
Cuestionario power point
Cuestionario power pointCuestionario power point
Cuestionario power point
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Tema 4 estrategias de diseño
Tema 4 estrategias de diseñoTema 4 estrategias de diseño
Tema 4 estrategias de diseño
 
Microsoft Office Word 2007
Microsoft Office Word 2007Microsoft Office Word 2007
Microsoft Office Word 2007
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Cómo subir archivos en slideshare
Cómo subir archivos en slideshareCómo subir archivos en slideshare
Cómo subir archivos en slideshare
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Software Libre vs Software Propietario
Software Libre vs Software PropietarioSoftware Libre vs Software Propietario
Software Libre vs Software Propietario
 
Integración de Netbeans con Ireport y SQL Server
Integración de Netbeans con Ireport y SQL ServerIntegración de Netbeans con Ireport y SQL Server
Integración de Netbeans con Ireport y SQL Server
 
Curso básico word
Curso básico wordCurso básico word
Curso básico word
 
Arenas_Camacho_Respaldos_SQLServer.pptx
Arenas_Camacho_Respaldos_SQLServer.pptxArenas_Camacho_Respaldos_SQLServer.pptx
Arenas_Camacho_Respaldos_SQLServer.pptx
 
Crear Abrir y Eliminar Archivos y Carpetas
Crear Abrir y Eliminar Archivos y CarpetasCrear Abrir y Eliminar Archivos y Carpetas
Crear Abrir y Eliminar Archivos y Carpetas
 
Ventana de word
Ventana de wordVentana de word
Ventana de word
 

Destacado (6)

Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Practica 3.1. combinar correspondencia instrucciones
Practica 3.1. combinar correspondencia instruccionesPractica 3.1. combinar correspondencia instrucciones
Practica 3.1. combinar correspondencia instrucciones
 
Lecciones aprendidas via don bosco
Lecciones aprendidas via don boscoLecciones aprendidas via don bosco
Lecciones aprendidas via don bosco
 
ILLUSTRATOR CS6
ILLUSTRATOR CS6ILLUSTRATOR CS6
ILLUSTRATOR CS6
 
Manual de Practicas Photoshop
Manual de Practicas PhotoshopManual de Practicas Photoshop
Manual de Practicas Photoshop
 
Modulo Photoshop Cs 6
Modulo Photoshop Cs 6Modulo Photoshop Cs 6
Modulo Photoshop Cs 6
 

Similar a Curso Dreamweaver CS6

Manual de power point
Manual de power pointManual de power point
Manual de power point
wolve_max07
 
Web Social y Deporte
Web Social y DeporteWeb Social y Deporte
Web Social y Deporte
digitalde
 
Manuaql de dreamweaver
Manuaql de dreamweaverManuaql de dreamweaver
Manuaql de dreamweaver
isandy
 
Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)
reyestarita
 

Similar a Curso Dreamweaver CS6 (20)

Manual de power point
Manual de power pointManual de power point
Manual de power point
 
Dreamweaver CS5
Dreamweaver CS5 Dreamweaver CS5
Dreamweaver CS5
 
OOCSS - @janogarcia
OOCSS - @janogarciaOOCSS - @janogarcia
OOCSS - @janogarcia
 
Web Social y Deporte
Web Social y DeporteWeb Social y Deporte
Web Social y Deporte
 
Curso online-dreamweaver-cs4-lw
Curso online-dreamweaver-cs4-lwCurso online-dreamweaver-cs4-lw
Curso online-dreamweaver-cs4-lw
 
Dreamwaver cs5
Dreamwaver cs5 Dreamwaver cs5
Dreamwaver cs5
 
Computacion prepa tec milenio
Computacion prepa tec milenioComputacion prepa tec milenio
Computacion prepa tec milenio
 
Dreamwaver cs5
Dreamwaver cs5Dreamwaver cs5
Dreamwaver cs5
 
Dreamwaver cs5
Dreamwaver cs5Dreamwaver cs5
Dreamwaver cs5
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Curso Dream Weaver04
Curso Dream Weaver04Curso Dream Weaver04
Curso Dream Weaver04
 
Manual microsoft office word 2013
Manual microsoft office word 2013Manual microsoft office word 2013
Manual microsoft office word 2013
 
Curso dream weaver04
Curso dream weaver04Curso dream weaver04
Curso dream weaver04
 
Dreamweaver 2004
Dreamweaver 2004Dreamweaver 2004
Dreamweaver 2004
 
Manuaql de dreamweaver
Manuaql de dreamweaverManuaql de dreamweaver
Manuaql de dreamweaver
 
Bootstrap-Desarrollo-Web-Responsive.pdf
Bootstrap-Desarrollo-Web-Responsive.pdfBootstrap-Desarrollo-Web-Responsive.pdf
Bootstrap-Desarrollo-Web-Responsive.pdf
 
Web corporativa con Drupal
Web corporativa con DrupalWeb corporativa con Drupal
Web corporativa con Drupal
 
Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)Camtasia getting started guide.ppt (victor)
Camtasia getting started guide.ppt (victor)
 
Guia revit structure
Guia revit structureGuia revit structure
Guia revit structure
 
Computacion prepa tec milenio
Computacion prepa tec milenioComputacion prepa tec milenio
Computacion prepa tec milenio
 

Más de Daniel Olalde Soto

Más de Daniel Olalde Soto (20)

CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANACONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
 
CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANACONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
CONVOCATORIA 2022 ESCUELA DE ENFERMERÍA DE CRUZ ROJA MEXICANA
 
Zoom
ZoomZoom
Zoom
 
Curso classroom
Curso classroomCurso classroom
Curso classroom
 
Practica 1
Practica 1Practica 1
Practica 1
 
Word 2013
Word 2013Word 2013
Word 2013
 
Historia de la computacion y sus generaciones
Historia de la computacion y sus generacionesHistoria de la computacion y sus generaciones
Historia de la computacion y sus generaciones
 
Hardware
HardwareHardware
Hardware
 
Software
SoftwareSoftware
Software
 
Manual windows server 2008
Manual windows server 2008Manual windows server 2008
Manual windows server 2008
 
Html
HtmlHtml
Html
 
Temario access 2013
Temario access 2013Temario access 2013
Temario access 2013
 
Temario power point 2013
Temario power point 2013Temario power point 2013
Temario power point 2013
 
Prácticas de excel 2010
Prácticas de excel 2010Prácticas de excel 2010
Prácticas de excel 2010
 
Temario excel 2013
Temario excel 2013Temario excel 2013
Temario excel 2013
 
Temario word 2013
Temario word 2013Temario word 2013
Temario word 2013
 
Capas del modelo osi
Capas del modelo osiCapas del modelo osi
Capas del modelo osi
 
Redes
RedesRedes
Redes
 
Visual studio 2010
Visual studio 2010Visual studio 2010
Visual studio 2010
 
Manual asp
Manual aspManual asp
Manual asp
 

Último

ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdfANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
lvela1316
 

Último (20)

Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos EscolaresResumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
Resumen Acuerdo 05 04 24.pdf por el que se rigen los Consejos Técnicos Escolares
 
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
📝 Semana 09 - Tema 01: Tarea - Aplicación del resumen como estrategia de fuen...
 
Power Point : Motivados por la esperanza
Power Point : Motivados por la esperanzaPower Point : Motivados por la esperanza
Power Point : Motivados por la esperanza
 
4ª SESION la misión santificadora del Espíritu Santo en la vida de la Iglesi...
4ª SESION  la misión santificadora del Espíritu Santo en la vida de la Iglesi...4ª SESION  la misión santificadora del Espíritu Santo en la vida de la Iglesi...
4ª SESION la misión santificadora del Espíritu Santo en la vida de la Iglesi...
 
ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdfANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
ANTOLOGIA COMPLETA ANITA LA ABEJITA PARA LA LECTOESCRITURA EN PRIMER GRADO.pdf
 
Revista Faro Normalista 6, 18 de mayo 2024
Revista Faro Normalista 6, 18 de mayo 2024Revista Faro Normalista 6, 18 de mayo 2024
Revista Faro Normalista 6, 18 de mayo 2024
 
PLAN DE GESTION DEL RIESGO 2023 - 2024.docx
PLAN DE GESTION DEL RIESGO  2023 - 2024.docxPLAN DE GESTION DEL RIESGO  2023 - 2024.docx
PLAN DE GESTION DEL RIESGO 2023 - 2024.docx
 
2.15. Calendario Civico Escolar 2024.docx
2.15. Calendario Civico Escolar 2024.docx2.15. Calendario Civico Escolar 2024.docx
2.15. Calendario Civico Escolar 2024.docx
 
Sesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdfSesión de clase Motivados por la esperanza.pdf
Sesión de clase Motivados por la esperanza.pdf
 
a propósito del estado su relevancia y definiciones
a propósito del estado su relevancia y definicionesa propósito del estado su relevancia y definiciones
a propósito del estado su relevancia y definiciones
 
el poder del estado en el siglo XXI.pptx
el poder del estado en el siglo XXI.pptxel poder del estado en el siglo XXI.pptx
el poder del estado en el siglo XXI.pptx
 
2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx2. Entornos Virtuales de Aprendizaje.pptx
2. Entornos Virtuales de Aprendizaje.pptx
 
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
IMPLICACIONES BIOÉTICAS ANTE EL TRANSHUMANISMO A PARTIR DEL PENSAMIENTO FILOS...
 
Luz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela SabáticaLuz desde el santuario. Escuela Sabática
Luz desde el santuario. Escuela Sabática
 
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
📝 Semana 09 - Tema 01: Tarea - Redacción del texto argumentativo
 
Época colonial: vestimenta, costumbres y juegos de la época
Época colonial: vestimenta, costumbres y juegos de la épocaÉpoca colonial: vestimenta, costumbres y juegos de la época
Época colonial: vestimenta, costumbres y juegos de la época
 
11.NEOLIBERALISMO: que es, ventajas, desventajas, consecuenciaspptx
11.NEOLIBERALISMO: que es, ventajas, desventajas, consecuenciaspptx11.NEOLIBERALISMO: que es, ventajas, desventajas, consecuenciaspptx
11.NEOLIBERALISMO: que es, ventajas, desventajas, consecuenciaspptx
 
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docxcuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
cuadernillo_cuentos_de_los_valores_elprofe20 (1).docx
 
LA ORALIDAD, DEFINICIÓN Y CARACTERÍSTICAS.pptx
LA ORALIDAD, DEFINICIÓN Y CARACTERÍSTICAS.pptxLA ORALIDAD, DEFINICIÓN Y CARACTERÍSTICAS.pptx
LA ORALIDAD, DEFINICIÓN Y CARACTERÍSTICAS.pptx
 
PATRONES DE REFERENCIA, CRITERIOS Y DIAGNOSTICO Angeles.pptx
PATRONES DE REFERENCIA, CRITERIOS Y DIAGNOSTICO Angeles.pptxPATRONES DE REFERENCIA, CRITERIOS Y DIAGNOSTICO Angeles.pptx
PATRONES DE REFERENCIA, CRITERIOS Y DIAGNOSTICO Angeles.pptx
 

Curso Dreamweaver CS6

  • 1. Die d P gna sño e á i s We ( e mwe v r b Dr a a e)
  • 2. ii Diseño de Páginas Web (Dreamweaver CS6) © 2013. Derechos Reservados Daniel Olalde Soto.
  • 3. Contenido iii Sobre este libro… Usted es libre de:  Copiar, distribuir y comunicar públicamente la presente obra.  Realizar obras derivadas. Bajo las condiciones siguientes:  Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o licenciador.  No comercializar. No puede utilizar esta obra para fines lucrativos. Si deseas aportar sugerencias, comentarios, críticas o informar sobre errores, puedes enviar un mensaje a la siguiente dirección electrónica daniel.olalde@gmail.com.
  • 4. iv Diseño de Páginas Web (Dreamweaver CS6) © 2013. Derechos Reservados Daniel Olalde Soto.
  • 5. Contenido v CONTENIDO 1 Introducción a Dreamweaver CS6. 1 1.1. ¿Qué es Dreamweaver? 2 1.2. Acceso a Dreamweaver. 2 1.3. Ambiente de Dreamweaver. 3 1.4. Vistas del documento. 4 1.4.1. Vista Código. 1.4.2. Vista Diseño. 1.4.3. Vista Dividir. 1.4.4. Vista En vivo. 1.4.5. Vista Código en vivo. 1.4.6. Vista previa en el navegador. 1.5. Crear un nuevo documento. 9 1.6. Abrir un documento. 9 1.7. Guardar un documento. 10 1.8. Importar y exportar documentos. 11 1.9. Cerrar y salir de Dreamweaver. 12 2 Área de trabajo en Dreamweaver CS6. 13 2.1. Inspector de propiedades. 14 2.2. Barra de herramientas Documento. 14 2.3. Barra de herramientas Estado. 15 2.4. Barra de herramientas Navegación con navegador. 15 2.5. Panel Insertar. 16 2.6. Panel Estilos CSS. 17 3 Configurar un sitio en Dreamweaver. 19 3.1. Concepto de Sitio. 20 3.2. Tipos de Sitios en Dreamweaver. 20
  • 6. vi Diseño de Páginas Web (Dreamweaver CS6) 3.3. Estructura de una Página Web. 21 3.4. Configurar un sitio nuevo. 22 3.5. Configuración de un servidor de prueba. 22 3.6. Cuadro de diálogo Administrar sitios. 24 3.7. Panel Archivos. 25 4 Formato a la Página Web. 27 4.1 Propiedades de la página. 28 4.1.1 Categoría Apariencia (CSS). 4.1.2 Categoría Apariencia (HTML). 4.1.3 Categoría Vínculos (CSS). 4.1.4 Categoría Encabezados (CSS). 4.1.5 Categoría Título / Codificación. 4.1.6 Categoría Imagen de rastreo. 4.2 Comentarios. 33 4.3 Objeto Fecha. 33 4.4 Reglas horizontales. 34 4.5 Caracteres especiales. 35 4.6 Listas. 36 4.7 Formato al texto. 37 4.7.1 Menú Formato. 4.8 Concepto de Estilo CSS. 40 4.9 Crear estilos CSS. 41 4.9.1 Propiedades CSS. 4.10 Editar estilos CSS. 43 4.11 Vincular estilos CSS. 44 4.12 Menús usando hojas de estilos. 45 © 2013. Derechos Reservados Daniel Olalde Soto.
  • 7. Contenido vii 5 Imágenes. 55 5.1. Concepto de Imagen. 56 5.2. Insertar imágenes. 56 5.3. Marcadores de posición de imagen. 58 5.4. Propiedades de imágenes. 59 5.5. Imagen de sustitución (Rollover). 61 5.6. Objetos Inteligentes. 62 6 Hipervínculos. 66 6.1. Concepto de Hipervínculo. 67 6.2. Tipos de rutas de los vínculos. 67 6.2.1. Rutas absolutas. 6.2.2. Rutas relativas al documento. 6.2.3. Rutas relativas a la raíz del sitio. 6.3. Crear hipervínculos. 68 6.4. Destino de los hipervínculos. 69 6.5. Anclaje con nombre. 70 6.6. Vínculo a correo electrónico. 71 6.7. Menú de salto. 72 6.8. Zonas interactivas. 74 7 Diseño de la Página Web. 76 7.1 Concepto de Tabla. 77 7.2 Creación de tablas. 77 7.3 Formato de tablas y celdas. 79 7.4 Insertar filas y columnas. 81 7.5 Eliminar filas y columnas. 82 7.6 Combinar o dividir celdas. 82 7.7 Anidar tablas. 83 7.8 Ordenar tablas. 83
  • 8. viii Diseño de Páginas Web (Dreamweaver CS6) 7.9 Concepto de marcos. 84 7.10 Crear marcos. 84 7.11 Seleccionar marcos. 86 7.12 Guardar marcos. 86 7.13 Propiedades de los marcos. 88 7.14 Hipervínculos en marcos. 89 8 Formularios. 91 8.1 Concepto de Formulario. 92 8.2 Crear formularios. 92 8.3 Objetos de los formularios. 8.3.1 Elemento Campo de texto. 8.3.2 Elemento Área de texto. 8.3.3 Elemento Botón. 8.3.4 Elemento Casilla de verificación. 8.3.5 Elemento Botón de opción. 8.3.6 Elemento Seleccionar (Lista/Menú). 8.3.7 Elemento Campo de archivo. 8.3.8 Elemento Campo de imagen. 8.3.9 Elemento Campo oculto. 8.4 Validación de formularios aplicando JavaScript. 100 8.5 Validación de formularios usando HTML5. 101 9 Capas. 103 9.1 Concepto de Capa. 104 9.2 Insertar capas. 104 9.2.1 Etiqueta Div. 9.2.2 Etiqueta DIV de diseño de cuadricula fluida. 9.2.3 Div PA. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 9. Contenido ix 9.3 Propiedades de la capas. 105 9.4 Hojas de estilos en las capas. 107 10 Elementos multimedia. 108 10.1 Insertar Audio. 109 10.1.1 Etiqueta <AUDIO>. 10.1.2 Comando Plug-in. 10.2 Insertar Video. 111 10.2.1 Etiqueta <VIDEO>. 10.2.2 Comando Plug-in. 10.3 Archivo SWF. 112 10.4 Componente FLV. 113 10.5 Películas Shockwave. 114 10.6 Control ActiveX. 114 10.7 Elemento Applet. 114
  • 10.
  • 11. UNIDAD 1 INTRODUCCIÓN A DREAMWEAVER CS6. 1.1 ¿Qué es Dreamweaver? 1.2 Acceso a Dreamweaver. 1.3 Ambiente de Dreamweaver. 1.4 Vistas del documento. 1.5 Crear un nuevo documento. 1.6 Abrir un documento. 1.7 Guardar un documento. 1.8 Importar y exportar documentos. 1.9 Cerrar y salir de Dreamweaver.
  • 12. 2 Diseño de Páginas Web (Dreamweaver CS6) INTRODUCCIÓN A DREAMWEAVER CS6. 1.1 ¿Qué es Dreamweaver? Dreamweaver es el software para el desarrollo y diseño de Páginas Web adaptables para diversos dispositivos electrónicos. 1.2 Acceso a Dreamweaver. Para poder acceder a Dreamweaver existen diversas formas, pero las más usuales son: OPCIÓN 1: 1) Abre el menú Metro de Windows (Presionado la tecla de < Windows >). 2) Desplázate por los programas y haz clic en la aplicación Adobe Dreamweaver CS6. OPCIÓN 2: 1) Metacomando < Win + R >. 2) Teclea la palabra Dreamweaver. 3) Pulsa la tecla < Enter >. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 13. Unidad 1 – Introducción a Dreamweaver CS6 3 1.3 Ambiente de Dreamweaver. Pestañas del documento Barra de herramientas Documento s Botón de la Conmutador de Barra de menús aplicación espacios de trabajo s Área de trabajo Barra de herramientas Paneles Estado Inspector de propiedades 1.4 Vistas del documento. Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el contenido del documento, para así usar la vista con la que más nos agrade trabajar.
  • 14. 4 Diseño de Páginas Web (Dreamweaver CS6) 1.4.1 Vista Código. Presenta la codificación para escribir o editar manualmente el código con el que se esté trabajando. Para activar la Vista código, realiza cualquiera de las siguientes tres opciones: 1. Haz clic en botón Código de la Barra de herramientas documento. 2. Sitúate en el menú Ver y selecciona la opción Código. 3. O presiona la tecla < F10 >. Al realizar cualquiera de las tres opciones anteriores, se mostrará la Vista Código del documento con el que se esté trabajando. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 15. Unidad 1 – Introducción a Dreamweaver CS6 5 1.4.2 Vista Diseño. Muestra el contenido de la página web y permite editarlo. Activa la Vista Diseño, empleando cualquiera de las siguientes opciones: 1. Haz clic en botón Diseño de la Barra de herramientas Documento. 2. Sitúate en el menú Ver y selecciona la opción Diseño. 1.4.3 Vista Dividir. Separa en dos el área de trabajo, visualizando en una parte el código y en la otra la vista diseño. La Vista Dividir, se activa desde: 1. El botón Dividir de la Barra de herramientas Documento. 2. O desde el menú Ver  Código y Diseño.
  • 16. 6 Diseño de Páginas Web (Dreamweaver CS6) 1.4.4 Vista En vivo. Es casi similar a la vista diseño, sólo que en esta es posible interactuar con el contenido de la página tal y como se estuviera haciendo en el navegador. Activa la Vista En vivo, desde: 1. El botón Vista En vivo de la Barra de herramientas Documento. 2. Desde el menú Ver  Vista en vivo. 3. O Metacomando < Alt + F11 >. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 17. Unidad 1 – Introducción a Dreamweaver CS6 7 1.4.5 Vista Código en vivo. Divide en dos partes el área de trabajo, mostrando el contenido de la página web en vivo, y a la vez que es posible editar dicho contenido mediante código. Una vez que se haya activado la Vista En Vivo, es posible activar la Vista Código en vivo. Para ello realiza lo siguiente: 1. Haz clic en el botón Código en vivo de la Barra de herramientas Documento. 2. O desde el menú Ver  Código en vivo.
  • 18. 8 Diseño de Páginas Web (Dreamweaver CS6) 1.4.6 Vista previa en el navegador. Permite visualizar la página web en alguno de los navegadores instalados en el equipo (por lo regular es el navegador que se tiene por default). Para ejecutar la página en un navegador, presiona la tecla < F12 > o haz clic en el ícono de la Barra de herramientas Documento. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 19. Unidad 1 – Introducción a Dreamweaver CS6 9 1.5 Crear un nuevo documento Para crear un nuevo documento en Dreamweaver CS6, realiza lo siguiente: 1. Menú Archivo  Nuevo. En la categoría Página en blanco del cuadro de diálogo Nuevo documento, selecciona el tipo de página que deseas crear en la columna Tipo de página. 2. O Metacomando < Ctrl + N >. 1.6 Abrir un documento Para abrir un documento en Dreamweaver CS6, realiza lo que se señala a continuación: 1. Menú Archivo  Abrir. 2. O Metacomando < Ctrl + O >. Una vez realizado alguno de los procedimientos anteriores aparecerá el cuadro de diálogo Abrir, donde deberás seleccionar el documento a abrir.
  • 20. 10 Diseño de Páginas Web (Dreamweaver CS6) 1.7 Guardar un documento Para guardar un documento en Dreamweaver CS6, presiona el Metacomando < Ctrl + S > o haz clic en el menú Archivo  Guardar. Al guardar por primera vez un documento aparecerá el cuadro diálogo Guardar como, donde se habrá de especificar el nombre del archivo y el tipo de documento a guardar. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 21. Unidad 1 – Introducción a Dreamweaver CS6 11 1.8 Importar y exportar documentos. Dreamweaver, permite importar archivos al documento, para que éstos sean colocados en el área de trabajo. Los documentos que permite importar Dreamweaver CS6 son:  XML en plantilla. Dreamweaver crea un nuevo documento basado en la plantilla especificada en el archivo XML. Después rellena el contenido de cada región editable de ese documento con los datos del archivo XML. El documento resultante aparece en una nueva ventana de documento.  Datos de tabla. Importa datos de tabla en el documento guardando en primer lugar los archivos (por ejemplo, archivos de Microsoft Excel o archivos de base de datos) en formato de texto delimitado.
  • 22. 12 Diseño de Páginas Web (Dreamweaver CS6)  Documento de Word. Al importar un documento de Word, Dreamweaver recibe el HTML convertido y lo inserta en la página Web.  Documento de Excel. Importa al área de trabajo una hoja de cálculo y Dreamweaver la convierte en código HTML. Para importar cualquier documento a Dreamweaver, realiza: 1. Haz clic en el menú Archivo  Importar  Selecciona la opción del archivo que desees importar. Asimismo es posible exportar la página web a otros formatos, que son:  Datos de plantilla como XML.  Tabla. Para exportar la página Web, realiza lo siguiente: 1. Haz clic en el menú Archivo  Exportar  Selecciona la opción del archivo que desees exportar. 1.9 Cerrar y salir de Dreamweaver. Para cerrar un documento en Dreamweaver CS6, presiona el Metacomando < Ctrl + F4 >. Para salir de Dreamweaver, realiza: 1) Metacomando < Ctrl + Q > o < Alt + F4 >. 2) Menú Archivo  Cerrar. TRABAJOS DE INVESTIGACIÓN 1. Historia de Dreamweaver desde sus comienzos hasta la actualidad. 2. Novedades de Dreamweaver CS6. 3. Requisitos para instalar Dreamweaver CS6. 4. Concepto de Archivo XML. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 23. UNIDAD 2 ÁREA DE TRABAJO EN DREAMWEAVER CS6. 2.1 Inspector de propiedades. 2.2 Barra de herramientas Documento. 2.3 Barra de herramientas Estado. 2.4 Barra de herramientas Navegación con navegador. 2.5 Panel Insertar.
  • 24. 14 Diseño de Páginas Web (Dreamweaver CS6) ÁREA DE TRABAJO EN DREAMWEAVER CS6. 2.1 Inspector de propiedades. El Inspector de propiedades permite examinar y editar las propiedades más comunes del elemento seleccionado actualmente, como texto o cualquier objeto insertado. 2.2 Barra de herramientas Documento. La barra de herramientas Documento contiene los comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto. Vista Código Vista Diseño Multipantalla Administración de archivos Comprobar compatibilidad con navegadores Actualizar documento Ayudas visuales Validación W3C Vista previa Vista En vivo Vista Dividir Título de la página web © 2013. Derechos Reservados Daniel Olalde Soto.
  • 25. Unidad 2 – Área de trabajo en Dreamweaver CS6 15 2.3 Barra de herramientas Estado. La barra de herramientas Estado, se sitúa en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando. 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 Tamaño del documento y tiempo de descargar estimado Indicador de codificación 2.4 Barra de herramientas Navegación con navegador. La barra de herramientas Navegación con navegador se activa en la Vista en vivo y muestra la dirección de la página que está viendo en la ventana de documento. Vista Código en vivo Controles de navegador Opciones de la vista en vivo Cuadro de dirección Activar modo de inspección
  • 26. 16 Diseño de Páginas Web (Dreamweaver CS6) 2.5 Panel Insertar. El panel Insertar contiene botones para crear e insertar objetos al documento. Los botones se encuentran organizados en categorías, entre las que se puede cambiar seleccionando la categoría deseada del menú desplegable Categoría. El panel Insertar está organizado en las categorías siguientes:  Categoría Común. Permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.  Categoría Diseño. Permite insertar tablas, elementos de tabla, etiquetas div, marcos y widgets de Spry. También puede elegir dos vistas para tablas: Estándar (valor predeterminado) y Tablas expandidas.  Categoría Formularios. Contiene botones que permiten crear formularios e insertar elementos de formulario, incluidos widgets de validación de Spry.  Categoría Datos. Permite insertar objetos de datos de Spry y otros elementos dinámicos, como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.  Categoría Spry. Contiene botones para crear páginas de Spry, incluidos objetos de datos y widgets de Spry.  Categoría jQuery Mobile. Contiene botones para crear formularios en lenguaje jQuery.  Categoría InContext Editing. Contiene botones para la creación de páginas de InContext Editing, incluidos botones para Regiones editables, Regiones repetidas y la administración de clases CSS. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 27. Unidad 2 – Área de trabajo en Dreamweaver CS6 17  Categoría Texto. Permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.  Categoría Favoritos. Permite agrupar y organizar los botones del panel Insertar que utiliza con más frecuencia en un lugar común. 2.6 Panel Estilos CSS. El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan a un elemento de página actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento (modo Todo). El panel Estilos CSS también permite modificar propiedades CSS tanto en modo Todo como en modo Actual.
  • 28. 18 Diseño de Páginas Web (Dreamweaver CS6) TRABAJOS DE INVESTIGACIÓN 1. World Wide Web Consortium. a. ¿Qué es? b. Organización. c. ¿Para qué se creó? d. ¿Quiénes lo crearon? 2. Activar o desactivar los paneles de Dreamweaver. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 29. UNIDAD 3 CONFIGURAR UN SITIO EN DREAMWEAVER. 3.1 Concepto de Sitio. 3.2 Tipos de Sitios en Dreamweaver. 3.3 Estructura de una Página Web. 3.4 Configurar un sitio nuevo. 3.5 Configuración de un servidor de prueba. 3.6 Cuadro de diálogo Administrar sitios. 3.7 Panel Archivos.
  • 30. 20 Diseño de Páginas Web (Dreamweaver CS6) CONFIGURAR UN SITIO EN DREAMWEAVER. 3.1 Concepto de Sitio. Un Sitio es el conjunto de archivos de hipertexto (páginas web) y carpetas relacionados entre sí, con un diseño similar y un objetivo en común. Cada sitio Web tendrá una dirección única, es decir, nunca se podrán repetir las URL’s. 3.2 Tipos de Sitios en Dreamweaver. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y administrar y compartir archivos. Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según el entorno de desarrollo y el tipo de sitio Web que se desarrolle: • Carpeta raíz local: Almacena los archivos con los que se está trabajando. Dreamweaver se refiere a esta carpeta como el “sitio local”. Esta carpeta suele encontrarse en el equipo local, pero también se puede encontrar en un servidor de red. • Carpeta remota: Almacena los archivos para pruebas, producción, colaboración, etc. Dreamweaver se refiere a esta carpeta como el “sitio remoto” en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. • Carpeta de servidor de prueba: La carpeta en la que Dreamweaver procesa páginas dinámicas. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 31. Unidad 1 – Introducción a Dreamweaver CS6 21 3.3 Estructura de una Página Web. paginaweb documentos imagenes videos scripts multimedia basedatos
  • 32. 22 Diseño de Páginas Web (Dreamweaver CS6) 3.4 Configurar un Sitio nuevo. Configurar un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web. El cuadro de diálogo Configuración del sitio es donde se especifica la configuración del sitio de Dreamweaver. Para abrir el cuadro de diálogo Configuración del sitio, haz clic en el menú Sitio  Nuevo sitio. 3.5 Configuración de un servidor de prueba. Un servidor de prueba permite generar y mostrar contenido dinámico mientras se trabaja. El servidor de prueba puede ser el equipo local, un servidor de desarrollo, un servidor en funcionamiento o un servidor de producción. 1. Seleccione Sitio  Administrar sitios. 2. Haz clic en Nuevo Sitio (para configurar un nuevo sitio), o bien selecciona un sitio de Dreamweaver ya existente y haz clic en Editar. 3. En el cuadro de diálogo Configuración del sitio, selecciona la categoría Servidores y proceda de una de las siguiente formas: © 2013. Derechos Reservados Daniel Olalde Soto.
  • 33. Unidad 1 – Introducción a Dreamweaver CS6 23  Haz clic en el botón Añadir nuevo servidor para añadir un nuevo servidor.  O selecciona un servidor existente y haz clic en el botón Editar servidor existente 4. Especifica las opciones Básicas que sean necesarias y luego haz clic en el la pestaña Avanzadas. Nota: Debes especificar un URL Web en la pantalla Básicas al especificar un servidor de prueba.
  • 34. 24 Diseño de Páginas Web (Dreamweaver CS6) 5. Bajo Servidor de prueba, selecciona el modelo de servidor que desea usar para su aplicación Web. 6. Haz clic en Guardar para cerrar la pantalla Avanzadas. Seguidamente, en la categoría Servidores, especifica el servidor que acabas de añadir o editar como servidor de prueba. 3.6 Cuadro de diálogo administrar sitios. El cuadro de diálogo Administrar sitios se emplea para crear nuevos sitios, editar, duplicar, eliminar un sitio o importar o exportar la configuración de un sitio. 1. Selecciona Sitio  Administrar sitios y selecciona un sitio de la lista. 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. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 35. Unidad 1 – Introducción a Dreamweaver CS6 25 o Exportar. Permite exportar la configuración de un sitio como archivo XML (*.ste). o Importar. Permite seleccionar un archivo de configuración de un sitio (*.ste). 3.7 Panel Archivos. Utilice el panel Archivos para ver y administrar los archivos del sitio de Dreamweaver. Al visualizar sitios, archivos o carpetas en el panel Archivos, puedes cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos.
  • 36. 26 Diseño de Páginas Web (Dreamweaver CS6) 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. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 37. UNIDAD 4 FORMATO A LA PÁGINA WEB. 4.1 Propiedades de la página. 4.2 Comentarios. 4.3 Objeto Fecha. 4.4 Reglas horizontales. 4.5 Caracteres especiales. 4.6 Listas. 4.7 Formato al texto. 4.8 Concepto de Estilo CSS. 4.9 Crear estilos CSS. 4.10 Editar estilos CSS. 4.11 Vincular estilos CSS. 4.12 Menús usando hojas de estilos.
  • 38. 28 Diseño de Páginas Web (Dreamweaver CS6) FORMATO A LA PÁGINA WEB. 4.1 Propiedades de la página. Al momento de crear una Página Web es recomendable crear sitios que sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. El formato de la página se define a través del cuadro de diálogo Propiedades de la página. Para abrir dicho cuadro de diálogo realiza cualquiera de las siguientes opciones: 1. Metacomando < Ctrl + J >. 2. Haz clic en el menú Modificar  Propiedades de la página. 3. Haz clic derecho sobre el área del documento y del menú contextual selecciona la opción Propiedades. 4. En el Inspector de propiedades, haz clic sobre el botón Propiedades de la página. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 39. Unidad 4 – Formato a la Página Web 29 Empleando cualquiera de las opciones anteriores se mostrará el cuadro de diálogo Propiedades de la página, en donde se habrán de configurar las propiedades del documento. 4.1.1 Categoría Apariencia (CSS). La categoría Apariencia (CSS) permite especificar la fuente y el tamaño de la letra; así como el color del texto, color de fondo, aplicar una imagen de fondo, los márgenes del área del documento.
  • 40. 30 Diseño de Páginas Web (Dreamweaver CS6) 4.1.2 Categoría Apariencia (HTML). La categoría Apariencia (HTML), permite especificar varias opciones básicas para el diseño de página y éstas son:  Imagen de fondo. Aplica como fondo la imagen seleccionada.  Fondo. Define un color de fondo para la página.  Texto. Especifica el color de la fuente del texto.  Vínculos. Especifica el color al texto del vínculo.  Vínculos visitados. Especifica el color que va a tomar los vínculos visitados.  Vínculos activos. Especifica el color que se va mostrar cuando se haga clic sobre el vínculo.  Márgenes. Permiten establecer los márgenes del documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 41. Unidad 4 – Formato a la Página Web 31 4.1.3 Categoría Vínculos (CSS). La categoría Vínculos (CSS) se emplea para definir la fuente, tamaño y colores de los vínculos, así como el estilo del vínculo. 4.1.3 Categoría Encabezados (CSS). La categoría Encabezados (CSS), permite definir la fuente de los encabezados, el estilo de la fuente (cursiva o negrita), así como el tamaño y color que se va aplicar a cada tipo de encabezado.
  • 42. 32 Diseño de Páginas Web (Dreamweaver CS6) 4.1.5 Categoría Título / Codificación. La categoría Título / Codificación permite establecer el tipo de codificación del documento en cuestión conforme al idioma utilizado al crear las Páginas Web, así como especificar el formulario de normas Unicode que debe aplicarse a tal tipo de codificación. 4.1.6 Categoría Imagen de rastreo. La categoría Imagen de rastreo permite insertar un archivo de imagen para usarlo como plantilla gráfica al diseñar la Página Web, así como, establecer la opacidad de la imagen de rastreo. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 43. Unidad 4 – Formato a la Página Web 33 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.  En la vista Diseño, aparece el cuadro de diálogo Comentario. Introduce el comentario y haz clic en Aceptar. 4.3 Objeto Fecha. Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefieras (con o sin la hora) y ofrece la posibilidad de actualizarla cada vez que guarde el archivo.
  • 44. 34 Diseño de Páginas Web (Dreamweaver CS6) Para insertar el objeto fecha en el documento, realiza: 1. Sitúa el puntero de inserción en el lugar donde desees insertar la fecha. 2. Realiza alguno de los siguientes procedimientos:  Menú Insertar  Fecha.  Categoría Común, del panel Insertar, haz clic en el ícono Fecha. 3. En el cuadro de diálogo Insertar fecha, selecciona el formato de día de la semana, fecha y hora. Si se desea que la fecha insertada se actualice cada vez que se guarde el documento, activa la casilla Actualizar automáticamente al guardar. Pero si se requiere que la fecha se convierta en texto normal cuando se inserte y no se actualice automáticamente, desactiva dicha opción. 4. Haz clic en Aceptar para insertar la fecha. 4.4 Reglas horizontales. Las Reglas horizontales son el elemento que se usa para separar secciones dentro de una misma página. Para insertar una regla horizontal realiza: 1. Sitúate en el menú Insertar  HTML  Regla horizontal. 2. O de la Categoría Común del panel Insertar, haz clic en el comando Regla Horizontal. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 45. Unidad 4 – Formato a la Página Web 35 Al seleccionar la regla horizontal insertada, el Inspector de propiedades cambia para permitirnos modificar las propiedades de dicho objeto. Ancho de la regla Alineación de la regla Grosor de la regla Aplicar sombra Asignar un nombre de ID Asignar clase 4.5 Caracteres especiales. Cuando se trabaja con páginas web, muchas de las ocasiones es necesario emplear caracteres especiales tales como ñ, ©, á, ü, por mencionar algunos; para esto Dreamweaver dispone de diferentes caracteres que podemos incorporar al documento. Para insertar caracteres especiales, haz clic en el menú Insertar  HTML  Caracteres especiales  Otro. Una vez hecho lo anterior se mostrará el cuadro de diálogo Caracteres especiales, ahí deberás seleccionar el carácter buscado.
  • 46. 36 Diseño de Páginas Web (Dreamweaver CS6) 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.  Lista ordenada: muestra un número para indicar el orden de cada uno de los elementos que integran la lista.  Lista de definición: se encuentra compuesta por términos o expresiones y su definición. Para insertar cualquiera de éstos tres tipos de listas, sitúate en el menú Formato  Lista  y selecciona el tipo de lista que desees emplear. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 47. Unidad 4 – Formato a la Página Web 37 4.7 Formato al texto. El contenido del texto del documento en Dreamweaver posee atributos que permiten dar formato al texto, como es; cambiar el tipo de fuente, el tamaño de letra, la alineación, el color de la fuente, el estilo, etc. Para dar formato rápidamente al texto emplea el Inspector de propiedades, ya sea usando la categoría HTML o CSS (Para que se pueda aplicar el formato al texto, deberás previamente haberlo seleccionado).  Inspector de propiedades Categoría HTML. 6 9 5 11 1 7 3 8 2 12 10 4
  • 48. 38 Diseño de Páginas Web (Dreamweaver CS6) 1. Formato. Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser un encabezado, párrafo o formato predeterminado 2. ID. Asigna una ID a la selección. El menú desplegable ID enumera todos los ID declarados pero no utilizados en el documento. 3. Clase. Muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se ha aplicado ningún estilo a la selección, el menú emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la selección, el menú aparece en blanco. 4. Vínculo. Crea un vínculo de hipertexto del texto seleccionado. 5. Negritas. Aplica estilo de negritas al texto seleccionado. 6. Cursiva. Aplica estilo de cursiva al texto seleccionado. 7. Lista sin ordenar. Crea una lista con viñetas del texto seleccionado. 8. Lista ordenada. Crea una lista numerada del texto seleccionado. 9. Disminuir sangría. Anula o quita la etiqueta < blockquote >. En una lista su anulación elimina la anidación de la lista. 10. Aumentar sangría. Inserta sangría en el texto seleccionado, la aplicación de sangría crea una lista anidada. 11. Título. Especifica el texto de información sobre una herramienta para un vínculo de hipertexto. 12. Destino. Permite especificar el marco o la ventana donde se cargará el documento vinculado. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 49. Unidad 4 – Formato a la Página Web 39  Inspector de propiedades Categoría CSS. 7 1 12 4 8 10 11 5 9 3 6 2 1. Regla de destino. Es la regla que está editando en el Inspector de propiedades de CSS. Si hay una regla ya existente aplicada al texto, se mostrará el formato de la regla que afecta al texto al hacer clic en el texto de la página. También puedes emplear el menú emergente Regla de destino para crear nuevas reglas CSS y nuevos estilos en línea o aplicar clases existentes al texto seleccionado. 2. Editar regla. Abre el cuadro de diálogo Definición de regla CSS para la regla de destino. Si seleccionas Nueva regla CSS del menú emergente Regla de destino y haces clic en el botón Editar regla, Dreamweaver abrirá el cuadro de diálogo Definición de nueva regla CSS. 3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades para la regla de destino en la vista actual. 4. Fuente. Cambia la fuente de la regla de destino. 5. Tamaño. Establece el tamaño de la fuente para la regla de destino. 6. Color. Establece el color seleccionado como color de fuente en la regla de destino. 7. Negritas. Añade la propiedad de negrita a la regla de destino.
  • 50. 40 Diseño de Páginas Web (Dreamweaver CS6) 8. Cursiva. Añade la propiedad de cursiva a la regla de destino. 9. Alinear a la izquierda. Alinea el texto hacia la izquierda. 10. Alinear al centro. Alinea el texto al centro. 11. Alinear a la derecha. Alinea el texto hacia la derecha. 12. Justificar. Justifica el texto seleccionado. 4.7.1 Menú Formato. También puedes emplear el menú Formato, para modificar el aspecto del texto; dentro de este menú encontrarás los submenús para:  Aumentar Sangría o Anular sangría.  Asignarle formato al párrafo.  Alinear el texto.  Crear listas.  Aplicar estilos predefinidos.  Crear o aplicar estilos CSS.  Modificar el color de texto. 4.8 Concepto de Estilo CSS. Los Estilos CSS, también conocidos como Hojas de Estilos en Cascada (Cascading Style Sheets) son el conjunto de reglas de formato que determina el aspecto del contenido de la Página Web. Las reglas CSS, pueden residir en las ubicaciones siguientes:  Hojas de Estilo CSS Externas. Son el conjunto de reglas CSS almacenadas en un archivo CSS (.css) y con éstas se deberá emplear una vinculación al archivo CSS.  Hojas de Estilo CSS Internas. Son el conjunto de reglas CSS incluidas en una etiqueta < STYLE > dentro del cuerpo del documento o de la etiqueta < HEAD >. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 51. Unidad 4 – Formato a la Página Web 41 4.9 Crear estilos CSS. Para crear un estilo CSS en Dreamweaver, realiza: 1. Para abrir el cuadro de diálogo Nueva Regla CSS, realiza cualquiera de las siguientes opciones. A. Haz clic en el menú Formato  Estilos CSS  Nuevo. B. O del panel Estilos CSS, haz clic en el ícono Nueva regla CSS. 2. Después de haber realizado alguno de los procedimientos anteriores se mostrará el siguiente cuadro de diálogo, en donde se habrá de especificar: Tipo de selector. Permite elegir alguno de los siguientes tipos de selector:  Clase. Crea un estilo personalizado que pueda aplicarse como atributo class a cualquier elemento HTML.  ID. Define el formato de una etiqueta que contenga un atributo ID concreto.  Etiqueta. Redefine el formato predeterminado de una etiqueta HTML específica.  Compuesto. Define una regla compuesta que afecte a dos o más etiquetas, clases o ID simultáneamente.
  • 52. 42 Diseño de Páginas Web (Dreamweaver CS6) Nombre del selector. Define el nombre del estilo CSS. Definición de la regla. Permite establecer en donde se va a crear la hoja de estilos, entre las siguientes dos opciones:  Sólo este documento. Incrusta el estilo en el documento actual.  Nuevo archivo de hojas de estilo. Crear una hoja de estilos externa, es decir, un documento CSS (.css) 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. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 53. Unidad 4 – Formato a la Página Web 43 5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic sobre el botón Aceptar. 4.10 Editar estilos CSS. Los estilos CSS que se crean en Dreamweaver permiten editar tanto las reglas internas como las externas que se hayan aplicado en el documento. Para editar una regla CSS, realiza: 1. Abre el panel Estilos CSS. 2. Selecciona la regla CSS que desees editar. 3. Haz clic en el botón Editar estilo , del panel Estilos CSS. 4. Realiza los cambios necesarios y haz clic en Aceptar para conservar los cambios realizados.
  • 54. 44 Diseño de Páginas Web (Dreamweaver CS6) 4.11 Vincular estilos CSS. Cuando se quiere usar una hoja de estilos externa en un documento HTML, lo que único que se tiene que hacer es vincular la hoja de estilos en el documento. Para establecer vínculos en una hoja de estilos CSS externa, realiza: 1. Abre el panel Estilos CSS. 2. En el panel Estilos CSS, haz clic en el botón Adjuntar hoja de estilos . 3. En el cuadro de diálogo Vincular hoja de estilos externa, configura las siguientes opciones: Arch./URL. Oprime el botón Examinar para localizar la hoja de estilos a vincular. Añadir como. Activa Vincular para establecer un vínculo entre el documento actual y la hoja de estilos externa, o la opción Importar para utilizar una hoja de estilo externa como referencia. Media. Especifica el medio de destino de la hoja de estilo. Vista previa. Permite verificar que la hoja de estilo aplica los estilos que se desean en la página actual. 4. Por último, pulsa sobre el botón Aceptar. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 55. Unidad 4 – Formato a la Página Web 45 4.12 Menús usando hojas de estilos. El elemento esencial en una Página Web es el uso de menús, ya que gracias a ellos permiten que el usuario pueda desplazarse en cada página que compone el sitio Web. Hoy en día la mayoría de los menús se realizan con el uso de hojas de estilos y html. Anteriormente era muy frecuente ver Páginas Web con menús hechos en Flash, pero la desventaja era el tiempo en que tardaba de cargarse, por lo que terminaron quedando obsoletos. Para crear menús usando hojas de estilos, se deben crear dos documentos: un documento HTML (.html) y el otro una Hoja de estilos (.css). El documento HTML deberá contener los siguientes dos elementos: Una capa y una lista sin ordenar, para ello procede a realizar lo siguiente: 1. Primero crea una capa desde la vista Código, escribiendo las etiquetas <div> … </div>. 2. A continuación, cambia a la vista Diseño y posiciona el puntero dentro del rectángulo. 3. Activa el botón Lista sin ordenar del Inspector de propiedades. 4. Procede a crear los menús principales, tecleando el nombre del menú después de cada viñeta. Ejemplo:
  • 56. 46 Diseño de Páginas Web (Dreamweaver CS6) 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: © 2013. Derechos Reservados Daniel Olalde Soto.
  • 57. Unidad 4 – Formato a la Página Web 47 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: 8. En la etiqueta <div> teclea los siguientes atributos y valores: class="nav" id="menu"
  • 58. 48 Diseño de Páginas Web (Dreamweaver CS6) 9. Dentro de la etiqueta <ul> tecla los siguiente atributo y valor: class="nav" 10. Guarda el archivo HTML y crea una página CSS. 11. Teclea los siguientes estilos. @charset "utf-8"; /* CSS Document */ *{ padding:0px; margin-top:inherit; } #header { padding-top: 120px; } /* Formato del menú completo */ #menu { margin:0 auto; width:1000px; font-family:Calibri; font-size:12px; text-align:center; } © 2013. Derechos Reservados Daniel Olalde Soto.
  • 59. Unidad 4 – Formato a la Página Web 49 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; }
  • 60. 50 Diseño de Páginas Web (Dreamweaver CS6) 12. El resultado será el siguiente: 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. Definición de propiedades de fondo de estilos CSS  Background-color: Establece el color de fondo del elemento.  Background-image: Establece la imagen de fondo para el elemento.  Background-repeat: Determina si la imagen de fondo se repite y de qué forma lo hace. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 61. Unidad 4 – Formato a la Página Web 51  Background-attachment: Determina si la imagen de fondo está fija en su posición original o se desplaza con el contenido.  Background-position (X) y Background-position (Y): Especifican la posición inicial de la imagen de fondo en relación con el elemento. Definición de propiedades de bloque de estilos CSS  Word-spacing: Establece el espacio adicional entre las palabras.  Letter-spacing: Aumenta o disminuye el espacio entre letras o caracteres.  Vertical-align: Especifica la alineación vertical del elemento al que se aplica.  Text-align: Establece cómo se alineará el texto dentro del elemento.  Text-indent: Especifica la cantidad de sangría que se aplica a la primera línea de texto.  White-space: Determina de qué forma se gestiona el espacio en blanco dentro del elemento.  Display: Especifica si un elemento se muestra y, si es así, cómo lo hace. Definición de las propiedades del cuadro de estilos CSS  Width y Height: Establecen el ancho y alto del elemento.  Float: Determina qué lado de otros elementos, como texto, Div PA, tablas, etc., flotará alrededor de un elemento.  Clear: Define los lados que no permiten elementos PA. Si aparece un elemento PA en el lado libre, el elemento con esta configuración pasará a situarse debajo de él.  Padding: Especifica la cantidad de espacio entre el contenido de un elemento y su borde (o el margen si no hay ningún borde).  Margin: Especifica la cantidad de espacio entre el borde de un elemento (o el relleno si no hay borde) y otro elemento.
  • 62. 52 Diseño de Páginas Web (Dreamweaver CS6)  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. Definición de propiedades de borde de estilos CSS  Style: Establece el aspecto del estilo del borde.  Igual para todo: Establece las mismas propiedades de estilo de borde para Top, Right, Bottom y Left.  Width: Especifica el grosor del borde del elemento.  Igual para todo: Establece el mismo borde para Top, Right, Bottom y Left.  Color: Establece el color del borde: Puede especificar colores distintos para cada lado, pero su visualización dependerá del navegador.  Igual para todo: Establece el mismo color de borde para Top, Right, Bottom y Left. Definición de las propiedades de lista de estilos CSS  List-style-type: Establece el aspecto de viñetas o números.  List-style-image: Permite especificar una imagen personalizada para viñetas.  List-style-Position: Determina si el elemento de texto de la lista se ajusta a una sangría (outside) o si el texto se ajusta al margen izquierdo (inside). Definición de las propiedades de posición de estilos CSS  Position: Determina cómo deberá colocar el navegador el elemento seleccionado. Ofrece las opciones siguientes: - Absolute: coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con el ascendente más próximo con posición absoluta o relativa o, si no hay ningún ascendente con © 2013. Derechos Reservados Daniel Olalde Soto.
  • 63. Unidad 4 – Formato a la Página Web 53 posición absoluta o relativa, con la esquina superior izquierda de la página. - Relative: coloca el bloque de contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la posición del bloque en el flujo de texto del documento. - Fixed: coloca el contenido utilizando las coordenadas introducidas en los cuadros Placement en relación con la esquina superior izquierda del navegador. - Static: coloca el contenido en su ubicación en el flujo de texto. Esta es la posición predeterminada de todos los elementos HTML que pueden colocarse.  Visibility: Determina el estado inicial de visualización del contenido. La visibilidad predeterminada de la etiqueta body es visible. Seleccione una de las siguientes opciones de visibilidad: - Inherit: hereda la propiedad de visibilidad del padre del contenido. - Visible: muestra el contenido, independientemente del valor del contenido padre. - Hidden: no muestra el contenido, independientemente del valor del contenido padre.  Z-Index: Determina el orden de apilamiento del contenido. Los elementos con un índice z superior aparecen por encima de los elementos con un índice z inferior (o sin índice z). Los valores pueden ser positivos o negativos.  Overflow: Determina lo que debe ocurrir si el contenido de un contenedor (por ejemplo, una DIV o una P) supera el tamaño de éste. Estas propiedades controlan la ampliación de la siguiente manera: - Visible: aumenta el tamaño del contenedor para que todo su contenido sea visible. El contenedor se expande hacia abajo y hacia la derecha.
  • 64. 54 Diseño de Páginas Web (Dreamweaver CS6) - Hidden: mantiene el tamaño del contenedor y recorta cualquier contenido que no quepa. No hay barras de desplazamiento. - Scroll: añade barras de desplazamiento al contenedor independientemente de que el contenido exceda o no el tamaño del contenedor. - Auto: presenta las barras de desplazamiento solamente cuando el contenido del contenedor excede de sus límites.  Placement: Especifica la ubicación y el tamaño del bloque de contenido.  Clip: Define la parte del contenido que será visible. Definición de las propiedades de extensiones de estilos CSS  Page-break-before: Efectúa un salto de página al imprimir antes o después del objeto al que se aplica el estilo.  Cursor: Cambia la imagen del puntero cuando éste se encuentra sobre el objeto al que se aplica el estilo.  Filter: Aplica efectos especiales al objeto controlado por el estilo, incluidos desenfoque e inversión. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 65. UNIDAD 5 IMÁGENES. 5.1 Concepto de Imagen. 5.2 Insertar imágenes. 5.3 Insertar marcadores de posición de imagen. 5.4 Propiedades de imágenes. 5.5 Imagen de sustitución (Rollover). 5.6 Objetos inteligentes.
  • 66. 56 Diseño de Páginas Web (Dreamweaver CS6) 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. 5.2 Insertar imágenes. Cuando se insertan imágenes en Dreamweaver, el programa genera una referencia del archivo de imagen. Para insertar imágenes en Dreamweaver, realiza: 1. Posiciónate en el lugar donde desees colocar la imagen. 2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro de diálogo Seleccionar origen de imagen: A) Metacomando < Ctrl + Alt + I >. B) Panel Insertar  Categoría Común  Imagen. C) Menú Insertar  Imagen. 3. En el cuadro de diálogo abierto, selecciona la imagen que desees insertar en el documento. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 67. Unidad 5 – Imágenes 57 4. Una vez selecciona la imagen, haz clic en Aceptar. 5. Se mostrará una ventana emergente que te preguntará si deseas crear una copia del archivo en la carpeta del sitio, pulsa en el botón Sí. Teclea el nombre de la imagen o deja el nombre que se muestra por default. 6. Haz clic en Guardar. Si se ha activado el cuadro de diálogo Preferencias, aparecerá el cuadro de diálogo Atributos de accesibilidad de la etiqueta de imagen, donde podrás configurar: - Texto alternativo. Se emplea para anotar un texto en caso de que no se muestre la imagen en el navegador. - Descripción larga. Anota la ubicación de un archivo, que aparecerá cuando el usuario haga clic en la imagen o en el ícono de carpeta para desplazarse hasta el archivo. 7. Por último haz clic en Aceptar, para insertar la imagen.
  • 68. 58 Diseño de Páginas Web (Dreamweaver CS6) 5.3 Marcadores de posición de imagen. Los marcadores de posición de imagen son gráficos que se utilizan hasta que el gráfico definitivo esté listo para su incorporación al sitio Web. Para insertar marcadores de posición de imagen, realiza: 1. Sitúate en el lugar del documento donde desees colocar el marcador de posición de imagen. 2. Después realiza cualquiera de las siguientes opciones, para abrir el cuadro de diálogo Marcador de posición de imagen. A) Menú Insertar  Objetos de imagen  Marcador de posición de imagen. B) Categoría Común del panel Insertar, haz clic sobre el menú Imágenes y selecciona el ícono Marcador de posición de imagen. 3. En el cuadro de diálogo abierto, selecciona el tamaño y color del marcador, y asígnale una etiqueta de texto. 4. Para finalizar, haz clic en Aceptar. Sustitución de un Marcador de posición de imagen. Para poder actualizar el origen de la imagen, realiza: 1. Da doble clic sobre el marcador de posición de imagen o del Inspector de propiedades, haz clic en el ícono de Carpeta situado junto al campo de Origen. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 69. Unidad 5 – Imágenes 59 2. Se abrirá el cuadro de diálogo Seleccionar origen de imagen, ahí selecciona la imagen que desees remplazar en el marcador de posición de imagen. 3. Por último, presiona el botón Aceptar. Nota: Cuando se visualice en el navegador, el texto de etiqueta y tamaño no mostrarán. 5.4 Propiedades de imágenes. Para modificar las propiedades de las imágenes, utiliza el Inspector de propiedades; una vez que tengas la imagen seleccionada.
  • 70. 60 Diseño de Páginas Web (Dreamweaver CS6) 1 8 5 12 4 13 10 1 7 11 3 1 2 9 6 1 1. ID. Asigna un nombre como identificador para usarlo después como comportamiento. 2. Mapa. Permite asignar una etiqueta y crear un mapa de imagen. 3. Herramientas de Zona interactiva. Permite crear zonas en donde el usuario pueda interactuar con la imagen. 4. Origen. Muestra la ubicación de la imagen. 5. Vínculo. Especifica un hipervínculo a la imagen. 6. Destino. Especifica el marco o la ventana donde se cargará la página vinculada. 7. Original. Permite reemplazar la imagen actual por otra imagen. 8. Alt. Asigna un texto alternativo en caso de que no se muestre dicha imagen. 9. Herramientas Editar. Permite editar la imagen para mejorar su presentación. 10. An. Especifica el ancho de la imagen. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 71. Unidad 5 – Imágenes 61 11. Alt. Especifica el alto de la imagen. 12. Alternar restricción de tamaño. Activa esta opción en caso de querer restringir proporcionalmente el tamaño de la imagen. 13. Clase. Asigna un estilo CSS creado con anterioridad. 5.5 Imagen de sustitución (Rollover). Una imagen de sustitución es aquella que, al visualizarse en un navegador, cambia cuando el puntero se posiciona sobre ella. Para crear una imagen de sustitución se requieren dos imágenes: la imagen principal (la que aparece al cargarse inicialmente la página) y la imagen secundaria (la que se muestra al posicionar el puntero sobre la imagen principal). Ambas imágenes deben tener el mismo tamaño. Si tienen tamaños distintos, Dreamweaver cambia el tamaño de la segunda imagen para que se ajuste a las propiedades de la primera. Las imágenes de sustitución están automáticamente configuradas para que respondan al evento onMouseOver. Para crear una imagen de sustitución, realiza: 1. Posiciona el puntero en el lugar donde deseas que aparezca la imagen de sustitución. 2. Después realiza cualquiera de las siguientes opciones, para abrir el cuadro de diálogo Insertar imagen de sustitución. A. Categoría Común del panel Insertar, haz clic en el menú Imágenes y selecciona el icono Imagen de sustitución. B. Menú Insertar  Objetos de imagen  Imagen de sustitución. 3. Configura las opciones y haz clic en Aceptar.
  • 72. 62 Diseño de Páginas Web (Dreamweaver CS6)  Nombre de la imagen. Especifica el nombre de la imagen de sustitución.  Imagen original. La imagen que se mostrará al cargarse la página.  Imagen de sustitución. La imagen que se visualizará cuando el puntero pase por encima de la imagen original.  Precargar imagen de sustitución. Realiza una carga previa de imágenes en la caché del navegador para que la imagen no tarde en aparecer cuando el usuario pase el puntero sobre la imagen.  Texto alternativo (Opcional). Texto que describa la imagen para los usuarios que utilicen un navegador de sólo texto.  Al hacerse clic, ir a URL. El archivo que desea que se abra cuando un usuario haga clic en la imagen de sustitución. 5.6 Objetos inteligentes. Un objeto inteligente es una imagen para Web que mantiene una conexión en vivo con la imagen original de Photoshop. Al actualizar la imagen original en Photoshop, Dreamweaver ofrece la posibilidad de actualizar la imagen en Dreamweaver simplemente haciendo clic en un botón. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 73. Unidad 5 – Imágenes 63 Para inserta un objeto inteligente, realiza: 1. Sitúa el puntero en el lugar de la página donde desees insertar el objeto inteligente (la imagen). 2. Después realiza cualquiera de los siguientes opciones, para abrir el cuadro de diálogo Seleccionar origen de imagen: A) Metacomando < Ctrl + Alt + I >. B) Panel Insertar  Categoría Común  Imagen. C) Menú Insertar  Imagen. D) También puedes arrastrar el archivo PSD a la página desde el panel Archivos si se almacenan los archivos de Photoshop en el sitio Web (sí es así, omite el paso siguiente). 3. Localiza el archivo de imagen PSD de Photoshop en el cuadro de diálogo Seleccionar origen de imagen. 4. En el cuadro de diálogo Optimización de imágenes que aparece, ajusta la configuración de optimización como sea necesario y haz clic en Aceptar.
  • 74. 64 Diseño de Páginas Web (Dreamweaver CS6) 5. Guarda el archivo de imagen para la Web en una ubicación dentro de la carpeta raíz de su sitio Web. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 75. Unidad 5 – Imágenes 65 TRABAJOS DE INVESTIGACIÓN 1. Extensiones de imágenes que permite Dreamweaver insertar al documento. 2. Insertar Imágenes HTML de Fireworks. 3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
  • 76. UNIDAD 6 HIPERVÍNCULOS. 6.1 Concepto de Hipervínculo. 6.2 Tipos de rutas de los vínculos. 6.3 Crear hipervínculos. 6.4 Destino de los hipervínculos. 6.5 Anclaje con nombre. 6.6 Vínculo a correo electrónico. 6.7 Menú de salto. 6.8 Zonas interactivas.
  • 77. Unidad 6 – Hipervínculos 67 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. 6.2 Tipos de rutas de los vínculos. Cuando se crean vínculos, resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vínculo y el documento con el que lo establece. Cada Página Web tiene una dirección exclusiva, denominada URL (Localizador Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vínculo local (un vínculo de un documento con otro documento del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. 6.2.1 Rutas absolutas. Proporcionan la URL completa del documento vinculado, incluido el protocolo que se debe usar (http://), por ejemplo, http://www.dcompusite.blogspot.com/. 6.2.2 Rutas relativas al documento. Se emplean para vínculos locales, resultan particularmente útiles cuando el documento actual y el documento con el que se establece el vínculo se encuentran en la misma carpeta, por ejemplo, dreamweaver/contents.html. 6.2.3 Rutas relativas a la raíz del sitio. Indican la ruta desde la carpeta raíz del sitio hasta un documento. Se usan cuando se trabaja con un sitio Web grande que usa varios servidores o un servidor que alberga varios sitios, por ejemplo, /support/dreamweaver/contents.html.
  • 78. 68 Diseño de Páginas Web (Dreamweaver CS6) 6.3 Crear hipervínculos. Para crear hipervínculos en Dreamweaver CS6, realiza lo siguiente: 1. Selecciona el texto o imagen y del Inspector de propiedades da clic en el cuadro de texto Vínculo . 2. Escribe la ruta y el nombre del archivo del documento o URL en el cuadro de texto Vínculo o haz clic en la carpeta y selecciona el archivo (si se desea realizar una referencia absoluta). 3. En el menú desplegable Destino, selecciona una ubicación para abrir la página. Otra forma de crear hipervínculos es desde el menú Insertar  Hipervínculo. Se mostrará el cuadro de diálogo Hipervínculo, donde deberás especificar las siguientes propiedades:  Texto. Especifica el texto que se empleará como vínculo.  Vínculo. Asigna la ruta del hipervínculo.  Destino. Especifica la ubicación para abrir el archivo.  Título. Escribe un título de página para el hipervínculo.  Clave de acceso. Permite introducir una tecla para activar el hipervínculo en el navegador con dicha tecla.  Índice de fichas. Introduce un número para el orden de fichas. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 79. Unidad 6 – Hipervínculos 69 6.4 Destino de los hipervínculos. El destino del hipervínculo determina en qué ventana va a ser abierto el vínculo. Esto puede especificarse desde el Inspector de propiedades, categoría HTML a través de la opción Destino, o en el cuadro de diálogo Hipervínculo del menú Insertar  Hipervínculo. _blank carga el documento vinculado en una nueva ventana sin nombre del navegador. new carga el documento vinculado en una nueva ventana del navegador. _parent carga el documento vinculado en el marco padre o en la ventana padre del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el documento vinculado se cargará en la ventana completa del navegador. _self carga el documento vinculado en el mismo marco o la misma ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo. _top carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos.
  • 80. 70 Diseño de Páginas Web (Dreamweaver CS6) 6.5 Anclaje con nombre. Los anclajes con nombre permiten establecer marcadores en un documento, que por lo regular se colocan en un tema específico o en la parte superior del documento. Para crear un anclaje con nombre, realiza lo siguiente: 1. Coloca el cursor en el lugar donde se desea insertar el anclaje con nombre. 2. Después realiza alguno de los siguientes procedimientos: A) Menú Insertar  Anclaje con nombre. B) Metacomando < Control + Alt + A >. C) Del panel Insertar, Categoría Común, haz clic en el botón Anclaje con nombre. 3. En el cuadro Nombre de anclaje, escribe un nombre para el anclaje y haz clic en Aceptar. (El nombre del anclaje no puede contener espacios.) El marcador del anclaje aparecerá en el punto de inserción. Para usar el anclaje con nombre en un hipervínculo, realiza: 1. Selecciona el texto o imagen que servirá como anclaje. 4. Después realiza alguno de los siguientes procedimientos: A) Menú Insertar  Hipervínculo. B) Del panel Insertar, Categoría Común, haz clic en el botón Hipervínculo. C) Del Inspector de propiedades, posiciónate en el cuadro de texto Vínculo. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 81. Unidad 6 – Hipervínculos 71 2. En cualquiera de las tres opciones anteriores, desplegar el menú contextual de Vínculo y elige el marcador de texto a emplear en el hipervínculo. Nota: Todo los anclajes con nombre aparecerán con el signo “#” al principio del nombre de anclaje asignado. 6.6 Vínculo a correo electrónico. Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva ventana de mensaje en blanco (utilizando el programa de correo asociado al navegador del usuario). En la ventana de mensaje de correo electrónico, el cuadro “Para” se actualiza automáticamente con la dirección especificada en el vínculo del mensaje de correo electrónico. Para crear un vínculo de correo electrónico, realiza: 1. Sitúate en el menú Insertar  Vínculo de correo electrónico. O del panel Insertar de la categoría Común, haz clic en el botón Vínculo de correo electrónico. 2. Se mostrará el cuadro de diálogo Vínculo de correo electrónico, en donde se habrá de especificar las siguientes propiedades: Texto. Define el texto que se mostrará como vínculo de correo electrónico. Correo electrónico. Define el correo electrónico al cual se va a mandar la información.
  • 82. 72 Diseño de Páginas Web (Dreamweaver CS6) 3. Por último, haz clic en Aceptar. Otra forma de crear un hipervínculo a un correo electrónico, es desde el Inspector de propiedades, en la opción Vínculo deberás teclearla palabra MAILTO, seguida de dos puntos y el correo electrónico (MAILTO:daniel.olalde@gmail.com). 6.7 Menú de salto. Un menú de salto es un menú emergente de un documento que pueden ver los visitantes del sitio y que ofrece vínculos con documentos o archivos. Puedes crear vínculos con documentos del sitio Web, documentos de otros sitios, correo electrónico, gráficos o cualquier tipo de archivo que se pueda abrir en un navegador. Cada opción de un menú de salto está asociada a un URL. Cuando los usuarios eligen una opción, se les remite al URL asociado. Los menús de salto se insertan dentro del objeto de formulario Menú de salto. Un menú de salto puede contener tres componentes: • Opcional: un mensaje de selección de menú, como la descripción de una categoría para los elementos del menú o instrucciones, como “Elija una opción”. • Obligatorio: una lista de elementos de menú vinculados: el usuario elige una opción y se abre un documento o un archivo vinculado. • Opcional: un botón Ir. Para insertar un menú de salto, realiza: 1. Sitúa el punto de inserción en la ventana de documento. 2. Luego realiza alguno de los siguientes procedimientos: © 2013. Derechos Reservados Daniel Olalde Soto.
  • 83. Unidad 6 – Hipervínculos 73 A) Menú Insertar  Formulario  Menú de salto. B) En la categoría Formulario del panel Insertar, haz clic en el botón Menú de salto. 3. Se mostrará el cuadro de diálogo Insertar menú de salto, en donde deberás especificar las siguientes opciones: • Botón más (+). Inserta un nuevo elemento. • Botón menos (-). Elimina un elemento. • Botones de flecha. Suben o bajan puestos en la lista. • Texto. Escribe el nombre de un elemento sin nombre. • Al seleccionarse, ir a URL. Accede al archivo de destino o escribe su ruta. • Abrir URL en. Especifica si el archivo debe abrirse en la misma ventana o en un marco. • Insertar botón Ir tras el menú. Selecciona esta opción para insertar un botón Ir en lugar de un mensaje de selección de menú. • Seleccionar primer elemento tras el cambio de URL. Selecciona esta opción si has insertado un mensaje de selección de menú (“Elija una opción”) como primer elemento del menú.
  • 84. 74 Diseño de Páginas Web (Dreamweaver CS6) 4. Para finalizar, haz clic en Aceptar. 6.8 Zonas interactivas. Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una acción. Al insertar un mapa de imagen del lado del usuario, se crea una zona interactiva y, a continuación, se define un vínculo que se abrirá cuando el usuario haga clic en la zona interactiva. Para crear una zona interactiva, realiza: 1. Selecciona la imagen a la que desees aplicar la zona interactiva. 2. En el cuadro de texto Mapa del Inspector de propiedades, introduce un nombre exclusivo para el mapa de imagen. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 85. Unidad 6 – Hipervínculos 75 3. Selecciona la herramienta circular, rectangular o poligonal, según sea el caso y arrastrando el puntero sobre la imagen crea la zona interactiva. 4. Una vez seleccionada la zona interactiva, en el cuadro Vínculo, escribe el hipervínculo o haz clic sobre el ícono Carpeta para localizar y seleccionar el archivo que deberá abrirse cuando el usuario haga clic en la zona interactiva. 5. En el cuadro de lista desplegable Destino, selecciona la ventana o marco donde se abrirá el vínculo. 6. En el cuadro de texto Alt, escribe el texto alternativo en caso de que no se muestre la imagen en el navegador. 7. Al terminar de definir todas las zonas interactivas del mapa de imagen, da clic en un área en blanco del documento para cambiar el Inspector de propiedades. TRABAJOS DE INVESTIGACIÓN 1. Extensiones de imágenes que permite Dreamweaver insertar al documento. 2. Insertar Imágenes HTML de Fireworks. 3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
  • 86. UNIDAD 7 DISEÑO DE LA PÁGINA WEB. 7.1 Concepto de Tabla. 7.2 Creación de tablas. 7.3 Formato de tablas y celdas. 7.4 Insertar filas y columnas. 7.5 Eliminar filas y columnas. 7.6 Combinar o dividir celdas. 7.7 Anidar tablas. 7.8 Ordenar tablas. 7.9 Concepto de marcos. 7.10 Crear marcos. 7.11 Seleccionar marcos. 7.12 Guardar marcos. 7.13 Propiedades de los marcos. 7.14 Hipervínculos en marcos.
  • 87. Unidad 7 – Diseño de la Página Web 77 DISEÑO DE LA PÁGINA WEB. 7.1 Concepto de Tabla. Una tabla es la herramienta eficaz para presentar una serie de datos de forma clara y organizada en una Página Web. También son usadas para el diseño del documento. Las tablas están compuestas por filas y columnas, y la intersección entre una fila y una columna es conocida con el nombre de celda. 7.2 Creación de tablas. Para insertar tablas en el documento, realiza cualquiera de las siguientes opciones: 1. Menú Insertar  Tabla. 2. Metacomando < Ctrl + Alt + T >. 3. Panel Insertar  Categoría Común  Tabla. Realizada alguna de las opciones anteriores, se mostrará el cuadro de diálogo Tabla en donde se habrá de especificar:  Filas. Determina el número de filas de la tabla.  Columnas. Especifica el número de columnas de la tabla.  Ancho de tabla. Establece el ancho de la tabla en pixeles o como porcentaje del ancho de la ventana del navegador.  Grosor del borde. Define el ancho en pixeles de los bordes de la tabla.  Relleno de celda. Detalla el número de pixeles entre el borde y el contenido de una celda.  Espacio entre celdas. Especifica el número de pixeles entre celda contiguas de una tabla.  Sección Encabezado. Brinda las siguientes opciones de encabezado: o Ninguno. No permite encabezados de columna o de fila para la tabla.
  • 88. 78 Diseño de Páginas Web (Dreamweaver CS6) o Izquierda. Convierte la primera columna de la tabla en una columna para encabezados, lo que permite introducir un encabezado para cada fila de la tabla. o Superior. Convierte la primera fila de la tabla en una fila de encabezados, lo que permite introducir un encabezado para cada columna de la tabla. o Ambos. Permite introducir encabezados de columna y de fila de la tabla.  Texto. El título de tabla que se ubica fuera de la misma.  Resumen. Descripción de la tabla. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 89. Unidad 7 – Diseño de la Página Web 79 7.3 Formato de tablas y celdas. El formato de las tablas y de las celdas se especifica a través del Inspector de propiedades. Ambos elementos contienen diferentes atributos Para dar formato a la tabla, posiciona el puntero del mouse sobre las esquinas de la tabla y luego haz clic izquierdo. 6 1 4 2 3 7 8 5 1. Id de tabla. Especifica un ID para la tabla. 2. Filas y Cols. Número de filas y columnas que tendrá la tabla. 3. An. El ancho de la tabla en píxeles o porcentaje. 4. Rell. Celda. Determina el número de píxeles entre el contenido de una celda y los límites de la misma. 5. Esp. Celda. Número de píxeles entre celdas de tabla contiguas. 6. Alinear. Determina dónde aparecerá la tabla en relación con otros elementos del mismo párrafo, como por ejemplo texto o imágenes. 7. Borde. Especifica el ancho en píxeles de los bordes de la tabla. 8. Clase. Establece una clase CSS en la tabla.
  • 90. 80 Diseño de Páginas Web (Dreamweaver CS6) 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 1. Combinar celdas. Combina las celdas, filas o columnas seleccionadas para crear una sola celda. 2. Dividir celda. Divide una celda para crear dos o más celdas. 3. Horiz. Especifica la alineación horizontal del contenido de una celda, fila o columna. 4. Vert. Especifica la alineación vertical del contenido de una celda, fila o columna. 5. An (Ancho) y Al (Alto). Configura el ancho y alto de las celdas seleccionadas en píxeles o como porcentaje del ancho o alto total de la tabla. 6. No aj. Impide el ajuste de línea, manteniéndose todo el texto de una celda en una sola línea. Cuando la opción No aj. está activada, las celdas se adaptarán para incluir todos los datos a medida que se introducen o pegan en una celda. © 2013. Derechos Reservados Daniel Olalde Soto.
  • 91. Unidad 7 – Diseño de la Página Web 81 7. Encabezado. Aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma predeterminada, el contenido de las celdas de encabezado de la tabla aparecerá en negrita y centrado. 8. Fondo. El color de fondo de una celda, columna o fila elegido mediante el selector de color. 7.4 Insertar filas y columnas. Para añadir filas y columnas a la tabla, realiza: 1. Posiciónate en la celda de acuerdo donde quieras insertar la fila o columna. 2. Haz clic en el menú Modificar  Tabla  Insertar filas o columnas. O presiona los Metacomandos: < Ctrl + M > = Insertar fila. < Ctrl + Shift + A > = Insertar columna. 3. Si se elige la opción Insertar filas o columnas, se mostrará el cuadro de diálogo Insertar filas o columnas; donde se habrá de especificar el número de filas o columnas y el lugar donde se insertarán. 4. Una vez configurada la ventana, pulsa sobre el botón Aceptar.
  • 92. 82 Diseño de Páginas Web (Dreamweaver CS6) 7.5 Eliminar filas y columnas. Para eliminar una fila o una columna, haz clic en una celda que desees eliminar y selecciona el menú Modificar  Tabla  Eliminar fila o Eliminar columna, según sea el caso. También puedes seleccionar una fila o columna completa y luego dar clic en el menú Edición  Borrar o presionar la tecla < Supr >. 7.6 Combinar o dividir celdas. Dreamweaver, incluye herramientas que permiten aumentar o disminuir el número de filas o columnas que ocupa una celda. Para combinar celdas en una tabla, primero se deben tener seleccionadas las celdas contiguas a combinar. Luego posicionarse en el menú Modificar  Tabla  Combinar celdas. Otra opción es desde el botón Combinar celdas del Inspector de propiedades ampliado. Para dividir una celda, haz clic en la celda y selecciona el menú Modificar  Tabla  Dividir celda. O desde el botón Dividir celdas el Inspector de propiedades ampliado. En el cuadro de diálogo Dividir celda, especifica cómo deseas dividirla. © 2013. Derechos Reservados Daniel Olalde Soto.