Cómo Rediseñar Una Plantilla De Sitio Web

Tabla de contenido:

Cómo Rediseñar Una Plantilla De Sitio Web
Cómo Rediseñar Una Plantilla De Sitio Web

Video: Cómo Rediseñar Una Plantilla De Sitio Web

Video: Cómo Rediseñar Una Plantilla De Sitio Web
Video: Photoshop Tutorial | DISEÑO HOME WEB RESPONSIVE | HOME RESPONSIVE WEBSITE DESIGN 2024, Abril
Anonim

La forma más sencilla de crear un sitio web es mediante una plantilla. Sin embargo, para que el recurso se destaque, debe cambiar el diseño predeterminado. Y aquí no puede prescindir de conocimientos básicos de html y css.

Cómo rediseñar una plantilla de sitio web
Cómo rediseñar una plantilla de sitio web

Instrucciones

Paso 1

Encuentre la plantilla de sitio web que mejor se adapte a sus necesidades en Internet. Preste atención a sus capacidades, la capacidad de adaptarse al tamaño del monitor, las características del menú y el diseño de las columnas. Descargue la versión que desee en su computadora, descomprima el archivo. Verifique su rendimiento cargando los archivos en la raíz del sitio. Quizás la plantilla contenga errores y no se instale correctamente, entonces no tendrá sentido trabajar con ella en el futuro.

Paso 2

Incluso si no va a rehacer completamente la plantilla, reemplace la mayoría de las imágenes, y especialmente las que se ubican como logotipo. Reemplace cada imagen de esta manera:

- abra el archivo gráfico en el programa Photoshop;

- en el menú "Imagen" - "Tamaño de imagen" mire sus parámetros;

- abra una nueva hoja con exactamente las mismas dimensiones;

- crear la imagen deseada utilizando las herramientas de la aplicación;

- aplanar todas las capas y guardar (no para web) una nueva imagen con el mismo nombre y en la misma carpeta, configurando el formato original.

Así, en lugar de una imagen, debería aparecer otra.

Paso 3

Tan pronto como cambie todas las imágenes, comprima la carpeta con los archivos (en el caso de Joomla) y cárguela a través del panel de administración del sitio en el menú "Extensiones". Vea si el tema se muestra correctamente con las nuevas ilustraciones.

Paso 4

Cambie el resto de los parámetros en style.css. Además, es mucho más conveniente hacerlo no a través del panel de administración, sino en una computadora. Es razonable usar localhost (Denver) para ver el resultado de las transformaciones lo antes posible. Esto evitará la necesidad de cargar el resultado en el servidor cada vez para poder ver los resultados después de la siguiente edición.

Paso 5

Descargue el complemento FireBug gratuito para Mozilla Firefox. Después de la instalación, aparecerá un icono de error amarillo en la esquina superior derecha del navegador. Haga clic en él o presione la tecla F12 y en la parte inferior de la pantalla, el código de la página aparecerá en una versión contraída. Se puede abrir colocando el mouse sobre los signos más. Y si hace clic en la línea de un elemento, se resaltará en la parte superior de la pantalla. En el lado derecho de la ventana con el código, encontrará estilos que indican las líneas que son responsables de la apariencia. E inmediatamente quedará claro dónde necesita editar el archivo de estilo para cambiar el diseño.

Paso 6

Abra style.css en Notepad ++. Puede usar otros programas diseñados para editar el código, pero para este propósito no puede usar el "Bloc de notas" estándar, de lo contrario habrá errores debido a la codificación. Use FireBug para encontrar los parámetros que desea cambiar y edítelos en Notepad ++ al mismo tiempo.

Paso 7

Guarde el CSS final y cargue el archivo en el servidor.

Recomendado: