En el navegador, la página aún estará vacía, pero la estructura del documento ya se puede entender, está lista.

Instalar formato básico

Ahora vamos a llegar al diseño CSS para establecer el documento de decoración inicial.

Abierto style.css. Y agregue las filas de código allí, que se reunirán a continuación.

Eliminamos sangrías y campos en la página predeterminada:

* (Margen: 0px; relleno: 0px;)

Establecemos los colores de los enlaces dependiendo del comportamiento del usuario (el cursor duele, no golpeó, visitó) y eliminó el énfasis en los enlaces sobre los cuales el puntero del mouse es:

A: Enlace (Color: # D72020;) A: Hover (Texto-Decoración: Ninguno; Color: # FF0000;) A: Visitado (Color: # D72020;)

Configure el diseño principal de la página: Prescribemos un color de fondo y un sustrato de imagen (especifico el relleno horizontal de la imagen), configuramos el color, el estilo y el tamaño de la fuente:

Cuerpo (fondo: # FFD723 URL (Imágenes / Back_all.jpg) Repetir-X; Fuente: 13px Tahoma, Verdana, Arial, Helvetica, Sans-Serif; Color: # 333333;)

Definición del bloque de contenido:

#Content (margen: 0 Auto; Fondo: #ffffff; Ancho: 786px; Texto-alineado: a la izquierda;)

Ahora puedes actualizar la página. Está lleno de un patrón-sustrato. Mientras que el único cambio visible para el cual la propiedad es responsable. antecedentes. clase cuerpo..

Establecer un menú horizontal

Hay un comienzo, y ahora puede comenzar a la capa ya directamente los bloques principales.

Vamos a empezar, por supuesto, de las gorras. Lo que, a su vez, consiste en un menú horizontal y un logotipo.

Primero, establece el diseño general de ambos elementos de las tapas: alineación de texto en el borde izquierdo, fondo blanco y altura de 306px:

#HEADER (Fondo: #ffffffff; altura: 306px; texto-alineado: a la izquierda;)

Así que tenemos una especie de gorra espacial: un rectángulo blanco, que se ubicará sus elementos.

Sería lógico ahora hacer un menú horizontal en este momento. Así que lo haremos, pero solo antes de insertarlo a HTML, necesita preparar las reglas de CSS, de lo contrario, se verá en el navegador, será terrible.

Presentamos los primeros ajustes: coloque el borde izquierdo en 2 píxeles gruesos, anchos y altura de nuestro menú, así como repetidos en el eje x dibujo de fondo:

#Menu (borde izquierdo: 2px sólido #fffffff; ancho: 779px; altura: 80px; Fondo: URL (imágenes / encabezado_top.gif) Repetir-X;)

La página en el navegador se transformará de inmediato y se verá así.

Ahora puedes agregar el menú en el archivo. index.html:

Al actualizar la página, puedes ver que realmente apareció.

Solo aquí el tipo de enlace deja mucho que desear. Estableceremos sus propias reglas (alineación, ancho, color, gordura, etc.), y se refiruyeremos a los enlaces con el cambio del color y volveremos a la actualización eliminada durante la plantilla:

#Menu a (flotación: a la izquierda; ancho: 99px; altura: 46px; Pantalla: Bloque; Texto-Alineado: Centro; Decoración de texto: Ninguno; Color: #FFFFFF; FONT-PESO: BOLD; Tamaño de fuentes: 14px; Acolchado -Top: 35px;) #menu a: hover (Color: # D72020; Texto-decoración: subrayado;)

Ahora, el formato del menú se puede comparar con la plantilla PSD.

Observe cómo la ejecución del artículo cambia si el puntero es para traerlo (las reglas son responsables de #Menu a: hover).

Personalizar logo

Ya tenemos un logotipo y mentiras en la carpeta, queda por agregarlo a la página y formatear las reglas. Ambos pueden hacer las herramientas CSS de la que no podemos hacer.

#logo (fondo: #fffffff url (imágenes / big_pic.jpg) sin repetición; Ancho: 738px; Altura: 146px; Texto-alineado: a la izquierda; Padding-Top: 80px; Padding-Izquierda: 40px; borde-izquierda: 4px Sólido #ffffff;)

El logotipo se inserta suavemente en tamaño.

Lo único que le falta es el texto. Inserte falta en el bloque logo Archivo index.htmlPara que suceda:

Apareció el texto, pero también debe ser emitido.

Sobre la base del hecho de que el logotipo es casi siempre una referencia, estableceremos el diseño de las clases apropiadas.

#logo A (Texto-decoración: Ninguno; Transformación de texto: minúscula; LINCASA; ESTILO DE FONTS: Cursivo; Tamaño de fuente: 36px; Color: #FFFFFFF;) #LOGO H2 A (Tamaño de fuentes: 24px;)

No necesitas explicar nada aquí, con todas las propiedades que conoces más de las lecciones de CSS. Sin embargo, la apariencia del texto ha cambiado, y en general, el sombrero ahora se ve incluso mejor que el diseño PSD.

Refinamos la parte principal de la página.

A continuación, configure el bloque más grande en el que se colocará todo el contenido único. Tomará 500px y se colocará en el lado derecho del sitio. Estableceremos las reglas para posicionar, diseñar titulares, párrafos y enlaces (ya hemos hablado de todas las propiedades en los artículos CSS).

#Right (flotación: derecha; ancho: 500px; relleno derecho: 10px;) #right H4 (margen: 0; relleno: 0px; Tamaño de fuente: 12px; Color: # D72020;) #Right A (Color: # D72020 ; decoración de texto: Ninguno;) #Right P (margen: 0; relleno: 0; relleno inferior: 10px;) #right H2 (margen: 0; relleno: 0; relleno superior: 10px; Color: # D72020; Color: # D72020; Color: # D72020; )

Dado que grabamos solo el ancho del bloque, no habrá cambios visibles hasta que lo llenemos con contenido: la altura de la página variará dependiendo del contenido.

Llenar el contenedor derecha. Pintar imágenes en una mesa sencilla.

Galería

Cocina

El contenido recibió el marcado, pero claramente carece de un fondo blanco, no es suficiente que no aparezca pronto.

Creando el panel izquierdo

Durante el diseño, pero después de dibujar un diseño, resultó que el menú lateral aún tendría subpárrafos, y deberían aparecer cuando se mueve en el punto principal y desaparezca cuando no hay punteros en él.

Situaciones en las que tiene que modificar el diseño "On the Go", hay bastante a menudo. La distancia entre los menús y el contenido principal nos permite insertar los subpárrafos, pero el enfoque es interesante con la desaparición y la apariencia del submenú.

Ingrese el siguiente código al archivo CSS.

#left (relleno: 10px; ancho: 237px; relleno-derecha: 1em;) #left H3 (ancho: 225px; altura: 25px; talla de fuente: 14px; font-peso: negrita; relleno izquierdo: 15px; Top: 15px; Transformación de texto: mayúsculas; Color: #fffffff; Fondo: URL (imágenes / title.gif) sin repetición) #left ul (margen: 0; relleno: 10px; estilo de lista: ninguno; Ancho: 100px ; Tamaño de fuente: 18px;) #left li ul (Posición: Absolute; Izquierda: 90px; Top: 0; Pantalla: Ninguno;) #Left ul LI (Posición: Relativo; Margen inferior: 20px;) #left ul li A (Pantalla: Bloque; Decoración de texto: Ninguno; Color: #ffffcc; Fondo: # FF9900; Acolchado: 5px; Frontera: 1px Oro Sólido; Fondo de borde: 0;) #left Li: Hover UL (Pantalla: Bloqueo; ) #left li li (margen de fondo: 0px; ancho: 150px;) #left p (relleno: 10px; Fondo de borde: 1px sólido # D72020; Frontera-izquierda: 1px sólido # D72020; Frontera derecha: 1px sólido # D72020 ;)

Presta atención a las reglas de las clases. ul y li - El secreto de la desaparición del menú está ahí, expandiéndolo tú mismo.

En el recipiente izquierdo del documento HTML, agregue el bloque de información sin el menú.

Información

Te ofrecemos descuentos festivos. Más...

Menú

El fondo blanco se extendió aún más abajo en la página.

Ahora es el momento de insertar el código del menú del panel izquierdo en el archivo HTML. Esto, a diferencia de la navegación superior, es implementado por las listas, que podrían notarse de las reglas de CSS.

• Galería
  • Cocina
  • Cama.
  • Paredes
  • Vestíbulo
  • Armarios
  • Tablas de computadora
• Tratado
• Precio
  • Cocina
  • Cama.
  • Paredes
  • Vestíbulo
  • Armarios
  • Tablas de computadora
• Muestras
  • Vidrio
  • Cartón madera
  • Mueble
  • Etc.
• Contactos
• Importante

Hola, querido sitio web de lectores de blogs. Nuestra tarea de hoy es formar un llamado diseño del sitio que no usa (diseño de ayer), pero por elementos div. Esos. Tendremos que construir la parte superior (CAP), la parte inferior (pie de página) y tres columnas, por ejemplo.

Por cierto, ya hemos resuelto tal tarea cuando escribí.

Parecería que no es necesario repetir, pero no voy a hacer esto. Hoy se describirá en principio a otro. método de diseño del sitio, así como en paralelo, considere el nombramiento de las directivas. @import y @media (De adelante) en la ya estudiada por nosotros (a nivel base, por supuesto) el idioma del marcado de estilista CSS.

Diseño del sitio en bloques: ¿lo necesita?

Además, en la época actual, ya tenemos tiempo de desmontar el idioma HTML en los huesos, confiando en la fuente original frente al consorcio. Sin embargo, creo que no todos estuvieron imbuidos con mis exhortaciones e inmediatamente se apresuraron a estudiar también.

Y incluso te entendí. Después de todo, en sí mismo, el conocimiento de estas cosas no le traerá ninguna fama ni riqueza, sino que solo tome un montón de tiempo, lo que podría gastarse en una ocupación mucho más placentera. Igualmente, cómo la capacidad de usar Cutlery no le garantiza la presencia de comida deliciosa en su escritorio. Sin embargo, en el momento adecuado puede ser útil y jugar, no es un papel poco importante.

Yo mismo decido hace diez años por cualquier cosa para estudiar HTML, pero se detuvo al principio, en mi opinión, y se enfrió con bastante rapidez a esta idea, lo que prefiere intimidar sobre el cerebro con un juego espectacular en el siguiente tirador.

Sí, sí, una vez que los juegos fueron mi hobby, y ahora este hobby se ha convertido en un sitio web, y tengo la oportunidad de implementar en la práctica algunos de los descritos una vez descritos una vez. Y por analogía con los juegos, el número de dinero ganado ganado por mí todavía se percibe como algunas gafas virtuales que muestran lo correcto.

Ya lo veo ya sin experiencia, aunque mi cónyuge ha cambiado de manera fundamentalmente su actitud hacia mi siguiente afición (es una pena que sea la que verificará este artículo para errores gramaticales, de lo contrario, describiría todos los cambios con más detalle), Para este blog, al contrario de todas sus expectativas iniciales y las dudas le da un escape real en forma de facturas de susurro (lea sobre cómo materializar legalmente Cyphiricks en la pantalla en Cyphirick en la cuenta calculada de un empresario individual.

En general, este retiro lírico no se realiza por casualidad, ya que quiero decir que HTML y CSS son ladrillos pequeños en la construcción de su negocio de Internet, pero la posesión y la comprensión de los principios de diseño del sitio darán un cierto número de gafas antes de aquellos que han sido descuidados.

El éxito general del proyecto web depende precisamente de tales trifles, los procedimientos con los que son fáciles (ya menudo es muy agradable) se pueden activar en la esquina distante. Simplemente no puedo recordar una cosa, que hice posible pasar por encima de esa barrera invisible, tejida de la pereza y la letargia. Es posible que las tarjetas simplemente estén así. Por lo tanto, te deseo también para superar esta barrera, pero no puedo decir cómo hacerlo.

Está bien, continuaremos con los que no cambiaron. ¿Cómo construir un diseño de sitio usando DIV Elementos y reglas de estilo? Veamos. Naturalmente, vamos a imitar el trabajo de este diseño, estaremos en una computadora local, solo dormitaremos todos los archivos que necesita en una de sus carpetas. Sin hosting y. Para entender los principios, será superfluo.

Entonces, proceder al diseño. Para empezar, creamos y llamamos a la carpeta para almacenar los archivos de nuestro futuro proyecto web, y luego creamos un archivo de texto con una extensión. HTML y el índice de nombre. También creamos otro que llame a CSS (nuestros archivos de estilos externos vivirán en esta carpeta.

Puede agregar otra carpeta donde lanzaremos las imágenes usadas cuando establezca el sitio, lo que será parte de él (imágenes de fondo). Le aconsejo que optimices o, en otras palabras, el máximo.

Bueno, ahora copie el "Fish" en su índice.html. Para trabajar con el código, es bastante conveniente usar, aunque, cuando tiene una habilidad de trabajo, una solución más funcional puede resultar para ser un drammer:

Al principio, como siempre, debe ir, cuyo propósito se describe de manera detallada en el artículo a continuación. Dentro de la etiqueta meta, indicamos su correcta interpretación del navegador, al abrir nuestro proyecto en ella. Cada documento debe tener un relleno (título de página), así que lo agregamos a "Fish".

Está claro que el sitio es tal por definición debido a la pertenencia de todos los componentes de sus documentos a un nombre de dominio, sin embargo, para los visitantes, el argumento principal servirá como un diseño similar de sus páginas web, y que necesitaremos tener en cuenta cuando el diseño.

Por lo tanto, debemos tener un archivo externo con estilos que se utilizarán absolutamente a todas las páginas. Pero además, también puede haber archivos CSS adicionales que permitan, por ejemplo, diferentes secciones del proyecto web se ven un poco diferentes.

En consecuencia, el desbordamiento de la columna izquierda o derecha no causará un aumento proporcional en los bloques con ID VNUTR y VNEH (elementos flotantes a la altura de sus padres o, en otras palabras, los contenedores no afectan), lo que significa que el contenido vendrá. Más allá de sus límites, irá a un pie de página y irá más allá de los límites. Cama.

Pero tenemos un elemento de cuarto bloque con ID PODPORKA, que no contiene ningún contenido (y, por lo tanto, no se verá en la página web) y que está destinado a la eliminación de este incidente. En el Código OBDHIY.CSS, presidimos una regla simple para este selector. Como resultado, el bloqueo con IDPORKA IDPORKA adquirirá una propiedad útil para nosotros: tendrá en cuenta cualquier elemento que flote delante (se refiere a lo anterior en el código).

Entonces Con el aumento del contenido en la columna derecha o izquierda habrá un desplazamiento proporcional del elemento con ID PODPORKA, y que Esta etiqueta ya no está flotando, luego los bloques con ID VNUTR y VNESH lo tomarán en cuenta y aumentarán proporcionalmente su tamaño verticalmente:

Ahora todo parece funcionar correctamente. Sin embargo, aún no está terminado nuestro diseño del sitio. Supongamos que lo hemos hecho en index.html de esta manera el diseño de la página principal, pero para alguna otra partición el tipo de diseño debe ser diferente. (Por ejemplo, no debe haber tres, sino solo dos columnas). ¿Cómo salir de esta situación?

Está claro que para este propósito tiene que usar diferente de index.html. Para esto, los contenidos de index.html se pueden copiar a un nuevo archivo, por ejemplo, Razdel.html, porque Editar el código existente será más fácil que escribirlo nuevamente.

Bueno, un archivo con mesas de estilos de cascada tenemos que usar, por ejemplo, Razdel.CSS. Eso es exactamente en ellos hagamos cambios, y al mismo tiempo observamos en detalle cómo exactamente utilizar @Import. Directiva en esos casos.

Vamos a empezar con Razdel.HTML:

...

Cambiamos el título del título del título y cambiamos el nombre de los estilos de enchufe en Razdel.CSS. Al mismo tiempo, naturalmente, será necesario en la carpeta CSS, este archivo de marcado muy estilista para crear. Nos atrevemos a recordarle que para index.html, estamos enchufados con el estilo de Osnovnoy.css, en el que se le recetó una única directiva @import para cargar las reglas del archivo OBDHIY.CSS:

@Import URL (OBDHIY.CSS);

No seremos originales en nuestra versión inteligente y al principio de un nuevo archivo de estilo nuevo (incluso vacío) en propyash absolutamente la misma directiva. Por lo tanto, sin embargo, obtendremos una disposición de tres cadenas, agregando solo algunas de las reglas un poco más tarde, lo convertiremos fácilmente en un calaballo. Ni siquiera así. Crearemos otro archivo en la carpeta CSS titulada Dvekolonki.css y el siguiente contenido:

#Right #center (margen-derecha: 0;) #vnesh (fondo-imagen: ninguno;)

¿Qué hicimos? Nos prohibieron mostrar la columna derecha en las páginas web usando. También eliminamos el sangrado externo a la derecha para la columna central, ya que ya no es necesario. Bueno, al final, nos prohibimos mostrar la imagen de fondo, todo en la misma columna derecha. En general, somos toda la columna correcta en nuestro diseño de la sección están completamente aniquilados.

Bueno, ahora solo se deja completar este mismo Dvekolonki.CSS para completar el diseño de un diseño de dos Pacule para conectarse al archivo Razdel.CSS, cuyo contenido final ahora se verá así:

@Import URL (OBDHIY.CSS); @Import URL (Dvekolonki.css);

Todas las reglas de pie en el código a continuación (de Dvekolonki.css) tendrán una prioridad más alta, lo que significa que los observarán en la página web. Como resultado, al abrir Razdel.html, ya puede observar una opción de diseño de dos columnas:

En realidad, una tarea adicional era considerar las opciones. utilice la directiva @Import en el diseño moderno de los sitios.¿Qué, creo que nos hicimos fronteras?

Ahora queda por demostrar el trabajo de la Directiva @Media, que me rendí al comienzo del artículo. Tiene una actitud muy indirecta hacia el diseño, pero aún no debe decirlo probablemente sería lo suficientemente corto.

Diseño de diseño para impresión utilizando la Directiva @Media

La Directiva @Media no puede ser útil para usted, y a sus lectores que desean imprimir una página web sin las delicias gráficas y la información innecesaria. Los usuarios solo necesitarán contenido que se encuentra en la columna central. Sombrero, pie de página, altavoces izquierdo y derecho que no necesita, solo el texto del artículo.

Cuando previsualiza la impresión en cualquiera de los navegadores modernos, puede, por supuesto, apagar la impresión de fondo, es decir. Decoración del color, pero el navegador no siempre podrá separar el grano de forma independiente (contenido) desde el mimador (navegación), por lo que tendremos que ayudarlo en esto para no esperar.

Además, al imprimir, se perderá lo principal, lo que hace que Internet sea tan popular, la capacidad de transición a los hipervínculos a otras páginas. En papel todo tu los hipervínculos serán absolutamente no informativos.Si esto no se necesita de antemano. Agreguemos un hipervínculo a nuestro diseño de tres cadenas y veamos cómo no se verá cuando se intenta imprimir una página web.

Por lo tanto, el usuario que imprimió tal Webline nunca lo sabrá, y qué blog sigue siendo el mejor. Entonces vamos matices que ponen para imprimirY esto será ayudado por la directiva ya mencionada.

Hay dos posibilidades para especificar utilizando medios, para qué dispositivo necesita para aplicar estos estilos. Puede especificar el atributo de medios en la etiqueta de enlace, con qué archivos de estilo externos están conectados. Pero en este caso, el navegador hará una solicitud en exceso al servidor, que no es bueno. Sin embargo, este método tiene derecho a la vida y parece que esta desgracia será así:

En el atributo de los medios Puedes usar otros valores:

1. todo: se usa de forma predeterminada y significa que este archivo de estilo deberá usarse para absolutamente cualquier dispositivo de salida.
2. braille - Dispositivos de lectura con dedos (para ciegos o con discapacidad visual)
3. handheld - PDA, Smartphones y otras triples
4. imprimir - Impresoras
5. pantalla de pantalla: Monitorea las pantallas en las que navegarán a su sitio.
6. discurso - Navegadores de habla
7. proyección - proyectores
8. tTY - TELETIPES Y OTROS RHYLAD, en los que no puede usar la dimensión en los píxeles
9. tV - buena buena televisión

En el ejemplo anterior, nosotros, utilizando el atributo de medios, han conectado un archivo de estilo separado al documento web para que se muestre en el monitor y separe para imprimir (impress.csss). Somos como esta y necesitas implementar un diseño en esta lección, pero será mejor hacerlo de una manera un poco diferente, utilizando la Directiva @Media registrada en el archivo de estilo.

Si llamó la atención, con esta forma de colocación, que hemos elegido (usando @Import), tenemos un archivo de estilo común que siempre está conectado a través de esta directiva - OBDHIY.CSS. Eso es exactamente en él comenzaremos a conjurar.

@Media tiene su propia sintaxis:

Pantalla @media, TV (conjunto de selectores y reglas que se ejecutarán solo si la página web se muestra en los dispositivos especificados ligeramente por encima de la coma del dispositivo)

En nuestro archivo obdhiy.css, no entraremos en todas las reglas ya disponibles dentro de la directiva de la pantalla @media, es suficiente, al final, simplemente agregue las reglas de CSS necesarias para emitir el documento de impresión usando @Media impresión.:

@Media impresión (* (color: # 000! Importante; Fondo: Transparente! IMPORTANTE;) HTML (Fuente: 10pt Serif;) #footer, #HEADER, #Left, #Right (Pantalla: Ninguno) #center (margen: 0 ;) A: después (contenido: "(" attr (href) ")";))

Si recuerda, el selector * significa la aplicación de todas estas reglas de estilo para todos los elementos del código HTML. Es cierto que tal selector tiene un mínimo de posibles prioridades, por lo que pide el color para todos los elementos de negro, y el fondo es transparente, utilizando las reglas de color y fondo, nos vemos obligados a no llevar el caso antes de contar las prioridades utilizando la instalación.

Para el selector HTML, prescribimos la tarea de fuente predeterminada, ya que la impresora es tan clara. Bueno, la fuente le pidió a cualquier persona con Serif (Serif). Con la pantalla: Ninguno, estamos prohibidos visualizar el kit de cuerpo (tapas, futuros y altavoces), y con margen: 0 Permitido contenido de la columna central para ocupar todo el espacio disponible en el ancho.

Último selector a: despues Proyector y para comprender mejor qué dice exactamente lo que dice, le aconsejo que se ejecute a través de las siguientes publicaciones sobre () y. Pero él nos necesita para un objetivo bastante simple. ver en papel donde exactamente los hipervínculos de plomo.

Después de Pseudo-element le permite generar contenido al crear un documento de navegador. Después, nos permitirá agregar una dirección de URL del hipervínculo inmediatamente después del lugar donde se coloca la mayor cantidad de referencia. Esto se hace utilizando una regla de contenido de CSS especial que solo funciona para dos pseudo-elementos: después y antes.

Dentro de la regla de contenido, recetamos un espacio en las cotizaciones y abrió un soporte redondo y luego agregamos contenido a través del espacio

Este artículo se discutirá sobre los sitios que los desarrolladores se crean manualmente, es decir, se nos mencionamos.

El artículo está destinado a los usuarios familiarizados con Html y CSS. . También es deseable conocer al menos la base. Adobe Photoshop.

Una de las etapas de crear un sitio web real es crear una plantilla PSD. Todavía puede cumplir con tales nombres como un diseño, diseño o fuente.

La plantilla está ordenada al diseñador. El diseñador dibuja un diseño en Adobe Photoshop y lo guarda en formato PSD.

¿Qué es un formato PSD?

Para una mejor comprensión, se puede traer un ejemplo de vida simple. En la infancia, todas las aplicaciones de pegamento. Cortar la casa de papel - pegada. Cortar el árbol de Navidad - pegado. Y así, mientras el trabajo no esté listo.

Y ahora puedes imaginar la situación a la que se recortaron las cifras, se descomponen en la hoja en los lugares correctos, pero aún no pegados. Por lo tanto, el formato de archivo PSD se puede comparar con la aplicación a la que aún no se han pegado las cifras, pero las han colocado en el orden deseado.

Gracias a esto, cada una "característica", y más precisamente, cada fragmento individual de la plantilla se puede guardar como una imagen separada, que luego se puede usar en el sitio.

Aquí hay un diseño de página que se creará.

Después de que tengamos una plantilla preparada en Formatsd, puede ir directamente a la capa.

1. Cree una carpeta en la que se almacenará el diseño, por ejemplo, "Sitio".
2. En la carpeta "Sitio", cree una carpeta para imágenes, como IMG.
3. En la carpeta "Sitio", cree una carpeta para estilos, como CSS.
4. Ahora necesita ejecutar el programa Adobe Photoshop y abra el archivo PSD en él. Desde aquí, debe "sacar" todas las imágenes que se utilizarán en el sitio.

Aquí debe prestar atención al botón "Capas". En la figura se resalta en rojo óvalo.

Este botón se enciende y apaga la ventana de la capa. Capas: estos son los detalles del aplique más pegado. Las capas para mayor comodidad se distribuyen a las carpetas que se pueden plegar y desplegar. El principio de operación es casi lo mismo que en el Explorador de Windows.

En primer lugar, todas las carpetas están mejor colaborando. Implementar según sea necesario.

Ahora puedes comenzar las imágenes "sacar"

En primer lugar, debe elegir un marco de herramientas. Luego asigne solo la parte que limita el logotipo del sitio.

Después de eso, presione la tecla ENTER. Incluso excepto que el área dedicada será cortada.

Ahora puedes quitar el fondo. Para hacer esto, apague la capa con el fondo.

Para encontrar rápidamente las capas deseadas, puede realizar las siguientes acciones:

Aquí la capa se llama "Figura 2". Al hacer clic en la imagen del ojo, la capa se vuelve invisible.

Sin embargo, hay dos capas más que deben ser desconectadas. Las acciones son similares.

Ahora puedes guardar. Para hacer esto, debe realizar los siguientes pasos.

Seleccione de 4 opciones propuestas y de la segunda propuesta. Expansión Seleccione GIF.

Nombre del archivo logo.gif. . Guardar archivo en carpeta img . Las otras imágenes deben ser salvadas allí.

Puedes seguir estos principios:

• calidad fotográfica - jPG.
• calidad fotográfica con un fondo transparente. pNG-8. , no se adaptó a la calidad - pNG-24.
• pequeños colores en la imagen - gif.

Para devolver la opción inicial para recortar, necesita abrir la ventana de la historia.

Ejecute Haga clic en el nombre del archivo y configure una escala adecuada.

Otras imágenes se guardan de la misma manera.

Lo mismo se aplica a la imagen de la PAW, que aparece al flotar en el elemento del menú

El resto de las imágenes son opcionales. Puedes en blanco, puedes en transparente.

Aquí debe elegir la opción Guardar con mucho cuidado, ya que es cien en las imágenes de origen de la fuente PSD con bordes tratados mal. Aquí hay un ejemplo:

La imagen se guardó en un fondo transparente. Sin embargo, al verlo en negro: los bordes tratados mal son visibles. Pero cuando se usa un fondo claro, este defecto puede ser deteriorado.

Para el fondo, deberá cortar una imagen pequeña, que llenará la página como un azulejo. Sin embargo, en este ejemplo, el fondo no se repite. Por lo tanto, es mejor encontrar una imagen similar. Y puede intentar elegir, cortando varios fragmentos desde el fondo.

Inicio de capas. Envoltura. Encabezado del sitio.

El diseño se considerará utilizando HTML5 y CSS3.

En la carpeta de su sitio, debe crear un archivo HTML. por ejemplo index.html.

En carpeta cSS. Crea un archivo style.css. .

Además, en la carpeta. cSS. Debes colocar el archivo reiniciar.css. con el siguiente código

/ * v2.0 | Licencia 20110126: Ninguna (dominio público) * / HTML, Cuerpo, Div, Span, Applet, Objeto, Iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, Abbr, Acrónimo, Dirección, Grande, cite, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, tt, var, b, U, I, Centro, DL, DT, DD, OL, UL, LI, Fieldset, Formulario, Etiqueta, Leyenda, Tabla, Leyenda, Tamble, Tfoot, Thead, TR, TH, TD, Artículo, Aparte, Lienzo, Detalles, Incrustar, figura, figsaption, footer, encabezado, hgroup, menú, navegación, salida, rubí, sección, resumen, tiempo, marca, audio, video (margen: 0; relleno: 0; Frontera: 0; Tamaño de fuente: 100% Fuente: Heredación; Alineación vertical: línea de base;) / * HTML5 Pantalla de restablecimiento de roles para navegadores más antiguos * / Artículo, a un lado, detalles, Figcaption, Figura, Footer, Header, HGROUP, MENÚ, NAV, SECCIÓN (PANTALLA: BLOQUE; ) Cuerpo (altura de la línea: 1;) OL, UL (Lista-Estilo: Ninguno;) Blockquote, Q (Cotizaciones: Ninguna;) BlockQuote: Antes, BlockQuote: ForeTer, P: Antes, P: Después (contenido: ""; Contenido: Ninguno;) Tabla (borde-colapso: colapso; Borde SPACE R: 0; )

El hecho es que los diferentes navegadores para la misma etiqueta pueden tener diferentes configuraciones. Para garantizar el navegador cruzado, deben restablecerse. El código propuesto anteriormente fue desarrollado por Eric Mayer.

Primera B. index.html Debes escribir las etiquetas principales.

Para etiqueta en estilos Necesitas instalar el fondo.

Como ya se mencionó, el fondo aquí no se repite. Por lo tanto, Racional elegirá algo similar.

Cuerpo (fondo - Imagen: URL (.. / img / bg.gif);)

Ahora necesita crear una envoltura de sitio, un bloque en el que se colocará todo el contenido.

Al lado del cierre

El comentario escrito el identificador de bloque. A lo largo del tiempo TAGOV

Se convertirá mucho, y puede surgir confusión. Será incomprensible donde se cierra el div.

También el interior del bloque es envoltorio. Es temporalmente. El objetivo es ver el bloque durante la mentira y distinguirlo del resto. Por la misma razón, algunos antecedentes ligeros estarán temporalmente en los estilos del bloque.

Para instalar estilos, es necesario conocer su ancho y sangría desde arriba y abajo. Puedes medir en Adobe Photoshop. La herramienta "Área rectangular" es resaltar el sitio del sitio desde la derecha hacia el borde izquierdo. La altura no es importante.

Ancho se puede ver en la ventana "INFO"

Resultó 964px.

De manera similar, la altura del área seleccionada ya es importante y no es ancho, los sangrías se miden desde arriba y por debajo.

Resultó 100px en la parte superior y 85px a continuación.

De esta manera, se determina cualquier distancia en la fuente.

#Wrapper (ancho: 964px; margen-top: 100px; margen-derecha: automático; margen de fondo: 85px; margen-izquierda: Auto; Color de fondo: # FF9;)

La derecha y la izquierda son sangrías automáticas. Gracias a esto, el bloque está alineado en el centro.

Página:

En este artículo, quiero contarle sobre cuatro formas diferentes de crear diseños con varias columnas. Cada método tiene sus pros y sus contras. Para demostrar cómo funcionan y se ven estos diseños, creé un sitio simple que utiliza tablas HTML, el flotador CSS, el marco CSS y la propiedad FlexBox.

El primer día de la nueva vida.

En este artículo utilizamos cuatro formas diferentes de colocar el sitio:

• Mesas. Ni siquiera necesita usar un archivo de estilo separado. Y, lo que es más importante, no se rompen.
• Flotador. Estamos hablando de la propiedad CSS. Esta es una forma bastante común de crear un diseño de página web. Y en este caso, tendremos que usar una hoja de estilo separada. El archivo HTML se utiliza solo para determinar el contenido de la página web. Si desea alinear el contenido, debe usar el archivo CSS.
• Marcos de CSS. Trabajan igual que JavaScript-Framework. Conecte el archivo de origen en el título (por ejemplo, ), ¡Y él está listo para el trabajo! Usted no necesita establecer los valores de las propiedades usted mismo. Esto utiliza clases que los desarrolladores de marco han preparado para usted.
• FlexBox. FlexBox es un nombre corto Módulo de diseño de caja flexible CSS. Este es un nuevo en comparación con la tecnología FLOAT. El principio básico de FlexBox, proporciona un contenedor con la capacidad de cambiar el ancho, la altura y el procedimiento de los elementos contenidos en ella. Si desea llenar completamente todo el espacio libre, debe usarla para el diseño de DIV FlexBox. Por ejemplo, para cubrir todos los tipos de dispositivos y tamaños de pantalla. El contenedor flotante extenderá los elementos contenidos en él para llenar la pantalla completa.

Ahora es el momento de probar cada uno de ellos.

Maneras de crear

Este es mi diseño de sitio:

Mesas

Para crear una tapa del sitio, usé la posición: propiedad relativa. Tratemos de hacerlo desde cero con un diseño tabular.

Aquí está mi código HTML:

			Cinematrón.
	CASA	Estrenos.	Taquilla.	Fotos.

Y eso es lo que obtuve:

Como puedes ver, este no es el mismo sombrero. Ella se ve familiar, pero su ubicación ha cambiado un poco. Y es por eso. Sabes que las mesas son excelentes para el posicionamiento simétrico. Pero para otros fines, no son adecuados. También presta atención a la mayor parte del código. Pero las mesas tienen una característica útil. Esto es lo que podemos hacer:

tABLE, TD (COLAPSO DE FRONTERA: COLAPSO; Frontera: 1px rojo sólido;)

Y verás que el diseño comenzó a parecer esto:

Por lo tanto, puede determinar fácilmente qué se encuentra si está confundido.

Ahora malas noticias. Mira el código HTML de nuevo. Esta es una tabla simple, pero imagina cómo se verá con docenas de células. Este es lo que el código fuente que tengo:

Cinematrón.

Todas las cosas que necesitas saber sobre las películas.

• cASA.
• estrenos.
• taquilla.
• fotos.

Y archivo CSS:

#Header (altura: 230px; imagen - Imagen: URL (../ images / encabezado1.jpg); Repetición de fondo: sin repetición; Fuente-cara: "Shift", sans-serif;) #ader H2 (FONT- Tamaño: 4EM; Posición: Relativo; TOP: 30px; Izquierda: 550px; Pantalla: Inline;) #HEADER P (Tamaño de fuentes: 1.3EM; FONT-PEGER: BOLD; Posición: Relativo; Top: 50px; Izquierda: 60px; Pantalla: Inline) #Menu (Posición: Relativo; Top: Top: 100px; Izquierda: 340px; Pantalla: Bloqueo en línea;) #Menu LI (Fuente-peso: negrita; Pantalla: En línea; Transformación de texto: Mayúscula; 14px;) #Menu Entrada (tamaño de fuente: 0.7EM; Transformación de texto: minúscula; Texto: alineado: derecha; Posición: Relativo; TOP: -4px;)

En este caso, debe usar el diseño de bloques del sitio utilizando CSS. Aplicando algo como esto:

div (posición: relativa; arriba: 100px; izquierda: 100px;)

Usted especifica mover

A 100 píxeles hacia abajo y 100 píxeles a la derecha en relación con su posición inicial. Usando estas propiedades, es fácil mover el texto en la página. Puede moverlo de una esquina a otra para determinar qué posición es la mejor. Esto es mejor que la mesa.

Flotador

La propiedad flotante se usa ampliamente en el diseño de bloques del sitio. Usaremos esta propiedad para retirar el área principal del área de contenido. Un pequeño ejemplo te ayudará a comprender mejor cómo funciona:

Tiene tres elementos multicolores.

. Verde para artículos básicos, rojo para artículos de noticias y azul para el sótano.

Pero el archivo CSS:

#Green (ancho: 200px; altura: 200px; borde: 1px verde sólido; flotador: izquierda; Margen: 5px;) #red (ancho: 100px; altura: 200px; borde: 1px rojo sólido; margen: 5px; flotador: a la izquierda ) #Blue (ancho: 310px; altura: 100px; borde: 1px azul sólido; margen: 5px; Claro: ambos;)

Y eso es lo que hicimos:

Al colocar capas, especifique a través de la propiedad FLOAT, ¿qué quiere su elemento?

estaba flotando Luego especifica la dirección de desplazamiento para ello. Por lo general, esto es flotante: izquierda o flotación: derecha. Cuando especifique un artículo

Cambia a la izquierda, lo hará hasta que termine el espacio libre.

El siguiente elemento flotante se cambiará hasta el primero, y así sucesivamente. ¡El siguiente elemento flotante lo telete como el agua! Pero si no desea bajar todos sus objetos "en el agua", puede usar la propiedad transparente. Determina qué lados del elemento no deben fluir elementos flotantes.

Aquí está la parte de mi diseño para el contenido principal:

Primer encabezado del artículo.

Primer artículo BodyReer más

Segundo encabezado de artículos

Segundo artículo bodyread más

Primer encabezado de artículos de noticias

Primer artículo de noticias

Segundo Noticias de encabezado del artículo

Cuerpo del artículo de la segunda noticia.

Ahora vamos a hacerlo flotando:

# Contenido principal (ancho: 780px; flotador: izquierda;) #News (margen-izquierda: 20px; flotador: izquierda; Ancho: 180px;)

Tenemos un gran bloque para artículos y un bloque más pequeño para las noticias. Utilizamos la propiedad FLOAT: izquierda y para imágenes. Tenga en cuenta cómo se drenan la etiqueta. Este diseño se parece a tu revista favorita.

Marcos de CSS

Si eres un poco perezoso

Si no tiene tiempo para molestarse con el código con diseño CSS, puede usar uno de los marcos CSS. En nuestro ejemplo, usamos Bootstrap. Para hacer esto, debe descargarlo y conectarlo en el archivo HTML.

Bootstrap contiene una cuadrícula que consta de 12 columnas iguales. Los elementos HTML se ordenan para cubrir un número diferente de columnas. Por lo tanto, se crean diseños personalizados. Cada parte del contenido está alineada con respecto a esta cuadrícula a través del número especificado de columnas a las que se estiran.

Aquí hay un ejemplo:

En este ejemplo, creamos una cadena. Después de eso, colocó dos columnas iguales en ella. Cada uno de ellos cubre seis de las doce columnas disponibles.

Código HTML:

PRÓXIMAMENTE, EN BREVE, PRONTO:

Y eso es lo que obtuve:

Se ve bien. Y cuando coloque el sitio de PSD, ni siquiera necesita editar el archivo CSS. Pero no ves lo que está sucediendo dentro.

Caja flexible

Mañana clásico

Usaremos FlexBox para crear una sección del sitio "Boxeo-oficina". Aquí hay un código HTML:

• Cenicienta: $ 67.9m
• Ejecutar toda la noche: $ 11.0m
• Kingsman: El Servicio Secreto: $ 6.2M
• Enfoque: $ 5.7m
• Chappie: $ 5.7m
• McFarland USA: $ 3.6m
• El DUFF: $ 2.9m
• Sniper estadounidense: $ 2.8m

Aquí hay un código CSS para el contenedor "BoxOffice":

#Boxoffice (ancho: 780px; altura: 500px; imagen - Imagen: URL (../ images / box_office_cropped.jpg); Fondo-repetición: Cubierta; Radio de borde: 5px; relleno: 20px;)

Ahora es el momento de crear un contenedor flexible. Para hacer esto, configure para la pantalla: elemento FLEX. De acuerdo con las reglas de diseño, todos los elementos de FlexBox están ubicados a lo largo de los ejes principales y transversales:

Para FlexBox, se establecen dos tipos de propiedades. El primero se utiliza para controlar el contenedor flexible, el segundo - para llenar elementos flexibles. Considere en detalle el primer tipo.

De forma predeterminada, el eje principal es horizontal, por lo que los elementos se estirarán en una fila. Para cambiar el eje principal, podemos usar la propiedad Flex-Direction. Puede tomar los siguientes valores: fila, reversa en fila, columna y revestimiento de columna. Usaremos el valor de la columna. También agreguemos la propiedad de altura. ¿Por qué lo necesitas, entenderás un poco más tarde?

contenedor flexible (altura: 300px; Pantalla: FLEX; DIRECCIÓN FLEX: Columna;)

Aquí es lo que parece nuestra pequeña caja de caja:

Utilizamos la propiedad de altura, porque no queremos que el contenedor FLEXBOX se superponga a la imagen de la flecha en la parte inferior del fondo.

FlexBox también hace posible realizar cambios en el contenido sin cambiar el archivo HTML. Por ejemplo, si desea cambiar la ubicación de los elementos en lo contrario, puede cambiar el valor de la dirección Flex a las columnas-Reversa. Esto cambiará la dirección de FlexBox a lo contrario. Pero también deberá cambiar el orden de los elementos dentro del contenedor.

Para hacer esto, usamos la propiedad de contenido de justificación. Disponible para ello: Flex-Start, Flex-Fin, Centre, Espacio-Entre y el espacio-alrededor. Para ello, debe establecer el valor de Justify-Content, que es equivalente a Flex-Fin.

Aquí está nuestro código:

Flex-contenedor (altura: 300px; Pantalla: FLEX; DIRECCIÓN FLEX: Columna-Reversa; Justify-Contenido: Flex-Fin;)

Y por cómo se reflejaron estos cambios:

También puede mover los elementos a lo largo del eje transversal. Esto utiliza la propiedad de alineación de elementos. Puede configurar los siguientes valores para él: Flex-Start, Flex-Fin, Center, Línea de base o estiramiento.

Para usarlo, agregue la propiedad a FlexBox Selector:

Flex-contenedor (alinear-artículos: Flex-Fin;)

Todos los elementos cambiarán al borde derecho:

Hay otra propiedad útil: Flex-Wrap. Imagina que la taquilla está aumentando rápidamente. ¿Qué pasa si se vuelve más que el contenedor? Nada malo si usas la propiedad Flex-Wrap.

Intenta agregar el siguiente código.

Elementos de diseño HTML

Los sitios a menudo muestran contenido en varias columnas (como una revista o un periódico).

La especificación HTML5 ofrece nuevos elementos semánticos que definen diferentes partes de la página web:

Diseños de diseño HTML

Hay cuatro formas diferentes de crear diseños de varias columnas. Cada método tiene sus pros y sus contras:

• Modelo HTML de la mesa
• Modelo flotando CSS.
• Marco modelo CSS.
• Modelo FlexBox CSS.

¿Para elegir?

Modelo HTML de la mesa

Elemento

¡No fue diseñado para el diseño de la herramienta! Elemento de tarea Mostrar datos tabulares. ¡Así que es mejor no usar tablas para diseño de diseño! Ellos harán un desastre en el código. E imagine lo difícil que reconstruirá su sitio en un par de meses.

Consejo: ¡No use tablas para marcar diseño!

Marco modelo CSS.

Si desea crear su diseño rápidamente, puede usar los marcos como W3.CSS o Oreja.

Modelo flotando CSS.

Es común hacer todos los diseños web utilizando propiedades CSS flotan.

Float es fácil de aprender: solo necesita recordar cómo las propiedades del flotador y el trabajo claro. Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede dañar la flexibilidad.

Ejemplo de flotador de diseño.

Galería de ciudad

Londres

Londres es la capital de Inglaterra. Esta es la ciudad más poblada del Reino Unido, con suburbios de más de 13 millones de habitantes.

De pie en las orillas del río Támesis, Londres fue un asentamiento importante por dos milenios, por su historia, que abandonó su fundación por los romanos, quien lo llamó Londinium.

¿Te gustó el artículo? Compártelo

Artículos recomendados sobre el tema.

Celular: lo que es en el iPad y cuál es la diferencia.

Ir a la televisión digital: ¿Qué hacer y cómo prepararse?

Encuestas sociales trabajan en internet.

Los visitantes ahora están discutiendo

Savin grabó un mensaje de video a los Tyuments. Tenda.

Menú de mesas soviéticas, ¿cuál fue el nombre del jueves en cantinas soviéticas? Asus.

Cómo hacer en la lista "Palabra" alfabéticamente: consejos útiles Androide

¿Cómo ver compañeros de clase que se retiran de amigos? Asus.