Nvu Unidade 5

NVU    INTRODUCCIÓN ÁS FOLLAS DE ESTILO     Vamos a ver qué son as follas de estilos e cómo usalas para dotar ós documentos  que creemos dunha aparencia personalizada. É importante que saibamos que para  poder sacarlles todo o partido posible ás follas de estilos, temos que ter certos  coñecementos da linguaxe HTML.   Unha folla de estilos ou CSS ("Cascade Style Sheet"), é un conxunto de regras e  características que, aplicadas a unha páxina Web ou a un conxunto delas, poden  modificar a súa aparencia. Desta forma, podemos separar en certa forma o deseño da  páxina do seu contido.   Gracias ás follas de estilos podemos de algunha maneira homoxeneizar e  automatizar o traballo que supón o deseño dunha Web. Podemos definir un estilo para  os títulos e outro para o texto, de forma que non teñamos que modificar cada vez o  texto e os títulos para que teñan a aparencia que queiramos.   Unha folla de estilos pode estar contida na mesma páxina onde se utiliza ou pode  estar definida nun arquivo aparte. Da segunda forma, podemos definir estilos para  todo o sitio Web, mentres que da primeira teremos que escribir o mesmo código en  cada páxina cada vez que o necesitemos. Por iso a primeira se utiliza cando se quere  aplicar algún efecto en particular e a segunda cando ese efecto é o mesmo para todas  as páxinas. Existe unha terceira posibilidade, e é especificar o estilo na propia etiqueta  HTML onde queiramos usalo, co que o efecto só se producirá nese lugar.   Isto implica coñecer código HTML e as propiedades que queiramos cambiar. Isto  teríamos que repetilo para cada elemento do texto cuxo estilo desexamos cambiar.  Por elo, ó ser pouco eficiente, úsase a primeira forma ou a segunda, antes  mencionadas.   Estas formas tamén requiren coñecer HTML. Por elo NVU nos facilita o uso de  estilos por medio das plantillas, que nos permite usar follas de estilo con poucos  coñecementos de HTML.         

1

NVU  FOLLAS DE ESTILO      CREAR FOLLAS DE ESTILO     NVU dispón dun editor de follas de estilo denominado CaScadeS. CaScadeS pode  ser utilizado para producir tanto follas de estilo internas como externas. A diferenza  dos estilos incrustados, as follas de estilo internas ou externas axudan a manter  separadas a información do contido da do estilo.  Para proporcionar estilo ó documento html que se edita, CaScadeS pode iniciarse  facendo clic no menú Ferramentas e seleccionando Editor CSS, aparecendo a seguinte  ventá a continuación.   

    CaScadeS permite dous modos de edición de follas de estilo:     1. Modo para principiantes: este modo permite crear regras asociadas a  selectores de clase ou selectores de tipo de elemento.   2. Modo avanzado: este modo permite crear regras sen restriccións.     En caso de que no haxa folla de estilo, se creará unha nova automaticamente. Ó  usar CaScadeS, pódense crear tanto follas de estilo internas como externas. Para crear  unha folla de estilo interna:      

2

NVU  1. Faremos clic no botón de elemento <style>.   •

(Opcional) Rellenaremos a información sobre Lista de medios e Título da  folla de estilo.  

  2. Faremos clic en Crear folla de estilo.    

    Para crear unha folla de estilo externa:     1. Faremos clic no botón de elemento .     2. Escribiremos a URL da folla de estilo no panel da dereita. Se non existe xa,  crearase un novo ficheiro no sistema de arquivos local.     •

(Opcional) Rellenaremos la información sobre Lista de medios e Título  da folla de estilo.  

  3. Activaremos comprobar ó crear unha folla de estilo alternativa se esta é unha  alternativa.     Consello: gardaremos sempre o documento html antes de agregar unha folla de  estilo local. Gardaremos tamén o documento inmediatamente antes de pechar o  editor CSS.    

3

NVU  Consello: utilizaremos o botón Recargar do panel da esquerda se a folla de estilo  non se descarga inmediatamente.      CREAR REGRAS DE ESTILO     Despois de crear unha ou máis follas de estilo para o documento html, pódense  crear regras para cada folla de estilo de forma individual. Para usar unha folla de  estilos concreta ó crear ou modificar regras, selecciónaa no panel da esquerda facendo  clic sobre ela co botón esquerdo do rato. O panel da dereita mostrará entonces os  detalles da folla de estilo na pestana Xeral. Para crear regras novas:     1. Faremos clic no botón Regra do panel da esquerda.  

    2. O panel da dereita mostrará opcións para especificar o tipo de regra a crear.  Elixiremos unha entre as seguintes:  

 

•

estilo con nome (introduza abaixo o nome da clase)  

•

estilo aplicado a todos os elementos do tipo (introduza o tipo abaixo)  

•

estilo aplicado a todos os elementos coincidentes con este selector  

4

NVU    3. Rellenaremos o nome da regra.   4. Faremos clic en Crear regra de estilo: As regras poden ser definidas usando as  pestanas de estilo (Texto, Fondo, Bordes, Caixa, Aural) do panel da dereita.  Para ver todas as definicións dunha regra de estilo, seleccionaremos no panel  da esquerda e faremos clic na pestana Xeral do panel da dereita. A pestana  Xeral mostrará todas as definicións aplicadas á regra. 

    APLICAR ESTILOS    Para aplicar un estilo seleccione o obxecto ó cal se lle quere aplicar o estilo e  seleccionar na barra de formato o estilo que se quere aplicar como se amosa na imaxe  a continuación. 

 

5

NVU 

      EXERCICIO:     Vamos a asignar a continuación unha folla de estilos a unha páxina Web que  vamos a crear a modo de exemplo.   

    En primeiro lugar creamos unha páxina Web calquera como a do exemplo que se  amosa na parte superior, a continuación a gardamos na nosa carpeta “webtic”, co  nome “index.html”.   A continuación crearemos a nosa folla de estilos, para elo despregaremos o  menú Ferramentas >> Editor CSS nun documento baleiro. Faremos clic no botón  <Style> e lle damos nome ó Título por exemplo “regla” e logo pulsaremos no botón  Crear folla de estilo (así crease unha folla de estilo interna).  

 

6

NVU  Agora podemos poñer os estilos que queiramos utilizando o botón Regra (lle  damos o nome regra1). Lle asignamos os estilos propios, lle cambiamos a cor ó fondo...  (elixiremos a letra persoal batavia, de color vermello e cun fondo amarelo, tal e como  se amosa na imaxe seguinte.   

    Unha vez seleccionadas as opcións elixidas, marcamos co rato na ventá da  esquerda “hoja de estilos interna” e faremos clic no botón Exportar folla de estilo e  cambiar a versión exportada. Lle asignaremos o nome ó arquivo “hojaestilo.css”  (¡¡¡Ollo!!!, hai que poñerlle a extensión css ó arquivo). 

 

7

NVU 

    Agora o único que nos queda é enlazar a páxina “index.html” coa folla de estilos  que acabamos de crear “hojaestilo.css”, para elo abriremos en NVU o index.html e  despregaremos do menú Ferramentas >> Editor CSS e na ventá que se abre faremos  clic en  e eliximos o arquivo que queremos enlazar, no noso caso a fola de  estilos.   Neste caso, en NVU aparece a ruta absoluta  file:///C:/Documents%20and%20Settings/Equipo/Mis%20documentos/webtic/hojaesti lo.css. Para que se quede hojaestilo.css no proceso de carga do arquivo lle teremos  que borrar a ruta e quedarnos co nome do arquivo unicamente. Por último faremos  clic en Crear folla de estilo.   

 

8

NVU 

    Pois xa temos feito case todo o traballo, para aplicar a nosa folla de estilo,  seleccionamos o texto da Web ó que llo queiramos aplicar e elixir a regra1 a asignar.   

    Quedándonos a Web como observamos a continuación.   

     

 

9