Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3
INB Português Fórum
BEM - vindo a indústria nativa e "boffin") Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito "boffin" VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com
INB Português Fórum
BEM - vindo a indústria nativa e "boffin") Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito "boffin" VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com
INB Português Fórum

BEM - vindo a indústria nativa e boffin) Da era industrial, aqui está cheio de espírito de Luta, Ambos através Da rede espaço biológico nativo espírito boffin VEIO a mad labs.Casa inbforum.com, Nome Definitivo: inb-english.forumotion.com


Você não está conectado. Conecte-se ou registre-se

《《《《《《《上一页INBforum   Ir para baixo

上一页INBforum》》》》》》》Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

1Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Empty Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Qua Jan 19, 2011 11:45 pm

Admin

Admin
Admin
Creacion de Hojas de Estilo CSS con Dreamweaver




Compartir Tutorial


Tutorial por Jorge Oyhenard (elQuique)

En este tutorial, elQuique nos muestra el uso de Hojas de Estilo CSS, para dar forma y color a nuestras web, lo hace utilizando código y/o menú de Dreamweaver sin usar código.
El CSS permite dar forma, color, y posicion a los elementos HTML de nuestras paginas web, la siguiente es una pequeña guuia de, manejo de CSS utilizando Dreamweaver CS3. Tambien es posible con versiones anteriores.
Supongamos que hemos creado el siguiente CSS:
.letragrande a:link {
color: #FF9900;
background-color: #FFFFFF;
}
.letragrande a:hover {
color: #FFFFFF;
background-color: #FF9900;
}
.letragrande a:active {
color: #CCCCCC;
background-color: #FFCC66;
}
.letragrande a:visited {
color: #FF9900;
background-color: #FF9900;
}

Esto define un estilo, llamado .letragrande que tendra diferentes colores para los enlaces, segun sean, enlace comun (link), un enlace con el mouse encima (hover), un enlace activo (active), un enlace visitado (visited), de esta forma le damos un color a cada tipo de enlace con solo aplicar esto asi:<a href="cualquiera.html" class="letragrande">ir a cualquier lado</a>

Esta es para quienes comienzan, una de las formas mas utiizadas, o sea colorear links o enlaces, la siguiente es la forma en que se podrian colorear otros elementos, como veremos esto aplicado a una tabla.
Comenzaremos utilizando el Menu de Dreamweaver, para en principio no utilizar codigo, y seria asi:
1) Insertamos una tabla, con Insert (insertar), Table (tabla) o bien con el Icono de Tablas si lo tenemos activo en Dreamweaver
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Insertartabla3x3

2) Definimos las propiedades en este caso 3 x 3
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Propiedadestabla

El codigo generado de la tabla sera este:<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>


3) Adentro le puedes escribir cualquier texto y demas
4) Con respecto a la forma es mejor cambiarla por un CSS separado, o sea que no lo agregues dentro del html (si bien se puede), de manera directa. Por ejemplo veamos:
Le vamos a dar un tipo de fuente y color a todo el documento comprendido dentro de la etiqueta bodybody {
font: bold 12px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}


Le vamos a dar un borde de color rojo a toda la tabla. Como es generica (por usar la palabra clave html table como nombre) se aplicara a todas las tablas.table {
border: 1px solid #FF0000;
}


Para que no quede amontonado le daremos un espaciado de 10px a el contenido de las celdas. Tambien se aplicara a todas las celdas por usa la palabra clave html tdtd {
padding: 10px;
}

Ahora veamos de aplicar solo a algunas partes, para esto anteponemos un nombre de clase a la palabra html que vamos a afectar, por ejemplo:
.rojo td {
background: #FF0000;
}

afectara a las celdas, por ser el html td, pero unicamente a las que le aplique la clase llamda .rojo
Si queremos que al pasar por encima quede un poco mas claro esa celda, usamos hover, asi:
.rojo td:hover {
background: #FF6699;
}

Y asi podemos hacer clase .verde y .azul para el estado normal y para el estado hover asi:.azul td {
background: #000099;
}.azul td:hover {
background: #0099CC;
}
.verde td {
background: #009966;
}
.verde td:hover {
background: #00FF99;
}

El resultado es este, click para verlo funcionando.
Si creas una hoja de estilo aparte en un archivo aparte, asi como yo hice estilo.css, la insertas seleccionando abajo:
Style (Estilo), Attach Style Sheet (Adjuntar Hoja de Estilo), y la eliges con Browse, como muestra la imagen:
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Adjuntarhojaestilo

De esa forma automticamente la tabla que en la imagen se ve sin estilo, tomara el estilo apropiado indicado por la hoja de estilo CSS. Lo bueno de hacerlo asi separado es que puedes tener estilo1.css, estilo2.css y varias que aplicandolas cambian tu sitio web. SIN HACERLO DE NUEVO le cambias la piel y el contenido sera e mismo, esa es la ventaja de separar el contenido del diseño, mediante CSS.
Para aplicar un estilo con Dreamweaver solo debes seleccionar el elemento html, ahi en la imagen se ve como selecciono <tr> y le aplico la clase rojo, quedando <tr.rojo>
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Aplicarestilo

Haz lo mismo con las otras dos filas, aplicando azul y verde. Esto tambien se puede hacer a puro codigo (como lo hago yo), asignando al tr correspondiente el codigo CSS asi: (escribiendo en modo vista de codigo)
<tr class="rojo"> que es el mismo efecto que se consigue por menu, si miras el codigo ahora
Por ultimo nos queda ver como evitar escribir codigo CSS, si bien yo lo hice escribiendo a todo el codigo css como este:table {
border: 1px solid #FF0000;
}


En la opción Windows (ventana), CSS Styles (Estilos CSS) o Shift F11, hacemos aparecer la Ventana de CSS, en ella podemos editar uno de los estilos que aparecen listados, estos son los mismos de nuestro archivo estilo.css
Simplemente seleccionamos un estilo, por ejemplo .rojo td y damos editar, que es el icono del lápiz marcado con el numero 2 en mi imagen
Podemos también agregar nuevos icono 1, y eliminar icono 3
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Editarcss

La edición se puede hacer directo, seleccionando y modificando las propiedades abajo en Properties (Propidades), como muestra la imagen, o con el icono editar y modificando los datos en el formulario lo cual es mas intuitivo:
Tutoriais Flash Manejo de Hojas de Estilo CSS con Dreamweaver CS3 Editarcssformulario

Type: se refiere a las fuentes
Background: se refiere al fondo
Box: a los elementos como espaciados de una zona cualquiera, margenes, ancho, alto, etc
Border: se refiere al borde, estilo (punteado, lines, solido, etc), el ancho del borde, y el color
Nota: use una tabla como ejercicio, recuerden que las tablas son para tabular datos como listados y reportes de información, no para maquetar una web o sea acomodar el diseño o un menú, etc. Para eso se usan otros elementos del HTML y CSS.]

http://pt.inbforum.com

上一页INBforum   Ir para baixo

上一页INBforumVer o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Criar fórum | ©phpBB | Fórum gratuito de ajuda | Denunciar um abuso | Criar um fórum