9
Ing. Mónica Aguirre Valencia

Diseño de páginas web

Embed Size (px)

Citation preview

Page 1: Diseño de páginas web

Ing. Mónica Aguirre Valencia

Page 2: Diseño de páginas web

Sof t ware Necesar i o

Un software es un programa informático, lo que ocurre es que al decir software parece que la cosa tiene más importancia, como es una palabra en inglés... ya se sabe... pero no es más que eso, un programa. Para crear nuestra página web necesitamos un programa. Para crear webs hay miles, de pago, gratuitos, regalados, pirateados... Nosotros vamos a ser buenos y usaremos uno gratuito, por ejemplo uno que se llama Html-Kit

De dónde descargar Html-Kit

El Html-Kit es un editor de html y css (entre otros) gratuito. Editor significa que podemos escribir con él y Html y Css son los lenguajes que se usan para hacer páginas web. Es gratuito, esto significa que no has de pagar un duro por él, aunque tienes la opción de pagar para tener acceso a un sin fín de herramientas extra. Por lo pronto, con la versión gratuita nos va a sobrar.

Para conseguirlo, qué mejor que descargarlo desde la página oficial, no? Así estaremos seguros de obtener la versión más moderna. La página es www.htmlkit.com. Ve haciendo clic y se abrirá una ventana aparte, para que puedas seguir leyendo estas instrucciones.

Page 3: Diseño de páginas web

Ing. Mónica Aguirre Valencia

Page 4: Diseño de páginas web

Conf i gur ar nue s t r o Si t i o e n e n-Ht ml Ki t

Ahora que tenemos la carpeta lista, llega el momento de configurar nuestro Sitio en el Html-Kit. Y qué es un Sitio? Se llama sitio a toda la web, incluyendo todos sus páginas, imagenes y demás elementos. Coincide o ha de coincidir con la carpeta que acabamos de crear, pues esa era su función, englobar todos los archivos del sitio para no liarnos ni liar al Html-Kit.

Abriendo la ventana WorkSpace Empezamos desde cero, vale?

Cierra el Html-Kit si lo tienes abierto y sigue estos pasos de uno en uno y hasta el final y no tendrás ningún problema.

1- Abre el Html-Kit. Aparecerá en blanco con una pantalla como esta:

Page 5: Diseño de páginas web

Segui dament e:

2.- Haz clic sobre la barra de herramientas, donde pone Herramientas y activa la opción Workspace.

3.- Aparece ahora una ventana donde podemos definir nuestros sitios. Vemos tres carpetas ya creadas pero en principio no les vamos a hacer ningún caso. Cuando seas mayor si quieres las cotilleas pero ahora vamos a lo nuestro. En el futuro, puedes cerrar esa ventana pulsando sobre la x de su parte superior derecha y puedes volver a verla siguiendo lo explicado en el paso 2. Cuando te moleste la cierras, cuando te haga falta la abres. Fácil, verdad? Y para qué sirve esto? Lo vemos ahora mismo.

Page 6: Diseño de páginas web

Si t i o Loc al y Si t i oVi r t ual Dentro de esa ventana llamada WorkSpace

vamos a definir dos sitios. Uno que se llama Sitio Local que se corresponde con la carpeta que tenemos en el ordenador llamada antes "ejemplo-web-cctw" y otro sitio que podemos llamar Sitio Virtual, que será el espacio en internet. Este segundo lo veremos más adelante. Por ahora vamos a definir el Sitio Local de la siguiente forma:

1.- Hacemos clic en la barra de herramientas, donde pone Workspace y escogemos Añadir Carpeta Local/Red.

2.- En la ventana que se abre (como ves, la traducción al español no es completa, pero podremos defendernos, ya verás), tienes que poner la carpeta "pagina-ejemplo-cctw" en el primer hueco (pincha en la carpeta amarilla de su derecha para encontrarla y escogerla) y en el segundo hueco pon un título cualquiera, por ejemplo, "web-ejemplo-cctw-local" y pulsa OK:

Page 7: Diseño de páginas web

Cont i nuando…

3.- Tras pulsar OK verás como aparece este nuevo sitio en la ventana de Workspace:

A partir de ahora, cada vez que queramos trabajar sobre archivos de esta página web, en lugar de abrir la carpeta que hemos creado en lecciones anteriores (web-ejemplo-cctw), podemos acceder a ellos directamente desde acá.

Ahora sí que podemos ya empezar a crear nuestra página web. Que emocionante...... no?

Page 8: Diseño de páginas web

¿Cómo c r e ar l a pr i me r a pági na de l a?web

La primera página que vamos a crear es la página principal. La página principal es la que se muestra por defecto al visitante cuando nos visita, la primera que ve. Su archivo ha de llamarse obligatoriamente index.html sea cual sea el servidor donde la alojemos.

Como esta página va a pertenecer al sitio "web-ejemplo-cctw", tendremos que apañarnoslas para crearla dentro de ese sitio y no en los otros que aparecen en la ventana de Workspace. Para crearla ponemos el cursor del ratón dentro de la ventana de Workspace, justo encima del sitio "web-ejemplo-cctw" y pulsamos el botón derecho del ratón.

Se abre entonces una ventana en la que tenemos que escoger, dentro de la sección New, la opción Create File…

Page 9: Diseño de páginas web

Ing. Mónica Aguirre Valencia