¿Cómo aprender sistemáticamente a crear páginas web?

En términos de comprensión del diseño de páginas web, muchas personas parecen todavía estar estancadas en el nivel de producción de páginas web. Creo que mientras utilice bien el software de producción de páginas web, puedo hacer un buen trabajo en diseño web...

En términos de comprensión del diseño web, muchas personas parecen todavía estar estancadas en el apogeo de la producción de páginas web. Creo que siempre que utilices un buen software de creación de páginas web, podrás hacer un buen trabajo en diseño web.

De hecho, el diseño web es un proceso complejo que combina el pensamiento perceptivo y el análisis racional. Su dirección depende de la tarea de diseño y su implementación depende de la producción de la página web. Como dice el refrán, "El kung fu está más allá de la poesía". Lo más importante en el diseño web no es la aplicación del software, sino nuestra comprensión del diseño web y el nivel de diseño y producción, así como nuestra propia belleza y comprensión de él. la página.

En primer lugar, se debe definir claramente la tarea del diseño web.

En primer lugar, la tarea del diseño

El diseño es una actividad estética, y los trabajos de diseño exitosos son generalmente artísticos. Pero el arte es sólo un medio de diseño, no la tarea del diseño. La tarea del diseño es realizar la intención del diseñador, no crear belleza.

La tarea del diseño web se refiere al tema que el diseñador quiere expresar y las funciones a realizar. Dependiendo de la naturaleza del sitio, las tareas de diseño también son diferentes. Desde un punto de vista formal, los sitios web se pueden dividir en las siguientes tres categorías.

La primera categoría son los sitios web de información, como Sina, NetEase, Sohu y otros portales web. Este tipo de sitio web proporcionará a los visitantes mucha información y una gran cantidad de visitantes. Por lo tanto, debemos prestar atención a la segmentación de la página, la estructura razonable, la optimización de la página, la afinidad de la interfaz y otras cuestiones.

La segunda categoría son los sitios web que combinan información e imagen, como algunas grandes empresas y universidades nacionales. Este tipo de sitio web tiene requisitos de diseño más altos. No solo debe garantizar los requisitos anteriores de los sitios web de información, sino también resaltar la imagen de la empresa y la unidad. Pero en lo que respecta a la situación actual, este tipo de sitios web son sospechosos de mala calidad.

La tercera categoría son los sitios web de imágenes, como algunas pequeñas y medianas empresas o unidades. Este tipo de sitio web es generalmente relativamente pequeño, algunos tienen varias páginas y las funciones que deben implementarse son relativamente simples. La principal tarea del diseño web es resaltar la imagen corporativa. Este tipo de sitios web requiere que los diseñadores tengan un alto nivel artístico.

Por supuesto, esto es sólo una visión general, y situaciones específicas requieren un análisis específico. Los diferentes sitios deben tratarse de manera diferente. No olvides el punto más importante que son los requisitos del cliente, que también es una tarea de diseño.

Después de definir la tarea de diseño, lo siguiente a considerar es cómo completar la tarea.

2. Implementación del diseño

La implementación del diseño se puede dividir en dos partes. La primera parte es la planificación y el boceto del sitio, que se pueden realizar en papel. La segunda parte es la producción de páginas web, que se realiza en el ordenador.

El primer paso para diseñar una página de inicio es diseñar el diseño. Podemos editar páginas web como periódicos y revistas tradicionales, y las páginas web contienen texto, imágenes e incluso animaciones. Lo único que tenemos que hacer es ordenar las imágenes y el texto en diferentes posiciones de la página de la forma más adecuada. Además de tener un ordenador bien configurado, también es necesario un software. No podemos decir simplemente si un software es bueno o malo, siempre que sea conveniente y fácil de usar para los diseñadores, se le puede llamar buen software. Por supuesto, debe cumplir con los requisitos del diseñador. El software que uso habitualmente incluye Dreamweaver, Fireworks y Flash de Macromedia, así como Photoshop e Imageready de Adobe, todos los cuales son muy buenos programas. Lo siguiente que hay que hacer es convertir el plano de diseño en realidad mediante el uso de software. La integración final generalmente se completa en Dreamweaver. Aunque hemos definido las líneas generales de la página en un boceto, la inspiración suele llegar durante el proceso de producción. Los trabajos de diseño deben ser creativos, este es el requisito más básico. El diseño sin creatividad es un fracaso. Durante el proceso de producción, nos encontraremos con muchos problemas, el más delicado de los cuales es el color de la página.

En tercer lugar, el uso del color

El color es algo extraño, es hermoso y rico, y puede evocar la percepción de la mente humana. En general, el rojo es el color del fuego, apasionado y desenfrenado, también es el color de la sangre, que puede simbolizar la vida. El amarillo es el color más brillante, hermoso, noble y brillante.

El verde es el color de la vegetación natural, que significa naturaleza pura y crecimiento, simboliza paz y seguridad, como los alimentos verdes. El morado es un símbolo de nobleza y solemnidad. El blanco puede dar a las personas una sensación de pureza e inocencia, es decir, paz y santidad.

Sabemos que el color se produce por la refracción de la luz. El rojo, el amarillo y el azul son los tres colores primarios. Otros colores se pueden mezclar con estos tres colores. Usando otra forma de pensar, utilizar cambios de color para expresar efectos de luces y sombras sin duda acercará nuestras obras a la realidad.

Los colores representan diferentes emociones y tienen diferentes significados simbólicos. Estos significados simbólicos son un tema complejo en el intercambio de ideas de las personas y varían dependiendo de la edad, región, era, nación, clase, región económica, capacidad laboral, nivel educativo, costumbres y hábitos, creencias religiosas, entorno de vida y género de la persona. diferencias.

Los colores sólidos no tienen ningún significado práctico. Combinar diferentes colores tendrá diferentes efectos. Por ejemplo, la combinación de verde, dorado y blanco claro puede crear una atmósfera elegante y confortable. La mezcla de azul y blanco puede reflejar una atmósfera suave, elegante y romántica. La combinación de rojo, amarillo y dorado puede crear un ambiente festivo. La combinación de oro y mijo aportará calidez a la gente. Diferentes tareas de diseño crean diferentes combinaciones de colores. Teniendo en cuenta la adaptabilidad de las páginas web, se deben utilizar colores seguros para la web tanto como sea posible.

Sin embargo, no existen reglas determinadas para el uso del color. Si debes utilizar una determinada regla, el efecto será contraproducente. Por experiencia, primero podemos determinar un color principal que pueda expresar el tema y luego usar la aproximación y el contraste del color para completar la combinación de colores de toda la página de acuerdo con las necesidades específicas. Visualmente toda la página debe ser un todo para lograr un efecto visual armonioso y agradable.

Cuarto, estilo combinado

En diseño web, expresamos principalmente el tema a través de la comunicación visual. La forma es un elemento muy importante en la comunicación visual. Ya sean imágenes o texto, todos los elementos de la pantalla pueden tratarse como elementos básicos de la pantalla, como puntos, líneas y superficies. En un trabajo exitoso, se necesita la combinación y coincidencia de puntos, líneas y superficies para formar toda la página.

Normalmente las técnicas de combinación que podemos utilizar incluyen orden, proporción, equilibrio, simetría, continuidad, intervalo, superposición, repetición, cruce, ritmo, rima, inducción, variación, primer plano, reflexión, etc. Todos tienen sus propias características. En el diseño, se debe seleccionar el método de expresión más apropiado de acuerdo con la situación específica, que sea propicio para la interpretación del tema.

A través de la combinación de puntos, líneas y superficies, se resaltan los elementos importantes de la página, se resalta el tema del diseño y se realza la belleza, lo que permite al espectador comprender el tema del diseño mientras siente el belleza, logrando así la tarea de diseño.

El uso inteligente del estilo no sólo puede aportar gran belleza, sino también resaltar la imagen corporativa, organizar orgánicamente varios elementos de la página web e incluso guiar la atención del espectador.

Principio de diseño del verbo (abreviatura de verbo)

El diseño tiene principios. No importa qué método se utilice para combinar los elementos de la imagen, se deben seguir cinco principios: unidad, coherencia, división, contraste y armonía.

La unidad se refiere a la integridad y coherencia del trabajo de diseño. El efecto general del trabajo de diseño es muy importante. En el diseño, no aísles todos los componentes, lo que le dará a la imagen un efecto desordenado de ramas y enredaderas.

Coherencia significa prestar atención a las relaciones entre páginas. En el diseño, debemos hacer uso de la conexión interna y el eco mutuo de los diversos componentes del contenido, prestar atención a la coherencia de todo el estilo de diseño de la página, lograr coherencia visual y psicológica y hacer que todas las partes de todo el diseño de la página Extremadamente armonioso, como si estuviera hecho de una vez.

La segmentación se refiere a dividir la página en varias partes pequeñas, que son visualmente diferentes y fáciles de entender para los espectadores de un vistazo. Para que el espectador pueda ver claramente cuando hay mucha información, es necesario prestar atención a una segmentación eficaz de la imagen. La segmentación no es sólo una necesidad de expresión. Desde otra perspectiva, la segmentación también puede verse como una clasificación y resumen del contenido de la página.

El contraste hace que el diseño sea más vívido a través de conflictos. Hay muchas técnicas contrastantes, tales como: más y menos, curvo y recto, fuerte y débil, largo y corto, grueso y delgado, escaso y denso, virtual y real, primario y secundario, blanco y negro, movimiento y quietud, belleza. y fealdad, Reunirse y dispersarse, etc. Debemos tener cuidado al utilizar el contraste.

Un contraste demasiado fuerte puede destruir fácilmente el sentimiento estético y afectar la unidad.

Armonía significa que toda la página se ajusta a las leyes de la belleza y está integrada. Si un trabajo de diseño es solo una mezcla aleatoria de colores, formas, líneas, etc. Entonces la obra no sólo no tiene "sentido de vida", sino que tampoco puede realizar la función de comunicación del diseño visual en absoluto. La armonía no sólo depende de la forma estructural, sino también de si el efecto visual formado por la obra puede establecer una comunicación con la experiencia visual de las personas y producir la voz del alma. Esta es la clave para un diseño exitoso.

Sexto, optimización de páginas web

En el diseño de páginas web, la optimización de páginas web es un vínculo relativamente importante. Su éxito afectará la velocidad de navegación y la adaptabilidad de la página, y afectará la impresión que la audiencia tenga del sitio web.

En los sitios web de información, el texto es el componente más grande de la página, por lo que la optimización de las fuentes es particularmente importante. Es necesario utilizar una hoja de estilos css para especificar el estilo del texto. Por lo general, especificamos la fuente como Song Dynasty, el tamaño como 12 px y el color depende del color de fondo. En principio debe ser claro y armonioso con toda la página. Sobre un fondo blanco, normalmente utilizamos negro, que es menos probable que cause fatiga visual y garantiza que los visitantes puedan navegar por la web durante mucho tiempo.

Las imágenes son elementos importantes en las páginas web. La optimización de las imágenes puede minimizar su tamaño al tiempo que garantiza la calidad de la navegación y puede duplicar la velocidad de descarga de las páginas web. Con Photoshop6 o Fireworks4, puede cortar la imagen en trozos pequeños y optimizarlos por separado. El formato de salida puede ser gif o jpeg, según la situación específica. Generalmente, optimizamos bloques pequeños con cambios de color complejos en jpegs y optimizamos bloques pequeños de estilo dibujos animados con bloques de colores simples en gifs. Esto está determinado por las características de estos dos formatos.

Las tablas son elementos importantes de la página y el principal medio de diseño de la página. Podemos establecer el ancho, alto, borde, color de fondo, alineación y otros parámetros de la tabla. Muchas veces, configuramos el borde de la tabla en 0 para posicionar elementos en la página o determinar la posición relativa de los elementos en la página. Sabemos que cuando el navegador lee el código HTML original de la página web, solo lo muestra después de leer la tabla completa. Si una tabla grande contiene varias subtablas, las subtablas solo se pueden mostrar juntas después de leer la tabla grande. Cuando visitamos algunos sitios web, esperamos mucho tiempo sin resultados. Por eso pulsamos la tecla "detener" y de repente aparece la página. Por lo tanto, al diseñar tablas de páginas, intente evitar anidar todos los elementos en una tabla y el número de niveles anidados de la tabla debe ser lo más pequeño posible. Cuando se utiliza Dreamweaver para crear una página web, se agregará automáticamente un carácter nulo " " a cada td. Si la celda no se llena con otros elementos, este carácter vacío permanecerá y podrá eliminarse del código fuente después de especificar el ancho o alto del td.

La adaptabilidad de las páginas web es muy importante. Veremos diferentes resultados en diferentes sistemas, diferentes resoluciones y diferentes navegadores, por lo que debemos considerarlos todos al diseñar. Generalmente, cuando creamos páginas web, son de 800*600, y el mejor efecto de navegación también se obtiene con una resolución de 800*600. En otros casos, siempre que sean básicamente consistentes, no habrá grandes problemas.

Después de decir tanto, solo espero que pueda ser de ayuda para las personas que hacen "diseño web". Espero que puedan tener una visión general al hacer páginas web y ser dignos de la palabra "diseño".

★Mejores pasos para crear su propio sitio web☆

Debe tenerse en cuenta que crear su propio sitio web es un proyecto enorme y, en general, problemático. Por eso debemos seguir ciertos pasos paso a paso.

Creo que la estación se puede construir de acuerdo con los siguientes pasos:

1. Primero, configure una carpeta local como ubicación de almacenamiento del sitio web. El mejor nombre es "Mi sitio".

2. Cree algunas carpetas en la carpeta del sitio web, incluidas "imágenes" (para almacenar imágenes, archivos, etc.), y cree varias carpetas más según el contenido de la página web. (También puede crear carpetas para almacenar imágenes y archivos dentro de cada carpeta de contenido).

3. Abra su programa de edición de páginas web (como FP, Dreamwear, etc.).

), cree una nueva página web, guárdela como "index" (página de inicio), repita los pasos anteriores para crear "search", "map" (mapa del sitio), "index02" (introducción al sitio web, etc.). ) en la carpeta del sitio web.

4. Siga los pasos anteriores y luego cree muchas páginas web en la carpeta de categorías del sitio web (y luego ingrese el contenido en las páginas web).

Después de tanto hacer, llega el momento de preparar el contenido. Cree otra carpeta "Archivo" en el disco duro y coloque en ella los documentos, imágenes, programas, archivos y efectos especiales de la página web preparados. (Puedes agregar algunas páginas web dinámicas)

6. Coloca lentamente estos archivos en la página web uno por uno (domina las habilidades)

7. . En este momento necesitas solicitar un nombre de dominio (espacio gratuito, pago). Y coloque su sitio web en los motores de búsqueda y promuévalo en varios foros de mensajes.

8. Sube el sitio web al espacio, elimina los documentos de preparación del examen y ¡listo!

Pero también puedes usar FP para crear un sitio de este tipo:

1. Selecciona un nuevo sitio en FP.

2. Luego establezca el nombre y el título de la página en la navegación.

3. Prepare documentos, imágenes, programas, archivos y efectos especiales de páginas web y enriquézcalos en el sitio web.

4. Solicita un nombre de dominio (espacio gratuito, pago). Y coloque su sitio web en los motores de búsqueda y promuévalo en varios foros de mensajes.

5. Subir el sitio web al espacio y eliminar los documentos de preparación del examen. completo.

Si utilizas Dreamwear para crear un sitio web, ¡será más avanzado! Dreamwear es muy poderoso, los amigos que lo hayan usado antes pueden estudiarlo.

En el diseño de sitios web, las páginas en formato HTML puro a menudo se denominan "páginas estáticas". Los primeros sitios web generalmente estaban compuestos por páginas estáticas. La forma URL de una página web estática suele ser: www.example.com/eg/eg.htm, es decir, su sufijo es. htm,. HTML,. shtml. xml, etc. En las páginas web en formato HTML también pueden aparecer varios efectos dinámicos, como por ejemplo. Formato GIF, FLASH, letras en desplazamiento, etc. Estos "efectos dinámicos" son sólo visuales y son conceptos diferentes de las páginas web dinámicas que se presentarán a continuación.

En el capítulo 3 de la segunda edición de "Fundamentos y práctica del marketing en Internet" "Construcción de sitios web corporativos para el marketing en Internet", se propone el impacto del uso de páginas web estáticas en los motores de búsqueda. Hay poca introducción a las páginas web estáticas en sí, especialmente a las características de las páginas web estáticas. El sitio web de enseñanza de marketing online (www.wm23.com) resume brevemente las características de las páginas web estáticas de la siguiente manera:

(1) Páginas web estáticas Cada página web tiene una URL fija y el sufijo de la web La URL de la página es una forma común como . htm,. HTML,. shtml y no contiene "?" ;

(2) Una vez que el contenido de la página web se publica en el servidor del sitio web, el contenido de cada página web estática se almacena en el servidor del sitio web independientemente de si el usuario accede a ella. Es decir, la web estática. la página es un archivo realmente almacenado en el servidor. Cada página web es un archivo independiente;

(3) El contenido de las páginas web estáticas es relativamente estable y fácil de recuperar para los motores de búsqueda;

(4) Las páginas web estáticas no tienen soporte de base de datos y el sitio web La carga de trabajo de producción y mantenimiento es pesada y es difícil confiar únicamente en páginas web estáticas cuando el sitio web contiene una gran cantidad de información;

(5) La interacción de páginas web estáticas tiene grandes limitaciones funcionales.

Selección de software de creación de páginas web

Elija la herramienta de edición de páginas web que más le convenga.

Después de comprender los tipos de páginas web y las tecnologías relacionadas, el siguiente paso es elegir la herramienta de edición de páginas web que más le convenga.

Página de inicio

La página frontal producida por Microsoft puede ser la herramienta de edición de páginas web más sencilla, sencilla y potente. Usar un diseño de interfaz típico de Word, siempre que pueda usar Word, es casi equivalente a usar Frontpage. Incluso si no sabes las palabras, no importa. El modo operativo "Lo que ves es lo que obtienes" te permitirá comenzar rápidamente sin tener que aprender la sintaxis HTML.

Pero Frontpage también tiene deficiencias: en primer lugar, la compatibilidad del navegador no es buena y las páginas web producidas no se pueden mostrar normalmente con Netscape; en segundo lugar, se genera una gran cantidad de código basura y el código se eliminará automáticamente; modificado, lo que resulta en algunos La situación es muy inconveniente. En tercer lugar, el soporte para DHTML no es bueno. Pero en cualquier caso, Frontpage es de hecho la mejor herramienta de edición de páginas web básica.

Las versiones comunes incluyen Frontpage98 y Frontpage2000.

Dreamweaver

Dreamweaver es otra herramienta de edición de páginas web o software de diseño de páginas web "Lo que ves es lo que obtienes" de Macromedia. A diferencia de Frontpage, Deamweaver adopta el estilo de diseño de cara flotante de Mac, que puede resultar incómodo para los principiantes. Pero cuando se acostumbre a su funcionamiento, descubrirá que Frontpage no puede igualar la intuición y la eficiencia de Dreamweaver.

Dreamweaver tiene un soporte particularmente bueno para DHTML y puede crear fácilmente muchos efectos de página deslumbrantes. La programación de complementos permite ampliar infinitamente su funcionalidad. Dreamweaver, Flash y Firework son llamados los Tres Mosqueteros de la producción de páginas web de Macromedia. Como son productos de la misma empresa, su funcionalidad está muy estrechamente integrada. La última versión de Dreamweaver UltraDev es compatible con Asp y Jsp. Por tanto, no es exagerado decir que Dreamweaver es la primera opción para la producción avanzada de páginas web.

Las versiones comunes incluyen Dreamweaver 4.0 y Dreamweaver UltraDev 1.0.

Flash

Flash también es un producto de Macromedia, el estándar para gráficos vectoriales interactivos y animación web. Los diseñadores web utilizan Flash para crear hermosas interfaces de navegación de tamaño variable y otros efectos especiales. Creo que todo el que ha visto la tecnología Flash no quiere dominarla. No sólo es fácil de aprender y usar, sino que también puede producir sitios web con muchas animaciones. Es una tecnología prometedora para crear páginas web.

Fireworks, Fireworks

Firework también es un producto de Macromedia y es un verdadero software de dibujo en red. Fireworks está estrechamente integrado con Dreamweaver. Siempre que el editor de imágenes predeterminado de Dreamweaver esté configurado en Fireworks, los archivos modificados en Fireworks se actualizarán inmediatamente en Dreamweaver. Otra característica es cambiar el color de una palabra en el mismo cuadro de texto. Por supuesto, Fireworks puede hacer referencia a todos los filtros de Photoshop y puede importar imágenes directamente en formato PSD. Para dibujar, equivale a combinar las funciones de Photoshop (procesamiento de mapas de bits) y CorelDRAW (dibujo vectorial). Efectos como sombras, botones tridimensionales, etc. , que es muy popular en las páginas web, solo requiere clics del mouse y no necesita depender de filtros externos como KPT. Además, Fireworks es totalmente compatible con los 16 modos de color de las páginas web y proporciona un uso y conversión seguros de la rueda de colores. Es muy conveniente cortar gráficos y crear imágenes con un fondo transparente, tamaño pequeño y apariencia hermosa. Modificar gráficos en Fireworks también es muy sencillo. No es necesario abrir Photoshop y CorelDRAW... y usarlos con otros tipos de software al mismo tiempo, simplemente cambie para cambiar.

Dreamweaver, Flash y Firework son llamados los Tres Mosqueteros de la producción de páginas web. Cuando estos tres programas se utilizan juntos, crean una página web muy hermosa.

gifanimator

Ulead GIF Animator 4.0 es actualmente la herramienta de animación GIF más rápida y fácil de usar, y proporciona funciones de alto nivel como organización de animaciones, edición, efectos especiales y optimización. en un paquete de software.

Gianimator admite casi todos los formatos de archivos principales, incluidos archivos de vídeo, y permite la salida a Windows AVI, películas QuickTime, animaciones de Autodesk o secuencias de imágenes. Los usuarios pueden generar código HTML apropiado para incrustar animaciones en páginas web y pueden empaquetar animaciones en archivos EXE independientes, publicarlas por correo electrónico y verlas en cualquier lugar.

Crear una página de inicio

Crear una página de inicio no es más que agregar texto, imágenes y enlaces, lo cual no es diferente a usar Word. ¡Después de un simple aprendizaje, crearás una página de inicio! Pero hay demasiadas cosas que aprender para crear una página de inicio de alto nivel, pero en resumen es HTML, producción de gráficos, producción de animaciones, producción de efectos especiales de página y producción de programas en segundo plano.

Solicite espacio en la página de inicio y cargue su página de inicio.

Las páginas que creamos se colocan en nuestros propios ordenadores y otros no pueden verlas. Para que otros puedan ver nuestras páginas, debemos colocarlas en una computadora (servidor) que esté siempre conectada a Internet. Puede solicitar espacio en la página de inicio de sitios web que brinden servicios espaciales. Cuando tengamos espacio, podremos cargar nuestras páginas utilizando el software de herramienta FTP (Protocolo de transferencia de archivos) responsivo. De esta manera, puedo permitir que todos compartan mi maravillosa página.

Las herramientas FTP comunes incluyen cuteFTP, jumpFTP, etc. , sus funciones y uso son similares. Para un uso específico, consulte los artículos de este sitio.

Tal vez tu página de inicio inicial sea muy simple, pero este es tu primer paso y un buen comienzo. Luego podrás aprender paso a paso: ¿Cómo hacer una página web hermosa? ¿Cómo crear animación? Para los principiantes, no piensen de inmediato: ¿Cómo consiguieron una página web tan hermosa? Realmente quiero hacerlo de inmediato, así que aprenderé páginas web complejas de una vez. Entonces te resultará difícil crear una página web. Si te rindes después de aprenderla dos veces, nunca aprenderás a crear una página de inicio. . Cuando comencé, durante mucho tiempo estuve feliz de que mi página web pudiera generar enlaces, así que me interesé más. Recuerda: ve paso a paso y no pienses en convertirte en un maestro de una vez, de lo contrario será difícil convertirte en un maestro.