1. DISEÑO DE PAGINAS
WEB EN
ACTIWEB
WWW.ACTIWEB .ES

2. MENU
Ayuda
Código HTML
Imágenes Colores y Estilos
Archivos
Edición de y Ver
Publicar Páginas Cabecera, Pié y Menús
Desconectar Configuraciones
Para ir a cada tema presionar Control + Clic sobre la imagen
2

3. ORDEN DEL PROGRAMA
1.-SESION
A) DEFINICIÓN DE PÁGINA WEB, REGISTRO.
B) EDICIÓN DE PAGINAS, PUBLICAR Y VER, DESCONECTAR.
2.-SESION
C) CABECERA PIE Y MENÚ
D) ENVIÓ Y TRANSFORMACIÓN DE IMÁGENES
3.- SESIÓN
E) COLORES Y ESTILOS
F) ENVIÓ DE ARCHIVOS .PDF
4.- SESIÓN
G) CÓDIGOS HTML.
H) RECURSOS Y APLICACIONES ÚTILES DE OTROS SITIOS WEB
5.- SESIÓN
I) UTILIZACIÓN DE PLANTILLAS.
J) UTILIZACIÓN DE QUIZ PARA EVALUACIÓN EN LÍNEA
3

4. PAGINAS WEB
Una página web, también conocida como página de Internet, es un documento adaptado
para la Web y que normalmente forma parte de un sitio web. Su principal característica
son los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
Una página web está compuesta:
• Información. (sólo texto o multimedia)
• Hiperenlaces.
• Datos de Estilo (Especificar cómo debe visualizarse)
• Aplicaciones. (Programas que lo hace interactivo).
TIPO DE PÁGINAS
a) Páginas Web Estáticas
El contenido de la página puede ser predeterminado
b) Páginas Web Dinámicas
La información se Genera al momento de visualizarla o solicitarla a un servidor web.
MÉTODOS PARA CREAR PÁGINAS
a) Lenguajes de programación
• HTML ( Lenguaje de marcación de Hipertexto)
• JAVA ( Desarrollado por Sun Microsystems )
• ASP.NET ( Página de servidor activo)
• Perl (Lenguaje Práctico para la Extracción e Informe)
• PHP (Hypertext Pre-processor)
• JavaScript,
4

5. b) Aplicaciones para el desarrollo de páginas Web
• Dreamweaver
• FrontPage
• Mozilla Composer
• NVU
c) Editores en línea
• Wanadoo
• Tripod
• Miarroba
• Actiweb
5

6. 1.- PAGINAS WEB
Una página web, también conocida como página de Internet, es un documento adaptado
para la Web y que normalmente forma parte de un sitio web. Su principal característica son
los hiperenlaces a otras páginas, siendo esto el fundamento de la Web.
Una página web está compuesta principalmente por información (sólo texto o multimedia)
e hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe
visualizarse, o aplicaciones embebidas para hacerla interactiva.
Las páginas web son escritas en un lenguaje de marcado que provea la capacidad de
insertar hiperenlaces, generalmente HTML.
El contenido de la página puede ser predeterminado ("página web estática") o generado al
momento de visualizarla o solicitarla a un servidor web ("página web dinámica"). Las
páginas dinámicas que se generan al momento de la visualización se hacen a través de
lenguajes interpretados, generalmente JavaScript, y la aplicación encargada de
visualizar el contenido es la que debe generarlo. La páginas dinámicas que se generan al ser
solicitadas son creadas por una aplicación en el servidor web que alberga las mismas.
DEFINICION DE ACTIWEB
Es un servicio de creación de sitios web gratuito, orientado para pequeñas empresas,
negocios y profesionales. De este modo se garantiza la presencia en Internet a este tipo de
empresas y sectores. A su vez Actiweb revisa y publica las páginas que han sido aprobadas
para que sean indexadas por los buscadores y las promociona si su contenido lo merece.
Registro de en la Pagina Web
1.- Entrar a la pagina www.actiweb.es
2.- Poner el nombre de la pagina www.actiweb.es/ Nombre
3.- llenar datos como nombre de la empresa, categoria, pais, descripción, y correo.
6

7. 2.- EDICIÓN, CREACIÓN DE PÁGINAS Y ENVIÓ DE
CONTENIDOS
El menú de edición dispone de varias opciones, podrá editar la página principal (índex) o
crear nuevas páginas. Para ello deberá definir varios parámetros y entenderlos antes de
empezar:
1-Nombre de la página
Es el nombre del archivo, no debe contener espacios ni caracteres especiales. No debe
repetir los nombres de las páginas.
2-Título
Es el texto que aparecerá en la barra del explorador, también aparecerá en los favoritos de
los usuarios que hayan navegado en su página. No debe repetir los títulos de las páginas.
3-Descripción de la página
Resumen del contenido de la página. Consiste de un texto corto que explica más
extensamente cual es el contenido de la página. Es tomada en cuenta por los motores de
búsqueda e incluso favorecen la indexación siempre y cuando esté relacionado con el
contenido. Debe contener unos 100 caracteres.
4-Palabras clave
Son las palabras (keywords) separadas por comas. No son visibles por un visitante normal
pero si son tomadas en cuenta por los buscadores. Una vez definidos éstos parámetros
podemos editar la página con el editor
7

8. Opción Editar del Editor de Pagina
Esta opción del editor de página será el lugar en el cual se podrá crear y modificar el
contenido de nuestra pagina Web, es decir, podremos introducir texto, imágenes, videos,
así como también código HTML, además de poder modificar el formato de dichos
elementos.
Para acceder a esta función será necesario dar clic en el icono de edición de página del
menú principal de Actiweb e inmediatamente después se desplegara una nueva
pagina de donde elegiremos la opción editar (Ver figura de menú de paginas).
Una vez elegida dicha opción actiweb nos proporcionara la página del editor en la cual
podremos iniciar a trabajar en el diseño del contenido de nuestra página, pudiendo
utilizar las opciones para dar formato que se explicaran mas adelante en este documento.
Es importante señalar que una vez que terminemos de ingresar la información de nuestra
página Web debemos dar clic en el botón de ENVIAR del menú del editor para que los
cambios sean guardados en servidor de Actiweb.
8

9. Veamos algunas de las opciones del Editor
Estilo: Permite seleccionar el tipo de texto que se está escribiendo. Normalmente es un
párrafo pero puede utilizar distintos tamaños de encabezados.
Fuente: Selecciona una fuente diferente a la que se emplea habitualmente. Puede
seleccionar un texto y aplicar una fuente diferente.
Tamaño: Define el tamaño de la fuente que se emplea. También se puede aplicar el
tamaño a un texto seleccionado.
Enviar: Envía el documento y guarda los cambios.
Salir sin guardar: Se sale del documento y no se guardan los cambios.
Negrita: Aplica negrita a la fuente seleccionada.
Cursiva: Aplica cursiva a la fuente seleccionada.
Subrayado: Aplica subrayado a la fuente seleccionada.
Alinear a la izquierda: Alinea el texto a la izquierda del contenedor.
Centrado: Centra el texto imagen o objeto en el centro del contenedor.
Alinear a la derecha: Alinea el texto a la derecha del contenedor.
Justificado: El texto se alinea en ambos lados.
Línea horizontal: Inserta una línea para separar párrafos diferentes.
Lista numerada: Crea una lista ordenada numéricamente
Lista: Crea una lista sin números.
Tabulado: Inserta un párrafo tabulado.
Color del texto: Cambia el color del texto seleccionado.
Color de fondo: Cambia el color del fondo del texto o el contenedor seleccionado.
9

10. Eliminar formato: Elimina el color o el formato de un texto.
Insertar enlace: Crea un enlace a otra página web con el texto o imagen
seleccionada.
Insertar tabla: Inserta una tabla para distribuir el contenido de forma organizada en la
página puede leer más información en Uso de tablas
Insertar Imagen: Inserta una imagen procedente de otra URL o de la lista de imágenes
enviadas. Es posible alinearla en el texto.
Insertar HTML: Inserta un código HTML de la lista de códigos enviados en la posición
del cursor.
*Solo en el pie de página
Insertar Email*: Inserta una dirección de correo electrónico.
Insertar contador*: Inserta el contador de visitas en la posición del cursor
10

11. 3.- PUBLICAR Y VER PÁGINAS
Una vez realizadas todas las modificaciones ya podemos publicar nuestra página.
Al publicarla podrá ser visible desde cualquier equipo en la dirección
http://panel3.actiweb.es/xxx donde xxx sería el nombre de usuario que se tiene asignado.
La página inicial siempre es el índex, y el resto de páginas serán también publicadas con
sus respectivos nombres.
Para visualizar ejemplo: http://panel3.actiweb.es/mcsolano
Podrá acceder a la página que desee directamente pulsando su enlace o en index.html y
una vez dentro de la página podrá también ir directamente a la función de edición
pulsando sobre la imagen de abajo.
Solamente usted podrá modificarla y el resto de usuarios que vean la página y pulsen
sobre la imagen serán redireccionados a nuestra página principal.
11

12. 4.- MODIFICACIÓN DE LA CABECERA, PIÉ Y MENÚS
En éste menú podremos configurar 3 partes fundamentales en la página y se repiten en
todas ellas. Vamos a definir su significado y cómo podemos editarlas.
1- Cabecera de la página
Es la parte superior y normalmente incluye el logo, el título, en algunos casos muestra
datos de contacto. También puede consistir en una imagen grande del tamaño ancho de su
página. Es recomendable que no sea muy alta ya que restaría importancia al contenido.
2- Menús de navegación
Los menús de navegación está compuesto por varios enlaces de dirigen al usuario a
diferentes páginas del sitio. Pueden ser de varios tipos. Vertical o horizontal.
El menú vertical se suele colocar a la izquierda de la página y ocupa más espacio. También
puede colocar una imagen para rellenar.
El menú horizontal suele ir debajo de la cabecera y ocupa mucho menos espacio.
Cada sitio requiere un tipo de menú u otro en función a los colores y al contenido. Puede
cambiarlo tantas veces como quiera y recuerde que puede cambiar los colores en la
sección de colores y estilos.
3- Pié de la página
Es la parte inferior de la página y normalmente incluye algún enlace a otra página, el
copyright, en algunos casos muestra datos de contacto y un contador de visitas. También
se recomienda por estética que no sea muy alto.
5.- ENVIÓ Y TRANSFORMACIÓN DE IMÁGENES
12

13. Aquí es donde enviaremos todas las imágenes de nuestro sitio. Para enviar una imagen
nueva debe pulsar sobre el enlace Enviar nueva imagen.
Puede enviar imágenes en formato BMP, GIF, JPG o PNG con tamaños inferiores a 1 Mega.
Si dispone de imágenes de mayor tamaño deberá comprimirlas antes de enviarlas con
cualquier aplicación para editar imágenes. También puede enviar imágenes animadas en
formato GIF.
Antes del envío deberá seleccionar una imagen de su disco duro para
enviarla al servidor. Si lo desea podrá ver las imágenes pulsando sobre
el icono Ver Vistas en miniatura tal y como vemos en el ejemplo
siguiente después de pulsar Examinar.
Será necesario definir un texto alternativo que dará información sobre el contenido de la
imagen.
Finalmente podrá seleccionar su tamaño para no tener que redimensionar después y la
carga de su página sea más rápida. Dispone de varios tamaños 100,200,300,400,500,600 y
original. Si envía imágenes en tamaño original asegúrese que caben perfectamente dentro
del contenido.
Una vez haya rellenado todos los campos pulse sobre el botón Enviar. En algunos casos
suele tardar unos minutos en función al tamaño pero una vez enviada estará disponible
para poderla utilizar.
Si obtiene un error o el tiempo de envío es muy largo deberá comprimirla en su ordenador
antes de ser enviada. Más adelante podrá corregir solamente el texto alternativo o podrá
eliminar las imágenes que no utilice.
13

14. 6.-DICION DE COLORES, ESTILOS Y CONTADOR DE VISITA
Esta opción le permitirá actualizar los estilos y los colores generales de su página de forma
separada. La página está compuesta por varias partes y tendrá una vista previa orientativa
de cómo queda.
Para modificar cualquier color debe pulsar en el botón que aparece junto a el para ver una
paleta con los colores disponibles.
También puede escribir el color en la caja de texto en formato hexadecimal. Los tipos de
letra también pueden ser modificados en fuente y tamaño.
La página está compuesta por varias partes que detallamos a continuación.
1- Fondo de la página
Es posible establecer su color, anchura del contenido 750 o 900 Pixeles, establecer el
fondo con una imagen y definir el tipo de esquinas que enmarcarán después el contenido.
2- Cabecera
Es la parte superior y es común para todas las páginas. Generalmente está compuesta por
el nombre de la página o empresa, logotipo y otros elementos que se repiten en todas
ellas. Normalmente se suministra poca información pero es más algo decorativo.
3- Menús
Los menús son unos enlaces que dirigen a todas las páginas del sitio. Puede modificarlos
de forma que sean fácilmente visibles y contrasten perfectamente con el resto del
contenido para que el usuario pueda encontrar fácilmente lo que busca.
14

15. 4- Contenido
El contenido es la parte más importante de la página, en el se redacta la información de
cada una de ellas y se incluyen imágenes, textos y otros objetos. Los colores deben
adaptarse a su página y debe ser fácil de leer.
6- Pié de página
Es la parte inferior de la página y común para todas ellas. En él normalmente se incluyen
datos de contacto y el contador de visitas. Debe ser también fácilmente accesible.
7- Contador de visitas
Puede seleccionar el estilo del contador de vistas según el tema de su página, le permitirá
llevar un conteo del número de personas que han entrado a su página.
7.- ENVIO DE ARCHIVOS .PDF
Los archivos PDF son documentos en formato portátil. Pueden ser leídos fácilmente y son
también fáciles de imprimir. Pueden utilizarse para enviar tarifas de precios, libros
electrónicos y otros documentos. Pueden generarse con aplicaciones que emulan una
impresora e imprimen el contenido en un documento.
Aquí es donde enviaremos todos los archivos PDF de nuestro sitio. Para enviar un nuevo
archivo debe pulsar sobre el enlace Enviar nuevo documento PDF.
Debe enviar documentos con tamaños inferiores a 1 Mega.
Antes del envío deberá seleccionar una documento de su disco duro para enviarlo al
servidor con el botón Examinar. Y seguidamente Enviar. El archivo estará en la lista de los
documentos disponibles. Más adelante deberá insertar un enlace en el editor de textos de
la página para poder acceder al documento.
15

16. 8.- CODIGOS HTML, MUSICA, VIDEOS Y OBJETOS PARA
INSERTAR
Ésta es una de las opciones más interesantes. Con ella podremos insertar fragmentos de
código procedentes de otras páginas que añaden todavía mucha más funcionalidad. Estos
fragmentos deberemos definirlos antes para poder disponer de ellos de forma rápida
cuando sea necesario.
En ésta sección podrá ver un ejemplo para definir un Video de Youtube Música de
Goear y un Mapa de Google. También es posible insertar códigos procedentes de otros
sitios y el funcionamiento es básicamente el mismo.
Ejemplo de inserción de un video de youtube
Pulsar sobre el enlace de Enviar nuevo código en el menú HTML. Deberá navegar dentro
de la página de Youtube y encontrar el video que desea insertar y seleccionar la casilla
donde pone Insertar. A continuación deberá copiar el texto pulsando Control+C y pegarlo
en la casilla de código pulsando Control+V. También es posible mediante el menú editar de
su explorador en la parte superior.
Una vez pegado el código deberá definir una descripción para poder identificarlo
fácilmente.
16

17. Al final pulse sobre el botón Enviar HTML y aparecerá en la lista de códigos para poder
utilizarlo más adelante.
Si lo desea puede ver el resultado del código concreto con el enlace Ver o puede eliminarlo
si no lo necesita con el enlace Borrar.
Ejemplo de inserción de una canción de Goear
http://www.goear.com/
Pulsar sobre el enlace de Enviar nuevo código en el menú HTML. Deberá navegar dentro
de la página de Goear y encontrar la canción que desea insertar y seleccionar la casilla
donde pone This song in your site. A continuación deberá copiar el texto pulsando
Control+C y pegarlo en la casilla de código pulsando Control+V. También es posible
mediante el menú editar de su explorador en la parte superior.
Una vez pegado el código deberá definir una descripción para poder identificarlo
fácilmente.
17

18. Al final pulse sobre el botón Enviar HTML y aparecerá en la lista de códigos para poder
utilizarlo más adelante. Si lo desea puede ver el resultado del código concreto con el
enlace Ver o puede eliminarlo si no lo necesita con el enlace Borrar.
Codigo para la Hora
<script src="http://h1.flashvortex.com/display.php?id=3_1265853734_45484_252_0_177_71_8_5"
type="text/javascript"></script>
Código para video
<object width="500" height="405"><param name="movie" value="http://www.youtube-nocookie.com/v/yqK-
7fcJ11k&hl=es_MX&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param
name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/yqK-
7fcJ11k&hl=es_MX&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="500" height="405"></embed></object>
Codigo para musica
<object width="353" height="132"><embed src="http://www.goear.com/files/external.swf?file=fc1abf0" type="application/x-
shockwave-flash" wmode="transparent" quality="high" width="353" height="132"></embed></object>
18

19. 9.-OPCIONES DE SEGURIDAD
Ésta opción permite realizar cambios sobre su cuenta, realizar copias de seguridad de los
datos y cambiar el tamaño del editor de texto.
Copias de seguridad
Crea un archivo que debe descargar a su PC para utilizarlo en caso de perder algún dato. Se
podrá restaurar enviándolo de nuevo.
Tamaño del editor
Establece un tamaño para que el editor se ajuste a su pantalla al editar las páginas.
Datos de la cuenta
Tiene la posibilidad de cambiar la dirección de correo de su cuenta. Es muy importante
tenerlo actualizado ya que nos permite recibir la contraseña en caso de no recordarla. Para
poder cambiarlo deberá escribir la contraseña por motivos de seguridad.
También es posible cambiar la contraseña, es recomendable cambiarla periódicamente e
intente que no sea fácil de descubrir.
19

20. 10.- RECURSOS Y APLICACIONES ÚTILES DE OTROS SITIOS WEB
Esta es una lista de sitios que no tienen relación con Actiweb, pero nos pueden ayudar a ampliar y
dar mas funcionalidad a nuestras páginas.
Registro de dominios .com .es. .org etc...
http://sered.net
Texturas ( deben descargarse a su pc y enviarlas )
http://www.allfreebackgrounds.com/
http://www.grsites.com/textures/
*Situarse sobre la imagen y con el botón derecho del ratón "guardar como" Al enviarla debe ser en formato Original.
Códigos HTML funcionales para pegar
Sonido y música
http://www.goear.com/
Videos
http://www.youtube.com/
http://www.vimeo.com/
Mapas
http://maps.google.com/
Alojamiento de imagenes
http://imageshack.us/
http://tinypic.com/
Galerias de imagenes
http://www.slide.com/
http://www.picturetrail.com/
Presentaciones PPS
http://www.slideshare.net/
Optimizar imagenes (reducir su tamaño)
20

21. http://www.imageoptimizer.net/
http://freshpixels.net
Archivos PDF (alojar y compartir documentos online)
http://www.scribd.com/
Salas de chat
http://xat.com/
http://www.spinchat.com/
Chat (servicio técnico)
http://www.meebome.com/
Formularios
http://spanish.jotform.com/
Disponiblidad para hoteles y alojamientos
http://www.avaibook.com
Estadisticas de visitas
http://www.statcounter.com/
Creación de logotipos
http://cooltext.com
Menús, banners y elementos flash
http://www.flashvortex.com/
Libros de visitas
http://www.tagboardgratis.com/
http://www.smartgb.com/
http://cbox.ws/
21

22. 11.- TEMPLATES, ESTILOS Y CONTADOR DE
VISITAS.
Antes de nada, para poder utilizar los templates o temas profesionales debe haber seleccionado
en el menú opciones Utilizar templates profesionales.
A partir de este momento dispondremos de un menú diferente en colores y estilos. Tal y como vemos a
continuación.
1-Seleccionar plantilla
Nos muestra una lista de plantillas compatibles. Al seleccionar una plantilla, todos los parámetros de
colores, estilos tomarán como referencia los datos de esa plantilla.
22

23. 2- Editar plantilla
Esta opción nos permitirá editar y personalizar la plantilla hasta el mas mínimo detalle. Tal y como vemos a
continuación cada zona se muestra con un contorno rojo al pasar el ratón sobre ella. Al hacer click nos
muestra una ventana con todos los parámetros disponibles.
Arriba a la izquierda tenemos dos iconos, para acceso rápido a todas las acciones o elementos que no
están disponibles y también para salir.
3- Editar cabecera
Una vez tenemos la plantilla a nuestro gusto deberemos editar el título y el subtítulo en la sección de
cabecera, pié y menús. ( Los usuarios de la versión 3 deberán editarla de nuevo y no estará disponible la
cabecera antigua por problemas de compatiblidad)
4- Editar el menú
Antes de nada deberemos tener varias páginas. Debe crearlas y editarlas en edición de páginas.
Tendremos disponible el menú superior y el lateral. Si no hay datos los menús no aparecerán en la página.
Los marcadores sociales permiten compartir nuestra página en las redes sociales mas importantes.
El código html activará una area de widgets, donde podremos colocar componentes comunes para todas
23

24. las páginas.
Pagina web: http://elsujetoysuformacion.webs.tl
24

25. las páginas.
Pagina web: http://elsujetoysuformacion.webs.tl
24

26. las páginas.
Pagina web: http://elsujetoysuformacion.webs.tl
24

27. las páginas.
Pagina web: http://elsujetoysuformacion.webs.tl
24