Adobe Dreamweaver CS6 enviando lecciones de formulario. Entrenamiento Dreamweaver. Seleccione el modo de visualización del documento

Drimviver es una herramienta poderosa que permite que decenas de veces simplifiquen muchas operaciones de rutina con las que se enfrenta inevitablemente cualquier maestro web. La transición conveniente entre el modo gráfico y el modo de edición de código le permite obtener el control máximo sobre el sitio que se está creando.

Adobe Dreamweaver para principiantes.

En esta lección, aprenderemos a trabajar con este editor de código y realizaremos la configuración principal del programa:

En primer lugar, debe hacer clic en la edición y ir Configuración -\u003e Crear documento (nuevo documento).

En el cuadro de diálogo que aparece, debe establecer los siguientes parámetros:

Tipo de documento predeterminado (DTD) -\u003e HTML 4.01 Transitional

Codificación predeterminada -\u003e Cirílico (Windows)

Vamos a la unidad local creada Z: \\ (este disco es creado por el programa predeterminado). Allí, en el directorio de inicio, cree una carpeta con el nombre Plata.RU, en el que, a su vez, cree una carpeta WWW en la que cree una carpeta IMG. Como resultado, se debe obtener la jerarquía - z: \\ home \\ spa.ru \\ www \\ img.

prensa Crear (nuevo) -\u003e Sitio (Sitio)

En la pestaña Información local Introducimos información básica sobre el sitio:

Nombre del sitio: Plata.RU

Directorio de raíces locales: z: \\ home \\ spa.ru \\ www \\

Carpeta de imagen predeterminada: z: \\ home \\ spa.ru \\ www \\ img \\

En el documento que se abre, entre las etiquetas. Recetamos el siguiente código:

Hola Mundo

Reinicie Denver para actualizar la lista de direcciones y en cualquier navegador disponible, en la barra de direcciones, ingresamos www.plata.ru.

Debería trabajar así:

Sólo permanece para sujetar la hoja de estilo y la configuración de Dreamviver se puede terminar.

Crea un nuevo archivo con el nombre SS.CSS en el directorio raíz del sitio y prescribe dentro de un pequeño código

Presione el botón derecho del ratón en un área en blanco de trabajo con estilos ubicados en la esquina superior derecha de la ventana del programa y elija hoja de estilo de fijación (hoja de estilo fije).

Ingrese la dirección donde guardó la tabla y haga clic en Aceptar. Ahorramos ambos documentos y registramos el navegador. El color de las letras debe volverse rojo.

En esta lección, configuramos el programa Dreamweaver para trabajar con nuestro sitio futuro. Este programa será simplemente indispensable y pronto podrá asegurarse de que.

En la siguiente lección analizaremos.

propósito : Confianza con Dreamweaver al crear una página web, así como con el área de trabajo del programa.

Tareas:

• Explora el espacio de trabajo.
• Aprenda cómo crear una nueva página con contenido CSS.
• Aprende a guardar el documento.
• Aprenda a cambiar el nombre de la página y los encabezados de texto.
• Aprenda a insertar texto de un documento externo.
• Aprenda a agregar imágenes al primer plano y como imágenes de fondo.
• Aprenda cómo crear, cambiar y elegir los estilos CSS.
• Aprenda a trabajar con modos de visualización de código (código) y código y diseño.

Antes de continuar con el estudio,.

En el proceso de realizar todos los trabajos de laboratorio, será creado por un sitio web de la compañía turística de pleno derecho.

La estructura de las páginas web se muestra en la Figura 1.

Figura 1 - Estructura del sitio web final

Como resultado de este trabajo de laboratorio, debe obtener una página web de este tipo (Figura 1.1):

Figura 1.1 - Vista previa Página web

Utilizando la pantalla de bienvenida.

La ventana de la pantalla de bienvenida proporciona acceso rápido a las páginas con las que ha trabajado recientemente, ayuda a crear fácilmente diferentes tipos de páginas y proporciona acceso directo a algunos temas clave en los que puede encontrar respuestas a sus preguntas. La pantalla de bienvenida aparece cuando inicia el programa primero o si algún otro documento no está abierto.

Vamos a utilizar la ventana de la pantalla de bienvenida para explorar formas de abrir el documento.

1. Para abrir una nueva página vacía, haga clic en Opción Html. En columna Crear nuevo.(Crear) (Figura 1.2).

Figura 1.2 - Ventana de pantalla de bienvenida

2. Antes de abrir un nuevo Html. Documento (Figura 1.3).

Figura 1.3 - Nueva ventana HTML

Selección de diseño CSS

En Adobe Dreamweaver CS4 hay 32 archivos de diseño CSS, cada uno de los cuales es diferente. En esta tarea, elegiremos un archivo y lo cambiaremos.

1. Llevar a cabo Archivo \u003d\u003e nuevo (Archivo \u003d\u003e crear) .
2. Elegir columna Blanco Página (Página vacía) en el cuadro de diálogo Nuevo Documento (Crear un documento) .
3. Escoger Html. En columna Página Tipo (Tipo de página) .
4. Escoger 2 columna. fijo, a la izquierda. barra lateral, encabezado. y. pie de página. (2 columnas de ancho fijo, campo lateral a la izquierda, superior y pie de página) en columna Diseño.(Diseño) .
5. No cambie la configuración para otras opciones establecidas de forma predeterminada y haga clic en el botón. Crear.(Crear).
6. Escoger Archivo \u003d\u003e guardar (Archivo \u003d\u003e Guardar).
7. Guardar como.(Guardar como) Ir a la carpeta lab1. Ingrese "UMBRIA.HTML" y haga clic en el botón Ahorrar.

Seleccione el modo de visualización del documento

La mayoría de las operaciones de diseño web realizaremos en la ventana. Diseño.Pero recuerda eso por la ventana. Documento Hay cuatro modos de visualización (Figura 1.4):

• Diseño. (Diseño) - representa una página en el contexto de un navegador similar;
• Código. (Código) - Muestra el código fuente de la página;
• Código. y. Diseño. (Código y diseño) - combina y modo de visualización Diseño. y modo de visualización Código.. Haga clic en el botón Separar. (Split) para mostrar este modo de visualización.
• Vivir. (Visualización interactiva): representa una página en un navegador que opera en tiempo real.

Figura 1.4 - Modos de visualización

Los modos de visualización están asociados entre sí. Cualquier cambio realizado en uno de ellos puede verse inmediatamente en otros.

Cambio de título de la página

El título de la página se muestra en la cadena de encabezado del navegador. Los encabezados de página son uno de los elementos clave utilizados por los motores de búsqueda para indexar los sitios web.

1. Seleccione el relleno de texto "Documento sin título" ("Documento Untitled") en el campo Título (nombre) Barras de herramientas Documento (Figura 1.5).
2. Escriba "Umbria Hill Town Tours" allí y haga clic en INGRESAR.

Figura 1.5 - Barra de herramientas de documentos

Cambiando los titulares

Rellenos encabezados en Dreamweaver fácil de cambiar.

1. Dos veces, haga clic en el texto del agregado. Títulopara elegirlo. Luego ingrese "Viaje en Umbría a nosotros" (Figura 1.6).

Figura 1.6 - Cambiar el título de marcador de posición

2. Mouse sobre el texto del agregado. Principal.Contenido (Contenido básico) y resalte toda la frase.
3. Tener resaltar el texto, ingrese "Tienes placer. Estamos trabajando." (Figura 1.7)

Figura 1.7 - Cambio de contenido agregado

4. Seleccione Archivo \u003d\u003e guardar(Archivo \u003d\u003e Guardar).

Insertar texto

Tex simple se puede cambiar tan fácilmente como los titulares.

1. Coloque el cursor antes del texto simple del agregado y seleccione el texto hasta el final para seleccionar el segundo relleno de encabezado y todos los párrafos.
2. Presione la tecla Borrar.Para eliminar lo que has elegido.
3. Ir al archivo TEXTO.. tXT. Ubicado en la carpeta LECCIONES / LAB1 / TEXT.TXT.

4. Copia el texto al portapapeles.
5. Inserte el texto copiado debajo del encabezado "Tienes placer. Estamos trabajando." (Figura 1.8).

Figura 1.8 - Inserción de texto

El texto se formateó automáticamente como párrafos.

6. De la misma manera, ingrese "Umbria Hill Town Tours" en el campo Pie de página..
7. Crea el final de la cadena haciendo clic en Cambiar.+ INGRESAR, luego ingrese "nuestros contactos".

Inserción de imágenes

1. Seleccione todos los contenidos en el panel lateral, incluido el encabezado de llenado Contenido lateral1 Y dos párrafos posteriores.
2. Toque Borrar..
3. Haga clic en

y presionar Borrar. En el selector de etiquetas, ubicado en la parte inferior de la ventana del documento para eliminar la etiqueta

(Figura 1.9).

Figura 1.9 - Selector de etiquetas

4. Si el panel Insertar. (Inserción) es invisible, hazlo visible al elegir Ventana \u003d\u003e insertar (Ventana \u003d\u003e inserto). Llevar a cabo Inserto \u003d\u003e común => Imagenes (Insertar \u003d\u003e General \u003d\u003e Imagen) (Figura 1.10).

Figura 1.10 - Inserto del panel

5. Ir a los archivos ubicados en la carpeta. LECCIONES / LAB1 /y seleccione jardín esculpido.jPG.y haga clic en Aceptar (Figura 1.11).

Figura 1.11 - Sculpted-Garden.jpg Image Insertar

6. Coloque el cursor al principio del párrafo principal, que comienza con las palabras "venga y disfrute" y seleccione Imagenes En el panel Insertar..
7. Selecciona la imagen italiano-hill-town.jpg y presionar OK.
8. Ingrese a Italian-Hill-Town como un texto adicional. Hacer clic OK (Figura 1.12).
9. Si el panel de propiedades es invisible, seleccione Ventana \u003d\u003e Propiedades.
10. Selección de la imagen recién insertada, active fitrten el menú emergente Clase (clase)paneles Propiedades..

Abreviatura de clase FLTT del flotador a la derecha, respectivamente, FLTLFT - flotando a la izquierda.

11. Seleccione Archivo \u003d\u003e SAV.

Figura 1.12 - Italiano-Hill-Town.jpg Inserción de imágenes

Selección y cambio de estilos. CSS.

Las páginas web modernas utilizan hojas de estilo en cascada (CSS) para diseño y diseño estilizado. La página web se compara a menudo con una silla con tres patas, que es el papel de HTML, CSS y JavaScript, que son componentes de su estructura. HTML es un co-holding, el material que ingresa en el modo de visualización de diseño. CSS es una apariencia y diseño con elementos, colores y fondos definidos. Javascript agrega una función interactiva. En este ejercicio, cambiará el color de fondo de la página existente, agregará gráficos al plan trasero y configure varios atributos de texto. Todas estas acciones se realizan utilizando el panel. CSS.Estilos. (Estilos CSS).

CSS se puede utilizar para cambiar las propiedades del estilo de cualquier etiqueta HTML, como la etiqueta .

1. Seleccione Ventana \u003d\u003e Estilos CSS (ventana \u003d\u003e Estilos CSS). Se abre el panel Estilos CSS..
2. Si es necesario, haga clic en el botón. Todo todo) En el panel Estilos CSS.para cambiar el modo actual Actual.

Todo modo Muestra todos los estilos CSS asociados con la PC actual\u003e. Necesita un documento en la ventana de visualización de documentos para ver los estilos en el panel. Estilos CSS..

3. Abra la entrada