Inicio > Al Dia, Web > Mi primera página web – ¿Cómo crear mi página web?

Mi primera página web – ¿Cómo crear mi página web?

Uno de los mas grandes enigmas a la hora de crear nuestra página web es ¿Cuál es el programa que utilizaremos? Como ya comentamos en el post http://bit.ly/h3AbAA, existen muchos programas para crear páginas web pero en este tutorial utilizaremos Adobe DreamWeaver CS5. Para iniciar procedemos a ejecutar el programa y una vez este abra veremos a continuación una serie de opciones y plantillas que nos ayudarán a crear nuestro entorno web.

Selección del documento

Inicialmente seleccionamos la opción crear nuevo HTML para que DreamWeaver nos genere una página HTML en blanco. En primera instancia podemos observar una gama de menús y herramientas en las diferentes barras de acceso que maneja el programa. En este tutorial realizaremos lo siguiente: Cambiar el color de fondo, Insertar una imagen como banner, importar botones para un menú y por ultimó colocar la zona de derechos reservados.

Detalle del menú insertar

1. Cambiar el color de fondo.

Al iniciar el programa comenzamos con una página en blanco quizás deseamos modificar el fondo, para esto presionamos click derecho sobre el área de trabajo y seleccionamos propiedades,  se nos abrirá una ventana emergente en donde veremos todos los elementos que maneja la página en sí. Hay que tener en cuenta que todos estos atributos afectan a todos los elementos que sean creados en la web. Seleccionamos color de texto y escogemos el color que más apropiado para nuestra empresa. Lo mejor de todo esto, es que no solo podemos cambiar el color del fondo, si no que podemos insertar una imagen que hayamos creado previamente. Para aplicar los cambios y cerrar la ventana presionamos aceptar.

Personalización del fondo

2. Insertar una imagen como banner

Dreamweaver trae una amplia gama de herramientas que nos permiten editar todos los aspectos de la página web. Para este tutorial utilizaremos la herramienta “Insertar”. En ella podemos encontrar opciones como Común, diseño, formularios, datos,spry , intcontext editing, texto, favoritos, iconos de colores y mostrar etiquetas (todos los anteriormente nombrados son elementos que podemos insertar en nuestra página). Seleccionamos Común y se desplegaran varias opciones entre las cuales tenemos la opción imágenes, le damos click y saldrá una ventana emergente en donde tendremos que ubicar el archivo a cargar. Lo seleccionamos y hacemos click en abrir.

Insertar imagen como banner

3. Insertar botones para un menú

¿Qué es una página web sin elementos para navegarla? Para esto crearemos el menú de nuestra página, el mismo esta conformado por botones y dreamweaver tiene la posibilidad de insertar botones prediseñados, lo negativo de esto es que no podemos realizar modificaciones a la interfaz gráfica de estos. Por lo tanto para este tutorial utilizaremos la misma técnica que utilizamos para agregar la imagen del banner, debes tener en cuenta que debes insertar una tabla o divs para dimensionar el menú.

Insertar imagen como botones

4. Zona de derechos de autor.

Aunque no es una parte fundamental de una página web no debemos dejarla por fuera, ya que esta ligada de forma directa con la responsabilidad legal de nuestros productos o servicios.

Insertar derechos de autor

Esto solo el comienzo de esta maravillosa herramienta tenemos muchas opciones , ya que este programa  esta lleno de elementos entre ellos insertar videos y elementos flash que serán de gran ayuda en la creaciones de nuestras web en los próximos artículos hablaremos acerca de como insertar elementos de sonido, video y flash.

Anuncios
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Exprésate con creatividad

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: