Dreamweaver CC 2017 esencial

Añadir textos en Dreamweaver CC 2017 con HTML

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
Lo primero que haremos ahora es añadir textos a la primera página: veremos cómo hacerlo y cómo crear texto de prueba de manera rápida para poder maquetar más fácilmente con Dreamweaver CC 2017 desde la vista de código.

Transcripción

Voy a empezar a añadir texto a la página. El texto es una parte fundamental de la información que se mete en la mayor parte de los sitios web. Y este texto va a ser añadido de diferentes maneras. Voy a tener diferentes formas de añadir el texto. Y esas etiquetas que se utilizaron para meterlo van a servir para darles diferentes niveles de importancia. En principio puedo en la vista de código escribir cualquier texto sin mayor problema. Si hago esto, no estoy dando ninguna información sobre la importancia de ese texto. En un momento dado no puede tener importancia pero va a haber muchos casos en los que en realidad debería de saberse, por ejemplo en este, que este texto va a ser un encabezamiento. Además también voy a poder trabajar directamente desde la vista 'En vivo'. Voy a dejarlo como estaba, me voy a ir a la vista 'En vivo' o por supuesto también a la vista de diseño y vamos a ver cómo podemos añadir texto visualmente. En realidad, tiene una cierta complejidad porque yo realmente, dentro de esta estructura tengo un artículo con una imagen y quiero que el texto se me meta dentro de un segundo 'div' que hay aquí que tiene la clase 'descripción'. ¿Pero qué ocurre? Que yo cuando intento hacer doble clic, intento editar, siempre se me va ir al artículo porque este 'div' en concreto no tiene ningún elemento no tiene entidad, espacio que se pueda seleccionar para poder añadir algo, entonces aquí dentro en realidad no es tan difícil; lo único que necesito es añadir una etiqueta y para añadir una etiqueta, está el panel de insertar. En el apartado de HTML tengo dos botones que van a ser los que utilizaré habitualmente: por un lado el botón de párrafo, el de la etiqueta 'p' y por otro lado 'Heading'. Y aquí tengo diferentes tipos de 'headings'. La etiqueta 'p' sirve para añadir un párrafo dentro de un bloque o sea, creo un bloque que se entiende que dentro va a haber texto. Las etiquetas H1, H2, H3, etc., son encabezamientos y sirven para definir el nivel de importancia de un encabezamiento. H1 sería para el nombre principal de la página, por ejemplo. H2 sería, para por ejemplo, encabezamientos de secciones. H3 sería, por ejemplo, para determinados párrafos para un rótulo encima de estos, etc. Es importante utilizarlos porque estamos aportando información semántica a la estructura del HTML y eso va a facilitar a los buscadores a entender qué elementos son los que más importancia tienen en nuestra página. Para añadir un texto cualquiera por ejemplo, en este caso yo quiero que tengan un encabezamiento H2, lo que hago es seleccionar la etiqueta donde quiero que vaya y pulsar en ese encabezamiento H2. Si yo hago clic sin más sobre él, me selecciona el último que había seleccionado. Si necesito cambiarlo, tengo primero que pulsar y mantener pulsado para desplegarlo y luego ya seleccionar el que sea. Yo quiero que me meta esta etiqueta H2 dentro del 'div Descripción'. Pues entonces tendré que seleccionar el último de ellos, 'Anidar'. y una vez que tengo ya este texto aquí puesto por defecto puedo pegar el texto que tenía preparado para ese encabezamiento igual que he trabajado con ese H2 puedo seguir trabajando. Aquí tengo el H2. No es problema, pulso 'Párrafo' le pido que en vez de ponerlo anidado lo ponga después de la etiqueta que tengo seleccionada y esto me va a añadir una etiqueta 'p' justo debajo. Y dentro de esa etiqueta 'p' puedo añadir el texto. Aquí podría copiar y pegar. Pero me va a servir para enseñar otra herramienta más que es bastante interesante. Me voy a volver a la vista 'Código'. Tengo todo este texto, pero este texto es poco, necesito más. Generalmente cuando se está maquetando una página web, no se tienen los textos finales que van a aparecer. Más aun si estamos trabajando por ejemplo con páginas PHP que van a tener textos que se van a cambiar dinámicamente. Para poder entonces maquetar los contenidos sin tener un texto real se suele utilizar el latín, se suelen poner textos en latín que sirven para generar párrafos que me sirvan para añadir los estilos CSS necesarios para poder organizar los elementos. Y dentro de la vista 'Código' podemos, escribiendo simplemente la palabra 'lorem' y pulsando la tecla de tabulación, generar esos bloques de código. Aquí vemos cómo he añadido uno. Otra cosa que podemos hacer también, es añadir retornos de carro. Voy a volver a la vista 'En vivo' y voy a explicar a qué me refiero. Si yo estoy dentro de este texto para poder editarlo necesitaré hacer doble clic. Si yo ahora pulso 'Intro' y vuelvo otra vez a escribir, por cierto que aquí no sirve de nada, pulsar sobre la tecla 'lorem', en realidad parece que estoy trabajando sobre una etiqueta pero si me voy a la vista de código lo que ha ocurrido es que no estoy trabajando sobre esa primera etiqueta; me ha generado una segunda etiqueta 'p' y es que cada vez que hago 'Intro' me añadirá una nueva etiqueta 'p'. Voy a añadir aquí este segundo párrafo. Estas etiquetas 'p' lo que realizan es la tarea de englobar un texto y mantenerlo además separado con un poco de margen, del texto anterior o del texto siguiente o del elemento anterior o del elemento siguiente. Si yo quiero en realidad un retorno de carro que genere un punto y seguido, o sea que el texto salga en la línea siguiente, en vez de hacerlo de esta manera lo que puedo hacer es utilizar 'mayúsculas Intro' y eso me va a añadir una etiqueta 'br' que es precisamente la que sirve para añadir ese retorno de carro en otra línea. Tendré que hacerlo dentro de esta etiqueta 'p'. Entonces aquí, de nuevo, he anidado mal esas etiquetas; así ya está bien y entonces aquí ahora puedo volver de nuevo a escribir otro 'lorem' y puedo añadir todo ese otro texto. Aquí vemos que está todo él, englobado dentro de la etiqueta 'p' pero también vemos que están separados. Pues esta es la forma de añadir textos, seleccionando dónde queremos que vaya, pulsando en las etiquetas correspondientes y luego ya metiendo su texto copiando y pegando o yéndome a la vista 'Código' y generando también ese código automáticamente.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.