Diseño web con Dreamweaver

Diseño de
Páginas Web

En Dreamweaver

Efraín Pizarro Muñoz – Programador Computacional
Alumno de 4º año Ingeniería de Ejecución en Informática
Hermeskl16@hotmail.com

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

Barra de Herramientas
del documento

Barras de Menú

Conmutador de
espacios de trabajo

Pestaña del
Documento

Á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 Comunmedia 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 Comunmedia 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ú insertarFormulariosformularios

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ú insertarFormularioscampo de texto

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

En el menú insertarFormulariosArea de texto

Ahora nos falta un botón para enviar el mensaje
En el menú insertarFormulariosbotó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.


Diseño web con Dreamweaver

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Diseño web con Dreamweaver

Semelhante a Diseño web con Dreamweaver (20)

Diseño web con Dreamweaver