¿Qué es ASP? Quiero aprender a crear un sitio web. ¿Qué debo hacer primero para comenzar? ¿Qué conocimientos necesito?

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 un buen software de creació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 web. Creo que siempre que utilice un buen 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 web. Lo más importante en el diseño web no es la aplicación de software, sino nuestra comprensión del diseño web y el nivel de diseño y producción, nuestra propia conciencia estética y comprensión de las páginas web.

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

1. La tarea del diseño

El diseño es una actividad estética y las obras de diseño exitosas generalmente tienen una fuerte calidad artística. 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 es el tema que el diseñador quiere expresar y las funciones a realizar. La naturaleza del sitio web es diferente y 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 proporciona a los visitantes mucha información y genera mucho tráfico. Por lo tanto, debemos prestar atención a cuestiones como la divisió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 de información del sitio web anteriores, sino también resaltar la imagen de la empresa y la institución. Pero a juzgar por la situación actual, este tipo de sitio web parece 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 de pequeña escala, algunos tienen solo unas pocas páginas y las funciones que deben implementarse son relativamente simples. La tarea principal del diseño web es resaltar la imagen corporativa. La principal tarea del diseño web es resaltar la imagen corporativa. Este tipo de sitio web requiere un alto nivel de estética por parte del diseñador.

Por supuesto, esta es sólo una visión general y la situación específica debe analizarse en detalle. Los diferentes sitios web deben tratarse de manera diferente. No olvides el punto más importante que son los requisitos del cliente, que también pertenecen a la tarea de diseño.

Después de aclarar 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 web, que se puede realizar en papel. La segunda parte es la creación de la página web, que se realiza en una computadora.

El primer paso para diseñar una página de inicio es diseñar el diseño. Podemos editar páginas web como si editáramos periódicos o revistas tradicionales. Hay texto, imágenes e incluso animaciones en la página web. Lo que tenemos que hacer es colocar las imágenes y el texto de la manera más adecuada en diferentes ubicaciones de la página web. . Además de un ordenador bien equipado, también es necesario un software. No es fácil decir si el software es bueno o malo, siempre que sea fácil de usar y comenzar 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 de Macromedia, Fireworks, Flash y Photoshop e ImageReady de Adobe. Todos ellos son muy buenos programas. A continuación, lo que tenemos que hacer es convertir el plano de diseño en realidad mediante el uso de software, y la integración final generalmente se realiza en Dreamweaver. Aunque en el boceto hemos determinado las líneas generales de la página, la inspiración suele surgir 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 del diseño.

3. El uso del color

El color es algo extraño, es hermoso y rico y puede despertar la percepción espiritual de las personas. 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, significa naturaleza pura y crecimiento, 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 una sensación de pureza y pureza, indicando 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. Otra forma de pensar es que podemos utilizar cambios de color para expresar el efecto 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 los intercambios de ideas de las personas y varían según la edad, la región, la época, el origen étnico, la clase, la región económica, la capacidad laboral, la educación, las costumbres, las creencias religiosas, el entorno de vida, las diferencias de género, etc.

El color puro no tiene ningún significado práctico y diferentes combinaciones de colores producirán diferentes efectos. Por ejemplo, combinar el verde con el amarillo 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 colores dorado y maíz dará a la gente una sensación cálida. Los esquemas de color varían según la tarea de diseño. 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 hay que utilizar una determinada regla, el efecto será contraproducente. Por experiencia, primero podemos determinar un color principal que pueda expresar el tema y luego aplicar aproximación y contraste de color de acuerdo con las necesidades específicas para completar la combinación de colores de toda la página. Toda la página debe integrarse visualmente en un todo, 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 necesita la misma combinación y coincidencia 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, intervalo, ritmo, rima, inducción, cambio, primer plano, contraste, etc. cada uno de ellos tiene sus propias características. En el diseño se debe seleccionar el medio de expresión más adecuado según la situación específica, para facilitar la expresión del tema.

A través de la combinación de puntos, líneas y superficies, se resaltan los elementos importantes del diseño, se resalta el tema del diseño y se mejora la sensación estética, para que el espectador pueda entender 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. También puede organizar orgánicamente varios elementos en la página web e incluso puede guiar la atención del espectador.

5. Principios del diseño

El diseño se basa en principios. No importa qué combinación de elementos haya en la imagen, debe seguir cinco principios: unidad, coherencia, segmentació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, cada componente no se puede aislar ni dispersar, lo que hará que la imagen parezca un efecto desordenado.

Coherencia significa prestar atención a la relación entre páginas. Al diseñar, debemos hacer uso de la conexión interna en el contenido y la expresión mutua en la forma de cada componente, y prestar atención a la consistencia, coherencia visual y psicológica de todo el estilo de diseño de la página, de modo que todas las partes del diseño completo de la página sean extremadamente armonioso, como un soplo de aire fresco.

La segmentación se refiere a dividir la página en varias partes pequeñas. Las partes pequeñas se diferencian visualmente para que los espectadores puedan verlas de un vistazo. En una gran cantidad de información, para que los espectadores la comprendan de un vistazo, debemos prestar atención a una segmentación eficaz de las imágenes. La segmentación no es sólo una necesidad de representación. Dicho de otro modo, la segmentación también puede verse como una forma de categorizar el contenido de una página.

El contraste hace que el diseño sea más dinámico a través de la contradicción y el conflicto. 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, vacío y sólido, primario y secundario, blanco y negro, movimiento y quietud, belleza. y fealdad, reunión y dispersión, etc. Tenga cuidado al utilizar contraste. Demasiado contraste 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 simplemente una mezcla aleatoria de colores, formas, líneas, etc., entonces el trabajo no sólo no tiene "sentido de vida", sino que tampoco puede realizar la función de comunicación del diseño visual. La armonía depende no sólo de la estructura formal, 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 el canto del alma. Esta es la clave del éxito o fracaso 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 relativamente importante. Su éxito o fracaso afectará la velocidad de navegación y la adaptabilidad de la página, y afectará 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, especificaremos la fuente como Song Dynasty, el tamaño como 12 px y el color depende del color de fondo. En principio, debe ser visible y armonioso con el. página entera. 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 de las páginas web. La optimización de imágenes puede aumentar exponencialmente la velocidad de descarga de páginas web al minimizar el tamaño de la imagen y al mismo tiempo garantizar la calidad de navegación. Utilice Photoshop6 o Fireworks4 para cortar la imagen en trozos pequeños y luego optimizarlos individualmente. El formato de salida puede ser gif o jpeg, según el caso. Generalmente, optimizamos bloques pequeños con cambios de color complejos en jpegs y optimizamos bloques de estilo de dibujos animados con solo bloques de colores simples en gifs. Esto está determinado por las características de los dos formatos.

La tabla es un elemento importante 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, estableceremos el borde de la tabla en 0 para colocar los elementos de la página o determinar la posición relativa de los elementos de la página. Sabemos que cuando el navegador lee el código HTML original de la página web, primero lee la tabla completa y luego la muestra. Si una tabla grande contiene varias subtablas, debe esperar hasta que se lea la tabla grande antes de que las subtablas puedan mostrarse juntas. Cuando visitamos algunos sitios web, esperamos mucho tiempo sin resultados. Esta es la razón por la que la página no se puede mostrar después de presionar el botón "Detener". Por lo tanto, cuando diseñamos tablas de páginas, debemos intentar evitar anidar todos los elementos en una tabla y reducir el nivel de anidación de la tabla tanto como sea posible. Cuando utiliza Dreamweaver para crear una página web, se agrega automáticamente un carácter nulo "" a cada td. Si la celda no se completa con otros elementos, el carácter nulo se conserva y se puede eliminar en el código fuente después de especificar el ancho o alto del td.

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 en cuenta consideraciones integrales al diseñar. Generalmente, la resolución de las páginas web que producimos es 800*600, y el mejor efecto de navegación también es una resolución de 800*600. En otros casos, siempre que sea básicamente consistente, no habrá grandes problemas.

Después de decir tanto, solo espero que pueda ser útil para las personas que hacen "diseño web". Espero que puedan hacer páginas web desde una perspectiva holística y que sean dignas de la palabra "diseño".

★Mejores pasos para crear un sitio web usted mismo☆

Cabe señalar que crear un sitio web usted mismo es un proyecto enorme y, en general, más problemático. Por lo tanto, se debe hacer paso a paso según ciertos pasos.

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

1. Primero, crea una carpeta local como lugar para almacenar el sitio web. Es mejor llamarlo "Mi sitio".

2. Cree varias carpetas en la carpeta del sitio web, incluidas "imágenes" (utilizadas 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 que almacenen 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 agréguela. Guárdelo como "índice" (página de inicio), repita los pasos anteriores y cree "búsqueda" (búsqueda), "mapa" (mapa del sitio), "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 (y luego ingrese el contenido en la página web)

5. Prepárate para el contenido. Cree otra carpeta "Archivo" en el disco duro y coloque en ella los documentos, imágenes, programas, archivos, efectos especiales de páginas web, etc. (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. lleno, lo hará. Eso es casi todo. En este momento, debe solicitar un nombre de dominio (espacio libre, tarifas adicionales son suficientes). 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 archivos de preparación y ¡listo!

Pero también puedes usar FP para crear un sitio web como este:

1. Selecciona un nuevo sitio web 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, efectos especiales de páginas web, etc., y rellénelos todos en el sitio web.

4. Solicite un nombre de dominio (espacio libre, tarifas adicionales son suficientes). Y coloque su sitio web en motores de búsqueda y en varios foros de mensajes para promocionarlo.

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

Si utilizas Dreamwear para crear un sitio web, ¡será aún más avanzado! Las funciones de Dreamwear son muy poderosas, los amigos que lo hayan instalado pueden aprender de él.

En el diseño de sitios web, las páginas web en formato HTML puro a menudo se denominan "páginas web estáticas" y los primeros sitios web generalmente se creaban a partir de páginas web estáticas. Las páginas web estáticas suelen tener la forma de URL: www.example.com/eg/eg.htm, es decir, con .htm, .html, .shtml, .xml, etc. como sufijos. En las páginas web en formato HTML, pueden aparecer varios efectos dinámicos, como animación en formato .GIF, FLASH, letras en desplazamiento, etc. Estos "efectos dinámicos" son solo visuales y son un concepto diferente de las páginas web dinámicas que se presentarán a continuación.

En el tercer capítulo de la segunda edición de "Fundamentos y práctica del marketing en Internet", "Construcción de sitios web comerciales para el marketing en Internet", se propone el uso de páginas web estáticas para motores de búsqueda. Las páginas web estáticas en sí tienen 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 de una página web estática tiene una URL fija y la página web La URL comienza con .htm. Los formularios comunes como .html y .shtml son sufijos y no contienen "?".

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

(3) El contenido de las páginas web estáticas es relativamente estable, por lo que es fácil de recuperar mediante búsqueda. motores;

(4) Recuperación;

(4) Las páginas web estáticas no tienen el soporte de una base de datos y la carga de trabajo en la producción y el mantenimiento del sitio web es relativamente grande. Por lo tanto, cuando la cantidad de información del sitio web es grande, es más difícil confiar completamente en páginas web estáticas;

(5) Las páginas web estáticas son altamente interactivas y tienen grandes limitaciones funcionales.

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

uElija la herramienta de edición de páginas web adecuada

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

Frontpage

Frontpage puede ser el editor de páginas web más sencillo, sencillo y potente de Microsoft. Tiene una interfaz típica de Word, por lo que si sabes cómo usar Word, prácticamente ya estás usando Frontpage. Incluso si no conoce Word, el enfoque WYSIWYG hace que comenzar sea fácil y no necesita aprender la sintaxis HTML.

Pero Frontpage también tiene sus defectos: en primer lugar, la compatibilidad del navegador no es buena y las páginas web creadas a menudo no se pueden mostrar normalmente con el navegador Netscape; en segundo lugar, genera código basura y lo modifica automáticamente. , causando 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 más comunes son Frontpage98 y Frontpage2000.

Dreamweaver

Dreamweaver es otro producto de Macromedia. Es una herramienta de edición de páginas web o software de diseño de páginas web "Lo que ves es lo que obtienes". A diferencia de Frontpage, Dreamweaver está diseñado con un diseño flotante para Mac, lo que puede resultar confuso para los principiantes. Pero una vez que se acostumbre a su funcionamiento, descubrirá que Frontpage no puede igualar la intuición y eficiencia de Dreamweaver.

La compatibilidad de Dreamweaver con DHTML es particularmente buena y puedes crear fácilmente muchos efectos de página deslumbrantes. Los complementos están diseñados para hacer posible una expansión ilimitada de su funcionalidad. Dreamweaver, Flash y Firework también son conocidos como los tres mosqueteros de Macromedia para la producción de páginas web. Debido a que son productos de la misma empresa, están muy integrados en términos de funcionalidad. El último Dreamweaver UltraDev es compatible con Asp y Jsp, por lo que no es exagerado decir que Dreamweaver es la primera opción para la producción avanzada de páginas web.

Las versiones más comunes de Dreamweaver son Dreamweaver 4.0 y Dreamweaver UltraDev 1.0

flash

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 interesantes. Creo que cualquiera que haya visto la tecnología Flash no querrá dominarla. No sólo es fácil de aprender y usar, sino que también puede producir una gran cantidad de animaciones de sitios web con 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 está estrechamente relacionado con Dreamweaver. Siempre que el editor de imágenes predeterminado de Dreamweaver esté configurado en Fireworks, los archivos modificados en Fireworks cambiarán inmediatamente. 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 capacidad de cambiar el color de texto individual dentro del mismo cuadro de texto. Por supuesto, Fireworks puede hacer referencia a todos los filtros de Photoshop o puede importar directamente imágenes PSD. Se utiliza para dibujar y equivale a combinar las funciones de Photoshop (procesamiento matricial de bits) y CorelDRAW (dibujo de gráficos vectoriales). También se pueden crear efectos web populares, como sombras y botones tridimensionales, con solo unos pocos clics del mouse. Efectos como este se pueden lograr con solo un clic del mouse, sin depender de filtros complementarios como KPT. Además, Fireworks es totalmente compatible con el modo de color hexadecimal de las páginas web, lo que proporciona un uso y conversión seguros de la paleta. Necesita cortar gráficos, realizar mapeos de imágenes, hacer que el fondo sea transparente y hacer que la imagen sea pequeña y hermosa. Es muy conveniente hacer esto en Fireworks y también es muy fácil modificar los gráficos. No es necesario abrir Photoshop y CorelDRAW al mismo tiempo... etc. y alternar entre cada software.

Dreamweaver, Flash y Firework son llamados los tres mosqueteros de la producción de páginas web. Estos tres software se pueden utilizar juntos para crear páginas web muy hermosas

gifanimator