Creando un sitio web desde 0 Parte - 1

Hacer Pgina Web: Reclama Tu DVD Gratis scribiendo tu mail

!ntes de Hacer Tu Pgina" #ecesitas Ver este V$deo% Registrate !&u$%
www%PaginaWebn'Horas%com
Hola amigos de T( en el siguiente tutorial les mostrare a crear una web )artiendo desde 0 sin ning*n
conocimiento" ser una web bastante bsica" )uesto &ue la ma+or$a de los usuarios no )osen
conocimientos )rogramaci,n HT-." PHP" C//" 0!V!/CR1P" etc%
#ota: Clic en las imagenes )ara 2erlas de tama3o com)leto%
1ntroducci,n
.a 1nternet es un con4unto descentrali5ado de redes de comunicaci,n interconectadas &ue utili5an la
6amilia de )rotocolos TCP71P" garanti5ando &ue las redes 6$sicas 8eterog9neas &ue la com)onen
6uncionen como una red l,gica *nica" de alcance mundial% /us or$genes se remontan a 1:;:" cuando se
estableci, la )rimera cone<i,n de com)utadoras" conocida como !RP!#T" entre tres uni2ersidades
en Cali6ornia + una en =ta8" stados =nidos%
=no de los ser2icios &ue ms 9<ito 8a tenido en 1nternet 8a sido la World Wide Web > WWW" o ?la Web?
@" 8asta tal )unto &ue es 8abitual la con6usi,n entre ambos t9rminos% .a WWW es un con4unto de
)rotocolos &ue )ermite" de 6orma sencilla" la consulta remota de arc8i2os de 8i)erte<to% Asta 6ue un
desarrollo )osterior >1::0@ + utili5a 1nternet como medio de transmisi,n%
.a web est dis)onible como una )lata6orma ms englobada dentro de los mass media% Para ?)ublicar?
una )gina web" no es necesario acudir a un editor ni otra instituci,n" ni si&uiera )oseer conocimientos
t9cnicos ms all de los necesarios )ara usar un editor de te<to estndar%
! di6erencia de los libros + documentos" el 8i)erte<to no necesita de un orden lineal de )rinci)io a 6inal%
#o )recisa de subdi2isiones en ca)$tulos" secciones" subsecciones" etc%
Creando un sitio web desde 0
n la red" e<isten abundantes recursos &ue )ermiten seguir )aso a )aso el )roceso de crear un sitio
web% /in embargo" stos estn en6ocados a crear sitios web" e<tremadamente bsicos &ue carecen de
a)licaci,n en la actualidad% ste curso )retende 6ormar + guiar el )roceso &ue acom)a3a la creaci,n de
un sitio web ms es)eciali5ado%
.o necesario
Bnicamente necesitaremos saber leer" + una cone<i,n a internet" )ues los recursos &ue utili5aremos
estn dis)onibles en la red de manera gratuita%
1% Conce)tos bsicos
1%1 /o6tware #ecesario
n cuanto al so6tware &ue utili5aremos" ser Dreamwea2er" s una de las 8erramientas ms com)letas
con las &ue dis)onemos actualmente% /i bien es de )ago" )odemos descargarnos una 2ersi,n de
)rueba a 6in de seguir este tutorial% C bien" buscar alguna alternati2a 6ull en sitios como Taringa%
di4o:
#CT!: l :0D del curso )uede seguirse utili5ando cual&uier editor de c,digo 6uente como el HT-.-Eit o
bien Eom)oFer >ambos totalmente gratuitos@%
!dobe Dreamwea2er es una a)licaci,n en 6orma de estudio >en6ocada a la construcci,n + edici,n de
sitios + a)licaciones Web basados en estndares%
s el )rograma de este ti)o ms utili5ado en el sector del dise3o + la )rogramaci,n web" )or sus
6uncionalidades" su integraci,n con otras 8erramientas como !dobe Glas8
n este curso" utili5aremos la 2ersi,n C/H" )esuto &ue el C/I es un )oco traba4oso con las o)ciones
&ue tiene )ara los &ue no conosen% Pues es una combinaci,n de e6iciencia + 6uncionalidad%
JPor &u9 no utili5ar alg*n so6tware gratuitoK !un no e<isten 8erramientas 2erdaderamente maduras%
>n cuanto al dise3o web@ &ue )uedan obtenerse gratuitamente%
di4o:
=R. descarga de Dreamwea2er:
8tt):77www%taringa%net7)osts7in6o710:HHLM'7!dobe-Dreamwea2er-C/INI-am)N-C/H-Gull%8tml
/ea &ue 8a+amos descargado el trial" o bien 8a+amos obtenido alguna 2ersi,n menos OlegalP de
Taringa% l )roceso de instalaci,n ser relati2amente sencillo + no 2ale la )ena detallarlo a&u$%
1%Q l es)acio de Traba4o
s 8ora de iniciar con la creaci,n de nuestro sitio web" sin embargo" es im)ortante &ue con6iguremos
nuestro es)acio de traba4o% !s$ )ues" e4ecutaremos el Dreamwea2er + 2eremos algo como esto
!un&ue contamos con muc8as o)ciones" + de 8ec8o la )osibilidad de utili5ar )lantillas )rede6inidas" en
este caso" 2amos a traba4ar en un es)acio com)letamente nue2o% !s$ )ues" 2amos a seleccionar la
C)ci,n O/itio de Dreamwea2erP
/e nos solicitara ingresar un nombre )ara nuestro sitio% Ro escribir9 O-iPrimer/itioP /in embargo"
ustedes )ueden seleccionar el nombre &ue me4or les )are5ca% !si mismo se nos solicita ingresar una
=R.% ste es)acio lo de4aremos en blanco )or el momento )ues no 2amos a traba4ar aun con un
ser2idor en la red%
Hacemos clic en O/iguienteP
Vamos a seleccionar O#oP Por el momento" no nos 8ar 6alta un ser2idor% Ra ser en la segunda )arte
de este curso &ue utili5aremos tecnolog$as como )8)% /olo nos &ueda 8acer Clic en /iguiente%
!&u$ )odemos seleccionar la ruta )ara nuestros arc8i2os locales% Ro lo de4are )or de6ecto" la ruta
se3alada es el directorio ra$5 de -is Documentos% Clic en O/iguienteP
Cuando se nos )regunte como nos conectaremos con nuestro ser2idor remoto" seleccionaremos
O#ingunoP + 8acemos clic en /iguiente
=na 2e5 &ue 8emos com)letado la con6iguraci,n del nue2o sitio" 2eremos de nue2o la )antalla de
bien2enida" sin embargo en el administrador de arc8i2os" 2eremos algo como esto
sto nos )ermitir mantener el orden del sitio + almacenar todos nuestros arc8i2os" asi mismo creara
rutas relati2as al sitio + no rutas absolutas lo &ue nos )ermitir crear 8i)er2$nculos con ms 6acilidad"
)ero ese es otro tema% s 8ora de crear un #ue2o OHT-.P
!8ora si" )or )rimera 2e5 )odemos obser2ar nuestro es)acio de traba4o% Pero" J&ue son todas esas
barras + o)cionesK
.a barra 1nsertar" nos )ermitir mani)ular 6cilmente algunos elementos + ob4etos &ue e2entualmente
utili5aremos%
!demas" contamos con la barra de )ro)iedades" en ella )odremos de6inir algunos elementos
im)ortantes" claro &ue en )rimera instancia a)renderemos a traba4ar sin estas 6acilidades
l lien5o" es )robablemente el )anel ms im)ortante + re)resenta el cuer)o de nuestros documentos%
!dems" 1ncluidos en el es)acio de traba4o" se encuentran el ins)ector de C//" l ins)ector de
eti&uetas + administrador de sitios% Todas 8erramientas &ue utili5aremos ms adelante%
1%H l lengua4e de las eti&uetas HT-.
Hasta este )unto" 8emos e2itado la menci,n del susodic8o lengua4e" )ero% JSue es HT-.K WiTi)edia lo
de6ine como
OH+)erTe<t -arTu) .anguage >.engua4e de -arcado de Hi)erte<to@" es el lengua4e de marcado
)redominante )ara la elaboraci,n de )ginas web% s usado )ara describir la estructura + el contenido
en 6orma de te<to" as$ como )ara com)lementar el te<to con ob4etos tales como imgenes%P
R de 8ec8o" la de6inici,n es e<celente" sin embargo" sim)li6icndola un )oco% s un lengua4e de
eti&uetas &ue se utili5an )ara dar 6ormato a un documento 8tml% Dic8o documento es inter)retado )or
un na2egador )ara mostrarte lo &ue d$a a d$a 2es en internet%
!l no ser un lengua4e de )rogramaci,n" no arro4ara errores" si el lengua4e es ilegible" sim)lemente no
ser inter)retado%
1%' Documentos HT-.
.os documentos HT-. >de e<tensi,n %8tml o %8tm@ son documentos cu+o 6ormato debe ser inter)retado
)or el na2egador% R son los &ue con6orman las )ginas web%
Como todo" dic8os documentos tienen una estructura bsica% Vamos a cambiar a modo c,digo en
Dreamwea2er )ara obser2ar ms claramente de &ue 8ablamos%
Veremos algo como esto en nuestro Olien5oP
Todo documento 8tml" debe iniciar + terminar con las eti&uetas:
di4o:
U8tmlV
U78tmlV
R claro" )odemos identi6icar las eti&uetas en un documento 8tml )ues estas estn denotadas )or los
signos Ueti&uetaV adems" toda eti&ueta debe cerrarse si deseamos &ue la misma sea inter)retada
adecuadamente )or el na2egador% =na eti&ueta de cierra con el signo O7P es decir U7eti&uetaV
!dems" un documento HT-. cuenta con dos )artes claramente de6inidas% l encabe5ado + el cuer)o%
Todo lo incluido en el encabe5ado es in6ormaci,n )ara el na2egador% R lo incluido en el cuer)o es
in6ormaci,n )ara el usuario%
l encabe5ado del documento se de6ine utili5ando las eti&uetas
di4o:
U8eadV
U78eadV
R en 9l se inclu+e muc8a in6ormaci,n im)ortante" como )or e4em)lo los documentos adicionales &ue
deben ser cargados con el documento% Pero ms im)ortante el titulo + la codi6icaci,n de la )agina%
di4o:
U8eadV
Umeta 8tt)-e&ui2W?Content-T+)e? contentW?te<t78tmlX c8arsetWut6-M? 7V
UtitleV-i Primer sitio WebU7titleV
U78eadV
l title del sitio" es el nombre &ue 2emos en las )esta3as de nuestro na2egador%
1gualmente im)ortante" tenemos el cuer)o del documento es decir todo lo incluido entre las eti&uetas
di4o:
Ubod+V
U7bod+V
ste o no este 6ormateado" cual&uier te<to &ue inclu+amos en el cuer)o del documento" )odr ser 2isto
)or &uienes 2isiten el sitio%
/i 8emos com)rendido estos conce)tos" )odemos 8acer una )e&ue3a )rueba% Para 2isuali5ar nuestro
)rimer sitio" 2amos a reali5ar las siguientes ediciones al c,digo 6uente:
di4o:
U(DCCTRP 8tml P=Y.1C ?-77WHC77DTD ZHT-. 1%0 Transitional77#?
?8tt):77www%wH%org7TR7<8tml17DTD7<8tml1-transitional%dtd?V
U8tml <mlnsW?8tt):77www%wH%org71:::7<8tml?V
U8eadV
Umeta 8tt)-e&ui2W?Content-T+)e? contentW?te<t78tmlX c8arsetWut6-M? 7V
UtitleV-i )rimer sitio webU7titleV
U78eadV
Ubod+V ste es mi )rimer sitio web
U7bod+V
U78tmlV
C)rimiremos G1Q + Dreamwea2er nos )reguntara si deseamos guardar el documento% Vamos a 8acer
clic en /1" + 2amos a guardarlo con el nombre Otest%8tmlP
R )ronto 2eremos en nuestro na2egador el resultado de nuestra )rimera edici,n
/i bien es un documento 8tml bien estructurado" resulta mu+ sim)le" + claro no 2amos a colgarlo en la
red%
Yueno" s 8ora de em)e5ar% Cerramos el test%8tml + 2amos a crear un nue2o documento en blanco%
Sue guardaremos como inde<%8tml adems" en nuestro gestor de sitios 2amos a 8acer clic derec8o + a
crear una nue2a car)eta llamada Oob4etosP
1%I ditando Te<to
l te<to es )robablemente una de las 8erramientas &ue mas utili5aremos en nuestros dise3os% R e<isten
ciertas eti&uetas es)eciales )ara darle 6ormato%
n )rimer lugar" un )rra6o se denota )or
di4o:
U)Vsto es un )arra6oU7)V
R claro" el te<to" es una )arte &ue deseamos )ueda ser obser2ada )or el usuario" )or tanto lo
incluiremos dentro del cuer)o del documento
Para reali5ar un salto de l$nea" es decir" lo e&ui2alente al OnterP en un editor de te<tos cual&uiera
debemos insertar la eti&ueta
di4o:
Ubr 7V
Tambi9n es im)ortante mencionar alg*n 6ormato bsico" como es el resaltar un te<to en OnegritaP o
8acerlo cursi2o" eso lo 8acemos usando las eti&uetas UbV + las eti&uetas UiV as$:
di4o:
UbVeste te<to esta en negritaU7bV
UiVeste te<to esta en itlicaU7iV
/i incluimos los e4em)los anteriores en nuestro documento" obtendremos algo como esto:
/i o)rimimos G1Q + guardamos los cambios" 2eremos algo como esto en el na2egador:
Tenemos un )rra6o mu+ )roli4o" sin embargo" no tiene ninguna clase de alineaci,n" 4usti6icado ni
cual&uier otro 6ormato bsico% Para lograr un resultado ms elaborado" deber$amos incluir en la eti&ueta
U)V ciertos atributos%
.os atributos com)lementan la 6uncionalidad de una eti&ueta" + algunos atributos no son e<clusi2os de
la eti&ueta en &uisti,n% s el caso del atributo align" cu+o 2alor debe estar encerrado entre comillas +
)uede ser:
Para alinear al centro
di4o:
U) alignWPcenterPVsto es un )arra6oU7)V
Para alinear a la derec8a
di4o:
U) alignWPrig8tPVsto es un )arra6oU7)V
Para alinear a la i5&uierda
di4o:
U) alignWPle6tPVsto es un )arra6oU7)V
C bien )ara 4usti6icar el te<to
di4o:
U) alignWP4usti6+PVsto es un )arra6oU7)V
R )odemos incluirlos dentro de nuestro inde< de la siguiente manera
di4o:
#CT/ &ue se 8an creado dos )rra6os inde)endientes
Como 8abremos notado" Dreamwea2er tiene la ca)acidad de autocom)letar" 8erramienta &ue nos
)uede resultar mu+ *til a la 8ora de traba4ar en modo OC,digo 6uenteP
/i consideramos el resultado de la edici,n con la tecla G1Q" 2eremos algo como esto
<isten ciertos caracteres &ue no )ueden ser incluidos de manera directa dentro del c,digo 6uente%
/i deseamos 2isuali5ar caracteres es)eciales en nuestro documento HT-. debemos 8acer uso de una
e<tensa lista &ue contiene los res)ecti2os c,digos de cada carcter%
Caracteres es)eciales bsicos
n realidad estos caracteres se usan en HT-. )ara no con6undir un )rinci)io o 6inal de eti&ueta" unas
comillas o un [ con su corres)ondiente carcter%
Caracteres es)eciales del HT-. Q%0
Caracteres es)eciales del HT-. H%Q
Ctros caracteres es)eciales
Resulta sin embargo" &ue utili5ar esta lista es )oco )rctico" )ero claro" tenemos una alternati2a
interesante + es a la 8ora de crear te<tos" )odemos utili5ar el editor gra6ico de Dreamwea2er%
!s$" cada 2e5 &ue insertemos un carcter es)ecial" como )or e4em)lo \ Dreamwea2er lo registrara
automticamente como un carcter es)ecial%
1%; nlaces
sos elementos &ue no )ueden 6altar en un sitio web" &ue nos )ermiten relacionar nuestros documentos
entre s$ + crear contenidos dinmicos%
.os enlaces estn marcados )or la eti&ueta UaVenlaceU7aV siendo OenlaceP la )alabra a la &ue el
usuario tendr acceso" a8ora% .a eti&ueta UaV )or si sola" no tiene demasiada utilidad% Por lo &ue se
utili5a el atributo 8re6 &ue indica la ruta &ue debe seguir el enlace%
De modo &ue la estructura de un enlace OestndarP seria:
di4o:
Ua 8re6WPrutaPVnlaceU7aV
/iendo ruta" el documento OdestinoP o bien )uede ser un enlace e<terno inclu+endo
di4o:
Ua 8re6WP8tt):77ruta%comPVnlaceU7aV
Dentro de nuestro documento" )odemos incluir entonces un enlace a Taringa a modo de e4em)lo%
Sue se 2er en el na2egador as$
Con esta sinta<is 8emos creado un enlace a Taringa &ue se abrir en la misma 2entana% Cosa &ue
aun&ue )ara los linTs internos del sitio est bien" si deseamos incluir un linT e<terno )uede resultar )oco
con2eniente )ara 8acer &ue el na2egador abra la OrutaP en una nue2a )esta3a 8aremos uso de otro
atributo de la eti&ueta UaV
-e re6iero al atributo targetWPP &ue se utili5a as$:
di4o:
Ua 8re6W8tt):77www%taringa%net7misaQ)acQ targetW?NblanT?VUiV-isaQ)acQU7iVU7aV
1%L .os estilos C//
.as 8o4as de estilo en cascada >en ingl9s Cascading /t+le /8eets@" C// es un lengua4e usado )ara
de6inir la )resentaci,n de un documento estructurado escrito en HT-. usualmente resulta un dolor de
cabe5a a)render este lengua4e sin embargo" a&u$ lo 8aremos 6cil X-@
n )rimer lugar" 2amos a crear nuestra 8o4a de estilos% Vamos a 8acer clic en !rc8i2o V #ue2o
Posteriormente" nos a)arecer una nue2a )esta3a en nuestro es)acio de traba4o% Dic8a )esta3a estar
en blanco" )ero )or el momento es todo lo &ue tenemos% R lo guardaremos como Oestilos%cssP
=na 2e5 de6inida nuestra 8o4a de estilos" solo 8ace 6alta &ue inclu+amos algo de contenido >claro &ue
esta no es la )arte mas 6cil@ sin embargo% /eguro &ue siguiendo el curso todo saldr como es)eramos%
Vol2emos a nuestro inde<%8tml + 2amos a relacionar nuestra 8o4a de estilos con nuestro sitio% Para eso"
2amos a incluir una instrucci,n mu+ sencilla en nuestro encabe5ado%
di4o:
UlinT relW?st+les8eet? 8re6W?estilos%css? t+)eW?te<t7css? mediaW?all?V
!claro &ue esto+ utili5ando una ruta relati2a a mi documento 8tml% s decir estilos%css est en la misma
car)eta &ue inde<%8tml
Vale" a8ora 2amos a editar algunos atributos de nuestro sitio utili5ando las )ro)iedades &ue de6iniremos
en nuestra 8o4a de estilos C//% Vamos a cambiar el color de 6ondo de nuestro sitio web" de esa manera
com)renderemos me4or c,mo 6uncionan las 8o4as de estilo%
n nuestro arc8i2o estilos%css 2amos a escribir:
di4o:
bod+ ]bacTground-color: ^GGGGCC_
Con Obod+P indicamos la eti&ueta a la cual le estamos a)licando el atributo" )osteriormente agregamos
el atributo" en este caso un color de 6ondo%
n nuestro na2egador 2er$amos algo como esto:
Como 2emos" 8emos dado a nuestro sitio un color amarillo &ue utili5aremos de base%
1%M 1nsertando 1mgenes
n )rimer lugar" debemos considerar la imagen &ue deseamos insertar en nuestro documento% Ro
utili5are una imagen llamada Oe&ui)oP dic8a imagen la incluiremos en nuestra car)eta Oob4etosP
!8ora" 2amos a incluirla en nuestro documento utili5ando la eti&ueta UimgV con el atributo srcWPP )ara
se3alar la ruta de la imagen
di4o:
Uimg srcWPob4etos7e&ui)o%4)gP7V
Podemos incluir la imagen dentro de un )rra6o si deseamos alinearla%
s con2eniente" &ue utili5emos el atributo OaltP en nuestras imgenes" &ue es un )e&ue3o cuadrito &ue
a)arece cuando ubicamos el mouse sobre las imgenes
di4o:
Uimg srcWPob4etos7e&ui)o%4)gP altW?&ui)o? 7V
Tambi9n" )odemos a3adirle alg*n atributo adicional si deseamos redimensionarla% Por e4em)lo"
)odr$amos 8acerla ms )e&ue3a si agregamos
di4o:
Uimg srcWPob4etos7e&ui)o%4)gP widt8W?'00)<? 8eig8tW?Q00)<? altW?&ui)o? 7V
!)licando esto &ue 8emos mencionado a nuestro c,digo 6uente" 2eremos algo como esto:
R en el na2egador
#uestro sitio" )oco a )oco em)ie5a a tomar 6orma a8ora tiene una 8o4a de estilos" te<to e imgenes"
)ero claro" no se mira demasiado elegante sino como un mont,n de elementos dis)ersos )or todos
lados%
-e gustar$a aclarar &ue los atributos de las imgenes" si bien )ueden editarse a tra29s del c,digo
6uente" resulta ms )rctico utili5ar el editor gra6ico de Dreamwea2er" &ue )ermite redimensionar
imgenes de manera gra6ica% !s$ mismo a3adirlas )uede ser tan sencillo como 8acer un Crtl ` V
dici,n de imgenes utili5ando el O-odo Dise3oP
Claro &ue estas tareas sencillas realmente son mu+ 6ciles desde el modo dise3o" sin embargo" el
conocer el O-odo Te<toP nos 6acilitara las cosas ms adelante cuando debamos reali5ar o)eraciones
ms com)le4as &ue solo )ueden 8acerse manualmente%
=na imagen tambi9n )uede ser usada como enlace" lo &ue debemos 8acer es agregar a la eti&ueta
UaVUimgVU7aV /in embargo" si 8acemos esto" a)arecer un borde alrededor de nuestra imagen" &ue
)odemos solucionar agregando el atributo borderWP0P a nuestra imagen
Resulta ms con2eniente 8acerlo desde nuestra 8o4a de estilos C// asi:
di4o:
img ]border-st+le: none_
De modo &ue ninguna imagen a la &ue agreguemos un enlace" tendr borde%
di4o:
Ua 8re6W8tt):77www%taringa%net7misaQ)acQ targetW?NblanT?VUimg srcW?ob4etos7e&ui)o%4)g? altW?&ui)o?
7VU7aV
1%: Creando Clases
Vale" 8asta el momento tenemos un sitio bastante rudimentario" 8emos a)rendido a insertar imgenes +
a)licar atributos sin embargo" a*n estamos le4os de crear un sitio lo su6icientemente O)ro6esionalP como
)ara mostrrselo al mundo%
ntonces" J&u9 8ace 6altaK n )rimer lugar" no 8emos a)rendido a mar&uetar una web" es decir
estructurarla% Tambi9n debemos )ro6undi5ar nuestros conocimientos sobre C//%
Pues re6iri9ndonos a las 8o4as de estilos" nos 8ace 6alta a)render a de6inir clases% s decir" gru)os de
atributos &ue )odamos a)licar a ciertas eti&uetas%
Por e4em)lo" si &uisi9semos &ue todos nuestros )rra6os estu2ieran alineados al centro" )odr$amos
crear en nuestra 8o4a de estilos
di4o:
) ]te<t-align:center_
/in embargo" es )oco )robable &ue deseemos &ue TCDC/ los )rra6os de nuestro sitio est9n alineados
al centro" es )or eso &ue 2amos a crear una clase" &ue )odamos usar con la eti&ueta U)V
Para de6inir una clase" basta con agregar un )unto antes del nombre de clase es decir%
di4o:
%titulos
/i creamos una clase llamada t$tulos )ara ciertos )rra6os )odemos de6inir ciertos 2alores como )or
e4em)lo:
di4o:
%titulos ]6ont-6amil+:times^new^romanX
6ont-si5e:H0)<X
6ont-weig8t:boldX
te<t-align:center_
R a8ora" )ara a)licar dic8o estilo a un )rra6o" 2amos a agregarlo mediante el atributo classWPP
di4o:
U) classW?titulos? alignW?center?Vste es mi )rimer UbVsitio webU7bVU7)V
De4ando nuestro c,digo 6uente de la siguiente manera
R mostrando como resultado 6inal en el na2egador:
di4o:
#CT/ &ue al a)licar un estilo el 6ormato )re2io" incluido en el documento es ignorado%
Veremos ms el uso de las clases cuando em)ecemos a enmar&uetar nuestro sitio sin embargo este es
su 6uncionamiento bsico%
n este ca)$tulo" 8emos a)rendido los conce)tos + tenemos las nociones bsicas sobre el lengua4e
HT-. + la creaci,n de un sitio web" l 6uncionamiento de las 8o4as de estilo + las clases%
!un&ue )odr$amos continuar traba4ando sobre nuestro inde<%8tml debemos a)render a traba4ar con
)lantillas" &ue nos 6acilitaran el traba4o% !s$ &ue nuestro $nde< )or el momento" ser solo una re6erencia%
De a&u$ en adelante comien5a el 2erdadero curso 8aci &ue borramos nuestro 2ie4o inde< + nuestro 2ie4o
css" + crearemos nue2os%
Q% Creando nuestra )lantilla%
=na )lantilla la )odemos de6inir como un elemento OestticoP en nuestro sitio" &ue contendr )artes
editables >estas sern inde)endientes )ara cada )gina@" as$ )ues si deseamos editar alg*n elemento
de nuestro sitio solo 8ar 6alta remitirnos a la )lantilla%
!8ora" )ara )oder de6inir los elementos editables + los no a editables" debemos crear una estructura
bsica en nuestro sitio web% Podemos usar )ara ello% Tablas o Ca)as% ste curso" utili5aremos ca)as"
un m9todo ms lim)io + )ro6esional%
Q%1 .a estructura bsica
n )rimer lugar" crearemos un nue2o documento HT-.% !dems con2iene crear una nue2a 8o4a de
estilos a la &ue llamaremos Oestilos-general%cssP
Vamos a relacionar nuestra 8o4a de estilos con el documento en cuesti,n% 0usto como lo 2imos en el
ca)$tulo 1%L%
=na
=na 2e5 8ec8o esto" 2amos a crear nuestras ca)as" la eti&ueta &ue de6ine a una ca)a es Udi2V%
=na ca)a no es ms &ue un elemento rectangular &ue sir2e )ara agru)ar datos dentro de blo&ues en un
sitio web% .a )osici,n" + tama3o de una ca)a" est de6inida )or su clase o )or su id de clase%
Pero antes de em)e5ar a escribir Udi2V a lo loco" 8ace 6alta &ue 8agamos un )e&ue3o es&uema de la
estructura &ue deseamos% sto lo )odemos 8acer en cual&uier )rograma )ara la edici,n de gr6icos%
JPor &u9 8acer estoK !un&ue es un )aso adicional" nos )ermite darnos una idea mas clara de lo &ue
&ueremos 8acer%
s mu+ im)ortante &ue a la 8ora de dise3ar estemos claros de lo &ue deseamos 8acer" )lantearnos un
ob4eti2o + alcan5arlo%
=na 2e5 &ue tenemos una idea clara de lo &ue deseamos 8acer" )odemos em)e5ar crear nuestras
ca)as%
Para crear una ca)a" basta con de6inir un te<to entre las eti&uetas Udi2VU7di2V sin embargo" el 8acerlo
de esta manera solo agru)a el te<to en blo&ues sin 6ormato alguno%
!8ora" un conce)to &ue debemos tener claro es el de clase" )ero ms im)ortante el de Oestilos *nicosP
)ues son un identi6icador )ara cada ca)a% /i bien las clases las de6inimos con un O%P los estilos *nicos
los de6inimos con O^P
Claro &ue el detalle del conce)to siem)re es algo 2ago" )or eso 2amos a a)licarlo a nuestra )lantilla
de6iniendo nuestros I ca)as )rinci)ales >1 a I@ ms adelante e<)licaremos la ca)a OglobalP
n nuestra 8o4a de estilos 2amos a incluir I nue2os Oestilos *nicosP + 2amos a de6inir los colores de
borde )ara cada uno%
di4o:
^8ead ]border: H)< solid ^0000GG_
Como 8abremos notado" Dreamwea2er nos ec8a una mano en este asunto + resulta mu+ 6cil traba4ar
en el C// del sitio con una 8erramienta tan com)leta%
R adems" con su selector de color" se 8ace muc8o ms 6cil el traba4o de dise3o%
!8ora" solo 8ace 6alta &ue de6inamos nuestros di2s en nuestra )lantilla" )ero )rimero 2amos a guardarla
como )lantilla%8tml" una 2e5 8ec8o esto 2amos a de6inir nuestros di2s de la siguiente manera
di4o:
Udi2 idW?estilounico?V!lgunTe<toU7di2V
De modo &ue nuestro c,digo 6uente &uedar$a as$
#uestra 8o4a de estilos
di4o:
bc8arset ?ut6-M?X
7c C// Document c7
^8ead ]border: H)< solid ^0000GG_
^menu ]border: H)< solid ^GG;;00_
^contenido ]border: H)< solid ^GG0000_
^)ublicidad ]border: H)< solid ^HH::GG_
^creditos ]border: H)< solid ^GGGG00_
R )odemos 2isuali5arlo en el na2egador" aun&ue claro" aun no se )arece demasiado a la estructura &ue
buscamos%
Podemos agregar el 6ondo a nuestro sitio" Ro 8e decidido sea negro%
#o 8a+ de &u9 )reocu)arse% -as adelante arreglaremos ese )roblemita con el te<to >si" el &ue no se 2e@
)or el momento 8ablaremos un )oco de de nuestro di2 global% s decir" en nuestra )lantilla de dise3o"
nuestro di2 0%
s im)ortante" )ues con el de6iniremos el anc8o de nuestro sitio% -as adelante" 8ablaremos de
resoluciones dinmicas" sin embargo )or el momento" 2amos a tratar la resoluci,n de nuestro sitio como
un elemento esttico%
!l ser nuestro di2" global el O)adreP de todas nuestras ca)as% Debemos ubicarlo de la siguiente manera:
di4o:
U(DCCTRP 8tml P=Y.1C ?-77WHC77DTD ZHT-. 1%0 Transitional77#?
?8tt):77www%wH%org7TR7<8tml17DTD7<8tml1-transitional%dtd?V
U8tml <mlnsW?8tt):77www%wH%org71:::7<8tml?V
U8eadV
Umeta 8tt)-e&ui2W?Content-T+)e? contentW?te<t78tmlX c8arsetWut6-M? 7V
UtitleVDocumento sin t[iacuteXtuloU7titleV
UlinT relW?st+les8eet? 8re6W?estilos-general%css? t+)eW?te<t7css? mediaW?all? 7V
U78eadV
Ubod+V
Udi2 idW?global?V
Udi2 idW?8ead?VDi2% 1 HeaderU7di2V
Udi2 idW?menu?VDi2% Q -enuU7di2V
Udi2 idW?contenido?VDi2% H ContenidoU7di2V
Udi2 idW?)ublicidad?VDi2% ' ContenidoU7di2V
Udi2 idW?creditos?VDi2% I CreditosU7di2V
U7di2V
U7bod+V
U78tmlV
di4o:
#CT!: !un&ue 8tml no es sensible al tabuladoc" recomiendo utili5arlo )ara mantener el orden +
estructura del sitio%
#uestro Oestilo *nicoP global" dictara el tama3o asignado al contenido de nuestro sitio" en este caso" )or
ser la resoluci,n ms usada% Vamos a de6inir el anc8o de nuestra web en M00)<% JC,moK !di2inaron"
desde nuestra 8o4a de estilos%
!dems" 2amos a de6inir en nuestro estilo *nico OglobalP el 6ondo de nuestro sitio% De nuestro contenido
)ara ser e<actos%
#CT!: cada )ro)iedad en C// dese se)ararse )or un OXP
di4o:
^global ]widt8:M00)<X
margin:')< autoX
bacTground-color:^GGGGGGX
border: H)< solid ^::::::_
!s$ )ues" nuestra 8o4a de estilos &uedar$a:
R nuestra 2ista )re2ia en el na2egador re2ela un resultado &ue cada 2e5 )arece ms una )gina web%
!8ora &ue 8emos terminado con nuestro Di2 global" 2amos a reubicar algunos elementos% -e re6iero al
Di2 '% Vamos a ubicarlo encima del Di2H%
=na 2e5 8ec8o esto" 2amos a editar las )ro)iedades C// de nuestros di2s" ubicndolos como en
nuestra )lantilla de dise3o%
Vale" a8ora 2amos a darle un )oco mas de 6orma a nuestro sitio" agregando un )ar de )ro)iedades ms
a nuestra 8o4a de estilos C//% stas ubicaran nuestros di2s" en las )osiciones &ue le indi&uemos%
!s$ )ues" 2amos a comen5ar con nuestro Omen*P% ste lo ubicaremos a la i5&uierda" donde usualmente
estn ubicados los men*s en un sitio web% R le daremos un anc8o de 1I0)<%
di4o:
^menu ]border: H)< solid ^GG;;00X
widt8:1I0)<X
6loat:le6tX
)adding:H)<X
8eig8t:autoX
margin:I)<
_
1ndicamos en )rimer lugar &ue el anc8o de la ca)a ser de 1I0 )i<eles" estar O6lotandoP a la i5&uierda
del contenido con un )adding de H )i<eles% l )adding es una es)ecie de borde interno &ue 8ar &ue
nuestros contenidos no est9n mu+ )egados al borde de la ca)a
!s$ mismo" de6inimos la altura de la ca)a como OautoP es decir" estar en de)endencia del contenido% l
margen es ese es)acio &ue 2emos entre las ca)as% .o mismo 8aremos )ara el Di2 ' )ero 2amos a
cambiar le6t )or rig8t" es decir" &ue este 6lotara a la derec8a%
di4o:
^)ublicidad ]border: H)< solid ^HH::GGX
widt8:1I0)<X
6loat:rig8tX
)adding:H)<X
8eig8t:autoX
margin:I)<
_
Para nuestro Di2 n*mero H" 2amos a alinearlo a la i5&uierda 4usto des)u9s de nuestro men* siem)re
agregando un )adding de H )i<eles + un margen de I
di4o:
^contenido ]border: H)< solid ^GG0000X
widt8:'Q0)<X
8eig8t:autoX
)adding:H)<X
margin:I)<X
6loat:le6tX
_
=na 2e5 &ue 8emos de6inido nuestros H di2s )rinci)ales" 2amos a agregar un )ar de )ro)iedades al
8ead + a los cr9ditos a 6in de crear un )oco de orden%
di4o:
^creditos ]border: H)< solid ^GGGG00X
widt8:autoX
8eig8t:H0)<X
margin:I)<X
clear:bot8X
_
di4o:
C0C" !dems de los elementos &ue +a mane4amos a&u$ utili5amos la )ro)iedad clear" &ue nos dice &ue
no )ermitir elementos 6lotantes ni a la i5&uierda ni a la derec8a >)or eso utili5amos bot8@%
Para el 8ead" solamente 2amos a incluir un )ar de mrgenes &ue se)araran nuestra cabe5era del
cuer)o del sitio
di4o:
^8ead ]border: H)< solid ^0000GGX
margin:I)<
_
!l 6inal" nuestro c,digo 6uente >el de la 8o4a de estilos@ deber$a lucir ms o menos as$:
!8ora" )odemos 2isuali5ar nuestro sitio en el na2egador%
Ciertamente 8emos alcan5ado nuestro ob4eti2o% R )or 6in nuestro sitio tiene una estructura bsica% De
modo &ue )odemos em)e5ar a traba4ar sobre esta%
Q%Q -en*
l men*" uno de los elementos ms im)ortantes de nuestro sitio% R es &ue )ermite a los usuarios
na2egar a tra29s de nuestro contenido% Ra &ue 8emos designado un es)acio )ara nuestro men* es 8ora
de construirlo%
Vale" )ara crear nuestro men*" 2amos a utili5ar listas% n HT-. una lista se de6ine con la eti&ueta UulV
+ cada elemento se marca con la eti&ueta UliV de esta manera%
di4o:
UulV
UliVelemento 1U7liV
UliVelemento QU7liV
UliVelemento HU7liV
UliVelemento 'U7liV
U7ulV
Dic8a con6iguraci,n" dar$a como resultado algo como esto:
!un&ue claro" nuestro men*" ser un )oco ms elaborado" Jc,moK -u+ 6cil" + si" seguro lo 8as
adi2inado% Con nuestra 8o4a de estilos%
n )rimer lugar" +a &ue 8emos ubicado nuestro men*" el 6eo borde anaran4ado no nos 8ar 6alta" )or
tanto 2amos a remo2erlo%
.o &ue si agregaremos" es un ti)o de letra un )oco ms Oestili5adaP )ara nuestro men*%
so lo 8aremos agregando a nuestro C// una )ro)iedad llamada 6ont
di4o:
^menu ] widt8:1I0)<X
6loat:le6tX
)adding:H)<X
8eig8t:autoX
margin:I)<X
6ont: M0D ?Trebuc8et -/?" !rial" Hel2etica" sans-seri6X
_
!8ora" 2amos a de6inir las )ro)iedades es)ec$6icas )ara cada elemento HT-. dentro del men*" esto lo
8aremos utili5ando la nomenclatura:
di4o:
^estilounico eti&ueta ])ro)iedades_
R como )rimer )aso" 2amos a &uitarle a las listas dentro de nuestra ca)a" esas )elotitas negras &ue
a)arecen a la )ar del elemento se3alado%
!s$ )ues" 2emos como asignamos la )ro)iedad Olist-st+le-t+)eP + le damos un 2alor OnoneP a las
eti&uetas OulP + OliP
di4o:
^menu ul" li ]list-st+le-t+)e: noneX
_
!dems" &uitaremos el margen + el )adding a nuestro listado" lo &ue 8ar 2er los elementos del nuestro
men*" )er6ectamente alineados%
di4o:
^menu ul ]margin: 0X
)adding: 0X
_
R a cada elemento de nuestro men*" 2amos a darle un borde &ue 8ar las 2eces de se)arador )ara los
elementos del mismo%
di4o:
^menu li]border-bottom:1)< solid ^000000X
_
!8ora" 2amos a darle un estilo caracter$stico a cada enlace dentro de nuestro men*% Para eso
utili5aremos las siguientes )ro)iedades
di4o:
^menu a ]te<t-decoration:noneX
color:^HHHHHHX
bacTground:^GGGGGGX
dis)la+:blocTX
)adding:H)< ;)<X
widt8:1HM)<X
_
Con la )ro)iedad te<t-decoration" indicamos &ue no deseamos &ue nuestros enlaces est9n subra+ados%
.a )ro)iedad dis)la+" indica &ue cada enlace" generara un blo&ue caracter$stico%
Ginalmente" 2amos a agregarle a nuestro men* una )ro)iedad 8o2er% s decir &ue se acti2ara cuando
)asemos el mouse sobre 9l elemento%
di4o:
^menu a:8o2er ]bacTground:^CCCCCCX
_
!8ora" debemos agregar algunos elementos a nuestro men* )ara )oder 2isuali5ar el resultado% Claro
&ue nuestro sitio no tiene ning*n enlace" as$ &ue agregaremos algunos linTs Oe4em)loP cu+a ruta sea O^P
>es decir" ninguna@
#uestra 8o4a de estilos" deber$a 2erse algo as$ una 2e5 6inali5ada la edici,n% >C4o &ue solo esto+
colocando la )arte en la &ue traba4amos@
di4o:
^menu ]widt8:1I0)<X
6loat:le6tX
)adding:H)<X
8eig8t:autoX
margin:I)<X
6ont: M0D ?Trebuc8et -/?" !rial" Hel2etica" sans-seri6X
_
^menu ul" li ]list-st+le-t+)e: noneX
_
^menu ul ]margin: 0X
)adding: 0X
_
^menu li]border-bottom:1)< solid ^000000X
_
^menu a ]te<t-decoration:noneX
color:^HHHHHHX
bacTground:^GGGGGGX
dis)la+:blocTX
)adding:H)< ;)<X
widt8:1HM)<X
_
^menu a:8o2er ]bacTground:^CCCCCCX
_
R si )resionamos G1Q" )odremos 2er en nuestro na2egador un bonito men*%
Q%H Header
Probablemente una de las )artes ms im)ortantes de nuestro sitio" es lo )rimero &ue los usuarios 2en" +
debe ser llamati2o" )ero no e<cesi2amente )om)oso% De cual&uier manera es algo mu+ )ersonal%
n )rimer lugar" 2amos a eliminar ese molesto borde a5ul &ue no 8ace otra cosa ms &ue molestar%
Pero claro" no 8ace 6alta &ue e<)li&ue nue2amente como 8acerlo% Ro utili5are este:
Para insertarlo" en )rimer lugar" necesitamos ubicar nuestro ob4eto en nuestra car)eta de ob4etos% .o
llamare web8ead%)ng
Tenemos dos o)ciones )ara insertar nuestro 8ead% .a )rimera" 8acerlo como una imagen dentro de
nuestro D1V 8ead% R la segunda" como 6ondo de nuestro D1V
=sualmente" si )ensamos incluir alg*n contenido adicional en nuestro D1V" es recomendable utili5ar la
segunda o)ci,n%
/in embargo% Por el momento no 2amos a insertar nada ms en nuestra cabecera + )or tanto 2amos a
insertarlo como si de una imagen cual&uiera se tratase" es)ero no se les 8a+a ol2idado como insertar
imgenes%
! &ue a8ora em)ie5a a )arecer un 2erdadero sitio web% !un&ue claro" aun tenemos muc8os detalles
&ue debemos )ulir + de 8ec8o" secciones com)letas &ue construir%
Q%' Cr9ditos
Sui5 en este momento te )reguntaras" J! &u9 8ora em)e5aremos a traba4ar en el contenidoK Pero
debemos recordar &ue estamos traba4ando en la )lantilla% Por tanto" debemos de6inir )rimero las )artes
estticas del sitio%
s decir esas &ue 2an a 2ariar inde)endientemente de la secci,n en la &ue nos encontremos%
n este momento" 2amos a traba4ar en una de las )artes ms im)ortantes del sitio% .os cr9ditos% JPor
&u9 im)ortanteK Gcil" )or&ue si 8emos creado todo esto desde 0" m$nimo incluir nuestro nombre en el
)ie de )gina%
Pero ms im)ortante &ue ser reconocidos" es &ue con el O)ie de )ginaP 2amos a a)render a redondear
es&uinas%
!un&ue se me ocurri, en un )rinci)io redondear las es&uinas de nuestro contenedor utili5ando C// +
algunas imgenes% .e di muc8as 2ueltas al asunto de las es&uinas redondeadas% R es &ue 8a+ muc8as
o)ciones% /in embargo )or ser la ms 6le<ible + como )auta )ara la im)lementaci,n de scri)ts" me
decid$ a utili5arP#i6t+ Corners CubeP%
=n scri)t liberado balo la licencia GP. &ue )lanea 6acilitarnos la 2ida" al menos 8asta &ue C//H est9
bien so)ortado )or todos los na2egadores%
Vale" )ero &ue es un Jscri)tK" es un )e&ue3o )rograma &ue automati5a ciertas tareas%
R Jc,mo se usaK -u+ 6cil% n )rimera" nos 2amos a descargar este )a&uete desde el sitio o6icial%
8tt):77www%8tml%it7articoli7ni6t+cube7#i6t+Cube%5i)
=na 2e5 lo 8emos descom)rimido >sea con winrar o cual&uier otro gestor de )a&uetes@ + co)iaremos
estos ' arc8i2os
n nuestro directorio ra$5%
!8ora" en nuestra )lantilla 2amos a incluir lo siguiente" dentro de nuestro U8eadVU78eadV
di4o:
Uscri)t t+)eW?te<t74a2ascri)t? srcW?ni6t+cube%4s?VU7scri)tV
=na 2e5 establecido este )armetro" )odremos llamar a la 6unci,n #i6t+>@" se3alando el di2" &ue
&ueremos a6ectar%
di4o:
Uscri)t t+)eW?te<t74a2ascri)t?V
window%onloadW6unction>@]
#i6t+>?di2^creditos?"?big? X
_
U7scri)tV
Donde di2^creditos indica &ue la ca)a cu+o id *nico de estilo sea ^creditos" ser a6ectada )or la 6unci,n
#i6t+%
n nuestro 8ead" deber$a 2erse ms o menos as$:
=na 2e5 8ec8o esto" 2amos a colorear nuestro D1V + a cambiar el color del te<to desde nuestra 8o4a de
estilos% l resultado 6inal ser:
Sue 2isto en el na2egador &uedar$a ms o menos as$:
J! &u9 se 2an a emocionando con el resultado 8eK Pero aun nos 6alta un )oco )ara acabar%
Q%I Contenido adicional
Vale" estamos a )unto de terminar nuestra )lantilla" )ero 8a+ toda2$a un )ar de ca)as a las &ue no
8emos a)licado ning*n estilo% n este caso" &uisiera agregar a nuestra ca)a una imagen de 6ondo% Pero
claro" dic8a imagen debe )oder aco)larse al contenido de la misma" )or tanto" 2amos a crear no una
sino H imgenes%
De modo &ue en la )arte su)erior" 2eremos una imagen" en medio" los bordes + en la )arte in6erior la
imagen &ue cerrara la ca4a de contenido
Ro utili5o adobe )8otos8o) )ara crear estas imgenes" aun&ue claro )uedes utili5ar cual&uier editor de
imgenes%
!s$ )ues" llamaremos a nuestras imgenes:
cur2a-su)erior%)ng
6ondo)ubli%)ng
cur2a-in6erior%)ng
R las guardaremos en nuestra car)eta de ob4etos" ubicada en nuestro directorio ra$5% !8ora" es
im)ortante mencionar &ue cada ca)a" solo )uede incluir un 6ondo" )or tanto" 2amos a crear tres ca)as
adicionales )ara darle a D1V )ublicidad" una estructura%
di4o:
Udi2 idW?)ublicidad?V
Udi2 idW?cur2asu)erior?VU7di2V
Udi2 idW?contenido)ubli?VU7di2V
Udi2 idW?cur2ain6erior?VU7di2V
U7di2V
sto im)lica &ue nuestro di2" )ublicidad" contendr H di2s adicionales >4usto como 8icimos con nuestro
di2 global@
!8ora" 2amos a crear los estilos *nicos )ara cada D1V" donde incluiremos cada una de las imgenes de
6ondo &ue seleccionamos )ara nuestra web%
Para la cur2a su)erior + la cur2a in6erior: =tili5aremos la )ro)iedad bacTground-image" )ara de6inir la
imagen de 6ondo de nuestra ca)a% .a )ro)iedad re)eat" indica si se re)etir o no + en &u9 direcci,n% l
widt8 lo 6i4aremos al 100D )ara &ue ocu)e todo el es)acio )osible dentro de nuestro contenedor + el
8eig8t lo 6i4aremos en H0)< >el alto de nuestra imagen@
Para nuestro di2 de contenido" 2amos a 6i4ar nuestro 8eig8t en auto" )ara &ue nuestra ca)a )ueda 2ariar
su tama3o% R 8aremos &ue el bacTground-image se re)ita en el e4e + de modo &ue en nuestra 8o4a de
estilos" agregaremos lo siguiente:
di4o:
#CT/: &ue no esto+ detallando el )rocedimiento" )ues +a en ca)$tulos )asados 8emos tratado con
ms detenimiento la edici,n del C//
di4o:
^)ublicidad ]
widt8:1I0)<X
6loat:rig8tX
)adding:H)<X
8eig8t:autoX
margin:I)<
_
^cur2asu)erior ]bacTground-image:url>ob4etos7cur2a-su)erior%)ng@X
bacTground-re)eat:no-re)eatX
widt8:100DX
8eig8t:H0)<X
_
^contenido)ubli ]
widt8:autoX
8eig8t:autoX
)adding:I)<X
bacTground-image:url>ob4etos76ondo)ubli%)ng@X
bacTground-)osition:centerX
bacTground-re)eat:re)eat-+X
_
^cur2ain6erior ]
bacTground-image:url>ob4etos7cur2a-in6erior%)ng@X
bacTground-re)eat:no-re)eatX
widt8:100DX
8eig8t:H0)<X
_
Como )ueden obser2ar" no 8emos 8ec8o nada ms &ue de6inir las )ro)iedades ms elementales de
cada uno de los com)onentes%
di4o:
C0C: Claro &ue )udimos utili5ar este m9todo anteriormente )ara crear las es&uinas redondeadas de
nuestros Ocr9ditosP sin embargo" en el curso" se )retende )resentar algunas t9cnicas de dise3o + no
Onormali5arP un )rocedimiento%
=na 2e5 concluida la edici,n" )odremos 2er en nuestro na2egador algo como esto:
Q%; Creando los com)onentes editables
Ginalmente 8emos llegado al 6amoso ODi2% H ContenidoP Jno os em)e5aba a estorbar +a esa ca4ita ro4aK
Yueno" es 8ora de traba4ar en nuestro contenido + estandari5ar algunos elementos antes de de6inir las
secciones editables en nuestro sitio%
n )rimer lugar" 2amos a eliminar 6inalmente el 6eo marco ro4o + a crear un )ar de D1Vs adicionales
dentro de nuestra secci,n OcontenidoP )ara de6inir el sitio donde irn los OT$tulosP + donde ira
)ro)iamente nuestro OContenidoP
sto nos 6acilitara darle 6ormato a los distintos ti)os de letras &ue 2amos a crear" adems dar un orden
riguroso a nuestro sitio 8aci9ndolo mas )ro6esional%
Hec8o esto" 2amos a darle algunas )ro)iedades en nuestra 8o4a de estilos a sus res)ecti2os idds
Claro &ue no 2o+ a detallar este )rocedimiento" )ues lo 8emos re)etido +a en 2arias ocasiones a lo
largo del curso% !dems no utili5aremos al menos )or el momento" ninguna )ro)iedad nue2a%
Vale" una 2e5 &ue 8emos de6inido las )ro)iedades ms bsicas" 2amos a de6inir el ti)o de letra" tama3o
+ color &ue utili5aremos en nuestras eti&uetas 8" &ue se re6ieren a los encabe5ados%
Para la eti&ueta 81 >&ue usualmente marca el titulo de nuestro sitio@ 2amos a de6inir ciertas )ro)iedades%
di4o:
^titulo 81 ]
color:^;;0000X
6ont-6amil+:!rial" Hel2etica" sans-seri6X
6ont-si5e:1M)<X
6ont-weig8t:boldX
_
/iendo OcolorP e6ecti2amente la )ro)iedad &ue marca el color de la letra% Gont-6amil+" Gont-si5e + Gont-
weig8t marca el ti)o" tama3o + grosor de nuestra 6uente%
Podemos entonces" re2isar si 8emos asignado correctamente la )ro)iedad" dando 6ormato en nuestro
c,digo 6uente a un te<to%
Sue en el na2egador" lucir$a asi:
!8ora" 2amos a darle a nuestro OcontentP )ro)iedades )ara la eti&ueta )" + as$ de6inir claramente el ti)o
de letra &ue utili5aremos%
di4o:
^content ) ]
6ont-6amil+:!rial" Hel2etica" sans-seri6X
6ont-si5e:1Q)<X
_
=na 2e5 8ec8o esta" + un )ar de correcciones ms &ue )ueden 2er a continuaci,n
Vamos" a 6inalmente" de6inir las )artes editables de nuestro sitio web% sto lo 8aremos en modo dise3o%
Haremos clic derec8o sobre nuestro OD1V HP" + 2amos a seleccionar donde dice O)lantillaP a O#ue2a
regi,n editableP
Dreamwea2er nos mandara un ad2ertencia" de &ue nuestra )gina se con2ertir automticamente en
una )lantilla + si &ueremos continuar" nosotros le daremos OsiP
Cuando nos solicite un nombre )ara la regi,n" )odemos llamarle OcontenidoP )or e4em)lo% R a8ora en
nuestro condigo 6uente" 2eremos algo como esto:
Para darle elementos editables a nuestro Head" 2amos a de4ar nuestro title entre:
=na 2e5 8emos 8ec8o esto" 2amos a guardar nuestro documento% Com)letando cual&uier in6ormaci,n
&ue Dreamwea2er nos solicite%
!8ora" 2amos a crear un nue2o arc8i2o" >!rc8i2o V #ue2o@ )ero 2amos a irnos a )lantillas de la )gina
en 2e5 de HT-. en blanco% R eVoila( #uestra )lantilla esta lista )ara usarse%
Sue &uiere decir esto" signi6ica &ue a8ora )odremos editar el contenido de las )ginas creadas a )artir
de la )lantilla% Pero no la estructura de la misma en cada )gina indi2idual% Para editarlas todas al
mismo tiem)o% /olo 2amos a editar nuestra )lantilla en cuesti,n" &ue se 8abr guardado en una nue2a
car)eta llamada tem)lates% Con e<tensi,n %dwt
.e damos crear" + guardaremos el documento como inde<%8tml >sobrescribiendo nuestro )rimer inde<@
/i 2emos nuestro c,digo 6uente" solo tenemos )ermisos )ara editar el OcontenidoP + el OtitleP de nuestro
sitio% !un&ue claro" siem)re )odemos editar la estructura desde nuestra )lantilla%
!gregando algo de contenido a nuestro D1V content >no 8ace 6alta &ue e<)li&ue esta )arte@ tendremos
algo ms o menos asi:
Ra en el siguiente ca)$tulo" traba4aremos mas en el contenido + en la edici,n de los elementos &ue aun
estn 2acios" como el es)acio )ara la )ublicidad o bien" el men*% !dems crearemos una galer$a
6otogr6ica + un 6ormulario de contacto%
H% Contenido del /itio
n este ca)$tulo 2amos a )re)arar nuestro sitio )ara colgarlo en internet" +a 8emos creado una )lantilla
+ no 2amos a tener ma+ores )roblemas de dise3o% /in embargo" seleccionar el contenido" es
)robablemente uno de los ma+ores desa6$os a los &ue se en6renta un dise3ador%
H%1 /ecciones
n )rimer lugar" 2amos a desarrollar un )e&ue3o es&uema" &ue nos 6acilitara las cosas" 2amos a de6inir
&ue contenido 2amos a mostrar en nuestro sitio%
n mi caso" incluir9 en el sitio e4em)lo:
c 1nicio
c Historia
c Galer$a
c Recursos
c Contacto
=stedes )ueden crear ms o menos secciones% ! )artir de a&u$" el curso es un mero e4em)lo de las
cosas &ue )odemos 8acer una 2e5 creada nuestra )lantilla + de6inidos los as)ectos ms im)ortantes de
nuestro sitio%
n )rimer lugar" 2amos a crear nuestros documentos 8tml" esto lo 8aremos desde O!rc8i2oP V O#ue2oP +
seleccionando OPagina de PlantillaP )ara seleccionar nuestra )lantilla%
#os a)arecer algo ms o menos as$:
n )rinci)io" ditaremos nuestro UtitleV" cambiaremos donde dice
Por el t$tulo de la )agina en cuesti,n" en este caso" siguiendo con mi es&uema
R guardaremos nuestro documento como 8istoria%8tml >siem)re en nuestro directorio ra$5@
di4o:
#CT!: .as rutas son sensibles a ma+*sculas + min*sculas" es recomendable traba4ar en min*sculas%
=na 2e5 8ec8o esto" 2emos como en nuestro rbol de arc8i2os" a)arece un nue2o arc8i2o llamado
8istoria%8tml
Re)etiremos este )rocedimiento )ara cada una de las secciones de nuestro sitio" de modo &ue
tendremos cinco arc8i2os %8tml en nuestro directorio ra$5%
Hec8o esto" abriremos nuestra )lantilla )ara )oder editar los elementos de nuestro men*% sto
)odemos 8acerlo desde nuestro rbol de ob4etos" seleccionando el arc8i2o )lantilla)rinc%dwt en la
car)eta OTem)latesP
Ginalmente" con una ruta &ue dar a nuestros enlaces" em)e5aremos a de6inirlos en nuestro men*%
di4o:
C0C" &ue estamos agregando O%%7P ! nuestras rutas" lo &ue indica &ue nuestro documento siem)re
buscara en el directorio ra$5 el arc8i2o es)eci6icado%
Guardamos nuestra )lantilla + Dreamwea2er nos )reguntara si deseamos actuali5ar los arc8i2os
#osotros" seleccionaremos O!ctuali5arP es decir" a todos los arc8i2os O8i4osP de nuestra )lantilla se les
a)licaran los cambios &ue a)li&uemos a nuestra )lantilla%
!dems" agregare algo de contenido a mi D1V O)ublicidadP actuali5ando todos mis documentos% !s$
)ues" abrimos nuestro inde<%8tml + )resionamos G1Q" )ara 2erlo en nuestro na2egador
Como )odemos obser2ar" todo cambio &ue a)li&uemos a nuestra )lantilla ser 2isible en los arc8i2os
O8i4osP de la misma%
Yueno amigos 8asta a&ui la )rimera )arte del tutorial" el la segunda )arte crearemos una galeria" un
6romulario de contacto + )ublicaremos nuestro website%