lunes, 23 de julio de 2018

PAGINA SLIDER BOOTSTRAP


CAROUSEL RESPONSIVO USANDO 

BOOTSTRAP EN DREAMWEAVER CC


PASO1: primero debemos crear un sitio en dentro de una carpeta luego, estando en Dreamweaver clic en file/new/html/boostrap/ luego créate.



 Luego de haber creado nuestro sitio y haber echo el paso 1: nuestro Bootstrap se guardará dentro del sitio creado, viniendo condigo lo siguiente:



PASO2: después nos vamos a menú insert/Bootstrap components/carousel, luego nos abrirá códigos ya creados, donde se modificará añadiendo imagen y darle un tipo de ajuste:



RESULTADO:  Es un carousel o un slider donde estas imágenes van a realizar un cambio con
un movimiento automático .






 RESULTADO:  Realizar un slider  en DreamweaberCC (una versión mas avanzada de Dreamweaber cs6 ) es una de las opciones que ofrece este mismo programa para poder crear nuestro slider en códigos  y a nuestro gusto , es mas rápida de elaborar  un ya que nos muestra una idea de slider al elegir de modo carrusel(carousel) .



--------> ARCHIVO CLIC AQUÍ




HTML/CSS


HTML/CSS

HTML/css

(navegación)



html5 y en conjunto con CSS3, define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).


Menú vertical:  crearemos menú vertical con HTML y css (hoja de estilo), para ello tendremos que abrir nuestro programa Dreamweaver o el que guste para elabora una página, ya teniendo abierto nuestro programa empezamos a digitar su contenido, en este caso tendremos menús:

Y aquí se muestra como es que se observa nuestro menú vertical en el navegador de Google:



PASO2:  ahora vamos añadir hoja de estilos, externa y para que vea la hoja de estilo solo de damos una ruta o dirección en <head>, y comenzamos a darle estilo a nuestro menú con código en la hoja de estilo:




 RESULTADO:  Y el resultado que nos mostrara en el navegador Google después que hayamos hecho lo anterior es el siguiente:


Menú Horizontal:  luego de haber echo nuestro menú vertical, ahora haremos algo similar, pero en forma horizontal, y para ello cambiaremos unos códigos en nuestra hoja de estilos:

 RESULTADO:  Y el resultado que nos mostrara en el navegador Google después que hayamos hecho los cambios correspondientes es el siguiente:


PAGINA CULTURE_BBC

PASO1: abriremos nuestro programa Dreamweaver para luego codificar nuestro contenido, donde habrá diferentes etiquetas:



PASO2: luego de haber escritos los códigos necesarios para poder construir y obtener nuestro objetivo, se añade una hoja de estilos que estará de forma externa dentro de una carpeta.





PASO3: luego de haber ya enlazado ala hoja de estilos, solo añadiremos códigos para que darle un estilo distinto a nuestra página:





RESULTADO:  Y el resultado final después de haber realizado lo necesario es el siguiente:


------> ARCHIVOS CLIC AQUÍ

--------->  BBC CULTURE




CSS



CSS




CSS :El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C(World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

html5 y en conjunto con CSS3, define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).





EJEMPLO_CSS

PASO1: Primero abrimos nuestro programa de Dreamweaver, aquí crearemos un contenido y lo guardaremos como index.html dentro de una carpeta que hayamos creado, esto es nuestro contenido:


        Así se observa en el navegador de Google:


PASO2: Ya haber hecho nuestro contenido vamos añadir una hoja de estilo    style/css dentro de <head>, nuestra hoja de estilo será interna, en la misma página principal, esta hoja de estilo realizará cambios en nuestra página tan solo llamando a etiquetas   que hayamos utilizado para dicha página.


Y este será el resultado que se obtiene luego de haber hecho una hoja de estilo para modificar con un nuevo estilo a nuestra página:



CONCLUSIÓN:   el objetivo de añadir una hoja de estilo es que podremos modificar nuestro contenido de nuestra pagina a nuestro gusto, como dando color, tamaño, tipo, etc., y se pueda ver agradable nuestra página.