Hola, querido sitio web de lectores de blogs. En, traté de comenzar a hablar de sus principios, pero desafortunadamente tuve que estar muy distraídos por la explicación de los conceptos básicos de WebMastering.

Realmente no quería llamar la atención de estas cosas fundamentales, y lo siento mucho ante aquellos que ya supieron todo esto, pero quería escuchar exactamente la conversación y no escuché.

En este artículo intentaré atrapar y corregir. Espero que no sea necesario desviarse mucho del tema principal. Bueno, con disculpas y arrepentimientos, asumiremos que está terminando, y es hora de finalmente movernos directamente al asunto.

Cree un diseño de sitio en 2 columnas basadas en desplazamientos div

Por lo tanto, en el artículo anterior, hemos creado en su hosting (aunque para estos fines, consulte bastante una visión general de sus capacidades) La carpeta de prueba en la que se pusieron dos archivos principales de nuestro diseño futuro: index.html y Style.css. En realidad, harán nuestro la opción más sencilla Marco.

De nuevo, probablemente, tendrá que distraer un poco del diseño inmediato, porque No todos pueden ser claros cómo crear una carpeta de prueba en el directorio raíz ubicado en un hosting real. Y también, qué es: la raíz del sitio y dónde buscar al acceder a FTP. Pero, de hecho, la pregunta no es un trivial para el usuario que encontró por primera vez su hosting.

Por lo tanto, deberá conectarse primero a través del protocolo FTP. Los datos para conectarse a FTP tuvieron que informarle el proveedor de alojamiento (leído en general, a).

Después de conectarse a FTP (uso el programa FileZilla para este propósito, toda la verdad se escribe al respecto, y estará en su ejemplo decirlo todo), luego en la ventana derecha de este programa verá el contenido de la Catálogo de que Hoster ha asignado un suministro de chirimeste para sus sitios, scripts y cosas similares.

Pero este directorio no será una carpeta raíz. El archivo index.php debe estar en la raíz, así como todos los demás archivos y carpetas que usa el motor.

Para este propósito, se usa un directorio separado, aunque su nombre, dependiendo del alojamiento específico, puede diferir. La estructura de las carpetas internas en el directorio principal (abierta cuando se conecta al sitio FTP) también puede diferir, pero la esencia sigue siendo la misma.

Por ejemplo, puede ver la siguiente imagen:

Mover archivos Debe copiarlo no a este directorio más alto disponible para usted en FTP, y en la llamada carpeta raíz. ¿Cómo averiguar qué de los directorios presentes hay root?

Bueno, en el caso extremo, puede preguntar al más propietario del alojamiento. Y qué, están obligados a ayudarte en tales asuntos. Pero en realidad, a menudo se llamará. ya sea public_html o htdocs.

Si no encontró tales directorios, entonces debe hacer la pregunta del propietario de hosting, y si hay algo así en stock, entonces este es lo notorio raíz Y es en él que tendrá que crear nuestra carpeta de prueba de larga duración, para la cual escribí, y espera que lea estos párrafos.

¿Cómo crear un directorio usando el programa FILEZILLA? Sí, muy simple. Será suficiente para que abra un directorio de caballos en el lado derecho y haga clic en una ubicación vacía con el botón derecho del mouse y seleccione Crear elemento de catálogo en el menú contextual.

UV, creó la carpeta de prueba en el catálogo principal del sitio. Y gracias. En general, era posible no molestarse en ello. ¿Cómo es eso? Así es como. El directorio de pruebas podría crearse en alguna carpeta interna del sitio web, pero aún estará en la raíz.

Para el servidor local, Denver deberá crear el directorio de pruebas en el siguiente directorio:

C: \\ Server \\ Home \\ localhost \\ www \\

En lugar del disco "C", debe especificar el disco en su computadora donde está instalado el servidor local. Luego, para ver el diseño de diseño creado por nosotros sobre la base del diseño DIV en 2 columnas, debe marcar la siguiente ruta en la barra de direcciones del navegador:

Http: // localhost / prueba /

Maldita sea, si todo está tan detallado, resultará tan detallado un pequeño libro sobre el diseño de bloques, y la mayor parte de ella se dedicará a los conceptos básicos de la webmastering, pero no puedo escribir de manera diferente, solía desmontar todos los matices en los estantes. No aprobar, suficientes webmasters de Savvy, que todo esto no está en una novedad.

Continuemos la conversación sobre el diseño.. En el archivo index.html, especificaremos los contenedores DIV, en los que se construirá nuestro marco y en el archivo Style.CSS - Describa la posición y apariencia Estos contenedores DIV. Esto está en pocas palabras, y cómo será, de hecho, verá un poco del clima.

Para observar los resultados de nuestras obras en el navegador, pondremos periódicamente la línea de direcciones del navegador a la carpeta de prueba ubicada en su hosting o en servidor local. En el caso de un huésped real, en la barra de direcciones del navegador deberá obtener algo como esto:

Https: // sitio / prueba

Pero hay dos "pero". Primero, en lugar de HTTPS: // Sitio web / Necesita presentar su URL, y en segundo lugar, preste atención a la Atención al Registro de letras latinas que conforman el nombre de su directorio de prueba.

Si escribió el nombre de la carpeta con letras mayúsculas, entonces en la barra de direcciones necesita escribir la carpeta de título (escribí aquí la prueba aquí en la caja superior, solo para resaltarla con el fondo del texto restante).

El hecho es que en el alojamiento real en la mayoría de los casos, el servidor está ejecutando UNIX similar sistema operativoen donde las letras mayúsculas y minúsculas difieren (A diferencia de las ventanas, trabajando con las que estamos acostumbrados).

Comenzamos el diseño de verstaste del sitio en 2 columnas en la DIVA

Como ya he mencionado, para empezar, intentaremos crear un diseño en dos columnas, que se pueden representar a los siglos de la siguiente manera:

Todos los artículos se colocan en un recipiente DIV grande para que pueda cambiar el tamaño y alinear el diseño completo a través de las propiedades de este contenedor. Dentro del DIV principal habrá contenedores responsables de la formación de bloques individuales (CAPS, columna izquierda, áreas para contenido, Futtern).

Les preguntaremos los tamaños y configuraremos el posicionamiento en la página con utilizando CSS.. Entonces, proceder.

Vamos a empezar con index.html. Ábralo en la edición en un editor conveniente para usted (utilizo para este propósito lo mejor de GRATIS editores de texto Bloc de notas ++ -).

Para acostumbrarse al diseño correcto de los documentos HTML, vamos a dar de inmediato la parte estándar (me quedé en el artículo anterior. Habrá un DOCTYPE () y todas las demás etiquetas principales que navegadores en caso de su ausencia se pueden agregar. (inteligente se convirtieron en horror):

Explicé en detalle en el artículo anterior en este Código en detalle en el artículo anterior (consulte el enlace al principio de esta publicación), por lo que ahora habitaré solo en la línea:

Esta línea le dice al navegador, dónde buscar y cuál es el nombre del archivo de la tabla de estilo cascada (tiene la extensión CSS), que se necesita para el navegador para la visualización correcta del diseño de la plantilla de sitio futura. En nuestro caso, se llama style.css (), y debe buscarlo en la misma carpeta donde se encuentra el índice.html (en el que esta línea se deletrea).

¿Por qué exactamente en la misma carpeta? Debido a que si no prescribe ninguna forma del archivo (indique solo su nombre), el navegador lo buscará en el mismo directorio donde se encuentra el ejecutable ahora (en nuestro caso es index.html). Esos. La ausencia de la ruta será equivalente a la forma en que si prescribí el camino a Style.css como:

Pero la primera versión de la grabación es más corta y más universal, porque No indica directamente la ruta a la carpeta con los archivos, lo que significa que puede colocar los archivos index.html y style.css a otro directorio, comuníquese con el índice.html de la barra de direcciones y aún será cargada por Style.csss . Lea más sobre los enlaces relativos y absolutos).

En este sentido, quiero notar que generalmente no puede molestarse con el alojamiento o con un servidor local. Simplemente crea en tu computadora Cualquier carpeta y coloque nuestro índice.html y Style.css en él. Escriba en el primero de ellos el camino al archivo de estilo.css en el formulario:

Y eso es. Ahora puede abrir un índice.html (haciendo doble clic en él) en el Brawser asignado de forma predeterminada para abrir archivos con la extensión HTML de usted en su computadora, y el Style.CSS se cargará automáticamente.

Este método es conveniente en la etapa de capacitación, pero aún así, todo lo que hablé con usted sobre el trabajo en un servidor real o un servidor local, también será útil en el futuro. Y ahora el trabajo de la carpeta de su computadora puede ser aún más cómodo que en el alojamiento. Aunque, a quién es.

Recetamos el conjunto deseado de bloques en index.html

Ahora necesitaremos crear cuatro contenedores DIV para todas las partes de nuestro diseño de 2 columnas (CAPS, columna izquierda, área para contenido, estacionamiento) y ingresarlos en una división grande.

Dentro de los contenedores DIV para partes del diseño se pueden concluir para visibilidad el nombre de estos bloques. Todo esto escribiremos entre apertura y cierre. Etiquetas html Cuerpo. Resulta algo como este código en index.html:

Esos. Inmediatamente en la etiqueta de apertura del cuerpo, recetaron la etiqueta de apertura del contenedor de diseño DIV principal: