Está en la página 1de 4

Hacer una pgina bsica HTML con Dreamweaver CS3 (I): Crear pgina nueva, tab as !

en aces

Objetivo: Crear una pgina html simple sin marcos con imgenes, texto html y enlaces. * Esta explicacin vale para Dream eaver C!" #e O! $ y #e $%. &oy vamos a apren#er cmo se hace una pgina simple en html. &emos habla#o en otras ocasiones #e los servi#ores eb 'pache, y lo (cil )ue resulta tener nuestro propio servi#or. Como las conexiones caseras suelen ser bastante lentas *sobreto#o en la subi#a+, la ligere,a #e la pgina es una alia#a para nuestros objetivos. %ara la explicacin usaremos el '#obe Dream eaver C!". -. .o primero #e to#o es abrir un nuevo #ocumento &/0.. 1saremos el #ise2o visual *hay otras #os opciones #e visuali,acin: como c#igo o una me,cla+. ')u3, aun)ue no vamos a trabajar con lenguaje html conviente ir miran#o como se articula. Es un lenguaje bastante sencillo y no tar#aremos en encontrarle su lgica.

El elemento clave para trabajar con el #ream eaver es este:

%ermite con(igurar los elementos )ue tengamos selecciona#os en la pgina *ya sea texto, una imagen, una tabla, etc+. 4 'l nuevo #ocumento le asignamos un t3tulo *el nombre por el cual ser reconoci#o por la eb, y )ue sal#r siempre+ y acu#imos a 5propie#a#es #e pgina6. 'h3 tenemos las opciones #e personali,acin7 lo ms interesante es #eterminar una tipogra(3a a#ecua#a, a#ecuar los mrgenes a nuestras necesi#a#es y #eterminar el comportamiento #e los lin8s. *mo#i(y9page properties+. :. ' continuacin #eterminaremos la estructura #e la eb e insertaremos sus elementos. %ara ello utili,aremos los #enomina#os 5tablas6 *insert9table+. En nuestro caso vamos a hacer una pgina con un t3tulo y un subt3tulo en la parte superior, una imagen en la parte central i,)uier#a, una rea #e texto en la parte central #erecha y un pe)ue2o texto con las caracter3sticas #e la pgina e in(ormacin #e contacto.

4 %rimero creamos una tabla con #os (ilas y una sola columna. Debemos comprobar )ue el grosor #e la l3nea exterior #e la tabla es igual a ;. !i no sal#r un marco *enten#i#o como l3nea+ alre#e#or #e la tabla. En nuestro caso tambi<n alinearemos la pgina con el centro, para )ue se mantenga centra#a aun)ue se usen #istintos tama2os en el navega#or eb *aling9center+. En el hueco superior escribiremos el t3tulo #e nuestra eb, y en el

in(erior el subt3tulo. %ara (inali,ar ajustaremos el tama2o #e la tabla exactamente a la extensin #el subt3tulo *en este caso no nos interesa hacer #os renglones #e subt3tulo+. 4 =os situamos #ebajo #e la tabla superior, y creamos una nueva tabla, esta ve, con #os columnas y una sola (ila. .a centramos. =os situamos en el la#o i,)uier#o y le #amos a insertar imagen *insert9image+. !eleccionamos la imagen )ue )ueremos poner y aceptamos. En el la#o #erecho #e la tabla escribimos un texto. !i )ueremos a2a#ir un lin8 a la imagen solo tenemos )ue seleccionarla y usar el men> para a2a#irle la #ireccin correspon#iente *hacia ?nternet o hacia otro archivo nuestro, por ejemplo, otra pgina eb con in(ormacin ms #etalla#a. * El Dream eaver viene con(igura#o por #e(ecto para #ejar #os renglones si utili,as el 5enter6. %ara )ue solo baje un rengln #ebers usar el 5enter6@6shi(t6. ** 'ntes #e intro#ucir una imagen para la eb #eberemos encargarnos #e )ue ocupe lo m3nimo #e espacio. .o normal es utili,ar (ormas espec3(icas #e grabar imgenes para eb *como en el photoshop+, pero po#emos hacerlo nosotros. Como consejo #ecirte )ue para imagenes con pocos colores, si pue#es usar A?B mejor )ue C%A *recuer#a )ue las A?B son imgenes con un mximo #e :DE colores, por lo )ue para blanco y negro o imgenes con menos colores viene mejor )ue la C%A+. /ambi<n atento a su tama2o en pixeles *.a resolucin #e la pantalla emplea#a, normalmente, suele ser #e -;:F x GEH I -;:F x HEF I H;; x E;;. %ara garanti,arnos )ue to#o el mun#o pue#a ver nuestra pgina sin )ue salte el scroll*columna #e #espla,amiento+ usaremos un tope #e H;; x E;; *)ui,s estoy sien#o #emasi#a#o conserva#or7 hoy en #3a casi to#o el mun#o usa ya resoluciones mayores+. El tama2o (inal #e la pgina se ajustar a los elementos )ue pongamos en ella. 4 %or >ltimo intro#uciremos una >ltima tabla in#ivi#ual para poner #atos #e la /ambi<n centra#o y sin mrgenes. eb e in(ormacin #e contacto.

". Jue#a hacer un enlace. %ara ello seleccionaremos el elemento *sea texto o imagen+ )ue )ueremos convertir en unlin8 *el texto lo seleccionamos+, en nuestro caso, un texto en la tabla central #erecha )ue ponga 5enlace a google6, y )ue nos lleve a la pgina correspon#iente. Como )ueremos )ue abra una nueva pgina *es #ecir, )ue no nos mueva #e la )ue ya hay+, en 5target6 intro#uciremos el coman#o 5blan85. !i )uisi<ramos )ue el enlace (uera en la misma pesta2a #eber3amos poner 5sel(5. * Kecuer#a )ue el (ormato para escribir una pgina empie,a siempre con un html:99 F. %or >ltimo solo )ue#a guar#ar el archivo con el nombre #e in#ex.html y colocarlo en la carpeta correspon#iente #e nuestro servi#or 'pache *o el )ue )uieras usar claro+. ' partir #e entonces, y si tienes bien con(igura#o el puerto H; *puerto eb por #e(ecto+ hacia tu or#ena#or, la gente po#r acce#er a tu pgina escribien#o tu ?% externa. !olo te )ue#ar hacerte con un nombre #e #omino y coor#inar ?% con nombre #e #ominio.

Hacer una pgina bsica HTML con Dreamweaver CS3 (II): Los Marcos 'nteriormente hemos reali,a#o una sencilla pgina html *in#ex.html+ con tres tablas *#on#e hemos a2a#i#o texto html y alguna imagen+ y un enlace *lin8+. Lamos a seguir pro(un#i,an#o un poco en el Dream eaver. %ara ello intro#uciremos un nuevo elemento con mucho juego: los 5marcos6. 4 .os 0arcos *(rames+: Cuan#o hacemos una pgina html, <sta ocupa to#o el espacio #el navega#or, pero a trav<s #e los marcos po#emos hacer )ue una pgina principal sea el enlace a #os pginas html con un tama2o concreto #on#e se pue#en visuali,ar in#epen#ientemente y )ue veamos las #os pginas en una sola ventana. %o#emos hacer m>ltiples marcos, pero por ahora solo vamos a #ivi#ir una pgina en #os, con el (in #e po#er hacer una pgina #on#e pon#remos un men> superior (ijo y una pgina in(erior )ue ir cambian#o en (uncin #e los enlaces )ue presionemos *situa#os en la pgina (ija superior+. Leamos como se hace: -. 'brimos el Dream eaver y creamos una pgina nueva *&/0.+. :. Lamos a ?nsertar9&/0.90arcos *?nsert9&/0.9Brames+ y seleccionamos el 5/op6. !e abrir una pe)ue2a ventana #on#e ten#remos )ue especi(icar el nombre #el nuevo marco *(rame+. Es importante poner bien el nombre para luego situarnos sin problemas sobre la pgina correspon#iente. En este caso le pon#r< el nombre 5top (rame6 a mi pgina superior. Lers )ue aparece una l3nea gruesa gris )ue #ivi#e la pgina en #os. Cuan#o presionas sobre la superior te sit>as en ella, y lo mismo con la in(erior.

* ')u3 )uisiera especi(icar #os #etalles: 4 Cuan#o creamos un 5marco6, las pginas resultantes #e tal #ivisin )ue#an separa#as por una l3nea gruesa )ue po#emos mover con el ratn *cambian#o #e tama2o las pginas+. %ero cuan#o abrimos ese archivo previamente guar#a#o, esa l3nea #esaparece. Deberemos activarla *para po#er mover esa l3nea a nuestro antojo+ en Lie 9Lisual 'i#s9Brame *per#n, pero no tengo la versin en espa2ol+.

4 !olo tenemos )ue presionar con el ratn sobre la pgina )ue )ueramos mo#i(icar, pero, Mcmo activar la pgina in#ex.html )ue nos permitir abrir las #os nuevas pginas crea#as con nuestro marcoN. Oien, para ello #eberemos ir a Lentanas90arcos *Pin#o s9Brame+. ' nuestra #erecha se abrir una ventana #on#e se pue#e ver la pgina )ue hemos crea#o. !i presionamos sobre ca#a una #e las #os pginas acce#emos a ellas, y si presionamos la l3nea )ue los une *en gris claro+, se marcarn las #os y veremos )ue tenemos el in#ex.html marca#o. Esto es muy >til cuan#o )ueramos, por ejemplo, intro#ucir los mega4tags. :. .o segun#o )ue hacemos es acce#er a las propie#a#es #e pgina #e ca#a una #e las #os )ue hemos crea#o, e intro#ucir los valores )ue nos pare,can ms oportunos.

". 'hora #eberemos guar#ar el proyecto. Qo, por sistema, creo una carpeta nueva #on#e voy intro#ucir mis archivos html #e la eb. En este caso, llamaremos a la carpeta 5Peb6. 1na ve, crea#a me voy al Dream eaver y le #oy a 5guar#ar to#o6, en 'rchivo9Auar#ar /o#o *'rchive9!ave 'll+. Como no hemos guar#a#o el proyecto hasta ahora, nos sal#r una ventana para asignar un nombre a ca#a una #e las tres pginas #e las )ue #isponemos *hemos hecho un marco )ue #ivi#e la pgina en #os, por lo )ue tenemos #os pginas *una superior y otra in(erior+ y una pgina principal )ue nos sirve para visuali,ar las otras #os en una sola ventana, y )ue ser la )ue usemos para leer nuestra pgina *como siempre, se #eber llamar in#ex.html, para )ue los servi#ores la recono,can+. /ambi<n #eber ir en la propia carpeta 5 eb6. %ara #arnos cuenta #e )u< pgina estamos guar#an#o, ten#remos )ue mirar el cua#ra#o )ue se2ala )u< pgina estamos guar#an#o. .a primera es la principal, )ue abarca las #os pginas. ' esta la llamaremos 5in#ex.html6. ' la segun#a, )ue es la in(erior, la #enominaremos 5cuerpo.html6. ' la tercera *la superior+ la llamaremos 5cabe,a.html6. Kecuer#a )ue #eberas #arle un t3tulo a ca#a pgina en ve, #el 5untitle# #ocument6. F. &emos #icho )ue )ueremos crear un men> superior con una serie #e categor3as )ue una ve, sean presiona#as con el ratn, abrirn una pgina con la in(ormacin )ue )ueramos, pero no en 5cabe,a.html6, sino en 5cuerpo.html6. =uestras categor3as, para este ejemplo, sern :: 5contacto6 y 5enlaces6. =os situamos en 5cabe,a.html6 y creamos una tabla con #os columnas y una sola (ila. En su interior escribimos en texto las #os categor3as. En 5cuerpo.html6 creamos una tabla con un mensaje #e bienveni#a a nuestra eb.

D. El siguiente paso es crear una pgina nueva para el conteni#o #e 5contacto6 y otra para el conteni#o #e 5enlaces6. ?ntro#uciremos una simple tabla con una columna y una (ila y #entro escribiremos los #atos )ue )ueramos meter. .as guar#aremos como 5contacto.html6 y 5enlaces.html6, en una carpeta llama#a 5html6 )ue hemos crea#o previamente #entro #e la carpeta 5Peb6. %o#r3a grabarlas #irectamente en la carpeta eb, pero a la larga, a me#i#a )ue la pgina tiene ms elementos, se vuelve un l3o, as3 )ue es mejor sub#ivi#ir en carpetas #es#e un principio. El mo#elo es el )ue consi#eres ms oportuno, siempre )ue respetes a 5in#ex.html6 como la principal e intro#u,cas y a2a#as los archivos #e la eb #entro #e la carpeta principal. .os enlaces #e 5enlaces.html6 recuer#a ponerlos con un target blan8, puesto )ue son pginas ajenas a la tuya y es mejor )ue abra una ventana nueva para )ue no se vaya el usuario #e nuestra pgina.

D. Lolvemos 5cabe,a.html6, y seleccionamos ca#a categor3a a2a#i<n#ole un enlace *con la barra #e tareas claro+ con la ubicacin #e su archivo correspon#iente, es #ecir, cuan#o hacemos un lin8 nos #eja una opcin #e buscar un archivo #el or#ena#or, y elegimos para contacto el archivo 5contacto.html6. En #estino *target+ veremos )ue a#ems #e los clsicos blan8, sel(, etc, hay ahora main (rame y top (rame. !on nuestras #os )ueri#as pginas crea#as con el marco. 0arcamos 5main (rame6 en las #os, para )ue el enlace se abra en el hueco #e cuerpo.html, y no en cabe,a.html. E. .o >nico )ue nos )ue#a es 5guar#ar to#o6 *a)u3, como ya hemos graba#o una ve,, nos guar#ar to#o #on#e estaba previamente+. 'bres la pgina con alg>n navega#or *en 'rchivo9%revia+ y compruebas )ue to#o est< bien.