El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Definición de propiedades de página con Dreamweaver

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Las primeras etiquetas que añadiremos en nuestra página van a ser las etiquetas que configuran la visualización de esta, dentro de la etiqueta head. Aprenderemos a añadir las más importantes y a modificar sus atributos.

Transcripción

Hay varias configuraciones que van a influir en como se va a visualizar mi página web dentro del navegador, por ejemplo, está el título que ya lo hemos definido en este HTML en concreto. Pero, hay más configuraciones, por ejemplo, el tipo de caractéres que se va a utilizar para que yo pueda leer caracteres occidentales normales, o por ejemplo, para que mi página aparezca con caractéres cirílicos, por poner otro ejemplo. Y también hay otras etiquetas que van a servir, por ejemplo, para dar información los búscadores para que entiendan mejor que clase de contenido tengo en una página en concreto. Para poder trabajar con ellos es preferible ponerse en el modo de código. No quiere decir que yo vaya a programar con ellos, sino que me va a servir para explicar un poco mejor donde se guardan. La estructura básica de una página HTML es exactamente la que tenemos delante. Por un lado se define el tipo de documentos HTML, eso sirve tambien para HTML5. Por otro lado voy a tener una etiqueta HTML, que es la que va a englobar todo, o sea, que cualquier página HTML tiene que venir dentro de esa etiqueta HTML, esto es tanto como decir, aquí, esto, empieza la página y aquí termina. Todo lo que hay metido dentro son etiquetas, pero vamos a tener una etiqueta "Head" y una etiqueta "Body". El Head, la cabeza, sirve para guardar información sobre la página, y de hecho, por defecto, ya me ha añadido dos etiquetas distintas, una etiqueta Meta y una etiqueta Title, y luego en Body, el cuerpo, es donde se van a meter los contenidos que luego se visualizaran. En este vídeo vamos a hablar de las etiquetas que aparecen dentro del Head, dentro del cabecero. Todo lo que yo meta aquí, realmente luego no va a aparecer en la página, o sea, yo aquí, en teoría, puedo escribir lo que quiera, que no aparecerá dentro de la visualización de la página, no como en la parte de Body, sí que va a aparecer aquí dentro. Todo el apartado Head sirve para configurar, y dentro del panel de Insertar, tengo un sub-apartado, en donde tengo las etiquetas que más se utilizan para ese cabecero. Tengo dos de ellas, una de ellas es el título, Title, esta es la etiqueta que va a definir el texto que va a aparecer en la pestaña del navegador. Para poder comprobar que esto efectivamente ocurre, bueno, puedo guardar este documento, puedo pedir que me haga una previsualización sobre Chrome y aquí vemos que efectivamente, este título que he metido, es el que aparece en esa pestaña. Y tengo otra etiqueta, Meta. Las etiquetas Meta sirven para definir las características de visualización de mi página. Por ejemplo, el "Charset", este charset sirve para explicar que tipo de caractéres se van a ver dentro de una página. Yo puedo añadir más metas, simplemente en donde tenga el punto de inserción, puedo hacer clic en esa etiqueta Meta, aquí me permite elegir qué tipo de Meta va a ser, darle nombre, puedo ponerle diferentes atributos, por ejemplo, al igual que antes, pondría de nuevo charset, y aquí podría añadir otro contenido distinto, qué podría ser ISO y luego el número de ISO, el que fuese. Aceptaría y luego veremos como aparece ese código. Estas no son etiquetas visuales y por eso no aparecen dentro del código, aunque algunas de las etiquetas que son transparentes, que son invisibles, se puede configurar que aparezcan dentro de Edición Preferencias y dentro de ellas, voy a buscar Elementos invisibles y aparecen las dintintas etiquetas que no tienen visualización real, pero que yo puedo permitir que se vean. Por ejemplo, si yo añado Script, pulsaría sobre ellas, y aparecerá además, con ese pequeño símbolo. Para trabajar con estos elementos invisibles, suele ser buena idea utilizar las ayudas de códigos. Si yo pulso espacio, la ayuda contextual, vemos que me está mostrando las distintas opciones que puedo añadir, charset, qué es el que tiene encima, pero también puede ser el contenido, el HTTPX o el name. Si selecciono por ejemplo, Content, después dentro de ese Content yo puedo meter diferentes tipos de contenidos, pues por ejemplo, yo puedo poner <meta content="text/html" sirve para definir el contenido que hay dentro de esta página. Ese es uno de los tipos de etiquetas, pero tengo más. "Keywords", esto sirve para añadir palabras clave que luego van a ayudar a los búscadores a entender qué estoy mostrando en mi página, por ejemplo, "Dreamweaver", separando por comas, puedo ir añadiendo diferentes palabras. "Runners", y por ejemplo, "curso". No es bueno añadir muchas, pero tampoco es bueno no poner ninguna. Tienen menos importancia que antes a la hora de conseguir que te encuentren los búscadores, pero de todas formas no deja de ser bueno añadirlas. Como podemos ver, en realidad es una etiqueta Meta. Dentro de la cual defino, como tributo Name, keywords y luego como Content, meto el resto del contenido. La etiqueta Descripción es muy parecida a la anterior. También va a ser una etiqueta Meta donde voy a meter la descripción de esta página, también pensando en búscadores. Por ejemplo aquí, podría poner... "Página de inicio de la web DW Runners". Podemos ver que la estructura es exactamente igual que la anterior. Por otro lado, Puerto de visualización sirve para establecer como tienen que visualizar los distintos navegadores, mi página. Así que de Name es Viewport, y de Content, aquí se especifican las características de visualización. Generalmente, las que vienen por defecto, que es de ancho, width, que tenga el mismo ancho que el ancho del dispositivo, digáis Width, con esto lo que consigo es que se adapte esta página al ancho del dispositivo en vez de desbordar todo por la derecha, todo el espacio de página que no quepa. Y luego, la escala inicial sirve para que no haga zoom, para que aparezca sin ningún zoom, porque sino, algunos teléfonos móviles lo que haría sería encoger la página para que cupiese entera. Esta es la configuración inicial ideal pensada no solo para páginas HTML normales, sino también para cuando estemos creando contenidos que se tengan que ver dentro de dispositivos móviles. Simplemente con estos elementos, ya podemos empezar a trabajar, además de ellos también podemos añadir estilos CSS y scripts de JavaScript a mis contenidos.

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.