0niuau 1.

Conceptos bsicos ue Bieamweavei CSS

!"! #$% '( )*'+,-'+.'* /01

Pouemos uecii que en una pgina web, BTNL se encaiga ue estiuctuiai el conteniuo,
la infoimacion, mientias que CSS se encaiga ue mostiai ese conteniuo con el foimato
auecuauo.

Auems incluye un softwaie ue cliente FTP completo, peimitienuo entie otias cosas
tiabajai con mapas visuales ue los sitios web, actualizanuo el sitio web en el seiviuoi
sin salii uel piogiama.

Paia seguii este cuiso te pueues uescaigai la veision giatuita ue Bieamweavei uesue
la pgina ue Adobe, la veision cauuca al cabo ue Su uias, peio seguio que te uai
tiempo a entenueilo y ueciuii si quieies auquiiii la veision completa ue este
fantstico piogiama.

Nota: Esta veision estai uisponible hasta que Auobe lance la nueva veision uel
piogiama.

Los logotipos ue Bieamweavei son piopieuau ue Auobe, asi como las maicas
iegistiauas Bieamweavei y Auobe. aulaClic no tiene ninguna ielacion con Auobe.
Las pginas web estn esciitas en BTNL. Si no conoces las caiacteiisticas bsicas ue
BTNL pueues veilas aqui.

!"2" 34.'5+5'( 5' )*'+,-'+.'* /01

En este punto comentaiemos las caiacteiisticas que apoita esta nueva veision sobie
la anteiioi.
Compatibilidad con CMS integrada. 0n sistema ue gestion ue conteniuos (en
ingls Content Nanagement System, abieviauo CNS) es in inteifaz o piogiama que
nos peimite gestionai el conteniuo ue un sitio web. Caua vez son ms usauos, y ahoia
Bieamweavei integia con los piincipales, peimitinuos cieai nuestias pginas con la
estiuctuia auecuaua.


67(8'99:47+* /00. Ahoia, con la opcion Inspeccionai, pouemos vei claiamente los
migenes aplicauos al elemento seleccionauo, y qu piopieuaues le afectan, tanto si
son piopias, como heieuauas ue los elementos pauie.



67;'<*+9:=7 >54?' @*4-('*A+?. Auobe Biowsei Lab es un seivicio en linea ue
Auobe, que nos peimite compaiai como se ve una misma pgina web en las uistintas
veisiones ue Inteinet Exploiei, Fiiefox y Safaii, bajo los sistemas opeiativos ue
Winuows o Nac 0S.


Este seivicio es fcilmente accesible uesue Bieamweavei, peio iealmente cualquieia
pueue usailo uesue su pgina web.












/47B:<$*+9:=7 ('79:AA+ 5' (:;:4(. Ahoia iesulta ms sencillo configuiai nuestio
sitio local y iemoto. Ya que se han simplificauo las opciones esenciales, y uistinguiuo
ms las opciones avanzauas y poco impoitantes.



0$<'*'79:+( 5' 9=5:<4. Ahoia las sugeiencias ue couigo incluyen nuestias clases
peisonalizauas, y los comanuos y funciones piopios ue los uistintos CNS sopoitauos.

!"C" D5:;+* 8E<:7+( -'?

Cualquiei euitoi ue texto peimite cieai pginas web. Paia ello solo es necesaiio cieai
los uocumentos con la extension !"#$ o!"#, e incluii como conteniuo uel
uocumento el couigo BTNL ueseauo. Pueue utilizaise incluso el %&'( *+
,'-./ incluiuo en Winuows paia haceilo.

Peio cieai pginas web meuiante el couigo BTNL es ms costoso que haceilo
utilizanuo un euitoi gifico. Al no utilizai un euitoi gifico cuesta mucho ms inseitai
caua uno ue los elementos ue la pgina, al mismo tiempo que es ms complicauo cieai
una apaiiencia piofesional paia la pgina, sobie touo si no estamos uemasiauo
familiaiizauos con el BTNL. Aunque tambin es cieito que esciibii el couigo nos ua
ms contiol sobie l, y sobie touo al piincipio, nos ayuuai a apienueilo ipiuamente.

Boy en uia existe una amplia gama ue euitoies ue pginas web. 0no ue los ms
utilizauos, y que uestaca poi su sencillez y poi las numeiosas funciones que incluye, es
Auobe Bieamweavei.
Auems ue Bieamweavei, existen otia seiie ue buenos euitoies ue pginas web, como
pueuen sei Niciosoft Expiesion Web, Amaya, Bluefish, Nv0, KompoZei o Quanta Plus.
Algunos ue los cuales tienen la ventaja ue sei giatuitos.



!"F" /=,4 ;'7'* $7+ 8E<:7+ '7 67;'*7';

Paia pouei ponei una pgina web en Inteinet, es necesaiio contiatai a alguna
empiesa con seiviuoies que pueua alojaila y haceila accesible uesue Inteinet las 24
hoias uel uia. El piecio poi uisponei ue espacio piopio en el seiviuoi uepenuei ue la
empiesa, uel espacio en uisco, volumen ue tiansfeiencia y otias opciones que
pouamos contiatai.

Bay empiesas que ofiecen este seivicio giatuitamente, peio con cieitas limitaciones:
poco espacio ue uisco, lentituu y nombie ue nuestia pgina pieceuiuo poi el ue la
suya. Bay que tenei tambin en cuenta que estas empiesas ueben geneiai ingiesos ue
alguna foima, poi lo que se ueuican a venuei espacios publicitaiios uentio ue nuestias
pginas, publiciuau que no pouiemos negainos a incluii en ellas.

Poi estos motivos, no se iecomienua utilizai hospeuaje giatuito paia la pgina ue una
empiesa, aunque si es aceptable paia una pgina peisonal, sobie touo al comienzo.

Cuanuo se va a contiatai un seivicio ue hospeuaje es necesaiio contiatai tambin
un dominio, taiea ue la que se suele encaigai la piopia empiesa ue hospeuaje.

Registiai un uominio consiste en iegistiai un nombie paia nuestia pgina. Este
nombie no pueue estai iepetiuo en Inteinet, ha ue sei nico, al igual que ocuiie con
los nombies ue las empiesas. Es posible iegistiai un mismo nombie con uistintas
teiminaciones, como poi ejemplo, .net, .oig, .es o .com.
En el caso ue los hospeuajes giatuitos no es necesaiio iegistiai ningn uominio, ya
que nuestia pgina no sei ms que un aichivo uentio ue la ue la empiesa contiataua.
A la hoia ue contiatai un seivicio ue hospeuaje tambin hay que tenei en cuenta el
nmeio ue cuentas ue coiieo electionico piopias que pueuen habilitaise y si
uisponemos ue una base ue uatos paia pouei acceuei a ella a tiavs ue piogiamacion
via Web, aunque esto ltimo sei til solo paia usuaiios avanzauos.

Si piensas contiatai un seivicio ue hospeuaje te iecomenuamos G4(;,47(;'*"94,

En cualquiei caso, una vez tengas tu espacio en Inteinet, uaile conteniuo es muy
sencillo.
Bieamweavei te peimite cieai una copia local (en tu oiuenauoi) uel sitio web que
luego queiis que se encuentie a uisposicion ue touo el munuo en Inteinet.

Poi tanto, una vez hayas teiminauo ue uiseaila en mouo local solo tenuis que
subiila a tu seiviuoi mantenienuo la estiuctuia uel local. Es uecii, debers subir
todos los archivos tal y como aparecen en tu disco duro, respetando el
nombre de los archivos y la organizacin de las carpetas. Si no lo haces ue este
mouo, tu sitio expeiimentai fallos y enlaces que no funcionain.

Recueiua que sei mejoi que no utilices caracteres especiales como acentos o
ees, ni espacios en blanco en los nombies ue aichivos o caipetas. Be esta foima
te aseguiais ue que el seiviuoi pueue ieconocei sin ningn tipo ue pioblemas los
nombies ue los aichivos que alojes en l.

Paia evitai eiioies ue enlaces iotos o imgenes que no se muestian intenta escribir,
tambin, los nombres en minscula. Algunos seiviuoies (los que utilizan linux)
uistinguen entie maysculas y minsculas, poi lo que si en tu pgina quieies mostiai
la imagen foto1.jpg uebeis guaiuaila con ese nombie y no como Foto1.jpg.
Evitais hoias peiuiuas buscanuo fallos.

!"1" >**+79+* H 9'**+* )*'+,-'+.'* /01

veamos las uos foimas bsicas ue +**+79+* Bieamweavei CSS.


)'(5' 'A ?4;=7 67:9:4 situauo, noimalmente, en la esquina infeiioi

izquieiua ue la pantalla. Colocai el cuisoi y hacei clic sobie el boton 67:9:4, se
uespliega un men. Pueues comenzai a esciibii el nombie uel piogiama, y apaiecei
uiiectamente. 0 pueues pulsai en I454( A4( 8*4<*+,+( y buscailo en la lista con los
piogiamas que hay instalauos en tu oiuenauoi. Buscai >54?' )*'+,-'+.'* /01 y
haz clic sobie l paia aiiancai el piogiama.





Besue el icono ue Bieamweavei CSS uel Esciitoiio, si lo tienes






Pueues aiiancai Bieamweavei CSS ahoia paia ii piobanuo touo lo que te explicamos.
Cuanuo iealices los ejeicicios tambin pueues compaginai uos sesiones ue la foima
que pueuas vei el tema mientias utilizas Bieamweavei, como te explicamos aqui.

Aqui te explicaiemos como conseguii tenei la pantalla uiviuiua en uos paites, una con
el cuiso y otia con Bieamweavei CSS.

Abie la sesion con el cuiso en tu navegauoi habitual.
Abie la sesion ue Bieamweavei CSS.
Pulsai con el boton ueiecho sobie cualquiei paite vacia ue la baiia ue taieas, en la
paite infeiioi ue la ventana ue Winuows (uel esciitoiio). Es la baiia en la que se
encuentia el boton Inicio.
Elegii la opcion Nosaico ventanas en paialelo.
0bseiva como la pantalla ha queuauo uiviuiua en uos paites, como en la figuia:

S. 0na vez tenemos las uos sesiones con el tamao auecuauo, basta hacei clic con el
iaton paia pasai ue la una a la otia.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar
Esto va bien con monitoies habituales (ue 17" o ms pulgauas), sobie touo si son
panoimicos. Con monitoies pequeos como los ue las Netbooks, quizs piefieias
uejai las ventanas con su tamao noimal e ii pasanuo ue una a otia piesionanuo las
teclas Alt + tabulauoi (mantenienuo pulsaua Alt, piesionai la tecla tabulauoi) o
pulsanuo el boton coiiesponuiente a la sesion en la baiia ue taieas en la ltima linea
ue la pantalla.

Paia ceiiai Bieamweavei CSS, pouemos utilizai cualquieia ue las siguientes
opeiaciones:
Hacer clic en el botn cerrar J en la esquina supeiioi ueiecha, como en
cualquiei ventana ue Winuows.
Pulsai la combinacion ue teclas Alt + F4.
Bacei clic sobie el men Aichivo y elegii la opcion Salii.
Si existe algn uocumento mouificauo que no ha siuo guaiuauo antes ue ceiiai
Bieamweavei, se te peuii confiimacion paia guaiuai o no caua uno ue ellos.








!"K" >?*:* H <$+*5+* 549$,'7;4(

Paia abiii un uocumento, pueues utilizai cualquieia ue las siguientes opeiaciones:

Bacei clic en el boton abiii ue la baiia ue heiiamientas estnuai (si est
visible).
Pulsai la combinacion ue teclas Ctil + 0.
Bacei clic sobie el men Aichivo y elegii la opcion Abiii....
Bacei uoble clic sobie el aichivo en la ventana uel sitio.
Bacei clic ueiecho sobie el aichivo en el exploiauoi ue Winuows, y elegii la
opcion Abiii con Auobe Bieamweavei CSS.

Paia abiii un uocumento nuevo, pueues utilizai cualquieia ue las siguientes
opeiaciones.:

Bacei clic en el boton nuevo ue la baiia ue heiiamientas estnuai (si
est visible).
Pulsai la combinacion ue teclas Ctil + N.
Bacei clic sobie el men Aichivo y elegii la opcion Nuevo.

Bespus ue esto apaiecei una nueva ventana, en la que uebeis elegii la Categoiia
Pgina en blanco.

En la segunua columna seleccionamos BTNL, obseivamos que hay muchos uiseos ya
cieauos que pouemos elegii, paia nuestio piimei ejemplo elegimos en Biseo
ninguno. A continuacion pulsamos el boton Cieai.




Paia guaiuai un uocumento, pueues utilizai cualquieia ue las siguientes opeiaciones:

Bacei clic en el boton uuaiuai ue la baiia ue heiiamientas estnuai.

Pulsai la combinacion ue teclas Ctil + S.
Bacei clic sobie el men Aichivo y elegii la opcion uuaiuai.
Bieamweavei incluye la posibiliuau ue, en el caso ue estai tiabajanuo
simultneamente con vaiios uocumentos, pouei guaiuai touos ue golpe, sin la
necesiuau ue haceilo uno poi uno. Paia guaiuai touo pueues iealizai
cualquieia ue las siguientes opeiaciones.
Bacei clic en el boton uuaiuai touo ue la Baiia ue heiiamientas estnuai.

Bacei clic sobie el men Aichivo y elegii la opcion uuaiuai touo.


Al tenei vaiios uocumentos abieitos es fcil olviuaise ue touas las mouificaciones
hechas en caua uno ue ellos. Bebes tenei mucho cuiuauo al utilizai la opcion guaiuai
touo, ya que en ocasiones es posible no ueseai guaiuai los cambios en touos los
uocumentos mouificauos. Poi ello es conveniente que al piincipio no utilices esta
opcion, al menos hasta que te hayas habituauo a manejai el piogiama. Be touas
foimas, obseiva que cuanuo hay cambios sin guaiuai apaiece un * tias el nombie uel
uocumento


!"L" M: 8*:,'*+ 8E<:7+

Paia que te vayas hacienuo una iuea ue como funciona Bieamweavei, vamos a cieai
una pgina web sencilla, con vaiios estilos ue texto, una imagen y un enlace a otia
pgina. Cieai esta pgina solo te llevai unos pocos minutos, y sabis como tiabajai
con los elementos bsicos con los que estn hechas la mayoiia ue las pginas web. Si
nunca has hecho una pgina web, este es el momento paia uescubiii lo fcil que es.

Lo piimeio que tienes que hacei es abiii Bieamweavei. Ya has visto en la pgina
anteiioi como pueue haceise. Abie un uocumento nuevo y selecciona la Categoiia
Pgina bsica, BTNL, en la columna Biseo uejamos la opcion poi uefectoN
O7:7<$74P"









Seguiuamente, haz clic sobie la zona blanca uel uocumento y esciibe lo siguiente:



0na vez intiouuciuo el texto, vamos a mouificai el titulo y el coloi ue fonuo uel
uocumento.

Paia ello pouemos hacei clic sobie el men Nouificai y elegii la opcion Piopieuaues
ue la pgina.

Entonces se abiii una ventana como la que apaiece a continuacion:


En Coloi ue Fonuo esciibe #CCCCFF, ue este mouo el fonuo uel uocumento pasai a
sei ue coloi azul.

Baz clic en TituloCouificacion a la izquieiua, y en el Titulo esciibe Ni piimeia pgina.

Paia aplicai los cambios, pulsa sobie el boton Aceptai.

Ahoia vamos a inseitai una imagen. Paia inseitai la imagen, hemos ue teneila en la
caipeta uonue estamos cieanuo nuestias pginas, habitualmente en una subcaipeta
ueuicaua a las imgenes.

Nuchas ue las imgenes que vemos en Inteinet se pueuen copiai al uisco uuio. Al
hacei clic con el boton ueiecho uel iaton sobie la imagen que queiemos tiaei ue
Inteinet, se abie una ventana con una opcion similai a uuaiuai imagen como...
(uepenuienuo uel navegauoi que utilices) que peimite giabai uicha imagen en un
ficheio ue nuestio uisco uuio. Ten en cuenta que si piensas publicai la pgina en
Inteinet, hay que iespetai los ueiechos ue autoi ue la imagen.

Copia la imagen que apaiece a continuacion, paia luego pouei inseitaila en la pgina
web que estamos cieanuo. uuiuala en la caipeta uonue vas a guaiuai la pgina que
acabas ue cieai.

Ahoia vamos a inseitai la imagen uebajo ue la segunua linea ue texto. En piimei lugai,
situamos el cuisoi al final ue la segunua linea y cieamos un salto ue linea (tecla
Entei). Bespus nos
uiiigimos al men
Inseitai, opcion Imagen.

En la nueva ventana que apaiece, uebeis buscai la imagen en la caipeta en la que la
habias guaiuauo, seleccionaila y pulsai Aceptai.

Ahoia vas a pasai a cambiai el foimato uel texto. Paia ello necesitas visualizai el
inspectoi ue piopieuaues que se encuentia noimalmente en la paite infeiioi ue la
ventana, y que tiene el siguiente aspecto:


Si no te apaiece, pueues mostiailo a tiavs uel men ventana, opcion Piopieuaues.

Si lo que te ocuiie es que nicamente te apaiece el titulo uel panel, es poique est
contiaiuo. Paia que te apaiezca uesplegauo uebes hacei uoble clic en Piopieuaues.





Selecciona la piimeia linea ue texto. En el inspectoi ue piopieuaues pulsa BTNL y
aplica el foimato Encabezauo 1 (h1) seleccionanuo el valoi Encabezauo1 uel cuauio
Foimato.










Paia cambiai el coloi uel texto cambiamos el panel a las opciones ue estilo, pulsanuo
el icono CSS a la izquieiua.

Neuiante el inspectoi ue piopieuaues en Bieamweavei CSS acceuemos tanto a las
piopieuaues ue CSS como a las piopieuaues ue BTNL.



Pouemos uecii que en una pgina web, BTNL se encaiga ue estiuctuiai el conteniuo,
la infoimacion, mientias que CSS se encaiga ue mostiai ese conteniuo con el foimato
auecuauo.

Al utilizai el inspectoi ue piopieuaues ue CSS, Bieamweavei aplica foimato al texto
meuiante hojas ue estilos en cascaua. Los estilos CSS ofiecen un mayoi contiol sobie
el uiseo ue la pgina Web y ieuucen el tamao uel aichivo.

Selecciona la piimeia linea. En Regla ue uestino selecciona <Nuevo estilo en linea>,
paia aplicai el foimato solo al texto seleccionauo. Tambin aplica el estilo ue Fuente
Aiial, Belvetica, sans-seiif, coloi azul #uu9 y centia el texto, tal y como muestia la
imagen siguiente:



0bseiva que hemos centiauo el texto pulsanuo en el boton


Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en lnea>,
marca los botones para ponerlo en negrita y cursiva respectivamente.


Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el
contenido del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las
propiedades nos aparece la jerarqua de etiquetas. Haz clic sobre p.




Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el prrafo como
hemos visto hasta ahora, pulsando en


Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel
de Propiedades a las propiedades de HTML.

En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:



Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo,
desde la opcin Guardar.

Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por
ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta
que la imagen descargada.

Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.