En mi última guía te mostré cómo hacer botones de vuelco sólidos en Dreamweaver usando CSS. En esta guía le mostraré cómo hacer botones de vuelco usando imágenes con CSS. Antes de comenzar, debe encontrar un botón que desee usar. Puede encontrar botones gratis o puede usar fuegos artificiales y crear sus propios botones. Si elige obtener botones gratis de Internet, asegúrese de obtener dos botones. Uno para su botón principal y otro para su botón de reinicia. Bueno, lo mismo ocurre con los fuegos artificiales, debes hacer dos botones. Continúe y obtenga sus botones y guárdelos en su disco duro antes de comenzar.
Botones de transferencia de imagen
Paso 1 – Abra su programa Dreamweaver, cree un archivo nuevo, y guárdelo. ( Guárdelo como newrollover.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 el documento y haga clic en los estilos CSS> Nuevo. En el cuadro de diálogo, haga lo siguiente:
Tipo selector – clase
Nombre – .RolloverButton (no olvide el período frente a la “r” )
Definir en – solo este 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.
Categoría – Tipo
Font – Elija la fuente para su botón. (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 . (Negro)
( Ver imagen 2 )
Categoría – en segundo plano < /P>
Imagen de fondo – haga clic en Examinar para localizar el botón en su disco duro que desea usar. Este será el botón que se muestra en su página, no el botón de transferencia.
repetir – Elija no repetir
( ver la imagen 3 )
Categoría – bloque < /i>
Display – Seleccione “bloque”
( Vea la imagen 4 )
<< P> Categoría – Box
ancho – en el campo de ancho que necesita escribir En cuánto tiempo es tu botón. (152)
Altura – En el campo de altura debe escribir cuán alto es su botón. (27)
( Vea la 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.
Nota: si su texto no está en el medio del botón, deberá jugar con el relleno en el panel CSS. En mi ejemplo, utilicé el relleno a la izquierda: 12 píxeles y la parte superior del acolchado – 4 píxeles para obtener mi texto en el medio del botón.
Ahora necesitamos hacer la parte de vuelta del botón.
Paso 7: haga clic derecho en cualquier lugar en su documento DreamWeaver y haga clic en CSS Styles> 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 todos los Categorías en el panel izquierdo. Cambie su imagen de fondo haciendo clic en Examinar. Localice el botón en su disco duro que desea usar para su vuelco. Haga clic en Aceptar una vez que haya terminado eso.
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.
( Vea la imagen 7 para ver los resultados finales )
Acabas de crear un botón de transferencia de imagen en DreamWeaver usando CSS. Es posible que deba realizar cambios en el color de la fuente dependiendo del color de su botón. Eso se puede hacer haciendo clic derecho en el documento y haciendo clic en CSS> Editar y puede editar cuál necesita.
