Cómo aprender a producir páginas web

Cómo diseñar una página web

En términos de comprensión del diseño de páginas web, muchas personas todavía parecen estar estancadas en el apogeo de la 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 el diseño de páginas web...

En términos de comprensión del diseño de páginas web, muchas personas todavía parecen estar estancado en el apogeo de la producción de páginas web. Creo que mientras utilice bien el software de creación de páginas web, puedo 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 las páginas 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, nuestro propio sentido de la belleza y la comprensión de la página.

En primer lugar, debemos aclarar las tareas del diseño web.

1. La tarea del diseño

El diseño es una actividad estética, y los trabajos de diseño exitosos son generalmente muy 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. La naturaleza del sitio es diferente y las tareas de diseño también son diferentes. Formalmente, los sitios se pueden dividir en las siguientes tres categorías.

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

La segunda categoría son los sitios web que combinan información e imagen, como algunas empresas más grandes, universidades nacionales, etc. 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. Sin embargo, a juzgar por la situación actual, se sospecha que este tipo de sitio web es de mala calidad.

La tercera categoría son los sitios web basados ​​en imágenes, como algunas pequeñas y medianas empresas o unidades. Este tipo de sitios web generalmente son pequeños, algunos tienen varias páginas y las funciones a implementar son relativamente sencillas. La principal tarea del diseño web es resaltar la imagen corporativa. Este tipo de sitio web requiere que los diseñadores tengan estándares artísticos más altos.

Por supuesto, esta es sólo una visión general y la situación específica debe analizarse en detalle. 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 aclarar la tarea de diseño, lo siguiente que debemos pensar es cómo completarla.

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 puede completar en papel. La segunda parte es la producción de páginas web, este proceso se realiza en la computadora.

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, que contienen texto, imágenes e incluso animaciones. Lo 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 una computadora bien configurada, también se requiere un software. No podemos decir simplemente si un software es bueno o malo, siempre que el diseñador lo encuentre conveniente y cómodo de usar, se le puede llamar buen software. Por supuesto, debe cumplir con los requisitos del diseñador. El software que uso habitualmente es Dreamweaver de Macromedia, Fireworks, Flash y Photoshop e imageready de Adobe. Todos ellos son muy buenos programas. Lo siguiente que tenemos 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 determinamos el esquema general de la página en el boceto, la inspiración suele generarse 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 fracasará. 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.

3. El uso del color

El color es algo extraño, es hermoso y rico, y puede despertar la percepción espiritual 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 y luce magnífico, noble y brillante. El verde es el color de la vegetación de la naturaleza, que significa naturaleza pura y crecimiento, y simboliza tranquilidad, paz y seguridad, como los alimentos verdes. El morado es un símbolo de nobleza y solemnidad. El blanco puede dar a las personas un sentimiento de pureza e inocencia y representa 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 combinar con estos tres colores. Otra forma de pensar, podemos utilizar cambios de color para expresar los efectos de luces y sombras, lo que sin duda acercará nuestras obras a la realidad.

Los colores representan diferentes emociones y tienen diferentes significados simbólicos. Estos significados simbólicos son una cuestión compleja en el intercambio de ideas de las personas y varían según la edad, la región, la era, el origen étnico, la clase, la región económica, la capacidad laboral, el nivel educativo, las costumbres, las creencias religiosas, el entorno de vida y las diferencias de género de la persona. diferente.

El color puro no tiene significado práctico. Cuando se combina con diferentes colores, producirá diferentes efectos. Por ejemplo, combinar el verde con el dorado y el 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 granate aportará calidez a las personas. Dependiendo de la tarea de diseño, la combinación de colores también variará. 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 de los colores. 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. Toda la página debe estar integrada visualmente para lograr un efecto visual armonioso y agradable.

4. Combinación de formas

En diseño web, expresamos el tema principalmente a través de la comunicación visual. En la comunicación visual, la forma es un elemento muy importante. Independientemente de si se trata de una imagen o texto, todos los elementos de la imagen pueden tratarse como los elementos básicos de la imagen: puntos, líneas y superficies. En un trabajo exitoso, se requiere la combinación y coincidencia simultánea de puntos, líneas y superficies para construir 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, intersección*, 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 adecuado de acuerdo con la situación específica que favorezca la expresión del tema.

A través de la combinación de puntos, líneas y superficies, se pueden resaltar elementos importantes de la página, se puede resaltar el tema del diseño y se puede realzar la belleza, permitiendo al espectador comprender el tema. del diseño mientras siente la belleza, logrando así la tarea de diseño.

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

5. Principios del diseño

El diseño tiene principios. No importa qué método se utilice para combinar los elementos en la imagen, se deben seguir cinco principios principales: 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 crucial. No aísles los distintos componentes del diseño, de lo contrario la imagen mostrará un efecto desordenado con ramas y ramas.

Coherencia significa prestar atención a la relación entre páginas. En el diseño, se debe utilizar la conexión interna del contenido y el eco mutuo de la expresión de cada componente, y se debe prestar atención a la coherencia de todo el estilo de diseño de la página para lograr coherencia visual y psicológica, de modo que todas las partes de Todo el diseño de la página es extremadamente armonioso. Es como hacerlo de una sola vez.

La segmentación se refiere a dividir la página en varias partes pequeñas. Hay diferencias visuales entre las partes pequeñas, para que el espectador pueda verlas claramente de un vistazo. Cuando hay mucha información, para que el espectador pueda ver con claridad, se debe prestar atención a segmentar eficazmente la imagen. La segmentación no es sólo una necesidad de representación. Desde otra perspectiva, la segmentación también puede considerarse como una clasificación del contenido de la página.

El contraste es hacer que el diseño sea más vibrante a través de contradicciones y conflictos. Existen muchas técnicas de contraste, tales como: más y menos, curvo y recto, fuerte y débil, largo y corto, grueso y delgado, escaso y denso, vacío y sólido, primario y secundario, blanco y negro, movimiento y quietud, belleza. y fealdad, Reunir y dispersar, etc. Debe tener cuidado al utilizar contraste. Demasiado contraste puede destruir fácilmente la sensación estética 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 simplemente una mezcla aleatoria de colores, formas, líneas, etc., entonces el trabajo no sólo no tendrá "sentido de vida", sino que tampoco podrá 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 una resonancia del alma. Ésta es la clave del éxito del diseño.

6. 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 más importante. Su éxito afectará a la velocidad de navegación y a la adaptabilidad de la página, y afectará a la impresión que el visitante 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 estilo CSS para especificar el estilo del texto. Por lo general, especificamos la fuente como Song Dynasty y el tamaño como 12 px. El color depende del color de fondo. En principio, debe ser claramente visible y armonioso con todo. página. Sobre un fondo blanco, generalmente utilizamos negro, que es menos probable que cause fatiga visual y garantiza que los espectadores puedan navegar por la web durante un período de tiempo más largo.

Las imágenes son un elemento importante en las páginas web. La optimización de las imágenes puede reducir su tamaño al mínimo garantizando al mismo tiempo la calidad de navegación, lo que puede aumentar exponencialmente la velocidad de descarga de las páginas web. Puede utilizar Photoshop6 o Fireworks4 para 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 más complejos en jpegs y optimizamos bloques pequeños de estilo dibujos animados con solo bloques de colores simples en gifs. Esto está determinado por las características de estos dos formatos.

La tabla es un elemento importante en 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 los elementos en la página o para determinar la posición relativa de cada elemento en la página. Sabemos que cuando el navegador lee el código HTML original de la página web, lee la tabla completa antes de mostrarla. Si una tabla grande contiene varias subtablas, debe esperar hasta que se lea la tabla grande antes de que las subtablas puedan mostrarse juntas. Esta es la razón por la que cuando visitamos algunos sitios esperamos mucho tiempo sin obtener resultados y cuando presionamos el botón "Detener", la página se muestra de repente. Por lo tanto, cuando diseñamos tablas de páginas, debemos intentar evitar anidar todos los elementos en una tabla y mantener los niveles de anidación de las tablas lo más pequeños 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 está llena con otros elementos, este carácter vacío permanecerá después de especificar el ancho o alto del td, se puede eliminar en el código fuente.

La adaptabilidad de las páginas web es muy importante. En diferentes sistemas, diferentes resoluciones y diferentes navegadores, veremos diferentes resultados, por lo que se deben tener consideraciones generales al diseñar. Generalmente, creamos páginas web a 800*600, y el mejor efecto de navegación también es con una resolución de 800*600. En otros casos, solo necesita ser básicamente consistente y no ocurrirán problemas importantes.

Dicho todo esto, solo espero que pueda ser de ayuda para las personas que hacen "diseño web". Espero que puedan tener una visión global al hacer páginas web y ser dignos de la palabra "diseño".

★Mejores pasos para crear tu propio sitio web☆

Debe tenerse en cuenta que crear tu propio sitio web es un proyecto enorme y, en general, problemático. Por lo que deberás seguir ciertos pasos paso a paso.

Creo que se pueden seguir los siguientes pasos para crear un sitio web:

1. Primero configure una carpeta localmente como lugar para almacenar el sitio web. El mejor nombre es "Mis sitios".

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 colocar algunas carpetas para almacenar imágenes y archivos en 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 y. guárdelo como "índice" (página de inicio), repita los pasos anteriores y cree "búsqueda" (búsqueda), "mapa" (mapa del sitio) e "index02" (introducción al sitio web, etc.) en la carpeta del sitio web.

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

5. El contenido está arriba. Cree otra carpeta "Archivo" en el disco duro y coloque en ella los documentos, imágenes, programas, archivos y efectos de páginas web preparados. (Puede agregar algunas páginas web dinámicas)

6. Coloque lentamente estos archivos en la página web uno por uno (debe dominar las habilidades)

7. y eso es todo. En este momento, debes solicitar un nombre de dominio (ya sea espacio gratuito o de pago). Y coloque su sitio web en el motor de búsqueda y promuévalo en varios foros de mensajes.

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

Sin embargo, también puedes utilizar FP para crear un sitio web como este:

1. Selecciona un nuevo sitio en FP.

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

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

4. Solicita un nombre de dominio (ya sea de espacio gratuito o de pago). Y coloque su sitio web en el motor de búsqueda y promuévalo en varios foros de mensajes.

5. Sube el sitio web al espacio y elimina los archivos de preparación. completo.

Si utilizas Dreamwear para crear tu sitio web, ¡será aún más avanzado! La función de Dreamwear es muy poderosa, los amigos que la hayan instalado pueden estudiarla.

En el diseño de sitios web, las páginas web en formato HTML puro a menudo se denominan "páginas web estáticas". Los primeros sitios web generalmente se creaban a partir de páginas web estáticas. El formato de URL de una página web estática suele ser: www.example.com/eg/eg.htm, que tiene el sufijo .htm, .html, .shtml, .xml, etc. También pueden aparecer varios efectos dinámicos en páginas web en formato HTML, como animaciones en formato GIF, FLASH, letras en desplazamiento, etc. Estos "efectos dinámicos" son solo 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 orientados al marketing en Internet", se propone el impacto del uso de páginas web estáticas en los motores de búsqueda. páginas web en sí Hay relativamente poca introducción, especialmente ninguna introducción especial a las características de las páginas web estáticas.

El sitio web de enseñanza de marketing en Internet (www.wm23.com) resume brevemente las características de las páginas web estáticas de la siguiente manera:

(1) Cada página web estática tiene una URL fija y la URL de la página web comienza con . htm, . Los formularios comunes como html y .shtml tienen el sufijo "?";

(2) Una vez que el contenido de la página web se publica en el servidor del sitio web, independientemente de si hay acceso de un usuario, el el contenido de cada página web estática se almacena en el servidor del sitio web, es decir, las páginas web estáticas son archivos realmente almacenados en el servidor y cada página web es un archivo independiente.

(3) El contenido; Las páginas web estáticas son relativamente estables, por lo que los motores de búsqueda pueden recuperarlas fácilmente;

(4) Las páginas web estáticas no están respaldadas por bases de datos y requieren una gran carga de trabajo en la producción y el mantenimiento del sitio web. cuando el sitio web tiene una gran cantidad de información, depende completamente del método de producción de páginas web estáticas.

(5) La interactividad de las páginas web estáticas tiene mayores limitaciones en términos de funcionalidad.

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

u Elija una herramienta de edición de páginas web que se adapte a sus necesidades

Después de comprender los tipos de páginas web y las tecnologías relacionadas, el siguiente El primer paso es elegir una herramienta de edición de páginas web que se adapte a sus necesidades.

Frontpage

Frontpage es producido por Microsoft y es probablemente la herramienta de edición de páginas web más simple, fácil y potente. Al adoptar un diseño de interfaz típico de Word, siempre que sepa cómo usar Word, será casi igual a usar Frontpage. No importa si no comprende Word, el método de operación "lo que ve es lo que obtiene" lo ayudará a comenzar rápidamente y no necesita aprender la sintaxis HTML.

Pero Frontpage también tiene sus deficiencias: en primer lugar, la compatibilidad del navegador no es buena y las páginas web creadas a menudo no se pueden mostrar normalmente con Netscape; en segundo lugar, se genera una gran cantidad de código basura y el código fallará; modificarse automáticamente, lo que genera inconvenientes extremos en algunos casos, nuevamente, 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 son 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", producida por Macromedia. A diferencia de Frontpage, Deamweaver adopta el estilo de diseño de panel 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 eficiencia de Dreamweaver.

Dreamweaver tiene un soporte particularmente bueno para DHTML y puede crear fácilmente muchos efectos de página deslumbrantes. El diseño del programa plug-in permite ampliar infinitamente sus funciones. Dreamweaver, Flash y Firework también son conocidos como los tres mosqueteros de Macromedia para la producción de páginas web. Dado que son productos de la misma empresa, tienen una integración muy estrecha en cuanto a funcionalidad. 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 son Dreamweaver4.0 y Dreamweaver UltraDev 1.0

flash

Flash también es un producto de Macromedia Flash es una herramienta para gráficos vectoriales interactivos. Animación web estándar.

Los diseñadores web utilizan Flash para crear hermosas interfaces de navegación de tamaño variable y otros efectos sofisticados. 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 crear sitios web con muchas animaciones y combina sonido y color. Es una tecnología de producción de páginas web prometedora.

fuegos artificiales

Firework también es un producto de Macromedia y es un software de dibujo de páginas web real. Fireworks y Dreamweaver están estrechamente integrados 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 la posibilidad de cambiar el color de palabras individuales en el mismo cuadro de texto. Por supuesto, Fireworks puede hacer referencia a todos los filtros de Photoshop y puede importar directamente imágenes en formato PSD. Se utiliza 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 son muy populares en las páginas web, solo es necesario hacer clic con el mouse y no es necesario depender de filtros externos como KPT. Además, Fireworks es totalmente compatible con el modo de color hexadecimal de las páginas web y proporciona el uso y la conversión de ruedas de color seguras. Si desea cortar gráficos, realice un mapeo de imágenes (Image Map) y haga que el fondo sea transparente, y si lo desea. Para que la imagen sea pequeña y hermosa, puedes hacerlo en Fireworks. Son muy convenientes y es fácil modificar los gráficos. No es necesario abrir Photoshop, CorelDRAW... ni otros programas al mismo tiempo y alternar entre ambos.

Dreamweaver, Flash y Firework son llamados los tres espadachines de la producción de páginas web. Si usas los tres software juntos, crearás una página web muy hermosa

gifanimator

Ulead GIF Animator 4.0 es la herramienta de animación GIF más rápida y fácil de usar disponible, y proporciona funciones de primer nivel para la orquestación, edición, efectos especiales y optimización de la animación en un solo paquete. GIF Animator 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 el código HTML apropiado para incrustar la animación en una página web, y la animación se puede empaquetar en un archivo EXE independiente para publicarlo por correo electrónico y verlo en cualquier lugar.

u Crear una página de inicio

Crear una página de inicio no es más que agregar texto, agregar imágenes y agregar enlaces. Después de un simple aprendizaje, lo estará. capaz de hacer una página de inicio! Sin embargo, 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.

u Para solicitar espacio en la página de inicio, cargue la página de inicio que creó.

Las páginas que creamos se colocan en nuestras propias computadoras y otros no pueden verlas. Para que otros puedan ver las páginas que creamos, debemos ponerlas en una computadora (servidor) que esté siempre conectada a Internet. Puede solicitar espacio en la página de inicio de sitios que brinden servicios espaciales. Una vez que tenga espacio, puede utilizar el software de herramienta FTP (Protocolo de transferencia de archivos) correspondiente para cargar las páginas que creamos. De esta manera, todos podrán compartir mis maravillosas páginas.

Las herramientas FTP comunes incluyen cuteFTP, jumpFTP, etc. Sus funciones y métodos de uso son relativamente similares. Para conocer métodos de uso específicos, consulte los artículos correspondientes en este sitio.

Tal vez la página de inicio con la que empezaste sea muy simple, pero este es tu primer paso y un buen comienzo. Luego podrás aprender paso a paso: ¿cómo hacer que la página web sea más hermosa? ¿Cómo crear animación? Para los principiantes, no piensen de inmediato: vi tal o cual hermosa página web, ¿cómo se hizo? Realmente quiero hacerlo de inmediato, así que estudiaré páginas web complejas de inmediato. De esta manera, descubrirás que crear páginas web es difícil y, después de aprenderlo dos veces, te rendirás. aprende a hacer una página de inicio. Creo que al principio estuve feliz durante mucho tiempo de que mi página web pudiera generar enlaces, así que me interesé más. Recuerda: hazlo paso a paso y no quieras ser un maestro de una vez, de lo contrario será difícil convertirte en un maestro.