Tu primera página web en HTML y CSS - En Dreamweaver

1. Introducción - Programación para diseñadores: Hola, mi nombre es Dan, y tú mi amigo tipo creativo van a codificar tu primer sitio web. Ahora, vamos a hacer esto corto, lo haremos súper fácil, y tienes que pensar en todo el dinero extra que vas a ganar con tus locas nuevas habilidades de codificación de diseño web. Construí este curso para diseñadores que saben diseñar un sitio, pero se asusta cuando se trata del lado del código de las cosas. No más. Este curso te va a permitir hacer lo que yo hago. Podrás diseñar algo en Photoshop, o Illustrator, para luego darle vida en un sitio web usando Dreamweaver. No se trata de aprender a hackear la matriz, se trata de asegurar que tus ideas sean honradas con precisión cuando se trata del sitio web terminado. Usando los colores adecuados, la cantidad correcta de espaciado entre líneas, el peso de fuente perfecto, y simplemente asegurándose de que todo se alinee perfectamente. Crearemos este sitio web de portafolio aquí juntos, y lo llevaremos desde maqueta, hasta que realmente lo publique en línea. Vamos. Sabes que has estado pensando hacer esto desde hace mucho tiempo. Date de alta al curso y tú persona tipo creativa, y yo, calvo con acento y gafas, vamos a codificar nuestra primera página web. 2. Qué vamos a construir y recursos: Oye, ahí. En este video, vamos a ver lo que vamos a estar creando en todo el sitio, así como todos los recursos que tengo para te ayudes junto con esta serie de videos. Aquí está la página web que estaremos construyendo. Es un sitio de portafolio para creatividad, y estoy feliz de que uses este mismo diseño exacto para ti, solo tienes que cambiar todas las imágenes del CB, y el logotipo. Probablemente no vas a usar foto mía, encuentra tu propia foto de tu adorable yo parado junto a un poste. Es un sitio realmente simplemente fácil de ir a construir por ti mismo cuando estás construyendo un portafolio. Ahora las grandes cosas a tener en cuenta antes de empezar a construir esto es que es sensible y solo significa que profundiza para pantallas de tabletas, pantallas móviles, y obviamente el escritorio aquí. El escritorio aquí tiene algo de relleno en los lados y hay un grupo de imágenes abajo por aquí de tres por tres. Lo que queremos hacer es echarle un vistazo cuando lo cambie de tamaño. Voy a redimensionarlo y viene responsive cuando se baje al tamaño, ¿lo ves? En realidad se está estirando, las imágenes se están estirando, el texto se está envolviendo y la navegación aquí arriba en la parte superior derecha se está ajustando. Ahora, cuando se pone abajo a la tableta ver esto. ¿ Se puede ver el cambio ahí? Entre ahí, eso es a mi vista de escritorio tipo de apretado hacia abajo y luego cambia a tableta. Ahora los grandes cambios aquí son probablemente el más obvio aquí abajo es que deja de apilar tres por tres y es de dos por dos. Vamos a apilar encima de cada unidad pero aquí. El otro es conseguir esos menú de navegación aquí. Está apilado uno encima del otro en tablet, pero cuando es un escritorio, tiene un poco más de espacio, así que se extiende de esta manera. Ahora cuando bajé aún más al móvil, busco mi vista móvil, se puede ver el gran cambio aquí es la navegación. Se convierte en este menú de hamburguesas o sandwich nav, o tres líneas de rayas. Me encantan esas descripciones de este pequeño ícono de aquí. Eso va a ser algo grande para que empecemos es cambiar esto a aquí. Vamos a usar un poco de JavaScript, y en la parte inferior aquí los cambios son estas imágenes apiladas una encima de la otra ahora una a una. Lo que también he hecho es, puedes ver aquí sólo hay cuatro, uno, dos, tres, cuatro. He apagado un par de ellos solo para que no sea toda página realmente larga, solo que podamos encender y apagar las cosas para las diferentes pantallas para que tengas una idea de cómo funciona. Ahora eso es lo último ahí. Vamos a estar construyendo eso juntos. Lo que voy a hacer es, habrá un link arriba en la pantalla aquí ahora, bing, donde puedes ir y echar un vistazo al sitio en vivo. Siempre estará ahí en vivo y solo te ayudará mientras estás construyendo para ir y revisar mi versión para ver cómo se compara la tuya porque la tuya podría no estar funcionando como pensabas y puedes irte a revisar mi versión. Otra cosa que vamos a estar haciendo como parte del curso es, al final de cada video, lo que voy a hacer es guardar los archivos a donde estoy hasta y solo significa que si estás trabajando y te pierdes un poco, y solo puedes revisar mi versión del mismo bien en ese momento en el que estás solo para comparar la tuya con la mía, solo para ver dónde podrías haber ido mal. Esa es la versión final. De lo que estaremos construyendo, y cómo normalmente trabajarás, es tu trabajo a partir de una comp de Photoshop. Entonces esto es lo que estaremos usando como referencia. Volveremos a esta maqueta de Photoshop solo para comprobarlo. Ahora si quieres construir tu propia maqueta en Photoshop antes de empezar a diseñar en Dreamweaver, es realmente común hacer esto. Es realmente difícil ser creativo en Dreamweaver, realmente solo estás construyendo el sitio web basado en una maqueta que has hecho en algún lugar y tradicionalmente se hace en algo como Photoshop. Si quieres meterte más en el diseño en Photoshop, tengo todo otro curso para eso, así que ve a revisar ese, es diseñar sitios web usando Photoshop. Este archivo aquí formará parte de los archivos de ejercicios descargados que forman parte de este curso, por lo que habrá un enlace arriba en la pantalla aquí y también habrá un enlace en algún lugar de esta página para que puedas ir a descargar los archivos de ejercicios. Incluye todas las imágenes que necesitamos, todos los archivos terminados, todos los archivos de producción, y este PSD para que puedas tenerlo abierto y trabajar desde solo para que puedas trabajar a la perfección con el curso. El resto de recursos que forman parte de este curso son los archivos de ejercicios, los cuales van a ser el HTML y CSS, todas las imágenes que utilizamos en este curso, cualquiera de los JavaScript que utilizamos para hacer el menú, esos tipos de las cosas. Además, los archivos de producción, recuerda, al final de cada video, guardaré mi archivo Dreamweaver con todo el código tal y como está ahí mismo para que puedas descargar eso y comprobar en caso de que te pierdas un poco. La otra cosa que puedes hacer si eres profesor o entrenador y quieres convertir esto en tu propio curso, tengo recursos docentes. Habrá un enlace en la descripción aquí o habrá un enlace en la página aquí, y lo que eso hará es que te llevará a una página donde puedes pedir libros de trabajo y lo que haces es ver este curso, subir tus habilidades, y luego puedes usar ese cuaderno para trabajar eso a través de la clase. El caso es que me encantaría que publicaras tus proyectos. Lo ajustarás por tu propia cosa, aunque no esté terminada, y justo donde tengas que hacerlo. Me encantaría ver un enlace o una captura de pantalla de dónde estás. Publícalo en los comentarios de esta página, eso sería impresionante. Otra cosa es que una vez que llegues a un punto, estás viendo este curso y estás pensando, “Este es un curso muy bueno”, o “Este es un curso muy terrible ", quiero que saltes y me des una reseña. Opiniones en cualquier etapa son realmente útiles para que yo desarrolle mi curso y en muchas plataformas, es la forma en que me clasifico bien y me entrené y me encantaría una reseña porque cuanto mejor lo hace este curso, más estudiantes me obtener y mejor me paguen por mis esfuerzos. Así que salta, dame opinión cuando estés listo. Lo último que he hecho es crear una hoja de trucos para ti. Hay un PDF que puedes descargar, e imprimir, y pegarlo junto a tu computadora con todos los prácticos consejos y trucos y cosas mientras construyes un sitio web en Dreamweaver. También hay una versión en video de esa hoja de trucos hacia el final de este curso, o habrá un enlace en la página aquí. Eso es lo que estaremos haciendo. Esos son los recursos disponibles. Vámonos, preciosa diseñadora, y construyamos tu primer sitio web usando algún código aterrador. 3. Nuestra primera página web en HTML y CSS: Hey allá, en esta página vamos a crear nuestro primer bit de HTML y CSS. Vamos a hacer algo de codificación, pero no te preocupes, va a ser bastante fácil de codificar. Entrémonos en ello. He abierto Dreamweaver, lo primero que tenemos que hacer es crear algo llamado sitio, así que sube al sitio a lo largo de la parte superior aquí, y ve al nuevo sitio, dale un nombre a tu sitio, puedes llamarlo lo que quieras. Voy a llamar a este portafolio de Dan, y aquí abajo, esta es la parte importante, la carpeta del sitio local y todo esto hace es decirle a Dreamweaver que vas a mantener tu sitio web en tu computadora. Ahora necesitas mantener todos tus archivos en esta carpeta única. No puedes tenerlos extendidos por todo el lugar como puedes hacer como diseñador gráfico, tienes que tenerlos todos en tu laptop. Vamos a crear una carpeta nueva, así que vamos a hacer clic en este pequeño botón de navegación. Pondré el mío en mi escritorio para este caso, y hago una carpeta nueva, lo voy a llamar dans-portfolio. Aquí puedes ver la convención de nomenclatura, simplemente no uses espacios, intenta usar guiones bajos y como ahora vas a ser un codificador hardcore, necesitas usar mayúsculas en lugar de mayúsculas o mayúsculas, solo porque, ninguna razón real. vamos a hacer clic en “Crear”, vamos a golpear “Elegir”. Una última cosa que haremos antes de irnos es, solo para facilitarnos la vida, ir a configuraciones avanzadas e ir a carpeta de imágenes por defecto, clic en esta, y hacer clic en “Nueva carpeta”, y escribir ot imágenes y hacer clic en “Crear”. Lo que se hace es que se acaba de hacer, vamos a dar click en “Elegir”, voy a mostrarte mi escritorio. Se puede ver aquí está mi carpeta que hice y dentro está mi carpeta de imágenes, y esa carpeta de imágenes aquí bajo avanzado sólo nos ayudará cuando estemos reuniendo imágenes de todo tipo de lugares. Se asegurará de que Dreamweaver los recoja y los ponga dentro de esta carpeta local del sitio. Recuerda todo en esta página, incluyendo nuestro texto o nuestros archivos, cualquier imagen y videos todos tienen que entrar a esta carpeta en mi escritorio llamada dans-portfolio. Hagamos clic en “Guardar”. Primero lo primero, vamos a crear una página HTML 5. Ahora el tuyo podría verse un poco diferente, podrías estar en archivos recientes, o archivos CC, solo asegúrate de que estás de inicio rápido. Demos click en “Documento HTML 5”. Durante este curso lo que vamos a hacer es, hay un par de opciones. Hay estándar, y desarrollador, hay vivo y dividido en todo este tipo de cosas. Vamos a estar en modo desarrollador. Sé que no somos desarrolladores, somos diseñadores, pero vamos a aprender a codificar, bien podríamos usarlo con las mejores herramientas que podamos y este modo desarrollador tiene las mejores herramientas y también es realmente ligero y realmente rápido, mientras que la vista estándar puede ser un poco perezosa y me resulta un poco difícil de usar, así que asegúrate de cambiar a desarrollador. El tuyo podría verse un poco diferente, el tuyo probablemente esté en archivos aquí así que cambiaré el mío ahí. Lo primero que debemos hacer es guardar nuestra página. Entonces vamos a Archivo, vamos a Guardar. Ahora, para nuestra primera página, necesitamos llamarla index.html, y esto es cierto para cada sitio web, necesitas al menos una página llamada index.html como aproximadamente así, y esa será tu página de inicio, y no puedes llamarlo otra cosa solo para esta página, todas las páginas anteriores, digamos en la página de portafolio o cualquier otro servicio o contactarnos, les puede llamar cualquier cosa que nos guste, pero la página de inicio necesita llamarse index.html. ¿ Dónde lo va a poner? Se lo va a poner dentro de dans-portfolio, sólo voy a hacer eso un poco más grande, y voy a dar clic en “Guardar”. Lo siguiente que debemos hacer cuando estamos haciendo que alguna página nueva agregue un título de página, por el momento se llama documento sin título, y solo significa que si previsuo en el navegador, miro esto, vamos al archivo, bajemos a la vista previa en tiempo real y haga clic en “Chrome”. Se va a abrir en un navegador, y se puede ver el título en la parte superior aquí está dice 'documento sin titula' ese pequeño título de página ahí y que aparece en todas las páginas y que aparece tanto aquí en esa pequeña pestaña como cuando la gente marca tu página, pero también cuando Google hace una búsqueda. Si hago una búsqueda en Google, digamos tutoriales de Dreamweaver. Ver estos pequeños, los de arriba aquí, estos bits azules, ahí termina totalmente la página. Si tienes documento sin título, eso es lo que estará en azul y Google, y en realidad nunca clasificarás. Es realmente importante cuando estás haciendo páginas para entrar en el título de tu página así que hagámoslo ahora. Aquí en documento sin título de Dreamweaver, éste se va a llamar Daniel Scotts Design Portfolio. Lo siguiente que vamos a hacer, es que vamos a añadir nuestro primer bit de código. Vamos a darle a “Seguro”. Para poner algo en tu página, necesitas ponerlo entre estas dos etiquetas llamadas cuerpo. Ahí hay un abierto y un cierre, se puede ver el cierre aquí tiene la barra delantera frente a ella. Si pongo un par de devoluciones aquí, así que cualquier cosa que aparezca aquí dentro, va a aparecer en mi página, cualquier cosa que aparezca en la parte superior aquí, en esta cabeza, es amable've cosas de fondo, como, este título de página aquí es una especie de las cosas que el navegador utiliza para cosas raras. En cuanto al cuerpo aquí, aquí es donde vamos a poner nuestro código. Ahora pongamos nuestro primer bit de código HTML. ¿ Estás listo? ¿Listo para convertirse en codificador? El primero que vamos a hacer es que vamos a poner un corchete angular, e íbamos a escribir h1, por lo que h1 es considerado el encabezado más importante de tu página. Para cerrar el encabezado, necesitamos poner entre corchetes de ángulo estrecho. Esa es la apertura de la cabeza y luego vamos a poner en “Hola mundo”. Tienes que escribir hola mundo para tu primera parte de codificación sólo porque esa es la línea de paso para todos. Si eres codificador y alguna vez vas a la escuela de codificación, eso es lo primero que vas a ir y producir, es algo que va a hacer una página que tenga hola mundo en ella. Bienvenido, así que en realidad hagamos que funcione para nosotros. Tenemos h1, la apertura, luego tenemos Hello World, ahora para cerrarlo, necesitamos poner un soporte angular, y luego barra inclinada hacia adelante. Dreamweaver es bastante inteligente y lo termina para nosotros, pero puedes ver por aquí está el abierto, en mi h1, y aquí está mi cierre. La única diferencia es, es lo mismo excepto que tiene una barra hacia adelante por lo que se envuelve alrededor de esa palabra, y eso va a ser rumbo, así que lo hemos hecho, pero necesitamos verlo. Vamos a utilizar nuestra vista previa del navegador en tiempo real. Ahora puedes subir a archivo o hay un camino más rápido por abajo justo aquí, selecciona vista previa, voy a dar click en “Google Chrome”, y ahí mis amigos, tenemos hola mundo en un bonito y grande encabezado. Tú amigo mío, ahora eres codificador. Siempre y cuando la gente quiera un sitio web que solo tenga encabezados en él. Pero lo hemos hecho, tenemos un h1 y tiene algunos textos ahí dentro, está en una página, incluso hemos codificado nuestro encabezado a lo largo de ese título de página del IPRL. Volvamos y hagamos algo más de codificación. De vuelta aquí en Dreamweaver, hemos creado nuestro primer bit de HTML. Lo siguiente que tenemos que hacer es crear algo llamado CSS. Ahora HTML son cosas como las palabras y las imágenes que van a la página son bastante físicas y aparecen en la página, el CSS es con lo que les damos estilo porque eso es lo queremos hacer ahora es este rubro es grande, audaz en Times New Roman y negro. Lo que queremos hacer es ir y empezar a peinarlo, y lo haremos en nuestro CSS. ¿Estás listo? Vamos archivo, vamos a nuevo, vamos a cambiarlo a CSS, haga clic en “Crear”, y esa es una hoja CSS. No es particularmente emocionante ¿verdad? sí tiene un poco de textos ahí dentro así que vamos a guardarlo. Archivo, vamos a guardar, puedes llamar a esto lo que quieras, pero es muy común llamarlo styles.css. Ahora lo siguiente es que necesitamos vincular los dos porque estos son dos archivos separados por el momento, siguen en la misma carpeta, pero no están conectados, así que cerremos los estilos aquí y necesitamos conectarlos. Lo haces vinculando a ella en esta cabeza y nuestro cuerpo es todo lo que aparece en la página y la cabeza es todo lo que está en el fondo que hace esas cosas detrás de escena, y eso es lo que vamos a hacer aquí arriba. Vamos a poner un retorno después, vamos a poner otro enlace a nuestro CSS. Ahora, en realidad es bastante largo pero de código, así que hay un montón de trucos que Dreamweaver tiene para hacer las cosas un poco más fáciles para nosotros, y esa es la razón realmente por la que la gente como yo, viene quien de un fondo de diseño, realmente puede hacer el desarrollo web front-end es debido a todas estas cosas útiles que Dreamweaver nos deja hacer. Hagámoslo, tecleemos el enlace de la palabra y lo que quieres hacer es que quieras golpear a Tab no regresar, regresar no hace nada. Acabamos de tener esta extraña palabra llamada link, pero si tenemos link y presionamos Tab en nuestro teclado, mira lo que pasa. Oye, magia, pone enlaces a una hoja de estilo y tiene esta cosa href aquí y si empezamos a escribir, s, puedes ver Dreamweaver es aún más útil, vale, y puedes ver el styles.css. Se ve en mi carpeta y dice, “Probablemente te refieres a este dan”, y yo digo que sí, y acabo de presionar retorno en mi teclado y lo pone ahí dentro. Ahora están conectados, si golpeo Save, File Save, puedes ver esta pequeña barra de documentos aparece en la parte superior aquí, por lo que el código fuente hace referencia al HTML que estoy viendo, todo este hola mundo. Aquí arriba, los estilos, vale, es cuando estoy cambiando al estilo, y están conectados ahora, así que lo que puedo hacer es que puedo darle estilo a este h1 en mi styles.css. Entra aquí. ¿Qué podemos darle estilo? Podemos estilizar cargas. Pero lleguemos a lo básico hecho. Vamos a escribir h1, y CSS tiene su propia sintaxis, no es particularmente difícil, CSS es el más fácil de todos los bits de codificación que vas a estar haciendo, así que es h1 hacer referencia a la cosa de nuevo en nuestro HTML y luego ponemos en un corsé rizado y luego un proto regresando, y puedes verlo automáticamente poner en un corsé rizado en la parte superior aquí y en la parte inferior. Nuestro estilo solo necesita ir a cualquier lugar entre ellos. No los borres, o, el de arriba, todo lo que hay dentro de aquí. Ahora empecemos a escribir. Hagamos el color de la fuente, así que solo teclea col y puedes ver que Dreamweaver es bastante útil e intenta rellenarlo previamente con potenciales propiedades CSS y en este caso, color está en la parte superior, son realmente comunes. Si usas la palabra color, hace referencia al color de la fuente, y ves que no lo escribí todo, solo hago clic en “Regresar” y lo llenó. Hagamos eso de nuevo, para que escribas col y luego puedo usar mis teclas para subir y bajar, presiono return en mi teclado y lo llena con la sintaxis correcta. Se puede ver que el punto y coma necesita entrar ahí. Lo siguiente que debes hacer es, si conozco el número hexadecimal, podría irme a Photoshop y agarrarlo, o simplemente podría usar el recolector de colores aquí. Puedes arrastrar esta ronda y los deslizadores de tonalidad y enlazar una rejilla, pulsa enter. Lo grande que hay que recordar cuando estás haciendo cualquier propiedad CSS es que para terminarlo, para decirle a Dreamweaver, estás terminado, es poner un punto y coma. Eso es un poco de sintaxis. Tirantes rizados es un vecino de colon que automáticamente se metió, lo puso ahí, y el punto y coma al final aquí. Ese es el que siempre tienes que hacer, y cuando estás aprendiendo es el que olvidarás, y las cosas no funcionarán, comprueba que tienes un punto y coma ahí dentro. Ese código ahí mismo es #FF0000 es el código para rojo. Ahora, vamos a revisar nuestro navegador y lo que voy a hacer antes de irnos él es que voy a hacer guardar. Yo uso este guardar todo, todo el tiempo. Eso lo voy a hacer a lo largo del curso, así que guarde todo, para que guarde mi HTML y mis CSS. Vamos a buscar el navegador. ¿Estás listo? Ya estoy listo. Es un h1, pero es rojo, míranos haciendo diseño web. Volvamos a saltar de nuevo a Dreamweaver. ¿Qué más podemos hacer? Diversión. Hagamos fuente. Se puede ver que hay mucha fuente, vamos a hacer familia de fuentes. Simplemente presiono mi tecla de flecha hacia abajo, presiona retorno y aquí hay algunas básicas, voy a escoger a Gill Sans. Recuerda justo al final de esta cosa aquí vamos a poner un punto y coma. Ahora vamos a golpear Save y luego vamos a saltar a mi navegador, tenemos un gran mundo de hola rojo gigante. Digamos que no nos gusta el tamaño, así que font-s y se puede ver el tamaño y yo voy a meter, vamos a ponerlo en muy grande, así que un 160 píxeles, recuerda terminarlo en un golpe de punto y coma guardar, saltar, gigante “Hola Mundo”. De vuelta aquí, eso probablemente sea un poco grande. Bajemos a tal vez 60 píxeles, guárdalo. Echemos un vistazo a una de las cosas, la fuente blanca, porque por defecto es que la fuente grande negrita blanca está acostumbrada, digamos esta fuente blanca, y 100 es realmente delgada y considerada, 400 es un regular, 600 es alrededor de un semi negrita y 800 es negro. Te gustan las fuentes gruesas grandes, así que voy a hacerlas 100, recuerda el punto y coma final, guarda, salta. Está empezando a verse bien. Gill Sans es una de esas fuentes raras donde me encanta muy pequeña, pero la odio en negrita, no sé por qué. Odio es una palabra fuerte. En fin, volvamos a saltar de nuevo a Dreamweaver y que mi amigo es básicamente lo que vamos a estar haciendo para construir un sitio web. Pones cosas en tu HTML por aquí, en este caso es un h1, pero podría ser una imagen o podría ser un enlace y luego saltas a tu styles.css, lo haces referencia por su nombre, y luego le das algo propiedades, y hay muchas propiedades diferentes, pero no es tan difícil. La gente piensa que codificar un sitio web es súper difícil y puede ser una vez que te metas en los sitios Java dinámicos realmente grandes y hardcore. Pero en cuanto al diseño web front-end y lo que se espera que hagas, se espera que sepas mucho sobre cómo poner cosas en HTML y luego cómo peinarlo en CSS y no mucho más, así que no te asustes. Eso será todo para este video, hemos cubierto cómo iniciar un sitio, definir un sitio local, y luego creamos nuestra primera página HTML. Ponemos un h1 Y ahí, creamos nuestra hoja de estilo, diseñamos, hicimos algo de diseño web. Eso será todo para este video, vamos en el siguiente y lo que haremos en el siguiente es empezar a mirar algo llamado consultas de medios, y eso simplemente nos ayuda a aprender sobre la capacidad de respuesta. 4. Cómo hacer que tu sitio web sea responsivo: Hey, bienvenido a este video. En este vamos a estar aprendiendo qué es el diseño web receptivo y cómo hacerlo usando algo llamado consulta de medios. Lo que nos gustaría hacer es, cuando la pantalla se ajuste a diferentes tamaños, solo voy a arrastrar esto como ejemplo, pero lo que estamos tratando de hacer es conseguirlo así cuando se ve en tablet, se ve como algo, y cuando es un móvil, se ve diferente, y cuando está en un escritorio, todo se ve diferente, y eso es sensible. Estaba respondiendo al tamaño de la pantalla. Eso es lo que vamos a hacer en este video. Entonces saltemos al Dreamweaver. En nuestro último video, acabamos de poner algún h1 básico real en el HTML, y luego lo peinamos en nuestro CSS. Ahora cuando miras la capacidad de respuesta, lo que vamos a hacer es que vamos a hacer algo llamado Desktop-first en CSS. Ahora mucha gente hace Mobile-first, por lo que empezarán a peinar sus pantallas móviles primero porque puede ser la pantalla más difícil de diseñar porque es tan pequeña. Lo que estamos haciendo en este curso, y encuentro con lo que la mayoría de la gente empieza y con lo que empiezo, es que empiezo con mi diseño de escritorio y luego lo escalo para mi móvil. Por lo que depende de ti si comienzas a diseñar primero tu móvil o tu escritorio. Sólo sé que aunque es fácil ir y hacer el móvil primero, a gente le encanta hacer el móvil primero. Yo, yo rocío un poco el barco haciendo escritorio primero. Pero no te preocupes, no hace diferencia a tu sitio y cómo funciona en móvil o tablet. Entonces lo que vamos a hacer es Desktop-first. Simplemente significa que este h1 va a ser de escritorio. Sólo para hacer las cosas un poco más fáciles, lo que vamos a decir es que vamos a poner un comentario. Los comentarios son éste de aquí, y este tipo de aquí con una barra y luego el asterisco, eso está comentando en CSS. Se puede ver uno allá arriba. Simplemente significa que cualquier cosa que pongo aquí es solo para la gente, es ignorada por el navegador. Entonces puedes escribir cualquier cosa aquí solo para ayudarte a ti mismo para que finalmente corrijas algo y quieres dejarte una nota a ti mismo, lo haces entre estos corchetes aquí o en este pequeño fragmento de código aquí. Lo que quiero hacer es que esto va a ser mi Desktop View. A continuación lo que quiero hacer es que voy a copiar y pegar eso. Yo estoy aquí abajo. Ahora retiene esa cosa en código. Esta va a ser mi vista de tablet. Entonces lo que quiero hacer es que vamos a aprender a cambiar esto usando algo llamado consulta de medios. Ahora para escribir en una consulta de medios, es el símbolo @ luego escribes medio, luego pones entre paréntesis, luego escribes “max-width”. Ahora en cuanto a las consultas de medios, esto es lo único en este momento con lo que Dreamweaver no es súper útil. Es el único poquito de cosas para las que vas a tener que escribirlo prácticamente toda la sintaxis para. Esto es lo más difícil que se pone. Por lo que si estás siguiendo, puedes copiar y pegar con los archivos de ejercicio. Puedes descargar esos y jugar, y solo copiarlos y pegarlos, o como yo, puedes escribirlo. Vamos a escoger el tamaño de una tableta ahora. Ahora un ancho máximo, solo significa que estamos tratando de decir qué tamaño debe cambiar este sitio web y qué tamaño es el tamaño de la tableta. Ahora lo más común por el momento está en 768 píxeles. Ahora eso se ajustará con el tiempo, y algunas personas usan algunas ligeramente diferentes, pero ese es el tamaño de tableta más común en este momento. Entonces me voy a poner tirantes rizados. Ahí está tu consulta de medios, y solo significa que cualquier cosa dentro de esas dos llaves ahora se va a activar cuando el navegador llegue a un ancho de eso. Entonces hagámoslo, hagámoslo h1 como lo hicimos arriba. Lo que vamos a decir es, no olvides tus llaves en h1, corchetes rizados regresan, y lo que vamos a hacer es forzar el cambio de color. Entonces vamos a usar el color como lo hicimos arriba. Usaré el recolector de colores, y escogeré verde. No olvides el punto y coma al final. Solo pongamos un poco de espaciado ahí para que se vea un poco más bonito. Simplemente significa que la vista de escritorio, va a ser este color, pero entonces, si el navegador pasa a ser un ancho de esto o menos, lo va a cambiar al color de la pantalla. Vamos a probarlo una vez que se guarde. Pasemos a nuestro navegador. Aquí está. Por lo que en la vista de escritorio, es rojo. Pero oye, mira eso, así que al ancho de 768, va a cambiar el color y eso, amigos míos, es cómo se hace el diseño web receptivo. No tan duro. La gente se vuelve un poco asustada por ello, y sólo significa que, a este tamaño, hacen esta otra cosa. Puede ser, como en nuestro caso vamos a apilar en navegaciones un poco diferentes. De acuerdo, entonces vamos a apilar a estos tipos ahí, y ponerlo ahí. Estas cajas abajo aquí abajo, en lugar de apilarlas tres por tres en el escritorio, va a ser dos por dos en tablet. Agradable. Vamos a hacerlo para móvil también. Porque vamos a usar todas esas cosas otra vez, bonitas y fáciles, vamos a la vista móvil y un ancho máximo para móvil. Los teléfonos móviles siguen cambiando. Siguen lanzando nuevos modelos de iPhone. Por lo que 400 parece ser realmente un buen tamaño. A mí me parece realmente útil. Se ata en algunos de los teléfonos más grandes, los phablety, y también real tradicional. ¿ Qué tan grandes son los iPhones a lo sumo? Creo que el 375 o algo así. Entonces lo hago solo un poco más grande para cubrir en algunos de los grandes teléfonos LG, Samsung. Haz 400, será divertido. Lo que queremos hacer es que queremos cambiar el color. Entonces voy a borrar todo esto. Si escribo punto y coma, debería volver a darme mi pequeño recolector. Genial. Escogeré rosa o magenta o morado, sea cual sea este color. Recuerda al final, punto y coma, no lo olvides. Guárdalo. Saltemos a nuestro navegador. Navegador Chrome. Este de aquí. Entonces escritorio rojo, ¿estás listo? Tableta, verde. Aquí vamos. Móvil, es un color morado, malvado. Voy a disputar ese color. Eso es diseño web responsive. Entonces aquí, mi CSS, puedes ver lo bonito de ello. Mi HTML es super limpio y claro. En esta página hay muy poco. Sólo hay una nueva línea que agregamos. Pero en nuestros estilos, parece bastante complicado, pero porque tú lo construiste conmigo, en realidad, sé lo que eso hace. En realidad no es tan difícil. La codificación no es tan dura como parece. Entonces vamos a h1, esa es mi vista de escritorio. ¿ Puedes ver lo que ha pasado aquí? Este flujo, se llama hoja de estilo en cascada o CSS. Entonces significa que esta cosa de aquí, digamos la familia de fuentes, fluye hacia abajo, y como la tableta no discute con ella, y el móvil no discute con ella, se queda Gill Sans todo el camino, ya sea su tablet móvil o escritorio. Pero color sin embargo, va un poco de pelea. Lo que pasa es que es escritorio a menos que esta pequeña consulta de medios se desencadene y haga eso. Entonces fluirá hasta aquí, y esta pequeña consulta de medios dice: “Oye, cuando llegue al tamaño móvil, quiero ser este color meñky, púrpura, malva”. Entonces esa es una consulta de medios. Lo que tenemos que hacer ahora aunque es apagar nuestro h1 particularmente cojo y hacerlo con nuestra navegación donde tenemos ese nunca sándwich y las cosas no funcionan. Entonces saltemos y empecemos a hacer eso ahora. 5. Creación de un menú de hamburguesa: Hola ahí. En este video, vamos a buscar hacer una navegación responsive. En la parte superior aquí a la derecha, en mi vista de escritorio, la navegación es de tres botones y una pila como esta. Pero tablet, vale, baja para estar debajo y la grande es cuando es un móvil, se convierte en este menú más grande. Vamos a mirar para hacer eso. Ahora, lo que no vamos a hacer es, no vamos a abrir un archivo JavaScript, y empezar a codificar todo. Lo que vamos a hacer es apalancar mucho, en particular, una cosa específica que ya se ha hecho. Hay un montón de personas diferentes que han hecho trozos de código geniales, pequeños, reutilizables que llegamos a usar y simplemente vamos y re-instyle. Porque aunque sería bueno hacerlo todo desde cero, si soy honesto, si alguna vez pasé y hice un sandwich de navegación por mí mismo, no, no lo he hecho. Está bien. Me voy y me paro sobre los hombros de gigantes y encuentro fragmentos que llego a usar y les doy estilo al infierno. Pero, estoy usando la base subyacente de su trabajo. Ahora, hay un montón de diferentes. El lenguaje a usar, digamos que no te gusta el que yo uso aquí, quieres empezar con algo diferente. Busco como un sándwich jQuery Nav. Si vas a buscar eso, encontrarás lotes. He encontrado este, es uno que uso cargas. Es realmente simple, es realmente fácil. Es realmente fácil de estilar. A mí me gusta. Es éste de aquí, déjame sacar esto. Está bien. Es este de aquí llamado SlickNav por Josh Cope. Gracias a dios por Josh. Ha hecho un sandwich súper fácil, Nav que llegamos a usar y estilo y su consiguió bastante buena documentación. En primer lugar, puedes hacer una de dos cosas es si has descargado los archivos de ejercicio. Tengo los pedacitos que necesitas ahí dentro. Pero si solo estás viendo el video. Puedes descargar los archivos que necesites, pegarlos en tu escritorio, o pegarlos en algún lugar y abrirlos, puede haber mirado ahí. Ahí hay un archivo zip, ábrelos y aquí tienes trozos de documentación y las cosas que necesitas. Esta es probablemente la única parte que es un poco difícil para las personas que son completamente nuevas. Si sabes lo que estás haciendo, esto es genial. Pero si no lo haces, aquí hay un montón de cosas. En realidad todo lo que realmente necesitas es, si abres la distribución aquí, necesitas esta cosa y esta cosa principalmente. Esos dos archivos más un poco de texto de aquí. Pasemos por ahí y hagamos eso nosotros mismos. Si estás siguiendo junto con mis archivos, abre el, “Cómo codificar archivos de ejercicio” y lo que buscamos es que quiero que agarres esto, esto, esto. Estos tres expedientes van a ayudar a que funcione. Vamos a golpear “Copiar” y recordar que vamos a ir a nuestro escritorio, abrir dans-portfolio. Recuerda todo para nuestro sitio todos los archivos, imágenes, este bit de código incluido necesita estar dentro de esta carpeta. Voy a empujarlo aquí dentro de la raíz de la carpeta aquí. Si vas a ser muy amable al respecto, deberías tener una carpeta CSS y una carpeta JavaScript y poner todo CSS en eso y JavaScript en eso. No vamos a hacerlo por este iba a mantenerlo súper simple y sólo ponerlos a todos en la parte inferior aquí. Porque no van a ser sitios particularmente grandes. Esto es parte de ello, tenemos este slicknav y tenemos esta cosa aquí. Este poco de jQuery que Josh ha escrito y esta es la biblioteca a la que se refiere. Necesitas los tres de estos para que funcione. Vamos a agarrar el código que necesitamos para que funcione. Si vas a la página web sliknav.com, lo tiene aquí. Yo también lo he guardado en y en el archivo de ejercicios, así que vamos a comprobarlo. Archivos de ejercicio, escritorio, código. Ahí está este de aquí llamado código de navegación. Si abrimos eso, hay este bit y este bit. Vamos a agarrar esto pero primero, copiarlo y lo vamos a poner en Dreamweaver. Vamos a reemplazar “hola mundo”. Eso fue genial. Nos encantó. Fue útil, pero no todo un sitio web. Vamos a colocar esto dentro y solo para ser bonitos, vamos a tocarlo una vez. Eso está ahí dentro. Usa estas pestañas para mostrar quién está dentro de qué. Vamos a guardarlo. Todavía no funciona, no te dejes llevar demasiado o demasiado molesto cuando no funciona. Prevengamos un navegador, solo veremos qué tenemos aquí. Aquí está mi sitio aquí. Eso es todo lo que es, algunos de estos artículos y puedes ver si cambio estos ítems de la lista. Ahora, si cambio esto a cartera, toca “Guardar” aquí arriba puedes ver que eso es lo que estamos haciendo. Está bien. Entonces eso va a ser en la navegación. Esa es la primera parte es que hemos copiado este bit de código en. Siguiente bit de código para pegar, es esta cosa de aquí. Este poco de JavaScript aquí, vamos a copiarlo y vamos a ponerlo y ¿a dónde va esto? Esto va justo antes del cierre del cuerpo, ¿de acuerdo? Todo JavaScript va por abajo aquí. ¿ Sabes qué es JavaScript? Bueno, no sabes lo que es JavaScript. Pero generalmente si hay una etiqueta llamada script, significan JavaScript y siempre va por abajo aquí y te acaban de empujar hacia abajo por el lado inferior no lo elimines. Te quedas ahí abajo, esto es cerrar mi etiqueta de cuerpo. Las devoluciones no significan nada en código sino que simplemente las mantiene separadas. Ahora, lo que encontraremos es que nada realmente funciona todavía. Vamos a saltar y echar un vistazo. Todavía no funciona nada. Eso es parte de las cosas en las que hemos pegado eso, hemos pegado esto. Lo siguiente que tenemos que hacer es vincular esos archivos. Está bien. Los copiamos en nuestro disco duro. El CSS y el JavaScript, no nos hemos vinculado a ellos. Hagamos eso. En primer lugar, vamos a enlazar con el CSS que hizo Josh. Enlace luego tabular. Entonces si empiezo a usar, ¿cómo se llamaba? SlickNav ahí está ahí CSS. Está bien. Genial. Esa es una parte y siguiente necesito enlazar a esos dos archivos JavaScript y lo vamos a hacer aquí. Recuerda JavaScript, va por abajo. Nos vamos a ir guión y en este caso vamos a ir fuente y vamos a ir, ahí está. Bonito. Gracias Dreamweaver. Ahí hay dos de ellos. Necesitaba hacer eso primero y lo voy a cerrar. Entonces tenemos que poner en el cierre para ello ahí. Está bien. Tenemos nuestra fuente de script para ese jQuery para slicknav.js y ahora tenemos que hacer lo mismo porque yo iba a copiar y pegar eso. Pégala ahí. Asegúrate de que las pestañas se alineen. Voy a hacer que todos estos se alineen también, sólo porque no hay razón real, pero se ve mucho mejor cuando todo está alineando hace que sea fácil, para que la persona visual como yo vea. De acuerdo, así que eliminemos este y pongamos en el otro que era jQuery. Ahí está. De acuerdo, entonces esos dos. Esos dos necesitan estar ahí. Vamos a darle a “Guardar” y ahora vamos a echar un vistazo. Dedos cruzados. No funciona. Se ve exactamente como lo hacía antes. Yo sé por qué. Volvamos a Dreamweaver. Cuando estés poniendo este JavaScript en la parte inferior, asegúrate de que éste de aquí, el jquery-1.11.3.min está en la parte superior. Esta cosa de aquí es la cosa que Josh creó, y hace referencia a esta biblioteca por encima de ella. Si esta cosa aparece primero, no puede leer abajo por sí misma. Esto tiene que ser por encima y eso atado por debajo. Entonces eso debería funcionar ahora. Hagamos una salvada, saltemos y tengamos. Eso no está funcionando, puede que no se vea así, pero ese es el tipo de huesos grandes aquí. Entonces la instalación de SlickNav, esto es si llegas a escuchar, has ganado. Nos vamos a ir con estilo obviamente, para que parezca que queremos. Si quieres empezar con algo diferente, si echas un vistazo a SlickNav, hay muchas formas diferentes de tipo de iniciarlo. Hemos empezado con esta Demo Básica que ves aquí. Pero hay formas de usar, acabamos de usar el código básico y puedes ver aquí hay una bonita hinchable con todo tipo de otro desplegable, así que si quieres ir un poco más hardcore esta K empieza con este HTML y este JavaScript más que el que te he dado. Pasemos por ahí y echemos un vistazo. Considerando que es lo que tenemos? Entonces sí menú desplegable y estas cosas están diciendo ahora, lo que tenemos que hacer a continuación es que queremos ver la navegación sólo cuando está abajo en la vista móvil y esta cosa aquí queremos ver una tableta y escritorio tal como te mostraré aquí . Entonces esta es esa línea estilo, este tipo de aquí, y lo vemos aquí escritorio, lo vemos aquí tableta, y no lo vemos en la navegación. Lo que pasa es que sólo vemos esto [inaudible], que es este tipo. Vamos a eliminar el menú de palabras, pero sólo vemos eso y móvil, y vemos esto una tableta y un escritorio. Entonces vamos a hacer eso con ALCI dice. Lo que necesitamos hacer es jugar con cómo las consultas de los medios. Así que echemos un vistazo, en primer lugar, veamos el SlickNav ahora, he echado un vistazo a esto para ti y es, bastante buenas instrucciones pero son de verdad, para alguien que realmente nerdy sabe lo que está haciendo, bueno para mí, pero si tu realmente nuevo, y eres un diseñador gráfico, tiene que ser un poco duro. Pero lo que ha funcionado es que necesito a este tipo aquí, esta cosa llamada SlickNav_Menu, y esta cosa de aquí, lo vamos a copiar. Simplemente puedes tocar el tuyo, voy a Dreamweaver y lo que vamos a hacer es que vamos a entrar en nuestros estilos y vamos a decir en el escritorio, me gustaría que esto se llama menú selectivo, y acabo de jugó alrededor y he resuelto que el menú SlickNav es el nombre que se le da a esta caja aquí, esa pequeña línea de rayas. Entonces los tres, eso son técnicas el uno al otro sólo se llaman Menú. Entonces ese es el nombre para estos se llaman menú y esto se llama menú SlickNav. Entonces menú SlickNav, lo que me gustaría hacer es poner llaves, y me gustaría hacer algo llamado display y me gustaría decir Wheatley block. A mí me gustaría decir ninguna. Eso fue, me consiguió cuando empecé bloque se siente igual que ninguno como blocket no estar aquí. Pero bloque significa mostrarlo como un gran bloque de madera, así es como lo recuerdo de todos modos. Por lo que quiero decir cuando estoy en la vista de escritorio, me gustaría stripy menu aquí, para mostrar ninguno. No quiero que aparezcan en absoluto, por favor, punto y coma. Ahorra, vamos a ver nuestro menú. Echemos un vistazo al correcto, vamos aquí. Por lo que en escritorio no muestra. Por el momento aunque no muestre una tableta, o es un móvil, vamos a ignorar a este tipo en este momento. Pero es una especie de trabajo, está haciendo lo que dijimos, no se muestran en el escritorio y lo que pasa es que éste de aquí fluye hacia abajo y porque nada lo contradice en tablet o móvil, y no se queda todo el tiempo. Entonces lo que tenemos que hacer es en realidad lo que haremos sólo para ordenar esto. Este h1 está aquí, usamos este tipo de solo para probar antes en ese entonces, solo lo usamos para cambiar el color de mi hit solo para que entendiéramos qué estas consultas de medios dónde y cómo funcionaban. Por el momento, solo tendremos uno realmente bonito ordenado, hay escritorio y además solo quiero ser un escritorio slash global. La gente lo llamará global, este top y todo lo que lo anula, será en nuestro caso, tablet y móvil. Pero global es, si alguien dice ponerlo en Global, significan el trozo superior, podría no ser Desktop, podrías estar lidiando con lo que se llama móvil [inaudible] .Así que puede ser Mobile en lugar de Desktop en la parte superior, pero eso se llama global en la parte superior ahí y me perdí un poco. Pero lo que tenemos que hacer es aquí, vamos a copiar todo este trozo. Entonces en esta parte superior, no mostrar y plantilla sin embargo, me gustaría mostrar, bloquear y vamos a revisarlo. En realidad, no quiero hacer eso, ¿verdad? Yo quiero que sea a menudo tablet porque mi pequeño menú, en realidad mi maqueta y Photoshop lo tiene fuera por ahí también, y solo es un móvil, o llego hasta aquí y lo bloqueo. Vamos a darle a “Guardar”. Echemos un vistazo. Entonces Desktop no ahí, Tablet no ahí, móvil hola y es así de fácil, tipo de. Acabamos de apagarlo. El último punto de este bit de menú que SlickNAV ha construido es que estos están atados juntos, cuando cambio, se puede ver aquí no tengo sólo como una cartera. Si cambio éste y voy a contactarme aquí dentro, ya ves que está conectado a éste de aquí son todos iguales, pero se muestran dos veces, y todo lo que tenemos que hacer es decidir qué pantalla mostrará. Entonces lo hemos hecho por el móvil y eso funciona. Entonces es, bueno que el menú más grande, menú tan grande para móvil no para tablet no para escritorio, vamos a ocuparnos de éste. Yo quería [inaudible] Desktop, me gustaría que apareciera para tablet, pero cuando se mete en el móvil, quiero que te vayas porque eso va a leer el menú y este menú se llama, menú. Entonces vamos a ir a mis estilos, y lo que me gustaría hacer es cuando llegue a la vista móvil, me gustaría decir div menu. Habría notado que hemos estado usando paradas completas para estas cosas, para describirlas y a veces no, a veces tenemos hashes. Nosotros sólo seguimos la ventaja de la persona que hizo el SlickNAV. Esto se llama clase y esto aquí se llama ID y las clases tienen periodos frente a ellos, paradas completas, y los identificadores tienen hashes. ¿ Cómo sé que es una identificación? Un par de cosas. El camino más fácil estaba en sus instrucciones. Ahí hay dice menú hash, y lo puedo ver ahí, ¿dónde lo vi? Puedo ver que tiene el ID de menú. Entonces este lado del menú, me gustaría ponerme nuestros tirantes rizados y me gustaría que hicieras algo llamado display y éste de aquí va a ser bloque, no non. Creo que se puede usar. Por lo que no quiero que aparezca el menú en el móvil. Deja tipo de mirada. Ve a previsualizar este aquí. Entonces escritorio, tablet, móvil y esa pequeña línea se apaga y se enciende. Por lo que en el móvil todo el trabajo pasa. menú SlickNav sintoniza, bueno, se enciende y el menú se apaga. Haciéndolos a todos alineados, así que es seguro. Entonces eso es todo para que se ponga algo básico real ahora, nos vamos a ir y peinar porque se ve un poco llana Jane, queremos que se vea como nuestro diseño móvil. Entonces vamos a hacer eso en el siguiente video. 6. Estilizar nuestro menú de navegación responsivo: Hola ahí. En este video, vamos a ver cómo peinar nuestro menú blogger a lo largo de la parte superior aquí porque por el momento se ve un poco así. Tenemos que hacer que se vea así. Hay algunas fuentes que hacer, hay algo de estilo con el menú blogger, hay algo de texto para agregar y quitar, y hacer que se vea bonito. Hagámoslo ahora en Dreamweaver. Lo primero es lo primero sin embargo, tenemos que poner un poco en orden. Acabamos de lanzar esto juntos lo cual ha sido genial, pero necesitamos agregar alguna estructura de núcleo. Tenemos nuestra etiqueta corporal, genial, y dentro de eso tenemos nuestro menú y eso está por encima. Hay algo de JavaScript que se esconde abajo. Lo que me gustaría hacer es que necesitamos poner en un marco y para empezar, es esta cosa llamada un encabezado, así que cogí encabezado, lo cerré, voy a abrir los corchetes angulares y poner la barra, y ves que se llena automáticamente que fuera, genial, así que ese es mi encabezado y todo para tu rumbo va a entrar ahí. Si miro a mi burlado, esta cosa de aquí. Este trozo de aquí va a ser considerado mi encabezado. Creo que logo y nav, eso es más o menos todo lo que sube ahí, y tal vez el número de teléfono. Ese va a ser mi cabezazo, así que dentro ese es este tipo. Es una de mi navegación por lo que va dentro de cabecera. Esto es simplemente realmente bueno. Esto es realmente común para hacer esto. Hay algunas bondades pero principalmente es simplemente realmente bueno HTML5. Sintaxis, se ha cruzado. Genial, así que tenemos un encabezado entonces todo lo demás en medio de tu contenido principal se llama principal. Ciérrelo, corchetes angulares, y barra hacia adelante y eso va a ser todo lo que hay en este sitio, es decir, va a ser prácticamente todo del sitio, así que va a ser esta caja de héroes aquí y estos seis. Ahora bien, no teníamos un pie de página y este diseño, puramente para acelerar este tutorial, pero tendrías un pie de página aquí también. Todo iría a pie de página y a menudo esa es la estructura básica para gran parte de los sitios. No vamos a tener un pie de página, así que vamos a dejarlo apagado. Vamos a trabajar en este encabezado y en mi diseño ahí, primero hay un logotipo, así que tenemos que ponerlo. Está antes de mi lista o nuestro menú, así que lo voy a poner encima. Puse muchas devoluciones, algunas personas sí, algunas no. Voy a poner una imagen. Ahora, una etiqueta de imagen es bastante larga para escribir, así que la imagen y tienes que poner SRC y hay un montón de cosas que entran en ella así que vamos a usar nuestros atajos astutos de Dreamweaver. Simplemente escribe IMG y luego toca “Tab”. Hey presto. Ahora vamos a empezar a escribir IMG para nuestra carpeta de imágenes, hey presto, buen trabajo en Dreamweaver, haga clic en “Enter”, y no hay nada ahí dentro porque tenemos una carpeta vacía. Lo que vamos a hacer es; vamos a ir a dar click en “Browse” y vamos a encontrar los archivos que has descargado, los archivos de ejercicio, si no lo has hecho, echa un vistazo, hay un enlace en algún lugar aquí dentro. En mi archivo de ejercicios tengo una carpeta de imágenes y en esta carpeta de imágenes tengo ese siendo nuestro logo de laptop. Haga clic en “Abrir”. Enfriar. Vamos a darle a “Save”. Lo último que hacemos cuando agregamos cualquier imagen es que necesitamos agregar este texto alt o texto alternativo. Es solo el texto que aparece si la imagen no se carga. Se acostumbra a muchas cosas, lectores de pantalla, y también, Google lo usa para identificar lo que hay en la página, por lo que es realmente importante agregar texto alt. Este es el logo trae tu propio laptop. ¿ Dónde está? Echemos un vistazo a nuestro avance. Ahora está ahí, bonito, solo sentado en la esquina. Eso es genial. Tenemos nuestra imagen ahí dentro. Pasemos ahora a peinar este menú. En primer lugar, hagámoslo el botón de tres, así que me voy a deshacer de ese tipo. Mis diferentes cosas aquí van a ser; portafolio, va a haber sobre mí y contactarme. Genial, cambiar de salida. Agradable, perfecto. Lo siguiente que vamos a hacer es conseguir que flote hacia la derecha porque en este momento está sentado debajo de aquí, necesitamos ponerlo por este lado derecho. Eso es bastante fácil, vamos a ir a nuestro CSS y lo hemos hecho antes. ¿ Recuerdas nuestro menú? Lo vemos abajo. Recuerda, este menú son esas líneas azules por el momento, así que vamos a decir aquí arriba en mi vista de escritorio, voy a poner en muchas devoluciones, me encantan mis retornos solo para mantenerlo todo separado, y voy a decir aquí arriba , “Menú raíz, me gustaría que ustedes, llaves, flotaran, y me gustaría que flotaran a la derecha por favor”. Recuerda, punto y coma, “Guardar”. Echemos un vistazo. Bingo. A continuación, quiero que se apile lado a lado. Si miras la versión terminada, quiero que se apile uno al lado del otro en lugar del predeterminado debajo, así que vamos a hacer eso. Para hacerlo, lo que tenemos que hacer es echar un vistazo a nuestro código fuente aquí, tenemos estos ítems de la lista. Un UL es una lista desordenada, que es una lista de viñetas, y aquí están los aliados en esa lista, por lo que esta es la lista general y estos son los diferentes atributos en esta lista, por lo que diferentes puntos de viñeta, así que esto es los ítems de la lista. Lo que necesito hacer en este caso es que tengo que decir, vamos a hacer lo que se llama selector compuesto. Vamos a decir: “Quiero encontrar artículos de lista”. Los aliados están dentro de los menús. Yo quiero a estos tipos, si están dentro de este menú de aquí. Me gustaría que hicieras esto llamado display, y hemos usado bloque y ninguno antes, vamos a usar este llamado inline-block. Recuerda, el bloqueo está aquí arriba y en línea solo significa que se meten en una linda fila ahí. Oye, oye, impresionante. Enfriar. Lo siguiente que quiero hacer es que me gustaría darles estilo porque se ven un poco tristes, con los subrayados azules y cosas así. Vayamos a hacer eso. Para hacer esta parte, lo que tenemos que hacer es ser un poco más específicos. Tenemos que hacer es darle estilo a estas a-tags, que son mis hipervínculos, que están dentro de las listas, que están dentro de mi menú. Vayamos a hacer eso. Otro selector compuesto. Menús, así que aquí vamos. Estas a-tags están dentro de listas, resultan estar dentro de este menú. A mí me gustaría que ustedes, llaves, hicieran algunas cosas. El primero es texto-decoración”. Vamos a deshacernos de eso. La decoración del texto es el subrayado. Vamos a ir a ninguna. Se puede ver, se puede agregar líneas a través y sobrecargar y subrayar, así que vamos a ir a ninguno, punto y coma, presionar “Guardar”, ir a comprobarlo. Oye, los subrayados se han ido. Agradable. Lo siguiente es que cambiemos el color. Vayamos con ustedes chicos. Yo quisiera decir, tú, y si escribes color solo por sí mismo significa el color de la fuente. Puedes usar tu selector de color, pero voy a escribir en 4e4e4e. Tan sólo un gris oscuro. Recuerda al final, asegúrate de que haya un punto y coma, “Guardar”. Echemos un vistazo. Genial. ¿Qué podría hacer sólo para hacer las cosas un poco más fáciles mientras lo estamos peinando? Sí, sólo para que puedas verlos a los dos. Genial. Lo siguiente que tengo que hacer es darles algo de relleno, así que voy a ir relleno, y si voy rellenando ocho pixeles, ves si dejas ocho puedes ver que va a hacer la parte superior, derecha, inferior, e izquierda todo el camino a su alrededor, que es genial para mí. Es lo que quiero. Lo que quiero hacer es ir y cambiar las fuentes. Ahora, definitivamente podría ir a cambiar esta fuente. Podría escribir familia de fuentes e ir y hacerlo aquí, y escoger una. puede ver que cambió de fondo ahí. Pero voy a tener que hacer esto, decir que quiero escoger una fuente para mi página web y digamos que es Arial o Times New Roman o algo así, tendré que reiterarlo cada vez que ponga un texto. Lo que vamos a hacer es que vamos a hacer algo astuto, es que vamos a decir “para global” sobre el escritorio. Lo pongo en la parte superior aquí porque es algo grande en general. Vamos a usar esta cosa llamada etiqueta de cuerpo. Ahora, si miramos nuestro CSS HTML, cuerpo lo es todo en la página, así que lo que vamos a decir son todas las fuentes que están dentro de esta etiqueta de cuerpo, quiero que seas esta fuente y solo significa todo. Esta a-tag, cualquier encabezamiento que pongamos, todo va a venir para el paseo. Podemos anularlo más adelante, pero quiero decir “Cuerpo, me gustaría que tuvieras una familia de fuentes de, y usaré en el momento Gotham, Helvetica, Arial, Sans-Serif”. Hablaremos de fuentes un poco más tarde porque esas básicas no son muy geniales. Queremos usar fuentes propias, pero lo guardaremos para el video después de éste. Font-family, vamos a usar esto, y ahí están mis tipotas de fondo. Genial. Aquí se puede ver que es mucho más fácil que tratar de escribirlo cada vez que ponemos cualquier texto y sólo lo vamos a ignorar para el global general. Podríamos hacer aquí ahora así como con el tamaño de fuente. Tamaño de fuente, lo haremos, y estoy tirando de estos tamaños de Photoshop. Tengo mi maqueta y sólo voy a entrar y revisar, así que voy a hacer 18 pixeles. Genial, es un poco más grande. Encantador, di “Guardar”. Echemos un vistazo. Lo siguiente que podría hacer es que necesita haber un poco de relleno alrededor de este encabezado o esta etiqueta de encabezado. Podría tapar esto un poco más y la imagen fuera por separado, pero porque están todos dentro de esto, echemos un vistazo, están dentro de esta cosa llamada cabecera. Solo puedo agregar un poco de código y un CSS a este encabezado solo para rellenarlo para que todo dentro de él obtenga algo de relleno. Lo que voy a hacer aquí es, abajo aquí, voy a decir, “Cabecera y llaves”, y voy a decir, “me gustaría un poco de relleno por favor”. Entonces hacemos relleno, top, y tal vez la parte superior es de 10 píxeles. Digo tal vez, ya elegí esto. Han pasado años yendo y decidiendo qué tan grande y poco, así que pasarás un poco más de tiempo aquí volviendo a tu muelle de Photoshop y decidiendo qué se ve bien. Tengo relleno, arriba a la izquierda 20 pixeles. Ahora, lo estoy haciendo el largo camino, lo sé. Vamos a ver esto. Lo estamos haciendo de esta manera, 20 píxeles. Genial. Lo que encontrarás es que mucha gente solo hace esto. Hemos hecho arriba, abajo, izquierda y derecha y es genial cuando estás aprendiendo porque es agradable y fácil. Pero mira esto, vamos a ponernos ingeniosos. Si hacemos relleno, y asume arriba primero, así que si pongo 10 píxeles y meto un espacio adentro, ¿ puedes ver que el poco interfiere? Va en el sentido de las agujas del reloj, así que lo siguiente es el correcto y todo lo demás es 20, así que 20, 20, 20. Está haciendo exactamente lo mismo, punto y coma al final. Simplemente va arriba, derecha, abajo, izquierda. Echemos un vistazo. Sí, tiene un poco de relleno alrededor ahora. Encantador. El siguiente es que necesitamos arreglar nuestra vista de tablet, así que mira esto. Nos bajamos a la tableta y solo se pone toda pila ahí, así que lo que he hecho en la maqueta, recuerden, es que lo tengo para hacer esto y luego se baja a esa encantadora apilada en la parte superior, así que hagámoslo. Lo que quiero hacer es cuando llegues a Tablet a mi amigo, me gustaría que seleccionaras el menú. Lo hicimos aquí arriba. Fuimos a bloque inline-block, que los apila uno al lado del otro. Lo que estamos haciendo es que lo estamos volviendo a lo que era. Te voy a usar, ven aquí. Es sólo el que dice bloque. Guárdalo. Vamos a comprobarlo en el navegador. Tú, y boom. Genial. Podríamos agregarle un poco de relleno debajo, pero como aún no tenemos nuestra fuente perfecta, no vamos a hacer eso todavía. Lo haremos un poco más tarde. Enfriar. Una de las cosas que quería hacer es que quería que se alineara bien. Voy a ir de texto, alinearme, y quiero que esté bien. Cuando se baja la tableta, vamos a comprobarlo, se está alineando a ese lado derecho. Ahora, lo grande que hay que cambiar es un menú grande, porque está aquí abajo y oye, estoy unido en gris y tengo este menú de palabras tú, pesar de que siento que todo el mundo sabe que esa es la palabra para menú, pero me encanta eso es dejó las cosas aquí adentro, si lo necesitas, es fácil de sacar, es más difícil de poner. Primero que nada deshaznos del menú de palabras. Sólo vamos a usar esto sólo en tres líneas aquí, así que vamos a hacer eso. ¿Dónde hace ese menú de palabras? Me tomó un poco de tiempo encontrarlo también. No está en el HTML, no lo está, el CSS, no está en el Slicknav.CSS es no está en el jurado, es en este de aquí llamado jquery.slicknav.js, y hay algunas cosas aquí dentro. No vas a cambiar un montón de cosas aquí dentro, hay algunos valores con los que podrías jugar, pero esta es la etiqueta que quiero. Yo sólo voy a dejar el mío, pero puedes ver que puedo ajustar este si pongo mi nombre, verás que es este tipo de aquí. Voy a deshacerme de esto y dejar toda la detención. Genial, volvamos al código fuente, vamos a comprobarlo aquí. Genial, nada aquí dentro, siguiente arriba, y vamos a deshacernos de este gran gigante, una caja gris. Lo que también voy a hacer, es que me voy a meter esto por aquí porque estoy trabajando en mi Byol aquí y puedo encajarlo. Bonito, puedo hacer algunos ajustes, ahora, esta caja grande gris de aquí, ¿cómo sabes qué son esas grandes cajas grises? En nuestro HTML, solo hay unas pocas cosas en nuestros estilos y pocas cosas. Ahí está este otro CSS llamado Slicknav y va a estar aquí. Estos son los estilos que Josh ha hecho para empezar todo este bit, necesitamos cambiarlos. Están todos aquí ahora. En primer lugar, sólo porque la forma en que se creó esto, realmente no se ve tan bien como me gusta y las cosas en tabbed in, y no hay espacio entre ellos, una pequeña característica agradable en sueño con, si haces un selecto todo el texto, y aquí hay una opción que dice Format Source Code. Da click en él ahí y dice “Aplicar formato de fuente ” y solo arregla las cosas, ¿puedes ver? Hace que sea un poco más fácil para mí hacer ejercicio donde estoy, y bien, no tienes que hacer eso, y ya tengo esto, quiero saber qué es esta barra gris, y lo que harás como diseñador web es que entrarás, usamos en Chrome para mostrarlo, y previsualizar el navegador, y lo que haces es en Chrome es hacer clic con el botón derecho en él, hay opciones para lo mismo en Firefox y Safari, y Edge Explorer, pero usa Chrome, y haz clic con el botón derecho cualquier cosa y ve a Inspect, y lo que voy a hacer es puedes ver que está resaltado y me dicen que es este código div, está bien, haz clic otra vez, di Inspect, esto es div.slicknav_menu grid, y me está diciendo algunas cosas, y lo que busco es, es un poco difícil porque estamos en el tamaño pequeño. Se vuelve un poco más grande si quieres arrastrarlo por ahí. Pero se puede ver por aquí y se puede ver que hay color de fondo? Si giro eso, en realidad tengo que bajar otra vez, sí, ese es este tipo de aquí. Él es, ese color de fondo y que hay slicknav.css, y me está diciendo que es una línea en la línea 64 del CSS lo está controlando. Si entro aquí y voy a slicknav y voy abajo a la fila, ¿es 64? Podría estar mintiendo, no 64, lo siento 94, y hacer este aquí y es dice 94 startmenu, y se puede ver ahí está el color gris, encantador. Usas y gastas un poco te gusta ¿qué demonios es eso? ¿ Qué lo controla? Puedes mirar aquí y te dice qué forro hace el CSS. Voy a agarrar toda esta línea y solo girar, estaba funcionando, la barra de cajas grises, el color se ha ido, pero sigue empujando este logo hacia abajo yo te desliza ahí arriba. Lo que podemos hacer es este menú aquí es que podemos decir flotar a la derecha por favor, deletrearlo bien? Se puede ver cuando se da la vuelta a la derecha, abre un espacio para que este tipo se deslice, genial, esto es seguro entrar ahí. Siguiente vamos y cambiemos esto a los colores están por aquí tenemos esta encantadora, ¿dónde está? Redbox, y notarás que no hay esquinas redondeadas y no hay esquinas redondeadas en las líneas. Sé que es un detalle de menú de verdad, pero no me gustan las cosas redondeadas. Nadie no es el momento, todo se trata de bordes cuadrados. Vamos a entrar en eso, luego cerrar Inspect, y volvamos a saltar de nuevo a nuestro CSS. No voy a seguir saliendo en tratar de usar Inspect para averiguar qué clases se están utilizando. Ya lo he hecho, puedes juguetear con él. Sé que es algo por aquí, es que combino aquí lo es, esta cosa aquí llamada botón slicknav, y tiene esta cosa llamada frontera-radio. No necesito todos los radios fronterizos, adiós, Guárdalo, ya ves, Hey, se fue. Ahí hay toma sombra que era para puede ser tuvimos la palabra menu tu ahí no necesita estar, decoración de tic es el subyacente, no necesitamos eso tampoco, este color de fondo quiero cambiar el de mi archivo flash, ahora es agradable y lee, “Guardar”. Lo último que quiero hacer es deshacerme de mi, difícil decir estas pequeñas líneas blancas tienen esquinas redondeadas en el borde. Por eso me gustan tanto, y es esta cosa de aquí. Todos ustedes aquí, así que slick.nav.slicknav_icon-bar, si lo han hecho es en la línea 43. Había un let no necesito a ninguno de ti chico encantador, pega “Guardar”, y luce bonitos botones cuadrados, genial. Lo último que tengo que hacer es que está funcionando. Pero mi pequeño menú aquí es, me he deshecho del color de fondo, pero se puede ver a estos tipos copian mismo cuando están cayendo, porque me quité ese color de fondo. Lo que tenemos que hacer es que tengo que poner un poco mejor estos botones, vamos y hacer eso, y me encontré con un amiguito es la línea 1, 3, 4, slicknav_nav a, y en este de aquí, no hay color de fondo, así que colorear significa que le peinamos la fuente, y es una fuente blanca sobre un fondo blanco sin color de fondo. Tenemos que añadir un color de fondo, color de fondo, aquí vamos y tengo un color quiero usar F1474c encantador punto y coma, deja Guardar, y ahora, ir aquí podría conseguir hey, tienes un color de fondo. Ahora, lo que realmente quiero hacer es pastel con el relleno y la fuente y el hover, pero no nos vamos a preocupar por eso, que puedas pasar algún tiempo, solo entras en esta misma clase exacta, juegas por ahí, pero tú ver el relleno aquí y aumentarlo y sí queremos hacerlo, pero voy a ahorrar algo de tiempo en alguna parte. Lo único que quieres hacer es que podrías girar, solo jugando con un hover, pero no lo guardes porque imagina que estás en un teléfono, no hay forma de flotar, nadie ve nunca a estos flotantes, no te molestes en hacer los hovers, no puedes si quieres, y vamos a cerrarlo de nuevo. Encantador decir Guardar, y que mis amigos es como hacemos un menú responsive. Versión grande, en un escritorio, pero cuando se hace más pequeño a la tableta, cierra y líneas brillantes y se apila uno encima del otro. Sé que las fuentes no requieren una todavía, y luego se baja al escritorio, lo siento móvil, y es solo el menú grande. Ahora, estos son probablemente demasiado pequeños entonces tu relleno, tienes que asegurarte de que una de las cosas a hacer justo cuando estás haciendo cosas móviles es que especialmente Google. Google revisará tu sitio para ver si estos botones se pueden hacer clic, tienen métodos para ver si estos puntos de contacto realmente se pueden tocar después de demasiado pequeños, como mi papá con dedos gigantes, y golpeas como cuatro de ellos a la vez. Tienes que asegurarte de que haya suficiente relleno, todos los botones son lo suficientemente grandes como para que la gente pueda golpearlos claramente, como parte de algunas de las cosas del ranking que hace Google pero buen trabajo. Lo hemos peinado, puedes peinarlo como quieras. Se puede agregar y quitar, y colores y fuentes y cosas de estilo, pero algún buen hombre del trabajo, hemos usado el slicknav de Lovely Josh de otra persona para hacer mucho del duro trabajo. Es principalmente solo el JavaScript, y sí, lo hemos pasado y lo hemos convertido en nuestro propio equipo de alto cinco. A continuación, lo que haremos es mirar a ponernos en serio sobre nuestra vista previa en tiempo real y prevalecer en un teléfono móvil porque es un poco duro, hacer esto de la diapositiva aquí. Hagámoslo en el siguiente video. 7. Vista previa en tiempo real en el teléfono y la tableta: Hey, bienvenido de nuevo, y hasta ahora lo que hemos estado haciendo es que acabamos de vivir con todo el cambio entre Dreamweaver, nuevo en el navegador y deslizando cosas alrededor del móvil, y éste funciona bien para el móvil, pero no es un teléfono móvil. No es del mismo tamaño. Es más largo de lo que debería ser. Entonces, lo que necesitas hacer es realmente previsualizar en tus dispositivos reales, y es realmente fácil con Dreamweaver. Dreamweaver tiene algunos trucos astutos para hacer eso. Entonces cuando estoy trabajando, así es como normalmente trabajo, es que tengo dos pantallas. Obviamente no puedo por este tutorial porque sólo se puede ver uno de ellos. Pero lo que voy a hacer es tener esto sentado como un escritorio aquí arriba. Tengo una gran pantalla de Mac bonita por aquí, y luego tengo a Dreamweaver abajo en esta pantalla y significa que cuando estoy editando en esto, esto se ajusta. Vemos que sucede al mismo tiempo. Entonces si hago cambios, se muestran instantáneamente en el navegador, lo cual es genial. Entonces eso me da a mi escritorio uno siempre ahí, para que no tenga que cambiar de ida y vuelta. Ahora, para los dispositivos, di tu tablet y tu celular, lo que puedes hacer es, te mostraré abajo aquí abajo. Voy a hacerlo a pantalla completa. Ve esto aquí abajo, este pequeño lector de códigos QR, código QR, y lo que necesitas hacer es saltar a tu teléfono y usar tu lector de códigos QR. Así que vamos, déjame agarrar mi teléfono ahora. Entonces tengo mi lector de código QR aquí. Lo voy a abrir arriba y abajo aquí, fondo de Dreamweaver. Voy a ir aquí, clic y acercar mi lector de código QR. Voy a deshierbar el ángulo en mi escritorio. Buen teléfono de trabajo, salta. Podría pedirte tu nombre de usuario y contraseña. Sí lo hace. ¿Puedes verlo mientras lo estoy escribiendo? Totalmente puedes. Entonces sabes que empieza con T. Pero voy a cortar esto para que no puedas ver el resto. Míranos a nosotros. Lo tenemos en nuestro teléfono. Genial y agradable, solo tomas una foto con lector de código QR. Tienes que descargar un lector de código QR, están libres de la Apple Store o de Android como el mío y luego solo te sientas esto a tu lado, y me voy a sentar ahí y ver esto, mientras hago cambios. Entonces vamos a nuestro styles.css, y ¿qué podemos ver en el móvil? No mucho por el momento. Entonces déjenme decidir, ¿qué podemos ver? Tengo una imagen aquí así que voy a hacer qué con esa imagen? Yo lo voy a hacer más pequeño. Entonces le voy a dar un ancho. Aquí, le voy a dar a este tipo un ancho de 100 pixeles. Se puede ver que se hizo más pequeño. Si le hago 50 pixeles, es diminuto. Se te ocurre la idea, 10 píxeles. Entonces significa que mientras estás trabajando y estás como, digamos que estás haciendo algo en la vista de escritorio, realmente no te das cuenta de que afecta algo en la tableta o dispositivo móvil. Si los tienes arriba a tu alrededor mientras estás trabajando, solo significa que como estás haciendo cambios eres como “Oh, no te diste cuenta de las ramificaciones de eso”, Probablemente la mejor razón para tenerlos arriba es que vas a impresionar al carajo fuera de cualquiera paseando. Si trabajas desde casa, tus compañeros de piso o tu esposa te mirarán y parecerás estar en Minority Report. Muchos dispositivos por todas partes, y en el trabajo te verás como un Coda hardcore con todas las cosas volando alrededor. Entonces eso es la vista previa del navegador en tiempo real, y puedes hacerlo en tu dispositivo también. 8. Trabajar con tipografía en un sitio web: Bienvenidos de nuevo compañeros. Esta, vamos a ver las fuentes. Las fuentes son súper importantes para nosotros los diseñadores. Antes, acabamos de usar Arial y las básicas. Entonces vamos a ver cómo hacer una fuente adecuada. Ahora, tienes un par de opciones para hacerlo y las dos grandes son Typekit de Adobe o Google Fonts. Ambos son geniales. Ahora voy a usar Google Fonts. ¿ Por qué? Porque son más veloces y fáciles y [inaudibles] Ve a Google Fonts, así que es fonts.google.com, escoge una fuente que te guste. En nuestro caso, vamos a usar Open Sans. ¿ Por qué? Es una buena fuente. Es el nuevo Arial. Encontrarás, si abres 100 sitios web, te apuesto 90 de ellos son Open Sans. ¿ Por qué? Porque tiene pesas realmente buenas. Hay muchos otros, Roboto uso lotes, es la fuente de YouTube. Aquí hay mucho y lo bueno de ellos es que están libres. Así que echa un vistazo, encuentra los que te gusten y di que estás en las piezas de diseño donde estás en Photoshop, puedes entrar y decir: “Me gusta Open Sans”. Aquí hay una opción de botón que dice seleccionar esta fuente. ¿Existe una opción de descarga? Haz clic en la fuente, luego te vas, has editado aquí abajo a tu colección. Entonces está esta opción aquí que dice descargar. Eso no va a hacer nada por tu sitio web, pero significará que las tendrás en tu máquina. Entonces si las descargas a tu PC o Mac y puedes utilizarlas solo en tus maquetas de Photoshop y en InDesign e ilustras que estas son fuentes que puedes usar, encantadoras. Pero los usas en tu página web, es un poco diferente. Te dicen qué hacer aquí abajo. Necesitas hacer dos cosas, necesitas poner eso en la cabeza de tu documento. Te dice qué hacer, ponerte eso en la cabeza y este es el estilo que usamos. Entonces agarra eso. Bueno en realidad, antes de que lo hagamos, quiero personalizarlo porque quiero usar en mi diseño, he usado luz, regular y audaz. Lo que notarás es el tiempo de carga, más fuentes incluyes, lento se carga la página y eso es realmente importante para los rankings de búsqueda. Quieres que tu página se cargue realmente rápidamente. Aunque no puedo evitarme. Yo quiero extra audaz, me refiero a moderado y es realmente común que me meta en la lentitud. ¿ Por qué? Porque quiero todo el camino a alguien cursiva y quiero esto y quiero aquello. Entonces voy a usar 300 luz, 400 regular, y 800 para extra negrita. Volvamos a Embed y lo que vamos a hacer es dar click en esto, copiar, entrar a Dreamweaver y ahora Código Fuente. Digamos que pones dentro de la cabeza. Entonces conoce nuestro encabezado, el lenguaje es bastante importante. Esta es nuestra cabeza. Entonces nuestro cuerpo, me voy a mover hacia abajo. Recuerda cuerpo lo es todo en la página, cabeza es lo de fondo. Eso es todo lo que quiero y dice ponerlo en cualquier lugar aquí. Entonces ahí estás en cualquier lugar ahí dentro. Simplemente dice que va a enlazar con Google Fonts y va a buscar esta corte familiar de fuentes, Open Sans con estos tres pesos. No tienes que volver atrás, digamos que sí quieres usar 600 más adelante. Simplemente puedes escribirlo correctamente, pero solo escríbalo ahí y tendrás acceso a él. Recuerda que va a ralentizar tus fuentes sin embargo. Entonces eso es la mitad. Por lo que está buscando esa fuente, necesitas ahora realmente usarla en tu CSS. Entonces volvamos a saltar de nuevo a las fuentes de Google. Entonces dijo hacer esto, luego dijo usar esta familia de fuentes de Open Sans termina aquí, copiarlo. Lo que vamos a hacer es, lo hicimos antes bajo styles.css y dijimos en el cuerpo, así que todo en el cuerpo sea esta familia de fuentes de Gotham. Todos estos, vamos a hacer esto. Así que sólo tienes que cambiarlo y solo dice usar Open Sans en su lugar. Vamos a guardarlo, vamos a echar un vistazo. Mira, es mi preciosa fuente. Podrías estar diciendo: “No se ve muy diferente”. Sí, no es muy diferente a Arial pero es mucho mejor. Sí, está morando en este momento a 400. Podría entrar y cambiarlo. Se puede ver aquí, vamos a bajar a, ¿dónde estaba esa cosa controlándola? Ahí está, ahí. Es mecanografiar font-weight y me vendría bien decir, 800, guardar. He hecho alguna mala sintaxis ahí dentro. oh, esto se ve bien, guárdalo, salta. Las cosas se ven rotas, he perdido mis fuentes, he perdido todo. Voy a archivar, guardar todo. Hay un poco de sintaxis equivocada, he roto y no puedo ver. No, no lo hice, solo salvé todo. ocasiones eso sucede en Dreamweaver, solo tienes que ir archivo, guardar todo y guarda todos estos archivos separados con los que podrías estar trabajando. Oye, tipografía audaz gigante. Entonces voy a apagar eso, volver a la predeterminada 400, guardar. Buen trabajo, tenemos una fuente. ¿ Se puede tener más de una fuente? Por supuesto que puedes, pero los tiempos de carga se agravan. Entonces te vas a ir a Google Fonts y vas a encontrar otra, tendrás que ponerla de nuevo en la cabeza y ponerla de nuevo en algún lugar. Tendrás que usarlo para cuerpo o tal vez quieras usarlo solo para este menú. Para que puedas usar muchas fuentes, pero recuerda, empieza a ponerse un poco lento. Ahora bien, ¿por qué estamos usando Typekit? Sólo porque lleva un poco más de tiempo y necesitas una suscripción de pago para hacerlo. Tienes una suscripción de pago para Typekit porque tienes cloud de crédito, porque estás usando el nuevo Dreamweaver. Por lo que puedes usar eso totalmente, solo me lleva unos pasos extra para configurarme. Hay diferentes fuentes en ellas, hay un montón de las mismas fuentes. Así que ve y echa un vistazo a Typekit versus Google Fonts y encuentra la fuente que va a funcionar para tu diseño. 9. Creación de nuestra caja principal: Hey, bienvenido de nuevo. En este video, vamos a ver cómo crear estas cajas abajo aquí abajo. Empezaremos con esta cosa aquí. esto generalmente se le llama la caja de héroes, a veces el jumbotron. Lo primero que tenemos que hacer es, necesitamos agregar un poco de estructura a nuestra parte principal, algo llamado filas y columnas. Ahora bien, ¿qué es una fila y columna? Es la estructura subyacente de casi todos los sitios web receptivos y la necesitamos, aunque es bastante fácil. Al igual que Excel, piensa Excel. Esta cosa de aquí es de una fila, una columna. Esta cosa de aquí es de una fila, tres columnas. Eso es lo que necesitamos saber. Lo que vamos a hacer, es que vamos a saltar hacia abajo a nuestro Dreamweaver y meter las filas y columnas. Vamos a saltar a nuestro código fuente, y tenemos nuestro encabezado, ahí el está, y luego está nuestro principal. Vamos a poner algunos retes entre él y algunos espaciados ahí dentro. Voy a tabular a través, y lo que quiero hacer es poner algunas filas. Vamos a usar esta cosa llamada etiqueta div. Ahora, las etiquetas div son divisiones del espacio. Es una manera fácil de recordarlos. Lo que tenemos que hacer es crear una etiqueta div. Vamos a crear algo llamado clase div, vamos a darle un nombre a esto y vamos a llamar a esto una fila. Entonces lo vamos a cerrar. Entonces vamos a cerrar esta etiqueta div por corchetes angulares. Al igual que hicimos para nuestro H1, lo cerramos con los corchetes angulares y luego la contrasta. Tengo una fila. Dentro de esa fila, me gustaría una columna. Voy a ir, exactamente lo mismo otra vez. Voy a poner una clase div, genial, voy a llamar a este uno col. Ciérralo. Abre la barra invertida del bit final y lo termina, y esa va a ser mi columna dentro. Este el primero. Asegurémonos de que hagamos las otras. Te voy a mostrar algunas cosas geniales ahora. En lugar de tener que escribir div class es igual y todo eso arreglado de cosas, es bastante bueno con Code help allí para hacerlo más fácil. Pero lo hacen aún más fácil usar esta cosa en el código de fondo ima. Todo lo que hace es decir ver esto, si pongo en.row, recuerda un punto delante de eso significa que es algo llamado clase. Si es un hash frente a él, aprendimos antes, es una identificación. Vamos a hacer una clase. Simplemente pones eso y dices a cambio, el retorno no hace nada, golpea miembro de Tab desde antes, y mira, solo adivina porque es algo tan común. Sabe que si lo pones en una clase y una pestaña, solo asume que quieres una etiqueta div. Fila de clase Div, impresionante, devuelve eso y tenemos uno, dos, tres. Ahora, en este caso, lo que vamos a hacer es sólo por el diseño que quiero hacer. Yo quiero que esto sea uno, dos, tres aquí, así que hay dos filas de tres columnas. Pero lo que voy a hacer es cuando llegue hasta aquí, tablet, si las tuviera dos filas separadas, significa que tengo una, dos, tres aquí y luego tendría uno, dos, tres, y eso parecía bastante raro. Lo que vamos a hacer es en realidad vamos a poner sólo una fila. Vamos a poner seis columnas. Simplemente significa que estos colapsan muy bien. Significa que si llego hasta aquí, todas ellas técnicas, cada una de ellas fluye a la caja porque todos forman parte de la misma fila y van a flotar uno al lado del otro. Tendrás que experimentar con tu diseño. Si tienes cuatro y cuatro, definitivamente podrías tener dos filas con cuatro columnas que funcionarían. Pero se tuvo que jugar con él. Sé cuando tienes estos múltiplos de tres y quieres que haga esto. De lo contrario, este tipo está en una fila separada y es empujado hacia abajo y tienes esta ruptura de ola. Todos van a ser el mismo tipo, confía en mí. ¿ Cuántas columnas quiero? Yo quiero dos o tres. Me va a llevar para siempre, no para siempre podría simplemente ir a llamar y copiarlo y pegarlo, y sin embargo se pone aún más claro. Yo sólo voy a escribir en llamada y antes de golpear a Tab, voy a golpear n veces, y voy a poner en seis, así que los tiempos son sólo los asteriscos. Ahora toca a Tab. Oye, entra. Estos son los trucos que te hacen llegar rápido cuando estás trayendo eso del diseñador web. Vamos a golpear guardar, así que tenemos nuestras filas, tenemos una fila con una columna. Tengo otra fila con seis columnas. Esa va a ser mi pila porque quiero que este héroe entre dentro de esta. Hagamos eso. Para crear un héroe, lo que vamos a hacer es que voy a poner un retorno aquí. Dentro de esta columna, vamos a hacer otro cohéroe, y vamos a golpear a Tab, Pero en este caso, así que al igual que hicimos para fila y col, este de aquí, en realidad vamos con estilo ahora. Por el momento, estas son solo nuestra estructura general que no queríamos instalarlas en absoluto. Pero este tipo de aquí, entramos en estilo. Lo que vamos a hacer es ir a nuestros estilos CSS. Lo vamos a hacer por nuestra calefacción, bueno global y más latas. Vamos a decir.héroe. Las clases tienen un periodo frente a ella. Pueden corchetes, y vamos a hacer un par de cosas. Hagamos imagen de fondo. fondo- imagen. Su URL cuando se trata de imágenes de fondo, y navegar. Ahora este es miembro mirando mis archivos que he descargado. Para los archivos de ejercicio, puedes usar los tuyos propios. Ese es mi antecedente de héroe. Esta cosa de fondo, me he metido photoshop y acabo de bajar tu [inaudible] para que se vea lavado. Me ponen garrapatas en la parte superior. Genial, pega Save, y recuerda cerrarlo de al final, punto y coma para terminarlo. Vamos a revisarlo en el navegador. No pasa nada. ¿Por qué? Porque él está ahí. Pero debido a que no tiene sustancia, hay una imagen de fondo. La imagen de fondo no la mantiene abierta. Lo que tenemos que hacer es darle algo de altura. Ahora, es realmente raro darle altura, ¿por qué? Porque queremos que el contenido dentro de ella defina la altura. Cuando estás trabajando, a menudo añadimos relleno de suma a la parte superior e inferior solo para que las cosas funcionen. Acolchado, van a ser 52 píxeles por cero píxeles. Cero píxeles para la derecha y 72 para la parte inferior, y 72 para la izquierda. Hit Save, y vamos a echarle un vistazo. Ya verás, acaba de conseguir algo de relleno de arriba y abajo y de izquierda, y lo he dejado a la derecha justo a cero, y por eso ya podemos ver la imagen. El imagen no está haciendo lo que queríamos que hiciera. Si amplío esto, se está repitiendo. Se puede ver la repetición ahí dentro. Pero queremos que sea receptivo básicamente. Lo que vamos a hacer es que vamos a entrar a escuchar y vamos a usar esta cosa. Vamos a usar el fondo, y va a ser de tamaño, y vamos a usar este para portada. Portada es una muy útil, si golpeo Save, echa un vistazo. Es el que se estira, se ajusta, mira esto. Se hace más pequeño, va a funcionar en todos los tamaños. No se ve perfecto ahora porque está todo apretado, pero a medida que agregamos contenido, se va a quedar bien. A menudo, la portada de fondo es la que desea hacer que el fondo de las cajas responda. A continuación, vamos a poner un texto ahora y darle estilo. Sí, tener que ver con eso. Lo que vamos a hacer es pasar a nuestro código fuente y dentro de caja de héroes, pongo 10. El primero poner un texto ahí dentro es este ima, y luego diseñador digital. Obviamente, no va a cambiar por lo que vas a hacer. Vamos a jugar para tener la idea de ello. Garrapatas normales del cuerpo, no hicimos calentamientos antes de mover H1 que son importantes y solo debes realmente tener un golpeando un H1 uno por página. Todos los riesgos que toma a menudo como etiqueta p o párrafo. Sólo vamos a usar una etiqueta p. ¿ Qué fue? Fue ima. Voy a cerrar esa etiqueta p con una slash precargada en, guárdala. Vamos a revisar en el navegador, y miremos el correcto. Ahí está esta pequeña ima. Vamos a instalar ese. Ahora, podría darle estilo a la etiqueta p. El problema es si estilo una etiqueta p y voy a usar esto y muchas páginas diferentes. Si lo hago como si fuera mi maquillaje que es grande y audaz, todo el mundo me lleva grande y audaz. Lo que vamos a hacer es hacer una clase poco específica para este tipo. Todo lo que haces entre aquí es que vamos a crear una clase, y vamos a llamar a esta clase una, e íbamos a darle un nombre. Voy a llamar a mina sub hitting, copia eso. Ahora, voy a ir a definir esa clase, sub golpeando tanto estilos. Voy a ir en mi vista de escritorio. Voy a entrar aquí. Ahora, lo que los chicos invierten antes de una clase, así es. parada de tonto o un punto, y voy a darle estilo. Ahora lo que quiero darle estilo tal como es. En primer lugar quiero el color y el color simplemente comprarse estilos la fuente. Ahora bien, hay muy pocos [inaudibles] en este número que recuerdo, y #fff es qué? Es el único que conozco. Fuente blanca, va a ser ese bonito color grande y audaz. Te vas, eso va a ser 800 píxeles menos. Lo que podría hacer es cambiar el tamaño de la fuente y solo estoy tirando estos tamaños de fuente de mi maquillaje de Photoshop. Se puede jugar alrededor, prueba y error. Sé que el margen en la parte inferior aquí necesita ser jugado alrededor con. En realidad, podríamos dejar eso hasta después, para que podamos ver todas las fuentes. Eso lo dejaremos apagado, genial. Comprobando el navegador. Oye, tienes una fuente. No es grande y audaz. ¿Por qué no? Pixeles, no son píxeles. Esto es sólo el peso 800. Gracias. Pongámoslo y debajo, y es este tipo de aquí, el diseñador digital. Pongámoslo y esa va a ser la palabra más importante. Esta va a ser mi H1 en lugar de una etiqueta p. ¿ Por qué? Necesitas al menos un odiar por página para decirle a Google en los motores de búsqueda de qué se trata estas páginas. Si tuviera el H1 como ima, Google vendría dos esta página y diría: “Tu sitio es todo sobre esta cosa llamada ima. Pero quiero que sea sobre diseñador digital. Vayamos aquí. Volver a mi código fuente. Debajo de ella, lo pondremos en H1. Voy a cerrarlo. ¿ Cómo lo voy a llamar? Es diseñador digital. Voy a cerrarlo con mis corchetes angulares foward slash. Este mi H1. Voy a nudo a usar una clase porque ¿por qué? Voy a tener este H1 es, cada página va a usar el mismo título. Voy a usar H1. Vamos a dejar que H1 y aparatos ortopédicos. Te darás cuenta de que no pusimos un punto frente a él o un hash. Solo hay algunas cosas que están prehechas como etiquetas p, H1s, etiquetas de imagen, no golpean etiquetas. El prefabricado en HTML, no necesitamos agregarles nada. Es lo que maquillamos por nuestra cuenta. El material que nunca existió antes en la vida o tiene un periodo frente a él o un hash. Lo que vamos a hacer es que le vamos a dar un color. Recuerda, el único color que conozco, fuente blanca. Este va a abeja la delgada. fuente blanca va a ser de 300 dipolo px, y pongamos en un tamaño de fuente. Este es un bonito, grande, saludable 52 pixeles y guárdalo. Echemos un vistazo en el navegador. Hay algunas cosas, hay algunos predeterminados pasando, h1s tienen por defecto acaba de salir de la caja. Alguien decidió hace mucho tiempo que tienen una brecha realmente grande frente a ellos y, p tag tiene un poco de brecha debajo. Juntos, tienen líder gigante. Entonces vamos a usar márgenes en la parte inferior y menos ellos. Vamos a hacer eso. El subtítulo. De lo que vamos a hacer. Podrías hacer el margen de la parte superior de h1, o me gusta hacer este espacio fuera después, así que vamos a hacer h1. Vamos a remarchar con fondo. Vas a ser menos 54 píxeles. Esto va a jugar con nuestro espaciado. Ahí vas. Agradable. Siguiente bit será código fuente, y tenemos el píxel de párrafo debajo. Ahora lo voy a poner aquí y voy a poner una etiqueta mi p. Ahora, quiero poner una nueva clase porque no quiero usar la misma aquí, así que lo que voy a hacer es usar mi truco. Yo estoy en la p. Si golpeo tab se lo va a meter. Pero podría teclear en clase p. [ inaudible] Para ser realmente inteligente Dreamweaver hace esto p. recuerda. de mi clase y voy a llamar a este uno heading-cuerpo-copia y pegarle a Tab. Se creó mi etiqueta p y le agregamos la clase con esta cosa aquí llamada heading-cuerpo-copy. Añadamos la etiqueta p en el texto de mi párrafo. Vamos a comprobarlo en un navegador. Whoop. Hace esto a veces. A veces necesitas volver a Dreamweaver y simplemente golpear “Guardar todo”. De vuelta aquí eso es [inaudible] Genial. Ahora necesitamos aplicar algunos estilos a esa etiqueta p. Vamos a nuestros estilos CSS. Aquí arriba en mi global o mi escritorio, voy a escribir en la clase que era cabecera, encabezando. No puedo recordar. Sólo adivinar. A ver si funciona. En realidad el color, recuerda el color por sí mismo es para la fuente. Recuerda fff es para blanco. En realidad eso se trata de nuestra fuente. Vamos a revisar, echar un vistazo. Lo que podríamos hacer es jugar con esto porque el espaciado después de esto no es genial. Ahora, notan que no puse un tamaño de fuente en. Si dejas solo un tamaño de fuente, va a recoger 16 píxeles por defecto. Ese es un tamaño realmente común. Trata de no ir demasiado pequeño. [ inaudible] esas son estas sanciones de Google por tener fuentes que son realmente difíciles de leer para las personas con discapacidad. De todos modos. Lo que vamos a hacer es jugar con el margen para éste. Vamos a hacer margin-fondo menos cinco píxeles. Echemos un vistazo. Sí, está llegando a cómo quería. Es [inaudible] un poco grande. Una de las cosas que puedes ver aquí es que, yo no puse ningún relleno en el lado derecho aquí. ¿ Por qué? Porque hay algo que quiero hacer. Es un poco complicado, pero no es tan difícil. Es este tipo de aquí quiero ponerle un margen derecho. Un margen a la derecha. Vamos a usar un porcentaje en lugar de un número fijo. Simplemente significa que el porcentaje puede ser agradable y grande cuando está en un tamaño grande. Entonces si usamos un 20 por ciento es bastante ancho cuando es 20 por ciento de una pantalla tan amplia. Pero cuando se hace más pequeño, empieza progresivamente haciéndose más pequeño como porcentaje también. Podrías totalmente usar real, llaman a un tamaño absoluto cuando usas píxeles, pero este de aquí es un tamaño relativo. Acolchado asegúrate de margin- derecha y va a ser de 20 por ciento. Eso es relativo al tamaño de la caja que está dentro. Genial. Voy a poner un relleno aquí. Te darás cuenta de que aquí es bastante grande. Queremos bajar a los tamaños más pequeños. Se vuelve progresivamente más pequeño por lo que no está siendo demasiado destructivo cuando se baja. Genial. Ésas son las fuentes. Echemos un vistazo a agregar nuestro botón. Es este tipo de aquí. Esto vamos a hablar botón. Puedes hacer click en él y se va a tal vez nuestra página de contáctanos. Vayamos a hacer eso. Ahora cuando estamos poniendo un botón, realmente lo que está pasando es que vamos a poner algo de texto, vamos a poner algo de relleno alrededor y llenar ese relleno con un color, y va a parecer un botón. Vayamos a hacer eso. En mi código fuente. Vamos a bajar aquí y debajo de mi etiqueta p aquí voy a poner un enlace. Ahora, así que quiero que sea un enlace también así que quiero que se pueda hacer clic. Vamos a empezar con una etiqueta. Ahora hemos buscado unas etiquetas, pero no hemos creado una propia. Ahora escribir una etiqueta lleva para siempre. Es un href y luego te pones a donde quieres que vaya. Es un proceso bastante largo. Cuando estás haciendo algún enlace, normalmente una etiqueta también se llama solo hipervínculos. A, ponlo en una pestaña, y mete en la href y toda la basura ahí dentro. Vamos a poder [inaudible] y vamos a hacer una y agregarle una clase al mismo tiempo. Llamaremos a éste hablemos. Hit Tab. ¿ Puedes ver todas esas cosas preciosas hechas por nosotros? Tenemos un hipervínculo que tiene una clase ya aplicada a ella llamada hablemos y pongamos aquí vamos a hablar. Guárdalo. Ahora tenemos que ir y darle estilo a este tipo aquí, así que salta a nuestro CSS. Pongamos pocas rutinas y hagamos y hablemos, .hablemos, llaves. En primer lugar, pongamos un color de fondo porque podemos empezar el color de fondo. Este es hash y es un color de fondo de f147 es el que he usado el color del rojo melocotón. Echemos un vistazo. Ahí está. Se puede ver a dónde vamos a ir desde aquí. Necesitamos un poco de relleno a su alrededor. Vamos a hacer eso. Hagamos relleno y voy a ocho píxeles. Ya ven aquí es incumplida a ocho por todas partes. Arriba, abajo, izquierda, y derecha, si lo dejo así. Si lo pongo en una segunda, que va a ser, qué es, 30 pixeles. Se puede ver que está hecho arriba e abajo a ocho pixeles pero a la izquierda y a la derecha a los 30? CSS inteligente. Podrás llenarlos todos. Pero somos astutos en hacer justo lo que necesitamos. Genial. Tenemos un botón. Se puede hacer clic. No va a ninguna parte. ¿ Puedes ver aquí? Tenemos este href. Realmente no mencioné el enlace. Lo que escribirías aquí, es que escribirías tal vez ir a la página de contacto, contact-us.html. Esa será la página. Todavía no tenemos esa página. Se da clic en él y se le ocurre un error. A menudo, cuando estés trabajando en lugar de dejar un espacio en blanco puesto en esto, ponlo en un letrero de libra o en una clave hash. Simplemente significa que funciona. Pero no hay errores que vomiten. Porque si se lo estás enviando a un cliente y ellos están probando y solo estás diciendo: “Oye, echa un vistazo a la página web”. El look y la sensación, pero no lo real. Todavía no está totalmente construido. Hacen clic en él volverán a ti y te dirán. “ Oye, el eslabón está roto y no está funcionando”. Por lo que solo pones un hash justo como un soporte de lugar y asegúrate de apagarlo más adelante. Genial. Siguiente cosa que queremos hacer de nuevo en nuestros estilos,. ¿ Qué vamos a hacer, te vamos a hacer. Decoración de texto. Ese es el subrayado. Vamos a deshacernos de eso. Pongámoslo a nada. Echemos una fuente. No es fuente, solo es color por sí mismo, fff. Es hash. Tienes que poner esta sintaxis ahí. Se puede poner mayúsculas o minúsculas. Depende de ti. Llegando ahí. Tengo un botón. Necesita un poco de relleno tal vez. Pero dejemos eso por el momento. ¿Qué mira ése aquí? Sí. Estamos llegando ahí [inaudible] caja. Se ve bien. Una cosa que haremos antes de irnos es que se está estirando para siempre. Eso está bien en los tamaños del MacBook Pro. Ya es lo suficientemente grande. Pero si tienes una pantalla gigante como la mi otra aquí o un iMac, pantalla realmente grande, esto se va a estirar y tu propio menú va a estar todo el camino por ahí y tu señal de logo por ahí, y no va a ser genial. Vamos a tener algunos límites en cuanto al ancho de las marcas. Qué grande queremos que se ponga. Lo que vamos a hacer es saltar a nuestro Dreamweaver, y lo que vamos a decir es que me gustaría que no llegara aquí. Hay algo llamado ancho máximo. ¿A qué se lo puede hacer? Se lo puedes hacer a nuestro cuerpo, porque recuerda que nuestro cuerpo es todo lo que está en la página. Quiero decir cuerpo que está alrededor en la página, me gustaría que tuviera un ancho máximo por favor y no te pongas grande que digamos 1024 pixels. Esa es la talla que había diseñado en Photoshop, 1024 es un tamaño común. Tienes que decir 1024 no 1,024. Si dices 1,024, van a saber que eres novato y no sabes lo que estás haciendo. Por lo que 1024. O incluso más grande que eso. Se puede hacer de cualquier tamaño. Echemos un vistazo. Cuando está aquí abajo, es estirarse y hacer cosas geniales. Pero luego llega a un tamaño de pantalla, no se hace más grande. Ver el colon de 1024 o decir 1200, es otro realmente genial. Yo sólo voy a dejar uno aquí. El de las cosas sin embargo, ¿notaste que por defecto se alinea a la izquierda. Lo que tenemos que hacer es cuando estás alineando algo, necesitas hacer algo llamado auto margin-left y auto margin-right, así que lo llaman. Hará los márgenes izquierdo y derecho automáticos y solo se sienta en el medio ahí. Míranos a nosotros. Enfriar. Se llega a un tamaño más manejable, y tú mi amigo ha empezado a construir el contenido. Ahora, muchas de las otras cosas que vamos a hacer es sólo la repetición de esto. Vas a ser un montón de etiquetas div, pero contenedor, dale estilo, y vas a tener un sitio web guapo. Vamos a hacer nuestras cajas que están debajo aquí en el siguiente video. 10. Añadir nuestra cuadrícula de imagen: Está bien. En este video, lo que vamos a hacer es, vamos a sumar estas rejillas abajo aquí abajo. Vamos a hacer eso, volvamos a Dreamweaver. Se van a ir dentro de estas columnas aquí. Lo que vamos a hacer es dentro de esta columna, vamos a poner un “Img”, como lo hicimos antes y luego golpear “Tab”, y luego vamos a dar clic en “Imágenes”, ir a la carpeta “Imágenes”. Ahora aún no los tenemos en la carpeta, así que vamos a darle a “Browse”. Vamos a ir a mi “Escritorio”, encontrar los archivos de ejercicio descargados e “Imágenes”. Aquí vamos a ir “Miniatura 1". Agradable. Asegúrate de que cada vez que pongas una imagen y pongas las garrapatas “Alt” recuerden, es para personas con discapacidad visual, es para personas que usan lectores de pantalla y también para Google. No puedo recordar qué es esta imagen, “Love image”, son emocionantes. Lo que queremos hacer es, vamos a revisar en el navegador. Comprueba el correcto. Ahí está. Yo he hecho el mío un poco más grande. ¿ Por qué? Porque acabo de escuchar que pueden cambiar el tamaño cuando bajan a, ¿ puedes ver cuando bajan al móvil en realidad se pone bastante grande? Cuando estés peinando estos, asegúrate de usar, porque vamos a usar la misma imagen a través los tres tamaños y simplemente hacerla sensible. Así que solo asegúrate de que tu imagen sea lo suficientemente grande, por lo grande que sea. A continuación, lo que podríamos hacer es simplemente duplicar esa. Vamos a eliminar a todos estos tipos. Ten mi cursor, puedes copiarlo y pegarlo, eso funciona. Pero un atajo genial es, pon tu cursor en cualquier parte aquí ir “Comando D” o si estás en un PC, ve “Control D”. Sólo tienes que ir “Control D, D, D, D”. Tenemos a todos nuestros pequeñitos. Lo que tenemos que hacer es apagar estos. Ahora, no puedo simplemente ir a cambiar el texto aquí. ¿ Por qué? Porque ¿recuerdas cuando estábamos aquí, estábamos en “Browse” y en realidad lo copiamos en mi carpeta? Necesito ir a moverlas. Vamos a echar un vistazo a esto. En algún lugar justo arriba hay, este es el sitio web. Ahí están las imágenes, y ahí está el tipo al que se copian. Esta es mi carpeta de archivos de ejercicios. Déjame agarrar a todos estos tipos. Vengan aquí chicos, oops, no los puedo ver. Odio esto de un Mac. Están ahí en alguna parte. Necesito ir en la carpeta “Imágenes”. Entra ahí. Genial. Ahí están todas mis imágenes. Ahora debería poder entrar aquí, así que aquí va a ser “miniatura”, en realidad, la miniatura de ésta. Porque acabo de copiarlo de fondo ahí, podría tener que hacerlo ya que no está apareciendo, así que voy a golpear “Guardar” y hay una actualización, es [inaudible] tanto en un Mac como en un PC. [ inaudible]. Al llegar ahí, estamos llegando. Ahora, una cosa que tienes que hacer es, solo estoy copiando estos, solo atascándolos ahí dentro. Deberías cambiar el texto antiguo por todos estos, es realmente importante. Suficientemente importante que no lo voy a hacer ahora, porque sólo estoy haciendo un tutorial. No es mi sitio real. Tengo a todos ustedes chicos, vamos a revisarlos en el Navegador. Están todos dentro. Por defecto, se apilarán uno encima del otro. Lo que tenemos que hacer es conseguir que colapsen uno al lado del otro, para que se apilen. Nosotros vamos a hacer eso. Vayamos a Dreamweaver y hagamos eso ahora. De acuerdo, así que para hacerlo, tenemos una columna ilegal de clase. Pero sólo vamos a decir, si volteamos todos estos cols a la izquierda, y se pegarán entre sí. Hicimos flotadores más temprano y flotamos al miembro de navegación a la derecha, flota por esta vía. Si flotas hacia la izquierda, seguirán apilándose uno al lado del otro, porque por defecto, se apilan uno debajo del otro en línea. Vayamos a la web styles.css en algún lugar de la parte superior aquí. Realmente no importa a dónde vaya. A mí me gusta poner estas cosas grandes en la parte superior. Ahora recuerda que esto es una clase, así que me olvidé de poner el punto, matar los frenos, vamos a flotar, y vamos a ir a la izquierda en tu imagen, mira. De acuerdo, entonces flotan. No hay espacio suficiente para que todos entren ahí, pero se meten en su mayoría ahí. Entonces lo que vamos a hacer ahora es crear otra clase, vamos a dividir esto en tres partes. Vayamos a hacer eso. Ahora, este bit que vamos a hacer ahora es trabajar con algo llamado la grilla, ese es el término crudo de tratar con este posicionamiento donde logramos que se apilicen de una manera en el escritorio, y de otra manera en tablet, y luego de nuevo en móvil. Estamos lidiando con esta cosa llamada grilla. Lo que vamos a hacer para que esto funcione es, vamos a crear una clase y vamos a llamar a éste “col-lg”, grande. Es realmente típico llamar a escritorio grande, tablet medium, y tienes pequeño, y luego puedes tener extra pequeño también. Vamos a usar a este tipo. Lo que vamos a decir, va a ser bastante fácil. Vamos a decir que tienes un ancho de, ahora podríamos hacer 33.3 por ciento y ahorrar. Creo que va a funcionar. Lo hemos creado, pero no lo hemos aplicado. Hemos creado esta cosa, ahora ve por aquí, y vamos a aplicarla a esta clase. Tenemos una clase llamada “col”. Vamos a aplicar la segunda clase. Acabas de ponerlo ahí dentro. Los pegas uno al lado del otro. Es así como aplicas más de una clase. No tienes que volver a escribir clase, puedes, pero solo las pones entre estas comillas con el espacio entre ellas. Genial. Ahora, quiero hacerlo por todos ellos. Hay un truco genial que Dreamweaver hace. Si hago clic aquí y mantienes presionada la tecla “Opción” en un Mac o la tecla “Alt” en un PC, y hago clic y arrastre, ¿puedes ver que tengo un cursor, múltiples cursores? Ahí va eso. Oye, me encanta, col-lg, está bien, y vamos a aplicarlos a todos. Genial. Ahora vamos a comprobarlo. Está funcionando. Todas las columnas tienen el ancho correcto. Pero estas imágenes no están siendo receptivas. Por lo que por defecto, estas imágenes están siendo su tamaño exacto, las columnas son las anchuras correctas, pero la imagen está cuadrada sobre los bordes. Vamos a arreglar las imágenes para que sean 100 por ciento. Para que nuestras imágenes respondan, vamos a ir a nuestro styles.css. Voy a crear una clase donde mientras esté en el bateo global. ¿Dónde lo voy a poner? Lo pondré con las columnas que he hecho. Vamos a hacer otro selectores compuestos. Vamos a decir, “Imágenes que están dentro de mi col-lg”. Yo voy a hacer esto, y vamos a decir, estos tipos van a tener un ancho del 100 por ciento. Genial. Lo que necesitamos solo para hacer que las cosas respondan es que necesitamos agregarle una altura también y simplemente ponerlo auto, y eso te ahorrará algunos problemas más adelante. Simplemente recogió automáticamente la altura. El otro elemento que lo hace útil es el bloque de visualización. ¿ Por qué? Sólo porque. Las imágenes sensibles hacen que el ancho 100 por ciento tenga sentido. Ponga la altura en exhibición sin embargo, ahí dentro. Hará que funcione. Echemos un vistazo en el navegador, métanse ahí. Agradable. Entonces los anchos son correctos. Sí, así que los anchos son 33.3 por ciento. Todos se pegan uno al lado del otro, y las imágenes están respondiendo. Lo que tenemos que hacer ahora, porque se puede ver, como ver 33 por ciento es genial porque se pone abajo cuando se pone abajo a la mesa. Lo siguiente que quiero hacer es en realidad, mi Mockup tiene relleno entre estos. Vamos a agregarle un poco de relleno. Cómo he hecho el relleno en este caso, lugar de usar este 33, no hay espacio suficiente para remar. Tenemos que bajar esto un poco. Por lo que me he quitado un dos por ciento de descuento en el tamaño general. Lo que voy a hacer es que lo voy a usar para aquí y voy a hacer algo de relleno. Vamos a poner relleno todo el camino, y vamos a hacer uno por ciento. Usamos ese porcentaje por aquí. Sí, echemos un vistazo, hay uno por ciento a su alrededor. Genial. Uno por ciento a ambos lados, está bien, izquierda, derecha, arriba y abajo alrededor de estas columnas y el resto. Supongo que solo para hacer mi punto aquí es que si lo dejas en 33, no hay espacio suficiente, así que 33 más el 1 por ciento en el medio, empuja a este tipo. Lo que queremos hacer es asegurarnos de que haya suficiente espacio aquí. Cuando estás haciendo el tuyo, el tuyo podría ser talla cuatro. Vas a estar usando 25 por ciento si tienes cuatro por aquí. Vas a jugar con diferentes porcentajes, lo que sea que funcione para ti. Vas a tener que menos. Sea lo que sea que hayas usado para el relleno, menos fuera del sello ancho y sí, haz un poco de jugar de ida y vuelta. Genial. Hemos hecho una cuadrícula receptiva. Se ve bien ahí. Cuando bajamos a la tableta sin embargo, lo que me gustaría que hicieras es que quería cambiar de esta de aquí. Esta es nuestra versión de trabajo. Cuando se envía tablet, quiero cambiar a estas dos columnas aquí. En el momento en que lo hace, se queda así. Lo que vamos a hacer es que vamos a crear otra clase. Lo haremos, pero en lugar de ponerlo en la cabeza aquí, lo vamos a crear para que solo se active cuando estamos en vista de tableta. Cualquier cosa en esta consulta de medios solo se activa en su momento y estamos al máximo dentro de este ancho aquí. Lo que vamos a hacer es crear una nueva clase llamada 'Col-MD” para medium. Este de aquí va a ser del 25 por ciento. Cuando digo 25 por ciento, lo que quiero decir es 50 por ciento. Pero vamos a tener el ligero problema. Por alguna razón acabo de escribir 50 por sí mismo, así que tecleemos en la cosa completa. Esto va a ser un ancho del 50 por ciento. Pero porque tenemos ese relleno aplicando, echemos un vistazo. No está funcionando. ¿Por qué no funciona? Es porque lo creamos aquí, creamos este frío medio, pero no lo hemos aplicado a nada. Voy a fingir que lo hice a propósito, pero me olvidé totalmente. Vamos aquí, tenemos esta cosa llamada “Col-LG”, pero también necesitamos una aquí llamada “Col-medium”. Recuerda nuestro truco, haz clic aquí, mantén presionada la opción para la tecla “Alt”, “Espacio” y tecleemos “Col-MD”. De acuerdo, así que lo hemos creado, lo hemos logrado. Vamos a comprobarlo, y no funciona. Recuerda 50 por ciento, pero porque tenemos relleno ahí dentro, necesitamos ser un poco más pequeños. Aquí es donde puedes entrar y jugar con, sé que son 48 porque ya lo he hecho. Genial. Por lo que cabe ahí. ¿Qué es esto? Por lo que en el escritorio es de tres a través. Cuando llega hasta aquí, es de dos al otro lado. Ahora el último que tenemos que hacer es cuando nos metamos en el móvil, me gustaría que fuera 100 por ciento a través. Vamos a hacer eso ahora. Nosotros vamos a hacer dos cosas, nuestro Mockup tiene la vista móvil, todos son 100 por ciento de ancho. Nos vamos a deslizar aquí abajo, vamos a crear una clase llamada “Col-small”. Este va a ser un ancho de nuestra ventana, vamos a ser un ancho del 100 por ciento. La sintaxis se está volviendo un poco desviada. De acuerdo, vamos a aplicarlo. Aquí está nuestro truco genial. De acuerdo, vamos a ser “Col-small”. Genial. Vamos a revisar en el navegador, y va a estar un poco roto. Bueno no está roto, pero quiero deshacerme de este relleno en el medio. Mi Mockup sólo los tiene a todos peroteando uno al lado del otro. Entonces lo que vamos a hacer es, aquí, vamos a nuestros estilos, y arriba arriba aquí dijimos col tiene un relleno del uno por ciento. Lo que vamos a hacer aquí es que vamos a decir, esa misma clase, te vamos a decir, col tiene un relleno de cero. Pixeles o por ciento, no importa, 00. Genial. Todos se están molestando uno al lado del otro. Impresionante. Míranos a nosotros. Se puede empezar a ver que estamos haciendo cosas receptivas. Cuando miras a los CSE de alguien más y miras esto por primera vez, dices: “Wow, ok. Eso es bastante complicado”. Entra aquí. Eso no está tan mal, sobre todo con las pestañas y todos los retornos. Aquí están pasando muchas cosas. Pero puedes empezar a ver si empiezas a astillar en esta cosa una pequeña clase a la vez, realidad es, creo bastante simple. Genial. ¿Qué más necesitamos hacer? Lo último que creo es sólo un color de fondo. No lo sé. No es gran cosa, supongo. Se lo vamos a hacer al cuerpo, vamos a hacer el color de fondo. Vamos a “Color de fondo”. Yo sólo voy a escoger un gris claro porque eso es lo que estaba en mi Mockup. “ D, d, d”, “Guardar”. De acuerdo, entonces color de fondo, se puede ver que solo es un ligero gris ahí dentro. Enfriar. Está bien. Bien hecho. Nosotros, y tú y yo hicimos un sitio web. El gran cosa es esta navegación aquí, responde. Una vez que aprendemos ese tipo de cosas receptivas sin consultas de medios, en realidad se volvió bastante fácil hacer estas. Ahí está nuestra vista de tablet, hasta el escritorio, un bonito sandwich nav-sándwich, y tenemos nuestras pequeñas imágenes en marcha. Bravo. Pequeñas cosas que haría para retocar esto, se puede ver en hits móviles, el relleno probablemente sea un poco grande para éste. Entonces lo que haces es encontrar la clase que hace tu caja de héroe. Está en la cima aquí en alguna parte, hay algo llamado hero.Haces otra clase y simplemente cambias el relleno y lo anula y lo haces más pequeño. Vas y finges todas estas cosas, tal vez las fuentes también. Es un poco porque se rompe a dos líneas. Por lo que solo consigues tu H1, haz otro H1 aquí abajo en la vista móvil y anula el tamaño de fuente. Mucho de esos pequeños retoques es raro. Supongo que tú como diseñador gráfico realmente brilla. Todos esos pequeños ajustes en cuanto al espaciado después y el espacio entre líneas, y todos los tamaños de fuente y cosas. Enfriar. Está bien, no más tontos. Pasemos al siguiente video. 11. Publicar su sitio web en Internet: Genial, así que hemos creado un sitio, ahora queremos ponerlo en línea. Necesitas un host y un nombre de dominio. Solo los comprarías juntos, tengo todo un curso sobre comprar nombres de dominio y hosting. Iba a hacer la versión rápida aquí para ponerte en marcha. Ingresa a tu cuenta. Voy a usar GoDaddy, es el hosting más grande, más popular del mundo. Si tienes algo más, no está lejos hay pequeños quarks. Lo que vamos a hacer es, voy a iniciar sesión en mi cuenta. Lo que quiero hacer es conseguir un alojamiento web. Ya hemos comprado nuestro hosting web y pagado por un nombre de dominio. Tenemos el hosting básico. Va a fusionarlo. Espere a que se cargue. Estás buscando esta cosa llamada cuentas FTP. Entonces protocolos de transferencia de archivos así es como subes tu sitio web a tus servidores de hosting. Creas uno, pones aquí, vas a llamar a éste prueba. Le das tu nombre, pero en realidad no importa. No tiene que ser una dirección de correo electrónico parece pero no. Hacer cualquier cosa aquí dentro. Dale una contraseña, asegúrate de que sea una realmente buena, no como la mía de aquí, realmente sencilla. Voy a ir a eliminar esta cuenta por si acaso, justo después de esto. El gran cosa al usar GoDaddy es que, puedes verlo, poner en nuestro nombre de usuario aquí. Se va a hacer una sub carpeta, no lo que quiero. Necesita entrar en public_html. Tradicionalmente ahí es donde van las cosas. Si estás usando otro hosting, te dirán que a veces tiene htdocs y algunos nombres y público. Casi siempre tiene public_html, es como la raíz de todo lo que entra. Haga clic en crear cuenta. Lo único que necesitamos saber ahora es, bueno, necesitamos recordar nuestro nombre de usuario y contraseña. Vamos a saltar a Dreamweaver, abramos nuestro Sitio y vamos a Administrar sitios. Aquí está el Portafolio de Dan. Hicimos esto justo al principio. Esa es la que nosotros y aquí recordamos hicimos la carpeta local en nuestro disco duro y le dijimos adónde fueron las imágenes. Ahora, lo que vamos a hacer es ir a este llamado Servidores y luego golpear “Plus” y luego aquí, vamos a llamarlo GoDaddy. Realmente no importa cómo lo llames, aquí dirección FTP. Si no estás usando GoDaddy esto puede ser diferente, bringyourownlaptop.com. En ocasiones, no necesita el FTP para algunos hosts, en este caso lo hace. El nombre de usuario estaba probando @bringyourownlaptop. De nuevo a veces, algunos hosting solo necesitan el nombre de usuario, no necesitan toda esta basura. Contraseña, pon eso. Ahora vas a golpear “Test” y te vas a cruzar los dedos. Conectado con éxito. Ahora eso me funciona porque sé lo que estoy haciendo. El hosting es, con mucho, la parte más difícil de configurar. No tengas miedo si sigue sin funcionar lo has probado, lo has intentado sin el FTP, sin este nombre de usuario. Otras cosas que puedes probar es no golpear el directorio raíz, a veces necesitas poner un public_html\. Aquí abajo a veces, bajo un Más opciones, necesitas desactivar FTP pasivo. Hay algunas cositas con las que puedes jugar, pero mi consejo es, no te estresesdemasiado o demasiado tiempo, solo manda un pero mi consejo es, no te estreses demasiado o demasiado tiempo, e-mail a la empresa de hosting, envíales la captura de pantalla de esto aquí y di que estos son los detalles que necesito, qué ¿es? Después, te enviarán los detalles y solo los pones. Ahora lo que haces es golpear “Guardar”, golpear “Hecho”. Genial. Haga clic en “Aceptar”. Genial. Ahora lo que haces es, subes al Sitio, así que está conectado ahora, pero en realidad no ha pasado nada. Tienes esta cosa llamada Local, y tienes esta otra ahora llamada Remote. Eso es lo que queremos, Local está en nuestra máquina, Remote es GoDaddy, es el servicio de hosting. Vamos al Sitio y llegamos a Put y le pegas a “Put”. Se va a pasar y conectar. Entonces, te va a preguntar, ¿te gustaría poner las carpetas dependientes y haces clic en “Sí”. Se va a poner el html arriba, pero luego necesita poner el CSS arriba, este otro CSS y JavaScript. Pasa y pone todas las imágenes. Voy a golpear “Cancelar” en este caso. ¿ Por qué? Porque por el momento subiría este extraño, no raro pero este portafolio encima de mi ciclo web bringyourownlaptop.com. No quiero hacer eso pero lo que haces es, que se ejecute entonces irías a bringyourownlaptop.com o tu URL y tu cartera debería estar ahí. Si no lo hace, hazme una línea en los comentarios y te daré una mano. Definitivamente conectar el servidor es más difícil para cualquiera porque incluso sigue siendo difícil para mí. No quiero conseguir un nuevo host o alguien usando nuevo host de un cliente y tengo que trabajar todos los diferentes ajustes. Así es como conectar un sitio usando GoDaddy. Eso será todo para este video. 12. Las cosas duran ahora que estás programando: Está bien, así que para terminar, las últimas cosas que necesitas hacer, supongo que para completar un sitio web es crear otras páginas. Permítanme sólo rápidamente, entrar brevemente en ello, porque es literalmente que simplemente crearíamos otra página como hicimos esta. Digamos que vamos a empezar con la base de nuestra página de inicio. Ahí está nuestro índice a nuestro HTML. Yo sólo voy a empezar con eso, así que vamos a duplicarlo, conseguirlo duplicar. Hay una copia genial, así que no quiero llamarla y le renombré, edito, renombraré y llamaré a esta “página My_Contact_me”. Genial, no hay espacios, solo usa guiones o guiones bajos. Entonces tenemos esto, doble clic en él para abrir, mi página de índice, mi página de inicio y ahora esta página de contact_us. Qué vamos a hacer en este a medida que avanzas y empieces a cambiarlo dependiendo de tu diseño de digamos, Photoshop. Entonces voy a cambiar esto a tal vez contact_me. Yo me voy a deshacer de eso y tú empiezas a peinar esta página. Echémosle un vistazo en el navegador. Ahí está, por lo que puedes ver esta es mi pagina de contactarme. Voy a repasar la página superior. Todavía tengo mi página de inicio. Si vuelvo a este y pero aquí lo está, esta es mi página de inicio y mi página de contact_us se ve muy similar. Supongo que hasta ahora, decido cuántas columnas quiero, qué va a ir en esas columnas y toma un tipo, probablemente una forma en ésta. Ahora para conectar los dos, vamos al índice, y quiero conectarlos porque recuerden que antes usábamos hashes. Entonces aquí arriba hemos usado hash. Entonces lo que voy a hacer es eliminar el hash y lo voy a llamar desde contacto. Se puede ver pre-llenarlo, bonito. Por lo que mi menú ahora cuando haga clic en contact_me debería saltar a más uno para evitar un navegador. Por lo que homepage, hago clic en “Contact_me”. Va a mi página de contact_me. Eso es todo luego vete y construye algunas páginas y conéctalas esta. Ahora las otras cosas que puedes hacer es que tengo un montón de otros cursos, agrega este para Photoshop. Acabamos de tener una maqueta al principio ahí. Hay un Photoshop para diseño web y curso que tengo. También hay un curso más grande, este de aquí es supongo uno corto. Son algunos videos aquí para Responsive Web Design. Tengo uno largo que son alrededor de 50 videos y tiene que ver con algo llamado Bootstrap, está en Dream weaver y es un siguiente paso después de esto. Tenemos algunas de las mismas características, pero es mucho más detalle. Puedes meterte en esa. Hay un curso de UX, convirtiéndose en un diseñador de UX. Estas cosas de los nombres de dominio, otras cosas que puedes hacer si eres entrenador y te vas a dar clases a este aquí, tengo Recursos para Profesores, tienes un vistazo al costado aquí para ser un enlace para los Recursos Docentes y hay notas de las que puedes ponerte las manos y puedes usar estas caídas de ejercicio para enseñar. ¿ Qué más? Proyectos de carteles. Por lo que podrías haberla seguido pero cambiaste las imágenes a las tuyas, me encantaría verlo. Has escogido una fuente diferente, me encantaría verla. Yo sí, me gusta mucho ver estas cosas. Por lo que los enlaces o capturas de pantalla, cualquier cosa que puedas, se adhieren a los comentarios. Hay muchas maneras diferentes en las diferentes diapositivas para mostrarme lo que has hecho, me encantaría verlos. También dale una reseña, si la has disfrutado, te ha gustado mi estilo de enseñanza o si no lo has hecho. Trabaja un comentario ahí dentro y dale una reseña y así puedo hacerlo mejor. ¿ Qué más? Lo último es que me paguen, y tengo toda una serie de videos sobre eso también. Acerca de cómo ejecutar un breve, cómo asegurarse de que te paguen a tiempo, ¿qué costos debes cobrar? De nuevo, hay un curso completo sobre eso, ve a comprobarlo en mis otros cursos. De acuerdo amigos míos, hemos recorrido un largo camino. Hemos construido nuestro sitio de portafolio, hemos liderado una consultas de medios donde, hemos hecho una navegación responsive cool. Ahora es el momento de que te vayas y construyas tu propio sitio. Escúdalo a la gente buena y te volveré a ver en otra serie de videos. 13. Hoja de trucos en Dreamweaver: Hola gente encantadora. En este tutorial, vamos a ver nuestra hoja de trucos. Esta cosa de aquí es la versión de video, va a haber un PDF, habrá un enlace en la pantalla justo aquí, todo el PDF imprimible descargable, así que míralo, imprime el PDF, y pégalo junto a tu escritorio y hazte más impresionante en Dreamweaver. Entonces, en primer lugar, estamos mirando algo llamado QuickEdit, me encanta QuickEdit. Es nuevo para Dreamweaver 2017, así que si estás usando una versión anterior, no va a funcionar. Ahora, QuickEdit es una forma de editar el CSS realmente rápidamente. En este caso, tengo este botón y está demasiado cerca de esta etiqueta p, me está molestando toda esta serie tutorial. Entonces quiero empujar eso hacia abajo, así que hay una etiqueta p aquí. Entonces vamos a saltar a Dreamweaver. Dreamweaver, aquí está mi cabecera, en realidad mientras que? Entonces encabezado, ahí está mi contenido principal y ahí está la etiqueta p, la etiqueta p ofensiva, y ahí está el botón debajo, así que está el botón Hablemos, ahí está la etiqueta p y tiene una clase llamada heading-body. Voy a replicar, puedo ir a QuickEdit o puedo usar comando ya sea atajo, atajo aún más corto. El código es malo culo, como puedes ver, es como un pequeño agujero de gusano, atraviesa y encuentra mi style.CSS. Son narices en la línea 75, y esta es mi epígrafo-cuerpo-copia, lo encontré. Voy a poner en remo de fondo, y vamos a poner en 20 pixeles. Voy a cerrar ese pequeño agujero de gusano. Apenas revisando el navegador, alguna distancia entre los dos. ¿Por qué es bueno? Es sólo un diferente de entrar en estilos y tratar de averiguar cuál es su estilo. Ahí está, pero si es un CSS largo, ve a través de Facebook. Podría ser demasiado poderoso. Agícalo. El siguiente que vamos a ver es algo llamado Emmet. Si has hecho los tutoriales de videos, hemos hecho un poco. Simplemente recapitulemos, digamos que quiero agregar una etiqueta div, y quiero agregar una clase a esta etiqueta div. Entonces quiero una etiqueta div y quiero agregar una clase llamada columna. O una clase llamada impresionante. Yo quiero que haya cuantos de ellos? Yo quisiera que fueran seis, por favor. Si golpeo, no pongas Return, pulsa Tab. Mira eso. A las clases, seis de ellas con el nombre de clase de impresionante. Digamos que necesitamos algo más, digamos que necesitamos una lista desordenada con un montón de elementos de lista. Entonces vamos ul y vamos li, y diremos que queremos 20 de ellos porque eso llevaría mucho tiempo. Hit Tab, mira esa lista desordenada, con 20 de ellos. Se pone aún mejor si quiero tener decir una clase aplicada a ellos de dans-balas. Entonces ve aquí, toca a Tab. Mírame con Emmet. Hay un montón de otras cosas que Emmet puede hacer. Cargas y cargas y cargas. Ve a comprobarlo, Emmet, es E-M-M-E-T. Ahí hay un sitio web y todas las cosas y puedes pasar por ahí y averiguar qué hace. Pareja de otros rápidos es img, Tab, que te da imagen y la fuente y todo es etiqueta. Otro que conozco y puedo recordar es link, Tab, te da el enlace de la hoja de estilo, todo con la sintaxis correcta, y es rápido. Gracias. Tip Número 3 va a ser multi cursor. Hemos agregado una clase a este grupo de divs que tengo al azar aquí pero digamos que necesito agregar otra clase. Digamos que quiero agregar una clase a todos ellos, puede ser duro, así que puedo poner múltiples cursores. Entonces lo que puedo hacer es mantener presionada la tecla Alt o la tecla Opción en el Mac y puedo arrastrar por todos estos. Mira, todos los cursores. Puedo poner otra clase y esta podría ser mi puedo mover cualquier clase, tengo una clase audaz. Simplemente puedes tener las clases yendo. Ahora, hemos hecho la serie tutorial Emmet. Pero digamos que queremos hacerlo en lugares aleatorios. Eso es genial cuando son todos, porque puedes arrastrar Alt, pero digamos que necesito uno ahí que también necesito editar aquí también. Alt no funciona. Es necesario que Alt arrástrelo. Lo que puedes hacer es empezar aquí, mantener pulsado Comando, quiero meter uno ahí dentro y quiero poner uno ahí, tantas clases en todos estos lugares. ¿Pueden ver mis cursores? Uno ahí, uno ahí, uno ahí, todo parpadeando. Puedo decir otra clase, no sé cómo se llama esta clase pero impresionante. Entonces multi cursores pero aún mejor cuando no están solo en un solo lugar, puedes tenerlos por toda la tienda. Ese es el multicursor impresionante hoja de trucos show time. Este podría ser mi favorito. Este es el Número 4. Esto es algo llamado Aplicar formato de fuente y simplemente limpia tu código. No le hace nada, solo lo alinea y lo apaga, hace que se vea bonita. Yo estaba trabajando con esto, lo descargué de slicknav.CSS. Es impresionante, pero soy muy visual. Entonces necesito todo para alinearse y tabular y puedes ver que hay una clase ahí y mi instinto natural es simplemente moverlo hacia abajo y asegurarme de que esté lejos de eso, no estoy seguro de por qué pero siento que esto tiene que estar ahí abajo y podría tener carreras. Entonces lo que vamos a hacer es, voy a ir por aquí y es uno que se llama Formato de código fuente, click en ese y ir Aplicar formato de fuente. Se lo haces a una selección, se lo puedes hacer a todo el asunto y ver esto transformarse en, mira eso, tan bonito. Hago esto con todas mis cosas, estoy metiendo en este CSS aquí porque no es mío, pero mis cosas terminan pareciendo igual de mal. Bueno, no está mal pero el mío es termina luciendo mucho peor y solo arregla todo, haz que se vea bien. Yo soy igual que estoy visualmente ver todo muy bien. Si estás en versiones tempranas, hay una opción por aquí en 2017. Si vas únete a mí con versiones anteriores, hay bajo Editar por lo que el Código y hay uno dice Aplicar formato de fuente. Es decir Aplicar formato de origen y ese es el Número 4. El número 5 en esta encantadora lista de hojas de trucos es algo llamado Código Plegable. Ver estas flechas aquí, significa que puedo doblar todo mi cuerpo y toda mi cabeza. Por qué es útil es solo ordenar las cosas, su hace particularmente estresante luciendo un poco de HTML y regresa en cosas separadas hacia fuera. Yo quiero doblar el encabezamiento y mi principal, sólo mantiene todo unido. Me parece probablemente el más útil, digamos que tengo un trozo que necesito eliminar en lugar de intentarlo, sobre todo cuando está fuera de página. Odio eso cuando es una etiqueta realmente larga y empieza aquí y termina en algún lugar lejos de la pantalla. Vamos a fingir aquí, está por ahí abajo. Entonces Main y yo queremos intentarlo y seleccionarlo, y quiero intentar averiguar dónde está el final, y estoy tratando de encontrarlo. Entonces lo que puedes hacer es solo, cambiar eso y lo que hago es agarrar todo eso y luego eliminarlo. Esa es una buena forma de agarrar todas esas cosas. Cuando es toggle up no se ha ido, retrocede, codificar plegando a la gente, me encanta. Siguiente en nuestra lista de hojas de trucos es simplemente duplicar. Sólo un atajo agradable y realmente fácil en Dreamweaver. Diga que necesito otro de estos botones, hay uno aquí, pero si necesito otro podría. Selecciona la fila, cópiala, córtala y pégala, consigue las pestañas bien. Encuentro que es el mayor problema, pero todo lo que hace que se vea bonito. Lo que puedo hacer es, deshacer. En lugar de hacer todo ese drama, mira esto, cursor parpadeando Comando D. Si estás en un PC, es Control D, pero en un Mac, es Command D y mira. A menos que haya duplicado, tenemos una etiqueta en la que está, alcanzará y la duplicará. Eso es el número seis. El siguiente en el súper fantástico una hoja de trucos para Dreamweaver funciona bien para cualquier número. Obviamente, vamos a trabajar un poco en CSS para las propiedades. Digamos que el espaciado entre este H1 aquí, mi H1, ahí está mi altura de línea. Si tengo mi cursor parpadeando dentro de alguno de los dígitos y mantengo pulsado Command y Alt, si estás en un PC, es Control y Alt. En un Mac en realidad es Command and Option y solo usa tus cursores arriba y abajo, por lo que tus teclas de flecha. Mira esto, yo subo, y ahí va 80, va abajo, hay un 70. Abajo, abajo, abajo. Se puede ver con la combinación de esta cosa del navegador en tiempo real aquí, que está abajo a la derecha y es un navegador en tiempo real, nuevo en Dreamweaver 2017. Ajusta exactamente el mismo tiempo exacto. Entonces cualquiera de estos campos, cualquier cosa que encuentres, font-size aquí, sube y sube y baja. Esa gente encantadora ha ajustado cualquiera de los números manteniendo presionada la opción Comando o la opción Control, y usa tus teclas de flecha. El siguiente tramposos, asombro en nuestra lista encantadora es el número siete. No lo es, es el número ocho y es una forma de envolver una etiqueta que existe. Entonces di que tienes estas etiquetas que están sentadas aquí, pero no quiero que estén dentro de mi pie de página. No he escrito la etiqueta de pie de página y podría ir a escribir el pie de página aquí arriba y K para el cierre y escribirlo aquí abajo, y eso va a funcionar, pero es un poco largo. Entonces lo que quiero hacer es agarrar a todos estos tipos. Entonces les voy a decir a ustedes y a todos ustedes, y voy a golpear Command T en mi Mac o Control T en un PC y se puede ver ahí, etiqueta de envoltura. ¿ Qué tan bueno es esto? Yo lo voy a envolver. Golpe Return. Tienes que golpear a Return dos veces. No se puede mostrar por qué. se puede ver, ahí está mi etiqueta de envoltura. Así que agarra cualquier cosa, selecciona Comando T y lo va a envolver. Ese es el número ocho. Entonces pasemos al número nueve y está seleccionando la etiqueta de los padres. Entonces digamos que estoy en lo profundo de algunas capas. Esta cosa que estoy usando como ejercicio, bueno no es genial. No es particularmente confuso, pero digamos que es un poco confuso. Hay un montón de niños dentro de estos padres. Entonces lo que puedes hacer es que quiero seleccionar el, no estoy muy seguro de quién es el envolver una etiqueta o la etiqueta de padre. Por lo tanto, en cualquier lugar dentro de aquí, mantenga pulsado Comando o Control en un PC y use sus corchetes. Voy a usar el lado izquierdo, el abierto y se puede ver que agarra la etiqueta del agujero y va otra vez, agarra al padre, ve otra vez, agarra alguna columna, ve otra vez. Se puede ver, encantadora manera de agarrar al padre, al tipo por fuera. Es realmente genial sobre todo cuando este padre abarca más de una página. No se puede ver muy bien cuál es el final, por lo que se puede seleccionar. Entonces eso es Comando y usar corchete abierto y esa es la forma de seleccionar la etiqueta padre. Bonito. El número 10 es una variación en el número nueve, seleccionando las etiquetas de los padres. Vamos a usar este selector de etiquetas en la parte inferior. La gente ignora esta cosa aquí abajo y es impresionante. Entonces si estoy dentro de aquí y es realmente útil al usar selectores compuestos y no estás muy seguro de qué poner. Entonces digamos que quiero, tienes navegación aquí arriba, ponla adentro. Se puede ver esto mi etiqueta A. Esta es mi etiqueta seleccionada en la parte inferior aquí. Esa es mi etiqueta A y está dentro de mi ítem de lista, que está dentro de mi menú, que tiene, lo siento , mi UL, que tiene un ID de menú el cual está dentro del encabezado, que está dentro del cuerpo, solo me da una idea de dónde Yo estoy en en el mundo vino. Entonces digamos que quiero cortar la UL, ver eso, hace clic en todo el UL. Agarra el encabezado. Es una forma de seleccionar y usar a este padre, usando esta etiqueta seleccionada en la parte inferior para saber dónde estás en el mundo. Me encanta. Muy bien, hagamos el siguiente. El último en esta increíble lista de cosas de las hojas de trucos, vamos a ver los fragmentos. Entonces estoy aquí. Yo estoy mirando el panel de fragmentos. Estoy en mi CSS aquí. Entonces vamos a empezar con fragmentos de CSS. Aquí hay montones. Vamos a empezar con los chicos grandes. Entonces digamos que necesito un pie de página y necesito que se fije al fondo para que no se mueva, para que siempre esté ahí en la parte inferior. Podría ir a averiguarlo o ver esto, arreglar pie de página, doble clic. Mira eso. Es toda la codificación para fijar el pie de página al fondo. Bonito. Otra podría ser, estás iniciando un nuevo proyecto y necesitas poner algo de cero en código y solo para limpiar todo. Es realmente útil de hacer. Simppets CSS, aquí hay dos. Hay restablecimiento de estilo HTML, mira esto. Esta cosa lo hago. Eso es un bonito, impresionante restablecimiento de estilo. Todo va a verse igual en diferentes navegadores. Días felices. Yo voy a mirar esa. Aquí hay otro llamado el de Eric Meyer. ¿ Cuál me gusta más? Creo que me gusta la de Eric, es bonita y sencilla. Simplemente despeja todo las caricias ya que hay días felices consigue que un construir un sitio web, fragmentos se pone aún mejor. Mira esto. Si entro en fragmentos HTML, mira aquí. Encontremos algo de HTML. Necesito añadir ahora una barra de Nav. Voy a entrar en algo, Crear una barra de Nav. Ahí está. Tenemos un bar de Nav, titulo la clase a ella, set the ligas guy está metido en ello. Los ítems de la lista están todos enlazados listos para ir. Ahí clases. Puedo duplicarlos. Slippets, impresionante. A continuación, poco es hagamos metaetiquetas. Necesito agregarlas. ¿Puedes recordar lo que son todos? Me meto en problemas cuando no los agrego. Oiga que voy, y los encuentro por aquí y es meta tag general. Ese o contra ese, no todos los versículos meta tags para SEO. Necesito probablemente un par de esos, pero sí el nombre ahí dentro, la sintaxis correcta, no tengo que ir y tratar de recordar lo que son, fragmentos. El último, y éste viene con un doble banger. Es el último, el final de las hojas de trucos. Es este encantador de aquí. Imagínate, así que tengo una etiqueta P, dice P y quiero ponerle algo de Lorem Ipsum en ella, iré a ese Lipsum.com y ahí está la taza de café, y tú vas a copiarla, pero tiene chatarra pegada a ella. Tienes que limpiarlo. Pero mira esto. Agrega Lorem Ipsum, oh Dios mío. Lorem Ipsum, construido ahí y dije que este era el double bang para la final. Entonces Lorem Ipsum es impresionante, pero imagínate que haces eso bastante. Imagina si hubiera un atajo que puedes hacer. Se puede. Se puede ver aquí este dice Lipsum. Voy a deshacerme de éste y sólo ponerlo en Lor y se puede ver debajo gatillo aquí, puedo maquillar lo que quiera. mailto otro bueno. Entonces solo Lor. Ahora, estoy aquí, tengo mi etiqueta P y quiero poner en L-O-R y hit tab. Yo estoy haciendo las mías en ello cosas. Qué bueno es eso. mailto es otro. Tab hacia fuera. ¿Quién puede recordar cómo va mailto? Lo consigo la mayor parte del tiempo y lo consigo escribir. Pero todo el tiempo tengo que ir a revisar, es colon, ¿cómo funciona un? Slippets, están ahí dentro, funcionan y que mi amigo es el final de tu encantadora hoja de trucos. Ahora recuerda, si solo estás viendo este curso, este es el final de un curso más largo. Fueron 12 videos de hacer tus propios sitios web responsivos. Ve a revisar eso. De lo contrario, hay un PDF que puedes descargar. El enlace volverá a estar en la pantalla aquí otra vez, e ir cuarto. Sé rápido, sé impresionante en Dreamweaver. Muchas gracias.