manual paginas web

Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]

Diseño de

Páginas Web

En Dreamweaver


Contenido Introducción ........................................................................................................................................ 3

Internet ........................................................................................................................................... 3

Páginas Web .................................................................................................................................... 3

Introducción A Dreamweaver CS6. ..................................................................................................... 5

¿Qué es Dreamweaver? .................................................................................................................. 5

Acceso a Dreamweaver. .................................................................................................................. 5

Entorno de Desarrollo Dreamweaver ............................................................................................. 7

Guardar un documento ................................................................................................................... 8

Cerrar y salir de Dreamweaver........................................................................................................ 9

Abrir un documento ........................................................................................................................ 9

Vistas del documento. ....................................................................................................................... 10

Vista Código. .................................................................................................................................. 10

Vista Diseño. .................................................................................................................................. 11

Vista Dividir. .................................................................................................................................. 12

Sitio Web. .......................................................................................................................................... 14

Configurar un Sitio nuevo.............................................................................................................. 14

Diseño básico de estructura para página web .................................................................................. 17

Creando el diseño en Dreamweaver ................................................................................................. 19

Aplicando CSS ................................................................................................................................ 23

Agregando Imágenes ..................................................................................................................... 31

Imagen de sustitución. .................................................................................................................. 41

Formato de contenido ................................................................................................................... 45

Creando el sitio web .......................................................................................................................... 58

Agregar Música ............................................................................................................................. 62

Agregar Video ................................................................................................................................ 64

Formulario de contacto ................................................................................................................. 66

Publicar nuestro sitio ........................................................................................................................ 70

Hosting .......................................................................................................................................... 70

Dominio ......................................................................................................................................... 72


Introducción

Internet

Internet es una red mundial de computadoras que están interconectadas entre sí. Su fin es servir de autopista en donde se comparte información o recursos. Esto lo hace por medio de páginas, sitios o softwares.

Su popularidad se ha hecho cada vez mayor por su capacidad de almacenar, en un mismo lugar, información de todo tipo y para diferente público. En Internet podemos encontrar información de música, arte, cultura, medicina, literatura, ingeniería y mucho más. Por medio de texto, audio, video, música, e imágenes, Internet nos permite informarnos, aprender y divertirnos. Para muchos, Internet es una herramienta perfecta para eliminar las diferencias y las distancias, ya que nos permite expresarnos libremente, y hace que la información, el conocimiento y el mundo entero estén al alcance de más personas. Internet, más que una tecnología, es un medio de comunicación.

Páginas Web

Es el nombre de un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces y muchas otras cosas, cuyo formato se ajusta a las especificaciones del Lenguaje de Marcado de Hipertexto, o HTML el cual le indica a la página Web como debe mostrar la información (posición de imagen, colores, tipos de fuentes).


Las personas utilizan los navegadores web para ver los documentos HTML o las páginas web en sus computadoras, si enlazamos varias páginas web entre ellas, podemos decir que tenemos un sitio web. Para la creación de páginas o sitios web hay variados Entornos de desarrollo integrado (IDE- Integrated Development Enviroment), también conocidos como entornos de diseño integrado, en esta ocasión aremos utilización de Adobe Dreamweaver. Dreamweaver es una aplicación útil para crear pagina y sitios web, ya que permite a cualquier persona pueda hacerlo conozca o no HTML (Lenguaje de Marcado de Hipertexto), En las páginas y sitios que diseñemos en Dreamweaver podremos hacer uso no tan solo de texto, también podremos usar animaciones, imágenes, videos y sonidos de una forma muy sencilla. Una vez que tengamos nuestra página o sitio web creado, debemos publicarlo y subirlo una computadora llamada servidor web (hosting), ese servidor web está conectado a internet permanentemente y cuando una persona necesita ver el sitio web que diseñamos y publicamos solo tendrá que escribir la dirección apropiada en el navegador y podrá visualizar nuestro sitio web.


Introducción A Dreamweaver CS6.

¿Qué es Dreamweaver?

Dreamweaver es el software para el desarrollo y diseño de Páginas Web adaptables para diversos dispositivos.

Acceso a Dreamweaver.

Para abrir Dreamweaver ir a:

Clic en “Inicio”

Clic “Todos los programas”

Clic “Adobe Dreamweaver CS6”


Esperar que cargue Crearemos un nuevo documento HTML, para eso vamos a la columna centrar y hacemos clic en HTML


Entorno de Desarrollo Dreamweaver

Botón de Aplicación

Pestaña del Documento

Barra de Herramientas del documento

Conmutador de espacios de trabajo Barras de Menú

Área de Trabajo

Barra de Herramientas de

Estado

Inspector de propiedades Paneles


Para empezar a trabajar escribiremos en el área de trabajo “Curso de Diseño web con Dreamweaver “

El área de trabajo es donde diseñaremos nuestro sitio web podemos escribir y

diseñar de manera similar como lo hacemos en el procesador de texto Word.

Ahora procederemos a guardar nuestra página web recién creada.

Guardar un documento

Para guardar un documento en Dreamweaver CS6, clic en el menú Archivo Guardar.

Al guardar por primera vez un documento aparecerá el cuadro diálogo Guardar

como, donde se habrá de especificar el nombre del archivo (ejemplo 1.html) y el tipo de documento a guardar.(creamos una carpeta en escritorio llamada Curso Dreamweaver, allí guardaremos todos los documentos que creemos a lo largo del curso).


Siguiendo con procedimientos básicos en Dreamweaver ahora veremos cómo abrir y cerrar documentos.

Cerrar y salir de Dreamweaver.

Para cerrar un documento en Dreamweaver CS6, Menú Archivo Cerrar.

Abrir un documento

Para abrir un documento en Dreamweaver CS6, realiza lo que se señala a continuación:

Menú Archivo Abrir.

Una vez realizado lo anterior aparecerá el cuadro de diálogo Abrir, donde deberás seleccionar el documento a abrir, en este caso abriremos el documento que creamos anteriormente “Ejemplo1.html”.


Vistas del documento.

Dreamweaver CS6, ofrece distintas vistas que permiten mostrar y editar el contenido del documento de variadas formas y así trabajar de la manera que más nos acomode.

Vista Código.

Muestra en el área de trabajo el código de la pagina en la que actualmente se está trabajando, allí podemos editar de forma manual nuestro código Html. Para activar la Vista código: Haz clic en botón Código de la Barra de herramientas documento.

La vista del área de trabajo sería la siguiente:


Vista Diseño.

Muestra de forma grafica el contenido de la página web y permite editarlo. Para activar la Vista Diseño:

Haz clic en botón Diseño de la Barra de herramientas Documento.



Vista Dividir.

Separa en dos el área de trabajo, visualizando en una parte el código y en la otra la vista diseño. Para activar La Vista Dividir:

El botón Dividir de la Barra de herramientas Documento.


Vista En vivo.

Es casi similar a la vista diseño, sólo que en esta es posible interactuar con el contenido de la página tal y como se estuviera haciendo en el navegador. Para Activar la Vista En vivo:

El botón Vista En vivo de la Barra de herramientas Documento.

Mas adelante veremos esta vista con mas detalle.


Vista previa en el navegador.

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


Sitio Web. Un Sitio es el conjunto de archivos de hipertexto (páginas web) enlazadas entre si además de otros documentos y carpetas relacionados entre sí, con un diseño similar y un objetivo en común. Cada sitio Web tendrá una dirección única, es decir, nunca se podrán repetir las URL’s. Esta vez empezaremos con la creación de un sitio web

Configurar un Sitio nuevo.

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

Nuevo sitio, o la opción que aparece en la imagen

Aquí debemos escribir el nombre del sitio (Sonido en Línea) y la carpeta donde guardaremos los elementos del sitio (crearemos una carpeta llamada Sitio1). En la pantalla recién vista aparecen más opciones en el menú lateral izquierdo pero en este momento solo cambiaremos las opciones antes mencionadas. Procederemos a guardar nuestro sitio.


En la sección de paneles, en el panel de archivos aparecerá una carpeta con el nombre recién asignado a nuestro sitio.

Ya que estamos creando un nuevo sitio aparecerá bacía, pero debemos agregar todos los archivos que tengan que ver con nuestro sitio. Es recomendable organizar los elementos en carpetas según su tipo, para así saber dónde y a que carpeta dirigirnos cuando agregamos alguna imagen, animación, sonido o video.


Dando clic derecho sobre la carpeta de nuestro sitio

Nos aparecerá el siguiente menú, donde seleccionaremos Nueva Carpeta

Y le daremos el nombre de Imagenes, los nombre de las carpeta deben ir sin caracteres especiales como los con el acento por ejemplo, en esta carpeta recién creada guardaremos como su nombre lo señalas, las imágenes a utilizar en nuestro Sitio Web.


De la misma forma que creamos la carpeta Imagenes, crearemos las siguientes carpetas:

Videos: carpeta donde almacenaremos nuestros videos

Animaciones: carpeta donde almacenaremos las animaciones agreguemos a nuestro sitio

CSS: aquí almacenaremos los Hojas de estilo en cascada, estas hacen a un

lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento en nuestro caso HTML

Una vez creadas las carpetas antes mencionadas, podreceremos a crear la estructura básica para nuestro sitio web.

Diseño básico de estructura para página web Para el diseño de páginas web generalmente se utilizan dos métodos el basado en tablas y el basado en uso de estilos en cascada (CSS). En esta ocasión utilizaremos la basada en CSS Comúnmente las páginas web tienen 4 áreas definidas:

Encabezado: Imagen o banner referente al sitio

Menú: Menú de navegación entre las distintas paginas de nuestro sitio web

Contenido: aquí ira el contenido de la pagina web

Pie de página: aquí ira información del pie de página como puede ser el diseñador teléfono dirección entre otros.

Principal: será donde están contenidas todas las áreas anteriores

Las divisiones antes mencionadas serán Div, elemento que encontramos en la pestaña

“Común” de la barra “Insertar”, el Div para que se entienda más fácilmente son cajas

donde podemos poner nuestro contenido

Cada una de las secciones será una caja individual pero no pueden estar sueltas, para

un mejor ordenamiento la pondremos dentro de una caja principal.


Veamos un ejemplo visual para su comprensión:

Principal: contendrá a todos las cajas de nuestra web

Encabezado

Menú

Contenido

Pie de página

. Ya que tenemos nuestro diseño básico bosquejado, ahora iremos a Dreamweaver y lo

crearemos.


Creando el diseño en Dreamweaver Para eso crearemos un nuevo documento HTML

Luego agregamos nuestra primera etiqueta Div (principal)

Aparecerá el siguiente cuadro, donde dice ID, ponemos el nombre del Div “Principal” y

Aceptar

El Div(caja) agregado quedaría de la siguiente forma

Aparecerá una línea de texto automáticamente la borramos para seguir agregando las

otras cajas dentro de la caja principal.

Para agregar la caja de encabezado posicionamos el curso dentro de la Caja “principal”

y agregamos una etiqueta Div y le damos ID “encabezado.


Si observamos pareciera que no izo modificación alguna, lo que pasa es que la Caja

“encabezado” es del mismo tamaño de la caja “Principal”.

Podemos ver que están las dos Caja creadas en la Barra de Herramientas de Estados

Para agregar la caja de menu posicionamos el curso dentro de la Caja “principal” y

agregamos una etiqueta Div y le damos ID “menu”, donde dice insertar seleccionamos

“Después de la etiqueta” y luego seleccionamos “<div id=”encabezado”> ”


De igual manera agregamos la caja contenido después de la etiqueta menú, agregamos

una etiqueta Div y le damos ID “contenido”, donde dice insertar seleccionamos

“Después de la etiqueta” y luego seleccionamos “<div id=”menu”> ”


Y por ultimo agregamos la caja de pie de pagina después de la etiqueta contenido,

agregamos una etiqueta Div y le damos ID “footer”, donde dice insertar seleccionamos

“Después de la etiqueta” y luego seleccionamos “<div id=”contenido”> ”

Con este paso nos quedarían definidas las secciones de nuestras páginas web.


Aplicando CSS

Ya que tenemos nuestra divisiones ya creadas ahora aplicaremos CSS, estos con

utilizados para cambiar su apariencia o funcionalidad.

Para aplicar el estilo CSS debemos seleccionar el objeto al que le queremos aplicar

dicho diseño.

Para empezar seleccionaremos la Caja ”principal”

Para crear una nueva reglas CSS vamos a los paneles estilo CSS


Y le damos clic en el botón de nueva regla

Tipo de selector es como se seleccionara el elemento en este caso es ID asi que lo

dejamos como esta.

El nombre del selector es el elemento al que le queremos aplicar la regla CSS.


La definición de regla es en donde guardara la regla, donde tenemos la opciones:

solo este documento: nos agregara las reglas CSS dentro del código de la

página.

Nuevo archivo de hojas de estilo: creara un nuevo archivo donde solo estarán

las reglas CSS.

Seleccionaremos “Nuevo archivo de hojas de estilo” debido a que presta mayor

utilidad en el desarrollo de sitios web.

La nueva regla quedaría de la siguiente forma, le damos al botón aceptar

Ahora debo especificar donde guardaremos el documentos de estilos CSS


En nuestra web tenemos una carpeta llamada “css” seleccionamos la carpeta y le

damos al botón Abrir.

Luego agregare el nombre de nuestro documento de estilos CSS fácil y claro

“Basico.css” y le damos al botón guardar.


La primera regla que aplicaremos es que la caja principal debe tener 900px de ancho

Le damos clic en Cuadro y en el espacio de anchura (Width) le ponemos 900 px

Y le damos al botón aplicar y guardar.


Si observamos la caja principal ya no es del ancho total de la pagina si no que se ajusto

de los indicado (900 px)

Otro detalle es que debe de estar centrada así que vamos a la regla recién creada

Clic derecho y le damos a la opción editar, nos aparecerá las mismas opciones

anteriores


Para que se centre solo debo señalar margen derecho e izquierdo por lo que

deselecciona la opción Igual para todo en la sección Magin y ponernos en derecho

(Rigth): Auto y lo mismo en el izquierdo (left): Auto.

Ponemos auto en los márgenes ya que no sabemos el tamaño del monitor de quien

visitara nuestro sitio así que los dejamos automáticos.

Aplicamos y Aceptamos, nos quedaría de la siguiente forma.

Ahora guardaremos nuestra página web(Archivo Guardar) y le damos el nombre

de “Basica1.html”


Agregando Imágenes

Ahora Vamos a insertar la imagen correspondiente al encabezado de nuestro sitio web,

en los documentos adjuntos al manual hay una carpeta que dice “imágenes a utilizar”

copiamos todo su contenido a la carpeta “Imagenes” de nuestro sitio web.

Antes de insertar la primera imagen borrare el texto de la caja encabezado.

Arrastrare la imagen que dice “header.jpg” de la sección de paneles a la caja

encabezado

Al arrastrar y soltar nos aparecerá la siguiente ventana

En el cuadro de texto alternativo pondremos “ Logo” y aceptar.


Nos quedaría de la siguiente manera

Ahora agregaremos las imágenes a la caja de menú, seleccionamos de la misma manera

que la imagen anterior btn_menu1, la arrastramos y soltamos en la caja menú

Ponemos el texto alternativo, repetimos lo mismo con los demás botones:

Btn_inicio1, btn_musica1,btn_videos1,btn_contacto1


Y así nuestra página web ya va tomando forma y nos quedaría de la siguiente manera:

Por el momento no agregaremos estilo CSS al menú.

Ahora agregaremos una nueva regla de estilo a la caja de contenido


Vamos a la opción de Cuadro y le damos al Padding 10, y lo dejamos igual para todos.

Esto es para que nuestro texto no quede pegado al menú


Ahora agregaremos un nueva regla CSS al pie de página

Damos en aceptar en la sección de Fondo buscamos la imagen footer.jpg y en la opción

repeat seleccionamos el repeat-x


Y altura de 80 px

Nuestra web se Vera así

Guardamos todos los cambios realizados (Archivo guardar Todo)


Ahora aplicaremos el fondo del sitio web, creando un nuevo estilo CSS

Tipo de selector: Etiqueta

Nombre del selector: body, esta etiqueta hace referencia al cuerpo del a pagina deonde

están todos los elementos vistos hasta ahora.

Pondremos la imagen fondo.gif de fondo y el repeat pondremos repeat


Modificaremos la regla Css del contenido y ponemos un color de fondo

Nuestra web en este momento se vería así:


Ahora aplicaremos formato al pie de página, lo centraremos y pondremos un color mas

notorio.

Vamos a editar la regla CSS del footer y ponernos color lanco y negrita

Centrar horizontal


Centrar Verticalmente

Ahora cambiaremos el texto de la caja footer (pie de pagina)


Imagen de sustitución.

Ahora agregaremos un efecto que hará que al pasar por encima de cualquiera de los

botones del menú cambie la imagen que pusimos por otra igual pero con la letra de

otro color

Ejemplo:

Tenemos le botón contacto que aparece de esta forma en nuestra página web

Al pasar sobre el con el mouse nos mostrara el botón de esta manera

Para eso tendremos que eliminar las imágenes de la caja de menú, y volver a cagar las

imágenes de la siguiente forma

Nos posicionamos dentro de la caja menú y vamos a la barra Menú Insertar

Objetos de imagen Imagen de sustitución.

Luego nos aparecerá el siguiente cuadro


Aquí llenaremos los campos indicados de la siguiente manera:

Agregaremos primero el botón de” Inicio” así que en cuadro que dice nombre de la

imagen pondremos “btn_inicio”.

Donde dice imagen original pondremos la imagen que queremos que se muestre al

cargar la pagina web que seria “btn_inicio1-jpg”

Donde dice imagen de sustitución pondremos la imagen por la cual queremos que

se cambie al pasar por sobre ella con el mouse que sería “btn_inicio2.jpg”

Los demás cuadros por el momento los dejaremos en blanco ya que no hemos creado

las demás páginas de nuestro sitio web.

Quedaría de la siguiente forma y damos en aceptar.

Ahora guardamos los cambios y vamos a ir a la vista previa en el navegador para que

veamos el efecto que hemos creado (F12).

La página se mostrara de la siguiente forma en el explorador web, si vemos el botón

esta con las letras de color blanco (btnj_incio1.jpg)


Ahora al pasar sobre la imagen debiera cambiar a al botón con letras amarillas

(btn_inicio2.jpg), una vez comprobado esto vamos a agregar los demás botones, de la

misma forma que el botón “inicio”.

Una vez agregados los botones tendremos una pagina similar a esta


En donde podemos pasar por sobre los botones y estos cambiaran de color.


Formato de contenido

Ya para finalizar el formato diseño de nuestra página web daremos los últimos

retoques para ya empezar a crear las distintas páginas web de nuestro sitio.

Modificaremos la caja de contenido, la dividiremos en dos cajas una para el texto y otra

para una imagen que deseemos colocar en la bienvenida por ejemplo.

Para eso de la misma forma que agregamos las cajas de menú, y encabezado dentro de

la caja principal, agregaremos dos cajas dentro de la caja contenido

Agregamos nueva etiqueta Div posicionándonos dentro de la caja contenido y le

damos ID “texto”, este será el texto del contenido.

Luego agregamos otra etiqueta Div con las siguientes indicaciones

Nos quedaría de la siguiente forma


Ahora mediante reglas CSS configuraremos estas dos cajas recién creadas

Primero agregaremos una regla CSS a la caja “Texto”

Y le daremos un ancho de 400 px


Ahora a la caja de imágenes le daremos un ancho de de 350 px


Las cajas nos quedarían de la siguiente manera

Lo siguiente será poner la caja de imagen al lado de la caja de texto, para esto

modificaremos la regla CSS de la caja texto, en la opción “float” o flotar debemos

seleccionar a que lado queremos que se apegue la caja (izquierdo).


Aceptamos y ahora vamos a modificar la caja de imágenes y aremos lo mismo que en la

caja texto

Ahora si vemos la pre visualización se nos ha movido todo, esto pasa por que no le

tenemos especificado por CSS las reglas de anchura y altura a las caja de contenido y

pie de página.


Para arreglar esto debemos modificar la propiedad CSS del cuadro de contenido de la

siguiente forma

Ahora modificaremos la regla CSS del pie de página de la siguiente forma


Con esto nuestro diseño vuelve a la normalidad

Ahora daremos un pequeño espacio entre la caja de texto y la caja de imagen para que

no nos quede apedado el texto del contenido con la imagen.

Eso lo hacemos modificando la propiedad de la caja de texto de la siguiente manera.


Aceptamos lo cambios y ahora nos queda así


Ahora mediante reglas CSS aplicaremos estilos a los textos para así dejar uniforme todo

el texto que agreguemos a nuestras páginas.

Para esto necesitamos agregar texto a nuestra página, agregaremos 3 párrafos en la

caja de “texto”.

Agregaremos el titulo ¡bienvenido! Y subtítulos ¡ Lo que suena! Y ¡visita nuestras

secciones¿ de la siguiente forma

Seleccionamos el titulo y en la barra de propiedades seleccionamos formato

“Encabezado1”

Ahora seleccionamos los subtítulos y le damos formato “Encabezado2”


Ahora crearemos el estilo CSS para los títulos

Cambaremos fuente, color, tamaño y le agregaremos negrita


Al aplicar y aceptar veremos que nuestro titulo ya tomo el estilo predeterminado

Ahora aplicaremos estilo para los subtitulo.

Seleccionare cualquiera de los subtítulos y le agregare una nueva regla CSS

Al aplicar y aceptar veremos que los dos subtítulos automáticamente toman el mismo

formato.


Ahora solos nos queda aplicar CSS al párrafo


Y justificamos el texto

Con esto ya tenemos el formato del texto para el contenido de nuestra web.

Esta página en la cual hemos estado trabajando nos servirá de base para todas las

páginas de nuestro sitio web.


Creando el sitio web Ahora procederemos a hacer copias idénticas de la web con la que hemos trabajado

para así tener todas las páginas de nuestro sitio con las mismas propiedades.

Para eso vamos a archivo guardar como

Ahora ponemos el nuevo nombre de la copia de nuestra página web, en este caso será

“index.html” y le damos al botón guardar.

De la misma manera guardamos “musica.html”, “videos.html” y “contacto.html”.


Nos quedarían los siguientes archivos es nuestro sitio web

Ya que tenemos las pagina del sitio creadas procederemos a enlazar los botones a sus

respectivas paginas.

Hacemos clic en cualquiera de los botones

En la barra de propiedades en la opción vinculo buscamos la pagina a la cual nos re

direccionaremos, el botón inicio nos lleva a la página index.html por ejemplo.

Repetimos el proceso con cada uno de los botones.


Vamos a la vista del navegador y podremos utilizar el menú y ver cómo pasa de una

página a otra.

Inicio

Música


Videos

Contacto


Ahora comenzaremos a personalizar correctamente cada una de las páginas de nuestro

sitio Web

Agregar Música

Modificaremos la pagina música.mp3, Para agregar una pista de mp3 que se

reproduzca en la misma página.

Vamos a la barra de Comunmedia plug-in

Seleccionamos nuestra pista y aceptar.

Ajustamos el tamaño y probamos en el explorador web


La página reproducirá el audio automáticamente.

Lo otro que podemos hace es color una lista con hipervínculo a los temas, al hacer clic

estos se podrán reproducir o descargar.

Esto lo podemos hacer fácilmente arrastrando desde el panel de archivos de nuestro

sitio la pista que queramos colocar en la lista.


Agregar Video

Ahora modificaremos la pagina de video

Para agregar un video de igual manera que la pista vamos a

Vamos a la barra de Comunmedia plug-in

Seleccionamos nuestro video y aceptar.


Ajustamos el tamaño y probamos en el explorador.

De igual forma podemos agregar una lista con hipervínculo a los temas, al hacer clic

estos se podrán reproducir o descargar.

Esto lo podemos hacer fácilmente arrastrando desde el panel de archivos de nuestro

sitio la pista que queramos colocar en la lista.

Con estos pasos ya tenemos un sitio web con contenido multimedia y menú de

navegación.


Formulario de contacto

Abrimos la página contacto.html, bajo el titulo agregaremos una sección formulario

En el menú insertarFormulariosformularios

Las líneas punteadas rojas significan que el formulario se agrego correctamente, ahora

iremos a la barra de propiedades y modificare lo siguiente:

Ahora agregaremos dentro del formulario una tabla de dos columnas y 4 fila allí

ordenaremos nuestros cuadros de textos donde le usuario ingresara la información a

enviar.


Ahora ingresare lo siguiente

Luego agregare frente a Nombre y email un cuadro de texto

En el menú insertarFormularioscampo de texto

En la sección de mensaje agregaremos un área de texto


En el menú insertarFormulariosArea de texto

Ahora nos falta un botón para enviar el mensaje

En el menú insertarFormulariosbotón

Si pre visualizamos en el explorador web


Ya tenemos nuestro formulario de contacto.

Ahora configuraremos a quien se le enviare el mensaje:

Para ello abriré el archivo mensajero.php en la vista de código

Donde dice para pondremos nuestro correo electrónico y donde dice asunto

pondremos “Mensaje desde Sonido En Linea”, con esto ya tenemos todo lsito


Publicar nuestro sitio

Hosting

Subir Nuestro sitio web a un Hosting gratuito con dominio gratuito vamos a

www.nixiweb.com

Presionamos el botón central de la pantalla que dice “crear nueva cuenta”

Luego llenamos el formulario que aparecerá.


Una vez llenos el formulario vamos al botón enviar.

Nos aparecerá la siguiente página web en donde nos solicita entrar a nuestro correo

para poder confirmar la inscripción al Hosting.

Entramos a nuestro correo electrónico, si no tenemos un correo de entrada de nixiweb

en la bandeja de entrada revisamos en el correo no deseado

El correo será similar a este

Allí aremos clic al link para completar el registro.


Al hacer clic en el link nos abrirá la siguiente web (NO CERRAR ESTA WEB la

utilizaremos más adelante)

Dominio

Aquí nos pide ingresar un dominio web, así que iremos a dot.tk

El dominio será la dirección con la cual ingresaremos a nuestro sitio web, en este caso

cursodreamweaver1.tk y le damos al botón GO.


Luego nos aparecerá la siguiente web

Seleccionamos Use DNS y luego tu propio DNS


Allí nos aparecerán los siguientes campos en blanco y debemos llenarlos con los datos

de la pagina de nixiweb que antes pedimos no cerrar


Los datos a copiar son los siguientes

Nos solicita dos de ellos, cuales quieran.

Le damos al botón singup y seleccionamos la forma de registrarnos en dot.tk, y asi

entrar al panel de nuestro domino

Una vez completado ese paso, ya tenemos nuestro dominio web.


Ahora continuaremos con el hosting

Le damos al botón siguiente


Y llenamos los datos solicitados con eso ya tenemos creado nuestro hosting

Le damos al botón accedes y buscamos la opción FTP File manager

Allí subiremos los archivos de nuestro sitio web


Una ver realizados esto, entramos a la dirección de nuestro dominio

Y nuestra página ya esta online.

manual paginas web

Documents