Creación de una plantilla de HTML le ayuda a crear rápidamente las futuras páginas de un sitio web. Copie el código de la plantilla y pegarlo en el editor para crear una nueva página. El uso divs significa que usted puede cambiar fácilmente el diseño de su sitio web mediante la edición de un archivo: el archivo CSS , que controla la distribución de los divs a través de todo el sitio. Cosas que necesitará
HTML /CSS editor de su elección
Mostrar más instrucciones
1
Crear un archivo HTML en un editor de su elección.
2
Inserte el siguiente código HTML , lo que crea la estructura de la página e incluye un enlace al archivo CSS. (El archivo CSS se creó en una etapa posterior . )
Layout 1 < /title> <br> <p> <link type="text/css" media="screen" rel="stylesheet" href="MyName.css" /> <br> <p> < /head> <br> < p> <body> <br> <p> < /body> <br> <p> < /html > <br> <p> Añadir un título de su elección para sustituir el texto "Diseño 1 " . <br> Página 3 <p> Añada las siguientes " divs " entre las etiquetas " <body> " . <p> <br> <div id="header"> <br> <p> jefe <br> <p> < /div > <div <br> <p> id="navigation"> <br> <p> navegación <br> <p> < /div > <br> < p> <div id="content"> <br> <p> contenido <br> <p> < /div > <div <br> <p> id="footer"> <br> < p> Pie <br> <p> < /div > <br> <p> se trata de una estructura típica de una página web. La " cabecera" se refiere a la parte superior de la página , el menú está situado por debajo. El contenido principal de cada página individual entra en la sección " Contenido" , y la sección " Pie de página " por lo general se encuentra el menú de abajo en una página web. Cada sección tiene un identificador que se utiliza en el archivo CSS para hacer referencia a cada elemento y colocarlo en la sección correspondiente de la página. <br> 4 <p> Guardar la página. ( Asegúrese de que se guarda como un archivo ". Html" archivo. ) <br> 5 <p> Crear una nueva . " Css" archivo. <br> 6 <p> Escribe el código de la disposición para el esfuerzo documento y luego agregar y manipular la fuente y el color de fondo usando el siguiente código: <br> <p> * { <br> margen <p> : 0 ; <br> <p> padding : 0 ; <br> < p >} <br> <p> body { <br> <p> fondo : # eeeeee ; <br> <p> font- family: sans -serif ; <br> <p> font- size: 12px ; <br> <p> } <br> 7 <p> Añada el estilo de la div de encabezado , que definirá la altura y el color: <br> <p> div # header { <br> <p> altura : 160px ; <br> <p> fondo : # 800000 ; } <br> <p> <br> 8 <p> Defina el estilo para los demás elementos div de la página: la " navegación " , el "contenido " y el " pie de página ": <br> <p> div # { navegación <br> <p> fondo : blanco; <br> ancho <p> : 25 % ; <br> <p> float : left; <br> < p >} <br> <p> div # content { <br> margen <p> : 0 25 % ; <br> <p> fondo : # BDBD00 ; <br> <p> } <br> <p> div # footer { <br> <p> fondo : # 800000 ; <br> ancho <p> : 100 % ; <br> <p> clear: left ; <br> <p> } <br> 9 < p > Guarde el archivo como " MyName.css " . <br> 10 <p> Pruebe la página en un navegador , abra la página HTML que acaba de crear . Copia el código HTML y añadir contenido aplicable para crear cada nueva página de su sitio web . <br> <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/software/Código-abierto/¿Qué-significa-Open-Source-.html' >¿Qué significa Open Source </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/software/Código-abierto/Problemas-con-OpenOffice-y-Foxfire-.html' >Problemas con OpenOffice y Foxfire </a> </div>
</div>
<dl class=xgc>
<dt><span>Código abierto</span></dt>
<dd><a href="http://www.ordenador.online/software/Código-abierto/Cómo-incrustar-archivos-SWF-en-Joomla-.html">Cómo incrustar archivos SWF en Joomla </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/¿Cómo-hacer-Open-Source-Hard-Drive-Data-Recovery-.html">¿Cómo hacer Open Source Hard Drive Data Recovery </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/¿Cómo-puedo-borrar-una-rama-en-el-CVS-.html">¿Cómo puedo borrar una rama en el CVS </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/Cómo-establecer-permisos-en-Cyberduck-.html">Cómo establecer permisos en Cyberduck </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/¿Qué-es-OpenOffice-Math-.html">¿Qué es OpenOffice Math </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/Open-Source-Audio-CD-Burning-.html">Open-Source Audio CD Burning </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/Cómo-quitar-el-cambiador-de-imagen-en-Dolphin-.html">Cómo quitar el cambiador de imagen en Dolphin </a></dd><dd><a href="http://www.ordenador.online/software/Código-abierto/¿Qué-es-el-SRC-RPM-.html">¿Qué es el SRC RPM </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-instalar-mapas-en-Left-4-Dead-.html" >Cómo instalar mapas en Left 4 Dead </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-cambiar-una-etiqueta-canónica-para-una-página-en-Wordpress-.html" >Cómo cambiar una etiqueta canónica para una página en Wordpress </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-aumentar-el-tamaño-de-caché-en-eAccelerator-.html" >Cómo aumentar el tamaño de caché en eAccelerator </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-instalar-Solr-en-Tomcat-.html" >Cómo instalar Solr en Tomcat </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-instalar-Open-Solaris-en-Virtual-Box-.html" >Cómo instalar Open Solaris en Virtual Box </a> </li><li><a href="http://www.ordenador.online/software/Código-abierto/Cómo-crear-una-cuenta-RocketMail-.html" >Cómo crear una cuenta RocketMail </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo-desinstalar-iCube-CAB-.html" >Cómo desinstalar iCube CAB </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo-cambiar-la-configuración-predeterminada-de-Java-JVM-en-Windows-Eclipse-.html" >Cómo cambiar la configuración predeterminada de Java JVM en Windows Eclipse </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo-personalizar-un-componente-Accordion-.html" >Cómo personalizar un componente Accordion </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo-mostrar-su-código-de-Banner-Enlace-en-Joomla-.html" >Cómo mostrar su código de Banner Enlace en Joomla </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo-guardar-un-archivo-de-OpenOffice-Writer-como-doc-(-Word)-Archivo-.html" >Cómo guardar un archivo de OpenOffice Writer como doc ( Word) Archivo </a></li><li> <a href="http://www.ordenador.online/software/Código-abierto/Cómo--OpenOffice-Access-en-Mac-.html" >Cómo: OpenOffice Access en Mac </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/software/Adobe-Illustrator/' target="_self">Adobe Illustrator</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Animación/' target="_self">Software de Animación</a></li>
<li><a href='http://www.ordenador.online/software/Antivirus-Software/' target="_self">Antivirus Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-Audio/' target="_self">Software Audio</a></li>
<li><a href='http://www.ordenador.online/software/Copia-de-seguridad-de-datos/' target="_self">Copia de seguridad de datos</a></li>
<li><a href='http://www.ordenador.online/software/Grabar-CDs/' target="_self">Grabar CDs</a></li>
<li><a href='http://www.ordenador.online/software/Grabar-DVDs/' target="_self">Grabar DVDs</a></li>
<li><a href='http://www.ordenador.online/software/compresión-de-datos/' target="_self">compresión de datos</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-base-de-datos/' target="_self">Software de base de datos</a></li>
<li><a href='http://www.ordenador.online/software/edición/' target="_self">edición</a></li>
<li><a href='http://www.ordenador.online/software/desktop-Video/' target="_self">desktop Video</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-vídeo-digital/' target="_self">Software de vídeo digital</a></li>
<li><a href='http://www.ordenador.online/software/Drupal/' target="_self">Drupal</a></li>
<li><a href='http://www.ordenador.online/software/Software-Educativo/' target="_self">Software Educativo</a></li>
<li><a href='http://www.ordenador.online/software/Ingeniería-del-Software/' target="_self">Ingeniería del Software</a></li>
<li><a href='http://www.ordenador.online/software/Tipos-de-extensiones-de-archivos/' target="_self">Tipos de extensiones de archivos</a></li>
<li><a href='http://www.ordenador.online/software/Software-financiero/' target="_self">Software financiero</a></li>
<li><a href='http://www.ordenador.online/software/GIMP/' target="_self">GIMP</a></li>
<li><a href='http://www.ordenador.online/software/Graphics-Software/' target="_self">Graphics Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-Home-Recording/' target="_self">Software Home Recording</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Access/' target="_self">Microsoft Access</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Publisher/' target="_self">Microsoft Publisher</a></li>
<li><a href='http://www.ordenador.online/software/Microsoft-Word/' target="_self">Microsoft Word</a></li>
<li><a href='http://www.ordenador.online/software/Código-abierto/' target="_self">Código abierto</a></li>
<li><a href='http://www.ordenador.online/software/Otro-Software-Informática/' target="_self">Otro Software Informática</a></li>
<li><a href='http://www.ordenador.online/software/Juegos-de-PC/' target="_self">Juegos de PC</a></li>
<li><a href='http://www.ordenador.online/software/Photoshop/' target="_self">Photoshop</a></li>
<li><a href='http://www.ordenador.online/software/Formato-de-Documento-Portátil/' target="_self">Formato de Documento Portátil</a></li>
<li><a href='http://www.ordenador.online/software/PowerPoint/' target="_self">PowerPoint</a></li>
<li><a href='http://www.ordenador.online/software/Software-para-presentaciones/' target="_self">Software para presentaciones</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Productividad/' target="_self">Software de Productividad</a></li>
<li><a href='http://www.ordenador.online/software/Quicktime/' target="_self">Quicktime</a></li>
<li><a href='http://www.ordenador.online/software/Gestión-de-Escritorio-remoto/' target="_self">Gestión de Escritorio remoto</a></li>
<li><a href='http://www.ordenador.online/software/SQL-Server/' target="_self">SQL Server</a></li>
<li><a href='http://www.ordenador.online/software/Skype/' target="_self">Skype</a></li>
<li><a href='http://www.ordenador.online/software/Software-versiones-beta/' target="_self">Software versiones beta</a></li>
<li><a href='http://www.ordenador.online/software/Consultores-de-Software/' target="_self">Consultores de Software</a></li>
<li><a href='http://www.ordenador.online/software/Las-compañías-de-desarrollo-de-software/' target="_self">Las compañías de desarrollo de software</a></li>
<li><a href='http://www.ordenador.online/software/Licencias-de-software/' target="_self">Licencias de software</a></li>
<li><a href='http://www.ordenador.online/software/Hojas-de-cálculo/' target="_self">Hojas de cálculo</a></li>
<li><a href='http://www.ordenador.online/software/Impuestos-Preparación-de-Software/' target="_self">Impuestos-Preparación de Software</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-utilidades/' target="_self">Software de utilidades</a></li>
<li><a href='http://www.ordenador.online/software/Web-Clip-Art/' target="_self">Web Clip Art</a></li>
<li><a href='http://www.ordenador.online/software/Windows-Media-Player/' target="_self">Windows Media Player</a></li>
<li><a href='http://www.ordenador.online/software/Software-de-Procesamiento-de-Texto/' target="_self">Software de Procesamiento de Texto</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 