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.