Formato CSS

Qué es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Para qué sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

¿Cómo funciona?

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Imagen de susutitucion de dreamweaver 28/03/2017

Imagen de sustitución.  Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas. La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.  Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución. Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.

Características de una pagina web efectiva 7/03/2017

Investigar cuales son las propiedades de las paginas web efectivas y que significa en las paginas web que sean coherentes.

CARACTERÍSTICAS DE UNA PÁGINA WEB EFECTIVA

1.- Diseño y estética: Una página web limpia y atractiva, adaptada a las nuevas tendencias de estilos y donde quede claro al usuario desde un comienzo de qué va la página web en la que acaba de entrar. La coherencia de colores, la sencillez y el equilibro aquí son factores importantes. Evita

2.- Usabilidad: Pónselo fácil a tus usuarios y haz que la navegación por tu página web sea sencilla y clara. Vamos, que encuentren lo que están buscando sin dar muchas vueltas. No intentes hacerles pensar con acertijos y metáforas o nunca conseguirás llevarles a donde tú quieres. Lo mejor es que seas lo más explícito posible, los menús estén a la vista y no escondas los apartados de importancia.

3.- Buen contenido:  Y para esto, lo más adecuado es que crear un blog para poder llevar una continuidad de creación de contenidos. Da lo que busca el usuario, no lo que buscas tú. Es importante que dejes el ego a un lado cuando estés creando un nuevo proyecto y te centres en lo que necesitan ellos, no tú.

4.- Optimización SEO: Para que lleguen a tu página web tienes la opción de ponérselo fácil a los buscadores para que muestren tus resultados de forma gratuita. Eso si, debes saber cómo hacerlo. Así que, o inviertes (tiempo y dinero) en tu formación o pagas a alguien para que se encargue de ello.

5.- Conexión con tus redes sociales: Es importante que tengas enlazadas las cuentas de redes sociales en tu página web, para que, a golpe de click tus usuarios puedan conectar contigo y decirte lo que deseen. 

6.- Suscriptores

7.- Analítica

¿QUE SIGNIFICA EN LAS PÁGINAS WEB QUE SEAN COHERENTES?

 Significa que a lo largo del sitio sea idéntico Que tenga sentido en lo que dicen.

Sitio Dreamweaver 28/02/2017

Sitio Dreamweaver
La habilidad de manejar ciertas paginas en conjunto radica esencialmente en que se ubiquen en un solo sitio tomando en cuenta que con DW podemos generar sitios web es importante reconocer la generación de un sitio especial para diseñar un sitio web, este sitio recibirá el nombre sitio DW y servirá para ordenar la info e impedir que la computadora se confunda, cuando generamos un sitio esta compuesta de : texto,imágenes ,videos , link ,esta info tiene que estar ordenada.

Como se hace un sitio dreamweaver
1.-Estar dentro de dreamweaver
Para colocar un fondo en una página web hay que contemplar el tamaño de la imagen ya que si es muy pequeña se presentara como mosaico, en términos generales se pueden colocar de dos formas un fondo_
1.-Mediante un formato HTML : va a ser una forma común y corriente en la que se presentara sin ningún formato,sin características especiales
2.-Un formato CSS:podremos adecuar la imagen con un formato en especial .

Para poner un fondo de una pagina web debes de tener en cuenta lo siguiente:
1.-La imagen debe ser grande para que abarque la mayor parte de la pagina
2.-No deberá contar con texto o de lo contrario nos se podrá leer lo que escribas en tu pagina
3.-No tiene que ser demasiado llamativo
4.-Buscar colores y fondos adecuados a la temática de la información
5.-Recordar que hay que tomar en cuanta la coherencia de la pagina
6.-El donde no puede ser mas importante que la información

EN las paginas web se pueden medir,cuando se trata de imagenes se trabaja con pixeles y porcentaje.El porcentaje se  refiere al espacio que ocupa el objeto de la pagina dentro de un navegador.

como hacer tablas 14/02/2017

COMO HACER TABLAS DW
14/02/2017

Las tablas son una herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de añadir estructura vertical y horizontal a una página. Utilice las tablas para presentar datos tabulares, diseñar columnas o disponer texto o gráficos en una página Web. Podrá agregar contenido; añadir, eliminar, dividir y combinar filas y columnas; modificar las propiedades de tablas, de filas o de celdas para añadir color y alineaciones, así como copiar y pegar celdas.

Las tablas constan de tres componentes básicos:

• Filas: Espacio horizontal.
• Columnas: Espacio vertical.
• Celdas: Los contenedores que se originan en las intersecciones de las filas y las columnas.
  

  

Insertar una tabla

Para insertar una tabla:

1. Lleve a cabo una de estas operaciones:

• Sitúe el punto de inserción en el lugar de la ventana de documento donde desea que aparezca la tabla y haga clic en el botón Tabla  de la categoría Común, en el panel Objetos, o elija Insertar > Tabla.
  
• Arrastre el botón Tabla desde el panel Objetos hasta la posición deseada de la página.
  En ambos casos aparecerá el cuadro de diálogo "Insertar tabla".

2. Acepte los valores actuales de este cuadro de diálogo o escriba otros nuevos.
   

• En el campo Filas, especifique el número de filas de la tabla.
  
• En el campo Columnas, especifique el número de columnas de la tabla.
  
• En el campo relleno de celda, especifique el número de píxeles que habrá entre el contenido de la celda y el límite de ésta. El valor predeterminado de relleno es 1 píxel. Introduzca 0 para especificar que no desea relleno. 
  
• En el campo espacio de celda, especifique el número de píxeles que debe haber entre las celdas de la tabla. El valor predeterminado es 2 píxeles. Introduzca 0 para especificar que no desea espaciado.
  
• En el campo ancho, especifique el ancho de la tabla como un número de píxeles o como porcentaje de la ventana del navegador.
  
• En el campo borde, especifique el ancho en píxeles del borde de la tabla. Introduzca cero (0) si no desea que la tabla tenga borde. 

3. Haga clic en Aceptar para crear la tabla.

DREAMWEAVER 28/02/2017

Pantalla Dreamweaver
Para abrir un nuevo documento se pone archivo>nuevo.Nos permite utilizar varios tipos de página como HTML, javascript,etc.DW tiene la habilidad de mostrar tanto la parte de diseño como la parte de código, se dice que Dw es un programa de auto edición  o sea que permite programar en código y automáticamente crea la pestaña de diseño o viceversaPara poder restaurar se da click en ventana y luego en diseño del espacio de trabajo y luego en restablecer clásico.

En las paginas web existen algo que se llama LINK que es una conexión que va a permitir enlazar un documento una pagina de 2 maneras ya sea interna o externa, interna cuando es del mismo sitio y externo cuando están fuera del sitio.Esos links se categorizan de 2 formas:

1.-A partir de las rutas que toman: existen 2 tipos de rutas ,rutas relativas o rutas absolutas.Las relativas por lo general siempre se hace relativa a un sitio y las absolutas son una ruta larga y completa.

Dreamweaver

DREAMWEAVER

Nace en 1997,en aquel entonces se empezaron a crear varias paginas web,sacando provecho al internet.Dado esto las personas empezaron a ir despacio con las inversiones en las paginas web;la gente seguía buscando algo que le permitiera crear paginas web decentes que llamaran la atención.

Quien presento la primera propuesta de esta aplicación fue una compañía llamada "macromedia",esta era una empresa que su principal objetivo era crear aplicaciones.ellos hacian ILEARNING
Macromedia con el tiempo noto que si se asociaba con empresas tendría mas exito,por esto se junto con W3C.Al juntarse con ellos notan que pueden hacer un programa HTML.Al darse cuenta que con esto genera mas clientes crea por fin "dream weaver" que trajo consigo:fireworks,flash,coldfusion.

La empresa que se empieza a interesar por macromedia es adobe.macromedia tenia una buena ganancia pero al darse cuenta que una empresa tan grande se intereso en ellos no lo dudo y se vendio macromedia a adobe.
BRIDGE es un puente que conecta diferentes programas.

El problema actual de adobe es flash ya que no se necesita demasiado para los usuarios.


DREAM WEAVER es capas de manipular varios tipos de archivos,esto se parece a la aplicación KOMODO.Dream es multi-plataforma y esto quiere decir que hay diferentes tipos de programas con los que se pueden trabajar.
PHP:es un lenguaje que permite obtener información de una base de datos.
CSS:es en donde algunos se basan en modificar los aspectos de una pagina web.


Para crear un nuevo archivo siempre es en "archivo" en la parte superior izquierda,tambien es ahi para guardar algún trabajo.
primera columna:
segunda columna:en esta se elige el diseño
despues de haber elegido alguna opción le das "crear"

Dream tiene la habilidad de mostrar tanto la parte de diseño como la parte de código,dado esto se dice que dream es un programa de auto edición,esto es aquel programa que permite programar en código y de manera automática va a diseñar la pestaña de código.Al tener 3 pestañas:codigo,dividir,diseño;se tiene que tener cuidado ya que cuando estas trabajando no se oculten las columnas o algo parecido.