Gracias a CSS ahora puedes hacer botones de vuelco en Dreamweaver en lugar de insertarlos uno por uno. También mantiene el tamaño bajo en su página ya que no tiene todas sus imágenes. Entonces, ¿cómo se usa CSS para botones de vuelco? Bueno, déjame mostrarte. En esta guía, le mostraré cómo usar colores sólidos para los botones Roll Over.
Botones de vuelco de color sólido en Dreamweaver
Paso 1 – Abra DreamWeaver, crea un nuevo archivo y guárdelo. (Guárdelo como rollover.html)
Paso 2 – Escriba algún texto en el documento. En mi ejemplo, escribí el botón de reinversión.
Paso 3: haga clic derecho en cualquier lugar del documento y haga clic en los estilos CSS> Nuevo. En el cuadro de diálogo, haga lo siguiente:
Tipo selector – clase
Nombre – .RolloverButton
Define en – esto Solo documento
(ver imagen 1)
Luego haga clic en Aceptar
Paso 4 – Aparecerá un nuevo cuadro de diálogo. Aquí es donde harás tus botones. Enumeré cada categoría y qué poner en cada categoría. Entre paréntesis pondré lo que elegí en mi ejemplo para darle una idea.
Categoría – escriba
Font – – – – – Elige tu fuente. (Verdana)
tamaño – Elija el tamaño de su fuente. (14)
Peso – Elija si desea la fuente en negrita, normal, etc. (normal)
estilo – Elija si desea la fuente de cursiva, Normal, etc. (normal)
Decoración – Elija si desea subrayar, superar, etc. (ninguno)
Color – Elija el color de su fuente . (#Ffffff)
(ver imagen 2)
Categoría – Fondo
Color de fondo – Elija el color que quieres que sea tu botón. (#006699)
(ver imagen 3)
Categoría – bloque
No es necesario hacer nada en el bloque Categoría.
Categoría – Box
Width – Elija cuán ancho desea que sea su botón. (100)
Altura – Elija cuán alto desea que sea su botón. (20)
(ver imagen 4)
Categoría – borde
estilo – Elija el estilo de su borde . (Sólido)
Ancho – Elija cuán ancho desee su borde. (1 píxeles)
Color – Elija el color de su borde. (Negro #000000)
(ver imagen 5)
No necesita meterse con ninguna de las otras categorías. Una vez que haya terminado con los pasos de arriba, haga clic en Aceptar.
Paso 5: resalte sobre su texto que escribió en el documento, escriba un enlace en el campo de enlace en la ventana de su propiedad.
Paso 6: con el texto aún resaltado, haga clic en el cuadro desplegable al lado de los estilos en la ventana de sus propiedades y elija el botón de transferencia. Ahora debería ver su botón.
Ahora necesitamos hacer la parte de transferencia para el botón.
Paso 7: haga clic derecho en cualquier lugar del documento y haga clic en los estilos CSS> Nuevo. En el cuadro de diálogo, haga lo siguiente:
Tipo selector – Avance
selector – a.rolloverbutton: hover
Definir en </b > – Solo este documento
(ver imagen 6)
luego haga clic en Aceptar.
Paso 8 – Aparecerá un nuevo cuadro de diálogo con todas las categorías en el panel izquierdo. Haga clic en el fondo y cambie el color del fondo. Elegí #009900 – Verde. Haga clic en Aceptar una vez que haya terminado eso.
(ver imagen 7)
Paso 9 – En la parte superior de su ventana Dreamweaver, haga clic en Archivo> Guardar. Para guardar su documento.
Paso 10 – Ahora presione F12 para obtener una vista previa de su botón en un navegador.
(ver la imagen 8 para obtener los resultados finales)
y eso es todo lo que tiene que hacer para hacer un botón de transferencia de color sólido en DreamWeaver usando CSS. Para hacer más botones, simplemente presione Entrar, escriba el texto, resáltelo, enlace y elija el estilo de reinversión para el texto.
