Creación de páginas web con FrontPage. Creación de páginas web en la aplicación FrontPage Herramientas básicas del programa

💖 ¿Te gusta? Comparte el enlace con tus amigos

Tema 3.4: Aplicación de Internet en la economía y seguridad de la información

Programas para crear sitios.

3.3. Programas de aplicación para la creación de sitios Web

3.3.4. Creación de un sitio y páginas web en FrontPage

La planificación del sitio

La planificación de sitios web es una de las tareas más difíciles. ¿Cómo colocar correctamente la información que tiene en las páginas del futuro sitio? ¿Cuál debería ser la estructura del sitio? ¿Qué páginas debe tener un sitio? ¿Qué diseño deben tener las páginas del sitio? ¿Cuál debe ser la navegación del sitio?

Estos y muchos otros problemas de desarrollo de sitios deben resolverse antes de que se puedan utilizar las aplicaciones de desarrollo de sitios.

Digamos que decidimos desarrollar un sitio web que brindará información sobre la empresa EN101, podemos presentar esta información que tenemos en cuatro páginas:

  1. hogar
  2. Acerca de la compañía
  3. Resumen comercial del proyecto.
  4. Métodos de pago

Elegimos el nombre del sitio en función del tipo de actividad, por ejemplo: lecciones-en101.

Asignar nombres de página:

  • índice - Inicio;
  • info - Sobre la empresa;
  • negocio- Revisión comercial del proyecto;
  • pagar - Métodos de pago.

Como página principal, utilizamos la página web Home (índice) creada anteriormente. Creamos la estructura del sitio, que se muestra en la figura.


Arroz. 1.

Prepararemos el texto en Word de cada página y los dibujos en Adobe Photoshop en formato GIF, JPEG o PNG con una resolución de 72 píxeles/pulgada, además se pueden utilizar scripts.

Luego puede registrar un dominio de segundo nivel en una de las zonas (ua, ru, com, net, info, etc.) y, luego de desarrollar el sitio, elegir un hosting pago que se adapte a la velocidad de acceso y brinde los servicios necesarios para el sitio para trabajar con eficacia. Si colocamos el sitio en un alojamiento gratuito, podemos elegir, por ejemplo, alojamiento en el servidor narod.ru. Para hacer esto, deberá registrarse en el servidor y obtener alojamiento gratuito. En este caso, tendrá un dominio de tercer nivel, por ejemplo: lecciones-en101.narod.ru.

Crear un sitio usando la aplicación FrontPage

1. Para crear un sitio usando la aplicación FrontPage, debe abrir la ventana de la aplicación de una de las siguientes maneras. Después de eso, la ventana de la aplicación o la GUI de FrontPage se mostrará en la pantalla, en la que se mostrará el sitio o la página anterior. Para salir del sitio o página anterior en FrontPage, use el comando Archivo/Cerrar o Archivo/Cerrar nodo, o ambos si el sitio y la página estaban abiertos.

Luego ejecutamos el comando Archivo/Nuevo y en el panel de tareas “Crear” que se abre, hacemos clic en “Otras plantillas de sitios web” en la sección “Crear sitio web”. Se abrirá el cuadro de diálogo "Plantillas de sitios web", en el que debe seleccionar "Sitio web vacío" y, a continuación, especificar la ubicación del nuevo sitio web (por ejemplo, D:\Documentos y configuración\TVA\Mis documentos\Mi sitio web). Sites\lessons-en101) y haga clic en Aceptar. La figura muestra un fragmento del cuadro de diálogo "Plantillas de sitios web", en el que se indica la dirección del nuevo sitio.


Arroz. 2.

Después de guardar el sitio en la pantalla, la ventana de la aplicación FrontPage mostrará el nuevo sitio web en modo de carpeta.



Arroz. 3.

2. Cree una página de inicio en FrontPage para el sitio nuevo. La creación de una página de inicio en FrontPage se puede hacer de diferentes maneras. Por ejemplo, puede hacer clic en el botón "Crear página" en el panel "Contenido", que agregará la página index.htm en la ventana del sitio web, como se muestra en la figura



Arroz. 4.

3. A continuación, copie el contenido de la carpeta EN101 creada anteriormente, que contiene la carpeta de imágenes y la página de índice (la carpeta _vti_cnf se genera automáticamente al crear una página web). El contenido de la carpeta EN101 se muestra en la figura.


Arroz. 5.

Pegue el contenido guardado de la carpeta EN101 del portapapeles en la carpeta recién creada del sitio web lecciones-en101, que se muestra en la figura.


Arroz. 6.



Arroz. 7.

Por lo tanto, la página index.htm creada anteriormente se utiliza como página de inicio en el nuevo sitio ( idioma en Inglés en Internet). Puede crear la página principal de otras formas, como se describe en la Sección 3.3.2. Introducción a Front Page.

5. Creamos la estructura del sitio en el editor de FrontPage, es decir agregue tres páginas más a la página principal: info - Acerca de la empresa; negocio - descripción general del negocio del proyecto; pagar - Métodos de pago. Para hacer esto, cambie al modo Transiciones ejecutando el comando Ver/Transiciones. Luego, debe seleccionar la página de inicio y hacer clic en el botón Nueva página en el panel de navegación o usar el menú contextual, se agregará la Nueva página 1. Del mismo modo, agregue dos páginas nuevas más. La estructura del sitio se muestra en la figura.



Arroz. 8.

6. Cambiar el nombre de las páginas nuevas en FrontPage. Cambie al modo de carpeta y use el menú contextual para cambiar los nombres Nueva página 1 a información, Nueva página 2 en negocio, Nueva página 3 en pagar.


Arroz. 9.

7. A los efectos de la unidad del diseño de las páginas del sitio, copiamos el contenido de la página principal a las páginas creadas info, business, pay. Para hacer esto, abra la página principal en modo Página y ejecute el comando "Editar/Seleccionar todo", y haga clic en el botón Copiar en la barra de herramientas. Cambie al modo Carpeta y haga doble clic en la página de información, se abrirá en modo Página, luego haga clic en el botón Insertar. El contenido de la página principal se copiará a la página de información, de manera similar copiamos el contenido de la página principal a las otras dos páginas.

  • Hogar;
  • Acerca de la compañía;
  • Revisión comercial del proyecto;
  • Métodos de pago.

Por ejemplo, seleccione el elemento de navegación "Resumen comercial del proyecto" y use el menú contextual para abrir el cuadro de diálogo Agregar hipervínculo, seleccione business.htm y haga clic en Aceptar. Del mismo modo, creamos hipervínculos para todos los elementos de navegación en todas las páginas. La figura muestra un fragmento del cuadro de diálogo Agregar hipervínculo.



Arroz. 10

10. Agregue y complete etiquetas meta (entre etiquetas Y) en las páginas: "Sobre la empresa"; "Revisión empresarial del proyecto"; "Métodos de pago" en modo Código.

Por ejemplo, para la página Acerca de, las etiquetas se completan de la siguiente manera:

  • Acerca de En101

11. Cambiar el nombre de los títulos de las páginas en el modo Transiciones. Seleccione la página y use el menú contextual para cambiarle el nombre:

  • nueva página 1 cambiar el nombre a "Acerca de la empresa".
  • nueva página 2 cambiar el nombre a "Resumen comercial del proyecto".
  • nueva página 3 cambiar el nombre a "Métodos de pago".

Como resultado del desarrollo, obtendremos un sitio que consta de cuatro páginas web. Este sitio, creado con FrontPage en sistema de archivos Una PC puede estar alojada en un servidor web en Internet o Intranet.

Para desarrollar su propio sitio web en FrontPage, descargue.

Página web simple en Frontpage es una tabla ordinaria con muchas celdas. Estas celdas contienen textos, imágenes, videos y todo lo que vemos en los sitios. Por ejemplo, si dibuja esta página como un diagrama de flujo, se verá así.

Página web simple en Frontpage

La estructura de la página web es simple. En la parte superior está el nombre del sitio, justo debajo hay un menú horizontal. A la derecha hay un menú vertical y en la parte inferior hay un pie de página. En el centro está el "cuerpo" del sitio. Estos son los elementos principales de la página del sitio más común.

Por cierto, ahora estás exactamente en la misma página web. Como puedes ver, su estructura es muy simple. Aquí todo está a la mano. Al hacer clic en el menú horizontal o vertical, será transferido a otras páginas del sitio.

También se crean a semejanza de la página web más simple, de la que hablamos anteriormente. Tómese el tiempo para ver el curso gratuito de la Escuela de Venta de Sitios Web y aprenderá con qué rapidez y facilidad puede crear una página, ¡e incluso un sitio web!, en una noche.

Encabezado del sitio web

En el encabezado del sitio por lo general, se encuentra el título del sitio, la imagen o el logotipo. El propósito del encabezado del sitio es informar al visitante qué sitio ha visitado. Es muy importante que el título coincida exactamente con el contenido del sitio.

Encabezado del sitio web

Menú del sitio web

En el menú horizontal se ubican las secciones o encabezados temáticos. En esencia, estos son enlaces que conducen a otras páginas del sitio.

Menú horizontal del sitio web

cuerpo del sitio

Esta es la parte principal del sitio., que contiene toda la información básica. Está en el cuerpo del sitio que actualmente está leyendo este artículo.

Menú vertical para el sitio.

Menú vertical, así como horizontal, se utiliza para navegar por el sitio. El menú vertical se realiza en forma de preguntas o cualquier información interesante y útil que pueda interesar a los visitantes.

Pie de página del sitio

Pie de página del sitio ubicado en la parte inferior de la página web. Aquí hay información de derechos de autor e información de contacto.

Pie de página del sitio en la página principal

resumiendo

Ahora ya sabes en qué consiste página web sencilla. No hay elementos complejos e incomprensibles en la estructura de la página. Ahora toca poner en práctica los conocimientos adquiridos. Sigamos adelante. En la siguiente sección, creará

Con desarrollo Internet apareció un protocolo para el intercambio de información, el protocolo se llama HTTP (Protocolo de transferencia de hipertexto)(protocolo de transferencia de hipertexto). Junto con este protocolo, el servicio World Wide Web(llamado a menudo www o simplemente web), que es una vasta red de servidores http transferencia de archivos a través de Internet.

La mayor parte de estos archivos son páginas web- archivos especiales escritos en el idioma HTML (lenguaje de marcado de hipertexto) Lenguaje de marcado de hipertexto). páginas web publicado en Internet colocando dichos archivos en servidores HTTP (sitios web). Contenido páginas web pueden ser diferentes y estar dedicados a temas completamente arbitrarios, pero todos usan la misma base: el lenguaje HTML.
La mayoría de las personas que quieren crear su propio sitio web o página están familiarizadas con el idioma. HTML sólo rumores. Por lo tanto, un programa puede venir en su ayuda. Página principal de Microsoft, uno de los creadores de sitios web más famosos.

FrontPage, incluido en el paquete de la aplicación oficina de microsoft, fue el primer producto ampliamente utilizado para Internet, que combina las partes del cliente y del servidor y brinda la capacidad de desarrollar el sitio como un todo e instalarlo en los servidores más populares. página delantera capaz de asumir todo el trabajo de programación necesario. Sin embargo página delantera se convertirá en un asistente bastante serio para desarrolladores profesionales que prefieren tener en sus manos control total sobre el proceso creativo.

ventana del programa página delantera 2003.

Programa página delantera publicado por la empresa microsoft y hecho en el mismo estilo de los productos incluidos en el paquete oficina de microsoft, por lo que la apariencia del programa es casi la misma que la de un procesador de textos Palabra .

En la parte superior de la ventana hay una barra de menú y dos barras de herramientas: Estándar y formateo. Habilitar o deshabilitar la visualización de las barras de herramientas Ver menú.
En el lado izquierdo está Ver panel, con el que puede cambiar los modos de documento.
La parte principal de la ventana está ocupada por el área de trabajo, en la que se pueden abrir una o más ventanas que contienen documentos individuales.
En la parte inferior de la ventana está barra de estado que contiene información de contexto. También en la parte inferior de la ventana hay tres botones para ver el documento.
Mostrar barras de herramientas.
Para administrar las barras de herramientas en página delantera puedes usar los mismos métodos que en Microsoft Word. A saber:
en el menú Vista tienes que elegir Barras de herramientas de elementos, y en el nuevo submenú abierto - instalar banderas frente a esas barras de herramientas que necesita; o haga clic botón derecho del ratón para cualquier paneles de control(o el área al lado) y use el menú contextual de la misma manera.

página delantera como otras aplicaciones oficina de microsoft, le permite agregar, quitar, intercambiar elementos de menú y botones en las barras de herramientas. También es posible crear completamente sus paneles.
Para esto necesitas:

EN Menú de servicio elegir Configuración de elementos
o
V Ver menú elegir Barras de herramientas de elementos, y en el menú en cascada que aparece - Configuración de elementos
Como resultado de sus acciones, se abrirá un cuadro de diálogo. Configuración donde se pueden instalar los paneles necesarios.

Creación de un nuevo páginas web.

si has corrido página delantera significa nuevo Página web ya ha creado (al inicio página delantera inmediatamente abre un nuevo vacío Página web, listo para colocar texto y cualquier otro elemento).
Crear un nuevo Página web se puede hacer de otras formas:

Con botón Nueva pagina en panel estándar herramientas.
Menú Archivo seleccionar el submenú Crear, y luego - Página o Sitio web;
con combinaciones Control+N;
mediante el uso Menú de contexto(funciona en todos los modos excepto en los modos Tareas e informes) - por este interior lista de carpetas dado web) haga clic con el botón derecho y seleccione el elemento en el menú contextual que aparece. Crear  Página.

Creación de páginas utilizando el asistente y las plantillas.

Como se mencionó anteriormente, si usó el menú para crear una nueva página Archivo  Nuevo  Página o Sitio Web, Eso página delantera le pide que use una plantilla para crear una nueva página.
Para hacer esto, abrirá un cuadro de diálogo, cuya apariencia se muestra a continuación:

en la pestaña Son comunes este cuadro de diálogo muestra una lista de plantillas página delantera actualmente disponible. Al seleccionar cualquiera de las plantillas, puede ver su descripción en campo de muestra.
Creación Web de la página principal.
Web de la página principal de Microsoft es un conjunto páginas web, archivos de imagen y otros componentes que se pueden ver como una sola entidad.
Si haces un sitio en página delantera, entonces para su almacenamiento es más conveniente usar Web de la página principal.
la ventaja más importante es la capacidad de cambiar el nombre de los archivos incluidos en el Web de la página principal.
Imagina que antes de publicar tu sitio en Internet de repente notó que un par de archivos que ha nombrado nombres rusos. - "¡Ahora tendrás que subir todos los archivos y cambiar los enlaces con manijas!" duamete a ti.Ahi es donde te ayudara Web de la página principal- puede cambiar el nombre de los archivos de forma segura, y página delantera revisará de forma independiente todos los demás archivos incluidos en el Web de la página principal y cambie el nombre de todas las referencias al archivo que corrigió.
No describiré todas las demás ventajas, pero me gustaría decir que para utilizar todas las posibilidades página delantera, entonces es mejor usar Web de la página principal.
Así que para crear una nueva Web de la página principal haga clic en la flecha ubicada a la izquierda del botón Nueva página en la barra de herramientas y en el menú desplegable que aparece, seleccione el elemento Sitio web…

Apertura de páginas web.

Muy a menudo, al crear un sitio, debe editar los ya creados. páginas web. Puede volver a la misma página tantas veces como quiera para editarla o usar partes de ella para crear otras nuevas. páginas web.

Abrir un existente Página web posible en cualquiera de los modos existentes.

fuera de modo Vistas de página Hay cuatro formas de abrir una página existente:

1 camino

Si está trabajando con Web de la página principal luego simplemente seleccione el archivo deseado en lista de carpetas y haga doble clic en él.

2 vías

En el menú Archivo, seleccione Últimos archivos . En el menú desplegable que aparece, seleccione el archivo deseado.

3 vías

Usando el cuadro de diálogo Abrir archivo: Archivo  Abrir.

Avance.

Para ver cómo se ve su página directamente en el navegador, puede usar la pestaña Vista previa en el modo de edición páginas web. Pero en este caso, puede resultar que el navegador página delantera no mostrará correctamente algunos elementos de su paginas entonces lo mejor es:
use el botón en la barra de herramientas
o en Menú Archivo seleccione un artículo Avance r en el navegador.

Si utilizó el primer método, el contenido de su página se mostrará en el navegador incorporado página delantera.
Si usa el segundo método, entonces página delantera aparecerá un cuadro de diálogo Ver en el navegador...

Aquí puedes:
Seleccione el navegador en el que desea ver su Página web. Como regla, inicialmente se muestra aquí navegador, que está instalado por defecto en su máquina.
Agregue cualquier otro navegador, para lo cual necesita usar el botón Agregar.
Edite o elimine los navegadores instalados.
Establezca el tamaño de pantalla en el que su Página web

Preservación páginas web.

Por defecto página delantera en lugar de un nombre paginas toma la primera línea de texto de su paginas. Esto no siempre es lo que se necesita. Puede cambiar el título de la página usando Botones de edición- al hacer clic en este botón se abre el cuadro de diálogo Nombre paginas donde puedes cambiar el titulo paginas.

Eliminación páginas web.

al trabajar con sitio web tarde o temprano sucederá que ya no necesitarás algunas páginas y querrás eliminarlas.

Hay tres formas de eliminar páginas web.

1 camino

En panel lista de carpetas seleccione el archivo que desea eliminar y haga clic en el botón Borrar en el teclado

2 vías

En panel lista de carpetas clic derecho en archivo(o icono archivo) que desea eliminar y, en el menú contextual que aparece, seleccione Borrar.

3 vías

EN Panel de lista carpetas seleccione Archivo que desea eliminar y, a continuación, seleccione Eliminar desde el menú Editar.

Trabajar con texto.

A primera vista, introducir texto en página delantera no es diferente de ingresar texto en cualquier editor de texto (por ejemplo, en Microsoft Word).
Para escribir texto, simplemente haga clic en cualquier parte de la página y el cursor se colocará en el punto más cercano donde pueda ingresar texto.
Establecer letras mayúsculas, la edición de texto (eliminación de caracteres, inserción de texto, etc.) se realiza de la misma manera que en Microsoft Word.
Solo hay un pequeño PERO: cuando haces clic Introducir claves en página delantera se realiza una transición forzada del cursor a una nueva línea, mientras que se colocan sangrías de párrafo fijas antes y después del párrafo.
Si no necesita crear párrafos, entonces es mejor usar el atajo de teclado para pasar a una nueva línea Mayús+Intro.

Trabajando con imágenes.

Formatos gráficos en web.

Todas las imágenes de computadora, todos los formatos para almacenarlas (y, en consecuencia, todos los programas para procesarlas) se dividen en dos grandes clases: vectorial y ráster. imagen vectorial consta de objetos: formas geométricas formadas por líneas, arcos, círculos y curvas de Bézier. Ventajas gráficos vectoriales mucho. Desde el punto de vista de un diseñador, su ventaja más importante es que los gráficos vectoriales se pueden "torcer" a su gusto sin temor a "hacer un agujero" en la imagen o perder parte de la información. Otra ventaja es el pequeño tamaño de los archivos (en comparación con mapas de bits) e independencia de la resolución de los dispositivos de salida (ya sea una impresora o una pantalla de monitor). Estos factores han hecho gráficos vectoriales posible candidato para su uso en Internet. Cierto, cabe mencionar que por el momento los gráficos vectoriales no son tan comunes como nos gustaría.
Sin embargo, entre los formatos vectoriales actualmente utilizados, me gustaría señalar el formato Shockwave Flash por Macromedia. Para ver este formato en navegador necesita un complemento enchufar), distribuido gratuitamente por la empresa Macromedia. Hasta la fecha, hay sitios creados total y completamente con esta tecnología, así como sitios utilizados formato flash solo parcialmente.
La representación ráster de gráficos se basa en el concepto de ráster. Ráster es una colección de objetos (en este caso, píxeles) colocados en las mismas filas y columnas. Aquellos. archivo de computadora de trama puede pensarse como un conjunto de pequeños cuadrados coloreados o grises que forman un mosaico de la imagen. Porque el tamaño de estos cuadrados es obviamente pequeño, luego, al ver gráficos de trama, estos cuadrados se fusionan entre sí, formando un cambio continuo de colores.

El formato de almacenamiento de imágenes de trama tiene ventajas y desventajas. Una de las grandes ventajas de los gráficos de trama es la capacidad de trabajar con medios tonos, es decir, la capacidad de transmitir la imagen exactamente como se ve en la vida real. Pero entre las deficiencias, el principal problema es el tamaño del archivo. Naturalmente, cuantos más píxeles se asignen para la formación Imágenes, mayor será la calidad de la transmisión Imágenes, pero el tamaño del archivo también será mayor.
Si ahora volvemos a los navegadores, entonces podemos decir lo siguiente que la mayoría de los navegadores pueden mostrar archivos gráficos de cuatro formatos sin problemas (* .gif, *.jpg, *.png, *.bmp), de los cuales por el momento es mejor usar dos - * .gif y *.jpg. E incluso entonces después de la optimización preliminar.
Insertar imágenes en Página web.
Incruste una imagen en su Página web se puede hacer de varias formas:
1. Arrastra la imagen desde Explorador de Windows(es decir, directamente desde el explorador).
2. Arrastra la imagen desde explorador de Internet .
3. Arrastre un archivo de imagen desde el panel lista de carpetas, justo en la página.
4. Uso portapapeles- copie la imagen al portapapeles desde cualquier otro programa, y ​​luego en la página péguela desde el portapapeles.
5. Uso Agregar botones dibujar desde un archivo en la barra de herramientas Estándar.
6. Uso del menú Insertar  Dibujo.
Veamos estos métodos con más detalle:
Método 1
Explorador de Windows(es decir, directamente desde el explorador) necesita:
en página delantera
abra una ventana del explorador;
en la ventana del explorador, seleccione el archivo con la imagen que desea insertar en su página;
botón izquierdo del ratón arrastre el archivo de imagen a su Página web La imagen se insertará en la posición donde estaba el punto de inserción en la página.
Método 2
Para arrastrar una imagen desde explorador de Internet necesario:
en página delantera abra la página donde desea agregar una imagen;
V navegador abre la imagen que quieras poner en tu Página web navegador El nombre del archivo debe terminar con jpg, jpeg, gif);
botón izquierdo del ratón arrastre la imagen seleccionada a su Página web;
Método 3
Con el fin de arrastrar archivo con imagen de panel Lista carpetas, justo en la página que necesita:
en página delantera abra la página que desea agregar imagen;
seleccione el archivo de imagen requerido en el panel lista de carpetas;
boton izquierdo del raton arrastre la imagen seleccionada a su Página web;
La imagen seleccionada se insertará en la posición donde estaba el punto de inserción en la página.
Método 4
Para insertar una imagen en su Página web usando el portapapeles, necesita:
en la aplicación desde la que desea copiar la imagen, seleccione la imagen y use las teclas ctrl+c copie la imagen en el portapapeles;
sobre su Página web pegue esta imagen desde el portapapeles usando los atajos de teclado Control+V
Método 5
Página web decides usar el botón Añadir imagen desde un archivo en la barra de herramientas Estándar, Eso página delantera abrirá un cuadro de diálogo Dibujo.
En este cuadro de diálogo, especifique el archivo de imagen que le gustaría agregar a su Página web y presiona el boton Insertar.

Método 6
Si para insertar una imagen en su Página web decides usar el menú Insertar  Dibujo, Eso página delantera le indicará que elija otra opción:

Imágenes… - seleccionar ese elemento del menú le brinda la oportunidad de utilizar la biblioteca de imágenes ya preparada.
Desde el archivo...: al seleccionar este elemento de menú, tiene la oportunidad de especificar manualmente la ubicación del archivo de imagen que desea agregar a su Página web(el uso de este elemento abrirá un cuadro de diálogo Dibujo, el trabajo con el que se describió anteriormente).
Crear colección de fotos… - utilizando este elemento de menú, puede crear una colección de imágenes en un estilo específico. Para esto en la ventana que se abre Propiedades colecciones de fotos con un botón Agregar pestaña Dibujos seleccionar imágenes, y en la pestaña Disposición seleccionar formato.
Adición de archivos multimedia.

Además de gráficos simples, como - imágenes en formatos * .gif, *.jpg, *.png etc. página delantera le permite publicar en su páginas web archivos multimedia. Estos incluyen: videoclips, sonidos…

Para incrustar un videoclip, debe Insertar menú seleccione un artículo Dibujo, y luego Grabación de vídeo...

Se abrirá un cuadro de diálogo. vídeo de la ventana, mostrará videoclips en * .avi, *.asf, *.ram, *.ra.

Añadir sonido a Página web en la pestaña General del cuadro de diálogo Propiedades de página.

Trabajar con tablas.

Mesa- una de las herramientas más poderosas utilizadas para crear sitios web.
Inicialmente mesas se usa solo para representar datos estructurados. Sin embargo, se han convertido gradualmente en una poderosa herramienta de diseño general. páginas web.

Creando tablas

La forma más fácil creación de tablas- botón de uso Agregar tabla ubicado en la barra de herramientas Estándar.
Otra forma es con la ayuda de menú Tabla  Insertar  Tabla.
Y mesa se puede dibujar y pegar usando el portapapeles.

Entrada de datos y navegación de tablas.

Una de las mejores cosas de las tablas es que el texto ingresado se formatea dentro de la celda de la misma manera que estamos acostumbrados a formatearlo dentro de todo el documento. El texto colocado en una celda se ajusta automáticamente a una nueva línea si su longitud excede el ancho de la columna. Cuando presionas una tecla Ingresar, como es habitual, se inserta un nuevo párrafo. El texto o los números se ingresan en la tabla desde el teclado.

Antes de ingresar datos en mesa, debe colocar el cursor de texto en la celda deseada mesas. Esto se puede hacer haciendo clic en él con el ratón.

Sin embargo, es más conveniente usar atajos de teclado para moverse entre celdas:
Atajos de teclado: Acción:

Pestaña en cualquier lugar de la tabla, excepto al final de la última línea, vaya a la siguiente celda y seleccione su contenido
Pestaña al final de la última línea agregue una nueva línea al final de la tabla
Mayús+Tab pasar a la celda anterior y seleccionar su contenido
Ingresar comenzar un nuevo párrafo
Ingresar al comienzo de la primera celda agregar texto antes de la tabla al comienzo del documento

Creación y aplicación de formularios.

Formularios son campos de texto, botones de opción, casillas de verificación, botones y muchos otros controles. Es suficiente que el visitante del sitio ingrese alguna información en uno u otro campo de texto, seleccione algunos datos de la lista propuesta, haga clic en el botón Enviar, para que los datos sean enviados a Servidor web para su procesamiento (o procesado allí mismo en la página).

Vamos a conocerte - por favor completa los siguientes campos:
Su nombre:

Tu apellido:

Tu fecha de nacimiento: año mes día

¡Gracias! Y ahora, ¡en el camino!
1. Pequeño, pero ágil.
Donde sucede, manda.
Entrará en la tienda -
El héroe se dará la vuelta.
¿Quién es?
Mosca de pulgas Niño travieso
2. Ojos saltones se sienta,
habla francés,
Saltando como una pulga
Flota como un humano.
¿De quién estamos hablando?
Gato Rana Loro

3. ¿Cómo respira una foca después de sumergirse bajo el hielo?

4. ¿Por qué lloran las tortugas grandes?

5. ¿Qué tipo de ropa puede usar un arenque?
Chaleco de abrigo de piel
6. ¿A quién se le llama el "caballo de río"?
Cocodrilo Hipopótamo Nutria

7. ¿Qué pájaros no eclosionan pollitos?

8. ¿Qué pájaros no pueden volar?

Si necesita seleccionar varias respuestas, mantenga presionada la tecla control y haga clic con el botón izquierdo del mouse en la respuesta deseada

Pero creando formularios en el mismo página esto es sólo la mitad del trabajo. Ya que debe existir un programa que pueda procesar los datos introducidos por el usuario mediante formularios.
Dicho programa puede estar alojado en un servidor; puede estar en tu sitio web como un archivo separado, o simplemente puede escribirse en el código html en tu Página web.
Es ella quien determina qué pasará con la información que el usuario ingresó:

información se puede agregar a la base de datos y varios gráficos, las calificaciones se pueden construir sobre su base ...;
información puede enviarse por correo electrónico (esto se usa a menudo para obtener información sobre el usuario en cuestionarios de varios tipos);
información puede procesarse en el acto y el visitante de su sitio recibirá inmediatamente información de respuesta (por ejemplo, recibirá puntos para la prueba, verá la información que ingresó en el libro de visitas ...).

En una relación formularios Hay varias reglas básicas:

1 cada uno forma ocupa un área determinada páginas web. En uno Página web se pueden localizar uno o más formularios.
2. Cada formulario debe contener al menos uno de los elementos del formulario (aunque suele haber varios).
3. Cada artículo formularios tiene nombre y significado. El nombre identifica el campo de entrada y el valor se establece en el valor seleccionado por el usuario.
4. Uno de los elementos del formulario (puede ser un botón normal o cualquier imagen) debe actuar como un botón Enviar.

Creación de formularios en página delantera.
Para agregar un formulario a Página web, necesario:

Coloca el cursor donde quieras pegar forma.
EN Insertar menú elegir Formulario de artículo, en el menú que se abre, selecciona de nuevo Formulario de artículo. Forma se colocará en su Página web- aparecerá un área marcada con un marco punteado con dos botones: Enviar y restablecer.
Usando el mismo punto Insertar menú  Formulario inserte los elementos que necesita secuencialmente formularios seleccionándolos del menú desplegable en cascada (recordando que todos los elementos del formulario se insertan dentro del área del formulario marcada con un marco punteado).
Después forma creado, solo queda llenarlo con contenido - elementos formularios, texto, imágenes, tablas… (con dimensiones formularios cambiará automáticamente).
Agregar contenido formularios posible de la forma habitual. Por ejemplo, el texto se puede escribir o pegar desde el portapapeles... Todas las acciones con objetos agregados son similares.
Sin embargo creación de formularios- esto es solo el comienzo del trabajo. Después de su creación, debe configurar las propiedades, como la mayoría formularios, así como sus elementos.

Configuración de las propiedades del formulario.

Para procesar o guardar los datos introducidos por los visitantes páginas web, es necesario aprovechar las oportunidades que brindan Extensiones de servidor de FrontPage, o algún otro programa que se ejecuta en Servidor web.
Pero cualquiera que sea el programa que elija, todavía tiene que configurar las propiedades del formulario y los elementos que contiene.
Para abrir la ventana de propiedades del formulario:
V Insertar menú elegir Formulario de artículo, y luego -
o
llame al menú contextual del formulario y seleccione el elemento en el menú contextual abierto Propiedades de formulario.
Como resultado, se abrirá un cuadro de diálogo. Propiedades de formulario.

1 en Guardar campo resultados, debe especificar qué se hará con los datos ingresados ​​en forma. Puede elegir entre las siguientes opciones:
o Enviar nombre de archivo- los datos se colocarán en el archivo especificado en Servidor web. Este archivo puede ser Página web, que con el tiempo se hará más y más largo, o un archivo de datos que luego se puede procesar en excel, acceso o cualquier otro programa;
o Dirección de correo de envío- en este caso, cada vez que el visitante hace clic páginas web Enviar a botones forma se generará un correo electrónico y se enviará a la dirección que especificó. Este mensaje contendrá todos los datos ingresados ​​por el usuario en Página web.
o en la base de datos- en este caso los datos formularios será enviado a la base de datos. La base debe estar encendida Servidor web(o estar disponible para él).
2. en Campo de propiedades formulario, debe especificar el nombre del formulario
Ver modos en página delantera.
página delantera ofrece seis modos diferentes para ver contenido sitio web:

Página,
carpetas,
informes,
transiciones,
hipervínculos,
Tareas.
Para seleccionar el modo deseado, puede utilizar panel de vista ubicado en el lado izquierdo de la pantalla, o en el menú Vista en la barra de herramientas Estándar seleccione el elemento de menú apropiado.

Página
Este modo crea y edita páginas web. Aquí puede crear vacío páginas web y páginas basadas en plantillas para asignar temas a las páginas (un conjunto de estilos de presentación de página en la pantalla). En este modo, puede agregar y formatear texto, estilo paginas uso de imágenes gráficas y de video (conversión de varios formatos gráficos a * .gif, *.jpg y *.png), agregue audio a la página, presente información en tablas, marcos y formularios, y finalmente cree hipervínculos. Esta no es una lista completa de posibilidades. página delantera para la edición de contenido páginas web.
carpetas
En este modo, puede ver la estructura Sitio web(archivos y carpetas) y administrarlo de la misma manera que lo hace en ventanas, este modo le permite obtener información más detallada sobre archivos y carpetas que la que se proporciona en el modo de visualización Página.
Informes
Le proporciona más de una docena de informes que contienen una variedad de información sobre Sitio web, abierto durante Portada.
Transiciones
Diseñado para ver la jerarquía del sitio. En este modo, puede manipular la jerarquía arrastrando los rectángulos (cada uno de los cuales representa un Página web).
hipervínculos
Demuestra un sistema de hipervínculos que vinculan páginas entre sí. Sitio web(así como un sistema de hipervínculos a otros nodos), proporciona verificación de su integridad y la capacidad de cambio.
Tareas
Este modo es para la gestión de tareas. Sitio web(agregar, eliminar, ejecutar, establecer la prioridad de ejecución, así como rastrear el estado de las tareas).

Descárgalo gratis página delantera puedes seguir el siguiente enlace:

http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html

Un programa con el que podrás comprender de forma bastante sencilla los principios básicos del diseño de páginas web, que cuenta con una amplia gama de herramientas adicionales para la creación de sitios web complejos, portales.

Brevemente sobre Microsoft FrontPage

Es un editor web fácil de aprender y fácil de usar para diseñar, preparar y publicar sitios web. Gracias a la integración con la familia de productos de MS Office, una interfaz familiar y una gran cantidad de plantillas, el programa le permite dominar rápidamente el trabajo incluso para usuarios novatos que están familiarizados con los conceptos básicos de trabajar en MS Word. Al mismo tiempo, FrontPage no puede llamarse una solución para "tontos": el programa proporciona una amplia funcionalidad y varias herramientas para optimizar las páginas web.

Cabe señalar que el nombre Microsoft FrontPage existió hasta 2003, y luego se complementó con nuevas funciones y el nombre cambió. software. En 2007 FrontPage pasó a llamarse Microsoft Expression Web y en 2010 a Microsoft Office SharePoint Designer. De hecho, se agregaron algunas adiciones a las nuevas versiones, pero se conservó la vista principal del programa.

Principales herramientas del programa.

Vista general de Microsoft FrontPage

Microsoft FrontPage tiene mucho en común con las herramientas de MS Word, por lo que muchos de los botones y pestañas del menú también son intuitivos, lo que facilita el proceso de creación de páginas. Mucha gente ya sabe cómo escribir y formatear texto sin formato, crear tablas en Microsoft Word y la página se edita de la misma manera en FrontPage.

La figura de la derecha muestra una vista general del programa con un conjunto estándar de herramientas con las que puede crear una plantilla de página con texto, enlaces e imágenes. Vaya a la pestaña "Ver", luego a "Barra de herramientas" y asegúrese de que " Estándar", "Formateo" Y " mesas", estas herramientas serán suficientes para crear una página simple. Desde la parte inferior, preste atención a las pestañas "Constructor", "Código" y "Ver": estas son tres diferentes modos en el que siempre se puede ver cómo se ve la página creada.

  • En el Diseñador, se ingresan todas las ediciones, se escribe y formatea el texto, se insertan imágenes, se crean vínculos, y los colores de fondo y fuente se cambian de la misma manera que en Microsoft Word.
  • En la pestaña "Código", puede ver el llamado código HTML. HTML es el lenguaje de marcado estándar para documentos en la World Wide Web. La mayoría de las páginas web se crean utilizando el lenguaje HTML. En esta pestaña, también puede editar la página, pero necesita conocer este lenguaje de marcado. Sin embargo, los principiantes deben realizar todos los cambios en el constructor y todos los cambios en HTML se realizarán automáticamente.
  • En la pestaña "Ver", puede ver cómo se ve la página directamente en el navegador (como Internet Explorer)

Para obtener una descripción detallada de otros menús, botones y funciones de Microsoft FrontPage, consulte la Ayuda del programa. Para hacer esto, presione la tecla "F1".

Creación de una plantilla de página en FrontPage

Insertar la tabla principal en el editor

Entonces, para crear una plantilla simple, debe insertar una tabla con tres bloques. Tres bloques es un estándar simple: el bloque superior es para el nombre del sitio, el segundo bloque es para los enlaces de navegación del sitio y el tercer bloque es para texto, imágenes y otra información en la página. Puede insertar más bloques de mesa para mayor comodidad, pero ya es cuestión de gustos cómo, cuántos y de qué tamaño hacer estos bloques. Hay otra forma de crear bloques no a través de la creación de tablas, sino insertando los llamados elementos "div" en las páginas y asignándoles ciertos estilos, pero este método no es para nuevos webmasters, y se puede escribir un artículo separado sobre esto.

  1. Para insertar una tabla, vaya a la pestaña "Tabla" > "Insertar" > "Tabla" y complete los campos, como se muestra en la figura de la derecha. De hecho, puede ingresar sus propios parámetros, pero esta tabla tiene un ancho fijo y se extiende al 100% del área de la pantalla. Por lo tanto, la tabla se mostrará de forma compacta en el navegador.
  2. Luego, debe ajustar las tres celdas, ya que tienen la misma altura después de la inserción. Hacemos clic derecho en la celda superior y vamos a "Propiedades de celda" en el campo de altura, ingresamos condicionalmente "150" y marcamos la casilla "en puntos", es decir el tamaño de la celda será de 150 píxeles. En el mismo menú, podemos seleccionar el color de fondo de la celda, y al hacer clic en el menú "estilo ...", puede realizar otras configuraciones de celda, por ejemplo, seleccionar el color y el tamaño del borde de la celda, puede experimentar con esto y ver el resultado. En la celda misma, puede ingresar el nombre del sitio.
  3. A continuación, edite la segunda celda, que es para los enlaces de navegación del sitio. Hacemos que el ancho sea de unos 40 píxeles, esto será suficiente, y otras configuraciones, como el color de fondo y los márgenes, son personalizables a su gusto. A continuación, escribimos los nombres de los enlaces en sí, separándolos con señales de línea vertical u otra señal (puedes verlo a continuación descargando la plantilla completa). Seleccione la prueba y presione el botón de alineación central, como en MSWord. De la misma manera, puede cambiar la fuente, el tamaño de fuente y otras configuraciones de texto.
  4. También ajuste la última celda. Está destinado al texto principal, donde puede ingresar el texto de saludo.
  5. Finalmente, puede ir a la pestaña "Archivo" > "Propiedades", donde puede ingresar el nombre del sitio y cambiar el fondo general de la página y otras configuraciones generales

Ahora la plantilla está lista. Es el marco para todas las páginas posteriores del sitio. Así es como se ve el sitio en código HTML:

Obtenemos una plantilla para el sitio.

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "texto/html; juego de caracteres=windows-1251"> < title >nombre del sitio < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >nombre del sitio < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >hogar | < b >Página 2 | < b >Página 3 | < b >Página 4 | < b >Página 5 | < b >Contactos < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Texto de la página principal. Aquí puede insertar un texto de bienvenida y escribir brevemente de qué se trata el sitio.

Este código HTML se puede insertar inmediatamente en el editor en la pestaña "Código" e inmediatamente verá la plantilla terminada. Se puede modificar y editar para satisfacer sus necesidades. Aquí vale aclarar que donde se inserta el texto principal y para que no se ubique cerca de los campos, se enmarcó en la etiqueta "div", con la sangría configurada, como se muestra en el ejemplo.

Plantillas adicionales

  1. También debe saber que en FrontPage y otros programas similares, existen plantillas estándar que puede usar para crear páginas, son fáciles de editar y puede adaptar cualquier plantilla a sus necesidades. Para seleccionar una plantilla estándar, vaya a la pestaña "Archivo" > "Nuevo..." en la ventana que se abre, seleccione "Otras plantillas de página", donde puede seleccionar cualquier plantilla que desee.
  2. Hay una segunda opción: descargar la plantilla completa de Internet. Hay muchos sitios web que ofrecen este servicio. Las plantillas pueden ser tanto de pago como gratuitas. Después de descargar esta o aquella plantilla, puede editarla en el programa, completarla con el contenido necesario y cambiar el estilo de este o aquel elemento.

Uso de temas y diseños de tabla estándar

Microsoft FrontPage proporciona buenas herramientas para diseños de tablas listos para usar y temas de diseño para la creación de sitios web.

Debe saber que Microsoft FrontPage tiene un conjunto estándar de diseños de tablas y temas que pueden ayudarlo a aprender el arte de crear páginas regulares o sitios de tarjetas de presentación. Entonces, hay un menú desplegable en la parte superior derecha (vea la imagen a la derecha, que también muestra el resultado del uso de diseños de tablas y temas de diseño), al hacer clic aparecerá un menú en el que debe seleccionar "Diseño de tablas y celdas" y luego aparecerán muchos diseños de mesa diferentes a continuación, puede elegir cualquiera a su discreción y gusto. Por lo tanto, le permite crear la tabla usted mismo manualmente.

Entonces, al escribir o insertar su texto, logotipo, enlaces en las celdas de la tabla, al ir al mismo menú, puede seleccionar el menú "Tema", donde puede seleccionar diferentes temas para el diseño de la página, enlaces, fondo de página y mucho más. Esta oportunidad es buena para aquellos que recién están aprendiendo a crear páginas web y refleja claramente el proceso de creación de un sitio. En otras palabras, en Microsoft FrontPage, puede experimentar con diferentes configuraciones y ver visualmente cómo se transforma esta o aquella página. Aquí puede dar un consejo, estudiar todas las funciones del programa y no tener miedo de sacar provecho de un menú en particular, ya que cada herramienta tiene su propia propiedad y propósito para formar una página completa.

Inserta una imagen y crea enlaces a páginas

Es importante que los webmasters novatos sepan cómo insertar imágenes en una página y vincular a otras páginas. Por ejemplo, en lugar del texto del nombre del sitio, puede insertar una imagen del logotipo del sitio. Para hacer esto, primero haga clic en el campo donde desea insertar la imagen, luego en la parte superior, haga clic en la pestaña "Insertar"> "Imagen"> "Desde archivo", seleccione la imagen deseada y haga clic en "Insertar", después que la imagen aparecerá en la página. Al hacer clic en la imagen con el botón derecho del mouse, puede salir del menú con configuraciones de imagen adicionales. Es importante que todas las imágenes estén en una carpeta estrictamente definida para todas las imágenes.

Para ir a otras páginas del sitio, debe crear enlaces a través de los cuales los usuarios puedan visitar todas las páginas del sitio. Para hacer esto, seleccione el texto deseado para el enlace y vaya a la pestaña "Insertar"> "Hipervínculo", en el menú que se abre, debe especificar la página a la que se crea el enlace y hacer clic en "Aceptar". En la misma ventana, hay otras configuraciones para los enlaces, como abrir el enlace en una nueva ventana o no. En principio, puedes estudiarlo tú mismo.

Conclusión

En esencia, estos editores son similares entre sí, tienen funciones y menús similares. haber dominado ajustes básicos, puede crear fácilmente sitios en otros editores. Una vez que domine estos principios, puede pasar a un método más complejo de diseño de sitios web, utilizando el llamado CSS. Puedes leer sobre qué es y cómo editar el diseño del sitio en el artículo sobre CSS.

La desventaja de este método de "plantilla" es que cada página debe crearse por separado en función de la plantilla creada. Cuando, como cuando se crean sitios utilizando los llamados motores, no se requiere la generación separada de páginas, se forman automáticamente a medida que se agrega el contenido.

Si tiene alguna pregunta sobre el artículo, el uso de dichos programas para crear sitios, puede hacerla en el hilo de discusión de nuestro foro.

Artículos relacionados

Eliminar… botón (6)

permite

dedicado

selector

Costumbre

estilos.

en el botón

Crear...

abre

diálogo

Creación

estilo en el que

creado

selectores. prensado

al botón Cambiar… (8)

abre un cuadro de diálogo

Cambiar

estilo, que

Figura 5.40 - Cuadro de diálogo Estilo

coincide completamente con la ventana Crear estilo y se utiliza para cambiar la descripción del selector seleccionado. En caso de un cambio de estilo para una etiqueta de la lista de etiquetas HTML, este selector de etiquetas se mueve a la lista Estilos personalizados.

Al trabajar con un cuadro de diálogo

Cambiar

(Crear) estilo

se utilizan los siguientes campos y botones.

En el campo Nombre (a seleccionar) (1) : ingrese

nombre del selector (el nombre del selector de etiquetas debe

coincidir con el nombre de la etiqueta en sí; Nombre

seleccionador de clase comienza con un punto (.).

El botón Formatear (2) le permite obtener

acceso a la lista desplegable

puede seleccionar los siguientes elementos:

Fuente… -

abre

diálogo

Figura 5.41 - Estilo de cambio de ventana

Fuente,

permitiendo hacer

ajustes de estilo de fuente.

Párrafo…: abre el cuadro de diálogo Párrafo, que le permite establecer sangrías de párrafo (izquierda y derecha) desde la ventana del navegador, sangría para la primera línea, ajustar el espacio entre líneas y párrafos, ajustar el espacio entre palabras en párrafos;

Borde…: abre un cuadro de diálogo Bordes y sombreado, con el que puede establecer el borde del párrafo seleccionado, rellenar el párrafo con cualquier

color; Numeración… - abre el cuadro de diálogo Lista, con el que puede

crear listas numeradas, con viñetas y otras; Posición… - abre el cuadro de diálogo Posición, a través del cual

Puede colocar con precisión diferentes elementos en la página.

El campo Muestra (3) muestra cómo se verá el objeto al que se le aplicará el estilo creado.

El campo Descripción (4) muestra una descripción de texto de los atributos de este estilo.

El menú desplegable Tipo de estilo (5) está activo en caso de creación seleccionador de clase. Cuando se selecciona el tipo de Signo, la palabra span se agrega al comienzo del nombre del selector.

los selectores de etiquetas se aplican automáticamente después de la selección

comandos relevantes;

seleccionándolos entre los otros estilos en el desplegable

Lista de estilos (Fig.5.42) en la barra de herramientas

formato;

por elección

desde el cuadro desplegable Clase: Diálogo

Figura 5.42 -

Lista de estilos

Cambiar

(Fig.5.43), que abre

Estilo de botón… de varios

cuadros de diálogo (por ejemplo:

propiedades de dibujo,

Propiedades

tablas, propiedades de celdas,

Lista, Salto, Propiedades

linea horizontal).

usar

implementado

sus estilos

debe configurarse para cada

páginas web.

Figura 5.43 - Estilo de cambio de ventana

5.4.3. Hojas de estilo externas.

En este caso, se asigna un archivo separado para definir los estilos CSS, que serán referenciados por las páginas web. Este enfoque:

Proporciona una gestión de estilo CSS centralizada en todas las páginas web

(los cambios realizados se aplicarán automáticamente de forma inmediata a todas las páginas web que enlacen al archivo que contiene CSS);

se reduce el tamaño total del sitio web;

aumenta la velocidad de carga de las páginas web.

Para crear un archivo externo que contenga hojas de estilo en cascada, debe realizar los siguientes pasos (Fig. 5.44).

Ejecute el comando Archivo → Nuevo y seleccione un comando Más plantillas de página…

En el cuadro de diálogo Plantillas de página que se abre, seleccione la pestaña Hojas de estilo (2), que muestra las plantillas de hojas de estilo incluidas con FrontPage.

Elija una plantilla para crear su propia hoja de estilo hoja de estilo normal(3) y haga clic en el botón Aceptar.

Figura 5.44 - Creación de un archivo de estilo externo

La página resultante con la extensión .css debe guardarse (comando Archivo→Guardar) en una de las carpetas del sitio web con el nombre requerido

en letras latinas y extensión .css.

Crear descripción para selectores de etiquetas Y selectores de clase, mediante el comando Formato→Estilo..., que abre el cuadro de diálogo Estilo (Fig.5.40), descrito en el apartado anterior.

La hoja de estilo creada debe estar vinculada a las páginas del sitio web. Para esto es necesario.

Ejecutar comando Formato→Enlaces de hoja de estilo... .

EN cuadro de diálogo que se abre Conectar con

hoja de estilo

se puede instalar

las siguientes opciones:

cambiar todas las páginas (1) aplica

estilos para todas las páginas seleccionadas del sitio web;

cambiar

dedicado

paginas

aplica estilos a la página o web actual

páginas seleccionadas en el panel Lista de carpetas;

el botón Agregar… (3) se usa para agregar

Figura 5.45 - Cuadro de diálogo

el botón Eliminar (4) se utiliza para eliminar un archivo,

Enlace a la hoja de estilo

con hojas de estilo en cascada a páginas web (si se utilizan varias hojas de estilo en cascada);

El botón Editar (7) abre la URL seleccionada en la ventana Dirección: (8) archivo css para editar.

Pulse el botón Aceptar.

Los selectores se aplican a los objetos seleccionados de diferentes maneras:

los selectores de etiquetas se aplican automáticamente después de seleccionar los comandos apropiados;

se aplican selectores de clase:

Seleccionándolos entre otros estilos en la lista desplegable Estilo (Fig. 5.42) en la barra de herramientas Formato:

Seleccionando del cuadro desplegable Clase: del cuadro de diálogo Modificar estilo

(Fig.5.43), que se abre con el botón Estilo… de varios cuadros de diálogo

(por ejemplo: Propiedades de imagen, Propiedades de tabla, Propiedades de celda, Lista,

Separación, Propiedades de línea horizontal).

5.5. Marcos (frames) en una aplicación de FrontPage 2003.

Marcos: una herramienta para dividir la ventana del navegador en varias áreas

(marcos), cada uno de los cuales muestra el contenido de una página web separada. Cada área puede tener sus propias barras de desplazamiento y verlas con ellas no afecta a otras áreas. Con FrontPage 2003, puede crear varias estructuras de marcos, insertar marcos en línea y, según

la naturaleza de la información proporcionada para organizar hipervínculos apropiados. Todos los comandos relacionados con la estructura del marco se traducen con la palabra marcos.

Para organizar una estructura de marco, es necesario (Fig. 5.46).

Figura 5.46 - Creando una página de marcos Ejecute el comando Archivo→Crear y seleccione el comando Más plantillas de página…

(1) del panel de tareas Crear.

En el cuadro de diálogo que abre Plantillas de página, seleccione la pestaña Página de marco (2), que muestra plantillas (3) de páginas web con una estructura de marco,

incluido en MS FrontPage 2003.

Seleccione la plantilla más adecuada y haga clic en el botón "Aceptar".

La ventana de la nueva página web del marco (Fig. 5.47) se dividirá en partes de acuerdo con la estructura seleccionada. Esta página debe guardarse (Archivo→Guardar) en una de las carpetas del sitio web con un nombre (1) que se requiere con letras latinas.

Figura 5.47 Nueva página web de marco

1) Botón Establecer página de inicio...(2) le permite seleccionar un web-5 listo para usar

página del sitio web en la ventana Adición de un hipervínculo.

2) Botón Crear página(3) carga una nueva página web en blanco en el marco,

que se puede editar de la forma habitual.

Si algunos de los marcos se rellenan con el botón Crear página, luego al guardar la página de marcos (Archivo → Guardar), cada nueva página web se guarda por separado (se requieren nombres con letras latinas).

Cuando se trabaja con la página de marco, aparece otro botón Sin bordes (4) en la barra de botones de visualización. Este modo edita el contenido que se mostrará en el navegador si no admite la visualización de marcos.

El trabajo en páginas web incluidas en la estructura del marco es posible tanto por separado como a través de la página del marco

Para seleccionar uno de los marcos, debe hacer clic en él con el botón izquierdo del mouse. El marco activo se diferencia de los demás por un marco de color (5). Si hace clic con el botón izquierdo en el marco exterior de la página del marco, se seleccionará toda la estructura del marco. Los bordes del marco se pueden mover presionando el botón izquierdo del mouse.

Para trabajar con el marco seleccionado, puede usar los comandos de menú

Estructura.

El comando Dividir fotograma le permite dividir un fotograma en dos partes vertical u horizontalmente.

El comando Eliminar marco elimina un marco de la página de marcos. Sin embargo, si la red

la página cargada en este marco se ha guardado previamente, permanece en la estructura del sitio web.

Equipo Abrir página en nueva ventana abre la página web del marco para editarlo por separado de la estructura del marco.

Equipo Propiedad del marco... abre un cuadro de diálogo

Propiedades del marco, en el que puede establecer varios parámetros del marco: nombre, descripción, dimensiones, ancho y visualización de los bordes, propiedades de la barra de desplazamiento, relleno.

Figura 5.48 - Marco incorporado

Otra opción para usar marcos es insertar un marco incrustado (marco) en una página web normal (Fig. 5.48) con el comando Insertar→Marco incrustado. EN

Como resultado, en el lugar donde se colocó el cursor, se inserta un marco, que se puede llenar de dos maneras: Establecer página de inicio... o Crear página.

Al hacer clic con el botón izquierdo del mouse en el borde del marco, se selecciona el marco para cambiar el tamaño. Al hacer doble clic con el botón izquierdo del mouse en el borde del marco, se abre el cuadro de diálogo Propiedades de marco en línea donde puede establecer varias opciones

marco: nombre del marco, título, dimensiones, relleno, alineación, texto alternativo.

organizaciones

hipervínculos

paginas

marco

estructuras

necesario con

diálogo

Marco final (fig. 5.49)

e indicar donde

bota

nuevo objeto

Corriente de campo

página

Figura 5.49 - Cuadro de diálogo Marco final

marco (2) le permite seleccionar un marco para cargar un nuevo objeto haciendo clic en el botón izquierdo del ratón. En la lista (cargando en el mismo marco desde el que se organizó el hipervínculo), (cargando en una nueva ventana del navegador), (cargando en un marco incrustado).

5.6. Formularios en una aplicación de FrontPage 2003.

Los formularios le permiten organizar campos de texto, botones de radio, casillas de verificación, botones y muchos otros controles en páginas web. Cuando un usuario envía un formulario completo en el navegador, los valores de todos los campos del formulario se envían al controlador del formulario. Un controlador de formulario es un programa en un servidor web que se ejecuta cuando un visitante del sitio envía un formulario.

FrontPage 2003 admite varios motores de formularios alojados en servidores web que ejecutan FrontPage Server

Extensiones (extensiones de servidor de Microsoft FrontPage: un conjunto de programas y secuencias de comandos que admiten la creación de páginas en Microsoft FrontPage y amplían la funcionalidad de un servidor web), SharePoint Team Services versión 1.0 (Microsoft) o Microsoft Windows Servicios de SharePoint 2.0. Estos controladores aceptan los resultados del formulario y realizan varias acciones sobre ellos. En la aplicación FrontPage

también se admiten scripts, como ISAPI, NSAPI, CGI y ASP.

Hay tres formas de crear un formulario en MS FrontPage 2003.

1) Agregar un formulario vacío con botones Enviar y restablecer, comando

Insertar→Formulario→Formulario.

2) Insertar el primer campo de formulario con el comandoInsertar→Formulario→Campo de formulario. Se agrega automáticamente un área de formulario con los botones Enviar y Restablecer.

3) Seleccione y use una plantilla de formulario disponible o un asistente de página de formulario mediante los siguientes pasos.

En el panel de tareas Creación de página(comando Archivo→Crear) debe seleccionar

el comando Más plantillas de página… y la pestaña General.

Seleccionando una de las plantillas Libro de visitas, formulario de registro, página de búsqueda, formulario de comentarios le permite crear una nueva Página web con forma estándar.

Selección de plantilla Asistente de página de formulario inicia el asistente de página de formulario para determinar el número, el tipo y el contenido de los elementos del formulario.

El área del formulario se muestra en un cuadro punteado que solo es visible en la vista Diseño.

Para establecer las propiedades del formulario, debe colocar el cursor dentro del formulario y ejecutar el comando Insertar→Forma→Propiedades de forma… o haga clic con el botón derecho en el área del formulario y seleccione el comando del menú contextual Propiedades de la forma.... Como resultado, se abre el cuadro de diálogo Propiedades del formulario (1 Fig.5.50), en el que se configuran varios parámetros del formulario.

Sección Guardando resultados(2) define el escenario final para el procesamiento de datos del formulario. Si usa sus propios escenarios, debe configurar el interruptor en otro lugar (3) y seleccionar de la lista Guión personalizado....

Figura 5.50 - Configuración de los parámetros del formulario

Campo Nombre del formulario: (4) sirve

para especificar el nombre del formulario.

botón Finalizar cuadro

abre un cuadro de diálogo

El cuadro final en el que

puede seleccionar la ventana desde la que se realizará la solicitud.

Botón Opciones… (6)

abre un cuadro de diálogo

Opciones de controlador

formas (7). En el campo Acción:

(8) especifique el nombre del script para procesar el formulario o mailto: correo electrónico para enviar los datos del formulario a la dirección Correo electrónico correo electrónico. En el campo Método: (9), seleccione el método de transferencia de datos (método GET de transferencia de datos a través de la barra de direcciones, POST - método de transferencia de datos en el cuerpo de la solicitud HTTP). En el campo Tipo de codificación: (10)

especifica el tipo de codificación de los datos del formulario cuando se envían al servidor web. Posibles tipos de codificación: application/x-www-form-urlencoded: los datos del formulario se codifican como pares de nombre y valor, que se usan de forma predeterminada; multipart/form -data: los datos del formulario se codifican como un mensaje con partes separadas para cada control en la página, que se utiliza para enviar formularios que contienen archivos; texto/sin formato: los datos del formulario se codifican como texto sin formato, sin caracteres de control o formato,

se utiliza para enviar datos a una dirección de correo electrónico.

Más... botón (11) ventana abierta Propiedades de formulario adicionales

para editar campos de formulario ocultos (botones Agregar… , Editar… ,

Borrar).

Para agregar un campo de formulario al formulario, debe ejecutar el comando Insertar → Formulario

y seleccione el campo de formulario deseado de la lista. Para cambiar el tamaño de un campo, selecciónelo y arrastre uno de sus lados con el botón izquierdo del mouse. Los parámetros de cualquier campo de formulario se establecen en un cuadro de diálogo, que se puede abrir haciendo doble clic con el botón izquierdo del mouse en el campo. Campo Secuencia de transición

determina la secuencia en la que se rellenan los campos del formulario en el navegador. El botón Comprobar... de esta ventana sólo se puede utilizar si está utilizando los controladores de formulario estándar de FrontPage 2003. El botón Estilo...

textual

se utiliza para introducir un corto

mensajes, como nombres y

electrónico

Opciones

campos (nombre, valor inicial,

establecido

interactivo

la ventana Propiedades del cuadro de texto.

Figura 5.51 - Campos de formulario

Texto

se utilizan para introducir una o más líneas de texto, como un comentario.

Este campo es desplazable, lo que le permite ingresar textos de diferentes longitudes en él. Los parámetros de campo (nombre, valor inicial, ancho de carácter, número de líneas) se establecen en el cuadro de diálogo Propiedades del campo de texto.

Campo de carga de archivos(3): sirve para enviar un archivo a un servidor web en una carpeta específica de un sitio web, consta de un campo para ingresar un nombre de archivo y un botón de exploración que le permite abrir el cuadro de diálogo Selección de archivo. Los parámetros de campo (nombre, ancho en caracteres) se establecen en el cuadro de diálogo Propiedades del campo de carga de archivos.

Casilla de verificación (4) - sirve para organizar la selección de un elemento, el usuario puede marcar o desmarcar la casilla a su discreción. Los parámetros del campo (nombre, valor, estado inicial) se establecen en el cuadro de diálogo Propiedades de la casilla de verificación.

Interruptor (5): sirve para organizar una selección de una lista en la que puede seleccionar solo un valor (varios campos de interruptor con el mismo nombre de grupo). Los parámetros de campo (nombre, valor, estado inicial) se establecen en el cuadro de diálogo Cambiar propiedades.

La lista desplegable(6) - sirve para organizar la selección de la lista desplegable de una o más opciones. Rellenar el campo (botones Añadir…, Cambiar…, Eliminar, Arriba, Abajo) y sus parámetros (nombre, altura en filas,

permiso de selección múltiple) se establecen en el cuadro de diálogo

Propiedades desplegables . Al rellenar el campo (botones Agregar…,

Editar... ) abre un cuadro de diálogo adicional Agregar o

cambio de variante. En esta ventana, se especifica el nombre de la variante (el campo Variante:),

el valor que se transmitirá al enviar el formulario si se selecciona esta opción

decirles a los amigos