Crear tu propia página web es fácil - Un Tutorial (Parte 2)
Palabras: 1715
Resumen:
Ahora, Vamos a continuar con la Parte 2. Vamos a discutir aquí los siguientes: Creación de tablas Uso de cajas CSS como diseño de páginas web Aquí tiene cómo:
Palabras clave: construcción de sitios web, hacer página web, la creación de una página web, hacer página web, como crear página web, como diseño de página web, cómo hacer que la página web
Cuerpo del artículo:
Ahora, Vamos a continuar con la Parte 2. Vamos a discutir aquí los siguientes: Creación de tablas Uso de cajas CSS como diseño de páginas web Aquí tiene cómo: Creación de tablas Las tablas son muy útiles en la presentación de los datos. Las siguientes son las etiquetas html que se utiliza para crear una tabla básica: Una sola columna de tabla: table width="400" border="1" cellspacing="2" cellpadding="4 datos de la fila 1 datos de la fila 2 Tipo de la anterior en su mywebpage.html dentro de las etiquetas "body", guardar y actualizar su navegador. Ese es el cuadro de la web. Refiriéndose a las anteriores códigos html, el ancho se refiere a la anchura de la tabla (puede usar también como aquí píxel "800"), la frontera es la línea exterior o el esquema de la tabla, cellspacing es el espacio entre las células, las células son la zona donde se encuentran los datos, cellpadding es el espacio entre la frontera y las células. Usted puede cambiar la tabla de valores de estos atributos o propiedades, basada en sus preferencias o necesidades. Aunque el cuadro anterior siguen siendo los códigos html de trabajo, exige que la mesa W3C.org propiedades o atributos que se definen en las hojas de estilo o CSS. Uso de CSS, las propiedades de la tabla de arriba podría presentarse de la siguiente manera: Dentro de las etiquetas de estilo en la cabeza: . type1 ( ancho: 400 píxeles; padding: 4px; margin: 2px; ) . frontera ( border: 1px sólido # 000; ) Después, dentro de las etiquetas "body":
datos de la fila 1datos de la fila 2 En cuanto a los códigos ", type1" está precedido por punto (.), Lo que significa que es un selector de clase. Para el próximo tipo de propiedades o atributos de la tabla, es posible que la etiqueta como type2 y, a continuación, y así sucesivamente type3 o con otros nombres que prefiere. "frontera" es también un selector de clase y de "frontera: sólido 1px # 000" es el grosor (1px), el tipo de fronteras (sólido) y color (# 00f) de la frontera. Hay más debates de CSS en "Creación de cajas CSS como diseño de páginas web" y en "Uso de estilo CSS en sus páginas web" Si quiere probar lo anterior, a continuación, escriba los códigos en el estilo de las etiquetas y el cuerpo como se ha señalado, guardar y actualizar su navegador. Debe ser la misma que la primera. Ahora, vamos a hacer una columna 2-o multi-mesa de la columna: table width="400" border="1" cellspacing="2" cellpadding="4"> datos de la fila 1 1 fila 1 datos 2 fila 2 datos 1fila 2datos 2 tableTipo de la anterior en su mywebpage.html dentro de las etiquetas "body", guardar y actualizar su navegador. Ese es el cuadro 2-columna en la web. Para añadir una columna, basta con insertar después de td 1 es una columna, 1 es una fila y 1table table es una tabla. Ahora, hagamos una tabla con 1 línea principal y 3 subpartidas: table width="400" border="1" cellspacing="2" cellpadding="4" colspan="3"principal Denominación Subtítulo 1 Subtítulo 2 Subtítulo 3 datos de la fila 1 1fila 1 datos 2 fila 1 datos 3 fila datos 1 fila 2 datos 2 fila 2 datos 3 table Tipo de la anterior en su mywebpage.html dentro de las etiquetas "body", guardar y actualizar su navegador. ¿Ves? Sí, sólo uso colspan fusionar las columnas. Para fusionar 2 columnas, utilice colspan = "2" y 3 columnas, el uso colspan = "3" y así sucesivamente. Si desea fusionar las filas, en lugar de utilizar rowspan colspan. Véase este ejemplo: able width="400" border="1" cellspacing="2" cellpadding="4" rowspan="2combinar datos de la fila fila 1 datos 2 fila 2 datosAhora, escriba lo anterior en su mywebpage.html dentro de las etiquetas "body", guardar y actualizar su navegador. Ahora, usted ve que el 2 de filas en la primera columna se fusionaron. Trate de crear su propia tabla con diferentes valores para familiarizarse en la manipulación de tablas. Creación de cajas de CSS para diseño de página web Antes, los cuadros están siendo utilizados como diseño de una página web. Por lo tanto, la cabecera, a la derecha las barras, barras de la izquierda, las principales áreas de contenido y el pie se encuentran dentro de una tabla. Esto ralentiza la carga de la página que el navegador tendrá que completar en primer lugar, la mesa antes de que se mostrará el contenido. Sus visitantes pueden tener ya la izquierda antes de su página puede ser visualizada. Si prefiere utilizar el cuadro como su diseño, usted tiene que evitar el uso de grandes tablas. Es mejor utilizar las tablas pequeñas para que la pantalla de su navegador la página poco a poco, pero más rápido. Aunque el cuadro puede ser utilizado, requiere W3C CSS casillas que se utilizarán para el diseño de cuadros en lugar debido a la cuestión de la accesibilidad. CSS cajas de carga más rápido que las tablas. Estos pueden ser controlados dentro de las hojas de estilo que podría estar dentro de la cabeza o en las etiquetas por separado el archivo CSS. La parte más crítica en css cajas es el posicionamiento. Por lo tanto, voy a explicar a usted el posicionamiento propiedades de estas cajas, sobre la base de mi experiencia: position: absolute - Tienes que definir el eje x y eje y como punto de referencia de la esquina de la caja. eje "x" es la izquierda o la derecha y el eje es superior o inferior. Tiene que definir también el ancho o el margen izquierdo y derecho o material de relleno de la caja. La caja no se ve afectada por el anterior o posterior cajas. Asimismo, las casillas anteriores o posteriores a las cajas que están en la posición absoluta como tampoco están afectados. flotador: izquierda o derecha - Es necesario fijar la anchura. También tendrá que elegir si la izquierda o la derecha. La caja se basará en el lado seleccionado. Que se basará en el cuadro anterior, si hay espacio suficiente para ello. Esto se ve afectada por las otras cajas a excepción de las cajas de posición absoluta. ninguna posición o cargo: estático o fijo - Esto sigue el flujo normal. Esto también se ve afectada por las otras cajas a excepción de la posición absoluta queridos. Usted necesidad de definir el ancho o el margen izquierdo y derecho. Ahora, vea la siguiente ilustración que creará 5 cajas, a saber: headerbox, leftbox, centerbox, RIGHTBOX y footerbox. Se trata de cajas de líquido, que se ajuste de forma automática cuando el ancho de la pantalla del tamaño de la ventana el ordenador se cambia: body ( alinear texto: centro; margin: 1px; ) # (headerbox ancho: 100%; altura: 15%; background-color: # 9cf; border: 1px sólido # 00f; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; ) # (RIGHTBOX float: right; ancho: 20%; margen superior: 5px; alinear texto: centro; background-color: # CFF; border: 1px sólido # 00f; height: 100%; ) # (leftbox flotador: izquierda; margen superior: 5px; ancho: 20%; alinear texto: centro; background-color: # CFF; border: 1px sólido # 00f; height: 100%; ) # (centerbox ancho: 99%; margen superior: 5px; alinear texto: centro; background-color: # CFF; border: 1px sólido # 00f; height: 100%; ) # (footerbox ancho: 100%; alinear texto: centro; altura: 15%; alinear vertical: media; margen superior: 5px; background-color: # 9cf; border: 1px sólido # 00f; ) div id="headerbox" HEADERBOX área de contenido div id="leftbox" LEFTBOX área de contenido div id="rightbox" RIGHTBOX área de contenidodiv id="centerbox"CENTERBOX área de contenido div id="footerbox" FOOTERBOX área de contenidoEn primer lugar, el tipo por encima de los códigos html para que mywebpage.html dentro de la cabeza, cuerpo y estilo de etiquetas como se señala en el anterior. A continuación, guardar y actualizar su navegador o abrir el archivo con su navegador. ¿Está usted viendo la headerbox en la parte superior, el leftbox, RIGHTBOX centerbox y en el centro y footerbox en la parte inferior? Trate de cambiar el ancho de la ventana del navegador. ¿Ves? La anchura de las cajas son también de adaptación y que es excelente como su página de auto-ajuste en función del tamaño de la ventana del navegador de los usuarios de su sitio! Esto se debe a que he usado% s en la definición de la anchura de las cajas. Ahora, permítanme explicar los códigos anteriores para la creación de cajas, como su diseño. headerbox - precedidos por #, lo que significa que es un selector de ID y podría ser usado sólo una vez por página; flotador: la izquierda se entiende el cuadro de apoyarse en la izquierda si caben; ancho: 100% significa que la caja es de 100% de la ventana del navegador y esa es la razón por la que es líquido; altura: 15% significa que la caja es del 15% de la ventana del navegador; alinear texto: es el centro de la alineación de los objetos o personajes dentro de la caja; background-color: # 9cf es el color del espacio dentro de la caja; frontera: sólido 1px # 00f es el mismo tal como se describe en Creación de tablas. RIGHTBOX - mismas explicaciones en el anterior excepto por el flotador: el derecho lo que significa que la caja se basará en el derecho y el margen superior: 5px es la distancia desde la línea inferior de la caja superior (headerbox). leftbox - mismas explicaciones en el anterior. centerbox - mismas explicaciones en el anterior excepto que no tiene posición definida, lo que significa que seguirá a la normalidad. Este Comité se inserta en sí sobre la base del espacio disponible. Este será el 100% o de su tamaño completo. Más de este límite de distorsionar el cuadro de alineación. footerbox - mismas explicaciones en la citada excepción de la vertical-se suman: el medio, lo que significa que los objetos o personajes dentro de la caja serán alineados verticalmente en el centro. Intente cambiar los valores de los valores de las cajas css anterior, a continuación, guarde. Actualiza tu navegador y familiarizarse con el efecto de cada cambio. Por favor tenga en cuenta, sin embargo, que puede haber pequeñas diferencias, si las cajas se muestran css con navegadores distintos a Internet Explorer como Firefox y Opera. Continuar con la parte 3.
Entradas
