manual paginas web
TRANSCRIPT
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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).
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Esperar que cargue Crearemos un nuevo documento HTML, para eso vamos a la columna centrar y hacemos clic en HTML
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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).
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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:
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
La vista del área de trabajo sería la siguiente:
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
La vista del área de trabajo sería la siguiente:
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”> ”
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”> ”
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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ú
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Y altura de 80 px
Nuestra web se Vera así
Guardamos todos los cambios realizados (Archivo guardar Todo)
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Modificaremos la regla Css del contenido y ponemos un color de fondo
Nuestra web en este momento se vería así:
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Centrar Verticalmente
Ahora cambiaremos el texto de la caja footer (pie de pagina)
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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)
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
En donde podemos pasar por sobre los botones y estos cambiaran de color.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Ahora a la caja de imágenes le daremos un ancho de de 350 px
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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).
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Aceptamos lo cambios y ahora nos queda así
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Ahora crearemos el estilo CSS para los títulos
Cambaremos fuente, color, tamaño y le agregaremos negrita
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Ahora solos nos queda aplicar CSS al párrafo
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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”.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Videos
Contacto
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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á.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Luego nos aparecerá la siguiente web
Seleccionamos Use DNS y luego tu propio DNS
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Ahora continuaremos con el hosting
Le damos al botón siguiente
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
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
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]
Una ver realizados esto, entramos a la dirección de nuestro dominio
Y nuestra página ya esta online.
Efraín Pizarro Muñoz – Programador Computacional Alumno de 4º año Ingeniería de Ejecución en Informática [email protected]