Diseño web en Adobe Dreamweaver CC a partir de maquetas de Adobe Illustrator

1. Introducción: Hey ahi, mi nombre es Dan y en esta serie de videos, vamos a hacer este sitio web de portafolio responsive usando Dreamweaver Ahora vamos a pasar por este curso paso a paso aprendiendo todo lo que necesitamos saber para hacer un sitio web. También utilizaremos algunas de las herramientas de plantilla de Dreamweaver para que podamos hacer cambios en todo el sitio en nuestros sitios web de gran tamaño súper rápidos y fáciles. También haremos este menú desplegable sensible aquí desde cero. Tendremos que dejar un poco de JavaScript y jQuery. Ahora soy Instructor Certificado de Adobe, también llego a ayudar a Adobe a hacer una gran cantidad de sus tutoriales de Dreamweaver para su página web. También soy orador de Dreamweaver en la Conferencia Adobe MAX en Las Vegas y aún mejor aún, estoy dentro de tu copia de Dreamweaver en este momento. Ve y ábrela. Abre Dreamweaver, ve a ayudar, ve a tutorial rápido, y ahí estoy dentro de la máquina. Este curso es para principiantes, no necesitas ningún conocimiento previo de Dreamweaver ni experiencia de diseño web. Usaremos Dreamweaver split view para que puedas usar todas las buenas herramientas visuales además de hacer algunas aminas simples aquí abajo en el código también. En esta serie tomaremos aquí este diseño estático con el que comenzaremos desde Illustrator y juntos, construiremos paso a paso todo en HTML, CSS, y JavaScript. Haremos nuestra propia navegación usando jQuery. Haremos ajustes al sitio para que todo se vea bien en todos los diferentes dispositivos. Trabajaremos con hermosas fuentes y colores e incluso agregaremos Google Analytics a nuestro sitio para que podamos obtener alguna información increíble sobre quién visita nuestro sitio. Ahora el diseño web puede ser bastante complicado, si alguna vez te pierdes, estoy por ahí para ayudar, solo usa cualquiera de los comentarios de cualquiera de las páginas. Además, obtienes archivos de ejercicio para que puedas jugar conmigo en la serie de videos, también guardo algo llamado los archivos completados. Al final de cada video, guardo uno o alrededor de dos, que puedes comparar el tuyo con el mío por si el tuyo se pierde un poco. Consulta el enlace aquí para el sitio web que vamos a construir juntos y quiero que te emociones súper por construir un sitio web como un profesional. Nos vemos en clase. [MÚSICA] Gracias, chicos. [ inaudible] [MÚSICA] 2. Archivos para ejercicios: Hola, ¿qué vamos a estar haciendo en este curso y cuáles son los recursos? Vamos a estar tomando un diseño que hemos realizado en una clase anterior completamente diferente. Fue un diseño web completo y de interfaz de usuario usando Illustrator. No tienes por qué haber hecho ese curso. Es bastante útil si sí quieres hacer el proceso de diseño así como la construcción así que puedes ir a hacer eso. Pero vamos a estar tomando ese diseño y convirtiéndolo en un sitio web totalmente receptivo usando Dreamweaver. Vamos a estar usando mucho live view en este curso. En nuestros tutoriales anteriores, he usado la vista de código. Eso está bien usando vista de código. Vamos a usar, la versión táctil más viva [inaudible] de Dreamweaver. Supongo que eso es lo que hace cadena. Tenemos un bastante único de otros editores de código es que es tipo de drag and drop, click and play type stuff. Nos vamos a centrar en eso en este curso, un poco de código. Otra cosa son los archivos de ejercicio y los recursos, ese tipo de cosas. Hay archivos de ejercicios que puedes descargar. Serán un enlace en la pantalla que hace un poco de ruido pop aquí. Ve a descargar esos y puedes jugar. También hay algo llamado archivos completados. El final de cada video individual, guardo el sitio web a donde estoy hasta. Tan solo para que si te estás perdiendo o cómo resolverlo, puedes descargar mi versión y solo revisar el código y solo ver dónde podrías haber ido mal. También para este video, vamos a hablar de críticas y comentarios. Serán una sección de comentarios en cada página. Si estás teniendo problemas y simplemente no está funcionando para ti, déjame un correo electrónico o mejor aún ahí están los comentarios en la página, así que haz eso. Si llegas a un punto en este curso, donde estás como, hay una bastante buena déjame una reseña. tipo de revisiones son las cosas que realmente ayudan a mis cursos a hacerlo bien y me ayuda a ser una persona tipo entrenador online de tiempo completo. Si te gusta el curso, deja una reseña. Sí creo que eso es todo. Salgamos y empecemos el curso propiamente. 3. Configuración de sitios web: Hola ahí. En este video vamos a configurar nuestro espacio de trabajo para que podamos diseñar sitios web increíbles. Ahora este curso en particular se va a enfocar principalmente en la vista en vivo o ese tipo de lado visual más de diseño de usar Dreamweaver. Puedes hacer totalmente este curso en el lado del código si lo prefieres, pero si quieres seguir con exactitud, lo vamos a hacer en la vista visual. Para hacerlo, antes que nada, debes asegurarte de que no estás en desarrollador. Desarrollador está bien, pero vamos a estar trabajando en estándar. En estándar, vamos a abrir un nuevo documento sólo temporalmente. De acuerdo, archivo, nuevo. nuevo documento, HTML, ninguno, haga clic en “crear”. Vamos a cerrar esto en un segundo. Realmente todo lo que queremos hacer es poder ver esto. Puedes trabajar en la vista de código aquí, o dividirte, o vivir. Vamos a trabajar en split lo que significa que es parte live view y parte código. El otro asunto es que yo divido el mío horizontalmente. Algunas personas prefieren verticalmente. No estoy seguro a qué se ha fijado el tuyo. Entonces sube a la vista, hay modo de vista y luego está este de aquí llamado split. O bien puedes dividirte verticalmente, para que puedas ver tu sitio web ese lado y el código de ese lado, ya sea de qué manera quieras. Pero si me van a seguir, trabajemos en la división horizontalmente. La otra cosa es, es que vamos a cambiar al panel CSS Designer. Vamos a pasar mucho tiempo aquí dentro. El único problema con él, es bastante pequeño por defecto, así que vamos a hacer dos cosas. Entonces el panel DOM aquí abajo, el panel de activos, y el panel de fragmentos allá [inaudible] pero ocupan mucho espacio de pantalla. Vamos a hacer doble clic en la palabra DOM. Todavía está ahí abajo si lo necesitas. Pero es bonito y pequeño ya que ha ampliado la vista del diseñador CSS. Otra cosa que vamos a hacer es, si agarro mi ratón y simplemente lo muevo, justo ahí. Ver estas capas, voy a dar clic y arrastrarlas hacia fuera y ver esto. Pasará de una columna a dos columnas. Encuentro que esta es la mejor manera de aprender. Tiene todo bonito y abierto. Incluso cuando no estás aprendiendo y cuando estoy haciendo cosas a vista en vivo, así es como prefiero trabajar. Ahora si tienes una pantalla realmente pequeña, como una laptop de 13 pulgadas o 11, y tal vez tengas que tenerla de vuelta aquí porque simplemente no va a funcionar. Pero voy a tener mi acaba de empezar aquí, tengo el MacBook Pro de 15 pulgadas y funciona muy bien así. Has hecho algunas configuraciones. Lo tenemos funcionando perfecto. Lo que vamos a hacer es salvar esto. Para que si lo estropeamos más adelante podamos restablecerlo, o si lo enchufa a diferentes monitores, ese tipo de cosas. Para hacerlo, aquí arriba donde dice estándar, baje eso, digamos que me gustaría tener un nuevo espacio de trabajo. Voy a llamar a esto el espacio de trabajo “Dan is Awesome”. Llama a la tuya como quieras. Simplemente significa que si después arrastras esto y se une por allá y termina conectándose a esto y accidentalmente cierras esto y esto, se ha ido todo raro, lo que puedes hacer es venir a Dan es Awesome y hacer clic en “Reset Dan is Awesome “y lo restablece, todo menos esto, resulta. Pensé que lo haría. Al menos vuelve todo a la normalidad, se expande desde un lado el mismo ancho. que mi amigo sea cómo conseguir que tu espacio de trabajo luzca súper dulce y cómo guardarlo y más adelante restablecerlo, si es necesario. Muy bien, vamos y en realidad empecemos a hacer un sitio web. 4. Cómo crear un nuevo sitio web en Dreamweaver: Oye, ahí. En este video, vamos a crear nuestra definición de sitio. Tenemos que hacer esto por cada sitio nuevo que vamos a hacer en Dreamweaver, es súper fácil, lo puedes ver por aquí, tengo una carpeta y dentro de ella, tiene una carpeta de imágenes, eso es todo lo que necesitamos hacer. Vayamos a hacer eso ahora. Si estás siguiendo desde el último tutorial, solo vamos a cerrar esa cosa que hicimos, vamos a configurar nuestro sitio. Es necesario hacer esto al principio de cada nuevo sitio. Si eres diseñador web, y tienes 10 clientes diferentes, vas a tener que hacer esto 10 veces diferentes. Si estás trabajando en tu propia página web, y solo tienes uno de ellos, solo tendrás que hacerlo una vez. Subamos a Sitio, Nuevo Sitio, dale un nombre a tu sitio, voy a llamar a nuestro Dan's Awesome Portfolio. ¿ Dónde lo vamos a poner? El nombre del sitio en realidad no tiene ninguna repercusión más que la que usas en Dreamweaver para encontrar todos tus archivos. Eso es lo que pensé para siempre. Pensé que no hay repercusiones para esto, puedes llamarlo como quieras. Ahora, estoy regresando del futuro. Soy Dan de Video 22. Tu Video 4, y he vuelto a decírtelo, no pongas el apóstrofo porque web encuentra toda la vida poniendo algo aquí, pensé. Pero no pensé si alguna vez pondría un apóstrofe en este pequeño nombre de sitio. No estoy seguro si es un nombre de sitio que tiene el problema, o es el nombre de la carpeta, uno de ellos es el problema. Ahora, en lugar de volver atrás y volver a grabar los dos días con un video en el que tengo con el apóstrofo aquí dentro, acabo de regresar a tiempo para decir: “No lo hagas, no lo metas”. Entonces para los próximos 22 videos, vas a ver ese apóstrofo y volverlo a ver. No pongas apóstrofes ahí dentro. Apártate de cualquier llave extraña como extrínseca, enthuses, solo tienes alzas y bajadas regulares, y eso no causará ningún problema cuando lleguemos más adelante cuando hagamos una plantilla. Continuar y hacer todo excepto poner apóstrofos en la carpeta del sitio local y el nombre del sitio. Vuelve a tus videos regulares, y espero no encontrarme con mi yo pasado. ¿ Todo el mundo ha visto Volver al Futuro? Esperemos que no seas tan joven. Seguramente todo el mundo visto Volver al Futuro. Suficiente. De nuevo en ella. Carpeta local del sitio, aquí es justo donde en tu laptop esto se va a guardar, voy a poner la mía en mi Escritorio, voy a poner la mía en una carpeta nueva aquí, y la voy a llamar Dan's Awesome Portfolio. Enfriar. Además, ese nombre físico para la carpeta no tiene repercusiones. Algunas cosas hacen obviamente, pero eso no. Haga clic en “Elegir”. Lo último que queremos hacer aquí es ir a configuraciones avanzadas, y vamos a la carpeta de imágenes por defecto. Da click en el pequeño navegar, puedes ver que se pone dentro de esa nueva carpeta que acabo de hacer, hagamos una nueva carpeta aquí, y llámalo imágenes en minúsculas. Esto es algo específico. Llámalo imágenes con minúscula o sin espacios, vamos a hacer clic en “Crear”, haga clic en “Elegir”. Lo que eso hace es que nos ayuda más adelante cuando estamos arrastrando imágenes de todo nuestro equipo, Dreamweaver sabe dónde ponerlas. Eso es todo. Haga clic en “Guardar”, y que mi amigo es todo lo que necesitamos hacer. Si no puedes verlo, deja que cambien los archivos por la parte superior aquí. Si no puedes ver archivos, ve a Archivos de ventana, verás que ahí está mi pequeña carpeta. También en mi escritorio, hay una Cartera Awesome de Dan. Aquí no hay nada excepto que hay una carpeta que tiene imágenes, y no hay nada en ella. Pero solo para que lo sepas, diseñas tu sitio localmente en tu propia computadora primero, y cuando termines, lo empujas a tu anfitrión, alguien como GoDaddy o Bluehost, y se lo servirán a Window world. Entonces eso es todo por configurar nuestro sitio. Necesitas hacer eso por cada sitio. Ya verás todo el mío aquí, tengo un montón de sitios en los que trabajo. Si lo has hecho mal, puedes ir al sitio, ir a Administrar sitios, y los verás aquí, ahí está la Awesome Portfolio de Dan, haz doble clic en ahí está la Awesome Portfolio de Dan, él, y puedes volver a esa misma pantalla. Entrémonos en el siguiente tutorial. 5. Cómo crear una página HTML en Dreamweaver: Muy bien, en este tutorial vamos a crear una página completamente nueva, vamos a llamarla índice, vamos a traer un logo, vamos a vincularlo a nuestra página principal, vamos a agregar algo de texto alt, todas las cosas buenas a iniciar cualquier buen sitio web. Vamos a seguir y hacer eso ahora, así que cinco videos adentro y todavía no tenemos nada así que realmente hagamos una página. Si vas a Archivo Nuevo, o usaré este aquí. Ahora la parte esencial como cualquier sitio web es un caso de documento HTML, tengo un documento nuevo, vamos a usar HTML y cuando se trata de Bootstrap o Ninguno, vamos a usar Ninguno. Si estás interesado en Bootstrap, tengo otro curso completo sobre cómo usar Bootstrap pero este de aquí vamos a crear nuestra propia capacidad de respuesta en lugar de usar la plantilla Bootstrap. Entonces Ninguno, asegúrate de que sea HTML5, vamos a dar título a nuestro documento. Título es realmente importante, puedes usar cualquier texto que te guste así que voy a usar Daniel Walter Scott portafolio de diseño web. ¿ Por qué estoy metiendo todo eso lleva ahí? Es porque lo que sea que pongas en este título aquí aparece aquí en Google. Si hago una búsqueda de mi de ahí mismo, verás que sellan las cosas en azul aquí esto en realidad se extrae del título de la página así que aquí en leaver de sueño, ¿ves esto aquí? De ahí viene la escritura azul por lo que es realmente importante, no la dejes como sin título porque nunca te clasificarás en ningún tipo de búsqueda para que puedas ver aquí, ahí es donde aparece. También aparece si hago clic en traer un laptop.com se puede ver en la parte superior aquí, bien, ahí es donde aparece también. Es este pequeño nombre de aquí. Se puede ver aquí he hecho un montón de buenas palabras clave, materiales de Adobe pero cualquiera que tenga que traerla y terminó. Por lo que también es donde aparece por lo que tanto el azul Google terminan en la pequeña pestaña en la parte superior ahí. Así que no lo olvides, tiene que ser único para cada página que hagas así que si tienes 100 páginas en tu sitio web, necesitas un 100 títulos separados lo cual no es divertido ir y tratar de crear pero hay que hacer. Una vez que hayas hecho eso, hagamos clic en “Crear” y tendrás tu primera página. Ahora vamos a guardar esta primera página así que vamos a ir a “Archivo Guardar”, vamos a darle un nombre a éste y esta es una de las pocas páginas donde tenemos que darle un nombre realmente específico, tenemos que llamarlo index.html. Si alguien va a tu página web, van a un Daniel is awesome.com, saldrá página web no encontrada, necesita al menos esta página. Esta es considerada tu página de inicio y tiene que ser escupido exactamente como este o en minúsculas index.html. Otras páginas con las que tenemos un poco más de libertad, pero ésta definitivamente index.html. Entonces verás por aquí en mi panel de archivos ahí está, tengo mi primer trozo de HTML sentado ahí y esto se genera para nosotros, puedes ver la etiqueta, el título para que puedas actualizar esto él ahora, en vista de código y no rompas nada más por borrándolo, déjalo todo ahí. Lo primero que haremos antes de irnos es que en realidad vamos a agregar algo a nuestra página así que vamos a dar click arriba aquí en la vista en vivo en la parte superior aquí y vamos a ir a “Insertar” y arriba aquí vamos a recoger HTML y vamos para dar click en este llamado la imagen y vamos a traer ahora logo. Ahora si aún no lo has hecho, ve al enlace de la pantalla y descarga los archivos de ejercicios, son de descarga gratuita. Ya descargado el mío, están en mi escritorio y voy a abrir mi carpeta de imágenes y aquí quiero el que se llama logo, voy a utilizar el PNG so logo guión Daniel, Walter, guión Scott. Hagamos clic en “Abrir” y luego mis amigos es nuestro logo en nuestra página, es un poco de blanco pero vamos a poner eso sobre un fondo oscuro más adelante y eso es casi todo. Siempre que pones una imagen, puedes ver aquí abajo esto es lo que se ve en la vista de código, lo que tenemos que hacer es añadir algo llamado texto alt o texto alternativo para cada imagen. Es utilizado por Google para ayudar a hacer referencia al sitio y un sitio web que tiene muchos buenos textos alt ayudará con sus rankings, nuestro sitio web que no tiene texto alt tan probable que lo haga bastante mal en los resultados de búsqueda. Para actualizar el texto alt, haga clic en el logo aquí, haga clic en el menú poco más grande nuevo y presione el texto “Alt” aquí, dale un buen nombre de palabra clave, así que voy a poner a mi nombre. Esto puede tener espacios y no necesita ninguna sintaxis especial real, pero solo buenas palabras clave así que lo llamo diseño web, cartera, logo. Podría llamarlo logo pero el único problema con eso es que no buenas palabras clave y estaría compitiendo con cualquier otra persona que tuviera un sitio web con el logo de palabra clave, quiero competir con un nicho muy específico, Mi nombre, web, logotipo diseñado. Lo que también haremos antes de salir de aquí también y esto es específico solo para el logo de la página de inicio y es muy común hacer clic en el logo para volver a la página de inicio, gente escuchará listas tienen un botón en la navegación esta es casa, yo solo asumirás que puedes hacer click en el logo y te llevará de vuelta a casa. Ahora esto ya es un hogar, lo cual es raro pero vamos a usar esta página como nuestra plantilla para hacer otras páginas. Entonces lo que vamos a hacer y donde dice enlace aquí, vamos a dar click en navegar a archivo. Vamos a decir esto cuando se hace clic se remonta a index.html lo que significa algo raro en este momento porque simplemente se remonta a sí mismo, pero más adelante cuando copiemos y peguemos su página y se convierta en la página Acerca de Nosotros, se convertirá en más útil. puede ver aquí arriba, ver estrellita significa que estas páginas no se guardan, “Archivo”, “Guardar”, para asegurarse de que todo esté bonito y limpio. De acuerdo, así que hemos hecho una página, hemos pegado un logo en ella con editar pequeñas garrapatas con editar un enlace a ella y estamos empezando. Muy bien, entrémonos en el siguiente tutorial. 6. La mejor manera de previsualizar tu sitio web en Adobe Dreamweaver: Hey ahi, estamos en versión super extreme close-up para que te pueda mostrar la mejor manera de previsualizar tu sitio web usando Dreamweaver y vista previa del navegador en tiempo real. Vamos a comprobarlo. Entonces mientras estás trabajando, tienes en split view, podemos ver el código y podemos ver la vista en vivo de la parte superior aquí, y esto está totalmente bien para previsualizar tu sitio web. El único problema es que hay líneas azules por todas partes. Puedes arrastrar este borde aquí para redimensionarlo. Para ver cómo se ve en diferentes vistas. Mi único problema es, hacer doble clic para que vuelva a encajar, es que no siempre se actualiza perfectamente aquí y es mejor de lo que ha sido nunca, pero siempre me gusta previsualizar en el navegador. Lo primero que debes hacer es asegurarte de que tienes instalado Google Chrome. Si estás trabajando en un Mac y tienes Safari pero no Google Chrome, necesitas ir a descargar eso e instalarlo. ¿ Por qué? Porque todos usan Google Chrome y si funciona en Google Chrome, es más que probable que vaya a funcionar en muchos de los otros navegadores. Entonces prueba en ese. Es increíble el porcentaje de personas que realmente usan Chrome frente a cualquier otro navegador, incluyendo Internet Explorer o Safari o Firefox o lo que sea que uses. También puedes probar ahí dentro, pero asegúrate de tener instalado Google Chrome. Una vez que lo hayas instalado, solo debería aparecer en, bajo Archivo, Vista previa del navegador en tiempo real. Simplemente debería aparecer aquí como lo hace el mío. Si no lo hace, puedes ir a Editar lista de navegadores e ir a buscarla. Entonces, una vez que está instalado, vuelves a subir exactamente a donde acabamos de estar, o más fácilmente, hay un pequeño ícono abajo aquí, y puedes ver aquí Vista previa en Chrome. Aparece el navegador y puedes verlo aquí. Ahí está mi logo y puedo darle click y está todo bien. El genial de la nueva versión de Dreamweaver es esto lo que se llama Vista previa del navegador en tiempo real. Todo lo que realmente significa es que cuando actualice el código aquí en, voy a mover esto para que puedan ver ambos. Cuando actualizo esto y digo en realidad quiero que mi logo tenga un ancho de 131 píxeles, puedes verlo recién actualizado perfectamente sin que tenga que apagarlo y restablecerlo o guardarlo. Es dinámico. Simplemente significa que no estoy seguro de querer ese tamaño. Cuando lo elimino, solo se actualiza mientras estoy trabajando. Ahora durante este curso, estamos limitados a la pantalla que se puede ver, pero en realidad tengo dos monitores aquí en mi computadora. Entonces tengo éste arriba en otra pantalla. Lo cual no puedes ver ahora. Entonces tengo esto a todo ruido aquí, y solo significa que cuando actualizo esto en este monitor de aquí que no puedes ver, se está actualizando visualmente para que pueda verlo. Entonces si me escondo en la vista de Código haciendo algunas cosas, puedo ver los ajustes suceden en caso de que cometa un error o simplemente para previsualizarlo como va. Nos dirigimos a la vida real hablando Dan para mostrarte. Entonces mientras estoy trabajando, tengo dos pantallas arriba. Tengo a Dreamweaver en este, y tengo mi pantalla grande mostrando Google Chrome con una vista previa del navegador en tiempo real. Por lo que hago clic en esto y luego clic en “Mostrar en tiempo real Browser Preview”, viéndolo por ahí. Déjame solo hacer un gran cambio para que puedas ver fácilmente en la cámara. Entonces agarraré aquí imagen, solo te apago. Mira esto. Bien, se fue. Entonces hago un cambio aquí y al instante se muestra por aquí. Es realmente solo útil si estoy trabajando aquí y se ve todo bien, ellos soy como oh, algo ha cambiado por aquí. Entonces sí, es una forma muy común de trabajar como diseñador web. Dos pantallas, se ven impresionantes. Entonces gracias real Dan. Es así como previsualiza en tu navegador. Puedes facturar aquí, pero asegúrate de volver a comprobarlo en el navegador real. Veremos revisar en móviles y tabletas más adelante cuando realmente tengamos algo que comprobar en ellos. Entonces eso es todo. Vamos al siguiente tutorial. Nos vemos ahí. 7. Desplazamiento de etiquetas en Dreamweaver: En este video, vamos a poner etiquetas y configurar las etiquetas y presentarte este panel DOM. Vayamos a hacer eso ahora. Lo primero que tenemos que hacer es poner una etiqueta de encabezado. Ahora, por aquí, debajo de Insertar un HTML, su sitio web va a tener tres grandes trozos a él. Va a tener un encabezado. Va a tener una sección principal. Va a tener un pie de página. Eso es arriba, medio, e inferior. El encabezado y el pie de página generalmente van a ser los mismos en cada página y lo vamos a convertir en una plantilla más adelante. El principal es donde todo va a cambiar para tu página real. Ponemos el logo en primer lugar, lo cual es un poco raro. Probablemente metes primero tu encabezado y luego el logo dentro de él. Lo he hecho porque quería poder mostrarte cómo reordenar las etiquetas si las consigues en el lugar equivocado. Lo que vamos a hacer, realmente no importa dónde te han hecho clic aquí en la vista en vivo. Da click en el click Insertar HTML en Encabezado, y aparecerá en algún lugar. Realmente no importa si está por debajo o por encima del logotipo aquí. Ahora lo que hace Dreamweaver también es que le agrega algunas garrapatas preexistentes. Simplemente coloca garrapatas de titular porque si esta garrapata no aparece aquí, no la puedes ver porque no tiene altura, ni anchura, ni dimensiones. El encabezado entra y no lo puedes ver, así que es un poco tonto. Agregan algunas garrapatas aquí para ser útiles. Este garrapatas se borra bastante de inmediato una vez que hayas empezado a usarlo. Lo primero que queremos hacer es que quiero poner mi logo dentro de mi cabecera. Ves aquí abajo en mi vista de código, ahí está mi encabezado. Empezando y terminando, aquí está el logo con hipervínculos y se pueden ver las viejas garrapatas y el tamaño de la misma. Esta cosa me gustaría ir dentro de cabecera. Hay dos formas principales de hacerlo. En realidad hay algunos, depende de ti si prefieres apegarte a las herramientas k o te gusta trabajar en vista de código, depende totalmente de ti. Usemos la forma oficial que recomienda Adobe. He abierto mi panel DOM aquí, si no puedes ver está bajo Window DOM, y aquí está el jefe de mi sitio. Eso es todo lo que ve la computadora. Se puede ver como mi título aquí dentro me dice qué teclado estoy usando. Pero el usuario no ve nada de esa cabeza. Ve lo que ha terminado por el cuerpo. El cuerpo contiene mi encabezado, contiene mi imagen, y eso es todo en este momento. Por aquí en mi panel DOM, puedes ver ahí está mi cuerpo, tengo que aguantar esto. Ahí está mi encabezado separado de mi a tag, que es este enlace con mi imagen en ella. Simplemente puedes hacer clic y arrastrar la a dentro del encabezado y van adentro y se convierten en una familia feliz. Entonces puedo ir a través y eliminar este texto de marcador de posición. Puedes hacerlo desde aquí arriba, porque se apegará a hacerlo aquí en la vista en vivo. Corte, y ahora eso es todo. Tenemos un encabezado que tiene mi imagen dentro de ella con mi etiqueta que es cómo meter las cosas en el lugar equivocado. Vas a tener que arrastrarlos en el DOM. Simplemente arrástrelos a la etiqueta derecha o voy a eliminar todo eso, es que aquí está mi texto de encabezado y luego eliminar el texto aquí. Agarra todo eso, así que de una etiqueta a una etiqueta, córtala. Ponga mi maldición ahí y péguelo. Realmente no importa cómo te guste hacerlo, arrastrarlo a través del DOM, o simplemente copiarlo y pegarlo aquí abajo. Solo hay muchas veces en las que es más fácil hacer una y otra. Te estoy dando ambas técnicas para que puedas trabajar a través de este curso. Vamos a golpear Guardar, Archivo Guardar. Pasemos a empezar a peinar nuestro encabezado. 8. Cómo crear y editar tu primera hoja de estilo CSS con Dreamweaver: Hola ahí. En este tutorial vamos a crear nuestra primera hoja CSS lo puedes ver ahí. En realidad vamos a darle estilo a nuestro encabezado. No te preocupes, no se va a quedar siempre así de horrible verde. Vamos a añadir algo de relleno y algo de CSS impresionante. Prepárate para hacer tu primera hoja CSS. Hasta el momento hemos creado una página HTML. Es index.html. Se deshizo de HTML yendo no mucho. Ahora, tenemos que ir, y darle estilo a su cabecera. Lo diseñamos usando CSS o Hojas de Estilo en Cascada. Para crear una Hoja de Estilo, vamos a nuestro panel de diseñador CSS. Voy a cerrar el DOM desde el último tutorial y aquí, si no puedes ver a tu Diseñador CSS, ahí está. Si el tuyo no se parece al mío, tienes que arrastrarlo hacia fuera aproximadamente por ahí, y lo que queremos hacer es bajo Fuentes, vamos a hacer clic en el botón “Plus”, Y vamos a ir a Crear un nuevo archivo CSS. Puedes darle el nombre que quieras, pero todos lo llaman styles.css, y vamos a dar clic en “Ok”. un par de cosas. En primer lugar, en mi escritorio, en mi Awesome Portfolio de Dan que me crearon, es solo una hoja de estilo separada, ahí está el archivo HTML índice que hicimos, y ahí está este otro tipo. Ahí adentro no hay nada. Es justo donde ponemos todos nuestros estilos. mantenemos separados. Por lo que de nuevo a Dreamweaver. Otra cosa que notarás es que mi HTML se actualizó un poco. ¿ Se puede ver que Dreamweaver ha vinculado a los dos? Entonces así es como ese archivo Index sabe que styles.css existe porque en este momento son archivos separados, y aquí en la cabeza, Dreamweaver dice vinculado a la hoja de estilo por favor, y eso es lo que hace. También lo útil para Dreamweaver es esta cosa llamada el botón de documentos relacionados que puedes ver en la parte superior aquí. Se vincula a ella porque es una hoja separada cual dice que puedo hacer click en ella, y ahí está. Ahí está ese styles.css listado en la parte inferior. Te está mostrando en la parte superior mi índice, pero abajo abajo te está mostrando esa hoja separada. Eso es lo que los codificadores de fuentes, solo deberían llamar a eso HTML. Entonces piensa cuando veas código fuente, piensa HTML, y este aquí es otro documento. Volver al HTML. Es así como se crea y vincula una hoja de estilo para ser fácil. Ahora nos vamos a ir, y el estilo son cabecera. Para hacerlo, tenemos que asegurarnos de que podrías estar configurado en Current. El actual es impresionante cuando sabes lo que estás haciendo, y lo haremos un poco más tarde en el curso, pero apegarnos a lo viejo. El viejo hace la vida más fácil. Lo que vamos a hacer es que vamos a dar click aquí. Realmente no importa dónde hagas clic en realidad, pero vamos a crear nuestro primer estilo. Trabajamos a través de estos procedimientos aquí. Trabajamos a través de todas estas cajas. En primer lugar, decimos, quiero que el estilo vaya dentro de styles.css. Es realmente raro tener más de una hoja de estilo. Ocasionalmente puedes tener dos si estás usando como una plantilla, como Bootstrap, pero solo vamos a tener un CSS para todo este documento. Consultas de medios, vamos a entrar más adelante cuando veamos el móvil y la tableta. Nos vamos a saltear eso por el momento. Lo vamos a meter en algo llamado Global, y vamos a crear esta cosa llamada Selector. Vamos a estar haciendo muchos selectores, y esto selecciona lo que queremos diseñar. Voy a pegarle a “Plus”. Aquí, es por defecto a lo que he seleccionado. Pero no quiero la imagen que está dentro de la etiqueta add, eso está dentro del hit. Yo solo quiero darle estilo a mi encabezado. Simplemente puedes escribirlo. Depende de ti si lo obtienes por defecto o si solo tienes que escribir el encabezado. Estoy empezando esta cosa aquí llamada cabecera. ¿ Qué quiero hacer con este encabezado? Voy a dar clic en “Encabezado” por aquí, y lo que me gustaría hacer es antes que nada, vamos a cambiar el color de fondo, bonito y sencillo. Tengo esta larga línea de cosas realmente grande que podemos peinar con CSS. Lo que hace Dreamweaver es junto con top aquí, lo pone en pequeños grupos. Este de aquí es Layout, lo puedes ver ahí, y este Tipo, escribe eso. Lo que hago es solo dar click en estos para saltar por esa lista. Puedes deslizarte arriba y abajo, totalmente hasta ti. Voy a saltar a este que se llama Fondo, porque es color de fondo, vamos a recoger verde lo suficientemente grande. Para escoger colores usando esta diapositiva esta cosa arriba y abajo hasta que obtenga el tono derecho, haga clic, sostenga, y arrastre el pequeño círculo alrededor hasta que encuentre un color que le guste. Ahí está la versión oscura y ligera o simplemente muévala por aquí, y así de transparente es. Vamos a escoger un verde lo suficientemente grande por el momento. Voy a cambiarlo en un minuto. Voy a dar clic en “Regresar” a mi teclado. Ahora, tenemos un encabezado que tiene algo de CSS, y que mis amigos es todo CSS es. Es una hoja separada a la que agregas algunos estilos, y solo asegúrate de usar el nombre correcto. Hemos emparejado el encabezado de la palabra aquí, mi HTML con el estilo aquí y mis selectores, y acabas de colorearlo. Ahora, echemos un vistazo a nuestra hoja CSS. Vayamos a styles.css, ahí está. Así es como se ve una hoja CSS. En cuanto a la codificación para internet, hojas CSS son las más sencillas de mirar. Ahí está la palabra cabecera. Cocuerda completamente en la palabra y la sintaxis aquí en mi HTML, y dice background-color: hash es igual, y ese es el color. Si pasas por encima de él, ahí está el color, y siempre termina en punto y coma. También está envuelto en estos tirantes rizados. Esas son las cosas de la sintaxis. Puedes escribir CSS perfectamente bien. Muchos diseñadores web lo hacen. Lo que estamos haciendo en Dreamweaver es que estamos usando el panel de diseño CSS para hacer el levantamiento pesado. Este conjunto de caracteres en la parte superior aquí solo dice que estoy usando un teclado inglés. Volvamos al código fuente. Lo que quiero hacer es que quiero poner un poco de espacio en la parte superior e izquierda de este logos para que no solo esté atascado contra el costado. Me aseguro de trabajar en mi styles.css en la versión Global de mi encabezado. Se puede ver aquí tenemos relleno y margen. El acolchado y el margen es bueno para explicar ahora. El relleno es el interior de la caja. Mira esto, si hago clic en mantener y arrastrar eso a la derecha, me da relleno, por lo que mueve el logotipo hacia abajo en el momento 36 pixels. Si deshago eso, margen hace algo similar. Empuja hacia abajo desde arriba, pero empuja desde el exterior de la caja. Si no tuviera una caja de colores aquí, si no fuera verde, no notarías la diferencia. El logotipo aún se mueve hacia abajo esa cierta cantidad de píxeles. A veces realmente no importa si usa márgenes o relleno. A veces obviamente en nuestro caso, lo hace porque quiero el relleno dentro de la caja verde. Ahora bien, ¿de dónde saco mis medidas? Ahora bien, si estás trabajando con un diseñador, te deberían haber enviado algunas especificaciones. ¿ Qué tan detalladas son estas especificaciones? Probablemente no va a tener lo lejos que está el logo de la parte superior, pero obtendrás un visual, y podemos medirlo. Ahora bien, si eres el diseñador tanto visual como de hacer el lado de la codificación, va a ser aún más fácil porque vas a poder simplemente saltar a tu archivo. Ahora bien, realmente no importa si has diseñado esto en Photoshop o Adobe Illustrator. Ambos tienen muy buenas herramientas de diseño web. Tengo cursos de ambos. Si quieres hacer la etapa de diseño, ve a echar un vistazo a esos. En este caso, estamos diseñando algo que diseñamos en otra serie de video tutorial en Illustrator. Vamos a abrir el diseño terminado a partir de eso. Ahora, está en tus archivos de ejercicios. Abre el diseño de Illustrator, y abre este llamado Portfolio Website.ai. Yo lo he abierto. Aquí está. Este es mi diseño. Ahora, quiero empezar a tirar de las mediciones de ella. Voy a acercarme, echarle un vistazo a este tipo. Yo quiero la altura y los lados aquí. Ahora, la forma oficial es que hay una herramienta de regla, así que caigo una herramienta, herramienta de medición, y haces clic una vez ahí, haces clic una vez ahí, y te da el ancho. Es 19 de un lado. Puedes hacer click una vez aquí, haces click una vez allá, y puedes ver que son 10 desde la altura. Alrededor de 20 y 10, nunca es exacto. Simplemente apégate a píxeles enteros, las diminutas medidas de todos modos, así que solo pega los píxeles enteros. Esa es la forma oficial. Lo que tiendo a hacer es agarrar la herramienta de rectángulo, y usar esto. ¿ Por qué? Porque se brota, lo cual es realmente genial, se puede ver, al igual que se une, y realmente quiere chasquear a la era de las cosas. Si el tuyo no va a Ver, y asegúrate de que smart guide esté activada. Ese de ahí, que se pegará a los bordes. El otro bonito es ver esto si puedo hacer clic aquí, y se corta justo a la esquina, y se puede ver ahí está mi altura, y se puede ver que hay cruzado. Por lo que conozco mi altura y anchura de una sola vez. Se puede ver que es 19 desde un costado, y es una altura de 10 píxeles. Eso es lo que voy a usar para traducir a Dreamweaver. Cuando estoy construyendo un sitio, y tengo mi diseño aquí ya sea en Photoshop o Illustrator, realmente no importa. Saqué mis mediciones de, voy de ida y vuelta entre estos dos programas. Dreamweaver e ilustrador en nuestro caso. Lo que quiero hacer es que me gustaria tener una altura de 10, y me gustaría este lado izquierdo de 19. Se puede ver, lo empujó 10 abajo, 19 a través. Yo también lo haré por el lado derecho porque eventualmente tendremos algo de navegación por ese lado. Lo mismo para el fondo. Quiero 10 en la parte inferior solo para que haya un hueco que coincida con la parte superior. Amigos míos, así es como crear una hoja CSS. Nuestro styles.css, y hemos hecho un poco de estilo básico usando nuestro panel CSS Designer. Si estás usando una versión de Dreamweaver como CYST o anterior, no vas a tener el panel Diseñador. Eso apesta porque este curso está todo basado alrededor del panel CSS Designer, y es impresionante. Es posible que tenga que mirar la actualización. Se puede subir en este curso sin él, probablemente no. Quizás quieras echar un vistazo a mi versión de codificación del curso Dreamweaver. Ve a revisar ese fuera. Entrémonos en el siguiente tutorial donde miramos la edición de reglas CSS. 9. Cómo cambiar o ajustar los estilos CSS en tu sitio web en Dreamweaver: Hey, gente impresionante. En este video vamos a transformar esta fea caja verde y editar nuestro CSS en esta preciosa caja gris. Entonces ahora vamos a ir a ajustar nuestra hoja CSS. Digamos que no tenemos nada seleccionado. Hagamos click en algunas cosas al azar. Un tipo de hacer que esto no funcione Fresco. Entonces va a haber muchas veces en este curso vamos a hacer un estilo y luego estás, “necesito cambiar ese stock”. Entonces lo que vamos a hacer es ir y ajustarlo. El modo más fácil es que no importa lo que tengas seleccionado por aquí y solo tienes que hacer clic en los estilos CSS se han vuelto globales. Después da click en el estilo que quieras. Posteriormente en este curso se va a conseguir más largos de los estilos en este momento es súper fácil porque solo tenemos un selector, y pega enter. Ahora nos vamos a ir y a hacer un ajuste. Ahora hay muchos ajustes aquí. Qué puedes hacer para hacer la vida un poco más fácil ver esta opción, esto es demostrarlo, me encanta. También puede ser un verdadero dolor cuando eres completamente nuevo en esto, que solo te esté mostrando las cosas que has configurado y estás, “¿Cuáles fueron las otras cosas?” Era el tamaño de las fuentes y esas cosas. Vas a recordar puedes activar y desactivar esto durante este curso. Todo lo que hace es sin duda las únicas cosas que te muestra son las cosas que realmente has hecho. Hemos hecho el relleno y el color de fondo. Entonces lo que quiero hacer es cambiar el color de fondo a negro. En nuestro caso, vamos a usar por defecto la mayoría de las veces que vamos a usar números hexadecimales es la numeración hash. ¿ Puedes moverlo? Se puede ver que estos números corresponden con el color. Ahora lo que queremos hacer es que yo quiero bajar la capacidad de este fondo, Así que tenemos que usar este RGBA. Es el formato más nuevo. No hay verdaderos hexes correctos o incorrectos que la versión un poco más antigua. RGBA es la versión más reciente. El motivo por el que está fresco es porque tiene un al final, lo que significa alfa, transparencia, lo que significa esto. esos números hexagonales no lo tienen. Se puede ver que puedo hacer una lectura ligeramente transparente. Voy a arrastrarlo a negro. Ya puedes ver ahora se ve un poco gris. Pero más adelante cuando tengamos algunas imágenes detrás de ella, va a ser un poco transparente. Depende de ti si quieres hacer esto ahora o pero después, ¿qué tan oscuro? Va a ser difícil de saber hasta que tengamos nuestras imágenes detrás de ella y podamos ajustarla más adelante. Otra cosa que puedes hacer es decir que este panel aquí solo te está volviendo loco, no puedes simplemente saltar a estilos CSS. Se puede ver ahí está mis estilos. Se puede ver decir que lo mezquino necesita cambiar. Simplemente puedo cambiar esto a 12 en la parte superior y en la inferior. Realmente no importa si quieres usar la vista de código o si quieres usar el panel CSS Designer. Pero en este curso nos vamos a estar pegando principalmente al Diseñador CSS. Por lo que volver al código fuente. Una última cosa antes de irnos es la Guardar todo. Entonces cada vez que hago un ajuste a mi CSS, cambia ronda enter, Te darás cuenta de que el styles.css nos pone pequeños astricks aquí. Yo quiero que me salven. Pero porque estoy como en mi código fuente viendo mi HTML go “Archivo”, “Guardar”. No pasa nada en like, así que necesito ir y hacer el algo llamado Archivo Guardar todo. El único problema con el save all es que es un largo camino y el tuyo no tendrá atajo. He hecho un atajo para el mío porque es algo que debes hacer antes previsualizar nada en tu vista previa de navegador en tiempo real o más en caso de Chrome, vas a guardar todo, y significa que guarda esto más la hoja CSS o tal vez alguna JavaScript tienes abierto. Así que guarda todo para hacer el atajo en un Mac, vas a Dreamweaver o atajos de teclado en PC. Creo que es menos de un minuto y anota el fondo. Hay uno por aquí en alguna parte. Se trata de atajos de teclado, es posible que lo encuentres. Lo primero es que lo vamos a hacer a los comandos de menú. Vamos a encontrar archivo, guardar todo entró aquí. Vamos a añadir un plus el atajo. Se va a decir que no se puede modificar la sentada por defecto tomada. Vamos a crear uno propio. Puedes llamar a esto lo que quieras. Atajos de Tejedor de Sueños de Dan. Alto cualquier mitad. Entender. Entonces ve al archivo y vamos a dar click Guardar todo ahora, hit plus y podemos escoger cualquier cosa que nos guste. Estoy usando Command Shift a. desde una PC en la nave de control A. Puedes usar lo que quieras. No importa. ¿ Qué crees que recordarás ots y sí, así es como lo vamos a hacer. Podría cambiar genial. Haga clic en “Ok”. Ahora cada vez que voy, solo puedo golpear Comando Shift a y se guarda todo. Entonces cuando alguna vez vas y previsualiza y tu navegador hace turno de comandos Un primero todo consiguió archivo guardar todo el largo camino, solo para que todo esté actualizado porque a veces puedes estar previsualizando algo en Chrome y listo, no está funcionando. Pensé que acababa de cambiar eso y es sólo porque no has guardado los documentos. De acuerdo, así es cómo editar CSS y cómo crear un pequeño atajo deshabilitar en el siguiente tutorial. 10. Cómo centrar su sitio web en Dreamweaver utilizando un contenedor: Oye, en este video vamos a llevar nuestra página web, que actualmente se extiende hasta el infinito. Se lo vamos a hacer; donde ahora está todo centrado y sólo tiene un ancho máximo de unos 1200 píxeles. Cuando lo redimensiono, y siempre está en el centro. Vamos a hacer eso ahora usando Adobe Dreamweaver. Actualmente si previsuo en un navegador esta cosa mi encabezado se enciende para siempre. Lo que me gustaría que hicieras es quedarte aquí en el medio cuando llegue a un cierto ancho, ancho máximo de unos 1200 píxeles. De lo contrario, se ve bien en mi portátil aquí. Pero si no lo estás, en una pantalla realmente grande, como un iMac. Yo soy uno de los chicos grandes de 27 pulgadas, vas a tener tu logo a un costado y tu navegación va a ser como un kilómetro a la derecha, sin embargo, este lado. Necesitamos algún tipo de límites máximos como y queremos que esté centrado, a la izquierda o a la derecha. Lo vamos a hacer en Dreamweaver usando un contenedor. Es bastante fácil. Volver a Dreamweaver. Aquí en Dreamweaver, necesito envolver todo lo que pueda ver en mi página en un contenedor. Esto incluye, mi encabezado en este momento y eso es todo. Entonces el cuerpo es todo lo que veo en la página, así que quiero el encabezado aquí abajo. Yo quiero que todos estos estén dentro de un contenedor que pueda centrar. Entonces vendrá el encabezado para el paseo, arriba con toda la página web dentro de este contenedor. Para hacerlo por aquí en mi vista en vivo solo puedes hacer click en tu “Encabezado”. Quieres ver este encabezado aquí. Si te encuentras haciendo clic en la imagen y realmente no puedes encontrarla, qué puedes hacer, ves aquí abajo, esto se llama tu selector de etiquetas. Tengo mi imagen seleccionada ahí, está ahí. Ahí hay una, Una etiqueta alrededor y luego hay un escondite alrededor de eso y hay un cuerpo alrededor de eso. Esta es una buena manera de seleccionar en estas cosas. Haga clic en el “Encabezado” o simplemente haga clic aquí en el lateral. Vamos a ir a Insertar. Bajo HTML vamos a hacer esta cosa llamada div. divs son súper comunes en el diseño web; son divisiones del espacio. Lo que vamos a hacer es que vamos a dar click en esto y vamos a conseguir estas opciones aquí. Lo que me está preguntando es, ¿quiero que este div se coloque antes de lo que tengo seleccionado, que es un encabezado. ¿ Quiero despues de ella? ¿ Quiero envolverlo? Envolverlo por fuera o quiero nitirlo? ¿ Qué significa que quiero un jam it dentro de la cabecera? Al igual que nuestras imágenes. En nuestro caso es rep, vale, tengo el encabezado seleccionado. Me gustaría que este contenedor envolviera por el exterior para que el encabezado esté dentro. Hagamos clic en “Rep”. Probablemente sea mejor ver aquí abajo en la vista de código, puedes ver que este div está envuelto alrededor del encabezado. Impresionante. Ahora div es un nombre genérico real para contenedor. Vamos a usar lotes div tags en todo el sitio. Tenemos que darle un nombre como para que podamos decirle que haga algo específico. Porque si digo div, quiero que estés centrado. Cada div en todo este sitio web va a estar centrado y eso no va a ser lo que queremos. Lo que hacemos es a las vainas, definimos el nombre por aquí y lo que hace, y luego lo vamos a aplicar aquí a vista en vivo. Para definir el nombre, hacemos por aquí en mi CSS diseñar un panel, hacemos click en “Estilos”. Dijimos como conseguir global y vamos a darle un nombre, al selector haga clic en el botón “Plus”. Ahora, hasta ahora hemos definido cosas que ya existen en nuestro HTML. Se puede ver aquí definimos cabecera. Se puede ver aquí quiere definir el cuerpo. Cosas que ya existen. Lo que me gustaría hacer es darle a esto un nombre totalmente nuevo; uno que no existe en la página ahora, un nombre realmente único, porque si empiezo el estilo del div, recuerda que se va a aplicar a todos ellos. El modo en que los hacemos únicos es que les agregamos un nombre y estos se llaman clases. Piensa que un selector de clases es solo un nombre que le estoy dando y la forma en que definís clases es poner una parada completa o un punto al principio de tu nombre. Eso le dice a Internet esto es algo específico que he inventado y voy a llamar contenedor de mina. Llamarías a cualquier cosa. Podrías llamarlo sándwich de plátano y seguiría funcionando. Solo estamos llamando a nuestro contenedor. Si vas a usar sándwich de plátano, puedes usar espacios. Necesitas asegurarte de que si vas a hacer sándwich de plátano, tienes que usar un sándwich espacial. Entonces tendrías que explicarle a quien trabaje en tu página web y explicar por qué llamaste a tu contenedor un sándwich de plátano. Pero de todos modos, así que le estamos dando un nombre asegúrate de que tenga una parada completa al principio. Dale un nombre, usa minúsculas. La mayoría de las veces funcionará con alzas y bajadas, pero no lo hagas. Ahora por aquí se ve donde dice show SIT. Vamos a apagar eso. Teníamos eso en un tutorial anterior. Te muestra todo lo que se aplica a este contenedor hasta ahora y no hay nada. Vamos a ganar boleto para poder verlos a todos. Lo primero que vamos a hacer para centrar nuestra página web es que vamos a dar un ancho máximo. Vamos a decir, en lugar de llegar tan grande como quieras para siempre, vamos a decir que me gustaría un ancho máximo y vamos a usar, en realidad vamos a igualar lo que hicimos aquí en Illustrator. En Illustrator, decidimos que nuestro ancho más grande para el que hemos diseñado es de 1200 píxeles. Ahora bien, este no es un tamaño específico absoluto que necesita ser, podrías estar despertando a 1024, que era un tamaño realmente común. Doscientos es más común ahora; esto sigue cambiando. Realmente depende de lo que quieras que sea el tamaño más grande. Sígueme. Hacer 1200, funciona bien. El tamaño más pequeño al más grande que necesitas ser es probablemente estaño. Estaño 24 ó 1,024. No vayas más pequeño que eso. Vuelve a Dreamweaver. Quiero decir es que se puede llegar a un ancho máximo de píxeles y sólo se puede tener 1200 de ancho. Por alguna razón Dreamweaver en este momento, dobles tipos mucho de mis cartas. Esto lo verás a lo largo de este curso. No puedo hacer que se detenga. De todos modos, así que 1200 píxeles es lo ancho que va a ser. Voy a previsualizar en un navegador. Cuando lo estire, lo voy a mover por aquí y estirar por pieza. No funciona. ¿Por qué? Es porque lo hemos creado en Dreamweaver, pero aún no lo hemos aplicado. Vayamos a Dreamweaver. A lo que me refiero con eso es que lo hemos creado aquí abajo y lo hemos instalado y hemos dicho que es ancho máximo. Pero por aquí en realidad no lo hemos aplicado a mi div, así que tenemos que agregarlo a él. Lo que hay que hacer es seleccionar el div. Si no puedes seleccionarlo y decir que tienes esto clicado, recuerda que la Etiqueta seleccionada aquí abajo es realmente útil y agarró el div. Aquí puedes agregar una clase o una identificación, y vamos a escribir en nuestra clase. Ahora, ¿qué pasa al inicio de una clase? Así es, un punto o una parada completa. Se puede ver ahí porque Dreamweaver es súper útil, en realidad se agregó la palabra contenedor ahí para mí. Podría escribirlo, pero lo preseleccionó para mí, eran 10. Ahora voy a conseguir una vista previa en un navegador. Pero lo primero que voy a hacer es desactivar el pequeño atajo fresco, recuerda. De lo contrario archivo guardar todo. Ahora lo vamos a revisar en un navegador. Ahora ese div llamado contenedor dice que no seas nada más grande que 1200. El motivo por el que digo que no seas nada más grande es porque en realidad quiero que sea más pequeño; porque vamos a bajar a las cosas de tabletas y móviles. En lugar de solo usar ancho usa max-width, así que ve no más que eso, pero debajo de eso, haz lo que quieras. Nuestro siguiente problema es que no está centrado. Está haciendo el ancho correcto, pero no se centra en mi página. Es que no lo sé, pasamos por una transformación en el diseño web; donde todos lo querían a la izquierda, nadie quería que se corrigiera, y entonces todos quieren eso centrado ahora. Vayamos a hacer eso. Para hacerlo. Es bastante fácil. Asegúrate de que styles.css global, asegúrate de contenedor seleccionado y todo lo que haces en el margen es donde dice estos pequeños pixeles, cambia eso a auto, pixels auto para hacer que los márgenes izquierdo y derecho sean auto. Golpea las garrapatas de “Guardar todo” en el navegador. Tenemos una página web centrada. Mientras todo vaya dentro de ese contenedor div, todo se centrará así. Volvamos a saltar de nuevo. Eso va a ser por centrar nuestro sitio web. Ahora vamos a salir y crear un medio de consultas porque por el momento tenemos un ancho máximo para como vista de escritorio. Me gustaría hacer algunos cambios y agregar algunas consultas de medios para tablet y móvil. Esto es lo que consideramos el diseño web receptivo. Vamos a hacerlo en el siguiente video. 11. Cómo hacer un sitio web que cambie para teléfonos móviles y tabletas usando Dreamweaver: Oye, ahí. En este tutorial, vamos a ver ajustar nuestro sitio para los diferentes tamaños de tabletas y tamaños teléfonos móviles y los medios llamados creando y verlos arriba aquí arriba. Esperaré además de unos escritorios, el hit aquí dentro es gris. Si llego al tamaño de una tableta, realmente más rápido. Es rojo y me vuelvo a bajar al móvil y es verde. Sé que hay colores feos que justo ahí como posicionadores para probar nuestras consultas de medios. Vamos a hacerlo ahora en Dreamweaver. Por lo tanto, es hora de superarse con capacidad de respuesta y amigable para móviles, y en realidad es realmente fácil. Entonces lo que necesitamos hacer es mirar algo llamado consulta de medios. Lo primero que tenemos que hacer es mirar esta barra de consultas de medios. Si no puedes ver el tuyo es un pequeño ícono aquí. Se puede encender y apagar. Si no tienes esa barra, o ese icono, podría significar que estás usando una versión anterior de Dreamweaver, tal vez veas un conjunto que no tenga esta opción. Desafortunadamente, no puedes seguir este tutorial en particular. Todavía puedes hacer consultas de medios, pero tienes que codificarlas a mano. No puedes usar esta cosa bonita que todo y directiva en la parte superior aquí. Entonces vamos a usar esta cosa, y te dice qué hacer es dar click en este ícono para agregar consulta inmediata. Ese ícono está por aquí y luego algunos allá. Entonces vamos a dar click en él. Vamos a decir que nuestra primera va a ser tablet, porque ya hemos hecho escritorio. El escritorio se considera global en nuestro caso, algunas personas diseñan sus sitios web alrededor del móvil primero. Se volvieron móviles-primero significa que lo voy a diseñar para el móvil. Entonces voy a hacer consulta inmediata que sobrescribe el móvil con tablet. Entonces por encima de eso y escritorio, diseñé mis sitios web al revés. Siempre encuentro que mis alumnos encuentran esto más fácil. Diseñamos la versión de escritorio principalmente porque a menudo hay más que ese lado y es como la mayoría de la gente ve nuestro sitio web depende de tu tipo de sitio web, pero definitivamente mis cosas, 80 por ciento de las vistas son de escritorio. Entonces estoy usando un primer enfoque de escritorio. Vamos a volver a hacer clic en este pequeño botón más, y vamos a trabajar primero en tablet. Entonces vamos a decir que una tableta va a estar entre estos dos. Va a tener un mínimo de cierto tamaño y un máximo de otro tamaño y eso va a ser considerado tableta. Ahora es un poco difícil obtener las medidas exactas porque se trata muchas tabletas por ahí y tantos tamaños diferentes. Entonces lo que decimos es un mínimo de alrededor de 401 es el más pequeño, cualquier cosa más pequeña que eso consideraremos un teléfono móvil y haremos una consulta de medios por separado para eso. ¿ Qué tan grande debe hacerse? Es 768 es el ancho de un iPad, con algunos retratos. Entonces usamos ese tamaño. No hay razón por la que no pudieras usar el 770 o decir que esto es en un futuro lejano cuando hay muchos tamaños diferentes, podrías decidir eso, eso es demasiado pequeño o diferente tamaño. Es solo un gimnasio depende de dimensionamiento por ahora, pero sería un tamaño realmente típico de usar. ¿ A dónde va a ir? Se va a ir dentro de mi “Styles.css”. Voy a dar click en “Aceptar”. Se puede ver aquí, ahí está mi pequeña barra azul, eso es “min-max”. Tiene un mínimo y un máximo y vamos a tener las cosas disparadas cuando llegue a ese tamaño ahí. Echemos un vistazo a nuestro “Styles.css”. Haga clic en documentos relacionados por aquí. Se puede ver así es como se ve la consulta inmediata. Esa es la sintaxis. Ahora de nuevo, si estás usando una versión de Dreamweaver que no tiene este bonito y práctico arco. Solo puedes teclearlo aquí. Entonces esa se considera mi tableta. Lo que haremos es probar menos decenas y justo por encima de él. Agregaremos algunos comentarios solo para que más adelante sepamos de qué estamos hablando y qué hacer para agregar comentarios en Dreamweaver es como opción aquí, Css aplicar comentario. Css aplicar comentarios se ven así. Es una barra y luego un extracto y tiene que ir entre aquí. Podemos decir, esta podría ser mi tableta. Ahora esto es ignorado por el navegador y es justo aquí para los humanos. Entonces no necesitas escribir esto como solo significa que más adelante, puedo decir que consiguió una vista de tableta y ya sabes a dónde ir. Entonces lo siguiente que vamos a hacer es que vamos a poner en nuestra vista móvil. Vamos a volver a dar clic en este pequeño plus. Vamos a usar un max, así que un “max-width” de 400, va a entrar en styles.css. Demos click en “OK” y veamos aquí arriba. Por lo que en cualquier lugar hasta un máximo de 400 será mi vista móvil. Entonces tienden a ver toma el control y eso es solo un píxel más que mi vista móvil. Si las cosas estaban por encima de los 400, no tengo ni idea de lo que va a pasar que probablemente solo pelearlo en la sangre y Css por todas partes, pero así que solo asegúrate de que 400 y luego 401 sea cuando empiece el siguiente. Ahora en este tutorial, sólo vamos a hacer; un móvil, una tableta, y un escritorio. Encontrarás muchos otros sitios que tienen cinco vistas o cuatro vistas o siete vistas. Sólo vamos a hacer tres y profesionalmente eso es normalmente todo lo ataque es pequeño para de tabletas móviles, medianas y un tamaño grande y los viejos escritorios. Puedes ver aquí abajo mi Css, voy a añadir ese comentario otra vez, así que en realidad solo voy a copiar este y pegarlo aquí arriba. Esta va a ser mi vista móvil. Lo que haré también para que las cosas sean un poco más fáciles es que pondremos aquí arriba, debajo de eso. Vamos a poner en, esta va a ser mi vista global y global /vista de escritorio. Simplemente dices que cuando estás trabajando puedes saber cosas. Ahora no pasa nada más que las que tenemos cajas de color aquí arriba. Ahora necesitamos hacer algunos ajustes leves. Entonces lo que vamos a hacer es volver a “Código Fuente”, y vamos a ir a “CSS Designer” y diremos mi menú de estilos, tenemos a estos tipos antes de que simplemente seguíamos haciendo click en “GLOBAL” y estos dos no existían. Ahora podemos decir que me gusta un global digo “GLOBAL” tengo mis dos estilos que tenemos el “encabezado” y el “contenedor”. Entonces lo que me gustaría hacer es que quiero ajustar el color de fondo de este encabezado. Yo quería hacerlo por quintas tabletas, que es esta min-max, que es 4012-768 y se puede ver que aquí no hay selectores. Entonces nada específico para plantilla y voy a decir que siempre va a haber ahora, cabecera. Tenemos uno para cabecera. Te darás cuenta de que tenemos más de un “GLOBAL”, “encabezado” ahora y uno para tablet. Ahora éste de aquí y tablet no hace nada todavía. Yo sólo voy a ir al color de fondo, escoger un gran color obvio como el rojo y retener. Voy a arrastrar esto. Lo que notarás es que no pasa nada y luego golpea guardar todo aún no cambia. Por eso no me gusta usar esta vista en vivo en la parte superior aquí. Esto son sólo algunas cositas que no se actualizan. Pero si lo reviso en mi navegador, aquí está, y lo arrastro hacia abajo y llego a mi 768 en algún lugar de aquí. Oye, y luego mis amigos es que todas las consultas de medios son, solo estás diciendo entre estos dos píxeles, haz algo diferente y estamos diciendo anular el golpe y que sea rojo en lugar de gris. Podemos hacer lo mismo para el salto móvil aquí. Voy a decir styles.css en mi máximo de 400 recordar esa es mi vista móvil. Te voy a decir que encabezas, escribiéndola y regresas de nuevo. Voy a decir color de fondo de verde. No vamos a mantener esto como más de un ejemplo, gris guardar en, y lo reviso en mi navegador. Tableta tan grande, móvil. Cosa impresionante y eso es todo lo que las consultas de medios son. Entonces vamos a pasar y hacer cosas como me gustaría que la fuente fuera más grande. Me gustaría que esta caja se apile de manera diferente. Es así como vamos a lograr todas estas cosas diferentes. Se puede ver que la fuente se centraría cuando es móvil o está alineada a la izquierda pero está en tablet. Es más pequeño cuando se trata de un móvil y eso es lo que vamos a hacer. Vamos a decir que quiero que este rubro sea más pequeño, por favor, sólo hasta dentro de esta consulta mediática. Eso es todo el diseño web responsive es. Como se muestra de nuevo en Dreamweaver. Aquí se puede ver que uno está actualizado. Ahora en silencio, aún no lo ha hecho. Guarda todo lo que puedas si quieres seguir usando esto, puedes obtener un “Ver" e ir a “Refresh View”, o un “F5". Eso debería ponerlo en marcha. Enfriar. Entonces voy a hacer doble clic en esta zona gris para volver completamente a salir. Vamos a ver el siguiente video. Vamos a ver cómo previsualizarlo a través de tu teléfono o tableta. Hay una característica realmente genial usando vista previa en vivo, hagámoslo en el siguiente tutorial. 12. Cómo probar tu sitio web de Dreamweaver en un teléfono móvil o una tableta: Hola ahí. En este tutorial, vamos a ver la vista previa de nuestro sitio web desde Dreamweaver directamente a nuestro teléfono móvil y va a aparecer aquí, ver el fondo verde y luego ver esto. Es de fondo rojo. El bonito de esto es que no tenemos que hospedarlo en un sitio web y solo podemos hacer ajustes en Dreamweaver directa y automática actualizaciones en un teléfono móvil. Es realmente genial. ¿Por qué lo estoy sosteniendo cerca de mi cara? Es porque mi cámara no va a hacer zoom cuando la acerque a la cámara así. Diga, yo lo sostengo aquí. Muy bien, entrémonos en el tutorial. Lo primero que tenemos que hacer si vamos a probar en un teléfono móvil es que necesitamos un sitio web real que tenga algunas diferencias cuando está en móvil. El escritorio vista, es gris, si bajo a la tableta, se pone roja y baja al celular es verde. Esto lo hicimos en un tutorial anterior. Ahora lo que quiero hacer es abajo aquí con vista previa del navegador en tiempo real. Hizo clic en esto y antes de usar Chrome, ahora vamos a usar este. Voy a tener que girarlo hacia arriba porque por alguna razón mi pantalla cae de abajo. Es necesario poder ver esto. Vas a hacer dos cosas que haremos en la vida real. Puedes usar un lector de código QR para escanear eso o puedes escribir esa URL, enviarte un correo electrónico eso a ti mismo. Voy a cambiar a la vida real humano Dan, y él te mostrará el resto. Tiempo de demostración. Lo que haces es descargar un lector de código QR. Hay montones de gratuitos en línea, todo a través de la App Store. Tengo uno en un Android aquí. Más o menos lo apuntas al pequeño código QR que generamos y ojalá te acerques lo suficiente. Hace un poco de ruido de pitido y te lleva a la página web. Ahora vas a poner tu contraseña para tu Adobe ID y eventualmente, ojalá me vaya a cargar. Ahí está, es la versión verde. enfocará la cámara en ello, tal vez, y verá esto horizontal. Es la versión roja para tablet, versión verde para móvil. Es porque hace ancho de pantalla en lugar los dispositivos reales demasiado difíciles de intentar y recoger dispositivos, cambian demasiado, así que terminas haciendo solo anchos de pantalla. Sí, lo bueno de esto sin embargo es que llegas a entonces, pega esto junto a tu computadora y conéctalo a la potencia y simplemente estar desarrollando en Dreamweaver y actualiza instantáneamente todo el tiempo en tu dispositivo móvil, puedes tener un tablet ahí y presiona el carajo a la gente paseando, te ves como un profesional. Volvamos a saltar de nuevo a la versión de captura de pantalla de mí mismo. Antes de irnos, lo que queremos hacer es agregar estos colores locos para aprobar que funcionen las consultas de los medios. No es lo que queremos para la página web a largo plazo. Nos vamos a ir y sólo a quitarnos esos. Estilos que vamos a poner para tablet primer encabezado. En realidad, sólo vamos a eliminar todo el selector. Podrías simplemente quitar el color de fondo, pero en realidad no creo que necesite el encabezado para nada más. Pasadas palabras famosas pero voy cabecera menos adiós allá, el que está en el encabezado del móvil menos, adiós. Ahora la capacidad de respuesta realmente no hace nada, pero al menos nuestras consultas de medios siguen aquí para nuestro trabajo futuro, tablet y vista móvil, en adelante y hacia arriba. 13. Cómo crear un menú desplegable móvil de hamburguesa en Dreamweaver Parte 1: En este video, vamos a crear nuestro menú de escritorio de aspecto fea, que vamos a diseñar en el siguiente video. Pero cuando se baja a la tableta y el móvil, se convierte en un [inaudible]. Vamos a hacer eso ahora en dreamweaver. Lo primero que vamos a hacer es que en este video vamos a poner como los componentes centrales y encenderlos y apagarlos para las diferentes vistas. Después de eso, en el siguiente video, veremos hacer el JavaScript que hace que la acción de click suceda al hacer clic en el menú desplegable. En el último video, o al menos el tercero de este pequeño trozo aquí será el estilo lo y solo para que se vea bonito. Lo primero que tenemos que hacer es agregar nuestra navegación y es esta etiqueta de navegación aquí. Yo quiero que sea justo después de esta imagen y hago click en esta imagen y recuerdo que hay una imagen, pero la imagen está dentro de esta una etiqueta, ese es el enlace que ponemos a su alrededor. Haga clic aquí arriba, haga clic en la imagen, y vamos a dar click hacia abajo él y decir la una etiqueta que en realidad está alrededor del exterior de esta imagen, queremos sólo hablar con usted por favor y decir navegación. Haga clic en él. A mí me gustaría después de lo que he seleccionado y ahí está. Lo primero que quiero hacer con la navegación es en un estilo a ella, para que se dé la vuelta a la derecha porque no quiero abajo aquí, lo quiero en la parte superior justo aquí. Vaya al diseñador CSS y styles.css. A mí me gustaría en Global. Me gustaría selector llamado nav y voy a usar la flecha arriba. Recuerda la especificidad. Simplemente significa que estoy diciendo la etiqueta de navegación que está dentro de la cabeza [inaudible] dentro del contenedor. No necesito preocuparme por eso porque solo tengo una etiqueta de nav para todo este documento y así no necesito ser específico. Ya no voy a decir especificidad en este curso porque es realmente difícil de decir. Quiero la etiqueta nav por favor, para flotar a la derecha, flotar como esta de aquí. Voy a decir que voló a la derecha y él sólo salta hacia ese lado derecho de la página. ¡ Impresionante! Ahora lo siguiente que quiero hacer es que quiero poner dos etiquetas div dentro de esta navegación. Una etiqueta div va a ser para mi menú móvil, que va a ser mi menú más grande esa cosa de la línea de rayas. El escritorio vista va a ser esos botones de colores que diga de nosotros y contáctanos. Básicamente lo que pasa es que tienes que separar las etiquetas div, una con el menú móvil y otra con el menú de escritorio y solo dices apagar una vista móvil y luego la otra encendida, y cambiar alrededor de tu escritorio. Vamos a sentarnos esas etiquetas div sobre nav seleccionado. Voy a ir a Insertar y doy click en div en esto a adentro por favor. Tenemos una nueva etiqueta div. Ya lo puedes ver. Ahí está mi navegador, y ahí está el tipo que está dentro. ¿ Ya necesitamos este tics? Nosotros no. Me gusta eliminar el texto aquí en vista de código. Eliminarlo en live view funciona la mayor parte del tiempo, pero me parece un poco más fácil de hacer en la vista de código. Se puede ver que está mi etiqueta de navegación abriendo y cerrando y ahí está la etiqueta div dentro de ella. Necesito dos de estos. Lo que puedo hacer es por aquí me puedo resbalar en la etiqueta div. Puedo decir otra, por favor. Justo después de él. Tengo dos. Pongamos los diferentes componentes y este primero aquí me gustaría insertar una imagen que va a anidar por dentro. Me gustaría que fuera mi menú de hamburguesas, que está bajo archivos de ejercicios, imágenes, y vamos a usar el menú de hamburguesas de la versión SVG. Se puede utilizar PNG. SVG es la versión de gráficos vectoriales escalables más reciente. Hagamos click en abrir. Se va a decir que has seleccionado algo afuera, ¿te gustaría ponerlo ahí dentro para ti? Dices que sí, por favor ponlo con mis imágenes. Ahí por favor, porque ya he practicado este, para que sea super sick para este video. Ya tengo la mía, [inaudible], no tendrás que hacer clic en reemplazar. Te darás cuenta de que es muy grande. Con eso seleccionado, puedo decir en el [inaudible] que manos realmente ha querido ser veinte píxeles. Tú decides lo grande que quieres que sea el tuyo. Impresionante. Lo siguiente que quiero hacer es deshacerme de ese texto y como lo digo, me gusta borrar el texto aquí en vista de código. Ya no necesito que eso lleve más. Tengo una etiqueta div y tiene mi imagen dentro. Pongamos en la versión de escritorio. Dentro de este tipo, puedo hacer click en ellos hay esa etiqueta div. Voy a poner algo llamado lista desordenada. Es así como describimos las listas, y la navegación es solo una lista de opciones a las que puedes acudir en una página, para seleccionar en este div y voy a decir HTML, voy a encontrar esta llamada lista desordenada. una lista ordenada es una lista numerada y una lista desordenada es una lista puntada por viñetas. Se pueden ver los puntos de bala. Vamos a quitar los del estilo un poco más adelante. Lo que quiero hacer es que quiero cambiar este texto. Yo quiero decir que éste va a ser el de nosotros. Usaré mayúsculas. No tienes que regresar, y ponte en contacto con nosotros. Podría ser yo, contáctame sobre mí porque es solo mi cartera de todos modos. Da click y ya puedes ver Tengo dos puntos de bala. Echemos un vistazo a cómo se construyen estos. Ahí hay una etiqueta div. Dentro de ella está mi lista de honor. Se puede ver el principio y el final y dentro de esta lista desordenada o los ítems de la lista, estos son los diferentes puntos de viñeta. Así es como se construye y va a ser importante para cuando más tarde vayamos y empecemos a peinarlos. Lo que me gustaría hacer mientras golpeamos es darles hipervínculo. Voy a hacer doble clic sobre nosotros, sobre mí, y dar click en éste que tiene, se vuelve naranja, dar click en el hipervínculo. ¿ A dónde se va a ir? Se va a ir a hachís. Hash es justo, no lo sé todavía. Eso es lo que significa ese ícono, o el signo de libra, podrías poner about-us.html y minúscula, pero realmente no sé cómo se va a llamar. Si no lo sabes, solo pon el hash y eso permite que sea un enlace, pero no causa un error. Se puede cambiar esto más adelante, diciendo que nos contactamos conmigo, ambos van a hachís en este momento, no lo sé. Lo siguiente que me gustaría hacer es encenderlas y apagarlas en las diferentes vistas porque en el momento en que las puedes ver todo el camino a través de escritorio de tablet móvil. Lo que voy a hacer es hacer primero el móvil, tratando de hacer doble clic en esto. Ahí vamos. Yo quiero que apagues, cuando seas una vista de escritorio. Lo que me gustaría hacer es ir a mi diseño CSS un panel y mi styles.css y mi vista de escritorio, que es global. Yo quiero decir, y yo creo un nuevo selector y éste va a ser dot mobile. Esta va a ser una vista móvil de clase. Lo que me gustaría hacer es cuando es una vista móvil. Esto es lo que va a controlar esto, vista móvil y me gustaría que no mostraras ninguno. Ninguno sólo significa que sí, no puedo verte. No pasa nada por lo que necesito hacer es encontrar la etiqueta div que está envolviendo por el exterior de esta imagen y aplicarla. ¿ Qué lo hago? Yo lo puedo hacer aquí abajo, imagen seleccionada. Ahora tengo mi etiqueta div seleccionada y hay div significa que dot mobile va eso, se ha ido. Enfriar. Esta etiqueta div ahora se llama móvil view div tag. Lo que estamos diciendo es, cuando se trata de un global que es de escritorio, me gustaría que no mostraran ninguno. El problema es que no muestra ninguno todo el tiempo. Por eso lo llaman global y no solo específicamente escritorio. Porque lo que significa es que significa todo. Significa global, significa todo. A menos que tabulador de UC sea hacer algo diferente. Pero en el momento en que voy a mi CSS y miro mi vista de tabla, mi vista de tabla no dice nada. No anula la vista móvil. Se trata de una hoja de estilo en cascada, por lo que fluye hacia abajo y fluye sobre todos estos, a menos que digan algo diferente y no lo hagan, dicen vista móvil. No dijimos nada. Eso es lo que vamos a hacer. Vamos a decir en estilos, CSS, cuando llegue a la vista de tabla, seleccione una vista móvil punto con nombre. De nuevo, se va a, en lugar de decir ninguno ahora, vamos a decir que se aplica bloque, como uno pesado. Suena como ninguna. Creo que bloque de madera, bloque de concreto, algo sólido. Ya lo veo. Trabaja para mí de todos modos. Vamos a revisarlo en un navegador. Vistas en vivo no es genial. Recuerda, guarda todo comprueba un navegador. puede ver mi menú móvil y vista de escritorio. No es ninguno. Ahora cuando se baja a la vista de tabla [inaudible], su bloque. blogger wood, y cuando se baja a la vista móvil, vuelve a desaparecer. Lo que necesitamos decir es estilos, CSS cuando está en la vista móvil, que es mi máximo de 400 píxeles. Al igual que hago otro selector llamado dot mi vista móvil. Me gustaría decir que también eres bloque de exhibición. Te puedo ver en los dos. Diga, bueno, prueba ahí. Sí. No está alineado. Eso está bien. Haremos estilismo más tarde en la mecánica aquí en este momento para poder verlo, impresionante. Lo que quiero hacer ahora es crear una nueva clase llamada desktop view y quiero aplicarla a estos botones aquí, y quiero encenderla y apagarla dependiendo de la vista. Vamos a crear un nuevo estilos, y no quiero hacerlo en Global. Podría, y podría decir, me gustaría que te bloquearan, pero ya es bloque. Siempre se puede ver esa presa en vista de escritorio. No necesito reafirmar eso. Lo que necesito decir es que la tableta está apagada. Voy a ir a mi vista de tabla y hacer clic en mi selección, y llamo a esta, vista de escritorio. No lo llamé desktop view en absoluto y un par de veces, está ebrio. Vista de escritorio y voy a decir display, ninguno va. Ahora necesito aplicárselo. Selecciono en él. Demos click en esa etiqueta div que está envuelta por el exterior y haga click aquí, click full stop to desktop no lo ha aplicado y no está apareciendo. Esto sucede un poco si necesitas presionar deshabilitar, y luego volver atrás y deshacer esto y ojalá esté ahí. Guarda un escritorio [inaudible], aún no lo hace. Voy a dejar esto en el video sólo porque todo el mundo, voy a simplemente escribirlo físicamente, hit return. Se va a decir, ¿te gustaría crear algo nuevo? Simplemente sigue golpeando retorno en tu teclado hasta que desaparezca, y se aplica. Si hago click en este tipo, puedes ver que hay mi etiqueta div y tiene esa clase aplicada. Eso me pasa un poco en dreamweaver. Simplemente lo es. Diga, bueno, vamos a previsualizar y un navegador. Se puede ver vista de escritorio. Puedo verlo, pero cuando se pone a la tableta, adiós, no es ninguno. Pero está de vuelta en él está inmóvil. Hagamos lo mismo, styles.css y vista móvil. Me gustaría crear un selector llamado dot desktop. Impresionante. Yo quisiera decir que me gustaría que no mostraran ninguno. Por favor vete, guarda viejo, evita un navegador. Se ha ido. Son amables. Eso es todo lo que hacemos. Qué dos etiquetas div, una se llama móviles llamada Desktop, y sólo las encenderemos usando display en las diferentes consultas de medios. El problema ahora es que esto aún no funciona. Vamos a pasar por ahora y usar en JavaScript para hacer este un pequeño botón desplegable y hacer que funcione. Estás listo para tu primer bit de JavaScript. Vamos a hacerlo en el siguiente video. 14. Usando Javascript jQuery para hacer un menú de hamburguesa desplegable móvil en Dreamweaver: Hola ahí. En este video, vamos a ver agregar algo de JavaScript para tomar este menú de escritorio de aspecto feo. Cuando cambia a móvil y luego cuando haces clic en el móvil, te muestra la fea versión de escritorio. Este pequeño toggle click encendido y apagado. Me doy cuenta de que el estilo no es genial y hay algunos pequeños problemas con el diseño, lo haremos en el video después de éste. Lo que realmente necesitas hacer es prestar atención al click mágico mostrando cosa que vamos a hacer en JavaScript. Vayamos a hacer eso ahora. Lo primero antes de subir y empezar a hacerlo, ¿ es lo que es JavaScript? Hay tres componentes a un sitio web, hay HTML, CSS, y JavaScript. El HTML es uno fácil, piénsalo como el sustantivo. Son las cosas que aparecen en la página, son los objetos, es este botón aquí, es esta imagen, es este texto. Esos están todos en mi HTML, y esas son cosas. Entonces tienes tu CSS, y este CSS solo describe el estilo de las cosas. Este es mi color de fondo, este es el relleno que tiene, es lo bonito, es el adjetivo. Yo los considero, HTML como sustantivos, CSS como adjetivos, las palabras descriptivas, y luego tienes el verbo, que es JavaScript. ¿ Qué sucede cuando el usuario hace clic en esto? Es el hacer de las cosas. Podría ser que el usuario haga clic en un botón, como en nuestro caso aquí, este menú desciende, o tal vez cuando un usuario hace clic en el botón “Reproducir” del video, o arrastra un deslizador, o arrastra un deslizador, o realinea cosas en una página, por lo que generalmente es el usuario interactuando de alguna manera con tu sitio web, sucede JavaScript. Cuando digo que vamos a estar aprendiendo JavaScript, en realidad vamos a estar usando algo llamado jQuery. JavaScript es mucho más complicado. Lo que hicieron algunas personas ingeniosas es que crearon esta cosa llamada jQuery, y lo que hace es que es una biblioteca que se construye encima de JavaScript para que sea fácil para gente como nosotros. En lugar de tener que escribir mucha y mucha sintaxis, podemos usar mucho lenguaje simple que hace las cosas mejores para los humanos, y hace prácticamente todo lo que necesitamos hacer en términos de diseño web front-end. No estamos aprendiendo JavaScript esencial, estamos aprendiendo algo llamado jQuery, que es solo un lenguaje más fácil usado encima de JavaScript. Vayamos a hacer eso ahora. Este pequeño fragmento de aquí va a ayudar a explicar lo que estamos haciendo. No estaba seguro si debía dejarlo en la serie tutorial o no. Voy a dejarlo y probablemente sólo para explicar esperanzadamente en lugar de sólo seguirme ciegamente. Vamos a averiguar qué estamos haciendo aquí. Básicamente, lo que estamos haciendo es que estoy previsualizando esto en Chrome, y acabo de tener algunas cosas nerdy por aquí para ayudarte a mostrarte. Básicamente, lo que me gustaría hacer es esta pequeña navegación aquí, cuando el usuario hace clic en él en su celular, me gustaría usar JavaScript. Cuando el usuario haga algo, me gustaría que el JavaScript agregara una clase a este pequeño menú de rayas llamado Expandir, y eso ampliará el menú hacia fuera. Porque por el momento, ahí está ahí menú de escritorio, tengo una clase probablemente llamaré menú de escritorio, no hay otras clases. Lo que me gustaría decir es cuando se hace clic para usar mágicamente JavaScript para inyectar una clase aquí para que se expanda. Vigila esto. Mantén un ojo en esta cosa de aquí. Cuando hago clic en él, soy un usuario, usando mi teléfono móvil, hago clic en él, y mágicamente, esta clase extra, ahí salir que se agrega. Entonces esa pequeña clase ahí la vamos a definir en nuestro CSS para decir, hacerla bonita y grande y mostrarnos el menú ahí. Eso es lo que necesitamos que haga el JavaScript. Vamos a aprender a hacer eso usando JavaScript y jQuery. Lo primero que vamos a hacer es que vamos a crear esa clase Expandir. Lo vamos a poner en nuestro styles.css. Lo vamos a poner en Global, y vamos a decir, y voy a seleccionar esto, vamos a crearlo. Se va a ver todo punto. Recuerda, es una clase que estamos inventando. Se va a llamar Ampliar. Lo que nos gustaría que esto hiciera es mostrar, y vamos a decir display block. Tu pequeño trabajo como clase es cuando te aplican a cualquier cosa es mostrar las cosas. Pero lo que vamos a hacer es conseguir que eso se aplique con JavaScript, no codificado como lo tenemos para todo lo demás. Lo siguiente que tenemos que hacer es crear nuestro archivo JavaScript y conectarlo a nuestra página de índice. Ahora cuando lo hicimos con, recuerda, nuestro styles.css sucedió automáticamente porque tenemos este pequeño panel de diseñador CSS fresco. Para hacerlo con JavaScript, lo hacemos un poco el largo camino. Vamos a Archivo, Nuevo, y vamos a Nuevo Documento, vamos a hacer clic en “JavaScript”, y vamos a hacer clic en “Crear”. Se llama sin título. Vamos a guardarlo. ¿Dónde lo vamos a guardar? Lo pondremos dentro de nuestro Escritorio, dentro de mis archivos aquí llamado Dan's Awesome Portfolio. Podría guardarlo con el resto de archivos, pero es realmente común crear una carpeta llamada js. Dentro de esa carpeta, voy a poner en este archivo llamado, es muy común llamarlo Scripts. Puedes llamar a cualquier cosa que quieras, pero la mayoría de la gente lo llama script.js. Hagamos clic en “Guardar”. Ahora vamos a cerrarlo. Acabamos de lograrlo. Lo cerramos porque ahora necesitamos vincularlo a este archivo index.html. Puedes configurar aquí mi índice y Código Fuente. Puedes ver aquí, recuerda el styles.css, esto se hizo automáticamente para nosotros. Tenemos que hacer esto manualmente, así que necesitamos poner un retorno, y tenemos que ir a Insertar y tenemos que bajar a Scripts. Llámale otra vez Scripts. Sabe que va al archivo js. Encuentra Scripts, haz clic en “Abrir” y ahí tienes. Esos están vinculados entre sí. Golpea “Guardar”, y puedes ver ahí está mi styles.css y ahora mi nuevo pequeño archivo de guiones. Este menú de hamburguesas de aquí arriba es porque es un SVG. Si utilizas la versión PNG de nuestro pequeño menú antes, esto no aparecerá allí. Simplemente ignorarlos para el resto del curso. Acude a script.js, y ahora llegamos a agregar el JavaScript, o en nuestro caso, jQuery que controla eso activando y apagando. Mentí totalmente. Todavía no estamos listos para escribir JavaScript. Lo que pasa es que tu computadora, o al menos el navegador en el que la gente ve tu sitio web , entenderá JavaScript muy bien, pero llegará al jQuery, que básicamente es taquigrafía para JavaScript and go, “ ¿Del ahorcado estás hablando? Esto no es JavaScript”. Lo que tenemos que hacer en nuestro código fuente es que necesitamos arriba aquí decirle dónde buscar, para las definiciones de jQuery, y lo haces usando algo llamado CDN o una red de entrega de contenido. Hay algunos de ellos en línea. Vamos a ir a Google, y voy a escribir jQuery CDN. Hay un montón de lugares a los que puedes enlazar. Puedes acudir a JQuery.com. Yo uso el de Google. ¿ Dónde está? Aquí abajo. ¿ Dónde está Google? developers.google.com. Aquí dice que este es ese pequeño enlace para jQuery. Voy a agarrarlo todo fragmento. En realidad, empieza ahí arriba, agarra todo ese trozo. Lo que he hecho por ti es que lo he puesto en tus archivos de ejercicio y ese código es algo llamado jQuery CDN. No tienes que venir aquí. Solo puedes copiar y pegar mi. Voy a copiarlo, y todo lo que hacemos es tirarlo aquí. Hola a todos. Me llamo Taylor y trabajo para Daniel. Solo quiero saltar aquí y hacerles saber que Daniel cometió un poco de error cuando importó la biblioteca jQuery a este archivo. En realidad va a estar al revés de lo que Daniel lo tiene. Actualmente, llama primero al archivo de scripts y luego al jQuery. El archivo de scripts en realidad se basa en el jQuery para que se ejecute correctamente. Si no tienes esto en el camino correcto, es posible que tu navegación no funcione. Es importante que solo lo cambies. Agarras el jQuery y lo pones por encima de los guiones. Esto debería eliminar la mayoría de los problemas que podrías tener con tu barra de navegación, con ella tal vez no funciona. También los archivos completados de este tutorial contendrán el orden de archivo correcto para este código. Eso sólo nos dice dónde está la biblioteca. ¿ Por qué simplemente no lo tenemos localmente como tenemos script.js y nuestro CSS en mi máquina? El motivo es que esta es una biblioteca realmente grande, y el beneficio de usar, digamos, la alojada por Google, significa que, digamos, un usuario está navegando por la red y van a 10 sitios que todos usan jQuery porque cargas de sitios lo usan. Cuando llegan a tu sitio y el navegador dice, “Vamos a tener que cargar jQuery”, y dice: “No te preocupes por ello. No lo cargaré porque ya lo he cargado desde este otro sitio web que por fin fui”. Por eso utilizamos un CDN y un enlace a un sitio web en lugar de tenerlo realmente en su máquina. Simplemente significa que Google lo va a tener en línea todo el tiempo. Mucha gente lo usa y que no tienes que descargarlo como una millonésima vez cuando llegan a tu sitio porque es justo ese mismo viejo que se ha estado vinculando ahí otra vez, por lo que el navegador del usuario no se molesta en ir y aprendiendo de nuevo todo este nuevo idioma. Ya está ahí. Ya lo sabe. Corta historia, solo tienes que copiar y pegar eso, pegarlo en la parte superior, y te ayudará. Vayamos a script.js. Aquí, vamos a aprender un poco de jQuery. Solo para que lo sepas, cuando estás diseñando sitios web, nueve de cada 10 vas a estar usando jQuery en lugar de JavaScript puro. Lo primero que tenemos que hacer es decirle que estamos usando jQuery. Se puede ver la pequeña pista de codificación ayudando ahí. Lo que vamos a decir es que vamos a poner muchos corchetes y montones de llaves. Preparémonos para ellos. primer bit es que lo vamos a poner entre paréntesis. Dentro de este corchetes vamos a escribir la palabra documento. Gracias código ayudando. Después de los paréntesis vamos a escribir listo. Todo esto solo significa es que jQuery y no carguen hasta que el documento esté listo. Porque lo que puede pasar es que jQuery puede empezar a hacer lo suyo antes de que el documento se cargue o se cargue toda la página, y solo causa muchos errores. Lo que sí dijimos es esperar a que se cargue el documento y luego haz lo tuyo, y encontrarás que no obtienes ningún error. Lo siguiente que tenemos que hacer es decirle que haga algo. Entre paréntesis decimos: “Haz algo por favor”. Pero no lo llamamos, haz algo por favor. Nosotros lo llamamos una función. Solo piensa, me gustaría que hicieras algo, pero el lenguaje de código se llama función. Ahora ponemos un conjunto de corchetes, juego de llaves, y al final ponemos un punto y coma. Estas cosas de aquí, en realidad nunca hago nada con este primer conjunto de corchetes. Estos son atributos que normalmente solo se dejan vacíos. Estos tirantes rizados son las partes realmente importantes. Vamos a poner todas las cosas que queremos hacer dentro de esto. Este último punto y coma sólo significa terminado aquí. Ya terminé. He terminado de escribir mi jQuery. No sigas más allá. Todo lo bueno va dentro de estos tirantes rizados. Podría escribirlos aquí, pero va a parecer un poco desordenado. Voy a deshacer, y lo que vamos a hacer es poner un retorno en el medio, y sólo los vamos a escribir aquí. Ahora quiero volver a decir, me gustaría decir que estoy usando jQuery. Pero en lugar de decir que jQuery es una palabra larga y cuál es la taquigrafía $. Entonces $ solo piense es la taquigrafía de la palabra jQuery. Vamos a reemplazar este aquí arriba, porque estarías raro si estás usando la palabra jQuery si uno usa $. Estamos diciendo: “jQuery, me gustaría hacer algo”. En este caso, vamos a utilizar de nuevo los corchetes. Dentro de estos corchetes, me gustaría añadir apóstrofos. No citas, apóstrofes. Porque lo que me gustaría hacer es que haga algo con la clase, recuerde periodo para clase, algo con la vista móvil. ¿ Qué nos gustaría hacer con ellos? Me gustaría mirar hacia fuera para un click. Cuando te hagan clic, me gustaría que hicieran corchetes, hicieran algo. Recuerda, no usamos la palabra hacer algo, usamos la palabra función. Igual pero una sintaxis loca. Brackets sin nada en ella, coma donde va la cosa buena y al final, ponemos un punto y coma para decir que no sigas y publicas por favor. En con lo bueno va poner un retorno. Igual que arriba, $ para jQuery. Lo mismo con la clase. Vamos a poner un apóstrofo, un punto, vista de escritorio. ¿ Qué nos gustaría hacer con esta vista de escritorio? A mí me gustaría añadir esta cosa. En lugar de un clic, éste va a tener una clase de alternancia. Esa clase de toggle va a alterar esta cosa llamada apóstrofe expandirse. Recuerda esa clase que hicimos antes. Extrañamente, no escribimos en la parada completa para esta en particular. Sólo déjalo apagado. De lo contrario, no funciona. Llega al final aquí y di que no leas más. Eso va a hacer que nuestro menú funcione. Vamos a retrodatarlo. Vamos a decir que hay una clase expandir que tengo. Me gustaría activarlo y desactivarlo, vista de escritorio cuando se hace clic en la vista móvil. Si eso fue un bender mental y hay comas y apóstrofes volando por todo el lugar, he creado un código. Puedes copiar y pegar en tus archivos de ejercicios. Puedes ir a descargar los que son gratis. Eso es escribir algunos jQuery. Vamos a ver si funciona es lo principal. Recuerda, guarda todo, salta a nuestro navegador encogerlo hacia abajo, haz clic en el botón, y no funciona. Tengo que pausar esto y averiguar por qué no funciona. Enseguida vuelvo. Ya estoy de vuelta y lo descubrí. Pasa a los mejores de nosotros. De verdad quiero volver a grabar el video y hacerme quedar súper impresionante, pero también quiero que sepas que siempre sucede. A todo el mundo le pasa. Lo que hice fue bajo el styles.css, en realidad está funcionando, lo probé, y se está agregando la clase expandir. No hay nada malo con el jQuery, es el styles.css. Qué está pasando, puse esto, quería expandirme en escritorio, pero en realidad no necesitaba esto porque está en Global. Necesito que esto sea en tablet y en vista móvil. Voy a agarrar esto, estás en el lugar equivocado, cortarlas. Yo quiero que estés dentro. Puedes ver mi consulta de medios aquí. Esto es para mi maxmin para tablet. Entonces justo antes del final del corchete de cierre ver ahí está la apertura, y ahí está el cierre. Yo los voy a meter. Necesito una copia ahí dentro y abajo a la vista móvil. Necesitaba una copia ahí dentro. Ahora, vamos a probar. Ahora, haga clic en él. Todavía no está funcionando, hit refresh. Ahora, está funcionando. Haga clic en nuestros trabajos jQuery. Todavía se ve feo, lo sé, y hay algo de maquetación por hacer, pero lo vamos a convertir en otro video porque éste, carajo, podría ser el video más largo que he hecho en mi historia de carrera de video. Sí. Esa es nuestra cosa del menú desplegable jQuery, clicky, móvil y de escritorio. Ahora hagamos que este menú se vea bonito. 15. Estilizando nuestro menú de hamburguesas consiguiendo que nuestro menú ul se apile uno al lado del otro: [ MÚSICA] Hola, encantadora gente tejedora de sueños. En este tutorial, vamos a transformar estos feos botones de navegación de punto bala en estos bonitos rojos y verdes. Ignora la fuente, la fuente sigue siendo fea. Pero lo haremos en el siguiente video. Pero hagamos los botones ahora. Lo primero que vamos a hacer es deshacernos de estos feos puntos de bala. Hacemos eso estilizando esta cosa aquí. ¿ Qué cosa vamos a peinar? Vamos a darle estilo al Li, que está en el ul, que está en mi vista de escritorio. Vayamos a hacer eso. Ahora CSS Designer panel, hazlo mi style.css, me gustaría que esto apareciera globalmente. Hagamos click en selectores. Porque tenía esta cosa seleccionada, es un poco precargada pero encaja y es una especie de lo que quiero. Pero si subo y abajo, lo hace más específico, dije que ya no diría especificidad, pero el allá vas, así que abajo significa que te pones más específico arriba se pone menos específico. Lo que me gustaría hacer porque si lo dejaba ahí y dijera solo quiero darle estilo a los li's dentro de ul que se aplicaría en toda la página web en cualquier momento haya una lista desordenada. Podría tener puntos de bala justo en las copias normales de bala. Lo que quiero decir está en la flecha abajo de mi teclado y decir quiero los li que aparecen dentro de ul que aparecen dentro de esta clase llamada vista de escritorio. ¿ Necesito esta etiqueta A aquí? Yo no lo hago. ¿ Por qué? Porque solo estoy jugando con los li's, no preocuparme por la etiqueta A. Es el li que le da el punto de bala. Haga clic en volver. Es mi primer estilo y me gustaría decir y escribir un texto. Me gustaría bajar y tratar de encontrar decoración de texto. Me gustaría encontrar lista estilo -type: indefinido. Yo quiero ponerlo a ninguno. Se ve que los puntos desaparecieron. Genial. Simplemente vamos a trabajar lentamente a través de la venta de diferentes, lo que se llama selectores compuestos. Recuerda selectores que hemos tratado con las clases antes de tener los puntos delante de ellos. Estos se llaman compuestos porque son pedacitos. Ahí hay un poco de clase, y aquí hay pedacitos de estas etiquetas regulares. Por lo que el compuesto puso es todo tipo de compuesto juntos. De todos modos no es necesario recordar la palabra compuesta. Por el momento, estos se apilan uno encima del otro. Este es su estado predeterminado para los li's, y esa pila encima de la otra se llama bloque. El predeterminado estos están en una pantalla llamada bloque, lo que significa que se apilan uno encima del otro. Nosotros queremos cambiar eso. Nos gustaría subir la parte superior aquí, a la disposición. Nos gustaría encontrar display. Y en lugar de bloque, vamos a recoger bloque en línea y eso los apila lado a lado. Fácil. Si estuviéramos peinando todos estos del mismo color, podría entrar en mi color de fondo y cambiar el color de fondo. Mi problema es que quiero que sean diferentes. Echemos un vistazo a mi expediente ilustrativo. Se puede ver un ilustrador, yo quería que fuera de dos colores diferentes. Si entretengo el li, significa que ambos van a volverse rojos o verdes. Eso no es lo que quiero, quiero que sean colores diferentes. Volvamos a saltar de nuevo a Dream Weaver. Vamos a crear dos clases. Crearemos uno llamado botón rojo y botón verde y se los aplicaremos. El motivo por el que estamos haciendo eso es que podemos volver a usar ese botón verde o botón rojo porque va a haber otros botones en nuestro sitio para los que vamos a usar esto. Aquí abajo, no importa lo que tengas seleccionado, pero va a entrar en styles.css, global y luego seleccionar esto entonces bien plus, olvida lo que hay ahí dentro. Vamos a crear nuestra propia clase y llamarla btn- y vamos a llamar a la primera roja. ¿ Por qué lo llamamos btn-rojo y no rojo btn? Simplemente significa que van a estar atascados uno al lado del otro en el CSS aquí botón verde, botón rojo. Podríamos tener un botón azul it y es simplemente más fácil encontrarlos de esa manera. Haga clic en botón rojo y voy a conseguir un fondo de tierra, y voy a escoger un color. Si has hecho mi curso de ilustrador, habrías sabido exportar el CSS. Vamos a ver rápidamente esto ahora. En ilustrador aquí, voy a dar clic en este fondo aquí. Voy a ir a Window, vamos a ir a CSS donde uso propiedades CSS. Me va a decir cuáles son los colores de fondo. Eso es lo que quiero aquí. Voy a hacer doble clic en él, clic derecho en él, haga clic en Copiar. Si hizo el curso ilustrado, podría haber exportado esto como documento de texto. Pero debido a que somos tanto el diseñador como el desarrollador web front-end, solo vamos a copiar y pegar directamente desde el archivo Illustrator. Yo lo he copiado. Vuelve a Dream weaver luego aquí voy a dar click en color de fondo. Vamos a volver a nuestros números hexadecimales. Se puede ver en ilustrador, realidad había ambas opciones. Simplemente encuentro estos más fáciles sólo porque son códigos más simples para copiar y pegar. En color de fondo aquí, vamos a volver a hex y vamos a asegurarnos de que tenemos el hash delante de él. No copié eso de Illustrator. A cambio, ese es mi pequeño color de fondo. Yo lo voy a aplicar. ¿A qué se lo aplicamos? ¿ Lo aplicamos a la etiqueta a? No creo que importe. Probablemente nos topemos con problemas más adelante. Esperemos que no lo hagamos. Vamos a entrar aquí y vamos btn y ahí está rojo, encantador. Volvamos en el color rojo, no en el relleno que necesitamos, pero lo haremos en un segundo. Haremos a este tipo a continuación. Crearemos un nuevo selector, todo está seleccionado correctamente. Llamaremos a esto un punto btn. A éste le llamaremos verde. Lo mismo. Voy a saltar a Illustrator. Aquí en ilustrar hago clic en este tipo agarró a ese tipo. Copiar, por alguna razón no puedo hacer comando c para copia controlará c en una PC. No sé por qué. Podrías ser capaz, pero aquí dentro voy a ir este. Voy a ir a mis números hexadecimales, dejar hash ahí dentro. Ese es mi verde y aplícalo a éste. Aquí vamos. btn. Esa es la otra razón por la que lo llamamos btn porque todos estaban agrupados ahí cuando escribimos en b. encantadora. Queremos agregar algo de relleno a la parte superior e inferior de estos botones. Aquí es donde es un poco de prueba y error, te lo prometo, no lo sabía de memoria, solo probé ambas opciones de peinar tanto esta de aquí porque eres como yo solo puedo peinarlo li y agregar algo de relleno a esto. Yo lo hice sabiendo que no funcionaba así que tuvimos que ir por un método diferente. Vamos por el método roto. Siempre uno genial para empezar. Tengo estos li que están dentro de mis ul, que están específicamente dentro de mi vista de escritorio, lo cual es genial. Son realmente específicos. Voy a decir que me gustaría un poco de relleno. Voy a arrastrarlo hacia arriba. Se puede ver que realmente no está agregando relleno, solo está empujándolo desde la parte superior. Ahí fue cuando fui, no está mal. Ve aquí este basurero apaga eso. Lo que decidí fue que hice clic en este tipo y me fui nuevo estilo y lo voy a hacer más específico. Presiono mi flecha hacia abajo. Tiene que ser la vista de escritorio de li's y lo que necesitaba hacer es esto una etiqueta. Abajo de abajo aquí se puede ver que hay una etiqueta dentro de un li, dentro de un ul. Te dejo esto aquí también porque me encantaría solo decirte la respuesta, pero confía en mí, estas cosas pensamos definitivamente estoy 100% seguro de que va a funcionar entonces no lo hace al final. Tienes que mirar las etiquetas y salir, Vale, ¿qué más podría probar? En nuestro caso, el enlace activo, el hipervínculo, que está dentro de la li, que está dentro de la ul, que está dentro de la vista de escritorio. Este va a funcionar. Espero que vaya a funcionar. Voy a ir a la maquetación top one. Voy a agregar algo de relleno a esto y simplemente arrastrarlo hacia arriba. Ahí vas. Ese está funcionando. ¿Qué es? Es 13 en la parte superior e inferior 13 y es 43 a la izquierda y a la derecha. 43, de nuevo, mi teclado parece estar escribiendo en doble Fours, 13 al fondo, y 43 a ese lado. Se pueden ver los de mis pequeños botones funcionando. Impresionante. Lo siguiente que quiero hacer es, necesito tipo de movimiento que sube un poco y puedes usar menos. Entonces solo dependiendo de éste, solo usamos márgenes menos y no funciona. Golpea el cubo de basura. Es un poco raro a veces como hacer ejercicio es en la etiqueta a dentro de la li que está dentro de la ul. Si te frustras, no te preocupes. Es una frustración general toda la industria alrededor. A lo mejor se lo pueda hacer a éste. El li ul y yo vamos menos aquí. Eso tampoco funciona y así me doy cuenta de que necesito ir a la vista de escritorio real. Vamos selector, hay uno que ya tengo se llama vista de escritorio. Si se lo hago a éste, se puede ver que empieza a funcionar. Voy a dar clic y arrastrar porque no estaba seguro de cómo funcionaba eso, cool cuando cierro por esa, menos cinco píxeles que sube. A veces te gusta, es éste, es éste, ¿por qué no? Terminas teniendo que crear muchas clases y eliminarlas solo para averiguar cuáles lo controlan. Vamos a hacer es un soltero. Lo siguiente que quiero hacer es quitar los subrayados. Los subrayados son controlados por, puedes jugar con todos estos, pero en realidad es el, una etiqueta porque eso es específico para los hipervínculos. Vamos a ir a esa, vamos a conseguir un tipo, y vamos a bajar aquí a tomar decoración de texto y a escoger ninguno. De acuerdo, por defecto está en subyacente. Enfriar. Vamos al color de la fuente antes de entrar en el mismo, ojalá y el color de la fuente venga de ilustrador. Doy click en este texto aquí y allá está. Ahí está la fuente y el color, y hago clic derecho en él, click copiar, volver a Dream weaver y vamos a ir al color de fuente. Hash lo deja ahí. Es como si fuera solo un blanquecino. Lo siguiente que quiero hacer, y para que funcionen estos botones, es querer aplicarlo a la fuente. Por el momento está Times New Roman, que no va a funcionar para mí. Quería mirar el uso de fuentes, algo un poco diferente a Arial y Times New Roman y las fuentes incorporadas. Eso lo vamos a ver en un tutorial separado, que está justo después de éste. 16. Cómo añadir diferentes tipos de letra a un sitio web en Dreamweaver: Hola ahí. En este video vamos a cambiar esta fea fuente Times New Roman por esta encantadora fuente Open Sans Condensed. También vamos a tener que cambiar la ortografía de esto. Acabo de notar eso. Probablemente has estado en todo este curso diciendo: “¿Eh, cambiarlo?” Lo cambiaré antes de que finalice este curso, lo prometo. Vamos a añadir fuentes usando Dreamweaver. Entonces lo que quiero hacer ahora es cambiar la fuente que está aquí. Ahora, yo podría encontrar, digamos mi vista de escritorio y se puede ver ul li y la a etiqueta. Eso es lo que quiero cambiar. ¿ Cómo sé que es esa que quiero cambiar? Tengo que teclear aquí y digo font-family y solo escojo otro. Sé que sí cambia. No quiero ninguna de estas fuentes que estén en los valores predeterminados, vale, así que voy a eliminarlas, pero así es como descubrí cuál necesita ser cambiado. Pero yo podría cambiar este y eso funcionaría. Podría instalar mi nueva fuente, que va a ser Open Sans Condensed. Pero el problema de hacerlo eso es que lo tendrá que hacer para esto. Todo el mundo que lleva a todo mi documento, va a tener que pasar y tengo que encontrar la font-familia para ellos. Lo que hacen los diseñadores, sobre todo al principio, es que definirán la fuente a nivel mundial. Diremos todo en este documento, todo sea Open Sans Condensed. Por lo que escoges cualquiera que sea tu fuente de copia corporal. Voy a mirar mi archivo de Illustrator. Ese es un caso de uso especial, está ahí para la parte superior, pero uso la fuente condensada aquí para el tipo y abajo abajo aquí, y lo uso en páginas anteriores aquí. Ese es el Open Sans Condensado. He decidido que esa es mi fuente principal. Ahora voy a pasar y poner eso como mi defecto. Lo haces en Dreamweaver. Entonces en Dreamweaver lo que tenemos que hacer es que necesitamos darle estilo a la etiqueta del cuerpo. El tag del cuerpo es, recuerda si hago clic dentro de todos modos aquí, el nav, estoy dentro del encabezado, que está dentro del contenedor, que está todo dentro del cuerpo. El cuerpo es todo lo que veo en mi página. Recuerda que el encabezado es todo lo que ve la computadora y el cuerpo es todo lo que ve el usuario. Si detengo esto, todo aquí dentro va a ser Open Sans. Para hacerlo, voy a estar en todas las fuentes- no, no voy a ser un todas las fuentes. Voy a estar en styles.CSS. Yo lo voy a hacer globalmente y voy a hacer clic- aún no tenemos etiqueta corporal. Tenemos que seleccionar esto y escogemos un cuerpo. Cuerpo es una de esas etiquetas que ya existe y no necesita una parada completa frente a él. Apenas las que creamos, hay clases que lo necesitan. Cuerpo, vamos a ir a tipo o texto y vamos a ir a font-family y podríamos escoger uno de estos. El único problema con usar, digamos que te gusta Gill Sans eres como, “Sí, Gill Sans es bueno”. puede ver que viene para el paseo porque todo se está cambiando a Gill Sans. Pero lo que realmente está pasando es decir: “Oye, persona que está visitando mi sitio web, ¿tienes a Gill Sans en tu máquina?” “ No”. “Bueno, ¿tienes Gill Sans MT?” “ No”. ¿Entonces tendremos Myriad Pro? Funciona de esta manera por debajo de la lista hasta que encuentra uno y normalmente termina en Arial. Eso no quieres. Quieres más control. En realidad quieres decir: “Usa la fuente quiero decir, no solo adivina algunas cosas”. Es muy raro usar estos ahora. Entonces lo que vamos a hacer es ir a bin Gill Sans, adiós. De acuerdo, y vamos a poner una nueva fuente. Subiremos a font-family y vamos a ir a este llamado Gestionar fuentes. Ahora, esto carga algo llamado Adobe Edge Web Fonts. Todas estas, es que unas fuentes de Adobe que nos han regalado para que las usemos comercialmente de forma gratuita. Tiene algunas opciones de búsqueda útiles en la parte superior de ahí. Vamos a usar cosas que hemos diseñado fuera de ilustrador. Se puede ver aquí en ilustrador. Me he asegurado de haber escogido fuentes web cuando estoy diseñando. Si estás en illustrator, no te vayas y escojas una fuente aleatoria de tu máquina, asegúrate de que estás usando fuentes web. Ya lo he hecho. Ambas fuentes están disponibles como fuentes web. Pero si no lo he hecho, puedo pasar por aquí y decir: “Quiero mirar algunas fuentes de encabezamiento”. Me da más fuentes de encabezamiento. Digamos que quieres algunas fuentes de copia corporal, esa es esta de aquí. Es más como fuentes estandarizadas. Voy a apagarlos a los dos. Se puede escoger una fuente de script, se puede escoger serifs. Puedes decidir solo ayudarte a elegir un estilo. Voy a apagar esos. Voy a buscar una fuente. Estamos usando Open Sans y estamos usando la versión condensada. ¿ Por qué? El hecho de que sea realmente bueno para los encabezados, sobre todo porque como fuente de copia corporal, porque es flaca, puede caber muchos caracteres en, por lo que es más probable que los encabezados realmente largos terminen en una línea en lugar de romperse en dos. Pero esa es totalmente una elección de diseño de estilo también. Lo que voy a hacer es que he escogido esto, golpeado la garrapata en la esquina, y haces clic en Listo y no pasa nada. Lo activas, luego ve a font-family y aparecerá aquí abajo. “ ¿Hola?” Ahora, haz clic en él, y luego aparecerá, genial. Aparecerá un poco de advertencia probablemente, el mío ha sido desactivado. Desactivado no es una palabra, desactivado. Simplemente dice que hemos agregado un par de cosas así como una advertencia, Simplemente dice, hemos tenido que activar la normal y el peso de la fuente es de 300. Simplemente se dijo- como normalmente esos no se encenderían por defecto, pero sólo se hace eso para que hagas que esta fuente funcione. La otra cosa que ha pasado es, y como, eso es todo, como si tuviéramos una fuente en marcha. Ya no tienes por qué preocuparte. Pero sólo para que sepas que tienes esto aquí arriba, así que en mi índice y mi código fuente, y en la parte superior aquí. Recuerda lo ponemos en el enlace a JavaScript y el enlace al CVN y nuestra hoja de estilo. Esta cosa acaba de ser inyectada por Dreamweaver para que nosotros lo hagamos funcionar. Básicamente, lo que está haciendo es que se va a descargar la fuente. Se pueden ver fuentes de borde, Open Sans Condensed se está cargando para nosotros, así que no necesitamos hacer nada con él. Sólo tenemos que dejarlo ahí. Hagamos un guardar todo, es sólo tick. Funciona en nuestro navegador. Impresionante, ahí está. “ ¿Hola?” Ponte al fondo aquí. Eso no está del todo bien. Bueno, eso no es totalmente, cierto, pero no te preocupes si el tuyo sigue roto así, lo vamos a arreglar también en el siguiente video. Hay algunas cositas que tenemos que hacer para que funcione. Muy bien, pasemos a ese siguiente video. 17. Arreglar el estilo del menú desplegable móvil de hamburguesa en Dreamweaver: Lo primero que vamos a hacer es que un escritorio se ve bien, una tableta que necesita algo de trabajo, que tenga algunos problemas reales aquí abajo [inaudibles]. El más grande es que se puede ver que no hay suficiente espacio físico para caber. Está bien en la carpeta, pero se puede ver cuando se acerca a aquí, terminó solo tratando de ocupar el mismo espacio. Lo que voy a hacer es que voy a tratar de reducir este logotipo. Para hacerlo, voy a dar click en el Logo. Voy a ir a mis fuentes. Ahora, te darás cuenta de que estas cosas acababan de aparecer, o bien entraba ahí antes. Eso es de la fuente que agregamos de las fuentes de Adobe whip edge. Simplemente ignoramos estos para el resto de la clase. Diversión. Lo que quiero es en estilos dot css, y lo vamos a poner en nuestro móvil. Vamos a crear un selector se adivinó exactamente lo que quiero. Quiero darle estilo a esta imagen que está dentro de una etiqueta. El a tag le da su enlace a, vuelta a la página de inicio y dentro del encabezado, que específicamente está aquí. Si tienes más de una imagen en estos datos, no va a funcionar. Podría tener que agregarle una clase, una realmente específica, tal vez la clase de logotipo e instalar eso, pero porque solo tengo una imagen dentro del encabezado. Esto va a funcionar bien escrito. Lo que voy a decir es ancho, consiguiendo asociarse a porcentaje. Dije a tal vez 80. Sigue poniéndome dobles dígitos para mí, y me quejé de eso todo el curso. Ocho tres por ciento. ¿ Por qué iba a ser 83 dígitos dobles. Porque ya me di cuenta de eso. Lo que eso significa es que cualquiera que sea todo el ancho no es una garantía del 80 por ciento de su tamaño original. El genial de eso, como puedes ver cuando llegue aquí abajo, va a seguir escalando. Ahora, la mayoría de los teléfonos móviles, van a ser más pequeños que unos 320. Si sí tienes teléfonos móviles que son más pequeños que eso, se va a poner realmente pequeño. ¿ Voy a desarrollar una solucion especial para ellos? Yo no lo soy. Yo sólo voy a decir que 300 y más que eso funciona y eso es la mayoría de los celulares en el mundo. Lo siguiente que hay que hacer es que primero lo haremos una tableta. Es que cuando hago clic en esto, el nulo que se pega uno encima del otro lado a lado. Podrías dejarlo si te gustan uno al lado del otro, pero quiero pegarme el mío uno encima del otro. Lo que hacemos es bajo estilos dot css y ahora tablet, decimos probablemente este ítem aquí, esta vista superior UL, LI. Podemos decir que me gustaría que exhibieran. Recuerda dijimos B inline-block, que lo consiguió, bloque lado a lado. Simplemente lo pondremos encima uno del otro. Vamos a añadir pero una caricia sólo para que no se sientan rectos uno encima del otro. Agradable, eso es un tonto para tablet. Lo que haremos es que lo haremos, ya puedes ver que no tenemos esa clase aquí en la vista móvil, así que solo la duplicaremos. Puedes duplicarlo, ir duplicar, hacer consulta de medios y lo pondremos en el móvil también. Es, y los dos. Frutos secos. Lo siguiente es la bigamia y acabas empujando hacia la izquierda aquí. Jugué por ahí con paseos flotantes y paseos de forro y simplemente no funcionó. Lo que resolví es que estos dos están dentro esta nav mobile view y desktop view clases dentro de este nav. No pueden estar dentro del mismo nav, eso va a ocupar el mismo espacio. Lo que tenemos que hacer es agarrar el móvil, estamos haciendo codificar vista aquí iba a agarrar el div móvil, toda esta línea, cortarlo.. Arriba, nunca lo voy a pegar. Ahí hay, van a eliminar algunos espacios vacíos por lo que se alinea. Por supuesto que ha perdido un poco de ella empezando, ha perdido su vuelo. Lo que vamos a hacer es ir a estilos dot css y diremos, bajo la vista, va a hacer uno, hay vista móvil y diremos volteado a la derecha por favor. Dame un segundo. Esa metalistería. Botones salen lo que podría hacer y una vista móvil aquí, podría obtener todo el texto, para alinear también a la derecha. Pero también podría hacer es, no sé, me molesta que estos tipos no estén alineados a la derecha. Yo quiero esa vista superior de disco. En vista de tablet y escritorio, me gustaría que se alinearan a la derecha. Se ve un poco mejor. Ya he hecho mesa-vista. Ahora tenemos que hacerlo para la vista móvil. Aquí abajo. Todas esas cosas ya no funcionan. Hagamos lo mismo en el móvil. Me gustaría que la vista móvil se alineara a la derecha, o en realidad flote a la derecha y la vista de escritorio, me gustaría que obtuvieras el texto para alinear a la derecha. Agradable. Estamos llegando ahí. Una de las últimas cosas que podría hacer es que el relleno en la parte superior de esto me está volviendo un poco loco. ¿Qué es? Esta cosa le entrega la imagen que está dentro de mi vista móvil en la tableta. ¿ Tengo algo un poco de trabajo, puedo involucrarte? Eso probablemente funcionará. Vamos a darle una oportunidad. Simplemente agrega un margen a la montura de arrastre superior y sí se alinea. Ahora estoy arrastrando de ida y vuelta un pixeles co, así que hacia abajo en el móvil y probablemente tenga que hacer lo mismo. Ocasionalmente los estilos fluyen a través de esa tableta hacia el móvil. Voy a guardar todo probado el navegador para asegurarme de que en realidad es cierto. Se ve bien ahí. Impresionante. Yo diría que estamos ahí y eso es una victoria. Es así como creamos nuestro menú desplegable j-query, todo por nuestras lecciones. En el siguiente video, te mostraremos cómo copiarlo y pegarlo y hacer un poco de engaño. Pero y estás orgulloso de ti mismo, ¿hiciste que funcionara? Si no recordabas eso al final de cada video, guardo una versión de donde estoy. Dependiendo de dónde te quedaste atascado, puedes mirar en la pantalla aquí en algún lugar ya sea en la parte inferior izquierda o en los comentarios. Serán un enlace al archivo completado para ese video. Puedes comparar el tuyo con éste, solo ve qué pudo haber salido mal. Pero si lo has hecho y lo has arreglado y tienes un guiño. Estoy muy impresionado, porque hace mucho calor, pero lo grandioso es que la próxima vez que lo hagas, puedes copiar y pegar el código que has hecho tú mismo. Amigos míos, pasemos al siguiente tutorial donde solo lo copiamos y pegamos para la gente que tiene engaños. 18. Planificación de nuestra plantilla Dreamweaver: Hola ahí. En este video vamos a hablar de plantillas. No vamos a diseñar realmente la plantilla en este video en particular. Lo vamos a hacer un poco más adelante, pero es sobre esta vez que realmente necesitamos considerar lo que va a ser parte de la plantilla y lo que no lo es. Echemos un vistazo a nuestro diseño en Illustrator. Al mirar el diseño, hay algunos bits que van a ser parte de la plantilla. Generalmente, siempre va a ser el encabezado y el pie de página y eso es cierto de nuestro caso. Esto va a ser lo mismo en cada página y es la parte central aquí la que va a ser única para cada página. Esta es mi página de inicio. Se puede ver aquí abajo, mismo encabezado, mismo pie de página, pero es esta parte media la que es diferente. Voy a asegurarme de que sea parte de la plantilla, asegúrate de que el pie de página sea parte de la plantilla. Diseñaré los ahora en Dreamweaver primero y luego lo convertiré en una plantilla y no hasta entonces antes de empezar a diseñar estos dentro de las partes. Diseñamos estas partes interiores. En primer lugar, vamos a tener que sacarlos, hacer una plantilla y tratar de volver a ponerlos y sólo hace un trabajo extra para nosotros. El resto de cosas que formarán parte de la plantilla es esta pequeña caja verde aquí. No quiero que esta imagen cambie. Va a ser así en todas las páginas. Voy a hacer esa parte de la plantilla. Si querías que eso cambiara en cada página, vas a tener que hacer de eso una parte de lo que se llama el área editable, como estos chicos. Simplemente identifica a partir de tu diseño qué forma parte de la plantilla, diseña eso primero, y luego más adelante haremos áreas editables. Otra cosa a considerar es ¿realmente necesito una plantilla? Las plantillas agregan un nivel de complejidad a un sitio. El bono es que cuando hago un cambio a mi plantilla, digamos que agrego un elemento de menú extra, pasa por cada página y lo actualiza automáticamente. Súper bueno si tienes un sitio que diga 50 páginas o más. Pero si tienes como un sitio web de 10 páginas, podría pensarlo dos veces en agregar una plantilla. ¿ Por qué? Porque at agrega esa complejidad para un poquito más de velocidad. Más complejidad, un poco más rápido, tal vez no vale la pena para un sitio web realmente pequeño. Pero lo vamos a hacer por éste porque queremos ser todos eficientes y oficiales. Echemos un vistazo a lo que se va a crear en esta plantilla. Este es el que estamos haciendo. Vamos a estar trabajando para esto. Vayamos a plena vista en vivo, así es como se va a ver. Va a tener nuestro encabezado que hemos hecho, va a tener esta gran imagen de fondo y va a haber nada, nada, nada y luego un pie de página en la parte inferior. Vamos a crear eso antes de convertirlo en una plantilla. 19. Añadir una imagen de fondo que esté fuera de nuestro contenedor principal en Dreamweaver: Está bien. En este video, vamos a editar esta imagen de fondo y se pone todo estirada y tiene una altura específica y luego se vuelve un poco más pequeña y se convierte en móvil. Vamos a hacerlo en este video. En primer lugar, cambiemos el color de fondo. Actualmente es blanco. En Illustrator debe ser con los seleccionados, vaya a propiedades CSS, y va a ser yay, yay, yay. De vuelta a Dreamweaver y lo que haremos es que necesitamos cambiarlo todo, ¿de acuerdo? Recuerda que la etiqueta “todo” es la etiqueta del cuerpo. Cuerpo es todo lo que vemos. Entonces vamos y cambiamos eso, podemos cambiar todo el color de fondo. Enfriar. En estilos bajo GLOBAL, realidad tenemos un cuerpo que hicimos antes, lo hicimos con la fuente para todo. Ahora podemos hacer los antecedentes para todo. Saltar al fondo, color de fondo, dejar ahí el hash, poner en un color, regresar, y ahora todo es una especie de color gris. Lo siguiente que quiero hacer es, quiero hacer esta gran imagen de fondo aquí. De acuerdo, entonces, ¿qué tan alto es? Es así de alto aquí. Se puede ver que mi CSS me ha dado la altura de la imagen real, pero en realidad está recortada dentro de ahí. Esa es la altura real que quiero, así que voy a agarrar eso. ¿A dónde va esto? En el diseño aquí, se puede ver que en realidad está envolviendo alrededor de mi encabezado, así que técnicamente, debería haber hecho esto primero justo al principio del curso y luego poner mi navegación ahí dentro. Encuentro que si empezamos con las cosas reales de fondo para el curso, nos meteremos en demasiadas complejidades, es demasiado temprano, así que lo vamos a hacer más adelante. Nos va a mostrar cómo renovar una etiqueta div que debimos haber hecho antes. Es bastante fácil, sólo tenemos que envolverlo alrededor de este tipo. Vamos a echar un vistazo. Se va a los bordes y quiero que este tipo de cosa siga para todo el fondo dependiendo de lo grande que sea el tamaño de la pantalla. Hagámoslo en Dreamweaver. Hagamos clic en mi “Encabezado”, asegúrate de tener el encabezado seleccionado, y en realidad si lo envuelvo alrededor del encabezado, todavía va a estar dentro de este contenedor. Este tamaño de contenedor sea, creo, 1200 píxeles de ancho. Tampoco quiero que se contenga ahí porque eso es más o menos lo que mantiene el encabezado en su lugar. Lo que quiero hacer es, quiero ponerlo justo fuera de este contenedor, así que necesitamos recoger el contenedor. El contenedor está seleccionado así que haga clic aquí, haga clic en el contenedor, y quiero ir a insertar un div, y quiero envolverlo alrededor del contenedor. Enfriar. Ahora puedes ver abajo aquí es div, todavía no tiene nombre, así que vamos a crear una clase CSS, y luego la agregaremos después. CSS Designer, Styles, lo haremos en GLOBAL, crearemos un selector. A esto le llamaremos hero-imagen. Enfriar. Démosle un poco de estilo básico para que podamos verlo. En primer lugar, necesita una altura porque en el momento en que esto envuelve por el exterior de este encabezado porque aquí no pasa nada mucho. Tan solo dale una altura para que podamos verlo. El alto que obtuvimos de Illustrator fue eso, 653. Agregaremos una imagen de fondo. Abajo en imágenes aquí, aquí es donde simplemente hacemos color de fondo. Justo debajo, hay un camino. Haga clic en “Buscar la imagen”. Acude a nuestros archivos de ejercicios, encuentra imágenes, este es uno de aquí llamado hero-fondo. Ahora, no pasa nada por aquí porque recuerda que acabamos de crear el estilo y no lo hemos aplicado. Ahí está, ahí. Haga clic en el “div”, si ha hecho clic fuera de él, necesita volver a hacer clic en este “div” que está justo al principio aquí y aplicarle esa clase a ella para que usted hero-imagen. Impresionante. Vamos a previsualizar en el navegador. A lo mejor guardar todo primero, comprueba en el navegador. Es tipo de funciona. Está envolviendo por fuera y es la altura correcta. Sólo se está repitiendo. Si tuvieras una pantalla más pequeña, quizás no veas la repetición, pero si tienes una pantalla realmente grande eventualmente se repetirá una y otra vez. Eso es lo que hacen las imágenes de fondo por defecto. Vamos y apaguemos eso primero y comprobarlo. Vuelve a Dreamweaver y encontremos nuestra imagen de fondo. Aquí, fondo de imagen, hay esta opción aquí que dice repetir. Antecedentes repita, haga clic en “Ninguno”. No repetir y guardar todo. Prueba en el navegador. Impresionante. Dice no repetir. Otra cosa que me gustaría que hicieras es estirar para cubrir los bordes aquí. Yo quiero mantenerlo de la misma altura. Yo quiero estirar y hay una característica genial aquí llamada portada que te ayudará cuando se ajuste. Se estirará a cualquier tamaño que sea la pantalla. Vamos a ver eso en Dreamweaver. Aquí, es una opción que dice tamaño de fondo, haga clic en la palabra “Auto”, y escoja portada. Si desactivo y vuelvo a saltar a mi navegador, impresionante. Lo que va a hacer ahora, como se puede ver, se estira como para caber y cuando llega a su altura, altura máxima, se queda ahí. Siempre va a ser agradable proporcionalmente en segundo plano. El problema con esto es que se puede ver que parte de ella se recorta cuando llega a lo más grande, en la parte superior de ahí. Enfriar. Esa es nuestra portada. Lo que también me gustaría hacer es, puedes ver, me gustaría que la imagen se centrara. Por el momento, es una especie de solo usar esa izquierda como defecto y me gustaría deshacerme del relleno en la parte superior. En primer lugar, pongámoslo al centro. Regresar a Dreamweaver, a la que llamamos posición de fondo, Haga clic en el signo de porcentaje y haga clic en “Centro”. Guardar todo. Consulta. Ahora debería ser. ¿Ves? Eso realmente funciona desde el centro ahora en lugar de pegarse a esa izquierda. Deshacernos de eso. Considera el borde en el exterior, eso es cierto de cada sitio web que se crea por defecto porque la etiqueta body, recuerda, hemos estancado el color de fondo y le hemos añadido una fuente. Por defecto, viene con algo de relleno. En realidad, algún margen que va alrededor del exterior. Eso está justo ahí por defecto. Sólo tenemos que anular eso en Dreamweaver. Encuentra nuestra etiqueta de cuerpo. Aquí está ahí. Escoge “cuerpo GLOBAL” y solo di aquí arriba, bajo “Layout”, di “márgenes”. Tiene eso todo el camino. Vamos a enlazar esto y sólo decir, simplemente escribir manualmente cero píxeles. Se puede ver que todo desapareció. Piensas que porque dice cero ahí, pensarías que está ajustado a cero, pero no lo es. Simplemente significa que no has hecho nada. Simplemente lo estoy empezando en alguna parte y luego empezando en cero. Tienes que escribir realmente en cero y golpear “Enter”. Ahora será parte del CSS. Guardar todo. Consulta en el navegador. Ya lo puedes ver [inaudible] junto a los bordes. Una última cosa que voy a hacer es que quería que eso estuviera un poco fuera de la cima. Lo que vamos a hacer es, hay una pareja que tomar, conseguimos que el encabezado tenga relleno en la parte superior, o porque tenemos esta hero-imagen ya seleccionada, podemos ponerle algo de relleno en eso. Hagamos esa. Vamos a hero-imagen y vamos a tener una carga de relleno. Yo sólo lo estoy golpeando. ¿Cuánto? No estoy seguro. Guardar. Comprébalo. Sí, está bien. Mi único problema es que la imagen de fondo es un poco oscura. Podría ir a aligerar eso más adelante, pero está funcionando. Se ve bien. Una última cosa que tengo que hacer es si miro mi archivo de ejemplo, puedes ver aquí, este era en realidad solo mi versión de tablet, misma altura. Pero mi móvil, en realidad lo he acortado un poco porque las fuentes se hicieron más pequeñas y la última es un poco diferente. Este es de esta altura, 526. Vayamos y pongamos eso. Nuestra hero-imagen está en GLOBAL. Lo que quiero hacer es que quiero hacer otra en el móvil. La altura máxima es de 400, selecciona como imagen hero-, posible que tengas que escribirla y la altura para este, va a anular lo que tenemos actualmente y ponerlo dentro. Bonito. Guardar todo. Consulta en el navegador. Navegador incluso, luego abajo, abajo, abajo y luego se vuelve un poco más pequeño. Bonito. No tienes que ajustarlos. Lo diseñas en Illustrator y en las mejores intenciones eso va a ser impresionante. Entonces tal vez tengas que hacer algunos ajustes de altura, pero el nuestro está funcionando bien en este momento. Lo siguiente que tenemos que hacer es agregar nuestra caja de contenido principal. Eso lo vamos a hacer en el siguiente video. 20. Cómo utilizar la etiqueta principal de HTML5 en Dreamweaver: [ MÚSICA] Hola ahí. En este tutorial, vamos a añadir esta etiqueta principal HTML5 aquí. Ahí es donde la mayor parte de la copia va para la página web. Vamos a hacerlo bonito y grande, vamos a darle una altura mínima, y vamos a hacerlo verde sólo para que puedas verlo. No me gusta ese verde. No se va a quedar por ahí. Vamos a ponernos y hacerlo. Hay tres trozos principales a nuestra página web. Ahí hay un encabezado, que hemos hecho, luego hay una etiqueta principal que va en el medio, y eso se trata de contenido principal, y hay un pie de página. Ya hemos hecho cabecera. Tenemos que poner en principal ahora, y sólo vamos a poner una caja principal vacía porque vamos a hacer de esa caja la cosa editable en nuestro sitio web para que pueda generar nuevas páginas y poner contenido único dentro de esa caja principal, pero necesitamos primero el contenedor. Lo vamos a poner después de cabecera. Voy a dar click en mi encabezado, asegurarme de que se deslice para allá abajo y vamos a ir a Insertar. Se puede ver aquí, estas son mi estructura principal a mi página web. Encabezado, navegación, lo hemos hecho. Vamos a hacer principal y pie de página en un segundo. Pongámoslo en principal. Va a ser después de mi cabecera, y ahí está mi caja principal. Vamos a dejar ese texto ahí dentro. Me va a ayudar a identificar dónde está realmente esa caja. Ahora debo pasar y agregar mi pie porque está destinado a estar directamente debajo. El único problema es que si miro aquí mi diseño e ilustrador, mi pie de página está justo en la parte inferior aquí y está diseñado contra un fondo blanco. Va a ser un poco difícil para mí en Dreamweaver diseñar esta cosa contra este fondo verde. Lo que podría hacer es agregar algo de altura a la caja principal. Puedo decir que puedes tener una altura de 100 píxeles solo para que empuje hacia abajo y me permita diseñar en la parte inferior aquí. El único problema con la altura, es que es una figura absoluta. Si digo que tendría 800 pixeles de alto, y mi diseño más adelante intenta ir a lo grande, digamos 800 incorpora esto simplemente bien, pero luego en otra página que estoy diseñando, 800 cuando se trata de alrededor de aquí, pero allá quiere ir montones más grandes y eso provoca montones de problemas. Eso dice: “Bueno, yo quiero tener 800”. y la imagen dice: “Bueno, quiero ser más grande. y hay una gran pelea y las cosas empiezan a derramarse por todo el lugar. El modo de evitar eso, es usar algo llamado altura mínima. Lo que dices es, quiero que seas un mínimo de 800 pero puedes ser un poco más grande si te gustó. Sé tan grande como quieras, en realidad. Se va a establecer un mínimo de 800 por máximo de infinito. Esa es una manera realmente buena de sentar alturas cuando estás diseñando plantillas. No estás muy seguro de lo grande que debe ser una caja, pero definitivamente no necesita ser así de pequeña. Tiene que ser un poco más grande que esto. Vamos a hacer eso bajo el panel CSS Designer y luego haga clic en estilos y GLOBAL y en realidad nada está haciendo clic. ¿Por qué está pasando eso? Es porque entre hacer estos videos, estaba haciendo algún otro trabajo y cambié el mío a Current. A mí me gusta Current. Significa Todo es como hemos estado trabajando en este curso. Actual significa que si lo cambio a Current y hago clic en decir eso, cambia al estilo que he seleccionado actualmente. Pero vamos a deslizarnos de vuelta a Todos. Actual es genial cuando en realidad tienes un sitio y está terminado y en realidad te estás poniendo bastante bueno en esto, pero vamos a dar clic de nuevo a All por el momento. style.css, lo vamos a poner en GLOBAL. Vamos a crear un estilo para main. No lo rellenó previamente. Recuerda, tenemos paradas completas al frente de las cosas que hacemos. El material que ya existe, como esta etiqueta principal, no lo nombramos. Simplemente existía ya. Lo agregamos. No pones el periodo al frente ahí, sólo recta vieja principal. Vamos a decir principal, me gustaría que tuvieras una altura, no esa, fuimos a la altura mínima de 800 píxeles. Eso sólo significa que va a ser lindo y grande todo el camino hasta abajo aquí así que mi pie de página después va a tener espacio para entrar ahí. Lo que podría hacer sólo para que sea obvio para ti en este tutorial, es darle un color de fondo de suficiente verde. Precisamente por qué voy a usar, en realidad, el RGBA para poder usar un poco de transparencia. ¿Por qué estoy haciendo esto? Es solo para que lo puedas ver cuando yo previsualice en un navegador y puedas ver con los principales va. Vamos a previsualizar un nuevo navegador. Se puede ver esta es mi caja principal y va todo el camino hasta aquí. Eso lo quitaremos en un segundo. Dije que hago esto por ti, pero, muchas veces, hago esto cuando estoy construyendo un sitio web. Realmente ha tenido que saber qué etiquetas comienzan y terminan. Si le agregas un color de fondo, a veces te gusta, ahí es donde va ese tipo. Los quitaremos en un segundo. Lo siguiente que queremos hacer es agregar el pie de página, y eso haremos en el próximo video. 21. Cómo añadir la etiqueta de pie de página HTML5 a un sitio web con Adobe Dreamweaver: Hola ahí. En este tutorial, vamos a añadir nuestro pie de página. Este es nuestro top, este es nuestro bonito pie de página. Va a tener dos pequeños divs dentro de ella para flotar nuestros iconos sociales a un lado. Vamos a conseguir que nuestros derechos de autor vayan al lado derecho. También vamos a agregar enlaces a todos estos, y éste va a ser genial, cuando hagas clic en él, va a abrir tu cuenta de correo electrónico. Al ver esto en el correo electrónico. Hagámoslo ahora en Dreamweaver. Lo primero es, es dónde voy a poner mi foto. Lo pondré justo, he hecho clic en “Mi etiqueta principal”, y la pondré justo después de eso. Demos click en “Insertar”, y debajo de aquí hay uno llamado pie de página, y lo pondré después, y ahí está en la parte inferior aquí. Ya puedes ver, ahí está mi etiqueta principal, y luego ahí está el pie de página también. Vamos a darle una altura y quitar este texto. Vamos al panel “CSS Designer”, “Styles.css”, “Global”, vamos a crear un “Selector”, y solo para el pie de página, por favor. Voy a conseguir que tengas una altura. Ahora, cuando digo que no pongas alturas, porque queremos que el contenido se estire más y más pequeño, eso no exactamente, no es lo mismo para el pie de página. Se puede ver aquí es esta altura. Siempre es esta altura. Podría poner una altura mínima, pero en realidad soy solo, no importará, porque lo voy a poner en una altura regular. Obligarlo a ser. Ya he comprobado que es, 120 pixeles. Enfriar. Ese es él, voy a agarrar este texto, seleccionarlo todo eliminarlo, guardar todo. Uno de los problemas, cuando lo estás borrando de esta opción, es a menudo que dejará este espacio que no rompe aquí. Básicamente eso es como una barra espaciadora. Eso está bien. Lo dejan ahí porque de lo contrario, se puede ver que la etiqueta se cierra, y realmente no se puede hacer clic en ella. Dejan eso ahí dentro. Voy a borrarlo de mi covista. No lo necesito. Mi pie de página está conformado por dos partes. Hay una, echemos un vistazo, hay una olla de iconos sociales, y hay una olla a la derecha aquí con este copyright. Voy a hacer dos etiquetas div, conseguir una para flotar a la izquierda, y otra para flotar a la derecha. Vayamos a hacer eso. Vamos a meterlos. En pie de página vamos a ir “Insertar”, insertaremos una etiqueta div, y la vamos a pegar, conseguimos mi pie de página seleccionado, así que vamos a anidarlo. Ahora con esta seleccionada, vamos a poner otra etiqueta div y será justo después de la que he seleccionado. Tengo dos de ellos. Ya vas a ver, están dentro del pie de página. Tengo dos etiquetas div. Vamos a crear dos clases. Voy a flotar uno a la izquierda, y uno a la derecha. CSS Panel Diseñador, Estilos. CSS, Global, Selector. Voy a nombrar a estos, ¿de acuerdo? Entonces voy a llamar a éste, los iconos sociales. Voy a conseguir que flote a la izquierda, y voy a hacer otra llamada, y por punto al frente, voy a llamar a éste copyright. Derechos de autor, incluso. Voy a darles un inclinado, un flotador a la derecha. Ahora, no pasa nada porque necesito aplicarlos. Esta primera etiqueta div seleccionada. Te voy a hacer los iconos sociales. Este de aquí, es raro. Este flota a la izquierda, ícono social, y este tipo se resbaló detrás de ellos. El texto se aprieta hacia un lado. Por eso cuando hago clic aquí, tengo el div seleccionado pero selecciona todo. Flotar hace algunas cosas raras a div tag, así que. Tenemos éste. Vamos a poner en los derechos de autor, y ahí vamos. Impresionante. Flota a la izquierda, flota a la derecha. Ahora vamos a poner en parte de nuestro contenido. Hagámoslo primero. Voy a tener seleccionada esta etiqueta div. Voy a ir a Insertar. Voy a insertar una imagen. Voy a insertar un anidado por dentro, y voy a salir a mis archivos de ejercicios, imágenes, y tengo iconos sociales. Tengo todos estos que sumar. Agréguelas en el orden que prefieras. Yo sólo voy a ponerlos alfabéticamente. Enfriar. Añadamos cosas a nuestra imagen. Haga clic en el “Menú Hamburguesa”. Alt-text es lo que pones alrededor de cada imagen, y es una forma de describir la imagen, y a Google le encanta cuando la describes usando buenas palabras clave. Trae tu propia laptop. Facebook. Toda imagen necesita un texto antiguo. Le dice a los motores de búsqueda de qué se trata tu página y a dónde va el enlace. Lo que vamos a hacer es, tengo una página construida ya para todas mis cosas sociales. Ve a inscribirme, sígueme en todas estas cosas. Si eres una persona de Facebook, persona de LinkedIn, persona Twitter, ve a echarme un vistazo. Voy a agarrar este, al enlace y este pedacito aquí arriba, poner su objetivo. Vamos a decir en blanco. Lo que esto significa es, por defecto si hago clic en esta imagen, vamos a guardarla realmente [inaudible] navegador. Por defecto, si levanto eso, el objetivo no es ninguno. Por defecto, si levanté el propio objetivo y solo significa que cuando hago clic en él, reemplaza esta página por Facebook. Pero porque lo he cambiado a blanco, si hago clic en él y puedes verlo lo cambia a nuestra página de Facebook real. Vamos a ir a poner el resto de estos. Qué podríamos hacer para guardar ir a, Insertar e Imagen, cada vez, solo tienes que hacer clic derecho en él e ir a duplicar. Cuando esté seleccionado, baje eso. Escojamos una nueva fuente. Que es sólo nuestra imagen. Volver a nuestros archivos de ejercicios. ¿ Dónde estás? Imágenes, icono social. Voy a hacer LinkedIn siguiente. Apagad esto. Todas estas, texto alt, tiene que ser únicas. Linkedin, ve a revisarnos allá afuera también. Se va a, seguir haciendo en blanco, pero quiero cambiar la URL, a esta, “Trae tu laptop”. Enfriar. Voy a conseguir la rotación de la mesa del editor para dar la vuelta un poco adelante. Hasta que lleguemos al último. Cuelga por ahí porque el de correo electrónico es un poco interesante. Ya estás de vuelta. El motivo por el que el correo electrónico uno es un poco diferente es que no es un enlace. No hay un sitio web al que puedas acudir por correo electrónico. Lo que haces en el enlace aquí es cambiar esto a, correo a, y luego dos puntos, necesita ser deletreado de esa manera. minúscula y luego poner en su dirección de correo electrónico. El mío es Daniel en B-Y-O-L punto IE. Si quieres enviarme un e-mail envíalo ahí. se va a [inaudible] en blanco. Lo que pasará ahora es que voy a dar click en “Off” y voy a ir dar click en Browser, guardar todo. Mira, cuando hago clic en esto, lo que pasa, es que carga tu navegador de correo electrónico predeterminado. El mío está usando el correo Mac. Sólo asegúrate de que tienes el, correo a, frente a eso y eso va a funcionar. Volver a Dreamweaver. Hay un poco de limpieza. Te deshaces de este texto aquí. Adiós texto, ya no te necesito. Lo siguiente que haremos es éste de aquí. Es bastante fácil. Esto es principalmente sólo texto. Se lo voy a robar a Illustrator. Portafolio denso, sigue pinchando en lo equivocado. Ahí está. Agarra tú, y tú. ¿ Quiero darle estilo a esto? En realidad estoy contento con el texto predeterminado. Lo que podrías hacer, podrías crear un especial de clase para esto. Dale estilo a la fuente que quieras y al tamaño que quieras. Yo estoy contento con la forma en que es. Lo siguiente que me gustaría hacer es que necesita un poco de alejarse de los bordes aquí. El alto, y los lados. Para hacerlo, voy a ir a CSS Designer, Styles.css, Global, Footer. Puedo usar margen o relleno en este caso porque no hay caja de color a pie de página. Simplemente está vacío. Lo que necesito hacer es, lo voy a empujar hacia abajo sobre eso. El único problema con eso es, que la caja realmente subió, por tanto. Empezó en 120, ahora son 120 más 33. Cuando se agregan márgenes a cosas que tienen alturas, en realidad simplemente se combinan. Ahora es como un 153. Lo que necesito hacer es menos el de esta altura. Mis matemáticas son terribles. ¿ Puedo hacerlo? ¿Es 97. Ah, voy a adivinar que es 97. Así de mal son mis matemáticas. Hubiera sacado la calculadora, pero no lo sé. Me sentí aturdida y sentí que debía hacerlo. Los márgenes de izquierda y derecha. Porque no hemos establecido nuestro ancho a partir de eso, no hemos establecido un ancho, por lo que no necesitamos menos. Podemos simplemente agregarlas a ella. ¿Qué va a ser? Van a ser unos 20 píxeles por ese lado, 20 píxeles por ese lado. Impresionante. Ahora podrías ser como, whoa, ¿puedo hacer que se centre horizontalmente? No, no puedes. Centrar horizontalmente es sorprendentemente realmente duro. Lo que tienes que hacer es simplemente fingir. Este tipo de aquí. Digamos que quieres la altura y puedes agregar un poco de altura a ésta. ¿ Qué es él? Su ícono social. Podría encontrar ícono social. ¿ Dónde estás? Ahí y le agregan un poco de relleno, porque éstos tienen que ser diferentes. Por eso no lo estoy haciendo al pie de página. Voy a añadir un poco de margen a la parte superior y sólo conseguir que parezca que está en el centro. Hay formas de hacerlo, pero es súper complicado. Derechos de autor. El mismo. él le voy a añadir altura. Haz que parezca que está en el centro. Lo siguiente que quiero hacer es, agregar espaciado entre todos estos tipos. Coincidiendo más o menos. Esto, vale, no tiene que ser exacto pero no lo voy a hacer en pantalla. Va a hacerlo en secreto en segundo plano. Lo que quiero que hagas es ver si puedes espaciar a estos tipos, sin empujarlo desde un lado aquí y todo cayendo en pedazos. Pero a ver si puedes poner un poco de espaciado. Depende de ti, cuánto. Pero me gustaría ver si puedes crear una clase o simplemente una clase o trabajar en algo para conseguir que estos espacien un poco. Muy buena suerte. Sé que puedes hacerlo, y si no lo haces y lo rompes, solo deshazlo y déjalo. Se ven bien por sí mismos. Pero quiero que te detengas conmigo, a ver si puedes agregar algo de relleno. Vayamos al siguiente video donde empezamos realmente a agregar nuestra plantilla. En realidad, una última cosa antes de irnos es esta gran caja verde. Deshacernos de la gran caja verde. Encontremos el principal y ese gran fondo verde aquí. Este pequeño bote de basura. Guardar todo. Ver en el navegador. Impresionante ahí está mi pie de página abajo. Ahí está esto y ahora vete, saca a estos tipos espaciados. Puedes hacerlo. 22. Cómo hacer una plantilla en Adobe Dreamweaver: Hola, encantadora gente Dreamweaver. Es hora de hacer una plantilla. En este video, vamos a hacer esto aquí. Se ve exactamente igual que el último video, pero ahora se llama una.dwt y tenemos esta cosa llamada “Región Editable”. Lo que eso significa es, puedo hacer montones de páginas y actualizar la plantilla, que tiene mi encabezado y mi pie de página y se derramará y actualizará todas las páginas en un gran swoop sucio. Aprendamos a hacer eso en Dreamweaver. Lo primero que quiero hacer antes de hacer mi plantilla en realidad es, hay un poco de textos aquí de los que quiero deshacerme. Puedes hacerlo en vista de código o live view, no importa, prefiero en vista de código, así que el texto se ha ido. Ahora lo vamos a guardar como plantilla. Si tengo algo seleccionado aquí arriba en mi vista en vivo, y voy a “Archivo”, guarde esta plantilla. Está gris con alguna razón. Pero si hago clic aquí abajo en vista de código, y luego voy a la misma opción exacta, cobra vida, no estoy seguro de por qué. Descripción, nunca le di una descripción. Pero en términos de “Guardar como”, esto es bastante importante. Index es un mal nombre para ello y vamos a llamar como portfolio-templates, y sin espacios, no uses ningún personaje loco y haz clic, “Guardar”. Actualizar enlaces, haga clic en “Sí”. Uno de los problemas que tuve cuando estaba haciendo este curso es de vuelta en video cuatro, yo bajo, “Sitio”, entré en sitios, bajo mi “Nombre del sitio”, cuando nombramos esto, puse un apóstrofo s, tanto en el nombre del sitio como en la carpeta que está en mi escritorio y eso causó problemas para nada excepto para esta plantilla. Fue un poco de abridor de ojos para mí. Tan solo asegúrate de que si estás teniendo problemas con tu plantilla, que no tengas caracteres divertidos ni en el nombre del sitio ni en el nombre de la carpeta local. Estoy bastante seguro de que fue el nombre de la carpeta local lo que me estaba causando problemas. Cancelar todo eso, “Hecho”, por lo que se guardó la plantilla. Impresionante. Ahora lo que realmente ha pasado, un par de cosas es, un poco de código que se ha agregado que no estaba allí antes, se puede ver plantilla comenzar en doble título doc. Se está agregando un montón de eso. El otro es, se puede ver aquí arriba la extensión dwt se ha agregado. Esa es la plantilla Dreamweaver. También notarás en nuestros archivos del sitio, puedes ver aquí esa es una carpeta nueva que se está haciendo y dentro de ella, ahí está mi portafolio. Además, cuando estás trabajando con plantillas, y notarás que live view no funciona tan bien como solía, sigue funcionando y funciona algo así, pero es un poco más difícil de usar de lo que era cuando no es una plantilla, eso no es problema y también encuentro cuando lo genero por primera vez, si lo cierro y lo reabro, va a decir, “Advertencia”, no tienes áreas editables, y yo soy como, “Cool”, necesito arreglar eso. Vamos a cerrarlo y reabrir un respaldo, [inaudible] realmente funciona mucho mejor, rápido el Dreamweaver, encantador, los amamos. Ahora lo que quiero hacer es, necesito la región editable porque en el momento todo forma parte de la plantilla, y si hago nuevas páginas basadas en esta plantilla, va a haber nada que pueda hacerle porque están todas bloqueadas. Lo que quiero hacer es dar click donde voy, recordar nuestra caja de contenido principal estaba aquí. Te das cuenta de que no resalté como solía, “Oye, es una de las peculiares”. Ha destacado aquí abajo. Pero si voy a “Insertar”, “Plantilla” en una región, recuerda que realmente ya no funciona para trabajar en esta vista en vivo, así que tenemos que usar un poco más de vista de código. Voy a destacar a estos chicos, principal porque esa es la parte que quiero ser editable. Ve a “Insertar”, ve a “Plantilla”, y voy a hacer de esta mi “Región editable”. ¿ Cómo lo vamos a llamar? Región editable tres”, sólo voy a llamar a este main-content. Haga clic en “Ok”. Ya verás que se envuelve en esta etiqueta y eso va a permitir que sea editable. Vamos a golpear “Guardar”, y así es como se crea una plantilla. En el siguiente video, te mostramos cómo generar una página a partir de esta plantilla. Está bien. Vayamos a hacer eso ahora. 23. Cómo crear nuevas páginas basadas en una plantilla de Dreamweaver: Hola ahí. En este tutorial, vamos a crear una nueva página basada en nuestra plantilla que hemos hecho y cuando vayamos y hagamos un cambio como este, mira, va a actualizar todas las demás páginas conectadas a la plantilla y nuestra genialidad de plantilla está completa. Entonces para hacer una página desde nuestra plantilla, vamos a cerrar el DWT que teníamos abierto, después vamos a ir a “Archivo”, “Nuevo”. Haremos clic en este botón aquí. Vamos a ir a Plantillas de sitio y vamos a escoger Plantilla de Portafolio. Sí, queremos actualizarlo. Es toda la razón por la que te creamos y puedes ver aquí tenemos nuestro documento sin título y puedes ver todos los códigos ocultos excepto nuestro principal. Se puede ver que hay un poco de color ahí y hay algunas otras cosas. El título debe ser editable para cada página. Por lo que automáticamente se hace eso por nosotros y sí. Se puede ver aquí arriba, esto ha vuelto a la vida. Pero estos tipos están grisáceos. Sólo el contenido principal es editable. Entonces ahora tenemos que guardarlo. Aquí es donde se pone un poco de la mente flexión. Vamos a ver nuestros expedientes. Creamos este archivo de índice. Eso es lo que hemos hecho por todo este tutorial, hemos hecho nuestra página de inicio. Entonces dijimos que los vamos a convertir en una plantilla. El problema es que la plantilla no está conectada a esta página de índice. Este tipo de aquí es inútil ahora. Nosotros lo usamos, él generó esto, pero no están conectados. Entonces tenemos que eliminarlo, porque no está conectado a nuestra plantilla. Entonces lo que vamos a hacer es que no quiero borrarlo. Voy a hacer una carpeta llamada Zold, que es vieja con una Z y solo voy a hacer clic en “Hold” y arrastrarlos ahí dentro. No quiero borrarlo por si las cosas salen horriblemente mal. Entonces aquí está en mi carpeta vieja de Zold. Lo que tenemos que hacer ahora es guardar este nuevo archivo, lo llamaremos Index, y lo salvaremos. Enfriar. Raro, ¿verdad? Generamos un archivo de índice para empezar, luego necesitábamos eliminarlo y rehacerlo solo para que esté conectado a la plantilla y a cualquier archivo nuevo ahora que necesitamos hacer. El Contáctanos página, la página Acerca de Nosotros, todo lo que necesitas es ir archivo nuevo y necesitamos generar a partir de nuestra plantilla para que estén todos conectados. Por lo que ahora en el resto del tutorial vamos a pasar por las cosas a principal. Vamos a construir esto. Vamos a tener las garrapatas y todos los botones y todas las imágenes. Pero lo que realmente quería hacer antes de irnos es darte un poco de cabezas arriba sobre cómo trabajar con plantillas y cómo asegurarte de que no te metas en ningún problema. El más fácil es asegurarse, digamos que necesita actualizar estos botones aquí, agregar un tercero, o jugar con algo. Por supuesto que necesitamos actualizar la plantilla, lo cual es una buena idea. Entonces “Archivo”, “Abrir”. Encontrarás esa carpeta Plantillas y aquí está mi plantilla. Siempre que estés actualizando la plantilla, asegúrate de cerrar cualquier otra página. Encontré en mi experiencia que si tengo Index abierto y trato de hacer cambios a la plantilla, sí lo actualiza la mayor parte del tiempo, pero he tenido algunos problemas, así que solo me aseguro de que no se abra nada más, solo la plantilla. Entonces entro aquí y te digo, amigo mío, esta imagen de aquí, quiero hacerla. No lo sé. No estoy seguro de por qué estoy haciendo esto. Simplemente, por ejemplo, “Archivo”, “Guardar”. Se va a decir que voy a actualizar estas páginas porque están basadas en la plantilla. Este es el bit cool. Esta es la parte que eres como oh hombre, esto va a ahorrar mucho tiempo, sobre todo cuando hay una larga lista. Tiene como 500 páginas y dices actualizarlas todas, por favor. Doy clic en “Cerrar” y se ha ido y los actualizé. Entonces voy a cerrar la plantilla y abrir mi Índice. Ya verás con suerte, está actualizado. Impresionante. Voy a darle la vuelta, cerrar esto. Abre la plantilla, así que solo que lo abras todo solo. Aquí abajo estaba 803. Ahorra, actualiza, todos estos tipos lo cierran. Hecho. Ya sabes lo que va a pasar. Está actualizado. Por lo que hemos hecho una plantilla. Vamos a llenarlo de asombro. Nos vemos en el siguiente video. 24. Cómo crear una caja principal responsiva para nuestro sitio web en Dreameaver: Hola allá, En este video vamos a iniciar nuestra caja de héroes responsive que está dentro de nuestra plantilla. Podrías estar mirando y yendo, “sólo puedo ver dos cosas”. Sí, solo creamos dos cosas en esta, pero hay un poco de estructura subyacente que necesitamos crear. Necesitamos crear nuestra caja de contenido de héroe, y vamos a crear algunas clases flotantes reutilizables, todo tipo de otras genialidades, así que vamos a hacerlo ahora. Tengo mi index.html abierto, así que voy a empezar a llenar mi página. Esto está conectado a una plantilla, por lo que se puede ver todo esto está gris, y puedo trabajar dentro de esta etiqueta principal aquí. Es bastante fácil, basta con hacer clic dentro en cualquier lugar, y ese es el único cuadro editable de esta página. Aquí vamos a estar trabajando en esta parte, así que se va a llamar el contenido del héroe. Tenemos esta imagen de héroe en los fondos. No necesitamos preocuparnos por él. Lo hemos hecho en tutorial anterior. Sólo tenemos que preocuparnos por las cosas de aquí, y va a ser universal, así que va a estar en esta página aquí. Va a actualizar las tomas dependiendo de qué tipo de página sea. Vamos a empezar por poner en nuestra etiqueta div de contenido héroe, y luego dejaremos de poner las imágenes, y el texto, así que empecemos. Con el seleccionado, voy a ir a Insertar, vamos a insertar un div, voy anidado por dentro, y lo voy a dejar por el momento. Voy a crear un estilo CSS. Va a ser en styles.CSS. Va a ser global y el selecto va a ser una clase. Recuérdelo parada completa al principio, y a éste se le va a llamar contenido de héroe. Qué va a hacer, va a hacer mucho. Se ve empujado hacia abajo desde arriba y lejos de la izquierda. Ya lo he medido, así que voy a hacer un margen en la parte superior aquí de unos tres píxeles, y en este lado izquierdo aquí, 100 píxeles. Ojalá si golpeo guardar todo, no pasa nada. ¿ Por qué no sucede? Es porque en realidad aún no lo he aplicado. He creado la clase y he creado un div, pero no los he conectado. Yo voy a hacer eso aquí. Este en realidad se llama contenido de héroe. Agradable, así que empuja hacia abajo y empuja hacia fuera. Encantador. Lo siguiente que quiero hacer es con mi contenido de héroe seleccionado, voy a insertar esa imagen. Yo lo voy a anidar por dentro. Gracias. Voy a ir a mis archivos de ejercicio, imágenes, y encontrar en la parte inferior garrapata igual. No está en el lugar correcto. Copiarlo a través, sí por favor. Eso va a ir a imágenes. Muchas gracias. Se salvó. Agradable. Ahora siempre que pongas una nueva imagen, asegúrate de poner el texto alt. Esto va a ser algo amigable con palabras clave sin rellenar tu sitio web lleno de palabras clave supongo. Este va a ser freelance, y el diseño web está disponible. Quedándose sin buena palabra clave pensando las cosas de todos modos. El enlace, este no va a tener un enlace ya que no va a ir de todos modos, cool. Vamos a hacer clic fuera, haga clic en el menú de hamburguesas, y lo siguiente vamos a poner algo de texto. Ahora podrías empezar a usar este marcador de posición toma aquí, pero nos va a dar algo de drama. Es mejor usar etiquetas P en lugar de ver este texto aquí no tiene etiqueta alrededor, por lo que es mejor trabajar con una etiqueta P. Doy click en esta imagen, voy a insertar HTML, voy a bajar aquí para encontrar la etiqueta P. No voy a bajar ahí, ahí está ahí, y voy a conseguir que sea justo después, cool. Dentro de estas etiquetas P, voy a hacer clic en él va naranja por fuera, y en realidad sólo voy a copiar y pegar el texto desde aquí. Enfriar. Este texto hacia abajo ya no es tan útil, así que voy a seleccionar todo eso y eliminarlo. Era el texto auto de lugar para ese div original, lo poco que se necesita. Recuerdo que hay un espacio que no rompe, se levanta, mantén la etiqueta abierta. No necesito eso. Se están apilando uno debajo del otro. Vamos a darle estilo al color en un segundo porque es negro y es supongo que tenía que ver. Pero puedes ver por defecto que quieren apilar uno encima del otro, eso sucede todo el tiempo. Ahora vamos a arreglar eso como lo hicimos abajo aquí abajo para el pie de página. En tanto que un pie un miembro, flotamos izquierda y derecha. Ahora lo que hicimos abajo allá abajo es que teníamos algunas etiquetas específicas para usar. Teníamos como iconos sociales en nuestros derechos de autor, y flotamos esas etiquetas a izquierda y derecha. El problema es que tenemos que volver a hacer eso ahora, y estamos como, “¿No sería bueno crear igual una etiqueta universal que podríamos aplicar a esta etiqueta P”. Porque puedes agregar más de una clase. Esta imagen de aquí, me gustaría aplicar una clase de elevación flotante y esta una flotación derecha. Vamos a crear eso como una cosa reutilizable, lugar de codificar en duro en estas clases, lo cual estuvo bien pero no muy reutilizable. Primero creemos una clase. Vamos a ir al diseñador de CSS, asegurarnos de que estamos en todos los estilos CSS, asegurarnos de que soy global, seleccionamos eso y vamos a llamar a este flotador de un punto, levantamiento de guiones, y su trabajo va a ser de elevación flotante. Entonces vamos a crear otro llamado float. Va a flotar bien ese va a ser su trabajo. Enfriar. Ahora sólo necesitamos aplicarlo, así que vamos a agarrar la garrapata aquí, y te vamos a decir amigo mío, ¿dónde está? Ese de ahí, no. Tú amigo mío. Vamos a dar click en plus, y vamos a decir flotar. Se puede ver que sólo es perezoso, y ahora llegamos a reutilizar esta cosa, poner ascensor. Esta cosa se apaga debajo de ella, pero está un poco atrapada. Ahora si estás mirando, podrías ser como, “¿Por qué lo flotaría bien?” No tengo ni idea. No quiero que flote bien, quiero esa etiqueta universal, así que la voy a dejar ahí, pero eso es totalmente culpa mía. Lo que en realidad quiero es que ambos floten a la izquierda. Lo bonito de eso es que si flotan a la izquierda, van a golpear uno al lado del otro lado. Se puede ver lo que pasa es que si los flotas ambos a la izquierda, se sientan uno al lado del otro. Si solo volteas una, la otra intenta colarse por debajo, y provoca muchos problemas. Asegúrate de voltear ambos a la izquierda y luego a la derecha. Lo siguiente que quiero hacer es que quiero darle estilo a este texto aquí. Ahora probablemente podría hacer un compuesto seleccionar y decir etiquetas P que están dentro de la caja de héroe. Pero veamos el diseño. Podría volver a usar etiquetas P de manera diferente, y esta de aquí, aquí es donde te encuentras con problemas. Estarás bien y dirás: “Oh no voy a hacer una nueva clase con esto porque aquí sólo hay una etiqueta P”. Pero después en el diseño te vas como, “Oh, van a ser dos etiquetas P diferentes, y necesitamos un poco más de especificidad. Lo que vamos a hacer es crear una clase, vamos a hacer click en estilos, vamos a patear global, vamos a hacer click selector, y pongamos en una parada completa, y pongamos en disponibilidad, y vamos a hacer un par de cosas. Vamos a robarle el color a ilustrador, por lo que el texto seleccionado. Podríamos usar nuestras propiedades CSS de ventana. No sé que he ido por aquí. Es otra forma de mirarlo. Vamos a hacer doble clic en el color, copiarlo, de nuevo en Dreamweaver, y quiero que mi color de texto para este de aquí sea hicks hash, y que ahora regresen y vamos a aplicarlo. Por aquí mi etiqueta P, va a tener flotador a la izquierda, pero también vamos a tener, vamos a añadir otra fría.disponibilidad. Se puede tener más de una etiqueta aplicada. Lo siguiente que voy a hacer es jugar con los márgenes porque realmente no está sentado correctamente. Lo que vamos a hacer es ir a este primero, ir a márgenes ahora. Este de aquí va a ser como siete. Notarás que subió. Cueva siete desde la parte superior, por defecto se está alineando hacia abajo en la línea de base allí. A veces juegas y dirás : “Oye, sí, golpear desde la cima tiene sentido”. Pero luego sube como lo hizo ahí. Pero no te preocupes por ello. A la izquierda de este lado, vamos a hacer 15. Yo los he medido también de ilustrador. Estamos llegando ahí. Guárdalo. Vamos a ver una vista previa y un navegador. Doble cheque, todo está funcionando, luce bien. Vamos a poner en este H1, que es este gran trozo de aquí. Yo sólo voy a agarrar el texto mientras estoy aquí y se va a meter eso. En realidad antes de seguir, sólo vamos a cortar este video aquí porque vamos a ver despejar el flotador. Yo quiero convertir eso en su video separado porque probablemente tendrás que volver a ese para hacerlo más adelante. Porque despejar el flotador es fácil de entender pero difícil recordar la sintaxis por lo que mantendremos eso como un bonito video de paquete en el siguiente, vamos a hacer eso. 25. Arreglar los problemas con las etiquetas div cuando se flota a la izquierda en Dreamweaver aka borrar el flotador: Hola ahí. Este video es para aquí para salvar el día. Tienes un sitio web donde has usado float y se aplica a algo. Ahora el objeto debajo está tratando de colarse debajo de él y generalmente simplemente comportarse mal. Vamos a arreglar esto usando algo llamado despejar el flotador y por arte de magia empujará al H1 hacia abajo así. Vamos a aprender a hacer eso ahora en Dreamweaver. Lo primero es poner [inaudible] H1. Voy a dar click en mi etiqueta p aquí. Me gusta mucho hacer clic en estos selectores de etiquetas por abajo aquí, así que agarra el principio y el final. Encuentro que siempre es fácil cuando comienzas a insertar cosas usando el diseño live view. Insertar panel, Vamos al rumbo H1. Vuelve a hacer click en él, y quiero justo después por favor y ya puedes ver este es el problema. El H1 realmente quiere colarse debajo de estos dos elementos que hemos puesto ahí. El motivo es porque flotamos a estos dos tipos y la forma en que pienso es, piensa en flotar sacándolo de la página hacia nosotros y el H1 se colora debajo porque ya no está al tanto de esos tipos porque han sido flotados. Para arreglarlo, hacemos algo llamado despejar el flotador. Sólo significa, oye, quiero que mires hacia arriba y hay unos tipos flotando por encima de ti. No quiero que los ignores como lo eres actualmente. Gran ejemplo, no, no se me ocurrió una mejor manera de explicarlo, pero, así que agreguemos una clase a este H1 para decir, oye, hay un flotador pasando y ser normal. Lo primero es hacer la clase. Se llama el Diseñador CSS, styles.CSS, nada está funcionando. Vaya a All styles.CSS GLOBAL y vamos a crear un selector. Llama a lo que quieras. Vamos a llamarlo como flotador claro. Su principal trabajo es despejar el flotador en ambos. Ahora necesitamos aplicarlo nuestro H1. Voy a entrar aquí, .clearfloat. Siempre que tengas flotador justo debajo de él, necesitas despejar el flotador. Ahora esta es una etiqueta razonable. Podemos usar esto una y otra vez. Ahora bien, si pongo algo debajo de la H1, no necesito despejar el flotador. Esto es como un solo hit. Siempre que haya flotación clara justo debajo de ella, necesitamos despejarla. Entonces no necesitamos volver a hacerlo hasta que dejemos de coquetear de nuevo. Sabrás cuándo necesitas hacerlo porque cosas que actuando nos gustaría que hicieran nuestro H1. Vamos a entrar en algunos otros detalles. Lo siguiente es poner esto toma aquí, y vamos a empezar, me gusta poner el texto por alguna razón en la vista de código, mejor. También sabes que hemos usado un ampersand aquí. codificar ampersand normalmente está bien. Se puede ver que se está mostrando bien, pero algunos navegadores más antiguos, no va a tener un buen día. Se puede ver que Dreamweaver, si lo escribo ahí dentro, está diciendo como si fuera rojo malo. El código versión de [inaudible] bien, el [inaudible] es en realidad y amp, por lo que AMP y luego un punto y coma. Sé que es raro. Pero en la vida todavía obtienes tu [inaudible] Pero no va a romper el navegador web de nadie. Pero si tienes un sitio web y estás poniendo mucho y mucho texto. Ya lo he hecho antes y nunca me he metido en problemas. Por eso fue escrito de todos modos. Una de las cosas que quiero hacer sin embargo, es hit en Illustrator. Lo he roto en tres líneas. Ahora tengo dos formas de hacer esto. Una buena manera de la mala manera. El mal camino es que si voy a lo que la rompería se rompió cruz Kiwi.Ok. Si voy a la UI, haga doble clic y voy a golpear “Return”, la diferencia y otra está basada en el diseñador. Voy a poner un retorno y aquí, escribe el código. Eso funciona. Pero puedes ver aquí mi código, en realidad tengo ahora tres H1's Ese no es un buen plan. ¿ Por qué? Porque ahora voy a tener que ir a instalar estos viejos por separado. No fue gran cosa, pero también cuando se trata de motores de búsqueda, ve, así dicen Google motor de búsqueda viene a mí y me dice: “Oye, hay un título llamado Soy Kiwi”. Dice UI y UX diseñan hasta. Ellos los ven como bloques separados, así que es agradable y fácil de poner en lugar de retornos, voy a deshacer esos todos juntos. Vuelve a entrar aquí. Justo frente a la interfaz de usuario, voy a mantener presionado “Shift” en mi teclado y presionar retorno en mi teclado de teclas. Lo que verás es que lo haré ahí, y luego voy a dar clic aquí abajo y verás que obtienes estos personajes brillantes. Te los muestro por un par de razones, es que copiarás y pegarás cosas de pedacitos y piezas y te gustaría “¿Qué diablos es un BI?” Es igual que si eres un diseñador gráfico, es un turno para diez bien, o un suave para diez, o les llaman todo tipo de cosas diferentes. En tierra web, es cuarto BI o break. Simplemente significa que sigue en rojo como un H1 completo solo con un par de saltos de línea ahí dentro. Lo siguiente que voy a hacer es querer darle estilo a este HI aquí voy a ir a Styles global select, y sólo voy a escribir en H1. Recuerda etiquetas preexistentes que no escribimos como la H1 y la etiqueta de imagen, hará el BI, no tienen paradas completas frente a ellas cuando pidas peinarlas. H1, me gustaría hacer un par de cosas. Probablemente la más fácil va a ser el color va a ser blanco. Creo que es blanco. Lo que también me gustaría hacer es actualizar la fuente. Ahora, en realidad hagamos el tamaño primero porque esa es una bonita, fácil. Entonces veremos algunos de los temas a la hora de pensar que son alrededor de 80. Sigue poniendo dígitos dobles. ¿Cuál es el tamaño correcto? Yo quiero usar esta fuente aquí, y es algo llamado Playfair. Voy a ir a usar eso. Ahora, puedo pasar por, y lo habíamos hecho antes en el curso recuerden. Fuimos a escribir, y fuimos a la familia de fuentes, y fuimos a administrar fuentes, y eso hicimos. Ahora, eso no va a funcionar en este caso porque tiene que lidiar con tanta parte de la etiqueta de cabeza. Recuerda aquí arriba, necesita agregar todas estas cosas aquí donde dice, aquí están las fuentes de la era web, por lo que necesita poder editar estas cosas. Vamos a cerrar ninguna página de índice y abrir la plantilla. Ahorra, sí. Voy a abrir mi plantilla. Eso es todo, y hazlo aquí dentro. Solo hay algunas cosas que van a suceder a lo largo de tu compilación web, ahora que tienes una plantilla, vas a tener que volver a la carpeta de plantillas. Hazlo y si te metes en problemas y te gusta, “Tal vez si lo hago en la plantilla”, vuelve a la plantilla probada en el aire, tal vez encuentres que solucione el problema que tienes. Plantilla, voy a insertar en realidad bibliotecas CC. Nota vamos a darle un piano al diseñador de CC y tengo un H1? Todavía no, así que voy a tener un H1, H3 está ahí, miento. Tipo. Acabamos de hacerles familia de fuentes y se va a administrar fuentes. Esa es una de aquí se llama pantalla Playfair. Voy a marcarlas, haga clic en “Hecho”. En realidad no pasa nada. Entonces me voy a bajar y dar clic en el “Playfair”. Impresionante. Agrega algunas propiedades para que lo hagas funcionar. Te está diciendo aquí arriba se agrega los que van y le pego a “Guardar todo”. Se va a actualizar la actualización del índice, por favor. Sí, por favor. Se puede cambiar el código burlado como no integral. Usted dice, sí. Haga clic en “Cerrar”, cierre la plantilla, y ojalá ahora cuando abramos nuestro índice. Es nuestra Playfair. Recuerda, si algo no está funcionando, posible que tengas que ir y hacerlo en la plantilla. El motivo por el que conozco ese problema particular es porque cuando estaba diseñando este curso, intenté hacerlo aquí, mi página de índice, y no funcionó. Vuelvo a saltar a la plantilla y lo hizo. Lo último que haré antes de irnos es y se va a jugar con como espaciado de líneas. No debería preocuparme, pero hay una gran brecha entre estos. Recuerda que antes nos pusimos y si hago clic aquí, le ponemos personajes brillantes. El interlineado va a funcionar en este caso, si había H1's separados, tengo que usar el margen entre esos H1s. Usamos lo actual ahora porque quiero supongo, conseguir que uses eso porque a medida que te pongas mejor, esto va a ser cada vez más útil de Dreamweaver es que tengo el seleccionado aquí y si hago clic en “Current” aquí abajo, lo corta a los computados, que solo significa que todo lo que está afectando lo que tienes seleccionado está disponible por lo que corta los menos cuadrantes todo después de un tiempo terminas con un 3D. Tengo sitios web y luego sólo seleccionar como lista se une enorme. La corriente se vuelve súper útil. Nos gusta en realidad hacer click en esto y solo te da las cosas que se le están aplicando. En mi caso clearfix está aplicando, pero no es el que quiero. H1 está aplicando, Impresionante. Lo que quiero hacer es ponerme a escribir, y quiero jugar con line-height. Voy a usar píxeles, cero píxeles. Iba a hacer clic en “Hold” y arrastrar. Es una de las otras cosas bonitas que Dreamweaver es que en lugar de tener que escribirla cada vez, puedes hacer clic y arrastrar cosas para ser un poco más de diseñador aquí. Sí, quizá con eso. Guardar todo. Eso será todo para este video. Es bastante épicamente larga, y pasemos a construir el resto de esta página. Nos vemos en el siguiente video. 26. Cómo añadir y cambiar el estilo de una regla horizontal HR en Dreamweaver: Hola, ahí. En este tutorial, vamos a hacer esta línea blanca. Se llama carreteras horizontales. No es difícil, pero hay algún estilo predeterminado que queremos ir y cambiar después. Vamos a hacerlo ahora en Dreamweaver. En primer lugar, pongamos la regla horizontal, así que se llama etiqueta hr. Eso 'como lo llaman. Voy a pegar mi H1, que es mi bateador, porque quiero parar a esto. Voy a ir a “Insertar un HTML” y todo el camino hacia abajo, justo abajo abajo se llama fila horizontal. Vamos a dar click en eso, deslízate ahí abajo está ahí. En realidad el mío terminó justo en medio de mi texto, voy a deshacer. Eso te pasa a ti. Haga clic en el “H_1". Asegúrate de que esté seleccionado aquí abajo en tu selector de etiquetas y luego ve y haz clic en fila horizontal. Yo quiero salir a complacer, y luego ahí está, es mi regla horizontal. Ahora voy a previsualizar esto en un navegador, porque por defecto la fila horizontal viene con algo de fealdad, así que vamos a revisarlo en un navegador. Ahora, es un poco difícil de ver, pero en realidad es lo que se llama Inset o Bivalent Emboss para la gente de Photoshop. Si hago zoom en cargas, empezarás a ver el estilo en él. Entonces aquí abajo, ahí está. Se puede ver que es medio blanco, medio gris, y tiene esto como pequeño cincel aquí. No me gusta. Eso se puede ver. Puedes ahorrar tiempo y simplemente pasar al siguiente tutorial. No me gusta y quiero darle estilo. Vamos a iniciar esta RRHH. Eso es lo que se considera una regla horizontal. Una de las pocas etiquetas que no tiene un principio y un final como un h1 tiene un abierto y un cierre y a HR no le gusta esta etiqueta br como unas pocas que no. Vamos a seguir adelante y darle estilo bajo CSS Designer: estilos, global select es, se va a llamar HR. Porque es uno de esos preexistentes donde no lo escribimos como el h1, algo ya preexistente en HTML. No tenemos que poner al frente el periodo. Todo tiene que ver con la frontera. Con border, vamos a decir estilo por defecto, está insertado. Te lo vamos a decir por favor color. Creo que es como un blanquecino. Por defecto lo voy a hacer blanco y luego voy a guardar todo bonito en mi navegador y ver lo que me gusta aquí. ¿Es lo suficientemente delgada? Aquí puedes jugar con ancho. Lo bajé a 1.2, juega con los píxeles. Yo estoy contento con la forma en que es. Es así como crear una línea. Es un largo tutorial para sólo una línea, pero queremos que sea una línea bonita. Después vamos al siguiente tutorial. 27. Cómo crear un botón en Adobe Dreamweaver CC: Hola ahí. En este tutorial, vamos a hacer este botón rojo. Vamos a hacer cosas geniales donde tomamos prestado CSS existente de otras clases y hemos reutilizado algunas clases, no obtenemos ofencing. Vayamos a hacer eso ahora. Entonces lo primero es ponerle un botón. Ahora, yo quería estar justo después de esta regla horizontal, así que haz click en eso. No hay botón de inserción. Entonces es solo un hipervínculo que le peinamos con algún relleno y algunos colores de fondo que parecen un botón. El botón es este tipo de aquí. Por lo que se parece mucho a este arriba de aquí que usamos para nuestro nav. Entonces en realidad vamos a pedir prestado, CSS de eso para ahorrar algo de tiempo. Entonces nuestra regla horizontal seleccionada aquí arriba en mi Live view y voy a conseguir Insertar, Hyperlink, se va a decir después, y luego voy a llamar a este Let's Talk. Enfriar, vinculando. Recuerda que aún no tenemos el nombre de la página, así que solo voy a usar hash, target quiero que sea auto, así que lo dejamos en blanco, cuál auto es el predeterminado y el título, esto es bueno para los motores de búsqueda. Por lo que ve este botón y “Hablemos” no es particularmente útil para saber qué está pasando, así que le damos algo más de información. Nos aseguramos de que sea amigable con palabras clave. Entonces este va a ser Daniel Walter Scott, porque voy a ser el diseñador UX UI que estoy tratando de clasificar en Google, contáctanos. ¿ Por qué está en las capitales? Porque dejé el bloqueo de mayúsculas encendido, probablemente debería ser solo caso de título pero estoy de acuerdo con eso. Nadie ve eso en segundo plano sobre los motores de búsqueda. Entonces ahora vamos a ir a darle estilo y lo genial al respecto es que nosotros, si te acuerdas, hicimos una clase llamada botón rojo y botón verde. Entonces tenemos que reutilizar eso. Entonces llego a la etiqueta [inaudible]. Aquí es donde llegamos a empezar a reutilizar las cosas, y esto es agradable cuando llegas a ese punto de la página web donde como, mucho del trabajo duro está hecho, se llega a empezar a reutilizar las cosas en lugar de intentar siempre crear nuevas clases. Entonces ahora llegamos a ir punto y este, recuerda que lo llamamos btn en el principio para que sea fácil de encontrar, botón leído. Enfriar. Por lo que consiguió un fondo rojo. Ahora ese botón rojo no vino junto con todo el relleno. Eso lo hicimos por separado, si recuerdas. Entonces voy a robar el CSS de este botón. Ahora, no podemos hacerlo aquí en página de índice porque es parte de la plantilla y simplemente no te deja. Si hago clic en él, obtienes un diseño CSS un panel. Déjame apagar todo eso. Entonces sí, bueno con nosotros y simplemente no funciona realmente. Entonces tenemos que ir a abrir esa plantilla y luego aquí, voy a cambiar a actual. Recordar Current me permite hacer clic en algo y en realidad me da las clases que podrían aplicarse y resulta que es esta top. Lo sé porque si hago clic en Mostrar conjunto, me va a mostrar las cosas que se aplican a esa clase en particular y no todo y sí, se puede ver el relleno y el color del texto y quitando el subrayado. Entonces eso es todo lo que necesitamos. Por lo que hay una característica genial. Podemos hacer clic derecho en esto y decir copiar todos los estilos. Había una opción aquí, también esto son solo los estilos de texto que acabamos de permitir dependiendo de lo que quieras, pero quiero todos los estilos. Enfriar. Plantilla de Gracias. Ahora lo voy a aplicar a esto. Ahora podría entrar aquí y crear otra clase, y darle estilo con esto. Voy a ser un poco más ingenioso y usar un selector compuesto. Entonces lo que voy a decir es si hay un botón rojo dentro de esta caja peluda entonces aplica este texto. Entonces tal vez ir de Corriente a Todos. Hay estilos, globales, hacer un selector. Está recogido pedacitos de ella. Entonces, ¿qué quiero? Te darás cuenta de que no ha puesto en la etiqueta a. Entonces pongámoslo en rojo botón y hero-contenido, pero no la etiqueta a. Solo comprobemos una obra. A veces lo hacen, a veces no. Entonces con ella seleccionada, voy a hacer clic derecho en ella y decir pega estilos, una magia. Por lo que está funcionando. Entonces ahora es el momento de poner un poco de espacio entre esta regla horizontal porque está coteada junto a ella. Por lo que me gustaría que fueras por el botón de pausa ahora, pulsa pausa y quiero que pienses en cómo lo haces. Puedes ir a intentarlo. Esto es lo que hago y ver si puedes darle una oportunidad. Se puede deshacer si no funciona. Golpea deshacer, y podrás ver el resto de este video. Pero ven aquí donde quiera que esté, pausa el botón y piénsalo. Vete ya. No estás deteniendo a ninguno. Lo que yo haría, en realidad hay un par de cosas que podrías hacer. Podríamos hacer esta clase aquí, y era un margen en la parte superior, o podríamos usar esta regla horizontal aquí. Voy a hacer la regla horizontal principalmente porque estoy mirando un go, realidad quiero hacer el espacio entre ahí y debajo. Entonces en lugar de tratar de hacerlas por separado, también estoy justo a través de la fila horizontal aquí. Ve a la corriente, ahí está mi hr y apago show set así que los veo todos y voy a ir al layout y quiero quizá menos un margen de la parte superior con solo hacer clic, sujetando y arrastrando y poniendo una carga en la parte inferior ahí. De cualquier manera habría funcionado, esa clase compuesta que usamos, podrías haber creado una nueva clase que hiciera espaciado, que raro, pero funcionaría. Pero lo que hice fue, hice una regla horizontal para jugar con ambos bandos. Entra y vamos a salvar todo. 28. Cambiar el espaciado de las fuentes de un sitio web para los tamaños de teléfonos móviles y tabletas utilizando Dreamweaver: De acuerdo, en este video, queremos tomar nuestra vista de escritorio, que tenemos aquí. Pero cuando llegue a la tableta, vamos a ajustar este contenido de héroe aquí. Entonces vamos a jugar con el relleno, cambiar el tamaño de la fuente hacia abajo móvil aún más. De acuerdo, vamos a cambiar el tamaño de la fuente aún más pequeño. Ajusta la altura de la línea y haremos que todo centrado sea fresco, por lo que centrado texto grande no centrado. Ahora queremos ir y hacer algunas actualizaciones a nuestro diseño responsive y hemos diseñado este tipo de caja de héroes para escritorio. Cuando se baja a la tableta, hay un par de cambios, uno de ellos está acariciando desde el lado aquí cambia, se vuelve una especie de plano y el tamaño de la fuente se hace más pequeño. El tamaño de fuente se vuelve aún más pequeño que un móvil y se centra y he desactivado esta línea aquí en el móvil. Simplemente no me gustó el aspecto que tenía cuando bajé al móvil porque todo esto estaba centrado. Vamos a hacer eso ahora en Dreamweaver. Muy bien, primer paso abordaremos el relleno. Tenemos el contenido de un solo héroe que se envuelve, bueno mi contenido de héroe y así vamos a añadir el relleno a esto. Escritorio, está bien. Ahora vamos a bajar a la tableta. Vamos a dar click en la pequeña línea coloreada que necesitamos saltar o simplemente puedes arrastrar esto, recuerda. Estamos en tabletas y quiero llevar esto al borde ahora en mi diseño e ilustrar por delante tipo de ras contra esta caja negra pero cuando estoy aquí en Dreamweaver y yo estaba practicando esto para ustedes chicos. Yo quiero tipo de tenerlo apagado alrededor de 25 pixeles qué tipo de líneas con su logo mole. Esa es una de las libertades creativas de ser el diseñador y, el desarrollador. ¿ De acuerdo? Si yo estaba diseñando esto para alguien más y me dieron un Photoshop o ilustran una maqueta. Yo lo hago exactamente como les gustó. Lo que vamos a hacer es estilos CSS lo hará para tablet y vamos a crear no hay selección en este momento ya que aquí están contenidos. Diremos contenido de héroe de punto. Sí por favor. A mí me gustaría que tuvieras un margen de 25 pixeles. Pero para conseguir ese lado, y de nuevo en los otros lados, 25 pixeles agradables. Vamos a hacer el espaciado, para el móvil también. Aquí abajo, está de vuelta a unos 100 píxeles, que era mi escritorio. Voy a decir Estilos, Sector Móvil. Aquí contenido y te diremos amigo mío, pesar de que esto es cero aquí. Pero tal vez tienes una especie de como escribirlo de nuevo porque cero solo significa que en realidad hemos levantado por defecto y el valor predeterminado está por debajo de píxeles en cuanto a los escritorios. Cero ese lado, cero ese lado. Agradable, impresionante ya que la fuente obviamente es ese gran problema siguiente sobre todo si es top. Haremos tablet primero, y lo que haremos es en una vista de tableta, vamos a iniciar el H1. De acuerdo, entonces el H1 cuando está en tableview, me gustaría que fueras un tamaño de fuente o tamaño de fuente y ahora debería ir a revisar Illustrator. Supongo. Eso parece bien, tal vez un poco pequeño. La otra cosa que necesito hacer es jugar con mi espaciado de líneas, bien, bueno mi altura de línea y píxeles cero, y voy a conseguir que esto sea algo. Está bien, hagámoslo por móvil. Hay un par de cosas que necesitamos hacer una es hacerla mucho más pequeña. Estilos móviles, selector rango uno y vamos a hacer un par de cosas vamos a hacer, primer lugar, tamaño de teléfono bien. En realidad, voy a revisar qué es lo que tiene aquí dentro. Debería revisar esto. Estás en 46. Tamaño de fuente, píxeles 446. Recuerda que ese es mi teclado por alguna razón, escribe dos dígitos ahí dentro. Está bien, así que ese es el tamaño y lo voy a anular en cuanto lo haga, también escucho eso. Vamos a hacer sentado el centro. De acuerdo, ahora está alineando todo el texto al centro. De acuerdo, se puede ver aquí, pero se puede ver aquí abajo no se hace estos otros atributos. Lo que vamos a hacer es en lugar de iniciar el H1 para centrado y obtenemos una curva que y como no hacía ese texto, todo era texto y estaban centrados pero en realidad quiero que otras partes se necesiten seleccionar también porque eso fue sólo el H1. Lo que vamos a decir es volver a este contenido de héroe y decir quiero que todo aparte U se centre. De acuerdo, ahora la línea, esta imagen de aquí, este tipo de aquí no soy yo como, “Oye, acabas de decir eso”. Es porque éste está flotando. De lo que haremos en este caso, crearemos una clase especial solo para empujarlo un poco. Haremos cuánto los odiamos pegados a ahí, puedo ocultar los artículos, lo haremos a continuación es ir a instalarlo. Pero antes de hacer eso, vamos a guardar todo y previsualizar el navegador. De acuerdo, entonces tabletas de escritorio más pequeñas y el relleno es diferente, lo cual es impresionante un móvil sangrado se hace más pequeño y tenemos que hacer el espaciado de líneas, que no hicimos así que fue el H1. Espaciado de línea H1 móvil, textos, altura de línea, píxeles más grandes. Eso se trata de agradable, guardar todo sólo en el navegador, mejor. A lo mejor necesitaba ser un poco más alto. Si no tienes cosas estriadas como lo hicimos aquí, eso va a ser todo lo que necesitas hacer. En la siguiente parte, lo guardaremos para el siguiente video, y vamos a desactivar esta línea aquí y vamos a conseguir algunas clases especiales para empujarlo y no es nada de fantasía que sólo le vas a aplicar clase y decir tener pendiente en móvil, que tipo de lo pone centrado. Puede ser realmente difícil de ver correctamente a las cosas cuando flotaba. Sólo vamos a hacer trampa. Muy bien, al siguiente video. 29. Cómo desactivar partes de un sitio web en diferentes vistas sea con dispositivos móviles o con computadoras de escritorio: En este video, vamos a desactivar esta regla aquí cuando llegue al móvil, porque eso es lo que he hecho en mi diseño. Vayamos a hacer eso. Lo que vamos a hacer es que vamos a hacer un selector compuesto, pero lo vamos a hacer dentro del móvil porque esta es la única vez que quiero que esta cosa se active. En styles.css cuando estoy en el móvil, no tengo nada que controle la regla todavía. Podría simplemente tener hr y girarlo para desactivarlo y si uso una regla en cualquier otro lugar, se va a apagar también, así que voy a ser un poco más específico. Voy a decir contenido de héroe. Sí, si hay una regla horizontal dentro de aquí un contenido, entonces quiero desactivarlo. A veces probablemente me salgo con la suya sólo hr. Voy a usar otra regla horizontal en tu casa en el sitio? Creo que sí. Sí, no quiero apagarme. Esta regla específica que está dentro de este cuadro de contenido aquí se va a desactivar cuando, asegúrate de que show set esté apagado para que puedas ver todo. Yo quiero ir a exhibir y ir a ninguno, cool. Guardar todo, revisando el navegador. Se puede ver aquí tablet todavía ahí pero en móvil ido, fácil. Un par de cosas que quiero ordenar es tal vez haya algo de relleno aquí abajo. En el tutorial anterior fui muy inteligente y dije usemos la regla horizontal para el relleno. Usamos ese estilo para dar esta brecha entre éste y el botón, pero porque entre esa regla fuera, esta vez desaparece. Yo quiero agregarle un poco más, además quiero empujar esto de un lado. Vamos a hacer eso ahora en Dreamweaver, bajemos a esta vista para que pueda verlo, así móvil y está ahí y se inhabilita. Ahora, ¿ha discapacitado? Por alguna razón no está deshabilitando aquí en live view y por eso prefiero probar en el navegador. Solo hay algunas pequeñas cosas peculiares que no pasan a la vista en vivo. Es útil para seleccionar cosas, pero no lo utilices como tu vista de trabajo de acabado absoluto al 100 por ciento. Usa el navegador para eso. Lo que haré es que voy a hacer un selector compuesto. Cuando hay un h1 y está abajo en el móvil, me gustaría agregar un poco de relleno a la parte inferior. Yo sí tengo un h1, eso ya está en móvil. Puedo usar a escondidas este selector ya porque estoy en styles.css, estoy en mis estilos móviles y ya hay un h1, puedo decir, hey, quieres meterte en h1 ¿puedes un poco de margen por abajo? Ahí va, ha desaparecido. Este podría ser solo mi programa. Termino teniendo realmente probando versiones de Dreamweaver, cómo solucionar bug y hacer videos para Adobe, pero a veces el mío va un poco bang. Vamos a quedarnos en el navegador, sí, se ve bien. Lo que espero es con sólo pequeñas cosas así, me encantan los de esos pequeños golosinas que tienes y te gusta, "ojalá pudiera, ya hay una etiqueta, y sólo puedo ajustar esa”. Se deja de crear clases para hacer todo, se empieza a reutilizar clases. Otra cosa que quiero hacer es este tipo de arriba aquí, necesito empujar un poco de relleno a la izquierda a falso centro porque es un flotado a la izquierda, es muy difícil de gustar naturalmente que se centren como lo hicimos con este texto en un botón. En realidad vamos a decir sólo esta cosa aquí llamada elevación de flotación de imagen, que está dentro del contenido del héroe. Vamos a seleccionar sobre él. Vamos a crear CSS panel diseñador estilos CSS, styles.css. Lo haremos globalmente, continuación sabes que estamos haciendo móvil y solo comprobaremos si no tenemos nada. ¿ Tenemos algo que diga, encabezar una imagen? No, aquí no hay nada. Vamos a crear uno. Es así. Ahora eso no es suficiente. Cualquier cosa que le quede flotante aplicado dentro de nuestro contenido héroe va a agregar este relleno y el momento que solo es esta imagen, en realidad ambas imágenes, no va a funcionar porque ambas van a conseguir algo de relleno en el lado izquierdo. Vamos a tener que ser un poco más específicos. Ahora bienvenido al extrañamente empuñado de la web es si digo img aquí, eso no va a funcionar. No es la forma en que se construye esto. Vamos a editar, vamos por aquí y algún margen, solo adivina un margen por el momento, pero obviamente no hay nada está cambiando. Eso tiene flotación izquierda que está dentro de nuestra caja de contenido. A lo mejor es al revés, a lo mejor es el img de imagen que tiene un flotador claro aplicado y todavía no funciona. Es por que estas cosas están pegadas juntas. Este flotador de acantilado está unido a esta imagen por lo que no puede haber un espacio entre aquí. Esto te atrapará, me atrapa. Es una de esas cosas divertidas donde la imagen y luego un punto, eso significa esos dos a los que realmente me uní y conecté entre sí ahora se va a aplicar. Con eso, los voy a arrastrar un poco más. Agrado. sí, hemos aprendido un par de cosas y tengo una tendencia cuando estoy haciendo los cursos solo para mantenerlo agradable y simple y asegurarme de que no haya nada demasiado difícil como estas cosas raras donde hay una instancia donde nosotros únete a estos dos y no hemos podido centrarnos porque lo flotó, pero estoy dejando este en particular porque son tiempos con cosas que significan trabajar no funcionan y encuentras que las solucionaciones para que se vayan les pasa a cada diseñador web. Lo que debo hacer es volver potencialmente al principio y reestructurar cómo hago este lado para que no tenga particularmente este problema, pero nadie hace eso. Llegas a un punto, eres como si me vuelvo doble solo para arreglar esa cosa o lo hago un poco hacky para arreglarlo? Esto no es particularmente hacky, pero solo para que sepas que hay momentos que nos gustan, en realidad sólo voy a añadir una clase para que lo fudge, porque muchas veces no hay repercusiones. Se ve bien para el usuario. La experiencia del usuario es genial, la interfaz de usuario se ve bien, todo el mundo está contento pero si alguien mirara tu código, podría volver a mirarlo y decir, "maldita sea esa es una forma fea de hacer eso”, y definitivamente me decir que si eres desarrollador y estás mirando mi código, te horrorizaría ver el contenido de la palabra héroe todo escrito con guiones. Probablemente solo ponen hc, guárdelo bonito y sencillo. Mantén el código realmente ligero. me gusta escribirme pequeñas notas con mis clases como imagen de héroe y vista móvil. Pero ese es solo mi estilo y supongo que viniendo de más de un fondo visual, necesito ver esas cosas en el código para ayudarme. Eso es todo para este video, pasemos al siguiente donde empezamos a mirar las columnas de imagen. Impresionante. 30. Cómo crear una rejilla de imagen responsiva en Dreamweaver: Hola ahí. En este tutorial, vamos a sacar nuestro diseño de ilustrado aquí donde tenemos tres columnas de seis imágenes y ésta sólo tiene dos columnas. Cuando se baja a la tableta y luego baja al móvil, que consiguió una columna y apagamos un par de las imágenes, así que seis abajo a sólo cuatro de ellas. Terminaré luciendo algo como esto. Aquí está mi vista de escritorio, abajo a tabletas y luego abajo a mi pared con sus apenas cuatro plus lo hará porque cosa elásticos donde más aprovechan el espacio. Vamos a aprender a hacer eso ahora en Dreamweaver. En realidad estamos de vuelta aquí en ilustrador porque quiero explicar cómo funciona la estructura. Lo que vamos a hacer es que vamos a crear estas columnas aquí y nuestro diseño las tiene cambiando. Se puede ver que tiene tres columnas, bajan a dos, y luego bajan a una. Lo que necesito hacer o necesito explicarles es que vamos a crear una caja, así que aquí una columna, y vamos a hacer que sea 33 por ciento del ancho. Eso se va a pegar uno tras otro y porque hemos guardado nueva imagen, o columna de pared sea 33 por ciento, la siguiente imagen va a caber, la siguiente imagen va a encajar, pero la siguiente es sólo marco, sólo es 100 por ciento para escoger, así que va a empujar hacia abajo a la siguiente fila. El motivo por el que esto es útil es que cuando estás en tablet, es que puedes decir esa misma imagen exacta, pero ahora ocupas el 50 por ciento del espacio, lo que 30 por ciento y luego intenta encajar en la siguiente, pero no es tan firme, así que se descompone. Lo mismo cuando bajamos al móvil, misma imagen, pero vamos a decir cuando estás inmóvil, eres un compañero del 100 por ciento, así que el otro 100 por ciento no puede caber, así que si está por debajo y simplemente siguen apilándose. Esencialmente esto va una pila uno encima del otro, pero simplemente le damos diferentes porcentajes. Así funciona el azulejo receptivo como éste. Vamos y realmente hagamos eso ahora en Dreamweaver, te lo prometo, esta vez es Dreamweaver. Antes de poner esas columnas, necesitábamos un contenedor para ponerlo alrededor. Arriba por aquí tenemos un contenedor llamado contenido de héroe y recuerda que son las pilas en la parte superior que se llevará el cada uno lo hemos guardado en una bonita cajita. Entramos lo mismo para nuestras imágenes para que principalmente así podamos poner algún relleno entre este y el contenido del héroe porque se seleccionaron cinco contenidos del héroe, así que pincha aquí en algún lugar, haz clic en contenido del héroe, y luego yendo a inserta HTML Div y lo pondré después por favor, verás que abajo por aquí, realidad está golpeado justo debajo del botón superior de la lista, no esta imagen en el fondo, principalmente porque se trata de una imagen de fondo y dijimos en segundo plano y nadie realmente puede afectarte. Por eso podemos poner nuestros palos en la parte superior. Necesitamos agregar alguna herramienta de relleno, así que vamos a crear una clase para hacer eso. Diseñador CSS, lo vamos a hacer globalmente y vamos a decir que vamos a hacer una cuadrícula de imagen de cotización, lo que sea que te guste, y vamos a añadir algún margen a la parte superior. Nada aplicando así por aquí, vamos a aplicar una primera imagen de clase. Hay un poco de hombre relleno y dijo un poco más hasta que estoy más o menos feliz con ello. Ahora vamos a poner en nuestras columnas, así que con nuestra imagen Div buena seleccionada, vamos a ir a insertar, vamos a insertar otra división del espacio. Voy a decir dentro de aquí, por favor me gustaría columna, voy a colarla, es un poco difícil cuando empiezas a tener esto ahora, hay dos, voy a poner un Div y luego el Div dentro de ella y tú estás como, con cuál me estoy perdiendo? Vamos rápidamente a agregarle una clase, así que lo que haremos es CSS Designer, y hagamos una clase. Vamos a llamar a este col como su columna. Eso es solo un estándar de la industria lo llamas columna y muchas veces lo hago porque es fácil de entender, pero quiero acostumbrarme a algunas de estas sintaxis o nombres comúnmente usados para que cuando empieces a trabajar en el proyecto de otra persona o otro sitio, es posible que reconozcas estos. Esta columna de aquí, primero que nada les demos un color de fondo, realmente no necesitamos el color de fondo, solo lo quería aquí para poder describir lo que estoy haciendo. Yo lo voy a aplicar aquí para decir dot col. A veces es fácil mirar hacia abajo en la vista de código, se puede ver Tengo un Div llamado cuadrícula de imagen, y dentro de ahí se puede ver hay el principio y ahí está la abertura, dentro de ese es mi color, y también hay este texto aleatorio, que voy a eliminar de la vista col. Ya no necesitas, un poco más útil. Ahora podríamos entrar y dar click en este, se puede hacer clic con el botón derecho todavía, e ir a duplicar, y tener seis de ellos, Comando D en un Mac es el atajo, vamos a Controlar D el en un PC, así que conseguimos seis de ellos ahora. Pero antes de que hagamos eso, y se puede ver que se apilan uno tras otro, voy a deshacer, que es Command Z controles automáticos en una PC. Lo que quiero hacer es agregar una clase específica para escritorio, porque si miramos a illustrator, puede ver el escritorio es 33 por ciento, esto es 50 por ciento, y esto es 100 por ciento, así que vamos a crear tres clases y simplemente activarlas en diferentes consultas de medios. Vamos a decir cuando tu escritorio sea 33 por ciento, 40 por ciento, 100 por ciento, así que crea la versión de escritorio fest. Primero que vamos a crear un selector, vamos a colarlo, poner en estilos globales, y vamos a llamar a este uno.col y voy a usar lg. Ahora, lg no es solo otra forma común de enfriar la vista de escritorio, podrías colcolumn-desktop para que sea más fácil para ti, pero verás en otros sitios a personas que usan col-lg en su lugar. Vamos a colarlo como eso, vamos a decir que me gustaría que fueras un ancho de porcentaje, asegúrate de que sea porcentaje y 33 por ciento. A menudo cambiará de nuevo a píxeles así que si estás teniendo molestando, como el mío no está funcionando, probablemente por defecto, esprobablemente por defecto,realmente quiere ser pixel así que vas a forzar porcentajes ahí dentro. Eso está funcionando, tenemos que aplicarlo ahora, así que col, grande, gano 33 por ciento mientras que de alguna manera. Ahora vamos a crear listas duplicadas, así que vamos a duplicar y se pueden apilar uno encima del otro. No se están pegando uno al lado del otro como necesitamos todavía, pero eso va a ser lo básico. Vamos a tener subsidios y total, pero volvamos atrás y arreglemos el primero, voy a deshacer algunas veces, ahí está. Lo que quiero hacer es meterlos en float left, así que lo que voy a hacer es mi pequeño flotador de clase reutilizable que queda. Ahora los voy a duplicar, así que Comando D, sin ficha, y tengo seis. Si necesitas otra fila, solo di Command D en un Mac o Control D en un PC, y sigue duplicándolos. Echemos un vistazo en el navegador, así que guarda todo, salta al navegador. Se puede ver aquí, agradable y sensible también, porque es 33 por ciento, tal vez no se hacen más grandes que nuestro ancho máximo que ahorramos para nuestro escritorio, pero se ponen bonitos y te calamar aquí abajo. Una de las cosas que quiero de mi diseño es un poco de espacio entre medio, así que vamos a entrar a Dreamweaver y lo que vamos a hacer es, por la columna grande, o sí lo queremos hacer por un col, lo haré para la columna, por lo que cada columna en cada vista individual no solo una grande, solo va a tener un poco de relleno, lo cual es cierto de mi diseño. Lo que voy a hacer es col, voy a decir que me gustaría un poco, podemos usar porcentajes, podemos usar porcentajes, así que quiero poner 1 por ciento este lado, 1 por ciento este lado, y 1 por ciento este lado. Te darás cuenta de que mi diseño ahí se ha ido y roto, es porque esto se suma a mi 33.3 por ciento que agregué a mi caja, lo que 33.3 por ciento veces tres más lo pendiente en el lateral naufraga todo. Lo que vamos a tener que hacer es saltar a mi lg, col mi lg, y nuestro 33 por ciento va a ser como 31.3 por ciento. Eso no es lo que está saltando a píxeles. Recuerda dije que trata de hacerlo, me hace eso también, así que ahora todos encajan, entonces que tienes que añadir en cuanto a relleno vas a tener menos del ancho que estás usando, y lo último es que yo realmente quieren relleno en la parte inferior también. Imagina que lo vamos a hacer de vuelta a nuestra columna, columna lg, y 1 por ciento también. Se puede ver el mío, el espaciado real es un poco diferente porque este es del 1 por ciento, pero es de ambos lados. Tengo 1 por ciento más 1 por ciento, en realidad hay 2 por ciento aquí, así que al fondo aquí voy a sumar 2 por ciento. Ahora es parejo, dejaré ese tutorial aquí, y al siguiente les añadiremos imágenes. Hay un par de cositas que tenemos que hacer para hacerlas receptivas, pero las agallas de ello están aquí. Pasemos al siguiente tutorial. 31. Cómo hacer que tus imágenes sean responsivas en Dreamweaver para que se ajusten al tamaño de la página: Hola allá, en este tutorial vamos a sacar etiquetas div vacías y llenarlas de respuestas de imágenes. Oye, presto, así. El cool de ellos es que también se les redimensiona, capacidad de respuesta. Vamos a hacer eso ahora en Dreamweaver. Primer paso, quiero agregar una imagen a esta primera etiqueta div aquí. Voy a ir a Insertar, HTML, imagen. Yo quiero [inaudible] dentro de la etiqueta div. Voy a ir a mis Archivos de Ejercicio, Imágenes. Si no tienes los Archivos de Ejercicio, habrá un enlace en la página en algún lugar, si no, envíame un mensaje y te conectaré con esos. Vamos a comprobarlo en un navegador, te darás cuenta de que está ahí dentro, pero no responde. puede ver que es sólo estar en sí mismo. El otro punto a tener en cuenta es que es un poco más grande de lo que lo necesito. ¿ Por qué? Porque en realidad en esta vista superior, echemos un vistazo a mi ejemplo aquí. En realidad es el tamaño, pero cuando llega al tamaño del móvil, es un poco más grande, así que he permitido que el tamaño más grande se exporte de aquí para Illustrator. No lo hagas demasiado grande, porque las velocidades de carga de páginas son realmente importantes para Google en sus rankings. Simplemente algo un poco más grande de lo que necesitas está bien, así que para que sea sensible, vamos a crear una clase. Vamos a crear en CSS Designer, styles.css global. Vamos a crear un selector. A éste se le va a llamar responsive-image. Podría llamarlo algo un poco más pequeño y menos descriptivo. Pero hay tres cosas que debes hacer. Tenemos que decir que el ancho es un porcentaje, está bien. Tiene que ser un 100 por ciento Solo asegúrate de que si estás teniendo problemas, es un 100 por ciento y no píxeles. Dado que este panel de diseñador utiliza píxeles como predeterminado, termina por estar ahí bastante, así que eso es un poco. Tenemos que asegurarnos de que la altura esté configurada en auto y necesitamos que el display set se bloquee y necesitamos aplicarlo. Tengo mi imagen seleccionada. Tengo la cosa del IMG aquí y luego digo que mi imagen es ahora.imagen responsiva. Vamos a comprobarlo en el navegador ahora, guarde todo. Esperemos que veas, este tipo de aquí cambia de tamaño, impresionante. Básicamente ahora, solo está duplicando este div original aquí, eliminaremos estos. También eliminaremos estos, también eliminaremos este texto aquí abajo. Se puede ver este es el texto que fue originalmente antes de que pusiéramos la imagen aquí. Es sólo una especie de calamar en la parte inferior, borra estos, borra estas columnas. Vayamos a hacer eso ahora. Deshaznos del texto primero en la parte inferior aquí. Tengo mi etiqueta div aquí, principio y final y ahí está este texto calamarado aquí. Ya no los necesito. Encuentro que siempre es más fácil hacerlo en la vista de código. No necesito a ninguno de estos tipos. Simplemente los voy a eliminar en CodeView, por eso nos encanta split view en Dreamweaver. Lo siguiente que quiero hacer es duplicar esta cosa aquí. No quiero duplicar sólo la imagen. Yo quiero duplicar todo porque por el momento sólo tiene la imagen seleccionada vista ahí. Quiero la clase div circundante, así que esa es mi columna. Eso es todo, por lo que col-lg float-izquierda. Voy a golpear comando D o replicar e ir a duplicar o Ctrl+D en un PC y mirarnos volando ahora. Tenemos seis de ellos. Obviamente puedes hacer nueve. Seguirá adelante. Lo que queremos hacer ahora es pasar y simplemente apagar estas imágenes aquí. No va a ser particularmente un proceso sexy y no vamos a hacer nada más que eso, así que puedes saltarte si quieres. Pero si me quieres seguir, vamos a dar click en esta imagen, click en las pequeñas líneas de tirantes y aquí, vamos a agarrar archivo de navegador, archivos de tamaño de ejercicio, imágenes. Ve hacia abajo, miniatura, genial. Ahora, definitivamente deberías estar agregando todos los textos aquí. Este es el proyecto. Te da un nombre de proyecto como el proyecto. Fue un proyecto de UI y agrega todos los detalles que puedas porque quieres que sea bueno y amigable con los motores de búsqueda. No voy a hacerlo porque ahora soy perezoso. Pero si este es mi propio sitio, iría al 100 por ciento y lo haría. Pero en este tutorial sólo estoy tratando de acelerar las cosas. Lo que también voy a hacer para acelerar las cosas es, realidad sólo voy a ir a mis imágenes de archivos de ejercicios, y agarrar a todos estos tipos. En realidad tengo estos dos primeros así que los voy a copiar, ponerlos en mi escritorio dentro de mi carpeta de imágenes. Sólo para que ahora, pueda entrar aquí y no tengo que copiarlos y pegarlos cada vez. Puedo entrar aquí y en realidad simplemente cambiar el nombre a thumbnail3. Cambiar todo el texto no te olvides. Este de aquí, cosas emocionantes. Otras cosas que podría hacer es cuando haga clic en estas, ¿a dónde van a ir? Porque eso en realidad va a suceder más adelante. Puedo hacerlo ahora y solo puedo poner en hash? Depende de mí si quiero hacerlo ahora o más tarde. Hice esa. Pero sí, entraremos en eso más adelante cuando realmente construyamos esas segundas páginas, así que prueba esto en un navegador para ver lo bien que se ve. Guarda todo, revisa el navegador y mira eso. A mí me encanta. Especialmente con todas las nuevas imágenes a color aquí empieza a parecer un sitio web completo ahora. Lo siguiente que vamos a tener que hacer, es averiguar qué pasa cuando se pone a la tableta así. Porque por el momento simplemente sigue bajando en esas tres filas. Yo quiero cambiarlo cuando llegue a una tableta y móvil y eso lo haremos en el siguiente video. 32. Cómo hacer diferentes columnas para los sitios web para dispositivos móviles y de escritorio en Dreamweaver: Hola ahí. En este tutorial, vamos a llevar nuestra vista de escritorio que tiene tres columnas, luego la vamos a bajar a dos columnas, cuando se baje a la tableta y luego vamos a bajar al móvil, sólo una columna. Súper fácil de hacer, hagámoslo en este tutorial. Actualmente tenemos una clase diciéndole que sea esta tercera, recuerda 30 por ciento. Vamos a dar click en él, este tipo de aquí. No es la imagen, es el div que está alrededor del exterior. Recuerda columna solo consigue que flote a la izquierda. Pero hay columna grande o LG es el que dice ser 33 por ciento. Necesitamos dos más que se le apliquen. Hagamos el primero. CSS Diseñador, estilos CSS, voy a poner este en tablet. Vamos a hacer una nueva clase llamada col y voy a hacer en lo profundo por medio, ¿de acuerdo? Este va a tener un ancho de porcentaje y este porcentaje va a ser, ahora debería ser 50 por ciento para ir igual, pero tengo un relleno a su alrededor por lo que al 48 por ciento. Porque quiero los márgenes porcentuales de cada lado, voy a cambiar a porcentajes. En realidad podría hacer esto todo el camino. Escoge porcentajes sin ese pequeño icono de bloqueo en significa que voy todo el camino. Todo el camino. No pasa nada porque cómo estamos viendo una vista de escritorio y no hemos aplicado la clase, vamos a editar. De acuerdo, así que voy a dar click en esto y tenía éste llamado col-md. Si es hacer lo que no vine no reconoce que no se ha hecho, ¿vale? Voy a patear y voy a hacer un guardar todo y luego tratar de aplicártelo. Agarra la clase externa. Apágalo. Enciéndalo y ojalá ahora.col-md. Ahí está. A veces necesitas guardarlo todo. Eso se aplica, va a tipo de trabajo. Echemos un vistazo en un navegador. Ve alguna configuración de mi tamaño de escritorio, luego te llevas la tablet y puedes ver que quiere ocupar esto. Tenemos que hacer el relleno también, así que podríamos. Pero podemos jugar un poco con él, vamos a poner las imágenes en marcha. Pero se puede ver que es alrededor de la mitad. De acuerdo, entonces tenemos que hacerlo por todos ellos. Podríamos pasar por resbalar la etiqueta exterior en el centro comercial, así que te voy a mostrar un pequeño truco aquí. Yo los quiero. Se puede ver cómo se aplican las clases aquí abajo en la vista de código? De acuerdo, entonces va div como clase igual y dentro de estas marcas de cotización, todas las clases col, col-lg, volteado lift y nuestro col-mid se agregan. Te voy a mostrar un truco genial. Mi específico o Dreamweaver. Si hago clic aquí y luego mantenga presionada la tecla de comando y haga clic allí también. Se puede ver que hay múltiples cursores. Esto es realmente útil cuando se quiere agregar una clase col-md. No llegas al periodo al principio porque no necesitamos porque dice clase por aquí. Se ve un poco diferente en la vista de código y esa es una forma de agregarlos todos al mismo tiempo. Guarda todo, ahora vamos al navegador, [inaudible]. Vista de escritorio y vista móvil. Este tipo de pasos me parece bastante satisfactorio en el curso, de verdad lo hago. Vamos a hacer la versión móvil o hacer relleno y un poco. Queremos crear una nueva clase, así que estilos, vamos a pegarla en el móvil. Vamos a crear una nueva clase aquí llamada, pequeña, ¿verdad? Vamos a llamarlo extra pequeño. ¿ Por qué? Porque estoy tratando de acostumbrarte a algo del lenguaje de estilismo que pasa en la gran web del mundo del diseño web. Es M se usa a menudo para tabletas, ese tipo de letreros de teléfono grandes como el iPhone plus, ¿de acuerdo? Después tenemos los teléfonos de tamaño plus. Podríamos llamar a un pequeño y eso está bien. Pero normalmente la gente lo llama extra pequeño para sus móviles más pequeños con unos 300 píxeles de ancho, como un teléfono estándar. Enfriar. Lo que queremos decir es que queremos que tengas 100, así que vamos a ir no del todo 100. Vamos a añadir un poco de relleno por fuera, pero voy a hacer 98. Asegúrate de que sea porcentaje. Estos tipos van a encerrar todo el camino y decir que me gustaría que todos fueran un porcentaje de uno. Pone en todos ellos. Enfriar. Ahora vamos a guardar todo sólo en un navegador. Bajemos listos. Boom, eso no funcionó. Yo no lo aplicé. Está bien. Tienes que asegurarte de que probablemente me estés mirando ver este video yendo, no va a funcionar. Entonces necesitas hacer tus trucos de cursor múltiple. Podríamos agregar el miembro manualmente, pero sólo vamos a ser rápidos y vamos a ir pequeños. Ni siquiera es pequeño, es extra pequeño. Guarda todo, checa aquí. Ahora estamos trabajando escritorio, tablet y luego abajo y nos movemos hacia arriba. Boom, todos se apilan. Hay un poco de brecha alrededor del exterior luciendo bastante cool. Hay algunas cositas en las que trabajar. Pero creo que un éxito. Has aprendido a hacer columnas responsivas en Dreamweaver. Está bien. Vamos a ordenar algunas cosas en el siguiente video, pero bueno entonces a todos, pero bueno entonces a todos, nos estamos acercando a tener todas las técnicas que necesitamos para ir y construir cualquiera de sitio web. Está bien. Al siguiente video. 33. Cómo crear un clearfix pseudo after class en Adobe Dreamweaver: Hola, y bienvenidos a este aterrador video titulado, todo se trata de arreglos claros y pseudo clases. Suena miedo, no es tan difícil. Nosotros lo estamos haciendo. ¿ Por qué razón? Es porque quiero agregar un poco de relleno entre esta caja aquí, que se llama cuadrícula de imagen, que se llama cuadrícula de imagen, por lo que esta es div tag y mi pie de página. Pero no puedo porque estos tipos están todos flotados a la izquierda y provoca problemas cuando hay cajas debajo de flotación como este pie de página aquí. Pero si usamos una pseudo-clase, eso significa que puedo agregar relleno a la parte inferior de mi cuadrícula de imagen y en realidad empieza a moverse. Si estás siguiendo el tutorial, no puedes hacer eso. Aprendamos a hacer eso en este tutorial. Tenemos que hacerlo porque estos chicos están flotando hacia la izquierda y sabemos por un tutorial anterior que si pisamos algo a la izquierda, la muy próxima etiqueta div necesita tener un flujo claro aplicado y eso lo hicimos con una pequeña clase especial. El problema aquí es la estructura. Este es mi último div, es mi última columna pequeña, entonces la etiqueta div debajo debería tener flotador claro, pero no tengo una etiqueta div debajo. Cierro cuadrícula de imagen y luego cierro principal y luego pie de página empieza por aquí abajo. El problema de agregar flotador claro a un pie de página, simplemente no funciona, está demasiado lejos de la corriente aquí. Entonces un truco es que podría hacer clic aquí y simplemente insertar una etiqueta div, darle ningún nombre, quitar el texto de positor y simplemente darle flotación clara y eso funcionaría totalmente. Eso es lo que hice por años y eso es lo que todavía hace mucha gente y eso está totalmente bien, puedes ir a hacer eso, ¿por qué? Porque es fácil, pero estamos más allá en este curso y viniste aquí para aprender y es hora de aprender algunas cosas geniales. pseudo-clases son particularmente difíciles de hacer o usar, así que voy a hacer eso. Lo que tenemos que hacer es que lo vamos a hacer aquí en nuestro Diseñador CSS. Haz click en algún lugar de aquí, estilos CSS, hazlo globalmente y tenemos uno aquí llamado imagen, ¿dónde estás? Encuéntralos, cuadrícula de imagen. Lo que necesitamos es otro que aún diga cuadrícula de imagen, pero antes de que la cierres, vamos a agregar un colon ahí dentro, ese colon indica que es una pseudo-clase. Entonces es como esa clase, pero un poco diferente y nuestra pseudo-clase va a decir después. Por lo que vamos a agregar algunos atributos que sólo se aplican después de la cuadrícula de imagen. Eso es una pseudo-clase, súper fácil. Bueno, el principal es flotador claro. Parte del tiempo se puede escapar sólo con flotación clara, pero vamos a hacer algo llamado solución clara. Es un nombre dado a una forma un poco más complicada, no complicada, un poco más robusta de despejar el flotador. Borrar el flotador por sí solo funciona la mayor parte del tiempo, pero no en todos los navegadores todo el tiempo. Entonces para hacer uno más robusto, todo lo que necesitamos hacer es hacer clic en display, cambiarlo a bloque, y necesitamos agregar algo llamado contenido. En realidad no hay contenido aquí en el panel CSS Designer. Pero la gente útil agrega Dream Weaver dijo que hay un poco más de borde [inaudible] abajo por aquí. Entonces voy a golpear contenido, ahí está y casi no quiero nada para los contenidos, así que son dos citas marcadas con nada en el medio. No preguntes por qué, pero eso nos ayuda a través de muchos navegadores. Entonces eso es un reemplazo por solo poner un div vacío debajo con ese flotador claro aplicado y si todos somos honestos, no es tan difícil, hicimos este carbón y un después, y nos hace sentir como desarrolladores super-duper cuando estás haciendo pseudo-clases de corrección clara. Suena como si estuvieras hablando otro idioma. Al menos me siento así cuando hablo de ello. Vamos a hacer lo que queríamos hacer, ¿cuál era? Era cuadrícula de imagen, quería agregar algo de relleno después. Sí. Por lo que salta por ahí, pero ahí tienes, relleno agregó. Agradable. Antes de ir sólo un poco de limpieza, y cuando voy de escritorio a tableta, el relleno en la parte superior aquí no es bueno. Entonces es agradable en el escritorio y está bien en el móvil, lo haremos también pero es bastante malo en la tableta. Para ello, lo que vamos a hacer es que vamos a hacer styles.css en tablet y no vamos a ir a la cuadrícula de imágenes. No tenemos cuadrícula de imagen aquí actualmente, así que vamos a decir cuando aparezca cuadrícula de imagen en tablet, tiene, voy a dar clic en esto, desplácese hacia abajo, solo necesita más margen hacia arriba. Esta cosa sigue saltando, porque lo estamos anulando ahora se puede ver cómo saltó arriba, voy a golpear un más bajo, así que no lo estamos agregando encima del escritorio, lo estamos reemplazando. Entonces estamos diciendo en vez de eso, haz esto. Ahora sólo un poco de pruebas entre aquí. Se ve bien, también se ve bien aquí, es un poco de jugar por ahí. Algo que podríamos tener que hacer es, puedes ver aquí esta palabra rompe en estas diferentes líneas y se mete con nosotros? Simplemente es realmente difícil trabajar con tantos tamaños diferentes, así que hay un punto cuando eres diseñador web, vas a tener que convivir con algunas vistas que no son perfectas. Supongo que no tiene que ser perfecto, tiene que ser utilizable, pero no tiene que ser perfecto. Lo que haces es apuntar a los dispositivos principales y si a alguien se le ocurre un tamaño loco, es posible que tengas que volver atrás y ajustarlo. No quieres quedar atrapado en crear como diez consultas de medios diferentes. Para que lo sepas, tres es el mínimo, así que de escritorio, tablet y móvil, eso es lo que tenemos. Pero muchos sitios más sofisticados tendrán cinco, así que tendré como uno realmente pequeño, como tenemos, van a tener un tamaño fablet, ese tipo de iPhone plus size. También mirarán las tabletas horizontal y horizontal y luego los escritorios más grandes, así que tendré cinco. He visto sitios con siete. Para que puedas seguir haciendo estas consultas de medios y haciendo ajustes, depende de cuánto control quieras sobre cada vista individual. Pero sepan que cuantas más consultas de medios tengan, supongo que más trabajo se necesita hacer y podrían estar de acuerdo con eso. Para este sitio aquí lo estamos manteniendo simple, principalmente para tamaño de clase y si soy honesto, solo hago tres consultas de medios para mis sitios personalmente. Está bien. ¿Deberíamos hacer móvil? Se puede crear uno para móvil. En realidad, cuando se pone al móvil, estoy contento con el relleno, pero solo tienes que ir al ancho máximo aquí para móvil y agregar nuestra clase para cuadrícula de imagen y cambiar el relleno. Pero tú podrías hacer eso, yo tengo fe. Está bien. Siguiente tutorial. 34. Cómo crear y enlazar nuevas páginas en Dreamweaver utilizando plantillas: Hola ahí. En este video vamos a pasar y empezar a construir nuestra segunda página, que es nuestra página de portafolio. Esto será indicativo de cómo crear cualquier nueva página. Vamos a ir a cambiar el rumbo aquí y estos trozos de imagen abajo. Sí, vamos a hacer eso ahora en Dreamweaver. En primer lugar, hay dos formas de hacerlo. Podemos ir a Archivo, Nuevo como lo hicimos antes y dijimos buscar alguna plantilla y esta es la plantilla que creamos anteriormente en la serie. Sí. Golpea “Crear”. El único problema es que obtenemos página en blanco. Lo que hago típicamente es que voy a golpear “Cancelar” ya que acabo de hacer un Guardar A de esta página. Ahora tuvimos que llamar a nuestra primera página index.html. Esa es la página de inicio, de ninguna manera alrededor de esa. Ahora, cada otra página vamos a llegar a nombrar por nuestra cuenta. Las únicas reglas son, no uses mayúsculas y no uses ningún espacio ni ninguno que locos personajes como este. Vamos a llamar a nuestro portfolio-ui-design, y el nombre del cliente para éste, digamos que es byol. Queremos buenas palabras clave en nuestras URL también. Esto es realmente bueno para los motores de búsqueda. Voy a golpear “Guardar” y arrastrarlos hacia arriba y ahorrar. Todavía está conectado a la plantilla. Algo que he tenido problemas con el uso de plantillas en el pasado es que a veces haces una actualización a la plantilla, ahora y este tipo no se actualiza, si ese evento sucede, sucede como una vez en una luna azul, pero puedes ir a Herramientas, Plantillas, si alguna vez está en gris, solo tienes que hacer clic en la visión de código abajo aquí abajo. Por alguna razón, hacer clic en live view hace que eso no funcione. Enfriar. Plantillas, y éste de aquí puedes decir, “Aplicar Plantilla a la Página”. Simplemente puedes volver a hacer clic en tu plantilla. No tengo que hacerlo ahora porque está funcionando bien. Pero si eso sucede, prueba eso. Otra cosa que puedes probar, si más tarde por el camino el tuyo se rompe, puedes decir “Actualizar página actual” y eso solo volverá atrás y revisará la plantilla de nuevo solo para asegurarte en caso de que no se conectara. Voy a enredar este diseño aquí. Hay algunas cosas que necesito para deshacerme. Voy a hacer clic en ellos en vista en vivo. Había esta etiqueta, te has ido. Haciendo click en esto. A mí me gusta dar click aquí para asegurarme, porque no quiero escuchar un contenido que sea la caja grande, pero esta imagen flota-izquierda es todo lo que quiero deshacerme. Voy a reutilizar este texto y voy a cambiar el texto a lo que tenía aquí, diseño de UI. Pégate por ahí. Solo vamos a hacer algunos, obviamente entrando en algunos detalles, pero van a haber algunos trucos extra que aprenderemos a medida que construimos. Este va a ser mi diseño de UI para BYOL. Eliminar U. Cool. Cuando es naranja, quiero insertar en una etiqueta p y va a representar este texto aquí. Lo que no quiero hacer, lo estoy copiando y pegando, es que cuando estás en este modo naranja no te deja hacer muchas de las cosas. Tienes que hacer click fuera y hacer click en él en su vista de etiquetas, esa es la vista azul. El naranja es lo único de texto de edición. Con eso seleccionado, voy a ir a Insertar, voy a bajar a p tag, ¿dónde estás? Ahí, párrafo. Voy a ir tras mi H1. Voy a sustituir este texto. No sé por qué me gusta hacerlo aquí abajo en la vista de código mejor, pega. Aquí vamos. Enfriar. Vamos a tener que hacer un poco de estilo para ello. Ahora podría crear un selector compuesto para decir etiquetas p que están dentro del contenido de héroe. El problema con eso es que podría usar otra etiqueta p para hacer algo más. Aquí voy a ser un poco más específico. Voy a crear una clase específicamente para peinar este texto justo aquí, en lugar de todas las etiquetas p que están dentro de este top box. Porque tal vez en la página de contacto con nosotros o la página sobre nosotros, queremos hacer cosas diferentes con la etiqueta p. Vamos a crear un diseñador CSS de clase, mío no está buscando así que voy a restablecer Dan es impresionante. Enfriar. Styles.css, lo haré globalmente. Voy a crear una clase aquí dentro, y lo voy a llamar texto al principio. Siempre que empieces a hacer textos, solo llámalo texto al principio para que sea fácil encontrarlo más adelante. Este va a ser texto blanco, y vamos a llamar a esto una descripción. ¿ Qué voy a hacerle? Yo lo voy a hacer, voy a conseguir Text, voy a hacer que sea un color de fuente de blanco y lo voy a hacer un tamaño de fuente de 30. Que he sacado de mi, oh hombre, se está poniendo molesto ese doble 3. No sé por qué hace eso. Escribo tres una vez y pone en dos. Enfriar. Ahora vamos a aplicar eso por aquí. A éste se le va a llamar texto. Se puede empezar a ver por qué usar texto al principio es útil. Se puede pasar por todas las diferentes opciones de texto. Lo siguiente que quiero hacer es, este es el tipo de cosa nueva y única. El resto de las cosas que hemos hecho hasta ahora, lo hemos hecho en el curso. Pero este pedacito aquí ahora en naranja. El problema es que solo podemos aplicar clases a toda esta etiqueta p. El problema es que quiero que esta pequeña parte de la etiqueta p sea roja. Ahora lo que podría hacer es crear dos etiquetas p y luego flotarlas una junto a la otra y eso es mucho drama, así que vamos a ver algo llamado etiqueta span. Una etiqueta span es si eres del mundo de digamos, InDesign, es ese estilo de personaje. Puedo usarlo como parte de mi párrafo, solo actualizando un poco. Si nunca has oído hablar de un estilo de personaje, no te preocupes.. Una etiqueta span, mira esto, tienes que hacerlo aquí en CodeView. Es una forma de aplicar una clase, en lugar de la etiqueta padre que normalmente ocurre, podemos aplicarla a nuestro pequeño bit dentro de la etiqueta p y solo se llama etiqueta span. En primer lugar, vamos a crear esta etiqueta. Styles.css, GLOBAL, crea este aquí. Voy a llamar a este uno.text, iremos con rojo. Voy a llamarlo rojo sólo porque es reutilizable. Debería haber llamado a esto text-white también. Pero text-red, voy a decir que eres rojo. Voy a sacarlo de, con el color del texto. Debería ir a buscar el color adecuado de Illustrate o usar la herramienta cuentagotas, que está ahí y robar el color. No voy a hacer nada más porque el tamaño de la fuente proviene del text-white subyacente que aplicaremos a toda la etiqueta. Para aplicar una etiqueta span la resaltamos aquí abajo en CodeView luego golpeamos “Command T” en un Mac o “Control T” en un PC y aparece esta etiqueta de envoltura. Tipo en span. Eso es lo que queremos. Pero queremos añadir una clase también. Span, espacio y luego teclea cl y puedes ver, práctico Dreamweaver, tiene una clase ahí dentro y se agrega toda la sintaxis para nosotros también, que son los iguales y las marcas de comillas. Aquí vamos a teclear sin la parada completa. A menudo, cuando estás trabajando en CodeView no pones el signo de parada completa. Este es texto y text-red. Bonito. Vuelvo de nuevo, y esperanzador Dreamweaver ha envuelto al cliente en la etiqueta span y se llama una clase span, que es texto rojo, y ahí tienes, como el estilo en línea. Lo siguiente que quiero hacer es este trozo de texto debajo de aquí para el breve. Eso es más o menos exactamente lo mismo que esto. Asegúrate de hacer clic en la etiqueta padre, que es la etiqueta p, pulsa “Comando D” en un Mac o “Control D” en un PC, duplica esa etiqueta. Impresionante. Cambiemos esto a breve. Ahora los tics ajustaron algunos podría copiar y pegar diferente ilustrador, pero quiero mostrarte un truco genial. Ahora, esto solo funciona aquí abajo en vista de código y que mezclan palabras latinas llamadas Lorem ipsum, solo coloca garrapatas de titular. Lo que podemos escribir aquí abajo en vista de código es alarma y luego poner cuántas palabras quieres y luego presionar “Tab” no entrar pestaña en tu teclado así. Tengo 20 anchos de alguna manera. Eso es algo llamado imagen. Si no estás usando imagen y quieres entrar más en la vista de código, tengo otra colas que está un poco más diseñada para hacer mucho de lo que hemos hecho aquí pero codificar vistas, eso podría ser un siguiente paso para ti pero es bastante genial. Quieres Google eso y echar un vistazo o echar un vistazo a algunos de mis otros videos. Ahora veamos deshacernos de... voy a dejar las cosas de “hablemos” y luego lo dejo ahí dentro las cosas hablemos. Está bien. Todavía está en mis diseños la voy a dejar ahí dentro. Lo siguiente que tengo que hacer son estas hojas de Pergamón, una gran imagen que va a representar esos diseños que han hecho. Cuando hago clic en, digamos, uno de estos iconos aquí, se carga esta página por lo que necesito pasar y eliminar todas estas columnas. Voy a dar click en estos tipos. Ahora, vamos a dejar el cuadro de cuadrícula de imagen. Probablemente no debería llamarlo cuadrícula de imagen y probablemente debería haber llamado a eso secundario, principal o algo así porque sólo va a tener uno imaginar y ahora no una grilla. Confundida. Necesito que todo salga de aquí. Es más fácil hacerlo en vista de código. Puedes hacerlo totalmente a vista en vivo si lo prefieres, pero voy a agarrar a todos ustedes chicos, asegúrate de agarrar eso comenzando al final. ¿ Cómo sabes si es el principio o el final en vista de código? Da click en la cuadrícula de imagen y lo puedes ver resaltado aquí abajo. Ese es el cierre como apertura. Todo entre aquí, me desharé y adiós. Ahora con mis casos siguen parpadeando ahí dentro. Pongamos en nuestra imagen. Vamos a ir a “Insertar imagen” y vamos a traer de nuestros archivos de ejercicio imágenes y tengo portafolio uno. Es este tipo grande, un poco diferente a mi diseño y vamos a guardarlo todo, probarlo en el navegador. El imagen es demasiado grande y simplemente no responde pero no te preocupes, recuerda que creamos una etiqueta de código, llamada responsive. Vamos a editar a esta imagen Código punto responsive de imagen y guardamos todo, abrimos en el navegador y ahora déjame encogerlo hacia abajo. Oye, míralo todo siendo receptivo. Puedes decidir si quieres relleno a su alrededor también. Eso no lo he hecho. Podría agregar algo de relleno a la cuadrícula de la imagen o podría crear una clase de relleno especial pero estoy contento de que bate al lado de los bordes aquí, edite relleno falso con la imagen real misma. Pero eso es lo que necesito hacer mirando esto cuando llegue a la vista móvil. Es solo texto demasiado grande así que, puedo pasar por ahora y ajustar el tal vez compuesto seleccionado para decir las etiquetas p que están dentro de la imagen hacen más pequeños. Son 30 píxeles por el momento. Probemos eso. Vamos a estilos de diseñador CSS, móviles. Vamos a crear un selector compuesto que diga, en realidad no hay nada ahí, me voy a apagar y en realidad hacer clic en adheridos a esperemos, esperemos ahorrar algo de tiempo. Voy a darle click a él, luego hacer un selector. Aquí una etiqueta quiero, no necesito esta descripción de imagen de texto. Etiquetas P que están dentro de aquí, nuestro contenido funcionará esperanzadamente y vamos a agarrar. En realidad bajémoslo, vayamos al texto y digamos, vamos al tamaño de fuente y hagámoslo píxeles de 220. Nosotros los estamos consiguiendo impresionantes. Algo que no hice es que no tenía ningún relleno en los costados cuando se bajó a mi pelota porque realmente no importaba cuando tenía esas garrapatas originales de él, pero ahora estoy pensando que probablemente lo necesita así que aquí hay un frío aquí o contenido y hecho un móvil. ¿ Dice algo? Voy a demostrarlo. Por lo que se sienta ceros. En realidad lo voy a subir hasta 10 píxeles. Entonces 10 pixeles de ese lado solo dame un poco de espacio para respirar a los lados. Siempre que hagas cosas así, vas a tener que volver atrás y solo comprobar que destrozé la página del índice. Siento que no lo hice pero vamos a probar el de todos modos. Con esto abierto en mi navegador, se ve bien ahí. Nada ha salido mal excepto recordar ese relleno que pusimos de ese lado ahí y lo fingimos estando en el medio. Nos hemos roto agregando un píxel de equipo extra. Entonces vamos a tener que ir y ajustar ese selector compuesto. Pero todo lo demás se ve bien qué selector compuesto utilizamos. Podría ir al índice, ir al móvil, ir a esta cosa de aquí y era imagen dentro de los contenidos del héroe. Vamos a comprobarlo. Imagen de cabecera. Fue este tipo de aquí, héroe contenido imagen flotante izquierda. Vamos a ir más despacio un poco. Este tipo de cosas sucede todo el tiempo. Te vas más allá en el curso y haces un poco de ajuste, necesitas ir y volver a comprobar. No tiene ramificaciones. Si lo hace, podrías haber creado su propia clase especial pero no quieres meterte en el hábito de crear demasiados de ellos porque tu hoja de estilo CSS puede volverse loca mirando el momento. El nuestro es agradable y limpio y no ganaríamos ningún premio de desarrollo, principalmente porque mi realmente estúpida vista de escritorio de nombres largos. Pero lo está haciendo bastante bien. Lo último que vamos a hacer es que necesitamos conectar estas dos páginas. En mi página de índice aquí, voy a salir a la vista completa. Eso le dará un click. Voy a decir que cuando se haga clic en este botón, esta imagen, vamos a ir a las líneas de rayas y decir enlace. Si tuviste un hash aquí como lo vimos antes, podemos eliminar hash y en realidad hacer clic en “buscar archivo” y decir una interfaz de usuario de cartera, haga clic en “Abrir”. Ahora se está impidiendo a sí mismo, que es blanco ninguno. Tics antiguos, este va a ser mi diseño de UI para traer tu sitio web de laptop. No lo es, esto es cosas que tengo como material de marcador de posición con plantilla así que este no es mi trabajo, esto es trabajo de biblioteca abastecido. Vamos a hacer clic en segundo plano y vamos a probarlo en un navegador. Ahora esta imagen aquí ojalá podamos darle click y salta a esa página. Para volver, vamos a usar el clic en la imagen aquí como logo. Esto se remonta a la página de inicio. Hicimos esto en un tutorial anterior pero es exactamente la misma mano que acabamos de hacer para esta imagen excepto que en lugar de enlazar a la página de la interfaz de usuario, vincula de nuevo al índice. Está bien. Ahora pasarías por duplicar esa página y hacer todos estos. El cool al respecto es que notarás que a medida que pasemos por este curso, la producción se vuelve cada vez más rápida porque llegamos a depender de cosas que hemos hecho en el pasado, y esta duplicación va a ser súper fácil porque es de una plantilla y bahías porque ya hemos hecho el diseño para esta página. Simplemente hacemos un “Guardar como” y vamos a cambiarlo todo. Eso es todo para este tutorial. Pasemos al siguiente. 35. Cómo cargar tu sitio web en el alojamiento de Internet a través de Dreamweaver: Muy bien, en este video, nos vamos a apuntar a un anfitrión. En nuestro caso, vamos a usar bluehost porque son impresionantes. Pero podrías inscribirte en cualquier hosting aquí, lo que prefieras, y luego saltar al siguiente video después de esto, donde realmente conectamos FTPD downs a Dreamweaver y subir nuestro sitio. Entonces si buscas hospedarte, vale, ve a bluehost.com/track/byol. un par de cosas es que te dan un descuento y yo consigo una comisión en la venta, no te cuesta nada extra, ahorras dinero. Pero si no quieres hacerlo de esa manera, solo puedes ir directo a bluehost.com y dar la vuelta a mi pequeño enlace. Independientemente de cómo lo hagas, terminas aquí, haces clic en “Comenzar”. Lo que quieres es esta primera opción, vale. Ten una lectura a través, un poco de mirada pero de la mayoría de las pequeñas a medianas empresas, solo necesitas un plan básico sencillo. Decía 395, pero en realidad termina siendo alrededor de 595 después de poner todas las cosas que necesitas. Entonces si ya tienes un nombre de dominio, escríbalo en el aquí. Si no tienes uno, me voy a apuntar por ahora. Trae tu laptop es awesome.com. Muy bien, así que rellena los campos aquí, y esta parte aquí es realmente importante. Por lo que tu precio por 395 es por tres años. Si quieres mantener el costo bajo y hacer 12 meses, pagas más. Pero sólo tienes que toser un año. Cosas que no necesitas. privacidad de dominio realmente no mantiene tu privacidad, solo te mantiene privado de las personas que no saben lo que están haciendo. Respaldo del sitio. Si solo estás trabajando en tu propio sitio, no lo necesitas porque siempre tendrás una copia en tu laptop. Pero si estás trabajando con varias personas, esto puede ser realmente útil porque destrozan tu sitio. No tienes copia de ese nuevo sitio. Sí. Se quiere ir a esta copia de seguridad. No lo necesito para este caso porque solo soy yo trabajando. El arranque de salto del motor de búsqueda nunca funciona. 'Lock sitio' Esto tampoco funciona. Simplemente te permite poner una insignia en tu sitio para decir que hemos asegurado del malware, no lo vamos a usar, así que no vamos a editar y certificados SSL un poco complicados para lo que estamos haciendo ahora, pero es definitivamente algo en tu futuro, hace que tu sitio web desde HTTP, www.bringyourlaptopisawesome hasta HTTPS, que es más seguro. Pero hay algunos otros aros para saltar. Entonces vamos a apagar eso y a mantenerlo sencillo. Entonces ingresa tus datos de pago y te veré en la siguiente pantalla. Está bien. Enhorabuena, nos hemos apuntado. ¿ Quiero pago tarifa y algo más; palabra prensa, no gracias. Está bien. Te pedirá que te inscribas para obtener una contraseña. Ya lo he hecho. Inicie sesión. De acuerdo, entonces aquí es donde terminamos y lo que estamos buscando que realmente necesitamos es algo llamado los detalles del FTP. Aquí son botonitos. O recibirás un correo electrónico como lo hice yo. De acuerdo, te damos la bienvenida a bluehost y te enviarán la información FTP. Entonces echa un vistazo en tu correo electrónico y esto de aquí es bastante importante. Así que escríbalo en algún lugar donde guardes todo ese cuaderno, guardes todos tus archivos o ese Google Doc. Así que ponlos todos ahí porque este FTP detalles que usarás una vez y olvidarás. Entonces en un par de años cuando necesites actualizar cosas, te olvidarás, especialmente tu contraseña. Si lo olvidas, en realidad puedes encontrar estas cosas aquí en bluehost click en FTP y anotar abajo será la misma información. No quiero dar click ahora sólo porque tiene algunos datos personales ahí dentro que no quiero que veas. Así que vamos a saltar ahora a Dreamweaver y, poner en estos detalles FTP. Por lo que no importa realmente qué página haya abierto. No importa en absoluto. Vamos al sitio y gestionemos sitio. Este es el que estamos trabajando en todo este curso, Vale, impresionante portafolio de Dan. Vamos a hacer doble clic en él. Estos son los detalles que empezamos de poner, pero ahora necesitamos insertar algo llamado el servidor. Eso es lo que nos está dando bluehost, nos están permitiendo usar sus servidores. Entonces vamos a golpear más. Dale un nombre en la parte superior aquí no importa “, bluehost. De acuerdo, si estás usando Go Daddy o cualquier otra empresa de hosting de dominios, solo puedes escribir aquí los detalles del FTP. Es más o menos exactamente lo mismo. Entonces en ese correo electrónico que viste tenía el nombre del host, que en realidad es la dirección FTP. De hecho tiremos esto al lado. Entonces ese es el nombre de usuario. ¿ Qué más tenemos? Tenemos la contraseña, que voy a cortar. Contraseña. Impresionante, y el directorio raíz necesita ser puesto. En nuestro caso, es HTML subrayado público, ese es uno súper común. Bonito. Ahora el momento de la verdad, vamos a golpear 'Test 'Hit 'Test y los dedos cruzados funciona. Impresionante. Si no funciona, a veces cuando estás configurando una nueva cuenta de hosting puede tardar un poco de tiempo en poblarse, así que dale una hora, así que dale una hora, tal vez dos antes de que empieces a gritar a bluehost o a mí. A veces sólo puede tardar un poco en ponerse a trabajar. Otra cosa que puedes hacer es que tu nombre de dominio podría no estar registrado y funcionando todavía. Por lo que byolisawesome.com podría no haberse poblado aún. Lo que han hecho es que te han dado una contraseña temporal. Ver esta URL temporal? De acuerdo, este es uno que podrías usar en el ínterin hasta que tus nombres de dominio reales que estén funcionando. Hagamos clic en 'Okay'. Ahora si estás teniendo problemas con un FTP, algunas de las cosas que pueden suceder es que puedes apagar esto y encender FTP pasivo que a veces puede arreglar las cosas. Otra cosa que podría suceder si estás usando un host diferente, podría no llamarse guión bajo público Html, podría tener una URL diferente. Por lo tanto, comunícate con tu empresa de hosting si estás teniendo problemas antes de molestar, consulta las preguntas frecuentes. A menudo tendrán como configurar en Dreamweaver y te dirán qué pedacito va donde si aún estás teniendo problemas, ponte contacto con la empresa de hosting. Es por lo que les has pagado. A menudo el chat en línea es una manera fácil de hacerlo o dejar caer un comentario aquí en esta página. Ya veré qué puedo hacer para ayudar. Vamos a golpear, 'Save' y ya está hecho y ya está listo. Por lo que subes páginas individualmente en general. Tengo index.html abierto. Por aquí estamos en nuestro panel de archivos. Este es el sitio que está en mi unidad local. Se puede ver vista local. Es sólo mi máquina. Ahora lo que quiero hacer es ponerlo. Entonces sitio puso y esto lo va a conectar con bluehost. Toma mucho tiempo. De acuerdo, conectándose al servidor. ¿ Te gustaría poner archivos dependientes? De acuerdo, esto es importante por alguna razón hay un temporizador en esto. No estoy seguro de por qué, pero tengo 22 segundos para explicarlo. Archivos dependientes por el momento solo estamos sacando HTML. Pero hemos construido una hoja CSS y algo de JavaScript y algunas otras cosas y algunas imágenes que no son todas parte de eso. Los archivos dependientes son todos esos bits extra. Entonces si solo quieres poner el archivo de índice, das click en 'No'. Si lo quieres como yo, pon el archivo índice más todas las imágenes más todo el JavaScript, y todo el CSS. De acuerdo, eso es lo que tenemos que hacer. El motivo por el que mantienen eso separado es que, digamos que son muchas imágenes y son grandes imágenes largas; ver las imágenes tardan más tiempo. Html tarda segundos en actualizarse, mientras que los Jpegs pueden ser bastante grandes. Entonces lo que haces es decir simplemente haciendo que el texto cambie aquí. Cambias el texto y solo subes el HTML. Entonces dices archivos dependientes, 'No'. Porque todas las imágenes no han cambiado. Todos son iguales. Muy bien, así que hemos subido en absoluto, y ahora vamos a ir a revisar, traer tu propia laptop es impresionante. Vamos a echar un vistazo en un navegador. Muy bien, aquí estamos, www.byolisawesome.com. Hey ho, tenemos un sitio web y el resto del planeta lo puede ver. Ya no probar localmente ni probar en nuestro mando a distancia. Todo se ve impresionante y todo funciona. Si tienes hasta este punto, probablemente estés súper feliz contigo mismo. Yo lo he hecho un millón de veces, y sólo estoy haciendo esto para una prueba y todavía estoy bastante emocionada. No sé por qué siento que es diferente cuando el mundo lo puede ver. Vamos a echar un vistazo a qué más tenemos que hacer sólo para asegurarnos de que todo esté listo. Por lo que volver a Dreamweaver. Entonces lo que tenemos que hacer ahora es que necesitamos asegurarnos de que todas las páginas estén actualizadas para que podamos ahora, porque sólo tenemos una de la página, y la página del portafolio, solo podemos abrirla e ir al sitio y ir a poner. Eso lo subirá al hosting. Si tienes montones de páginas, digamos que has actualizado y tienes 20 páginas, puedes tener eso de cerca, no importa. Puedes seleccionar en todas las diferentes páginas de aquí o seleccionar todo el sitio. En realidad no hay necesidad de que esos dos suban. Las plantillas es solo para ti localmente todo el resto de estos pueden subir. Por lo que te podría gustar que este mantenga presionada Comando en una PC, lo siento, comando en un Mac o Control en una PC y haga clic en dos de ellos. Entonces aquí arriba, hay otra forma de poner las cosas en poner. Te volverá a preguntar sobre los archivos dependientes. ¿Quiero archivos dependientes? Voy a tener que decir que sí porque esa interfaz de usuario de cartera tiene algunas imágenes extra. El problema es, es que se va a ir y subir los del índice otra vez. Por lo que puede ser un proceso un poco largo. Vamos a comprobarlo ahora. Hey ho, y vamos a dar click en un botón. Ahí está. Ahí está nuestra gran imagen de portafolio y dice: “Oye aquí hay pedacitos escritos en latín, ¿ no te gustaría traducirla”. Eso es porque tengo este texto de marcador de posición aquí. Entonces eso desaparecerá cuando en realidad ponga el texto adecuado ahí dentro. Gracias. Google Chrome. Muy bien, amigos míos, ese es el fin de poner cosas en línea. Ahora que sé de hecho le da mucha molestia a muchos de mis alumnos. Entonces déjame una línea, deja un mensaje para decir, no pude hacer que funcione, ¿qué pasa? Asegúrate de guardarme capturas de pantalla. No necesariamente necesito tu contraseña, pero es bueno ver cuál es tu nombre FTP y es el nombre de usuario para que pueda diagnosticar el problema. Ese es el fin de éste. Pasemos al siguiente tutorial. 36. Cómo añadir Google Analytics a tu sitio web de Dreamweaver: >De acuerdo, en este video, nos vamos a inscribir en Google Analytics. ¿ Por qué? Porque te da toda esta información sobre quién viene a tu sitio. Es gratis. Se puede ver mi caso. ¿Cuántas personas han pagado por cursos sobre traer tu laptop.com en los últimos siete días, cuántas personas hay actualmente en el sitio? Seis de ustedes. ¿A qué horas del día están? ¿ De qué países son? Todo tipo de bondad. De acuerdo, entonces vamos a pasar y mostrarte cómo instalarlo. Es más o menos copiar y pegar. Súper fácil, gran valor. Hagámoslo ahora. De acuerdo, así que regístrese en Google Analytics, vaya a analítica. Google.com. Deberás iniciar sesión con una cuenta de G-mail. Si no tienes uno, son libres de conseguir, pero vas a tener que usar uno de estos para este proceso. Crea una cuenta de G-mail si aún no tienes una. Pasas por el proceso de inscribirte. Es gratis, terminarás en algún lugar como aquí. Esto cambia con bastante frecuencia. Entonces si tu pantalla se ve un poco diferente, no te preocupes, es bastante fácil. Simplemente sigue los pasos que Google te da. Eventualmente a lo que quieres llegar es tener el código de seguimiento. De acuerdo así que vamos a seguirme sólo porque estamos tratando de que funcione. Nos vamos a ir BYOL es impresionante. Página web. Está bien. Mi nombre de cuenta y el nombre de mi sitio web son los mismos. El URL es www.byol es impresionante. Ve industria escoge uno. Yo estoy en la educación, empleos y educación va a hacer. Está bien. Zonas de reporte, esto no se puede cambiar más adelante para asegurarte de que es en el país de donde quieres el reporte. Entonces vivo en Irlanda, pero si estoy estudiando un sitio para EU, quiero que sea EU porque quiero ahí día y noche porque va a ser raro estar revisándolos. Están como, “Oye, ¿por qué están tan activos a las 4:00am? Cuando en realidad está ahí como las 7:00pm dependiendo de dónde estés en el mundo. Entonces escoge la zona de reporte de no dónde estás sino con el sitio web o la mayoría de las personas que tienen el sitio web, van a estar. Entonces voy a dejar la mía en Estados Unidos. Enfriar. ¿Quería tomar un contrato de arrendamiento? Yo sí. Se puede obtener ID de seguimiento. Estoy de acuerdo. Porque lo que quiero es esto aquí, esta es la parte principal que quiero. Hacemos clic aquí y lo copiamos y luego saltamos a Dreamweaver. Entonces aquí en Dreamweaver, y no voy a abrir estas páginas porque quiero que sea como parte de las plantillas. Voy a abrir mi plantilla. Ahora, estoy en esta pestaña de archivos aquí. Puedes abrir tu plantilla desde dentro de aquí. Enfriar, porque lo que quiero hacer es que lo quiero en cada página. Ahora el usuario no lo ve. El material donde el usuario no ve está en esta etiqueta de cabeza, body tag es nuestra página que todo el mundo ve y la etiqueta de cabeza es solo el código de fondo y ponerlo donde nos dice. Oye, en nuestro caso nos dice que lo pongamos justo en cada página. Solía tener un espacio específico al que necesitaba entrar. Entonces, ¿dónde voy a poner el mío? Voy a meter el mío dentro. A lo mejor que quería cargar justo después de estos guiones aquí. Golpea pasta y tienes este gran, feo pedacito de JavaScript. Lo bonito de ello sin embargo, es que si lo guardo y actualizo esas páginas, impresionante, lo cierro. Solo comprobemos dos veces que está en esas páginas. Voy a abrir índice, volver a comprobar su en el escondite en alguna parte. Se pondrá gris. Ahí. Ahí está bonito. Página de Portafolio. Ahí está. Genial. Se están actualizando. Entonces ahora todo lo que necesito es subir estas dos páginas. Voy a cerrarlos y sólo subirlos al mismo tiempo manteniendo el comando para seleccionarlos a ambos. Vamos a controlar en un PC y vamos a poner. ¿ Te gustaría poner dominio y archivos? No necesito hacerlo en este caso porque realmente no ha cambiado nada excepto por las páginas HTML. Sin cambios en CSS, sin imágenes. Entonces eso va a ser súper rápido. Ahora la parte decepcionante. Vamos a echar un vistazo, es que la coca bebiendo y tomemos un poco salvaje ir. No se recibieron datos en las últimas 24 horas, eso está bien. Veamos si tenemos algún código de seguimiento de inmediato. A donde quieres ir ahora es volver a este botón Inicio, vale, y solo asegúrate de estar dentro, traerás tu laptop es impresionante o lo que sea cuando estés usando. Está bien. Aquí abajo, ¿hay alguna gente en mi sitio? ¿ Hay algún código de seguimiento funcionando realmente? vamos a probarlo. Vamos a BYOL es impresionante. Bonito. Vuelve a la analítica y nada está funcionando. Vamos, Google Analytics. Ahora, todos estamos decepcionados. Eso está bien. El let analytics puede tardar un poco en ponerse en marcha, dale un día. Si no se sabe trabajando para entonces tienes un problema y tal vez llegar a mí y decir: “Oye Dan, no está funcionando”. Revisaremos a través de las preguntas frecuentes de análisis y veremos si puedes arreglarlo. Pero nunca he tenido que fallar realmente. Es una cosa bastante sólida, fácil de hacer siempre y cuando lo pongas en la etiqueta de cabeza. Ahora veamos algunas de las otras analíticas. Echemos un vistazo a uno de mis otros sitios. Echemos un vistazo a traer tu propio laptop.com. Está bien. Yo lo tengo frío. BYOL online. Puedes tener múltiples sitios gratis. Enfriar uno por el momento hay cinco personas en el sitio. De acuerdo, mirando páginas diferentes y no vamos a meternos demasiado en estos detalles porque no lo sé. Siento que hay detalles personales tipo de. No me importa compartir. Se puede empezar a ver todos los detalles que estoy obteniendo de la gente, dónde viene la gente, las páginas en las que más están. Estos son los últimos siete días. Para que pueda ver cosas como la hora ese día que es la mayoría de los usuarios están en línea, todo tipo de bondad. Ahora esto no va a ser curso de Analytics, ¿de acuerdo? Nos apegaremos a que solo se ponga en marcha la analítica. Sí, eso va a ser nosotros analítica súper fácil de hacer, información super cool sobre quién está en tu sitio. No te decepciones al principio. Esto podría parecer impresionante. No lo es. Está bien si cinco personas en los sitios bastante cool. Es uno de los sitios más grandes que he hecho nunca. Pero cuando primero conseguiste un sitio, vas a ser la única persona visitando luego a tu mamá y luego a ti Nana. Entonces el amigo de tu hermano, vale. Podría tener durante los primeros meses puede que sólo tenga un par de personas. Pero a medida que haces crecer tu negocio o tu sitio de portafolio, comienzas a ranking mejor. Toda esa clase de bondad. Empezarás a obtener detalles aquí. Está bien, estoy volando. Pasemos al siguiente video. 37. Ejercicio de clase de Dreamweaver: Está bien es tiempo de ejercicio de clase. Por lo que hay dos opciones la primera es continuar con este curso y construirnos o contactarnos y sobre nosotros página. Entonces pon contenido ahí, vincula a la página de inicio, y luego o bien subirlo a un host para que pueda verlo o probarlo localmente y envíame capturas de pantalla Me gustaría ver qué has hecho con él. Lo siguiente que hay que hacer es y la opción más grande es construir realmente tu propio portafolio. Estoy totalmente contento de que utilicen la estructura que hemos construido en este curso. Yo solo quiero que te apagues y lo cambies tal vez escojas una fuente diferente. Se puede utilizar la misma fuente. Puedes utilizar tus propias imágenes de portafolio. Me encantaría ver eso. Ese es un ejercicio bastante grande lo sé pero si eres como mayoría de la gente has estado evitando hacer tu portafolio este podría ser el momento perfecto, y me encantaría verlo escrutinarlo si pides consejo te daré algunos será constructivo lo prometo. Está bien sí pasemos al siguiente video.