CSS: Partes de las cajas.


El modelo de cajas es la  característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web.

El “box model” es el comportamiento de CSS que hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las cajas.

modelo de cajas CSS

Cada una de las cajas está formada por seis partes:

Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)

Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

Borde (border): línea que encierra completamente el contenido y su relleno.

Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.

Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

Publicado en Apuntes DWM, CSS, Definiciones, Diseño Web y Multimedia | Deja un comentario

CSS: link


para darle estilo a una página web tienes que enlazar todas esas páginas con el código html con la hoja de estilo. Para ello utilizaremos este link

<link rel=”stylesheet”type/css”href=”/aquí ponemos la ruta hacia la carpeta donde la hemos guardado.css”/>

que pondremos al comienzo de toas las hojas html.

Publicado en Apuntes DWM, CSS, Diseño Web y Multimedia, XHTML | Deja un comentario

XHTML: enlaces


Quizás seas como yo y entiendas más con la práctica que con el texto, asi que así pondré estos apuntes de los enlaces mas habituales:

Enlace al inicio del sitio web

<a href=”/”>inicio</a>

Enlace a un email

<a href=”mailto:nombre@gmail.er”title=direccion de email para solicitar mas informacion”> Solicita mas informacion</a>

Enlace a una archivo ftp

en vez de http:// cambia a ftp://

 

Publicado en Apuntes DWM, Diseño Web y Multimedia, XHTML | Etiquetado | Deja un comentario

photoshop,Guardar foto para web


Uso de photoshop por pasos.

    1. Primer paso
  • Voy al navegador y busco una foto grande aprox 1024 px
  • la guardo en fotos_internet
      Segundo paso
  • Abro photoshop
  • Archivo/ abrir/ busco la foto grande
  • Archivo guardar para web
    1. tipo de archivo: jpg/gif/png
    2. medidas foto: ancho x:. a 400 px
    3. guardar en : la carpeta de imágenes de mi web
      Tercer paso
  • hago un documento HTML con el ejercicio y en él que añado las fotos tanto grande, como la que he guardado para web
  • Foto original internet a 1024px

flor dalia 1024px

  • Foto guardada para web a 400 px
  •  

Publicado en Apuntes DWM, Diseño Web y Multimedia, imagenes | Etiquetado , | Deja un comentario

XHTML: documento base


Este documento base tendremos que ponerlo en todas las hojas de html que hagamos.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
<head>

<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />

<title>Título de la web</title>

</head>

<body>
<p>Aquí va el contenido</p>
</body>

</html>

Publicado en Apuntes DWM, XHTML | Etiquetado | Deja un comentario

FTP: lo necesario


Datos necesarios para realizar una conexión FTP

Para realizar una conexión FTP necesitará tener la siguiente información:

1. Nombre del servidor FTP que es el nombre de su dominio sin ‘www’, ‘ftp’ ni ningún otro prefijo.
Por ejemplo, si el nombre de su dominio es http://www.1and1faqs.es, su nombre de servidor FTP es ’1and1faqs.es’
2. Nombre de Usuario
3. Contraseña

Este enlace nos  da un ejemplo de como se puede subir tu página a intenet con Dreamweaver: maestros del web

 

Publicado en Apuntes DWM, Diseño Web y Multimedia, FTP, internet | Etiquetado , | Deja un comentario

Ejercicio: mapa de google para contacto.


Una novedad cuando hablamos de web es el hecho de insertar un mapa con n uiestra ubicación en nuestra página web. De esta manera a nuestros “clientes” les sería mucho más sencillo contactar con nosotros. Googlemaps nos ofrece ese servicio, pongo ejemplo:

Publicado en Apuntes DWM, Diseño Web y Multimedia, imagenes | Etiquetado , | Deja un comentario

CSS: glosario básico


CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.

estilo basico css

Los diferentes términos se definen a continuación:
▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está
compuesta de una parte de “selectores”, un símbolo de “llave de apertura” ({), otra parte
denominada “declaración” y por último, un símbolo de “llave de cierre” (}).
▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
▪ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o
más propiedades CSS.
▪ Propiedad: permite modificar el aspecto de una característica del elemento.
▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos
selectores y cada declaración puede estar formada por un número infinito de pares propiedad/
valor.

Publicado en Apuntes DWM | Deja un comentario

CSS: Incluir CSS en un documento XHTML


Existen tres opciones para incluir CSS en un documento XHTML:

1.Incluir CSS en el mismo documento HTML:

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la
sección <head>).

2. Definir CSS en un archivo externo:

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML
enlazan mediante la etiqueta <link>.Un archivo de tipo CSS no es más que un archivo simple de
texto cuya extensión es .css

Para incluir un archivo CSS externo , se deben seguir los siguientes pasos:

1) Se crea un archivo de texto y se le añade solamente el siguiente contenido:
p { color: black; font-family: Verdana; }
2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a
que el archivo tenga extensión .css y no .txt
3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css” media=”screen” />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Este modo es el que utilizaremos para hacer la pagina web.

3. Incluir CSS en los elementos HTML:

Este es el peor y el menos utilizado,ya que tiene los mismos problemas que la utilización de las etiquetas <font>. No lo utilizaremos

informacion del libro de apuntes

Publicado en Apuntes DWM, CSS | Etiquetado , | Deja un comentario

XHTML: divisiones


Casi todos los diseñadores web utilizan la palabra “capa” para referirse a una “división”. Aunque se trata de un error es preferible seguir llamando “capas” a las zonas definidas con la etiqueta <div> para poder entenderse con el resto de diseñadores.
Las páginas web complejas que están bien diseñadas utilizan decenas de etiquetas <div>. Con mucha diferencia, los atributos más utilizados con esta etiqueta son id (para identificar la capa de forma única) y class (para aplicar a la capa estilos CSS)..

Ejemplo de la etiqueta div:

<html>
<head> <title> Razas potencialmente peligrosas </title> </head>
<body>
<div id=”contenedor”> </div>
<div id=”publicidad”> </div>
<div id=”menu”> </div>
<div id=”contenido”> </div>
<div id=”pie”> </div>
</div>
</body>
</html>

Publicado en Apuntes DWM, XHTML | Etiquetado | 1 Comentario