20.7.05

Diseñando la página de bienvenida

Muchas veces te habrás topado con una de esas páginas que indican que una web está 'en construcción'. Es una forma de ofrecer un teléfono o una dirección de e-mail de contacto mientras se acaba de montar y probar la web. Así evitas que los visitantes tengan acceso a páginas a medio hacer, que queda fatal.

Lo que vamos a hacer ahora es crear una página que se llame index.html. Exacto, igual que la que acabamos de borrar. Y no, no puede llamarse inicio.html. Los navegadores, por defecto, buscan un archivo index en cada carpeta a la que se les manda. Esta y otras características de los navegadores simplifican el tecleo de direcciones, de manera que al escribir la URL de mi sitio no tendré que teclear http://www.posadavagamundos.com/index.html, sino simplemente posadavagamundos.com. Y lo único que nos piden es que respetemos el nombre de la página index...

Así que, hala. Al ataque.
  1. Clic en Archivo
  2. Clic en Nuevo...
  3. Se abrirá la ventana Nuevo documento, donde podremos elegir el tipo de documento que queremos crear. Doble clic en HTML
  4. Se abrirá un documento en blanco en el espacio de trabajo
  5. Antes de que se nos olvide, guardamos la página con el nombre index.html. Ya sé que aún no hay nada que guardar, pero hazme caso. (Archivo / Guardar o Control + s)


Fíjate ahora en estos tres botones en la parte de arriba de la ventana del documento:


Ahí donde los ves, sirven para alternar entre los tres modos de visualización y edición que puedes elegir. El modo Código te permite trabajar tecleando tú mismo el código HTML que desees. El modo Dividir parte la ventana en dos, de manera que podrás tanto teclear código como diseñar en modo gráfico. Y el modo Diseño es para diseñar gráficamente, arrastrando objetos con el ratón, seleccionando y dando formato al texto, etc. Para que veas la pinta que tiene el código de una página web eb blanco, haz clic en el botón código.

Guay, ¿eh?

Bueno, pues vuelve al modo Diseño, ya nos ocuperemos del código otro día.

Mira ahora estos otros botones, justo encima de los anteriores:


Estos controlan tres métodos diferentes de diseño que fundamentalmente se diferencian por la manera como manejan distintos elementos llamados tablas, celdas y capas. Como no nos vamos a meter en profundidades a estas alturas, tú simplemente haz clic en el botón Diseño y ya está. Verás que los botones Tabla de diseño y Dibujar celda de diseño aparecen ahora habilitados (color más intenso).

A ver para qué sirven.
  1. Clic en el botón Tabla de diseño. Al mover el cursor sobre el espacio en blanco de la página verás cambia la flechita típica por una cruz. Este cursor mejora la precisión a la hora de pinchar y arrastrar, que es lo siguiente que vamos a hacer.
  2. Haz clic en cualquier lugar del documento en blanco y, sin soltar el botón, arrástralo a cualquier otro punto. Así hemos creado una Tabla que podrá contener una o varias celdas que a su vez contendrán el material que queramos: imágenes, texto...
  3. Clic en el botón Dibujar celda de diseño.
  4. Dibujamos una celda dentro de la tabla pinchado y arrastrando dentro de ella.
  5. Dentro de la celda (haz clic en su interior para poder escribir), teclea tu mensaje de aviso.

No es que sea gran cosa, pero oye, poquito a poco se hizo la Sixtina. Si quieres comprobar cómo queda en un navegador, pulsa F12 en tu teclado. Así se abrirá la página que estés editando en tu navegador por defecto (Firefox, Mozilla, Netscape, Internet Explorer, Safari...).

Bueno, ya has comprobado que tu página es tan fea como sospechabas. Es posible editar el estilo de manera que nos quede monísima utilizando simplemente HTML y CSS, pero como lo único que queremos es una página de inicio resultona mientras diseñamos nuestra web, nos vamos a lo fácil: elegimos una foto de las que hicimos el día que fuimos a hablar con lo clientes y la editamos para ponerle el texto encima.

Algo así:


[Importante: Debe ser una imagen en formato png, jpg o gif, con una resolución de 72ppp. Puede haber serias diferencias de calidad y tiempos de carga si no se calibra bien el tipo de formato y compresión. Si no te manejas muy bien en esto de la edición de imágenes, puedes echar un vistazo a este tutorial: Optimización de imágenes para Internet]

Una vez tengas la foto lista debes guardarla en tu carpeta local. Busca en tu disco duro la carpeta que creaste en el paso 5 del apartado Configurar el website. Guarda la imagen en la carpeta medios. Cuando vuelvas a Dreamweaver, comprueba que el archivo está ahí.


A continuación sustituiremos el texto que tecleamos antes en la celda por la foto que acabamos de editar.
  1. Seleccionamos y borramos el texto
  2. Hacemos clic en el nombre de la imagen en el panel Archivos y, sin soltar el botón, lo arrastramos hasta el interior de la celda
  3. Ajustamos el tamaño de la celda y de la tabla: hacemos clic en el borde de la celda para que aparezcan los puntos de control (cuadraditos en los bordes). Arrastramos esos puntos de control hasta que el tamaño de la celda sea igual que el de la imagen. Repetimos la operación con la tabla.
Ahora vamos a centrar la tabla en la página.
  1. Clic derecho en la etiqueta verde Tabla de diseño.
  2. Clic en Alinear
  3. Clic en Centro
  4. Pulsamos F12 para comprobar el resultado... mejorcito, ¿no?
Ahora cambiaremos el color del fondo de la página por un gris clarito
  1. Clic en Modificar
  2. Clic en Propiedades de la página...
  3. Se abre la ventana Propiedades de la página
  4. En el botón Color del Fondo, elegimos un gris claro, o en el cuadro de texto que hay al lado tecleamos el valor hexagesimal del color que queremos poner como fondo (en mi caso, #F5F5F5). Teclear valores proporciona mayor control sobre el tono exacto que quieres usar, pero si no sabes cuál es, simplemente selecciona el color en la paleta y el programa insertará el valor necesario.
  5. Ya que estamos ahí, introduce un valos de 30 píxeles en la casilla Margen superior. Así la foto no se nos pegará arriba del todo y quedará más centradita.
  6. Clic en Aceptar.
Pulsamos F12 para comprobar el resultado. No está mal, pero le vendría bien un borde blanco alrededor de la foto.
  1. Seleccionamos la tabla haciendo clic en la pestaña verde.
  2. En el panel Propiedades elegimos un Fondo blanco e introducimos un valor de 5 en las casillas Rell. Celda y Esp. Celda.
  3. Pulsamos la tecla Control al mismo tiempo que la tecla s para guardar el documento.
  4. F12.
¿Nos gusta? ¿La subimos a Internet?

5 Comentarios:

At 10:01 p. m., Blogger Luís Silva dijo:

Hi,

just letting you know I started a blog called source code dedicated to debating issues connected to digital art, hactivism, tactical media, resistance, critical theory...

now featuring:

"an artist in the chat room", a text discussing Art_room, an online performance by Susana Mendes Silva

"confess yourself", a text discussing Confess, a web project by Stewart Smith

"travel to Java Island", a text discussing JAVA Island, a web project by Miguel Leal

and many others


http://vercodigofonte.blogspot.com/



feel free to join a debate or start a new post



Best wishes

Luís Silva

 
At 8:32 a. m., Blogger philmiller15314622 dijo:

='Brand New News Fr0m The Timber Industry!!'=

========Latest Profile==========
Energy & Asset Technology, Inc. (EGTY)
Current Price $0.15
================================

Recognize this undiscovered gem which is poised to jump!!

Please read the following Announcement in its Entierty and
Consider the Possibilities�
Watch this One to Trad,e!

Because, EGTY has secured the global rights to market
genetically enhanced fast growing, hard-wood trees!

EGTY trading volume is beginning to surge with landslide Announcement.
The value of this Stoc,k appears poised for growth! This one will not
remain on the ground floor for long.

KEEP READING!!!!!!!!!!!!!!!

===============
"BREAKING NEWS"
===============

-Energy and Asset Technology, Inc. (EGTY) owns a global license to market
the genetically enhanced Global Cedar growth trees, with plans to
REVOLUTIONIZE the forest-timber industry.

These newly enhanced Globa| Cedar trees require only 9-12 years of growth
before they can be harvested for lumber, whereas worldwide growth time for
lumber is 30-50 years.

Other than growing at an astonishing rate, the Global Cedar has a number
of other benefits. Its natural elements make it resistant to termites, and
the lack of oils and sap found in the wood make it resistant to forest fire,
ensuring higher returns on investments.
T
he wood is very lightweight and strong, lighter than Poplar and over twice
as strong as Balsa, which makes it great for construction. It also has
the unique ability to regrow itself from the stump, minimizing the land and
time to replant and develop new root systems.

Based on current resources and agreements, EGTY projects revenues of $140
Million with an approximate profit margin of 40% for each 9-year cycle. With
anticipated growth, EGTY is expected to challenge Deltic Timber Corp. during
its initial 9-year cycle.

Deltic Timber Corp. currently trades at over $38.00 a share with about $153
Million in revenues. As the reputation and demand for the Global Cedar tree
continues to grow around the world EGTY believes additional multi-million
dollar agreements will be forthcoming. The Global Cedar nursery has produced
about 100,000 infant plants and is developing a production growth target of
250,000 infant plants per month.

Energy and Asset Technology is currently in negotiations with land and business
owners in New Zealand, Greece and Malaysia regarding the purchase of their popular
and profitable fast growing infant tree plants. Inquiries from the governments of
Brazil and Ecuador are also being evaluated.

Conclusion:

The examples above show the Awesome, Earning Potential of little
known Companies That Explode onto Investor�s Radar Screens.
This s-t0ck will not be a Secret for long. Then You May Feel the Desire to Act Right
Now! And Please Watch This One Trade!!


GO EGTY!


All statements made are our express opinion only and should be treated as such.
We may own, take position and sell any securities mentioned at any time. Any
statements that express or involve discussions with respect to predictions,
goals, expectations, beliefs, plans, projections, object'ives, assumptions or
future events or perfo'rmance are not
statements of historical fact and may be
"forward,|ooking statements." forward,|ooking statements are based on expectations,
estimates and projections at the time the statements are made that involve a number
of risks and uncertainties which could cause actual results or events to differ
materially from those presently anticipated. This newsletter was paid $3,000 from
third party (IR Marketing). Forward,|ooking statements in this action may be identified
through the use of words such as: "pr0jects", "f0resee", "expects". in compliance with
Se'ction 17. {b), we disclose the holding of EGTY shares prior to the publication of
this report. Be aware of an inherent conflict of interest resulting from such holdings
due to our intent to profit from the liquidation of these shares. Shar,es may be sold
at any time, even after positive statements have been made regarding the above company.
Since we own shares, there is an inherent conflict of interest in our statements and
opinions. Readers of this publication are cautioned not
to place undue reliance on
forward,|ooking statements, which are based on certain assumptions and expectations
involving various risks and uncertainties that could cause results to differ materially
from those set forth in the forward- looking statements. This is not solicitation to
buy or sell st-0cks, this text is or informational purpose only and you should seek
professional advice from registered financial advisor before you do anything related
with buying or selling st0ck-s, penny st'0cks are very high risk and you can lose your
entire inves,tment.

 
At 6:26 p. m., Blogger Turnkey Builder dijo:

Get unlimited webhosting at best web hosting service

 
At 2:45 p. m., Blogger Quema Goma dijo:

no entendeis nada...aver con cual programa es eso donde se va a escribir y todo??? www.quemagoma.net

 
At 3:58 p. m., Blogger julio dijo:

Hola, que tal, muy interesante tu página, te felicito. Solamente una duda, no sé si puedas ayudarme, tengo mi blog en blogger y deseo insertar una página de bienvenida como la que nos explicaste crear. Estoy apunto de comprar el dominio de google para cambiarme a .com, y sé que brinda un panel de control con más herramientas. Crees que pueda subir a blogger un archivo index.html como el que nos explicaste? Espero me puedas ayudar. Gracias!

 

Publicar un comentario

<< Home